/* ===== Console-grade polish pack (board games) ===== */
/* Ambient drifting glow behind every board game screen */
#trapScreen,#xoScreen,#c4Screen,#memScreen,#defuseScreen{position:relative;isolation:isolate}
#trapScreen::before,#xoScreen::before,#c4Screen::before,#memScreen::before,#defuseScreen::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%,rgba(100,149,237,0.10),transparent 70%),
    radial-gradient(ellipse 55% 45% at 80% 85%,rgba(160,112,224,0.10),transparent 70%),
    radial-gradient(ellipse 45% 35% at 60% 40%,rgba(201,168,76,0.07),transparent 70%);
  animation:gpAmbient 16s ease-in-out infinite alternate}
@keyframes gpAmbient{
  0%{transform:translate(0,0) scale(1);opacity:0.85}
  50%{transform:translate(-2.5%,2%) scale(1.06);opacity:1}
  100%{transform:translate(2%,-2.5%) scale(1.03);opacity:0.9}}
@media (prefers-reduced-motion:reduce){
  #trapScreen::before,#xoScreen::before,#c4Screen::before,#memScreen::before,#defuseScreen::before{animation:none}}

/* — XO: neon arcade pieces — */
.xo-board{box-shadow:0 18px 50px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.05);background:linear-gradient(160deg,var(--card-bg),rgba(13,13,20,0.95))}
.xo-cell{box-shadow:inset 0 2px 8px rgba(0,0,0,0.35)}
.xo-cell.x{color:#7db4ff;text-shadow:0 0 10px rgba(100,160,255,0.85),0 0 28px rgba(100,160,255,0.45),0 0 60px rgba(100,160,255,0.25)}
.xo-cell.o{color:#c79bff;text-shadow:0 0 10px rgba(180,130,255,0.85),0 0 28px rgba(180,130,255,0.45),0 0 60px rgba(180,130,255,0.25)}
.xo-cell.filled{animation:gpPiecePop 0.32s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes gpPiecePop{0%{transform:scale(0.2) rotate(-12deg)}70%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
.xo-cell.win{box-shadow:0 0 0 3px rgba(201,168,76,0.3),0 0 30px rgba(201,168,76,0.5),inset 0 0 18px rgba(201,168,76,0.25)}
/* Endless mode: a cell that was just erased flashes a violet ring to show what got wiped */
.xo-cell.erased{animation:gpXoErase 0.95s ease-out;position:relative}
.xo-cell.erased::before{content:'✦';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c79bff;font-weight:900;font-size:0.6em;text-shadow:0 0 10px rgba(160,112,224,0.9);animation:gpXoEraseSpark 0.95s ease-out;pointer-events:none}
@keyframes gpXoErase{0%{box-shadow:0 0 0 4px rgba(160,112,224,0.9),inset 0 0 20px rgba(160,112,224,0.6)}60%{box-shadow:0 0 0 2px rgba(160,112,224,0.5),inset 0 0 12px rgba(160,112,224,0.3)}100%{box-shadow:inset 0 2px 8px rgba(0,0,0,0.35)}}
@keyframes gpXoEraseSpark{0%{opacity:1;transform:scale(1.4) rotate(0deg)}100%{opacity:0;transform:scale(2.6) rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.xo-cell.erased,.xo-cell.erased::before{animation:none}}

/* — Connect 4: glossy arcade pucks — */
.c4-board-wrap{background:linear-gradient(165deg,#2a5cb8,#173a78);box-shadow:0 18px 50px rgba(20,50,120,0.5),inset 0 2px 0 rgba(255,255,255,0.18),inset 0 -3px 8px rgba(0,0,0,0.35)}
.c4-cell{box-shadow:inset 0 3px 8px rgba(0,0,0,0.55),inset 0 -1px 2px rgba(255,255,255,0.07)}
.c4-disc-piece{position:relative;overflow:hidden}
.c4-disc-piece::after{content:'';position:absolute;left:14%;top:8%;width:42%;height:30%;border-radius:50%;background:rgba(255,255,255,0.4);filter:blur(1.5px)}
.c4-disc-piece.dropping{animation:gpC4Drop 0.5s cubic-bezier(0.55,0,0.45,1.45)}
@keyframes gpC4Drop{0%{transform:translateY(-440%);opacity:0.9}60%{transform:translateY(0)}78%{transform:translateY(-9%)}100%{transform:translateY(0)}}

/* — Memory: lacquered cards — */
.mem-card-back{background:linear-gradient(140deg,#e8c25c 0%,#b8862e 45%,#8a5e14 100%);box-shadow:0 6px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.35)}
.mem-card-back::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.22) 48%,transparent 62%);pointer-events:none}
.mem-card:hover .mem-card-back{box-shadow:0 10px 24px rgba(201,168,76,0.35),inset 0 1px 0 rgba(255,255,255,0.4)}
.mem-card-face{box-shadow:0 6px 16px rgba(0,0,0,0.4),inset 0 0 14px rgba(201,168,76,0.12)}
.mem-card.matched .mem-card-face{box-shadow:0 0 22px rgba(61,186,122,0.55),inset 0 0 14px rgba(61,186,122,0.25)}

/* — Trap: pressure-plate cells — */
.trap-cell{box-shadow:inset 0 2px 6px rgba(0,0,0,0.4),0 1px 0 rgba(255,255,255,0.04)}
.trap-cell:not(.disabled):not(.revealed-safe):not(.revealed-bomb):hover{border-color:var(--gold);box-shadow:inset 0 2px 6px rgba(0,0,0,0.4),0 0 14px rgba(201,168,76,0.35);transform:translateY(-1px)}
.trap-cell.revealed-safe{box-shadow:0 0 16px rgba(61,186,122,0.4),inset 0 0 10px rgba(61,186,122,0.2)}
.trap-cell.revealed-bomb{box-shadow:0 0 22px rgba(224,92,92,0.6),inset 0 0 12px rgba(224,92,92,0.3)}

/* — Defuse: live-wire console — */
.defuse-bomb-panel{box-shadow:0 18px 50px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.07);animation:gpBombIdle 2.4s ease-in-out infinite}
@keyframes gpBombIdle{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.07)}50%{box-shadow:0 18px 50px rgba(0,0,0,0.5),0 0 26px rgba(224,92,92,0.18),inset 0 1px 0 rgba(255,255,255,0.07)}}
.defuse-wire{transition:transform 0.15s,box-shadow 0.15s}
.defuse-wire:hover{transform:translateX(-3px);box-shadow:0 0 16px rgba(240,208,128,0.22)}
.defuse-wire-line{animation:gpWireHum 1.6s ease-in-out infinite}
@keyframes gpWireHum{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.defuse-bomb-panel,.defuse-wire-line{animation:none}}

/* — Canvas games: retro-console screen feel — */
.dino-canvas-wrap,.space-arena,.wn-arena{position:relative}
.dino-canvas-wrap::after,.space-arena::after,.wn-arena::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.07) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:0.5;border-radius:inherit}
.dino-canvas-wrap canvas{box-shadow:0 0 0 1px var(--border),0 14px 44px rgba(201,168,76,0.13),0 4px 18px rgba(0,0,0,0.5)}
.space-arena canvas{box-shadow:0 0 0 1px #1a2540,0 14px 44px rgba(0,255,136,0.13),0 4px 18px rgba(0,0,0,0.6)}
#waneesCanvas{box-shadow:0 0 0 1px rgba(255,210,0,0.25),0 14px 44px rgba(255,210,0,0.12),0 4px 18px rgba(0,0,0,0.55)}
@media (prefers-reduced-motion:reduce){.dino-canvas-wrap::after,.space-arena::after,.wn-arena::after{display:none}}

/* — Games hub: console game-cover cards — */
.game-page-card{background:linear-gradient(165deg,var(--card-bg) 0%,rgba(10,10,16,0.97) 100%)}
.game-page-card::after{
  content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(120deg,transparent 25%,rgba(201,168,76,0.7) 50%,transparent 75%);
  background-size:250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity 0.25s;pointer-events:none}
.game-page-card:hover::after{opacity:1;animation:gpBorderSweep 1.8s linear infinite}
@keyframes gpBorderSweep{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.game-page-card:hover::after{animation:none;opacity:0.6}}

/* ===== Online quiz polish pack ===== */
/* Ambient floating orbs behind the entire online flow */
#onlineScreen{position:relative;isolation:isolate}
#onlineScreen::before{
  content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle 280px at 18% 22%,rgba(100,149,237,0.16),transparent 70%),
    radial-gradient(circle 320px at 82% 78%,rgba(224,112,80,0.13),transparent 70%),
    radial-gradient(circle 240px at 55% 50%,rgba(201,168,76,0.10),transparent 70%);
  filter:blur(8px);animation:oqOrbDrift 22s ease-in-out infinite alternate}
@keyframes oqOrbDrift{
  0%{transform:translate(0,0) scale(1);opacity:0.85}
  50%{transform:translate(-3%,2.5%) scale(1.08);opacity:1}
  100%{transform:translate(3%,-3%) scale(1.04);opacity:0.9}}
@media (prefers-reduced-motion:reduce){#onlineScreen::before{animation:none}}

/* Glassy panels with golden accent */
#onlineScreen .online-panel{
  background:linear-gradient(165deg,rgba(19,19,26,0.92),rgba(13,13,20,0.85));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 50px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;overflow:hidden}
#onlineScreen .online-panel::before{
  content:'';position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--gold),transparent);opacity:0.7}

/* Room code: pulsing aura, monospace numerals */
#onlineScreen .room-code-box{
  background:linear-gradient(140deg,rgba(19,19,26,0.92),rgba(30,24,8,0.85));
  box-shadow:0 14px 40px rgba(201,168,76,0.18),0 0 40px rgba(201,168,76,0.12),inset 0 1px 0 rgba(255,255,255,0.06);
  animation:oqCodePulse 3.6s ease-in-out infinite}
@keyframes oqCodePulse{0%,100%{box-shadow:0 14px 40px rgba(201,168,76,0.18),0 0 30px rgba(201,168,76,0.12)}50%{box-shadow:0 14px 40px rgba(201,168,76,0.22),0 0 60px rgba(201,168,76,0.28)}}
#onlineScreen .room-code{
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 60%,#8b6e1f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 12px rgba(201,168,76,0.45);filter:drop-shadow(0 0 6px rgba(201,168,76,0.4))}
@media (prefers-reduced-motion:reduce){#onlineScreen .room-code-box{animation:none}}

/* Question screen: stage shell + question card */
#onlineQuestion{animation:oqStageIn 0.45s cubic-bezier(0.34,1.4,0.64,1)}
@keyframes oqStageIn{from{opacity:0;transform:translateY(14px) scale(0.985)}to{opacity:1;transform:translateY(0) scale(1)}}
#onlineQuestion .online-panel{
  border-color:rgba(201,168,76,0.35);
  box-shadow:0 22px 60px rgba(0,0,0,0.5),0 0 60px rgba(201,168,76,0.08),inset 0 1px 0 rgba(255,255,255,0.07)}
#onlineQNum{display:inline-block;padding:5px 14px;background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.35);border-radius:50px;color:var(--gold);font-family:'Tajawal',sans-serif;font-weight:900;letter-spacing:0.5px;font-size:0.85rem}
#onlineCat{display:inline-block;margin-right:8px}
#onlineQText{
  font-family:'Tajawal',sans-serif;font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  line-height:1.55;letter-spacing:0.2px}

/* Team-turn banner — animated gradient + flag */
.team-turn-banner{
  position:relative;overflow:hidden;
  background-size:200% 100% !important;
  animation:oqBannerSheen 4s ease-in-out infinite}
.team-turn-banner.t0{background:linear-gradient(110deg,rgba(100,149,237,0.16),rgba(100,149,237,0.32),rgba(100,149,237,0.16)) !important;box-shadow:0 6px 18px rgba(100,149,237,0.25),inset 0 1px 0 rgba(255,255,255,0.08)}
.team-turn-banner.t1{background:linear-gradient(110deg,rgba(224,112,80,0.16),rgba(224,112,80,0.32),rgba(224,112,80,0.16)) !important;box-shadow:0 6px 18px rgba(224,112,80,0.25),inset 0 1px 0 rgba(255,255,255,0.08)}
@keyframes oqBannerSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.team-turn-banner{animation:none}}

/* Answer options — premium press feel */
#onlineQuestion .opt,#gameScreen .opt{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--option-bg),rgba(13,13,20,0.85)) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform 0.18s cubic-bezier(0.34,1.4,0.64,1),box-shadow 0.2s,border-color 0.2s,background 0.2s}
#onlineQuestion .opt::before,#gameScreen .opt::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,0.07) 50%,transparent 65%);
  transition:left 0.6s}
#onlineQuestion .opt:hover:not(.correct):not(.wrong):not(.disabled),#gameScreen .opt:hover:not(.correct):not(.wrong):not(.disabled){
  transform:translateY(-3px) scale(1.01);
  border-color:var(--gold);
  box-shadow:0 10px 28px rgba(201,168,76,0.28),0 0 0 1px rgba(201,168,76,0.3),inset 0 1px 0 rgba(255,255,255,0.08)}
#onlineQuestion .opt:hover:not(.correct):not(.wrong):not(.disabled)::before,#gameScreen .opt:hover:not(.correct):not(.wrong):not(.disabled)::before{left:100%}
#onlineQuestion .opt:active:not(.correct):not(.wrong):not(.disabled),#gameScreen .opt:active:not(.correct):not(.wrong):not(.disabled){transform:translateY(-1px) scale(0.99)}
#onlineQuestion .opt.correct,#gameScreen .opt.correct{
  border-color:var(--correct) !important;
  background:linear-gradient(170deg,rgba(61,186,122,0.28),rgba(61,186,122,0.12)) !important;
  box-shadow:0 8px 28px rgba(61,186,122,0.45),inset 0 0 0 1px rgba(61,186,122,0.4),0 0 40px rgba(61,186,122,0.25);
  animation:oqOptCorrect 0.55s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes oqOptCorrect{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
#onlineQuestion .opt.wrong,#gameScreen .opt.wrong{
  border-color:var(--wrong) !important;
  background:linear-gradient(170deg,rgba(224,92,92,0.24),rgba(224,92,92,0.08)) !important;
  box-shadow:0 6px 22px rgba(224,92,92,0.32),inset 0 0 0 1px rgba(224,92,92,0.35);
  animation:oqOptWrong 0.45s ease-out}
@keyframes oqOptWrong{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}

/* Timer ring — count down via conic-gradient */
#onlineScreen .online-timer{
  position:relative;
  background:radial-gradient(circle,var(--card-bg) 0%,rgba(13,13,20,0.95) 100%);
  box-shadow:0 0 0 1px rgba(201,168,76,0.25),0 6px 18px rgba(0,0,0,0.4);
  transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s}
#onlineScreen .online-timer.low{
  border-color:var(--wrong) !important;color:var(--wrong) !important;
  box-shadow:0 0 0 1px rgba(224,92,92,0.4),0 6px 18px rgba(224,92,92,0.35),0 0 30px rgba(224,92,92,0.25);
  animation:oqTimerPanic 0.55s ease-in-out infinite alternate}
@keyframes oqTimerPanic{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){#onlineScreen .online-timer.low{animation:none}}

/* Live leaderboard rows */
#onlineScreen .olb-row{
  background:linear-gradient(165deg,rgba(19,19,26,0.92),rgba(13,13,20,0.78));
  box-shadow:0 4px 14px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.06);
  transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s}
#onlineScreen .olb-row.me{
  border-color:var(--gold);
  background:linear-gradient(165deg,rgba(40,30,8,0.78),rgba(20,15,4,0.85));
  box-shadow:0 6px 20px rgba(201,168,76,0.32),inset 0 1px 0 rgba(255,200,80,0.18)}
#onlineScreen .olb-row:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.45)}

/* Final podium polish */
#onlineScreen .podium-block{
  background:linear-gradient(180deg,rgba(201,168,76,0.06),transparent) !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.45),inset 0 2px 0 rgba(255,255,255,0.08);
  position:relative;overflow:hidden}
#onlineScreen .podium-block::after{
  content:'';position:absolute;left:-50%;top:0;width:200%;height:100%;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,0.05) 50%,transparent 60%);
  animation:oqPodiumSheen 3s ease-in-out infinite}
@keyframes oqPodiumSheen{0%,100%{transform:translateX(-25%)}50%{transform:translateX(25%)}}
@media (prefers-reduced-motion:reduce){#onlineScreen .podium-block::after{animation:none}}

/* Floating emoji reactions — bigger, dropped shadow */
#onlineScreen .float-reaction{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  text-shadow:0 0 12px rgba(255,255,255,0.25)}

/* Reaction buttons — quick scale + glow */
#onlineScreen .reaction-btn{
  background:linear-gradient(160deg,var(--card-bg),rgba(13,13,20,0.95));
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  transition:transform 0.14s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.18s,border-color 0.18s}
#onlineScreen .reaction-btn:hover{
  transform:translateY(-3px) scale(1.12);
  border-color:var(--gold);
  box-shadow:0 8px 20px rgba(201,168,76,0.28)}
#onlineScreen .reaction-btn:active{transform:scale(0.95)}

/* Lobby player chips get a subtle sheen */
#onlineScreen .lobby-player-chip{
  background:linear-gradient(160deg,rgba(26,26,36,0.85),rgba(13,13,20,0.85));
  box-shadow:0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s}

/* ===== Site-wide premium polish ===== */
/* Screen transitions: every screen smoothly fades up on enter */
.setup-screen,#gameScreen,#lbScreen,#adminScreen,#onlineScreen,
#trapScreen,#xoScreen,#c4Screen,#memScreen,#defuseScreen,
#dinoScreen,#spaceScreen,#brotScreen,#waneesScreen{
  animation:siteScreenIn 0.42s cubic-bezier(0.34,1.3,0.64,1)}
@keyframes siteScreenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .setup-screen,#gameScreen,#lbScreen,#adminScreen,#onlineScreen,
  #trapScreen,#xoScreen,#c4Screen,#memScreen,#defuseScreen,
  #dinoScreen,#spaceScreen,#brotScreen,#waneesScreen{animation:none}}

/* Toast: cinematic slide-down with backdrop blur */
#gameToast{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(19,19,26,0.85) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 18px 50px rgba(0,0,0,0.55),0 0 30px rgba(201,168,76,0.12),inset 0 1px 0 rgba(255,255,255,0.08) !important}

/* Make every primary button feel "tactile" */
.start-btn,.play-again-btn{position:relative;overflow:hidden}
.start-btn::after,.play-again-btn::after{
  content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,0.18),transparent);
  transform:skewX(-22deg);pointer-events:none;transition:left 0.7s}
.start-btn:hover::after,.play-again-btn:hover::after{left:150%}

/* Pretty scrollbars (webkit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.18)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8b6e1f,#5a4612);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold-light),var(--gold))}

/* Focus-visible accessibility ring (so keyboard users aren't lost) */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* Brain Rot: rot-damage screen shakes (small / large) */
@keyframes brotShakeSm{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
@keyframes brotShakeLg{
  0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-9px,4px) rotate(-0.6deg)}30%{transform:translate(8px,-5px) rotate(0.5deg)}
  45%{transform:translate(-7px,-4px) rotate(-0.4deg)}60%{transform:translate(6px,4px) rotate(0.4deg)}
  75%{transform:translate(-4px,2px)}90%{transform:translate(3px,-2px)}}
#brotScreen.brot-shake-sm{animation:brotShakeSm 0.3s ease-out}
#brotScreen.brot-shake-lg{animation:brotShakeLg 0.5s ease-out}
@media (prefers-reduced-motion:reduce){
  #brotScreen.brot-shake-sm,#brotScreen.brot-shake-lg{animation:none}}

/* Games hub cards: layered glow + icon lift on hover */
.game-page-card{will-change:transform}
.game-page-card:hover{transform:translateY(-5px) scale(1.015)}
.game-page-card .gpc-icon{transition:transform 0.25s cubic-bezier(0.34,1.6,0.64,1)}
.game-page-card:hover .gpc-icon{transform:translateY(-3px) scale(1.12)}
.game-page-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at 50% -10%,rgba(201,168,76,0.12),transparent 55%);
  opacity:0;transition:opacity 0.3s}
.game-page-card:hover::after{opacity:1}
.game-page-card:active{transform:translateY(-1px) scale(0.99);transition-duration:0.06s}
/* Staggered entrance for the grid */
.games-grid .game-page-card{animation:siteScreenIn 0.5s cubic-bezier(0.34,1.3,0.64,1) backwards}
.games-grid .game-page-card:nth-child(1){animation-delay:0.03s}
.games-grid .game-page-card:nth-child(2){animation-delay:0.08s}
.games-grid .game-page-card:nth-child(3){animation-delay:0.13s}
.games-grid .game-page-card:nth-child(4){animation-delay:0.18s}
.games-grid .game-page-card:nth-child(5){animation-delay:0.23s}
.games-grid .game-page-card:nth-child(6){animation-delay:0.28s}
.games-grid .game-page-card:nth-child(7){animation-delay:0.33s}
.games-grid .game-page-card:nth-child(8){animation-delay:0.38s}
.games-grid .game-page-card:nth-child(9){animation-delay:0.43s}
.games-grid .game-page-card:nth-child(10){animation-delay:0.48s}
@media (prefers-reduced-motion:reduce){
  .games-grid .game-page-card{animation:none}
  .game-page-card:hover{transform:none}
  .game-page-card:hover .gpc-icon{transform:none}}