* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #e6e8ff;
  background: #0b0a1a;
  --muted: #b8b8dc;
  --line: #393853;
  --pink: #ff4fd8;
  --yellow: #ffd84a;
  --cyan: #4ff0ff;
  --pixel: "Courier New", monospace;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 50% -10%, #2a1a5a, #0b0a1a 65%);
}
body::before {
  content: "";
  position: fixed;
  inset: 60% 0 0;
  background-image: linear-gradient(#ff4fd814 1px, transparent 1px), linear-gradient(90deg, #ff4fd814 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(transparent, black);
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.shell { position: relative; width: min(1200px, 100%); min-height: 100dvh; margin: auto; padding: 20px 28px 12px; display: flex; flex-direction: column; }
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); background: #0b0a1af5; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; letter-spacing: .06em; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--cyan); border-radius: 10px; background: #22224a; color: var(--cyan); font: 900 20px var(--pixel); box-shadow: 0 0 16px #4ff0ff20; }
.brand small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.header-note { font: 700 10px var(--pixel); letter-spacing: .08em; color: var(--muted); }
main { flex: 1; display: flex; flex-direction: column; padding: 22px 0; }
.welcome { text-align: center; }
h1 { display: flex; align-items: center; justify-content: center; gap: .14em; margin: 0; font-size: clamp(28px, 3.5vw, 38px); letter-spacing: .01em; line-height: 1.2; font-weight: 850; }
.welcome-title-text { background: linear-gradient(90deg, #ff8ee5, var(--yellow), var(--cyan)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.welcome-bear { flex: none; width: clamp(40px, 4.5vw, 52px); height: auto; overflow: visible; animation: bear-bob 2.4s ease-in-out infinite; }
.bear-wave { transform-origin: 68px 64px; animation: bear-wave 1.8s ease-in-out infinite; }
@keyframes bear-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bear-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }
.intro { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.apps { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; }
.app { --accent: var(--cyan); position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; border: 2px solid var(--line); border-radius: 18px; background: #121228; transition: transform .18s, border-color .18s, box-shadow .18s; }
.badminton { --accent: #79edab; }
.games { --accent: var(--yellow); }
.camping { --accent: #ff9edd; }
.app:hover, .app:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 0 0 2px #ffffff08, 0 8px 28px color-mix(in srgb, var(--accent) 18%, transparent); }
.app-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.app-copy { position: relative; padding: 60px 48px 16px 20px; background: linear-gradient(transparent, #0b0a1a99 45%, #0b0a1aeb); text-shadow: 0 1px 3px #05050b; }
.app-category { color: var(--accent); font: 800 10px var(--pixel); letter-spacing: .1em; }
.app-status { display: inline-block; margin-left: 12px; padding: 3px 8px; border: 1px solid #ff9edd55; border-radius: 6px; background: #49243c; color: #ffc9e2; font-size: 11px; font-weight: 700; line-height: 1.5; }
h2 { margin: 7px 0; font-size: 20px; letter-spacing: .02em; }
.app p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.app-arrow { position: absolute; bottom: 27px; right: 20px; color: var(--accent); font-size: 24px; }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.8; }
footer a { min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--yellow); color: #121228; z-index: 1; }
.skip-link:focus { top: 12px; }
@media (max-width: 680px) {
  .shell { padding: 12px 14px; }
  header { gap: 10px; padding-bottom: 10px; }
  .brand { gap: 8px; min-height: 40px; font-size: 14px; flex-shrink: 0; }
  .brand-mark { width: 36px; height: 36px; font-size: 17px; }
  .brand small { font-size: 10px; }
  .header-note { display: none; }
  main { display: block; padding: 12px 0; }
  .intro { display: none; }
  .apps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; margin-top: 16px; }
  .app { display: block; padding: 10px; background: linear-gradient(160deg, #22224a, #121228); }
  .app-scene { position: static; height: auto; aspect-ratio: 360 / 160; border-radius: 10px; }
  .app-copy { padding: 12px 24px 12px 10px; background: none; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .welcome-bear, .bear-wave { animation: none; } .app { transition: none; } .app:hover, .app:focus-visible { transform: none; } }
.portal-auth { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
#auth-status { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.auth-button { cursor: pointer; min-height: 44px; padding: 10px 16px; border: 1px solid var(--cyan); border-radius: 9px; background: #4ff0ff; color: #121228; font: inherit; font-size: 13px; font-weight: 700; }
.auth-button.secondary { border-color: #65617e; background: #252440; color: #e6e8ff; }
.auth-button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.auth-notice { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 10px 0 0; }
.auth-notice:empty { display: none; }
#login-dialog { width: min(420px, calc(100% - 32px)); padding: 24px; border: 1px solid #65617e; border-radius: 16px; background: #19182f; color: #e6e8ff; }
#login-dialog::backdrop { background: #05050ab3; }
.auth-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-heading h2 { margin: 0; }
#close-login { width: 44px; height: 44px; font-size: 25px; cursor: pointer; color: inherit; background: #252440; border: 0; border-radius: 8px; }
.auth-hint { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 16px 0; }
#login-form label { display: grid; gap: 8px; margin: 16px 0; font-size: 13px; }
#login-form input { width: 100%; min-width: 0; min-height: 44px; font: inherit; padding: 10px; border: 1px solid #65617e; border-radius: 8px; background: #121125; color: inherit; }
.auth-error { color: #ff9dbb; font-size: 13px; line-height: 1.8; margin: 12px 0; }
@media (max-width: 680px) {
  .portal-auth { gap: 6px 2px; max-width: 55%; }
  #auth-status { flex-basis: 100%; min-width: 0; font-size: 10px; text-align: right; }
  .portal-auth .auth-button { padding: 8px 10px; font-size: 12px; }
  #login-form input { font-size: 16px; }
}