:root {
  --ink: #fff3e6;
  --ink-2: rgba(255, 236, 214, 0.7);
  --ink-3: rgba(255, 236, 214, 0.46);
  --hot: #ffb35a;
  --gold: #f3ca25;
  --og: #ff7d14;
  --cream: #f4ecdf;
  --cyan: #22c8f5;
  --green: #3bd94a;
  --epic: #f2c53a;
  --legend: #ff8a1e;
  --j1: #ffe0a3;
  --j2: #ffae4a;
  --j3: #ff7d14;
  --jdark: #241005;
  --jline: rgba(255, 176, 100, 0.22);
  --jline-2: rgba(255, 204, 150, 0.42);
  --jbg: rgba(22, 11, 5, 0.84);
  --jbg-2: rgba(30, 15, 7, 0.94);
  --brass: #c9a24a;
  --display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --ui: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --word: "Righteous", "Fredoka", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --felt: #0f5a36;
  --felt-hi: #2a8a57;
  --felt-lo: #062a19;
  --rail: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

body { background: #120804; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
[hidden] { display: none !important; }

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hot { color: var(--hot); }
.gold { color: var(--gold); }
.k-touch { display: none; }
.is-touch .k-touch { display: inline; }
.is-touch .k-desk { display: none; }

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.suit-ico { stroke: none; }

* { scrollbar-width: thin; scrollbar-color: rgba(255, 170, 90, 0.5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, #ffb35a, #ff7d14) padding-box; }

#app { position: fixed; inset: 0; overflow: hidden; }

.room { position: absolute; inset: 0; pointer-events: none; }
.room i { position: absolute; inset: 0; }
.room__logs {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 17px, rgba(255, 210, 160, 0.03) 17px 18px, rgba(0, 0, 0, 0) 18px 41px, rgba(0, 0, 0, 0.1) 41px 43px),
    repeating-linear-gradient(180deg, #120702 0, #2a1307 14px, #4a250d 50px, #3c1d0a 92px, #1f0e04 122px, #070301 128px);
}
.room__lamp {
  background:
    radial-gradient(42% 46% at 50% 44%, rgba(255, 176, 80, 0.3), rgba(255, 150, 50, 0.08) 55%, transparent 75%),
    radial-gradient(18% 22% at 50% 4%, rgba(255, 214, 150, 0.35), transparent 70%);
  animation: lamp 7s ease-in-out infinite;
}
.room__shade { background: radial-gradient(120% 100% at 50% 45%, transparent 40%, rgba(5, 2, 0, 0.82)); }
@keyframes lamp { 50% { opacity: 0.86; } }

#room3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.room-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; background: radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(6, 3, 1, 0.55) 100%); }
.has-room #room3d, .has-room .room-vignette { opacity: 1; }
.has-room .stage-table { display: none; }
.has-room .scr--lobby { background: linear-gradient(90deg, rgba(12, 5, 2, 0.62), rgba(12, 5, 2, 0) 28%, rgba(12, 5, 2, 0) 70%, rgba(12, 5, 2, 0.62)), linear-gradient(180deg, rgba(12, 5, 2, 0.45), transparent 16%); }
html.has-room:not([data-tab="play"]) .scr--lobby { background: rgba(12, 5, 2, 0.8); }

.lockup {
  --lw: 300px;
  position: relative;
  display: grid;
  justify-items: center;
  margin: calc(var(--lw) * -0.14) calc(var(--lw) * -0.2) calc(var(--lw) * -0.06);
  padding: calc(var(--lw) * 0.215) calc(var(--lw) * 0.2) calc(var(--lw) * 0.06);
  line-height: 1;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, rgba(0, 0, 0, 0.42) 2px 3px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, rgba(0, 0, 0, 0.42) 2px 3px);
}
.lockup__fan {
  position: absolute;
  left: 50%;
  top: calc(var(--lw) * 0.028);
  z-index: 0;
  width: calc(var(--lw) * 0.86);
  aspect-ratio: 3 / 2;
  translate: -50% 0;
  background: url(../assets/img/lockup-fan.png) center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--lw) * 0.01) calc(var(--lw) * 0.02) rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.lockup__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--lw);
  aspect-ratio: 1074 / 495;
  filter: drop-shadow(0 0 calc(var(--lw) * 0.03) rgba(255, 190, 70, 0.4)) drop-shadow(0 calc(var(--lw) * 0.007) calc(var(--lw) * 0.014) rgba(0, 0, 0, 0.85));
}
.lockup__word, .lockup__gems { position: relative; z-index: 1; }
.lockup__logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fecb57 0%, #fcbc48 33%, #f8ab32 66%, #f5961a 100%);
  -webkit-mask: url(../assets/img/wud-universe-logo-white.png) center / contain no-repeat;
  mask: url(../assets/img/wud-universe-logo-white.png) center / contain no-repeat;
}
.lockup__word {
  margin-top: calc(var(--lw) * 0.0286);
  font: 400 calc(var(--lw) * 0.155) / 0.9 var(--word);
  letter-spacing: 0.02em;
  color: var(--cream);
  text-shadow: 0 calc(var(--lw) * 0.0082) calc(var(--lw) * 0.0163) rgba(0, 0, 0, 0.85), 0 0 calc(var(--lw) * 0.0265) rgba(244, 236, 223, 0.25);
  white-space: nowrap;
}
.lockup__gems { display: flex; gap: calc(var(--lw) * 0.0327); margin-top: calc(var(--lw) * 0.045); }
.lockup__gems i {
  width: calc(var(--lw) * 0.0306);
  aspect-ratio: 1;
  border-radius: calc(var(--lw) * 0.004);
  transform: rotate(45deg);
  background: currentColor;
  box-shadow: 0 0 calc(var(--lw) * 0.0245) currentColor;
}
.lockup__gems i:nth-child(1) { color: var(--cyan); }
.lockup__gems i:nth-child(2) { color: var(--green); }
.lockup__gems i:nth-child(3) { color: var(--epic); }
.lockup__gems i:nth-child(4) { color: var(--legend); }
.lockup--hero { --lw: min(52vw, 520px, 42vh); }
.lockup--tl { --lw: min(44cqw, 330px, 32cqh); }
.lockup--brand { --lw: 112px; }
.lockup.is-alive { position: relative; animation: jolt 6s steps(1) infinite; }
.lockup.is-alive::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--lw) * 0.37);
  z-index: -1;
  width: calc(var(--lw) * 1.25);
  height: calc(var(--lw) * 0.7);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 50, 0.3), rgba(255, 125, 20, 0.09) 55%, transparent);
  transform: translate(-50%, -50%);
  animation: glow-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jolt { 0%, 90.5%, 95%, 100% { opacity: 1; translate: 0; } 91% { opacity: 0.55; translate: -4px 0; } 93% { opacity: 0.85; translate: 3px 0; } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.tl {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  background: #0d0601;
  transition: opacity 0.45s ease;
}
.tl.is-out { opacity: 0; pointer-events: none; }
.tl::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px); }
.tl-art, .tl-shade { position: absolute; inset: 0; pointer-events: none; }
.tl-art > i { position: absolute; inset: 0; }
.tl-logs {
  background:
    radial-gradient(110% 90% at 50% 50%, transparent 38%, rgba(3, 1, 0, 0.82)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 17px, rgba(255, 210, 160, 0.025) 17px 18px, rgba(0, 0, 0, 0) 18px 41px, rgba(0, 0, 0, 0.08) 41px 43px),
    repeating-linear-gradient(180deg, #0d0601 0, #241106 12px, #45220c 46px, #3a1c0a 86px, #1c0d04 114px, #050201 120px);
}
.tl-amber { background: radial-gradient(55% 50% at 50% 80%, rgba(255, 150, 50, 0.3), transparent 70%), radial-gradient(30% 30% at 14% 18%, rgba(255, 200, 130, 0.14), transparent 70%), radial-gradient(30% 30% at 86% 18%, rgba(255, 200, 130, 0.14), transparent 70%); animation: glow-pulse 4.2s ease-in-out infinite; }
.tl-fan { position: absolute; left: 50%; bottom: -6cqh; width: 0; height: 0; opacity: 0.5; }
.tl-fan .sf { --cwf: min(16cqw, 150px); }
.tl-shade { background: radial-gradient(48% 46% at 50% 47%, rgba(10, 4, 1, 0.6), rgba(10, 4, 1, 0.15) 70%, transparent); }
.tl-center { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(8px, 2.2cqh, 18px); width: min(560px, 88cqw); text-align: center; }
.tl-tag { margin: 0 0 clamp(4px, 1.5cqh, 14px); font: 500 clamp(13px, 2cqh, 16px) / 1.45 var(--ui); color: rgba(255, 240, 222, 0.82); letter-spacing: 0.04em; }
.ld-bar { position: relative; width: min(380px, 78cqw); height: 6px; border-radius: 999px; background: #0d0906; box-shadow: inset 0 0 0 1px rgba(255, 196, 110, 0.14), inset 0 1px 4px rgba(0, 0, 0, 0.85); }
.ld-bloom, .ld-core { position: absolute; left: 0; width: 0; border-radius: 999px; pointer-events: none; }
.ld-bloom { top: -3px; height: 12px; background: linear-gradient(90deg, #00c4f9, hsl(125, 85%, 50%) 40%, hsl(48, 90%, 55%) 70%, #ff8a1e); filter: blur(5px) saturate(1.7); opacity: 0.8; }
.ld-core { top: 1px; bottom: 1px; background: linear-gradient(90deg, #22cfff, hsl(125, 85%, 56%) 40%, hsl(48, 92%, 62%) 70%, #ff9a3a); box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.4); }
.ld-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: min(380px, 78cqw); }
.ld-meta .label { overflow: hidden; color: rgba(255, 240, 222, 0.75); white-space: nowrap; text-overflow: ellipsis; }
.ld-meta b { font-size: 22px; color: #ffd76a; text-shadow: 0 0 12px rgba(255, 215, 106, 0.55); font-variant-numeric: tabular-nums; }

.sf {
  --cwf: clamp(84px, 9vw, 150px);
  position: absolute;
  left: calc(var(--cwf) / -2);
  bottom: 0;
  width: var(--cwf);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--cwf) * 0.065);
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 14px 30px rgba(0, 0, 0, 0.4);
  transform-origin: 50% 140%;
  transform: rotate(calc(var(--k) * 11deg));
  animation: fan-in 0.7s var(--ease) both;
  animation-delay: calc((var(--k) + 3) * 60ms);
}
.sf img { display: block; width: 100%; height: 100%; pointer-events: none; }
@keyframes fan-in { from { transform: rotate(0deg) translateY(20px); opacity: 0; } }

.scr { position: fixed; inset: 0; z-index: 20; display: grid; animation: scr-in 0.45s var(--ease) both; }
@keyframes scr-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }

.scr--start { place-items: center; z-index: 30; cursor: pointer; background: #0f0602; }
.scr--start::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.3) 2px 3px),
    radial-gradient(70% 62% at 50% 50%, rgba(8, 4, 1, 0.62), rgba(8, 4, 1, 0.22) 70%, transparent),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(6, 3, 1, 0.62));
}
.st-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #0f0602; }
.st-bg__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
video.st-bg__media { opacity: 0; transition: opacity 0.4s ease; }
.st-bg.is-live video.st-bg__media { opacity: 1; }
html[data-gfx="low"] video.st-bg__media { display: none; }
.st-center { position: relative; display: grid; justify-items: center; gap: clamp(22px, 4.5vh, 40px); padding: 20px; text-align: center; }
.st-btn {
  padding: 18px 50px 14px;
  border-radius: 14px;
  color: var(--jdark);
  background: linear-gradient(180deg, var(--j1), var(--j2) 55%, var(--j3));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 44px rgba(255, 150, 50, 0.5), 0 14px 40px rgba(0, 0, 0, 0.45);
  animation: st-pulse 1.8s ease-in-out infinite;
  transition: transform 0.15s var(--ease);
}
.st-btn span { font: 400 clamp(26px, 3vw, 40px) / 1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.st-btn:hover { transform: translateY(-2px) scale(1.02); }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 70px rgba(255, 190, 90, 0.7), 0 14px 40px rgba(0, 0, 0, 0.45); } }
.st-hint { margin: -10px 0 0; color: var(--ink-3); }
.st-foot { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 236, 214, 0.34); }

.scr--lobby { grid-template-rows: auto 1fr; background: linear-gradient(90deg, rgba(12, 5, 2, 0.75), rgba(12, 5, 2, 0.05) 32%, rgba(12, 5, 2, 0.05) 66%, rgba(12, 5, 2, 0.75)); }
html:not([data-tab="play"]) .scr--lobby { background: rgba(12, 5, 2, 0.78); }

.lb-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
.lb-tabs { justify-self: center; display: flex; gap: 4px; padding: 5px; border: 1px solid var(--jline); border-radius: 16px; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb-tabs button { padding: 10px 14px; border-radius: 11px; font: 600 13px var(--ui); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.lb-tabs button:hover { color: #fff; }
.lb-tabs button.is-on { color: var(--jdark); background: linear-gradient(180deg, var(--j1), var(--j2) 60%, var(--j3)); box-shadow: 0 0 26px rgba(255, 150, 50, 0.4); }
.lb-me { display: flex; align-items: center; gap: 8px; }
.lb-coins { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 12px; border: 1px solid var(--jline); border-radius: 12px; background: rgba(0, 0, 0, 0.38); color: var(--gold); font: 700 15px var(--ui); }
.lb-coins.is-hidden { display: none !important; }
.coin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f3ca25 45%, #b8860b); box-shadow: inset 0 0 0 1.5px rgba(120, 80, 0, 0.6); vertical-align: -2px; }
.lb-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--jline); border-radius: 12px; background: rgba(0, 0, 0, 0.38); color: var(--ink); transition: border-color 0.2s; }
.lb-icon:hover { border-color: var(--j2); }
.lb-icon svg, .hud-btn svg { width: 19px; height: 19px; }
.fs-out, .snd-off, .is-fs .fs-in, [data-mute][aria-pressed="true"] .snd-on { display: none; }
.is-fs .fs-out, [data-mute][aria-pressed="true"] .snd-off { display: block; }
.lb-player { display: flex; align-items: center; min-width: 0; height: 42px; padding: 0 16px 0 14px; border: 1px solid var(--jline); border-radius: 12px; background: rgba(0, 0, 0, 0.38); text-align: left; }
.lb-player:hover { border-color: var(--j2); }
.lb-player__txt { display: grid; gap: 1px; min-width: 0; }
.lb-player__txt b { overflow: hidden; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.lb-player__txt small { font-size: 9.5px; color: var(--hot); }
.lb-player.is-empty .lb-player__txt b { color: var(--j1); }

.lb-body { position: relative; min-height: 0; }
.lb-pane { position: absolute; inset: 0; padding: 6px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; animation: pane-in 0.35s var(--ease) both; }
@keyframes pane-in { from { opacity: 0; transform: translateX(14px); } }
.lb-pane[data-pane="play"] { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(290px, 350px); gap: 20px; overflow: hidden; }
.lb-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; }
.lb-kicker { margin: 4px 2px 0; color: var(--hot); }
.lb-tables { display: grid; gap: 10px; align-content: start; min-height: 0; overflow-y: auto; padding: 12px 4px 10px 0; touch-action: pan-x pan-y; }
.lb-table {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--jline);
  border-radius: 16px;
  background: var(--jbg);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.lb-table:hover { border-color: var(--jline-2); background: rgba(40, 19, 8, 0.92); transform: translateX(3px); }
.lb-table.is-on { border-color: var(--j2); background: linear-gradient(180deg, rgba(255, 170, 80, 0.16), rgba(255, 125, 20, 0.05)), var(--jbg); box-shadow: 0 0 0 1px var(--j2) inset, 0 0 40px rgba(255, 150, 50, 0.2); }
.lb-table__art { position: relative; display: block; height: 74px; overflow: hidden; border-radius: 10px; background: radial-gradient(90% 80% at 50% 30%, var(--felt-hi, #2a8a57), var(--felt, #0f5a36) 55%, #04170d); box-shadow: inset 0 0 0 2px rgba(201, 162, 74, 0.55), inset 0 0 0 4px #2a1306, 0 8px 18px rgba(0, 0, 0, 0.45); }
.mode-art .mf { position: absolute; left: calc(50% - 17px); bottom: -14px; width: 34px; aspect-ratio: 5 / 7; border-radius: 3px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transform-origin: 50% 150%; transform: rotate(calc(var(--k) * 16deg)); }
.mode-art .mf img { display: block; width: 100%; height: 100%; }
.lb-table__body { display: grid; gap: 5px; min-width: 0; }
.lb-table__name { font: 400 22px / 1 var(--display); text-transform: uppercase; color: #fff6ea; letter-spacing: 0.02em; }
.lb-table__tag { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lb-table__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: 2px; }
.lb-table__row em { display: grid; gap: 1px; min-width: 0; font-style: normal; }
.lb-table__row em small { font-size: 9px; color: var(--ink-3); }
.lb-table__row em b { overflow: hidden; font: 700 13.5px var(--ui); font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; text-overflow: ellipsis; }
.lb-table__row em + em b { color: var(--ink); }
.lb-tag { position: absolute; top: -9px; right: 12px; padding: 3px 8px; border-radius: 999px; background: var(--j2); color: var(--jdark); font: 700 9.5px var(--ui); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.lb-tag--daily { background: var(--epic); }

.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; pointer-events: none; }
.stage-table {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.45;
  border-radius: 46% / 54%;
  background:
    radial-gradient(55% 50% at 50% 36%, color-mix(in srgb, var(--felt-hi) 60%, transparent), transparent 72%),
    var(--fibre, none),
    radial-gradient(110% 100% at 50% 40%, var(--felt) 45%, var(--felt-lo) 100%);
  box-shadow:
    0 0 0 3px var(--brass),
    0 0 0 5px #2a1306,
    0 0 0 22px #4a2410,
    0 0 0 24px #1a0a03,
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    0 40px 90px rgba(0, 0, 0, 0.6);
}
.stage-table::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 46% / 54%;
  pointer-events: none;
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}
.stage-fan { position: absolute; left: 50%; top: 58%; width: 0; height: 0; z-index: 2; }
.stage-fan .sf { bottom: auto; top: calc(var(--cwf) * -0.7); }
.stage-table .aura-back, .stage-table .aura-front { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); pointer-events: none; mix-blend-mode: screen; z-index: 1; }
.stage-table .aura-front { z-index: 3; }

.lb-play { display: grid; align-content: end; gap: 12px; min-height: 0; padding-bottom: 6px; }
.lb-sel { padding: 16px 18px; border: 1px solid var(--jline); border-radius: 16px; background: var(--jbg); }
.lb-sel .label { color: var(--hot); }
.lb-sel b { display: block; margin: 6px 0; font-size: 34px; color: #fff; }
.lb-sel p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-modes--one { grid-template-columns: 1fr; }
.lb-modes--three { grid-template-columns: 1fr 1fr 1fr; }
.lb-modes.is-hidden { display: none; }
.lb-mode { position: relative; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--jline); border-radius: 14px; background: var(--jbg); text-align: left; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.lb-mode:hover { border-color: var(--jline-2); }
.lb-mode b { font: 400 19px / 1 var(--display); text-transform: uppercase; color: #fff6ea; letter-spacing: 0.02em; }
.lb-mode em { overflow: hidden; font: 600 11.5px var(--ui); font-style: normal; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.lb-mode.is-on { border-color: var(--j2); background: linear-gradient(180deg, rgba(255, 170, 80, 0.2), rgba(255, 125, 20, 0.06)), var(--jbg); box-shadow: 0 0 0 1px var(--j2) inset, 0 0 30px rgba(255, 150, 50, 0.2); }
.lb-mode.is-on em { color: var(--gold); }
.lb-mode.is-soon b { color: var(--ink-2); }
.lb-modetext { margin: -2px 2px 0; min-height: 2.6em; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.lb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-stats > div { display: grid; gap: 4px; min-width: 0; padding: 11px 14px; border: 1px solid var(--jline); border-radius: 14px; background: var(--jbg); }
.lb-stats .label { font-size: 9.5px; color: var(--ink-3); }
.lb-stats b { overflow: hidden; font-size: 24px; line-height: 1; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.lb-playbtn {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 20px 12px;
  border-radius: 18px;
  color: var(--jdark);
  background: linear-gradient(180deg, var(--j1), var(--j2) 55%, var(--j3));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 50px rgba(255, 150, 50, 0.42), 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: skewX(-4deg);
  transition: transform 0.15s var(--ease), box-shadow 0.2s, filter 0.2s;
}
.lb-playbtn b { font-size: 54px; line-height: 0.9; transform: skewX(4deg); }
.lb-playbtn small { color: rgba(36, 16, 5, 0.7); transform: skewX(4deg); }
.lb-playbtn:hover { transform: skewX(-4deg) translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 0 70px rgba(255, 190, 90, 0.6), 0 18px 40px rgba(0, 0, 0, 0.4); }
.lb-playbtn:active { transform: skewX(-4deg) scale(0.98); }
.lb-playbtn.is-done { filter: saturate(0.4) brightness(0.8); }

.lb-card { width: min(640px, 100%); margin: 8px auto 30px; padding: 26px; border: 1px solid var(--jline); border-radius: 22px; background: radial-gradient(120% 60% at 100% 0%, rgba(255, 140, 40, 0.1), transparent 60%), var(--jbg-2); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 220, 170, 0.06); }
.lb-card--wide { width: min(980px, 100%); }
.lb-card__head h2 { margin: 6px 0 16px; font-size: clamp(34px, 4.4vw, 54px); color: #fff; }
.lb-lead { margin: -6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lb-sub { margin: 18px 0 10px; color: var(--hot); }
.lb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; padding: 5px; border: 1px solid var(--jline); border-radius: 14px; background: rgba(0, 0, 0, 0.36); }
.lb-chips button { flex: 1 1 auto; padding: 9px 14px; border-radius: 10px; font: 600 13px var(--ui); color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.lb-chips button:hover { color: #fff; }
.lb-chips button.is-on { color: var(--jdark); background: linear-gradient(180deg, var(--j1), var(--j2) 60%, var(--j3)); }
.lb-board { margin-top: 4px; overflow: hidden; border: 1px solid var(--jline); border-radius: 16px; background: rgba(14, 6, 2, 0.92); }
.lb-rows { margin: 0; padding: 0; list-style: none; }
.lb-rows li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 64px; align-items: center; gap: 18px; padding: 12px 20px; }
.lb-rows li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lb-rows .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--jline-2); background: rgba(255, 150, 50, 0.07); font: 400 20px var(--display); color: var(--j1); }
.lb-rows li.is-1 .n { color: var(--jdark); background: linear-gradient(180deg, #ffe680, #ffb23e); border-color: #ffd23f; box-shadow: 0 0 22px rgba(255, 210, 63, 0.5); }
.lb-rows li.is-2 .n { color: var(--jdark); background: linear-gradient(180deg, #f2f4f8, #aab4c2); border-color: #cfd6de; }
.lb-rows li.is-3 .n { color: var(--jdark); background: linear-gradient(180deg, #ffc28a, #c7773a); border-color: #e39b5c; }
.lb-rows .nm { display: grid; min-width: 0; }
.lb-rows .nm b { overflow: hidden; font-size: 16px; font-weight: 600; color: #fff6ea; white-space: nowrap; text-overflow: ellipsis; }
.lb-rows .nm small { font-size: 12px; color: var(--ink-3); }
.lb-rows .sc { font: 400 26px var(--display); font-variant-numeric: tabular-nums; color: #fff; }
.lb-rows .ago { text-align: right; font-size: 11.5px; color: var(--ink-3); }
.lb-empty { margin: 0; padding: 26px 20px; color: var(--ink-2); }
.gt-fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--jline); border-radius: 14px; background: rgba(0, 0, 0, 0.28); }
.row.is-done { border-color: rgba(59, 217, 74, 0.35); background: linear-gradient(90deg, rgba(59, 217, 74, 0.08), rgba(0, 0, 0, 0.28) 40%); }
.row__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--jline-2); color: var(--green); }
.row__ico svg { width: 18px; height: 18px; stroke-width: 2.6; }
.row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.row__txt { display: grid; gap: 3px; min-width: 0; }
.row__txt b { font-size: 15.5px; font-weight: 600; color: #fff; }
.row__txt small { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.row__prize { font-size: 12px; text-align: right; color: var(--ink-3); }
.row__prize b { display: block; color: var(--hot); font-weight: 600; font-size: 13px; }
.row__stars { display: flex; gap: 2px; }
.star { font-style: normal; font-size: 20px; line-height: 1; color: rgba(255, 236, 214, 0.18); }
.star.is-on { color: var(--gold); text-shadow: 0 0 10px rgba(243, 202, 37, 0.6); }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tier { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; border: 1px solid var(--jline); font-size: 12px; color: var(--ink-3); }
.tier .star { font-size: 13px; }
.tier.is-on { color: var(--ink); border-color: rgba(243, 202, 37, 0.4); }
.rows.compact .row { padding: 8px 12px; }

.ts-gold { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: -4px 0 6px; padding: 14px 18px; border: 1px solid var(--jline-2); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 210, 58, 0.12), rgba(255, 125, 20, 0.06)); }
.ts-gold.is-off { border-color: var(--jline); background: rgba(0, 0, 0, 0.28); }
.ts-gold > div { display: grid; gap: 4px; }
.ts-gold .label { color: var(--hot); }
.ts-gold p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ts-gold b.display { display: flex; align-items: center; gap: 10px; font-size: 36px; color: #ffe27a; }
.gt-msg { min-height: 1.3em; margin: 8px 0 0; font-size: 13.5px; color: #ffd2b0; }
.gt-msg:empty { display: none; }
.gt-msg.is-ok { color: #b9f5c9; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { position: relative; display: grid; gap: 4px; justify-items: start; padding: 10px; border: 1px solid var(--jline); border-radius: 14px; background: rgba(0, 0, 0, 0.3); text-align: left; transition: border-color 0.2s, transform 0.15s; }
.item:hover { border-color: var(--jline-2); transform: translateY(-2px); }
.item.is-on { border-color: var(--j2); box-shadow: 0 0 0 1px var(--j2) inset, 0 0 26px rgba(255, 150, 50, 0.25); }
.item.is-soon .item-art { filter: saturate(0.55) brightness(0.7); }
.item-art { display: block; width: 100%; border-radius: 9px; overflow: hidden; margin-bottom: 4px; position: relative; }
.felt-swatch { aspect-ratio: 1.5; background: radial-gradient(60% 55% at 50% 38%, var(--felt-hi), transparent 72%), radial-gradient(110% 100% at 50% 40%, var(--felt) 45%, var(--felt-lo) 100%); box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 7px #3a1a08, inset 0 0 22px rgba(0, 0, 0, 0.5); }
.back-art { width: 64%; justify-self: center; aspect-ratio: 5 / 7; background: rgba(255, 255, 255, 0.06); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); border-radius: 6px; }
.back-art img { display: block; width: 100%; height: 100%; }
.item-name { font-size: 14px; font-weight: 600; color: #fff; }
.item-tier { font: 700 9.5px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.item-state { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.item-state.is-on { color: var(--green); font-weight: 600; }
.item-state.is-price { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 700; }
.item-state.is-goal { color: var(--ink-3); }

.lb-rank { margin: -4px 0 18px; }
.lb-rank__next { font-size: 13px; color: var(--ink-2); }
.bar { height: 8px; margin: 0 0 8px; overflow: hidden; border-radius: 999px; border: 1px solid var(--jline); background: rgba(0, 0, 0, 0.45); }
.bar i { display: block; width: 2%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--j3), var(--j1)); box-shadow: 0 0 0.6em rgba(255, 138, 30, 0.7); transition: width 0.5s ease; }
.grid { display: grid; gap: 16px; }
.stat-group h4 { margin: 0 0 8px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.stat { display: grid; gap: 4px; padding: 11px 14px; border: 1px solid var(--jline); border-radius: 12px; background: rgba(0, 0, 0, 0.28); }
.stat .label { font-size: 9.5px; color: var(--ink-3); }
.stat b { font-size: 22px; color: #fff; }

.how ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.how li { display: grid; grid-template-columns: 11em 1fr; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.26); font-size: 14px; line-height: 1.5; }
.how li b { color: var(--hot); font-weight: 600; }
.how li span { color: var(--ink-2); }

.scr--modal { place-items: center; padding: 20px; z-index: 28; background: rgba(12, 5, 2, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); touch-action: auto; }
.gt-card { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid var(--jline); border-radius: 22px; background: radial-gradient(120% 60% at 100% 0%, rgba(255, 140, 40, 0.12), transparent 60%), var(--jbg-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); touch-action: pan-y; }
.gt-card--small { width: min(470px, 100%); }
.gt-card h2 { margin: 8px 0 12px; font-size: clamp(34px, 5vw, 52px); color: #fff9ef; }
.gt-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#player-name, #join-code { width: 100%; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--jline-2); border-radius: 12px; background: rgba(0, 0, 0, 0.4); color: #fff; font: 600 19px var(--ui); -webkit-user-select: text; user-select: text; touch-action: manipulation; }
#player-name:focus, #join-code:focus { outline: none; border-color: var(--j2); box-shadow: 0 0 0 3px rgba(255, 170, 80, 0.25); }
.gt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font: 600 15px var(--ui); color: var(--jdark); background: linear-gradient(180deg, var(--j1), var(--j2) 60%, var(--j3)); box-shadow: 0 0 24px rgba(255, 150, 50, 0.35); transition: transform 0.15s var(--ease), box-shadow 0.2s; }
.lb-btn:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(255, 190, 90, 0.5); }
.lb-btn--ghost { color: var(--ink); background: none; border: 1px solid var(--jline-2); box-shadow: none; }
.lb-btn--ghost:hover { border-color: var(--j2); background: rgba(255, 170, 80, 0.08); box-shadow: none; }
.lb-btn--big { padding: 15px 32px; font-size: 16.5px; }
.ov-save { display: grid; gap: 10px; justify-items: center; margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(255, 170, 90, 0.4); border-radius: 14px; background: rgba(255, 170, 90, 0.08); text-align: center; }
.ov-save[hidden] { display: none; }
.ov-save p { margin: 0; color: #fff; font: 600 13px/1.4 var(--ui); }
.si-list { display: grid; gap: 10px; margin-top: 16px; }
.si-list:empty { display: none; }
.gt-wbtn { justify-content: flex-start; width: 100%; text-align: left; }
.gt-wbtn img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.gt-wbtn small { margin-left: auto; padding-left: 12px; color: var(--j1); font: 600 11px var(--ui); letter-spacing: 0.04em; text-transform: uppercase; }
.gt-wbtn.is-missing { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.gt-wbtn.is-missing img { opacity: 0.7; }
.si-hint { margin: 12px 0 0; color: var(--j1); font: 500 12.5px/1.4 var(--ui); }
.lb-exit { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(255, 190, 110, 0.28); border-radius: 12px; background: rgba(0, 0, 0, 0.35); color: rgba(255, 238, 214, 0.82); font: 700 12px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.lb-exit[hidden] { display: none; }
.lb-exit:not([hidden]) ~ .lb-body .lb-side { padding-bottom: 46px; }
.lb-exit:hover { color: #fff; border-color: rgba(255, 190, 110, 0.55); background: rgba(51, 26, 12, 0.7); }
.lb-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) and (min-height: 521px) { .lb-exit:not([hidden]) ~ .lb-body .lb-side { padding-bottom: 0; } .lb-exit:not([hidden]) ~ .lb-body .lb-play { padding-bottom: 50px; } }
@media (max-width: 640px), (max-height: 520px) { .lb-exit span { display: none; } .lb-exit { padding: 9px 10px; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); } }

.set-rows { display: grid; gap: 8px; margin-top: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--jline); border-radius: 14px; background: rgba(0, 0, 0, 0.28); cursor: pointer; }
.set-row span { display: grid; gap: 2px; }
.set-row b { font-weight: 600; font-size: 15px; color: #fff; }
.set-row small { font-size: 12.5px; color: var(--ink-3); }
.set-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); position: relative; cursor: pointer; transition: background 0.2s; }
.set-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s var(--ease); }
.set-row input[type="checkbox"]:checked { background: linear-gradient(180deg, var(--j2), var(--j3)); }
.set-row input[type="checkbox"]:checked::after { transform: translateX(20px); }
.set-row--slider input { flex: 0 1 200px; accent-color: var(--j2); touch-action: pan-x; }
.set-row--slider output { flex: none; width: 32px; text-align: right; font: 600 13px var(--ui); color: var(--ink-2); }
.set-row--seg { cursor: default; flex-wrap: wrap; }
.set-row--seg .lb-chips { margin: 0; flex: 0 1 auto; }
.set-row--seg small { max-width: 34ch; }
#settings-card .set-rows { gap: 10px; }
.set-row select { flex: none; max-width: 48%; padding: 8px 10px; border: 1px solid var(--jline-2); border-radius: 10px; background: #2a1408; color: var(--ink); font: 600 13.5px var(--ui); }

.toast { position: fixed; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 60; max-width: min(92vw, 520px); padding: 12px 20px; border: 1px solid var(--jline-2); border-radius: 999px; background: rgba(22, 11, 5, 0.94); color: var(--ink); font-size: 14.5px; font-weight: 500; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.25s, transform 0.3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.game {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 max(var(--rail), env(safe-area-inset-right)) max(var(--rail), env(safe-area-inset-bottom)) max(var(--rail), env(safe-area-inset-left));
  pointer-events: none;
  animation: hud-in 0.9s 0.5s var(--ease) both;
}
.game .hud { pointer-events: auto; }
@keyframes hud-in { from { opacity: 0; transform: translateY(-8px); } }
html[data-screen="game"] #room3d, html[data-screen="e8"] #room3d { touch-action: none; }
html[data-screen="game"] .room-vignette, html[data-screen="e8"] .room-vignette { opacity: 0; }
.hud { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: max(8px, env(safe-area-inset-top)) 2px 8px; }
.hud-title b, .hud-title .label { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.55); }
.hud-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 10px; border: 1px solid rgba(255, 220, 170, 0.18); border-radius: 12px; background: rgba(14, 6, 2, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font: 600 13.5px var(--ui); transition: border-color 0.2s, background 0.2s; }
.hud-btn:hover:not(:disabled) { border-color: var(--j2); background: rgba(255, 170, 80, 0.1); }
.hud-title { display: grid; gap: 1px; min-width: 0; }
.hud-title .label { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-title b { font-size: 22px; color: #fff6ea; white-space: nowrap; }
.hud-stats { justify-self: center; display: flex; gap: 8px; }
.hud-stats > div { display: grid; justify-items: center; min-width: 74px; padding: 4px 12px; border-radius: 12px; background: rgba(14, 6, 2, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35); }
.hud-stats .label { font-size: 9px; color: var(--ink-3); }
.hud-stats b { font: 600 19px var(--ui); font-variant-numeric: tabular-nums; color: #ffe9c4; }
.hud-tools { display: flex; gap: 6px; }

.card__gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.08) 100%); mix-blend-mode: screen; }
.e8 { position: relative; min-height: 0; pointer-events: none; }
.e8 button, .e8-pick { pointer-events: auto; }
.e8-opp { position: fixed; left: -999px; top: 0; transform: translate(-50%, -50%); transition: left 0.5s var(--ease), top 0.5s var(--ease); }
.e8-plate { --p: 1; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(14, 6, 2, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35); }
.e8-avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9a0, #c9772a 60%, #6b3510); color: var(--jdark); font: 400 18px var(--display); flex: none; }
.e8-ring { position: absolute; inset: -5px; border-radius: 50%; opacity: 0; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); background: conic-gradient(#ffd76a calc(var(--p) * 1turn), rgba(255, 255, 255, 0.12) 0); transition: opacity 0.3s; }
.is-turn .e8-ring { opacity: 1; }
.is-turn.e8-plate, .is-turn .e8-plate { box-shadow: inset 0 0 0 1px #ffd76a, 0 0 24px rgba(255, 200, 90, 0.45); }
.is-late .e8-ring { background: conic-gradient(#ff6a3d calc(var(--p) * 1turn), rgba(255, 255, 255, 0.12) 0); }
.e8-name { display: grid; gap: 1px; min-width: 0; }
.e8-name b { font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.e8-name small { font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }
.e8-away { color: #ffb38a !important; }
.is-winner .e8-plate { box-shadow: inset 0 0 0 1px var(--green), 0 0 26px rgba(59, 217, 74, 0.5); }
.e8-status { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; width: min(92vw, 640px); }
.e8-log { margin: 0; padding: 7px 16px; border-radius: 999px; background: rgba(14, 6, 2, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.28); font-size: 14px; color: rgba(255, 246, 230, 0.92); text-align: center; }
.e8-suit { display: none; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(14, 6, 2, 0.66); box-shadow: inset 0 0 0 1px #ffd76a, 0 0 18px rgba(255, 200, 90, 0.35); flex: none; }
.e8-suit.is-on { display: flex; animation: land 0.35s var(--ease); }
.e8-suit .suit-ico { width: 26px; height: 26px; background: #fbf8f1; border-radius: 50%; padding: 4px; }
.e8-suit b { font-size: 13px; font-weight: 600; }
.e8-suit .label { display: none; }
.e8-me { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.e8-pass { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.e8-hand, .e8-drawkey { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.e8-hand:focus-within, .e8-drawkey:focus { width: auto; height: auto; clip: auto; clip-path: none; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 12px; background: var(--jbg-2); }
.e8-hand button { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 12px; }
.e8-reacts { position: absolute; right: 0; bottom: 64px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 260px; }
.e8-reacts button { padding: 6px 11px; border-radius: 10px; background: rgba(10, 4, 1, 0.6); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35); font-size: 12.5px; color: var(--ink); }
.e8-reacts button:hover { box-shadow: inset 0 0 0 1px var(--j2); }
.e8-bubbles { position: absolute; inset: 0; pointer-events: none; }
.e8-bubble { position: absolute; transform: translate(-50%, -100%); padding: 7px 13px; border-radius: 14px; background: #fff3dc; color: var(--jdark); font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); animation: bubble 2.2s var(--ease) both; }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, -80%) scale(0.8); } 12%, 80% { opacity: 1; transform: translate(-50%, -100%); } 100% { opacity: 0; transform: translate(-50%, -130%); } }
@keyframes land { from { transform: scale(1.12); opacity: 0.4; } }
.e8-pick { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 3, 1, 0.45); }
.e8-pick__card { display: grid; justify-items: center; gap: 8px; padding: 22px 24px; border-radius: 22px; background: var(--jbg-2); border: 1px solid var(--jline); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.e8-pick__card h3 { margin: 0 0 6px; font-size: 34px; }
.e8-pick__row { display: flex; gap: 10px; }
.e8-pick__row button { display: grid; justify-items: center; gap: 6px; width: 84px; padding: 14px 6px 10px; border-radius: 16px; background: #fbf8f1; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); color: var(--jdark); transition: transform 0.15s var(--ease); }
.e8-pick__row button:hover { transform: translateY(-4px); }
.e8-pick__row .suit-ico { width: 44px; height: 44px; }
.e8-pick__row small { font-size: 12px; font-weight: 600; }

.room-host, .room-join { display: grid; gap: 8px; margin-top: 16px; }
.room-join__row { display: flex; gap: 8px; }
.room-join__row input { margin-top: 0 !important; text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--display) !important; }
.room-code { display: grid; justify-items: center; gap: 4px; margin: 6px 0 14px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.4); }
.room-code b { font-size: 56px; letter-spacing: 0.16em; color: #ffe27a; }
.room-code small { color: var(--ink-3); }
.room-seats { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.room-seats li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--ink-3); }
.room-seats li.is-in { color: #fff; }
.room-seats .e8-avatar { width: 32px; height: 32px; font-size: 15px; }

.scr--over { place-items: center; padding: 20px; z-index: 26; background: radial-gradient(80% 70% at 50% 50%, rgba(12, 5, 2, 0.45), rgba(12, 5, 2, 0.84)); touch-action: auto; }
.ov-card { position: relative; display: flex; flex-direction: column; align-items: stretch; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0 28px 24px; border: 1px solid var(--jline); border-radius: 24px; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 140, 40, 0.16), transparent 60%), var(--jbg-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); text-align: center; touch-action: pan-y; }
.ov-hero { position: relative; height: 196px; margin: 0 -28px -6px; }
.ov-hero canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.ov-hero .aura-front { z-index: 3; }
.ov-fan { position: absolute; left: 50%; top: 160px; width: 0; height: 0; z-index: 2; }
.ov-fan .sf { --cwf: 76px; bottom: 0; }
.ov-title { margin: 6px 0 14px; font-size: clamp(40px, 7vw, 64px); color: #fff; text-shadow: 0 0 30px rgba(255, 170, 60, 0.35); }
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ov-stats > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--jline); border-radius: 14px; background: rgba(0, 0, 0, 0.28); }
.ov-stats .label { font-size: 9.5px; color: var(--ink-3); }
.ov-stats b { font-size: 26px; color: #fff; }
.ov-stats b.gold { color: var(--gold); }
.stars { display: grid; gap: 6px; margin: 12px 0 4px; }
.ov-ch { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 14px; color: var(--ink-2); }
.ov-ch.is-win { color: #fff; box-shadow: inset 0 0 0 1px rgba(59, 217, 74, 0.4); }
.ov-row { justify-content: center; }
.ov-hint { margin: 12px 0 0; color: var(--ink-3); }
#over-goals:empty { display: none; }
#over-goals { margin-top: 10px; text-align: left; }

.lb-tabs button:focus-visible, .lb-table:focus-visible, .lb-mode:focus-visible, .lb-playbtn:focus-visible, .lb-btn:focus-visible, .lb-icon:focus-visible, .hud-btn:focus-visible, .item:focus-visible, .e8 button:focus-visible { outline: 2px solid var(--j1); outline-offset: 2px; }

@media (max-width: 1240px) {
  .lb-tabs button { padding: 10px 10px; font-size: 12px; letter-spacing: 0.05em; }
  .lb-pane[data-pane="play"] { grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(260px, 310px); }
  .lb-table { grid-template-columns: 72px minmax(0, 1fr); }
  .lb-table__name { font-size: 20px; }
  .lb-coins { display: none; }
}

@media (max-width: 1040px) {
  .lockup--brand { display: none; }
  .lb-top { grid-template-columns: 1fr auto; }
  .lb-tabs { justify-self: start; }
  .hud-btn--wide span { display: none; }
}

@media (max-width: 860px) {
  :root { --rail: 6px; }
  .lb-top { grid-template-columns: 1fr; gap: 8px; padding-bottom: 8px; }
  .lb-me { grid-row: 1; justify-content: flex-end; }
  .lb-coins { display: flex; margin-right: auto; height: 38px; }
  .lb-icon, .lb-player { height: 38px; }
  .lb-icon { width: 38px; }
  .lb-player { max-width: 46vw; }
  .lb-tabs { grid-row: 2; justify-self: stretch; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .lb-tabs::-webkit-scrollbar { display: none; }
  .lb-tabs button { flex: 1 0 auto; }
  .lb-pane[data-pane="play"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .lb-stage { grid-row: 1; }
  .stage-table { width: min(86%, 420px); }
  .lb-side { grid-row: 2; grid-template-rows: auto; gap: 4px; }
  .lb-play { grid-row: 3; gap: 8px; padding-bottom: 0; }
  .lb-kicker { display: none; }
  .lb-tables { grid-auto-flow: column; grid-auto-columns: minmax(230px, 74%); overflow-x: auto; overflow-y: visible; padding: 10px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lb-tables::-webkit-scrollbar { display: none; }
  .lb-table { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; scroll-snap-align: start; }
  .lb-table:hover { transform: none; }
  .lb-table__art { height: 58px; }
  .lb-table__tag { display: none; }
  .lb-table__name { font-size: 19px; }
  .lb-sel { display: none; }
  .lb-mode { padding: 9px 12px; }
  .lb-mode b { font-size: 16px; }
  .lb-modetext { min-height: 2.8em; font-size: 12.5px; }
  .lb-stats > div { padding: 8px 12px; }
  .lb-stats b { font-size: 20px; }
  .lb-playbtn { padding: 13px 20px 9px; }
  .lb-playbtn b { font-size: 42px; }
  .lb-playbtn small { display: none; }
  .lb-card, .gt-card { padding: 20px; }
  .ov-card { padding: 0 20px 20px; }
  .lb-rows li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 11px 14px; }
  .lb-rows .n { width: 38px; height: 38px; font-size: 17px; }
  .lb-rows .ago { display: none; }
  .how li { grid-template-columns: 1fr; gap: 2px; }
  .row { grid-template-columns: auto minmax(0, 1fr); }
  .row__prize { grid-column: 2; text-align: left; }
  .hud { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .hud-stats { display: none; }
  .hud-title b { font-size: 18px; }
  .hud-btn { height: 38px; min-width: 38px; padding: 0 8px; }
  .game .hud { grid-template-columns: auto minmax(0, 1fr) auto; }
  .game:not(.game--e8) .hud-stats { display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
  .hud-stats > div { min-width: 0; flex: 1; padding: 2px 10px; grid-auto-flow: column; gap: 8px; align-items: baseline; }
  .hud-stats b { font-size: 15px; }
  .e8-plate { padding: 4px 10px 4px 4px; gap: 7px; }
  .e8-avatar { width: 32px; height: 32px; font-size: 15px; }
  .e8-name b { font-size: 12.5px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  .e8-log { font-size: 12.5px; padding: 6px 12px; }
  .e8-suit b { display: none; }
  .e8-reacts { left: 0; right: 0; max-width: none; justify-content: center; bottom: 58px; }
  .e8-reacts button { padding: 5px 9px; font-size: 11.5px; }
  .e8-pick__row button { width: 66px; }
}

@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
  .lb-top { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .lb-me { grid-column: 2; grid-row: 1; }
  .lb-coins { display: none; }
  .lb-tabs { grid-column: 1; grid-row: 1; }
  .lb-pane[data-pane="play"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
  .lb-tables { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  .lb-stage { display: none; }
  .lb-side, .lb-play { grid-row: 1; }
  .lb-modetext, .lb-stats { display: none; }
  .lb-playbtn b { font-size: 34px; }
}

@media (max-height: 640px) and (min-width: 861px) {
  .lb-sel p, .lb-table__tag, .lb-modetext { display: none; }
  .lb-sel b { font-size: 28px; }
  .lb-playbtn b { font-size: 42px; }
}

.lb-subpane[hidden] { display: none; }
.lb-seg { width: fit-content; max-width: 100%; margin: 0 0 16px; }
.lb-seg button { flex: 0 1 auto; padding: 9px 22px; }

@media (prefers-reduced-motion: reduce) {
  .lockup.is-alive, .lockup.is-alive::before, .scr, .lb-pane, .st-btn, .room__lamp, .tl-amber, .sf, .game, .e8-suit.is-on { animation: none; }
  .toast { transition-duration: 0.01s; }
  video.st-bg__media { display: none; }
}
.has-room .room__lamp { animation: none; }
.is-touch .lb-tabs, .is-touch .scr--modal, .is-touch .hud-btn, .is-touch .hud-stats > div, .is-touch .e8-plate, .is-touch .e8-log { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-touch .lb-tabs { background: rgba(10, 4, 1, 0.74); }
.is-touch .scr--modal { background: rgba(12, 5, 2, 0.88); }
.is-touch .hud-btn, .is-touch .hud-stats > div { background: rgba(14, 6, 2, 0.8); }
.is-touch .e8-plate { background: rgba(14, 6, 2, 0.84); }
.is-touch .e8-log { background: rgba(14, 6, 2, 0.8); }
.g-exit { pointer-events: auto; z-index: 12; }
.g-exit:not([hidden]) ~ .e8 .e8-me { left: calc(max(16px, env(safe-area-inset-left)) - max(var(--rail), env(safe-area-inset-left)) + 100px); }
@media (max-width: 640px), (max-height: 520px) { .g-exit:not([hidden]) ~ .e8 .e8-me { left: calc(max(10px, env(safe-area-inset-left)) - max(var(--rail), env(safe-area-inset-left)) + 50px); } }