/* Tactile arcade materials. Layout and game state remain owned by game-ui. */
body[data-ui] {
  background-color: #161025;
  background-image: radial-gradient(ellipse at 50% -15%, #6945b86b, transparent 62%),
    radial-gradient(ellipse at 100% 80%, #442b681f, transparent 55%),
    linear-gradient(135deg, #211536 0%, #130f20 72%);
  --arcade-rim: #8270ad;
  --arcade-shadow: #080611;
}
body > header { background: linear-gradient(180deg, #38254a55, #1c142f22); }
.logo { text-shadow: 0 2px 0 #080611, 0 0 18px #cfb1ff22; }
.logoMark {
  background: url('/game-assets/chip.svg') center / contain no-repeat;
  border: 0; outline: 0; box-shadow: none; color: transparent;
  width: 40px; height: 40px; transform: rotate(-10deg); flex-shrink: 0;
}
.headerStat { position: relative; }
.headerStat > small { color: #c4b8df; }
.headerStats .headerBalance { color: #ffe699; text-shadow: 0 2px 0 #513509; }
.headerCoins > small, .headerTime > small { display: flex; gap: 3px; align-items: center; }
.headerCoins > small::before, .headerTime > small::before {
  content: ''; width: 13px; height: 13px; display: inline-block;
  background: url('/game-assets/chip.svg') center / contain no-repeat;
}
.headerTime > small::before { background-image: url('/game-assets/timer.svg'); }
.headerStats #timerSlot {
  background: linear-gradient(160deg, #60447e, #322242 62%, #261a36);
  border-color: #a58ac3 #514064 #251932;
  box-shadow: inset 0 1px 0 #e8d3ff59, inset 0 -2px 0 #120c2080, 0 3px 0 #090611;
}
.headerStats #timerSlot .clock { color: #ffe8a3; text-shadow: 0 2px 0 #573614; }

/* An inset black play surface surrounded by a machined violet rim. */
#questionCard {
  border: 2px solid #73608c;
  border-top-color: #bda3df; border-bottom-color: #3e2d54;
  background: radial-gradient(ellipse at 0% 0%, #42304f22, transparent 52%),
    linear-gradient(145deg, #15111c, #07070c 58%, #100d18);
  box-shadow: inset 0 2px 0 #e9d8ff16, inset 0 -3px 0 #0009,
    0 4px 0 #392746, 0 7px 0 #09060f, 0 12px 24px #0005;
}
#questionCard::before { inset: -2px; opacity: .85; }
#questionText { text-shadow: 0 2px 1px #0008; }
#questionText[data-question-index]:not([data-question-index=''])::before {
  background: linear-gradient(145deg, #ffe8a3, #f5bd4d);
  border-color: #fff0b0 #ac6e27 #80521d;
  color: #49301c; text-shadow: 0 1px 0 #fff5;
  box-shadow: inset 0 1px 0 #fff9, 0 2px 0 #6f441d, 0 4px 6px #0006;
}
.timeTrack { height: 3px; background: #140d23; }
#timeFill { background: linear-gradient(90deg, #8e60f5, #d9c3ff); box-shadow: 0 0 8px #be8dff88; }
#game #options { padding-bottom: 5px; }
#game #options button {
  --answer: #ffd36a; --answer-edge: #ba791f; --answer-base: #78471b;
  background: linear-gradient(180deg, #ffffff70 0%, #ffffff22 9%, transparent 52%, #0000000d 100%), var(--answer);
  color: #30251c; border: 2px solid var(--answer-edge); border-top-color: #fff3bc;
  box-shadow: inset 0 2px 0 #ffffffa3, inset 0 -3px 0 #00000018,
    0 5px 0 var(--answer-base), 0 7px 0 #05040a, 0 9px 12px #0006;
  text-shadow: 0 1px 0 #fff5;
  transition: transform .13s ease-out, box-shadow .13s ease-out, opacity .2s;
}
#game #options button:nth-child(2) { --answer: #91ddf7; --answer-edge: #3187b3; --answer-base: #1d4c72; color: #122e3f; }
#game #options button:nth-child(3) { --answer: #ffb18f; --answer-edge: #b95a40; --answer-base: #78382b; color: #432620; }
#game #options button:nth-child(4) { --answer: #9fe3b2; --answer-edge: #42936a; --answer-base: #25533d; color: #18362b; }
#game #options .answerLetter {
  background: linear-gradient(145deg, #fff8, #fff2);
  border: 1px solid #ffffffa6; border-bottom-color: #0002;
  box-shadow: inset 0 1px 0 #fffa, 0 2px 3px #0002;
  color: inherit; text-shadow: 0 1px 0 #fff8;
}
#game #options button:not(:disabled):hover { border-color: var(--answer-edge); border-top-color: #fff3bc; box-shadow: inset 0 2px 0 #fff9, inset 0 -3px 0 #0002, 0 7px 0 var(--answer-base), 0 9px 0 #05040a, 0 12px 16px #0006; }
#game #options button:not(:disabled):active,
#game #options button.selected {
  transform: translateY(3px); border-color: var(--answer-edge);
  box-shadow: inset 0 2px 4px #0002, inset 0 -1px 0 #fff5, 0 2px 0 var(--answer-base), 0 4px 0 #05040a;
}
#game #options button.selected { outline: 2px solid #fff5c1; outline-offset: 3px; }
#game #options[data-answer-state=saved] button:not(.selected),
#game #options[data-answer-state=saving] button:not(.selected) { opacity: .42; box-shadow: inset 0 1px 0 #fff7, 0 3px 0 var(--answer-base), 0 5px 0 #05040a; }
#answerStatus[data-state=saved] { border-color: #69b57a; background: linear-gradient(135deg, #23472e, #192a26); box-shadow: inset 0 1px 0 #c8ffc022; color: #c9f6c5; }
.questionEnter { animation: arcadeDeal .42s cubic-bezier(.18,.78,.25,1) both; }
@keyframes arcadeDeal { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Illustrated controls sit on individual raised navigation pedestals. */
.bottomNav {
  background: linear-gradient(180deg, #4b345e, #2b1e3e 13%, #241832 88%);
  border-color: #9c7db6; border-top-width: 2px;
  box-shadow: inset 0 1px 0 #f5d9ff40, 0 -4px 0 #110a1b, 0 -12px 28px #08040f44;
  backdrop-filter: none;
}
.bottomNav button { color: #c0b0d3; border: 1px solid transparent; gap: 1px; padding: 3px 5px; text-shadow: 0 2px 0 #0e0818; }
.navGameIcon { display: block; width: 33px; height: 33px; object-fit: contain; filter: saturate(.8) brightness(.85); transition: transform .22s, filter .22s; pointer-events: none; }
.bottomNav button[aria-selected=true] {
  background: linear-gradient(160deg, #775392, #48305e 60%, #352343);
  border-color: #d1ab65 #89623f #68442f; color: #fff0b0;
  box-shadow: inset 0 1px 0 #ffeab74d, inset 0 -2px 0 #21132b, 0 3px 0 #11091b;
}
.bottomNav button[aria-selected=true] .navGameIcon { filter: none; animation: iconLand .4s cubic-bezier(.2,.85,.3,1.35); }
.bottomNav button[aria-selected=true] i { display: none; }
.bottomNav button:hover:not(:disabled) { transform: none; }
.bottomNav button:active:not(:disabled) { transform: translateY(2px); }
@keyframes iconLand { 0% { transform: translateY(3px) scale(.85); } 60% { transform: translateY(-3px) scale(1.1); } 100% { transform: none; } }
#screenTable:not([hidden]), #screenRanks:not([hidden]), #screenMore:not([hidden]) { animation: arcadeScreen .24s ease-out; }
@keyframes arcadeScreen { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Same material family through entry, lobby, tools and rankings. */
#home .homeConsole, .studentLobby, .hostSetup, #pokerHUD, #liveLeaderboard, .finalResults {
  background: radial-gradient(ellipse at 50% 0%, #78509c33, transparent 75%), linear-gradient(160deg, #352444, #21172f 80%);
  border: 2px solid #65507d; border-top-color: #b098c9;
  box-shadow: inset 0 2px 0 #f3dcff18, inset 0 -3px 0 #09051166, 0 5px 0 #100a1c, 0 10px 28px #05020c55;
}
#home .homeModeTabs, .hostSetupTabs { background: #160f24; border-color: #59406f; box-shadow: inset 0 2px 5px #08030f; }
#home .homeModeTabs button[aria-selected=true], .hostSetupTabs button[aria-selected=true] {
  background: linear-gradient(#d5baff, #a97ae8); border: 1px solid #e7d2ff; border-bottom-color: #8e5db2;
  color: #302044; text-shadow: 0 1px 0 #fffa; box-shadow: inset 0 1px 0 #fff8, 0 3px 0 #593d7b;
}
#home input { background: linear-gradient(180deg, #130e1f, #1e152e); border-color: #775b92; box-shadow: inset 0 3px 6px #0007, 0 1px 0 #ccb6ec26; }
#home #joinBtn, #home #createBtn, #startBtn, .returnToPlay {
  background: linear-gradient(#e3ff9c, #a9db4e); border: 2px solid #e4ffaa; border-bottom-color: #82a939;
  color: #293916; text-shadow: 0 1px 0 #ffffa666;
  box-shadow: inset 0 2px 0 #ffffce99, inset 0 -3px 0 #70912644, 0 4px 0 #506626, 0 6px 0 #0b0814;
}
#home #joinBtn::after, #home #createBtn::after { content: ''; width: 30px; height: 30px; margin-left: 10px; background: url('/game-assets/play.svg') center / contain; }
#home #createBtn { background: linear-gradient(#ffd7ac, #ff9b73); border-color: #ffe1b2 #bf7352 #955038; color: #4e2922; box-shadow: inset 0 2px 0 #fff7, 0 4px 0 #784632, 0 6px 0 #0b0814; }
.lobbyChip { width: 100px; height: 100px; background: url('/game-assets/chip.svg') center / contain no-repeat; color: transparent; border: 0; outline: 0; box-shadow: none; transform: rotate(-12deg); filter: drop-shadow(0 10px 18px #ffc94926); }
.lobbyFacts > span { background: linear-gradient(145deg, #1d1329, #30203e); border-color: #74568a; box-shadow: inset 0 2px 4px #0006, 0 1px 0 #c89ee82b; }
.lobbyFacts strong { color: #ffe7a6; text-shadow: 0 2px 0 #402234; }
.miniAvatar, .seatAvatar, .revealAvatar { box-shadow: inset 0 2px 2px #ffffff70, inset 0 -3px 3px #0003, 0 3px 0 #0b0713; }
.ghost { background-image: linear-gradient(#ffffff09, #00000019); box-shadow: inset 0 1px 0 #e5cfff20, 0 2px 0 #100b1b; }
#screenRanks .screenHeading { padding-right: 65px; position: relative; }
#screenRanks .screenHeading::after { content: ''; position: absolute; top: 0; right: 0; width: 62px; height: 62px; background: url('/game-assets/trophy.svg') center / contain no-repeat; transform: rotate(8deg); }
.hostRankRow:first-child { background: linear-gradient(90deg, #d7a54d20, transparent); border-radius: 12px; }
.hostRankRow:first-child .hostRankAvatar { outline: 2px solid #edbf65; }

/* Violet velvet, a polished brass rail, and sculpted moving chips. */
.tableFelt, .revealFelt {
  border-color: #b88c48; border-top-color: #f4d48a; border-bottom-color: #75502e;
  background: radial-gradient(ellipse at 42% 25%, #8259b5, #543275 60%, #342045);
  box-shadow: 0 0 0 2px #4d2e34, 0 0 0 5px #bf965e, 0 11px 0 5px #24112b,
    0 18px 24px #08020a99, inset 0 0 0 2px #cbb0e559, inset 0 7px 18px #150b2177;
}
.tableFelt::before, .revealFelt::before { border-color: #ead3ff42; }
.tablePot strong, .revealPot strong { color: #ffe399; text-shadow: 0 3px 0 #624024; }
.tablePot .potChips { width: 68px; height: 36px; color: transparent; background: url('/game-assets/chip.svg') left / 38px 38px no-repeat, url('/game-assets/chip.svg') right / 38px 38px no-repeat; align-self: center; }
.pokerTable .tableSeat { background: linear-gradient(150deg, #4a345d, #251932); border-color: #a98abb; box-shadow: inset 0 1px 0 #e5c6ff44, 0 4px 0 #120b1c; }
.pokerTable .mySeat { border-color: #f1d18b; background: linear-gradient(145deg, #5d4168, #34223c); }
.revealDialog { background: radial-gradient(ellipse at 50% 10%, #79519a88, transparent 60%), linear-gradient(155deg, #30203e, #160f25 80%); border: 2px solid #b793d3; border-bottom-color: #654278; box-shadow: inset 0 2px 0 #fff3, 0 5px 0 #1a0d26, 0 30px 120px #000a; }
.revealDialog[open] { animation: arcadeDeal .3s ease-out; }
.revealCopy h2, #studentResultTitle { text-shadow: 0 3px 0 #130a20; }
.revealCopy > strong { text-shadow: 0 2px 0 #302612; }
.flyingCoin, .revealFlyingChip, .illustratedChips i {
  background: url('/game-assets/chip.svg') center / contain no-repeat;
  border: 0; border-radius: 0; box-shadow: none; color: transparent;
  width: 30px; height: 30px;
}
.illustratedChips i:nth-child(2) { background: url('/game-assets/chip.svg') center / contain no-repeat; transform: translateY(-4px); }
.illustratedChips i:nth-child(3) { background: url('/game-assets/chip.svg') center / contain no-repeat; }
.revealSeat > strong.earned { animation: awardLand .4s 1.8s both; }
@keyframes awardLand { 0% { transform: scale(.85); } 65% { transform: scale(1.15); } 100% { transform: scale(1); } }
.resultSuccessIcon { width: 138px; height: 138px; border-radius: 0; background: url('/game-assets/trophy.svg') center / contain no-repeat; color: transparent; filter: drop-shadow(0 6px 25px #ffc65540); animation: trophyArrives .6s cubic-bezier(.15,.8,.3,1.3); }
@keyframes trophyArrives { from { opacity: 0; transform: translateY(15px) scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
.studentResult { background: linear-gradient(145deg, #30233d, #1b1529); border: 1px solid #7c628f; color: #e2d8ec; box-shadow: inset 0 1px 0 #fff2, 0 4px 0 #0b0712; }
.studentResult h2 { color: #ffe19b; }
body[data-result-view=correct] .studentResult, body[data-result-view=waiting] .studentResult { border: 0; box-shadow: none; }
@media(max-width:760px) {
  body[data-session=true] > header .logoMark { width: 32px; height: 32px; }
  .headerStats { gap: 10px; }
  .headerStats #timerSlot { padding-block: 3px; }
  .headerStat > small { font-size: 6px; }
  .headerStats #timerSlot .clock { font-size: 20px; }
  .navGameIcon { width: 30px; height: 30px; }
  .bottomNav button { min-height: 49px; }
  .bottomNav { gap: 8px; padding-top: 6px; }
  .lobbyChip { width: 85px; height: 85px; margin-bottom: 15px; }
  .resultSuccessIcon { width: 120px; height: 120px; }
}
@media(hover:none) {
  #game #options button:not(:disabled):hover { transform: none; box-shadow: inset 0 2px 0 #fff9, inset 0 -3px 0 #0002, 0 5px 0 var(--answer-base), 0 7px 0 #05040a; }
  #game #options button:not(:disabled):active { transform: translateY(3px); box-shadow: inset 0 2px 3px #0002, 0 2px 0 var(--answer-base); }
}
@media(prefers-reduced-motion:reduce) {
  .questionEnter, .navGameIcon, .revealDialog[open], .revealSeat > strong.earned, .resultSuccessIcon,
  #screenTable:not([hidden]), #screenRanks:not([hidden]), #screenMore:not([hidden]) { animation: none; }
}

/* Decorative artwork replaces the old text glyph, including inherited shadows. */
.logoMark { text-shadow: none; }
#home .homeModeTabs button { display: flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 7px; }
.entryModeIcon { display: block; flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; transition: transform .18s ease-out; pointer-events: none; }
#home .homeModeTabs button[aria-selected=true] .entryModeIcon { animation: iconLand .4s cubic-bezier(.2,.85,.3,1.35); }
@media(hover:hover) { #home .homeModeTabs button:hover .entryModeIcon { transform: translateY(-2px) rotate(-5deg); } }
@media(max-width:360px) { #home .homeModeTabs button { gap: 4px; font-size: 10px; } .entryModeIcon { width: 24px; height: 24px; flex-basis: 24px; } }
@media(prefers-reduced-motion:reduce) { #home .homeModeTabs button .entryModeIcon { animation: none; transition: none; transform: none; } }

/* A dimensional coin: two illustrated faces and stacked gold edge surfaces.
   The toss rotates end over end around X, while the shadow stays on the header. */
.logoMark {
  position: relative; background: none; animation: none; transform: none;
  perspective: 180px; overflow: visible; will-change: auto;
}
.logoCoinFlight, .logoCoin { position: absolute; inset: 0; transform-style: preserve-3d; }
.logoCoinFlight { animation: coinTossLift 3.6s infinite; will-change: transform; }
.logoCoin { animation: coinTossTurn 3.6s infinite; will-change: transform; }
.logoCoinRim, .logoCoinFace { position: absolute; border-radius: 50%; }
.logoCoinRim {
  inset: 1px;
  background: repeating-conic-gradient(#ffe8a1 0deg 7deg, #b47a27 7deg 12deg, #e5b44e 12deg 18deg);
  border: .5px solid #cb9641;
  transform: translateZ(var(--depth));
}
.logoCoinFace { inset: 0; background-position: center; background-size: contain; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.logoCoinFront { background-image: url('/game-assets/coin-front.svg'); transform: translateZ(2.5px); }
.logoCoinBack { background-image: url('/game-assets/coin-back.svg'); transform: rotateX(180deg) translateZ(2.5px); }
.logoCoinShadow { position: absolute; width: 80%; height: 5px; left: 10%; bottom: -2px; border-radius: 50%; background: radial-gradient(ellipse, #08031180, transparent 70%); animation: coinTossShadow 3.6s infinite; }
@keyframes coinTossTurn {
  0% { transform: rotateY(-12deg) rotateZ(-12deg) rotateX(0deg); animation-timing-function: cubic-bezier(.3, .05, .2, 1); }
  52%, 100% { transform: rotateY(-12deg) rotateZ(-12deg) rotateX(720deg); }
}
@keyframes coinTossLift {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  24% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  52% { transform: translateY(0); animation-timing-function: ease-in-out; }
  76% { transform: translateY(-2.5px); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0); }
}
@keyframes coinTossShadow {
  0%, 52%, 100% { transform: scaleX(1); opacity: .7; animation-timing-function: ease-in-out; }
  24% { transform: scaleX(.6); opacity: .3; animation-timing-function: ease-in-out; }
  76% { transform: scaleX(.85); opacity: .5; animation-timing-function: ease-in-out; }
}
@media(prefers-reduced-motion:reduce) {
  .logoCoinFlight, .logoCoin, .logoCoinShadow { animation: none; will-change: auto; }
  .logoCoin { transform: rotateY(-12deg) rotateZ(-12deg); }
}