:root {
  --bg:#121318;
  --bg-2:#1a1b21;
  --panel:#1e1f25;
  --panel-hi:#292a2f;
  --surface:var(--panel);
  --surface-2:var(--panel-hi);
  --line:rgba(255,255,255,.08);
  --ink:#e3e1e9;
  --muted:#cbc3d7;
  --muted2:#958ea0;
  --accent:#d0bcff;
  --purple:#4cd7f6;
  --pink:#a078ff;
  --cyan:#4cd7f6;
  --success:#4edea3;
  --lime:var(--success);
  --warning:#d0bcff;
  --gold:var(--warning);
  --danger:#ff5d6c;
  --red:var(--danger);
  --info:var(--cyan);
  --font-sans:'Inter',system-ui,sans-serif;
  --font-display:'Sora','Space Grotesk',var(--font-sans);
  --text-xs:10px;
  --text-sm:12px;
  --text-md:14px;
  --text-lg:18px;
  --text-xl:24px;
  --text-display:clamp(34px,10vw,51px);
  --lh-tight:.98;
  --lh-body:1.6;
  --dur-fast:.18s;
  --dur-base:.28s;
  --dur-enter:.38s;
  --radius:24px;
  --radius-sm:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --wash:rgba(246,241,231,.05);
  --wash-strong:rgba(246,241,231,.1);
  --nav-bg:rgba(16,22,20,.9);
  color-scheme:dark;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}
html[data-theme="light"] {
  --bg:#f3f0fa;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-hi:#e7e2f4;
  --line:rgba(35,24,68,.12);
  --ink:#1a1528;
  --muted:#5c5470;
  --muted2:#847c98;
  --accent:#6d3bd7;
  --pink:#7c4dff;
  --cyan:#007c99;
  --success:#067a52;
  --warning:#6b4ec6;
  --danger:#c4263a;
  --shadow:0 18px 44px rgba(36,24,68,.08);
  --wash:rgba(109,59,215,.06);
  --wash-strong:rgba(109,59,215,.12);
  --nav-bg:rgba(243,240,250,.94);
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  min-width:320px;
  scroll-behavior:smooth
}
body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:radial-gradient(ellipse at 80% -8%,rgba(160,120,255,.22),transparent 32rem),radial-gradient(ellipse at 0% 42%,rgba(76,215,246,.12),transparent 28rem),var(--bg)
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.48
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px
}
a {
  color:inherit
}
.skip-link {
  position:absolute;
  z-index:99;
  top:-4rem;
  left:1rem;
  padding:.8rem 1rem;
  background:var(--ink);
  color:var(--bg);
  border-radius:12px
}
.skip-link:focus {
  top:1rem
}
.app-shell {
  width:min(100%,520px);
  min-height:100svh;
  margin:0 auto;
  padding:env(safe-area-inset-top) 20px calc(94px + env(safe-area-inset-bottom));
  position:relative
}
.app-shell:not(:has(.bottom-nav)) {
  padding-bottom:calc(28px + env(safe-area-inset-bottom))
}
.app-shell.wide {
  width:min(100%,900px)
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0 14px;
  gap:12px
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none
}
.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#121318;
  box-shadow:0 0 16px rgba(160,120,255,.45);
  overflow:hidden
}
.brand-mark img { width:82%; height:82%; object-fit:contain }
.brand-name {
  font:700 15px 'Space Grotesk',sans-serif;
  letter-spacing:-.4px
}
.brand-tag {
  display:block;
  color:var(--muted2);
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:1px
}
.icon-btn,.back-btn {
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  display:grid;
  place-items:center;
  transition:background .2s,border-color .2s
}
.top-tools { display:flex; align-items:center; gap:8px }
.theme-toggle,.music-toggle {
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  color:var(--ink)
}
.theme-icon,.music-icon { display:grid; place-items:center }
.theme-icon-moon,.music-icon-off { display:none }
html[data-theme="light"] .theme-icon-sun { display:none }
html[data-theme="light"] .theme-icon-moon { display:grid }
html[data-audio="running"] .music-icon-on { display:none }
html[data-audio="running"] .music-icon-off { display:grid }
html[data-audio="running"] .music-toggle { color:var(--cyan) }
.icon-btn svg,.back-btn svg {
  width:19px;
  height:19px
}
.eyebrow {
  color:var(--cyan);
  font-weight:800;
  letter-spacing:2px;
  font-size:10px;
  text-transform:uppercase
}
.display {
  font:800 clamp(34px,10vw,51px)/.98 'Sora','Space Grotesk',sans-serif;
  letter-spacing:-2.5px;
  margin:13px 0 12px
}
.display .gradient-text {
  background:linear-gradient(95deg,#fff 0%,#d0bcff 46%,#4cd7f6 100%);
  background-clip:text;
  color:transparent
}
html[data-theme="light"] .display .gradient-text {
  background:linear-gradient(95deg,#1a1528 0%,#6d3bd7 52%,#007c99 100%);
  background-clip:text
}
.intro {
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin:0
}
.hero {
  padding:27px 0 21px
}
.hero-art {
  height:135px;
  position:relative;
  margin:2px 0 11px;
  display:grid;
  place-items:center;
  perspective:500px
}
.hero-orbit {
  position:absolute;
  width:225px;
  height:112px;
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:50%;
  box-shadow:0 0 36px color-mix(in srgb, var(--accent) 16%, transparent);
  transform:rotate(-12deg)
}
.hero-orbit:after {
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  background:var(--cyan);
  border-radius:50%;
  right:29px;
  top:8px;
  box-shadow:0 0 14px var(--cyan)
}
.hero-letter {
  height:112px;
  width:88px;
  display:grid;
  place-items:center;
  position:relative;
  border:1px solid rgba(255,255,255,.23);
  border-radius:22px;
  background:linear-gradient(145deg,#d0bcff,#6d3bd7 58%,#03b5d3);
  box-shadow:0 20px 45px rgba(109,59,215,.35),inset 0 1px 1px rgba(255,255,255,.5);
  font:700 65px 'Sora','Space Grotesk',sans-serif;
  color:#fff;
  transform:rotateY(-11deg) rotateZ(-4deg);
  animation:letterFloat 4.2s ease-in-out infinite
}
.hero-spark {
  position:absolute;
  color:var(--gold);
  font-size:18px
}
.spark-a {
  left:18%;
  top:26%
}
.spark-b {
  right:18%;
  bottom:17%;
  color:var(--pink);
  font-size:13px
}
.home-actions {
  display:grid;
  gap:11px;
  margin:20px 0 26px
}
.nx { display:flex; flex-direction:column; gap:20px; width:100%; min-width:0; color:#e3e1e9 }
.nx-ribbon,.nx-filters,.nx-shelf { display:flex; gap:8px; width:100%; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none }
.nx-ribbon::-webkit-scrollbar,.nx-filters::-webkit-scrollbar,.nx-shelf::-webkit-scrollbar { display:none }
.nx-pill,.nx-filter,.nx-badge,.nx-jump-tag,.nx-tag,.nx-count-badge {
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  font:700 11px/1 'Space Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap
}
.nx-pill { min-height:30px; padding:0 12px; background:rgba(41,42,47,.8); color:#cbc3d7; border:1px solid rgba(255,255,255,.06) }
.nx-pill b { color:#4edea3; font-weight:700 }
.nx-pill span { color:#cbc3d7 }
.nx-pill-cyan { color:#4cd7f6; background:rgba(76,215,246,.12); border-color:rgba(76,215,246,.35) }
.nx-pill-cyan b,.nx-pill-violet b { color:inherit }
.nx-pill-violet { color:#d0bcff; background:rgba(160,120,255,.18); border:0; cursor:pointer }
.nx-ping { width:8px; height:8px; border-radius:50%; background:#4edea3; box-shadow:0 0 8px #4edea3; animation:nxPulse 1.6s ease-in-out infinite }
.nx-ping.is-off { background:#958ea0; box-shadow:none; animation:none }
@keyframes nxPulse { 50% { opacity:.35 } }
@media (prefers-reduced-motion: reduce) { .nx-ping { animation:none } }
.nx-hero-art {
  position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:space-between;
  padding:16px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:#121318 url('/covers/inter.jpg') center 42% / cover no-repeat
}
.nx-watermark { position:absolute; right:8px; top:18px; width:148px; height:148px; object-fit:contain; opacity:.22; pointer-events:none }
.nx-scrim { position:absolute; inset:0; background:linear-gradient(to top, #0d0e13 0%, rgba(13,14,19,.55) 42%, transparent 68%), linear-gradient(to right, rgba(13,14,19,.78), transparent 58%); pointer-events:none }
.nx-hero-top,.nx-hero-copy { position:relative; z-index:1 }
.nx-hero-top { display:flex; justify-content:space-between; gap:8px }
.nx-hero-meta { display:flex; align-items:center; gap:10px; color:#cbc3d7; font-size:12px }
.nx-tag { padding:3px 6px; border-radius:4px; background:#a078ff; color:#340080; font:700 11px/1.2 'Space Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase }
.nx-hero h1 { margin:8px 0 10px; font:800 32px/1.05 Sora,'Space Grotesk',sans-serif; letter-spacing:-.03em }
.nx-squad { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#cbc3d7; font-size:13px }
.nx-faces { display:flex }
.nx-faces b { width:28px; height:28px; margin-left:-6px; display:grid; place-items:center; border-radius:50%; background:#03b5d3; color:#00424e; font:700 10px/1 'Space Grotesk',sans-serif }
.nx-faces b:first-child { margin-left:0 }
.nx-faces .is-ai { background:#d0bcff; color:#3c0091 }
.nx-launch {
  width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(90deg, #a078ff, #03b5d3); color:#23005c;
  font:600 16px/1 Sora,'Space Grotesk',sans-serif; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 0 24px rgba(160,120,255,.4)
}
.nx-launch:active { filter:brightness(.96) }
.nx-banner { padding:14px; border-radius:16px; background:linear-gradient(135deg, #292a2f, #1e1f25 55%, #1a1b21); border:1px solid rgba(255,255,255,.06) }
.nx-banner-top,.nx-banner-foot,.nx-head,.nx-lib-top,.nx-lib-foot,.nx-storage > div { display:flex; align-items:center; justify-content:space-between; gap:10px }
.nx-banner-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#4cd7f6; background:rgba(3,181,211,.16) }
.nx-kicker { color:#4cd7f6; font:700 11px/1 'Space Grotesk',sans-serif; letter-spacing:.12em; text-transform:uppercase }
.nx-banner h2,.nx-head h2,.nx-lib-copy strong,.nx-jump-copy strong { margin:4px 0 0; font:600 16px/1.2 Sora,'Space Grotesk',sans-serif; letter-spacing:-.02em }
.nx-head h2 { margin:0 }
.nx-count { padding:4px 8px; border-radius:8px; background:rgba(13,14,19,.8); color:#4edea3; font:600 13px/1 'Space Grotesk',sans-serif }
.nx-banner-foot { margin-top:14px; color:#cbc3d7; font-size:13px }
.nx-banner-foot span { display:flex; align-items:center; gap:6px }
.nx-join { min-height:32px; padding:0 12px; border:0; border-radius:8px; background:#03b5d3; color:#00424e; font:700 11px/1 'Space Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer }
.nx-block { display:flex; flex-direction:column; gap:10px }
.nx-head span { color:#958ea0; font:600 13px/1 'Space Grotesk',sans-serif }
.nx-count-badge { padding:3px 6px; border-radius:6px; background:#34343a; color:#4cd7f6; font:700 11px/1 'Space Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase }
.nx-shelf { margin-inline:-16px; padding-inline:16px }
.nx-jump { flex:0 0 224px; display:flex; flex-direction:column; gap:8px; padding:8px; border:0; border-radius:16px; background:#292a2f; color:#e3e1e9; text-align:left; cursor:pointer }
.nx-jump-art { position:relative; height:128px; border-radius:12px; overflow:hidden }
.nx-jump-tag { position:absolute; top:8px; left:8px; padding:3px 6px; border-radius:6px; background:rgba(13,14,19,.8); color:#4edea3 }
.nx-jump-play,.nx-go { display:grid; place-items:center; background:#d0bcff; color:#3c0091 }
.nx-jump-play { position:absolute; right:8px; bottom:8px; width:32px; height:32px; border-radius:50% }
.nx-jump-copy { display:flex; flex-direction:column; gap:4px; padding:0 4px 4px }
.nx-jump-copy span { display:flex; justify-content:space-between; gap:8px; color:#cbc3d7; font-size:12px }
.nx-jump-copy em { font-style:normal }
.nx-jump-copy em:first-child { color:#4cd7f6 }
.nx-filter { min-height:28px; padding:0 14px; border:0; border-radius:999px; background:#292a2f; color:#cbc3d7; cursor:pointer }
.nx-filter[aria-pressed="true"] { background:#d0bcff; color:#3c0091 }
.nx-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.nx-lib-card { display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:168px; width:100%; padding:8px; border:0; border-radius:16px; background:#292a2f; color:#e3e1e9; text-align:left; cursor:pointer }
.nx-lib-card.is-soon { opacity:.72; cursor:default }
.nx-cover { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; font:700 18px Sora,'Space Grotesk',sans-serif; color:#0d0e13 }
.nx-photo { position:relative; display:block; overflow:hidden; border-radius:12px; background:#121318 }
.nx-photo img { width:100%; height:100%; object-fit:cover; display:block }
.nx-lib-card .nx-photo { height:104px }
.nx-jump-art.nx-photo { height:128px }
.nx-photo .nx-badge { position:absolute; top:8px; right:8px }
.game-cover { margin:14px 0 4px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); aspect-ratio:16/8; background:#121318 }
.game-cover img { width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block }
.nx-badge { padding:3px 6px; border-radius:6px; background:rgba(0,165,114,.28); color:#4edea3; font-size:10px }
.nx-lib-card.is-soon .nx-badge { background:rgba(13,14,19,.8); color:#cbc3d7 }
.nx-lib-copy { display:flex; flex-direction:column; gap:2px }
.nx-lib-copy span,.nx-empty { color:#cbc3d7; font-size:12px }
.nx-dotline { display:inline-flex; align-items:center; gap:6px; color:#4cd7f6; font:600 13px/1 'Space Grotesk',sans-serif }
.nx-dotline::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor }
.nx-lib-card.is-soon .nx-dotline { color:#958ea0 }
.nx-go { width:28px; height:28px; border-radius:8px; background:#34343a; color:#d0bcff }
.nx-art-letters { background:linear-gradient(145deg, #a078ff, #4cd7f6) }
.nx-art-cards { background:linear-gradient(160deg, #1a1030, #03b5d3 80%) }
.nx-art-poseidon { background:#16141f url('/icons/mark.png') center 58% / 58% no-repeat }
.nx-art-soon { background:#34343a; color:#958ea0 }
.nx-art-quiz { background:linear-gradient(145deg, #4edea3, #4cd7f6) }
.nx-storage { display:flex; flex-direction:column; gap:8px; margin-top:4px; padding:14px; border-radius:16px; background:#1a1b21 }
.nx-storage span { display:inline-flex; align-items:center; gap:6px; color:#cbc3d7; font-size:13px }
.nx-storage b { color:#e3e1e9; font:600 13px/1 'Space Grotesk',sans-serif }
.nx-bar { height:6px; border-radius:999px; background:#34343a; overflow:hidden }
.nx-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #d0bcff, #4cd7f6) }
.nx-empty { margin:0; padding:12px 0 }
@media (hover:hover) and (pointer:fine) {
  .nx-lib-card:not(.is-soon):hover,.nx-jump:hover { box-shadow:0 0 24px -4px rgba(160,120,255,.45) }
  .nx-go { transition:background .18s,color .18s }
  .nx-lib-card:not(.is-soon):hover .nx-go { background:#d0bcff; color:#3c0091 }
}
.seat-chip.is-bot { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent) }
.btn {
  min-height:54px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border-radius:17px;
  border:1px solid transparent;
  font-weight:800;
  font-size:14px;
  transition:filter .18s,background .18s,border-color .18s;
  touch-action:manipulation
}
.btn:active,
.nav-item:active,
.segment:active,
.category-chip:active,
.theme-toggle:active,
.game-card:active,
.sheet-close:active,
.section-link:active,
.icon-btn:active,
.back-btn:active,
.room-code:active,
.demand-grid button:active,
.inter-tools button:active,
.install-badge button:active {
  transform:none;
  filter:brightness(.96)
}
.btn:hover,
.nav-item:hover,
.segment:hover,
.category-chip:hover,
.theme-toggle:hover,
.game-card:hover,
.sheet-close:hover,
.section-link:hover,
.icon-btn:hover,
.back-btn:hover,
.room-code:hover {
  transform:none
}
.btn svg {
  width:18px;
  height:18px
}
.btn-primary {
  background:linear-gradient(90deg,#a078ff,#03b5d3);
  color:#23005c;
  box-shadow:0 0 24px rgba(160,120,255,.35)
}
.btn-secondary {
  border-color:var(--line);
  background:var(--wash);
  color:var(--ink)
}
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover { filter:brightness(1.06) }
  .btn-secondary:hover,.theme-toggle:hover,.music-toggle:hover,.icon-btn:hover,.back-btn:hover { background:var(--wash-strong) }
}
.btn-tertiary {
  min-height:44px;
  background:transparent;
  color:var(--muted);
  padding:0 14px
}
.btn-sm {
  min-height:40px;
  border-radius:13px;
  font-size:12px;
  padding:0 14px
}
.btn-full {
  width:100%
}
.ripple {
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple .55s linear;
  background:rgba(255,255,255,.32);
  pointer-events:none;
  z-index:-1
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:20px 0 12px
}
.section-title {
  margin:0;
  font:700 18px 'Space Grotesk',sans-serif;
  letter-spacing:-.4px
}
.section-link {
  border:0;
  background:none;
  color:var(--cyan);
  font-weight:700;
  font-size:12px;
  padding:8px 0
}
.leader-track {
  display:flex;
  gap:10px;
  overflow:auto;
  margin:0 -20px;
  padding:3px 20px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none
}
.leader-track::-webkit-scrollbar {
  display:none
}
.leader-card {
  flex:0 0 min(250px, 78vw);
  min-height:72px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--panel);
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden
}
.leader-card:first-child {
  border-color:rgba(255,215,118,.3);
  background:color-mix(in srgb, var(--gold) 16%, var(--panel))
}
.leader-badge {
  width:32px;
  height:32px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--gold) 24%, var(--panel));
  color:var(--ink);
  font:700 11px 'Space Grotesk',sans-serif
}
.leader-copy {
  min-width:0;
  flex:1;
  display:grid;
  gap:2px
}
.leader-name {
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  font-weight:800;
  font-size:14px;
  margin:0
}
.leader-meta {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.leader-score {
  flex:none;
  font:700 12px 'Space Grotesk';
  color:var(--cyan);
  text-align:right;
  white-space:nowrap
}
.online-pill {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  padding:8px 11px;
  border-radius:30px;
  font-size:10px;
  font-weight:700;
  color:var(--muted)
}
.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px rgba(168,242,143,.65)
}
.status-dot.offline {
  background:var(--gold);
  box-shadow:0 0 10px rgba(255,215,118,.45)
}
.install-badge {
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  background:rgba(160,120,255,.08);
  border:1px solid rgba(160,120,255,.17);
  border-radius:16px;
  color:var(--ink);
  font-size:12px;
  margin:10px 0
}
.install-badge button {
  margin-left:auto;
  background:none;
  border:0;
  color:var(--cyan);
  font-weight:800
}
.bottom-nav {
  position:fixed;
  z-index:20;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,520px);
  padding:9px 18px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:space-around;
  background:var(--nav-bg);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--line)
}
.nav-item {
  min-width:68px;
  padding:5px 8px 3px;
  border:0;
  background:none;
  color:var(--muted2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font:700 10px/1 'Space Grotesk',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase
}
.nav-item.active {
  color:var(--cyan);
  text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 75%, transparent)
}
.nav-item svg {
  width:19px;
  height:19px
}
.view-enter {
  animation:viewIn .32s var(--ease) both
}
.page-head {
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 0 20px
}
.page-head h1 {
  font:700 24px 'Sora','Space Grotesk',sans-serif;
  letter-spacing:-.9px;
  margin:0
}
.page-head p {
  font-size:12px;
  color:var(--muted);
  margin:3px 0 0
}
.field {
  display:grid;
  gap:8px;
  margin:16px 0
}
.field-label {
  font-size:12px;
  font-weight:700;
  color:var(--muted)
}
.text-input {
  width:100%;
  height:54px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--wash);
  color:var(--ink);
  padding:0 15px;
  outline:none;
  transition:border .2s,box-shadow .2s
}
.text-input:focus {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(160,120,255,.14)
}
.text-input::placeholder {
  color:var(--muted2)
}
.category-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}
.category-chip {
  min-height:45px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.027);
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  transition:background .2s,border-color .2s,color .2s
}
.chip-icon,.cat-icon {
  display:inline-grid;
  place-items:center;
  color:var(--accent);
  flex:none
}
.chip-check svg {
  display:block
}
.category-chip[aria-pressed="true"] {
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 14%, var(--panel));
  color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent)
}
.chip-check {
  margin-left:auto;
  color:var(--cyan);
  font-size:12px;
  opacity:0
}
.category-chip[aria-pressed="true"] .chip-check {
  opacity:1
}
.segmented {
  display:flex;
  padding:4px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--panel-hi);
  gap:4px
}
.segment {
  flex:1;
  min-height:40px;
  border:0;
  border-radius:11px;
  background:none;
  color:var(--muted);
  font-size:12px;
  font-weight:800
}
.segment[aria-pressed="true"] {
  background:#d0bcff;
  color:#3c0091;
  box-shadow:none
}
.form-note {
  font-size:11px;
  color:var(--muted2);
  margin:8px 1px 0
}
.form-footer {
  position:static;
  margin-top:22px;
  padding-top:4px
}
#create-form .field:last-of-type {
  position:relative;
  z-index:1
}
.error-note {
  min-height:16px;
  color:var(--red);
  font-size:12px;
  margin:7px 2px
}
.room-code {
  font:700 clamp(34px,12vw,52px)/1 'Space Grotesk',sans-serif;
  letter-spacing:.19em;
  text-align:center;
  color:var(--ink);
  text-shadow:0 0 28px color-mix(in srgb, var(--accent) 34%, transparent);
  margin:4px 0
}
.code-label {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:5px 0 14px
}
.invite-url {
  margin:0 0 12px;
  color:var(--cyan);
  font-size:12px;
  line-height:1.4;
  word-break:break-all
}
.code-card,.surface {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow)
}
.code-card {
  padding:19px 17px 16px;
  text-align:center
}
.qr-box {
  width:122px;
  height:122px;
  margin:13px auto 8px;
  background:#fff;
  border-radius:15px;
  display:grid;
  place-items:center;
  overflow:hidden
}
.qr-box img,.qr-box canvas {
  width:108px!important;
  height:108px!important
}
.qr-placeholder {
  color:#28223a;
  font-size:11px;
  line-height:1.4;
  padding:13px
}
.room-section {
  margin-top:20px
}
.player-row {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.player-row:last-child {
  border:0
}
.avatar {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(160,120,255,.28),rgba(96,230,230,.17));
  color:var(--ink);
  font:700 13px 'Space Grotesk';
  border:1px solid var(--line)
}
.player-name {
  font-size:13px;
  font-weight:800
}
.player-sub {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:2px
}
.host-mark {
  margin-left:auto;
  color:var(--gold);
  font-size:13px
}
.room-actions {
  display:grid;
  gap:10px;
  margin:18px 0
}
.game-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:11px 0 20px
}
.round-tag {
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:1px;
  text-transform:uppercase
}
.timer {
  --progress:1;
  width:56px;
  height:56px;
  position:relative;
  display:grid;
  place-items:center
}
.timer svg {
  position:absolute;
  inset:0;
  transform:rotate(-90deg)
}
.timer-track,.timer-value {
  fill:none;
  stroke-width:3
}
.timer-track {
  stroke:var(--line)
}
.timer-value {
  stroke:var(--cyan);
  stroke-linecap:round;
  stroke-dasharray:150.8;
  stroke-dashoffset:calc(150.8 * (1 - var(--progress)));
  transition:stroke-dashoffset .3s linear,stroke .3s
}
.timer span {
  font:700 13px 'Space Grotesk';
  position:relative
}
.timer.danger .timer-value {
  stroke:var(--red)
}
.timer.danger {
  animation:timerPulse .65s ease-in-out infinite alternate
}
.letter-stage {
  display:grid;
  place-items:center;
  padding:5px 0 19px
}
.letter-card {
  width:112px;
  height:128px;
  display:grid;
  place-items:center;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(145deg,#d0bcff,#a078ff 58%,#6d3bd7);
  box-shadow:0 19px 42px rgba(160,120,255,.28),inset 0 1px rgba(255,255,255,.45);
  font:700 78px 'Sora','Space Grotesk',sans-serif;
  color:#fffaf3;
  text-shadow:0 2px 11px rgba(28,20,12,.28);
  animation:flipIn .72s cubic-bezier(.2,.75,.25,1.15) both
}
.category-list {
  display:grid;
  gap:9px
}
.answer-field {
  display:grid;
  gap:6px;
  padding:11px 12px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  transition:border .18s,transform .18s,background .18s
}
.answer-field.good {
  border-color:rgba(168,242,143,.65);
  background:rgba(168,242,143,.07);
  animation:answerPop .28s var(--ease)
}
.answer-field.bad {
  border-color:rgba(255,120,141,.65);
  background:rgba(255,120,141,.065);
  animation:shake .3s
}
.answer-top {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:800
}
.answer-top .cat-icon {
  color:var(--cyan)
}
.correction-category .cat-icon {
  color:var(--accent)
}
.appeal-head svg,.waiting-banner svg {
  vertical-align:-3px;
  margin-right:6px
}
.answer-input {
  width:100%;
  height:31px;
  padding:0;
  background:none;
  border:0;
  outline:none;
  color:var(--ink);
  font-size:14px
}
.answer-input::placeholder {
  color:var(--muted2)
}
.answer-input:disabled {
  opacity:.68
}
.game-submit {
  margin-top:15px
}
.waiting-banner,.notice {
  padding:13px 14px;
  border:1px solid rgba(160,120,255,.18);
  border-radius:15px;
  background:rgba(160,120,255,.075);
  font-size:12px;
  color:var(--ink);
  line-height:1.5
}
.waiting-banner {
  text-align:center;
  margin:16px 0
}
.victory-sky {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:30;
  pointer-events:none
}
.correction-hero {
  text-align:center;
  padding:23px 0 13px
}
.correction-hero.is-lit .correction-category {
  text-shadow:0 0 28px color-mix(in srgb, var(--gold) 45%, transparent)
}
.correction-kicker {
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  font-weight:800
}
.correction-category {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:700 clamp(27px,8vw,39px)/1.1 'Space Grotesk';
  letter-spacing:-1px;
  margin:8px 0 3px
}
.correction-caption {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.reveal-board {
  display:grid;
  gap:8px;
  margin:14px 0
}
.reveal-row {
  display:grid;
  grid-template-columns:minmax(80px,.9fr) minmax(0,1.3fr) auto;
  align-items:center;
  gap:8px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  transition:transform .25s,background .25s
}
.reveal-row.active {
  border-color:rgba(160,120,255,.48);
  background:rgba(160,120,255,.09);
  transform:scale(1.015)
}
.reveal-row.revealed {
  animation:revealIn .35s var(--ease)
}
.reveal-player {
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.reveal-word {
  font:600 13px 'Space Grotesk';
  overflow-wrap:anywhere;
  color:var(--ink)
}
.reveal-hidden {
  color:var(--muted2);
  letter-spacing:3px
}
.result-badge {
  justify-self:end;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
  padding:5px 7px;
  border-radius:20px;
  background:rgba(255,255,255,.07);
  color:var(--muted)
}
.result-badge.unique {
  color:var(--gold);
  background:rgba(255,215,118,.12)
}
.result-badge.duplicate {
  color:var(--muted);
  background:var(--wash-strong)
}
.result-badge.invalid {
  color:var(--red);
  background:rgba(255,120,141,.12)
}
.result-badge.unknown {
  color:var(--warning);
  background:color-mix(in srgb, var(--warning) 14%, transparent)
}
.result-badge.missed,.result-badge.pending {
  color:var(--muted2)
}
.points {
  font:700 11px 'Space Grotesk';
  color:var(--lime);
  margin-left:3px
}
.appeal-box {
  padding:14px;
  margin:12px 0 15px;
  background:rgba(255,120,184,.07);
  border:1px solid rgba(255,120,184,.2);
  border-radius:17px;
  animation:viewIn .25s var(--ease)
}
.appeal-head {
  font-size:12px;
  font-weight:800
}
.appeal-sub {
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
  margin:5px 0 12px
}
.appeal-actions {
  display:flex;
  gap:8px
}
.appeal-actions .btn {
  flex:1
}
.appeal-count {
  color:var(--pink);
  font-weight:800
}
.score-strip {
  margin:13px 0;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025)
}
.score-strip-head {
  display:flex;
  justify-content:space-between;
  gap:9px;
  font-size:11px;
  font-weight:800
}
.score-track {
  height:5px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  margin:11px 0 0;
  overflow:hidden
}
.score-fill {
  height:100%;
  width:100%;
  transform:scaleX(var(--score-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:5px;
  transition:transform .55s var(--ease)
}
.score-table {
  width:100%;
  border-collapse:collapse;
  margin:8px 0 16px;
  font-size:11px
}
.score-table th {
  text-align:left;
  padding:10px 7px;
  color:var(--muted2);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px;
  border-bottom:1px solid var(--line)
}
.score-table td {
  padding:12px 7px;
  border-bottom:1px solid var(--line)
}
.score-table th:last-child,.score-table td:last-child {
  text-align:right
}
.score-table td:last-child {
  font:700 13px 'Space Grotesk';
  color:var(--cyan)
}
.podium {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  margin:22px auto 24px;
  max-width:330px;
  height:180px
}
.podium-place {
  width:31%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end
}
.podium-base {
  position:relative;
  width:100%;
  border-radius:16px 16px 4px 4px;
  background:linear-gradient(160deg,rgba(160,120,255,.29),rgba(208,188,255,.2));
  border:1px solid rgba(160,120,255,.19);
  border-bottom:0
}
.podium-place.first .podium-base {
  height:104px;
  background:linear-gradient(160deg,rgba(255,215,118,.31),rgba(153,106,116,.2));
  border-color:rgba(255,215,118,.24);
  color:var(--gold)
}
.podium-place.second .podium-base {
  height:76px
}
.podium-place.third .podium-base {
  height:58px
}
.podium-player {
  max-width:100%;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0 0 2px
}
.podium-score {
  font:700 11px 'Space Grotesk';
  color:var(--cyan);
  margin:0 0 18px
}
.medal {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--panel-hi);
  border:1px solid var(--line);
  font:700 12px 'Space Grotesk';
  color:var(--ink)
}
.podium-place.first .medal {
  background:linear-gradient(145deg,#ffe7a3,#e2b34a);
  color:#2a2110;
  border-color:transparent
}
.skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
  background-size:200% 100%;
  animation:skeleton 1.3s linear infinite
}
.skeleton-card {
  flex:0 0 min(250px, 78vw);
  height:72px;
  border-radius:19px
}
.sheet-backdrop {
  position:fixed;
  z-index:50;
  inset:0;
  background:color-mix(in srgb, var(--bg) 28%, transparent);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:fadeIn .32s var(--ease) both
}
.sheet-backdrop.is-closing {
  animation:fadeOut .38s var(--ease) both
}
.bottom-sheet {
  width:min(100%,560px);
  max-height:min(83svh,760px);
  overflow:auto;
  padding:10px 22px calc(25px + env(safe-area-inset-bottom));
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:28px 28px 0 0;
  box-shadow:var(--shadow);
  animation:sheetIn .34s cubic-bezier(.16,1,.3,1) both
}
.sheet-backdrop.is-closing .bottom-sheet {
  animation:sheetOut .36s var(--ease) both
}
.sheet-handle {
  width:40px;
  height:4px;
  background:var(--muted2);
  opacity:.45;
  border-radius:9px;
  margin:3px auto 20px
}
.sheet-title {
  font:700 22px 'Space Grotesk';
  margin:0 0 9px
}
.sheet-copy {
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}
.sheet-close {
  float:right;
  border:0;
  background:none;
  color:var(--muted);
  padding:4px
}
.rules-list {
  padding-left:19px;
  color:var(--ink);
  font-size:12px;
  line-height:1.75
}
.toast {
  position:fixed;
  z-index:80;
  bottom:calc(90px + env(safe-area-inset-bottom));
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  max-width:calc(100vw - 36px);
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel-hi);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  box-shadow:var(--shadow);
  transition:opacity .36s var(--ease),transform .36s var(--ease)
}
.toast.show {
  transform:translate(-50%,0);
  opacity:1
}
.error-panel {
  margin:18px 0;
  padding:15px;
  border:1px solid rgba(255,120,141,.25);
  border-radius:16px;
  background:rgba(255,120,141,.07);
  color:var(--danger);
  font-size:12px;
  line-height:1.55
}
.chat-list {
  max-height:220px;
  overflow:auto;
  display:grid;
  gap:9px;
  margin:12px 0
}
.chat-line {
  font-size:12px;
  color:var(--ink);
  line-height:1.45
}
.chat-line b {
  color:var(--cyan);
  margin-right:6px
}
.chat-send {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px
}
.rank-list {
  display:grid;
  gap:8px;
  margin:15px 0
}
.rank-row {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025)
}
.rank-medal {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--gold) 22%, var(--panel));
  font:700 12px 'Space Grotesk';
  color:var(--ink)
}
.rank-row > div { min-width:0 }
.rank-player {
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.rank-stats {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.rank-points {
  font:700 14px 'Space Grotesk';
  color:var(--cyan);
  white-space:nowrap
}
.stats-card {
  padding:15px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  text-align:center
}
.stat-num {
  font:700 19px 'Space Grotesk';
  color:var(--ink)
}
.stat-label {
  font-size:9px;
  color:var(--muted);
  margin-top:3px;
  text-transform:uppercase;
  letter-spacing:.6px
}
.notice-row {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  margin-top:16px
}
.pulse-host {
  animation:goldPulse 1.8s ease-in-out infinite
}
.empty-state {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:24px
}
.footer-note {
  text-align:center;
  color:var(--muted2);
  font-size:10px;
  margin:24px 0 0
}
html[data-theme="light"] body {
  background:radial-gradient(ellipse at 80% -8%,rgba(109,59,215,.12),transparent 32rem),radial-gradient(ellipse at 0% 42%,rgba(0,124,153,.08),transparent 28rem),var(--bg)
}
html[data-theme="light"] .leader-card {
  background:linear-gradient(145deg,#ffffff,#f3f0fa)
}
html[data-theme="light"] .stat-num,
html[data-theme="light"] .reveal-word,
html[data-theme="light"] .install-badge { color:var(--ink) }
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .back-btn { background:var(--wash) }
@media (min-width:700px) {
  .app-shell {
    width:100%;
    max-width:none;
    min-height:100svh;
    margin:0;
    padding:28px 40px 40px 280px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none
  }
  .app-shell:not(:has(.bottom-nav)),
  .app-shell.wide {
    padding:28px 48px 48px
  }
  .topbar { padding-top:0 }
  #main { width:100%; margin:0 }
  .app-shell.wide #main,
  .app-shell:not(:has(.bottom-nav)) #main { width:100%; margin:0 }
  .bottom-nav {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    transform:none;
    width:240px;
    height:100svh;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:6px;
    padding:28px 16px;
    border:0;
    border-right:1px solid var(--line);
    border-radius:0;
    background:var(--panel)
  }
  .nav-item {
    flex-direction:row;
    justify-content:flex-start;
    gap:10px;
    min-height:48px;
    min-width:0;
    padding:10px 14px;
    border-radius:14px;
    font-size:15px
  }
  .nav-item.active { background:var(--wash-strong); color:var(--accent) }
  #main:has(.hero) {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.85fr);
    gap:28px 40px;
    align-items:stretch;
    width:100%
  }
  #main:has(.hero) > section {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:24px;
    padding:22px
  }
  #main:has(.hero) .leader-track {
    flex-direction:column;
    overflow:visible;
    margin:0;
    padding:0
  }
  #main:has(.hero) .leader-card { flex:none; width:100%; min-height:92px }
  .home-actions {
    grid-template-columns:repeat(2,minmax(180px,240px));
    justify-content:start
  }
  .home-actions .btn,
  .room-actions .btn,
  .form-footer .btn,
  .inter-actions .btn {
    width:auto;
    min-width:180px
  }
  .home-actions .btn-primary { grid-column:auto }
  .room-actions,.form-footer,.inter-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px
  }
  .form-footer .btn-full,.room-actions .btn-full { width:auto }
  .rank-list { grid-template-columns:1fr 1fr }
  .page-head h1 { font-size:40px }
  .sheet-backdrop { align-items:center; padding:40px }
  .bottom-sheet {
    width:min(720px,100%);
    border-radius:28px;
    border-bottom:1px solid var(--line);
    animation-name:dialogIn
  }
  .sheet-backdrop.is-closing .bottom-sheet { animation-name:dialogOut }
  #main:has(.code-card) {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:20px 32px;
    align-items:start
  }
  #main:has(.code-card) > .page-head,
  #main:has(.code-card) > .room-actions { grid-column:1 / -1 }
  #main > form {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:28px;
    align-items:start
  }
  #main > form > :is(.field:has(.category-grid), .form-footer, .error-note, .notice) { grid-column:1 / -1 }
  .category-grid { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) }
}
@media(min-width:600px) and (max-width:699px) {
  .app-shell {
    padding-top:18px
  }
  .hero {
    padding-top:38px
  }
  .hero-art {
    height:155px
  }
  .category-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .bottom-nav {
    bottom:14px;
    border:1px solid var(--line);
    border-radius:22px;
    padding-bottom:9px
  }
  .wide .bottom-nav {
    width:min(100%,900px)
  }
}
@media(max-width:360px) {
  .app-shell {
    padding-left:15px;
    padding-right:15px
  }
  .leader-track {
    margin-left:-15px;
    margin-right:-15px;
    padding-left:15px;
    padding-right:15px
  }
  .display {
    font-size:34px
  }
  .reveal-row {
    grid-template-columns:70px minmax(0,1.3fr) auto;
    padding:9px 8px;
    gap:6px
  }
  .result-badge {
    font-size:8px;
    padding:5px 6px
  }
}
body:has(.is-deck) { background:#121318; color:#e3e1e9 }
.app-shell.is-deck {
  background:#121318;
  color:#e3e1e9;
  --ink:#e3e1e9;
  --muted:#cbc3d7;
  --muted2:#958ea0;
  --line:rgba(255,255,255,.08);
  --panel:#292a2f;
  --nav-bg:rgba(13,14,19,.88);
  --accent:#d0bcff;
  --purple:#4cd7f6;
  --cyan:#4cd7f6
}
.nx-top {
  position:sticky;
  top:0;
  z-index:5;
  margin:0 -20px 8px;
  padding:10px 16px 12px;
  background:rgba(13,14,19,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 20px rgba(0,0,0,.45)
}
.nx-top-row { display:flex; align-items:center; justify-content:space-between; gap:12px }
.nx-id { display:flex; align-items:center; gap:8px; text-decoration:none; color:#e3e1e9 }
.nx-avatar {
  position:relative; width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:#121318; overflow:visible
}
.nx-avatar img { width:24px; height:24px; object-fit:contain }
.nx-avatar i { position:absolute; right:0; bottom:0; width:9px; height:9px; border-radius:50%; background:#4edea3; box-shadow:0 0 8px #4edea3 }
.nx-lvl { padding:3px 6px; border-radius:6px; background:#292a2f; color:#4cd7f6; font:700 11px/1 'Space Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase }
.nx-title { display:none; font:600 16px/1 Sora,'Space Grotesk',sans-serif }
.nx-search {
  display:flex; align-items:center; gap:8px; height:40px; margin-top:10px; padding:0 12px;
  border-radius:12px; background:rgba(41,42,47,.72); color:#958ea0
}
.nx-search input {
  width:100%; border:0; outline:none; background:transparent; color:#e3e1e9;
  font:400 13px/1 'Space Grotesk',sans-serif
}
.nx-search input::placeholder { color:rgba(203,195,215,.6) }
.nx-search:focus-within { box-shadow:0 0 0 1px #4cd7f6 }
.app-shell.is-deck .icon-btn {
  width:44px; height:44px; border:0; border-radius:12px; background:rgba(41,42,47,.6); color:#e3e1e9
}
.app-shell.is-deck .bottom-nav {
  background:rgba(13,14,19,.88);
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:0 -4px 24px rgba(0,0,0,.55)
}
.app-shell.is-deck .nav-item {
  min-height:44px;
  font:700 11px/1 'Space Grotesk',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase
}
.app-shell.is-deck .nav-item.active { color:#4cd7f6; text-shadow:0 0 12px rgba(76,215,246,.85) }
html[data-theme="light"] body:has(.is-deck) {
  background:radial-gradient(ellipse at 80% -8%,rgba(109,59,215,.12),transparent 32rem),radial-gradient(ellipse at 0% 42%,rgba(0,124,153,.08),transparent 28rem),#f3f0fa;
  color:#1a1528
}
html[data-theme="light"] .app-shell.is-deck {
  background:transparent;
  color:#1a1528;
  --ink:#1a1528;
  --muted:#5c5470;
  --muted2:#847c98;
  --line:rgba(35,24,68,.12);
  --panel:#ffffff;
  --nav-bg:rgba(243,240,250,.94);
  --accent:#6d3bd7;
  --purple:#6d3bd7;
  --cyan:#007c99
}
html[data-theme="light"] .nx { color:#1a1528 }
html[data-theme="light"] .nx-hero-art,
html[data-theme="light"] .nx-hero-art h1,
html[data-theme="light"] .nx-hero-meta,
html[data-theme="light"] .nx-squad { color:#e3e1e9 }
html[data-theme="light"] .nx-top {
  background:rgba(243,240,250,.92);
  box-shadow:0 4px 20px rgba(36,24,68,.08)
}
html[data-theme="light"] .nx-id,
html[data-theme="light"] .nx-search input,
html[data-theme="light"] .nx-jump,
html[data-theme="light"] .nx-lib-card,
html[data-theme="light"] .nx-storage b,
html[data-theme="light"] .nx-banner h2,
html[data-theme="light"] .nx-head h2 { color:#1a1528 }
html[data-theme="light"] .nx-search,
html[data-theme="light"] .nx-pill,
html[data-theme="light"] .nx-filter,
html[data-theme="light"] .nx-jump,
html[data-theme="light"] .nx-lib-card,
html[data-theme="light"] .nx-banner,
html[data-theme="light"] .nx-storage,
html[data-theme="light"] .nx-lvl,
html[data-theme="light"] .app-shell.is-deck .icon-btn {
  background:#fff;
  color:#1a1528;
  border-color:rgba(35,24,68,.1)
}
html[data-theme="light"] .nx-search input { background:transparent }
html[data-theme="light"] .nx-lib-copy span,
html[data-theme="light"] .nx-jump-copy span,
html[data-theme="light"] .nx-banner-foot,
html[data-theme="light"] .nx-storage span,
html[data-theme="light"] .nx-head span { color:#5c5470 }
html[data-theme="light"] .app-shell.is-deck .bottom-nav {
  background:rgba(243,240,250,.94);
  border-color:rgba(35,24,68,.1);
  box-shadow:none
}
html[data-theme="light"] .app-shell.is-deck .nav-item { color:#5c5470 }
html[data-theme="light"] .app-shell.is-deck .nav-item.active { color:#6d3bd7; text-shadow:none }
html[data-theme="light"] .nx-filter[aria-pressed="true"] { background:#6d3bd7; color:#fff }
.guide-grid { display:grid; gap:16px }
.guide-card {
  display:flex; flex-direction:column; gap:10px; padding:12px;
  border:1px solid var(--line); border-radius:22px; background:var(--panel); color:var(--ink)
}
.guide-card h2 { margin:0; font:700 22px/1.15 Sora,'Space Grotesk',sans-serif }
.guide-card p { margin:0; color:var(--muted); line-height:1.45 }
.guide-card .game-cover { margin:0 }
.guide-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto }
.guide-actions .btn { min-height:44px; flex:1 }
.guide-prose h2, .bottom-sheet h2:not(.sheet-title) {
  margin:20px 0 8px; color:var(--ink); font:700 18px/1.25 Sora,'Space Grotesk',sans-serif
}
.guide-prose .rules-list, .bottom-sheet .rules-list { font-size:14px }
@media (min-width:700px) {
  .nx {
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.15fr);
    gap:20px 28px;
    align-items:start
  }
  .nx > .nx-ribbon { grid-column:1 / -1 }
  .nx > .nx-hero { grid-column:1; grid-row:2 / span 2 }
  .nx > .nx-banner { grid-column:2 }
  .nx > .nx-block:nth-child(4) { grid-column:2 }
  .nx > .nx-block:nth-child(5) { grid-column:1 / -1 }
  .nx-hero-art { min-height:460px }
  .nx-shelf {
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:visible;
    margin:0;
    padding:0
  }
  .nx-jump { width:100% }
  .nx-title { display:inline }
  .guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch }
  .guide-prose { max-width:860px }
}
@media (min-width:1100px) {
  .nx { grid-template-columns:minmax(380px,.8fr) minmax(0,1.2fr) }
  .nx-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .nx-shelf { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .nx-hero-art { min-height:520px }
}
.adm { display:flex; flex-direction:column; gap:16px; width:min(100%,1040px); margin:0 auto }
.adm-block { min-height:60vh; justify-content:center }
.adm-block h1, .adm h1 { margin:0; font:700 clamp(28px,6vw,40px)/1.1 Sora,'Space Grotesk',sans-serif }
.adm-block p, .adm .page-head p, .adm-count { color:var(--muted); line-height:1.5 }
.adm-count { margin:0; font-size:13px }
.adm-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.adm-stats article { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--line) }
.adm-stats b { font:700 22px/1 Sora,'Space Grotesk',sans-serif }
.adm-stats span, .adm-meta, .adm-phone header span { color:var(--muted); font-size:13px }
.adm-tabs, .adm-filters { display:flex; flex-wrap:wrap; gap:8px }
.adm-tools { display:flex; flex-direction:column; gap:10px }
.adm-chip {
  min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font:650 13px/1 Inter,system-ui,sans-serif
}
.adm-chip[aria-pressed="true"] { background:var(--accent); color:#1a1528; border-color:transparent }
html[data-theme="light"] .adm-chip[aria-pressed="true"] { color:#fff }
.adm-groups, .adm-phones, .adm-group-body, .adm-group-foot, .adm-phone, .adm-detail { display:flex; flex-direction:column; gap:8px }
.adm-groups { gap:10px }
.adm-group { border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden }
.adm-group.is-blocked { box-shadow:inset 0 0 0 1px var(--danger) }
.adm-group-toggle {
  width:100%; min-height:76px; display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:12px 14px; border:0; background:transparent; color:inherit; text-align:left
}
.adm-mark {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--wash-strong); color:var(--accent); font:700 16px/1 Sora,'Space Grotesk',sans-serif
}
.adm-group.is-open .adm-mark { background:var(--accent); color:#1a1528 }
html[data-theme="light"] .adm-group.is-open .adm-mark { color:#fff }
.adm-group-copy { display:flex; flex-direction:column; gap:3px; min-width:0 }
.adm-group-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 16px/1.25 Sora,'Space Grotesk',sans-serif }
.adm-group-copy span, .adm-side time { color:var(--muted); font-size:13px }
.adm-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.adm-pills { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px }
.adm-pills i { font-style:normal; font-size:11px; font-weight:650; padding:4px 8px; border-radius:999px; background:var(--wash); color:var(--muted) }
.adm-pills i.is-live { color:var(--success); background:color-mix(in srgb, var(--success) 16%, transparent) }
.adm-pills i.is-stop { color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, transparent) }
.adm-group-body { padding:0 14px 14px }
.adm-group-body > p, .adm-phone p, .adm-detail p { margin:0 }
.adm-phone { padding:12px; border-radius:16px; background:var(--bg) }
.adm-phone.is-blocked { box-shadow:inset 0 0 0 1px var(--danger) }
.adm-phone header { display:flex; justify-content:space-between; gap:12px; align-items:start }
.adm-phone header b { display:block }
.adm-phone header em { color:var(--danger); font-style:normal; font-size:12px }
.adm-detail ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.adm-detail li { display:flex; flex-direction:column; gap:2px }
.adm-actions { display:flex; flex-wrap:wrap; gap:8px }
.adm-more { align-self:center }
@media (min-width:800px) {
  .adm-tools { display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:16px; align-items:end }
  .adm-tools .qz-form { margin:0 }
}
@media (max-width:720px) {
  .adm-stats { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .adm-group-toggle { grid-template-columns:40px minmax(0,1fr) }
  .adm-side { grid-column:2; align-items:flex-start }
  .adm-pills { justify-content:flex-start }
}
@media (hover:hover) and (pointer:fine) {
  .adm-group-toggle { transition:background .18s var(--ease) }
  .adm-group-toggle:hover { background:var(--wash) }
}