:root {
  --bg: #050413;
  --ink: #f7fbff;
  --muted: #aeb9d6;
  --cyan: #56e8ff;
  --pink: #ff4db8;
  --gold: #ffd166;
  --green: #74f2a5;
  --panel: rgba(10, 13, 36, 0.68);
  --line: rgba(255, 255, 255, 0.18);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overscroll-behavior: none;
  touch-action: none;
}

button,
input,
select,
a { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

.game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at 18% 15%, rgba(86, 232, 255, 0.24), transparent 25%),
    radial-gradient(circle at 82% 18%, rgba(255, 77, 184, 0.18), transparent 23%),
    radial-gradient(circle at 50% 100%, rgba(255, 209, 102, 0.12), transparent 30%),
    #050413;
}

.topbar {
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 3, 13, 0.6);
  backdrop-filter: blur(16px);
}

.brand-link,
.title-chip,
.top-actions {
  display: inline-flex;
  align-items: center;
}

.brand-link {
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(86, 232, 255, 0.5);
  border-radius: 7px;
  color: #03111a;
  background: linear-gradient(135deg, var(--cyan), #f8fbff);
  box-shadow: 0 0 22px rgba(86, 232, 255, 0.28);
}

.title-chip {
  flex-direction: column;
  line-height: 1.05;
  text-align: center;
}

.title-chip span { font-size: 0.9rem; font-weight: 900; }
.title-chip b { color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.top-actions { gap: 8px; }

.icon-btn,
.pause-fab {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#btn-orch { font-size: 18px; color: #ffd166; border-color: rgba(255,209,102,.2); }
#btn-orch:hover { background: rgba(255,209,102,.1); border-color: rgba(255,209,102,.4); box-shadow: 0 0 12px rgba(255,209,102,.15); }

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2; /* transparent FX overlay + input surface above the WebGL canvas */
}

#game-canvas-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  background: #050413;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}

.screen.active { display: flex; }
.lobby-screen { align-items: stretch; padding: 18px; overflow-y: auto; touch-action: pan-y; }

.lobby-layout {
  width: min(1080px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(310px, 1.1fr);
  gap: 18px;
  align-items: end;
}

.hero-lockup { align-self: center; padding: 12px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(86, 232, 255, 0.24);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(86, 232, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-lockup h1,
.boot-panel h1 {
  margin: 14px 0 8px;
  font-size: 4rem;
  line-height: 0.95;
  text-shadow: 0 0 18px rgba(86, 232, 255, 0.45), 0 0 40px rgba(255, 77, 184, 0.28);
}

.hero-lockup p,
.boot-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 800;
}

.lobby-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mode-card,
.setup-panel,
.glass-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
}

.mode-card {
  min-height: 116px;
  padding: 14px 10px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mode-card.active,
.mode-card:hover {
  transform: translateY(-2px);
  border-color: rgba(86, 232, 255, 0.58);
  background: rgba(18, 24, 56, 0.78);
}

.mode-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.2) 20%, transparent 27%),
    linear-gradient(135deg, var(--cyan), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 24px rgba(86,232,255,0.24);
}

.mode-icon::before,
.mode-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(5, 16, 25, 0.72);
  border-radius: 50%;
}

.mode-icon::after {
  inset: 13px;
  border-width: 0;
  background: rgba(5, 16, 25, 0.76);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.16);
}

.mode-bots {
  background:
    radial-gradient(circle at 32% 28%, #ffffff, rgba(255,255,255,0.22) 20%, transparent 27%),
    linear-gradient(135deg, #74f2a5, #ffd166);
}

.mode-bots::before { border-radius: 45% 45% 52% 52%; }

.mode-bots::after {
  inset: 12px 10px 16px;
  border-radius: 50% 50% 45% 45%;
  box-shadow: -7px 9px 0 -4px rgba(5,16,25,0.76), 7px 9px 0 -4px rgba(5,16,25,0.76);
}

.mode-local {
  background:
    radial-gradient(circle at 32% 28%, #ffffff, rgba(255,255,255,0.22) 20%, transparent 27%),
    linear-gradient(135deg, #ff4d7d, #56e8ff);
}

.mode-local::before {
  inset: 7px 10px 11px;
  border-radius: 45% 45% 54% 54%;
  transform: translateX(-5px);
  box-shadow: 10px 0 0 -2px rgba(5,16,25,0.72);
}

.mode-local::after { display: none; }

.mode-online {
  background:
    radial-gradient(circle at 32% 28%, #ffffff, rgba(255,255,255,0.22) 20%, transparent 27%),
    linear-gradient(135deg, #8b6cff, #56e8ff);
}

.mode-online::before {
  inset: 10px;
  border-radius: 50%;
  border-color: rgba(5,16,25,0.72);
  box-shadow: 0 0 0 8px rgba(5,16,25,0.18);
}

.mode-online::after {
  inset: 7px;
  border: 2px solid rgba(5,16,25,0.68);
  border-left-color: transparent;
  border-right-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mode-card b,
.mode-card small { display: block; }
.mode-card b { font-size: 1rem; }
.mode-card small { margin-top: 4px; color: var(--muted); font-size: 0.76rem; font-weight: 700; }

.setup-panel { margin-top: 10px; padding: 14px; }

.setup-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.setup-row label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

select,
input {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

/* Accessibility: visible keyboard focus, but no ring on mouse/touch activation. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
  border-radius: 8px;
}
.mode-card:focus-visible,
.dice-button:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}

select option { color: #111827; }

.stake-control {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 92px;
  gap: 8px;
  align-items: center;
}

.stake-control input[type="range"] {
  min-height: 36px;
  padding: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.stake-control input[type="number"] {
  text-align: center;
  font-weight: 900;
}

.stake-control span {
  grid-column: 1 / -1;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.color-select { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 26px rgba(0, 0, 0, 0.24);
}

.swatch[aria-checked="true"] {
  border-color: #ffffff;
  transform: translateY(-1px);
}

.menu-actions,
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.menu-actions.compact { justify-content: center; }

.primary-btn,
.secondary-btn,
.tiny-btn,
.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}

.primary-btn {
  color: #051019;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  box-shadow: 0 0 26px rgba(86, 232, 255, 0.24);
}

.secondary-btn,
.tiny-btn { background: rgba(255, 255, 255, 0.1); }
.tiny-btn { min-height: 34px; padding: 0 10px; }

.room-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.join-line {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  gap: 8px;
  min-width: min(100%, 260px);
}

.room-code-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(86, 232, 255, 0.22);
  border-radius: 8px;
  background: rgba(86, 232, 255, 0.08);
}

.room-code-card b { font-size: 1.4rem; }
.room-status { min-height: 20px; margin-top: 8px; color: var(--muted); font-size: 0.84rem; font-weight: 750; }
.room-roster { display: grid; gap: 6px; margin-top: 8px; }

.room-player {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.progress-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.progress-tile {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.progress-tile span,
.progress-tile small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-tile span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-tile b {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
}

.progress-tile small {
  margin-top: 3px;
  color: rgba(247, 251, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 800;
}

.shop-panel {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-head b {
  color: var(--gold);
  font-size: 1rem;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.shop-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(3, 5, 18, 0.44);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shop-preview {
  grid-row: 1 / span 3;
  position: relative;
  width: 46px;
  height: 52px;
  justify-self: center;
}

.preview-token::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, #fff, #f8eef0 22%, #b98662 100%);
  box-shadow: inset -5px -5px 8px rgba(83, 46, 28, 0.22), 0 0 14px rgba(255, 209, 102, 0.28);
}

.preview-token::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 30px;
  border-radius: 42% 42% 30% 30%;
  background:
    linear-gradient(90deg, rgba(120,64,42,0.92), rgba(255,218,165,0.98), rgba(120,64,42,0.92)) 50% 42% / 100% 4px no-repeat,
    linear-gradient(120deg, #fdf7ef, #d8b393 58%, #8c4a2c);
  clip-path: polygon(28% 0, 72% 0, 88% 82%, 100% 82%, 100% 100%, 0 100%, 0 82%, 12% 82%);
  box-shadow: inset -5px -5px 8px rgba(83, 46, 28, 0.24);
}

.preview-token .gem {
  position: absolute;
  left: 18px;
  top: 31px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ffffff, var(--cyan), var(--pink));
  box-shadow: 0 0 10px rgba(86,232,255,0.5);
}

.preview-comet {
  filter: hue-rotate(-18deg) saturate(1.15);
}

.preview-crystal {
  filter: hue-rotate(78deg) saturate(1.25) brightness(1.08);
}

.preview-pearl-saturn { filter: saturate(1.1) brightness(1.06); }
.preview-crystal-nebula { filter: hue-rotate(78deg) saturate(1.35) brightness(1.08); }
.preview-obsidian-eclipse { filter: brightness(0.58) contrast(1.35) sepia(0.4) saturate(1.55); }
.preview-aurora-orb { filter: hue-rotate(130deg) saturate(1.45) brightness(1.08); }
.preview-meteor-jewel { filter: sepia(0.7) saturate(1.7) brightness(0.74) contrast(1.22); }

.preview-obsidian-eclipse::before,
.preview-meteor-jewel::before {
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,0.7), rgba(255,184,61,0.24) 22%, transparent 28%),
    radial-gradient(circle at 50% 50%, #29242a, #050509 78%);
}

.preview-aurora-orb::before {
  background:
    radial-gradient(circle at 33% 28%, #ffffff, rgba(122,255,215,0.6) 22%, transparent 28%),
    conic-gradient(from 30deg, #00d7c7, #7b3cff, #56e8ff, #00d7c7);
}

.preview-dice {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.44);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #56e8ff 48%, #ffd166);
  box-shadow: inset -6px -7px 12px rgba(0,0,0,0.2), inset 6px 6px 12px rgba(255,255,255,0.52), 0 12px 22px rgba(0,0,0,0.24);
}

.preview-dice::before,
.preview-dice::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06121c;
  box-shadow: 18px 18px 0 #06121c;
}

.preview-dice::before { left: 11px; top: 11px; }
.preview-dice::after { right: 11px; top: 11px; box-shadow: -18px 18px 0 #06121c; }
.preview-nova-dice { background: linear-gradient(145deg, #ffffff, #ffd166 48%, #ff4db8); }
.preview-void-dice { background: linear-gradient(145deg, #2a2358, #111827 48%, #56e8ff); }
.preview-royal-gold { background: linear-gradient(145deg, #ffffff, #ffd166 48%, #c1842e); }
.preview-nebula-crystal { background: linear-gradient(145deg, #ffffff, #8b6cff 42%, #ff4df0); }
.preview-void-eclipse { background: linear-gradient(145deg, #2a2358, #050509 48%, #d6a23f); }
.preview-aurora-prism { background: linear-gradient(145deg, #e8fff6, #22e0b0 48%, #7b3cff); }
.preview-supernova { background: linear-gradient(145deg, #fff6e6, #ff9d3c 48%, #ff2fb0); }

.shop-item.equipped {
  border-color: rgba(255, 209, 102, 0.68);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.18);
}

.shop-item span,
.shop-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-item span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-item b {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.shop-item small {
  margin-top: 2px;
  color: rgba(247, 251, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 850;
}

.boot-panel,
.records-panel,
.pause-panel,
.victory-panel {
  width: min(460px, 100%);
  padding: 24px;
  text-align: center;
}

.orb-logo,
.victory-orb {
  width: 98px;
  height: 98px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, rgba(255, 255, 255, 0.1) 21%, transparent 24%), conic-gradient(from 40deg, var(--cyan), var(--pink), var(--gold), var(--green), var(--cyan));
  box-shadow: 0 0 34px rgba(86, 232, 255, 0.44), inset 0 -20px 30px rgba(0, 0, 0, 0.38);
  animation: float-orb 3s ease-in-out infinite;
}

.victory-orb { width: 120px; height: 120px; }

.tutorial-card {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 14px;
  border: 1px solid rgba(255, 209, 102, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.18), transparent 34%),
    rgba(7, 9, 28, 0.94);
  box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 0 28px rgba(86,232,255,0.16);
  backdrop-filter: blur(18px);
}

.tutorial-card b,
.tutorial-card p {
  display: block;
  margin: 0;
}

.tutorial-card b {
  color: #ffffff;
  font-size: 0.98rem;
}

.tutorial-card p {
  margin-top: 5px;
  color: rgba(247,251,255,0.76);
  font-size: 0.82rem;
  font-weight: 800;
}

.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.player-rail {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.player-chip {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(3, 5, 18, 0.55);
  backdrop-filter: blur(12px);
}

.player-chip.active {
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0 24px rgba(86, 232, 255, 0.3);
}

.player-chip b,
.player-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-chip b { font-size: 0.78rem; }
.player-chip small { color: var(--muted); font-size: 0.68rem; font-weight: 800; }

.turn-banner {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: min(540px, calc(100% - 28px));
  transform: translateX(-50%);
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(3, 5, 18, 0.58);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(12px);
}

.dice-dock {
  position: absolute;
  left: 50%;
  bottom: max(56px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: auto;
  transition: left 180ms ease, right 180ms ease, top 180ms ease, bottom 180ms ease, transform 180ms ease;
}

.dice-dock.seat-0 {
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  top: auto;
  bottom: max(82px, env(safe-area-inset-bottom));
  transform: none;
}

.dice-dock.seat-1 {
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  top: 128px;
  bottom: auto;
  transform: none;
}

.dice-dock.seat-2 {
  left: auto;
  right: max(16px, env(safe-area-inset-right));
  top: 128px;
  bottom: auto;
  transform: none;
}

.dice-dock.seat-3 {
  left: auto;
  right: max(16px, env(safe-area-inset-right));
  top: auto;
  bottom: max(82px, env(safe-area-inset-bottom));
  transform: none;
}

.dice-button {
  position: relative;
  width: 86px;
  height: 86px;
  --cube: 74px;
  --die-bg: linear-gradient(150deg, #ffffff, #ffd166 52%, #c1842e);
  --pip: #06121c;
  --edge: rgba(255, 255, 255, 0.5);
  --glow: rgba(255, 209, 102, 0.42);
  border: none;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  perspective: 620px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 26px var(--glow);
}

.dice-cube {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cube);
  height: var(--cube);
  margin: calc(var(--cube) / -2) 0 0 calc(var(--cube) / -2);
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(-24deg);
  transition: transform 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
  pointer-events: none;
}

.dice-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 13%;
  border-radius: 12px;
  background: var(--die-bg);
  border: 1px solid var(--edge);
  box-shadow: inset -7px -8px 14px rgba(0, 0, 0, 0.22), inset 7px 7px 14px rgba(255, 255, 255, 0.4);
  backface-visibility: hidden;
}

.dice-face i {
  align-self: center;
  justify-self: center;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--pip);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.df1 { transform: translateZ(calc(var(--cube) / 2)); }
.df6 { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.df2 { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.df5 { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.df3 { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
.df4 { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }

.dice-button.dice-royal-gold  { --die-bg: linear-gradient(150deg, #ffffff, #ffd166 52%, #c1842e); --pip: #06121c; --glow: rgba(255, 209, 102, 0.42); }
.dice-button.dice-nova-dice   { --die-bg: linear-gradient(150deg, #ffffff, #ffd166 50%, #ff4db8); --pip: #2a0f22; --glow: rgba(255, 209, 102, 0.42); }
.dice-button.dice-nebula-crystal { --die-bg: linear-gradient(150deg, #ffffff, #8b6cff 44%, #ff4df0); --pip: #180a2e; --glow: rgba(255, 77, 240, 0.4); }
.dice-button.dice-void-dice   { --die-bg: linear-gradient(150deg, #2a2358, #111827 50%, #56e8ff); --pip: #eafbff; --edge: rgba(255, 255, 255, 0.22); --glow: rgba(86, 232, 255, 0.42); }
.dice-button.dice-void-eclipse { --die-bg: linear-gradient(150deg, #29223f, #050509 54%, #d6a23f); --pip: #f7fbff; --edge: rgba(255, 255, 255, 0.2); --glow: rgba(214, 162, 63, 0.4); }
.dice-button.dice-aurora-prism { --die-bg: linear-gradient(150deg, #e8fff6, #22e0b0 46%, #7b3cff); --pip: #04241d; --glow: rgba(34, 224, 176, 0.46); }
.dice-button.dice-supernova   { --die-bg: linear-gradient(150deg, #fff6e6, #ff9d3c 46%, #ff2fb0); --pip: #2a0a06; --glow: rgba(255, 157, 60, 0.5); }

.dice-button:disabled { cursor: default; opacity: 0.6; filter: saturate(0.65); }
.dice-button.rolling .dice-cube { animation: dice-tumble 620ms linear infinite; }

.dice-value-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dice-copy {
  min-width: 112px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(3, 5, 18, 0.7);
  color: var(--muted);
  text-align: center;
  font-size: 0.76rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.pause-fab {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  pointer-events: auto;
}

.toast {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: 126px;
  max-width: min(420px, calc(100% - 28px));
  transform: translateX(-50%) translateY(20px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 6, 20, 0.82);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 900;
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(14px);
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.records-list,
.stat-grid { display: grid; gap: 8px; margin: 16px 0; }

.victory-results {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.record-row,
.stat-tile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-tile { display: grid; text-align: left; }
.stat-tile span { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.stat-tile b { font-size: 1.05rem; }

.final-score {
  margin: 12px auto;
  font-size: 2.25rem;
  font-weight: 950;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.38);
}

.standings-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.standing-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.standing-row strong { color: var(--gold); }
.standing-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.standing-row small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 850;
}

.standing-symbol {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, var(--gold));
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.32);
}

.standing-symbol::before {
  content: "";
  position: absolute;
  inset: 4px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  box-shadow: 0 0 8px rgba(86, 232, 255, 0.32);
}

.standing-symbol.rank-1 { filter: saturate(0.75) brightness(1.05); }
.standing-symbol.rank-2 { filter: hue-rotate(80deg) saturate(0.95); }
.standing-symbol.rank-3 { filter: grayscale(0.35) brightness(0.9); }

.score-nudge {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 209, 102, 0.26);
  border-radius: 8px;
  background: rgba(255, 209, 102, 0.08);
}

@keyframes float-orb {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(8deg); }
}

@keyframes dice-tumble {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(1080deg) rotateY(720deg); }
}

@media (max-width: 800px) {
  .topbar { min-height: 52px; }
  .brand-link span:last-child { display: none; }
  .lobby-layout { grid-template-columns: 1fr; align-items: stretch; }
  .hero-lockup { padding: 4px 2px 0; }
  .hero-lockup h1 { font-size: 2.55rem; }
  .lobby-grid { grid-template-columns: 1fr; }
  .mode-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 10px;
    align-items: center;
    min-height: 74px;
    padding: 10px;
  }
  .mode-icon { grid-row: span 2; margin: 0; }
  .setup-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .progress-panel { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
  .player-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turn-banner { bottom: max(10px, env(safe-area-inset-bottom)); }
  .dice-button { width: 78px; height: 78px; --cube: 66px; }
  .pause-fab { width: 44px; height: 44px; bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .player-rail { left: 10px; right: auto; top: 10px; width: 210px; grid-template-columns: 1fr; }
  .turn-banner { right: 12px; left: auto; bottom: 10px; transform: none; }
  .dice-dock.seat-0 { left: 226px; bottom: 56px; }
  .dice-dock.seat-1 { left: 226px; top: 62px; }
  .dice-dock.seat-2 { right: 12px; top: 62px; }
  .dice-dock.seat-3 { right: 12px; bottom: 56px; }
}

/* Orchestra trigger — sits inline next to roll button */
.dice-row { display: flex; align-items: center; gap: 6px; justify-content: center; position: relative; z-index: 15; }
.orch-fab { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(20,10,50,.85); color: #ffd166; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s;
  flex-shrink: 0; margin-left: 6px; }
.orch-fab:hover { transform: scale(1.1); box-shadow: 0 0 12px rgba(255,210,100,.3); }
.orch-picker { position: absolute; top: 100%; right: 0; margin-top: 6px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(10,8,28,.94); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 5px; z-index: 210; }

/* Orchestra picker — premium card menu */
.orch-picker-top { position: absolute; top: 52px; right: 12px; display: flex; flex-direction: column; gap: 6px;
  min-width: 218px;
  background: linear-gradient(165deg, rgba(24,18,54,.97), rgba(8,6,24,.97));
  border: 1px solid rgba(255,209,102,.22); border-radius: 16px; padding: 10px; z-index: 220;
  box-shadow: 0 18px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(86,232,255,.06), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  animation: orch-pop 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes orch-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.orch-picker-head {
  padding: 2px 6px 6px; color: var(--gold, #ffd166); font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08);
}
.orch-opt { border: 1px solid transparent; border-radius: 12px; padding: 8px 10px;
  background: rgba(255,255,255,.05); color: #d9e2ff; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.orch-opt:hover { background: rgba(255,255,255,.12); color: #fff; }
.orch-emoji { font-size: 22px; width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border-radius: 10px; flex-shrink: 0; }
.orch-copy { display: grid; gap: 1px; min-width: 0; }
.orch-copy b { font-size: 0.84rem; font-weight: 850; }
.orch-copy small { color: rgba(215,225,255,.62); font-size: 0.68rem; font-weight: 700; }
.orch-picker-top .orch-opt:hover { transform: translateX(3px); }
.orch-picker-top .orch-opt[data-theme="sad"]:hover { border-color: rgba(106,155,216,.5); background: rgba(106,155,216,.14); box-shadow: 0 0 18px rgba(106,155,216,.2); }
.orch-picker-top .orch-opt[data-theme="dance"]:hover { border-color: rgba(255,106,159,.5); background: rgba(255,106,159,.14); box-shadow: 0 0 18px rgba(255,106,159,.2); }
.orch-picker-top .orch-opt[data-theme="raspberry"]:hover { border-color: rgba(130,232,96,.5); background: rgba(130,232,96,.14); box-shadow: 0 0 18px rgba(130,232,96,.2); }
.orch-picker-top .orch-opt[data-theme="fanfare"]:hover { border-color: rgba(255,209,102,.55); background: rgba(255,209,102,.14); box-shadow: 0 0 18px rgba(255,209,102,.24); }

/* Turn timer — countdown ring above the dice */
.turn-timer {
  --tt-frac: 1;
  --tt-color: #56e8ff;
  position: relative;
  width: 40px; height: 40px; margin: 0 auto 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8,10,30,.92) 58%, transparent 60%),
    conic-gradient(var(--tt-color) calc(var(--tt-frac) * 360deg), rgba(255,255,255,.1) 0);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 12px color-mix(in srgb, var(--tt-color) 35%, transparent);
  transition: box-shadow .2s;
}
.turn-timer b { font-size: 0.82rem; font-weight: 950; color: #f2f7ff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.turn-timer.urgent { animation: tt-pulse 600ms ease-in-out infinite; }
.turn-timer.urgent b { color: #ffdce2; }
@keyframes tt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Quick match */
.quick-match-btn { width: 100%; font-size: 1rem;
  background: linear-gradient(135deg, #56e8ff 0%, #8b6cff 55%, #ff4db8 100%);
  box-shadow: 0 6px 22px rgba(86,232,255,.28); }
.quick-match-btn:hover { filter: brightness(1.08); }
.quick-match-cancel { width: 100%; }
.quick-match-status {
  margin: 4px 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(86,232,255,.08); border: 1px solid rgba(86,232,255,.22);
  color: #bfeffb; font-size: 0.82rem; font-weight: 800; text-align: center;
}
.quick-match-status.searching::after {
  content: ''; display: inline-block; width: 1.2em; text-align: left;
  animation: qm-dots 1.2s steps(4, end) infinite;
}
@keyframes qm-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
  .turn-timer.urgent, .orch-picker-top, .quick-match-status.searching::after { animation: none; }
  .dice-button.rolling .dice-cube { animation: none; }
  .dice-cube { transition-duration: 1ms; }
}

/* The hidden attribute always wins over styled display values */
[hidden] { display: none !important; }