/* Izzy's Arcade Locker — "real life" look for every game, wave 1: board & table games.
   Only restyles each game's own board classes, so the game code doesn't change.
   Real materials: wood boards with carved frames, ivory & ebony pieces, felt, glossy plastic, notebook paper. */

/* ---------- shared wood tones ---------- */
:root { --maple: #e9cf9f; --maple2: #dcb985; --walnut: #8a5a32; --walnut2: #6b4222; --frame: #3b2210; --frame2: #24140a; }

/* ================= Chess: a real wooden board ================= */
#stage .cboard { border: 0; border-radius: 6px; padding: 0; outline: 14px solid var(--frame); outline-offset: 0;
  box-shadow: 0 0 0 16px #5a3418, 0 0 0 18px #c9a24a, 0 0 0 26px var(--frame2), 0 30px 50px -16px #000; margin: 26px auto; }
#stage .cboard .lt { background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 40%), repeating-linear-gradient(100deg, var(--maple) 0 6px, var(--maple2) 6px 7px, var(--maple) 7px 13px); }
#stage .cboard .dk { background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 40%), repeating-linear-gradient(80deg, var(--walnut) 0 5px, var(--walnut2) 5px 6px, var(--walnut) 6px 12px); }
#stage .cboard .pw { color: #fbf3e2; text-shadow: 0 1px 0 #3b2210, 0 -1px 0 #3b2210, 1px 0 0 #3b2210, -1px 0 0 #3b2210, 0 4px 5px rgba(0, 0, 0, .45); }
#stage .cboard .pb { color: #18100a; text-shadow: 0 1px 0 rgba(255, 230, 190, .35), 0 4px 5px rgba(0, 0, 0, .5); }
#stage .cboard .lt .fl, #stage .cboard .lt .rk { color: var(--walnut); } #stage .cboard .dk .fl, #stage .cboard .dk .rk { color: var(--maple); }

/* ================= Checkers: wooden board, ridged checkers ================= */
#stage .ck { border: 0; border-radius: 6px; outline: 12px solid var(--frame); box-shadow: 0 0 0 14px #5a3418, 0 0 0 16px #c9a24a, 0 0 0 22px var(--frame2), 0 30px 50px -16px #000; margin: 24px auto; }
#stage .ck .lt { background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 40%), repeating-linear-gradient(100deg, var(--maple) 0 6px, var(--maple2) 6px 7px, var(--maple) 7px 13px); }
#stage .ck .dk { background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 40%), repeating-linear-gradient(80deg, #4a6b3a 0 5px, #3e5c31 5px 6px, #4a6b3a 6px 12px); }
#stage .ck i.r, #stage .ck i.b { box-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 7px 8px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(0, 0, 0, .25); }
#stage .ck i.r { background: radial-gradient(circle, transparent 0 42%, rgba(0, 0, 0, .18) 43% 46%, transparent 47%), repeating-conic-gradient(#c8202c 0 6deg, #a8141f 6deg 12deg), #c8202c; }
#stage .ck i.b { background: radial-gradient(circle, transparent 0 42%, rgba(255, 255, 255, .12) 43% 46%, transparent 47%), repeating-conic-gradient(#2a2a2a 0 6deg, #151515 6deg 12deg), #222; }

/* ================= Reversi / Othello: green felt, thick two-tone discs ================= */
#stage .rv { gap: 2px; padding: 14px; background: #0a2a14; border-radius: 10px; box-shadow: 0 0 0 10px #1a1a1a, 0 0 0 12px #444, 0 26px 44px -16px #000; margin: 14px auto; }
#stage .rv button { border-radius: 0; background: radial-gradient(rgba(0, 0, 0, .25) 1px, transparent 1.5px) 0 0 / 4px 4px, #17803f; box-shadow: inset 0 0 12px rgba(0, 0, 0, .25); }
#stage .rv button i.b, #stage .rv button i.w { box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 6px 8px rgba(0, 0, 0, .4); }
#stage .rv button i.b { background: radial-gradient(circle at 35% 28%, #5a5a5a, #111 55%, #000); }
#stage .rv button i.w { background: radial-gradient(circle at 35% 28%, #fff, #e8e8e8 50%, #c4c4c4); box-shadow: 0 4px 0 #222, 0 6px 8px rgba(0, 0, 0, .4); }

/* ================= Five in a Row (Go board): kaya wood, slate & shell stones ================= */
#stage div.gm { gap: 1px; padding: 14px; background: #2e1e08; border-radius: 4px; box-shadow: inset 0 0 0 14px #d8a84e, 0 0 0 4px #8a6420, 0 24px 40px -14px #000; }
#stage div.gm button { background: repeating-linear-gradient(95deg, #e2b468 0 9px, #d9a95a 9px 10px, #e6bb72 10px 19px); }
#stage div.gm i.x { background: radial-gradient(circle at 34% 28%, #6a6a6a, #1a1a1a 45%, #000); box-shadow: 0 3px 3px rgba(0, 0, 0, .55); }
#stage div.gm i.o { background: radial-gradient(circle at 34% 28%, #fff, #f2efe6 45%, #cfcabd); box-shadow: 0 3px 3px rgba(0, 0, 0, .45); }
/* the chess lobby also uses .gm for its game list: keep that plain */
.glist .gm { background: none !important; box-shadow: none !important; padding: 0 !important; }

/* ================= Four in a Row: glossy blue plastic frame, ridged checkers ================= */
#stage .c4 { position: relative; gap: 8px; padding: 14px; border-radius: 12px; margin: 10px auto 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 30%), linear-gradient(90deg, #1846c9, #2a5ee8 50%, #1846c9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(0, 0, 0, .25), 0 22px 36px -12px #000; }
#stage .c4::before, #stage .c4::after { content: ""; position: absolute; bottom: -24px; width: 22px; height: 30px; background: linear-gradient(90deg, #1238a8, #2a5ee8, #1238a8); border-radius: 4px 4px 8px 8px; z-index: -1; }
#stage .c4::before { left: -4px; transform: skewX(12deg); } #stage .c4::after { right: -4px; transform: skewX(-12deg); }
#stage .c4 button { background: radial-gradient(circle at 50% 40%, #0d1438, #05081c); box-shadow: inset 0 5px 8px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .35); }
#stage .c4 button.p1 { background: radial-gradient(circle, transparent 0 38%, rgba(0, 0, 0, .2) 39% 43%, transparent 44% 60%, rgba(0, 0, 0, .2) 61% 64%, transparent 65%), radial-gradient(circle at 35% 30%, #ff8a8a, #e3132a 60%, #a00012); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(0, 0, 0, .35); }
#stage .c4 button.p2 { background: radial-gradient(circle, transparent 0 38%, rgba(0, 0, 0, .15) 39% 43%, transparent 44% 60%, rgba(0, 0, 0, .15) 61% 64%, transparent 65%), radial-gradient(circle at 35% 30%, #fff3a0, #ffd000 60%, #c99a00); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 2px rgba(0, 0, 0, .3); }
#stage .c4 button.win { outline: 4px solid #fff; outline-offset: -4px; animation: c4win .5s ease-in-out infinite alternate; }
@keyframes c4win { to { filter: brightness(1.35); } }

/* ================= Mancala: a carved wooden board ================= */
#stage .mk { background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 40%), repeating-linear-gradient(92deg, #8a5a2e 0 14px, #7a4c24 14px 16px, #93622f 16px 30px);
  box-shadow: inset 0 3px 0 rgba(255, 230, 190, .3), inset 0 -5px 10px rgba(0, 0, 0, .4), 0 24px 40px -14px #000; border: 3px solid #4a2c12; }
#stage .mk button, #stage .mk .store { background: radial-gradient(ellipse at 50% 35%, #3b2410, #5a3818 70%, #6b4420); box-shadow: inset 0 8px 14px rgba(0, 0, 0, .7), inset 0 -2px 3px rgba(255, 220, 170, .2), 0 1px 0 rgba(255, 220, 170, .25); color: #ffe7b8; text-shadow: 0 2px 2px #000; }

/* ================= Tic-tac-toe: pen on notebook paper ================= */
#stage .ttt { gap: 0; padding: 22px; border-radius: 4px; transform: rotate(-.8deg); margin: 10px auto;
  background: linear-gradient(90deg, transparent 0 26px, rgba(220, 60, 60, .45) 26px 28px, transparent 28px), repeating-linear-gradient(180deg, #fbf8ef 0 23px, #b9cfe8 23px 24px), #fbf8ef;
  box-shadow: 0 16px 28px -10px #000, 0 1px 0 #ddd; }
#stage .ttt button { background: transparent; border: 0; border-radius: 0; color: #1a3a9a; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 3.4rem; font-weight: 700; box-shadow: none; }
#stage .ttt button:nth-child(-n+6) { border-bottom: 4px solid #2a2a2a; }
#stage .ttt button:not(:nth-child(3n)) { border-right: 4px solid #2a2a2a; }
#stage .ttt button:hover { transform: none; background: rgba(26, 58, 154, .06); }

#stage .ttt button.O { color: #c8102e; }
#stage .ttt button.win { background: linear-gradient(180deg, transparent 30%, rgba(255, 230, 0, .55) 30% 70%, transparent 70%); }

/* board games sit on a real wooden tabletop */
#stage[data-g="chess"], #stage[data-g="checkers"], #stage[data-g="reversi"], #stage[data-g="fiverow"], #stage[data-g="four"], #stage[data-g="mancala"], #stage[data-g="ttt"], #stage[data-g="mpc4"], #stage[data-g="mpcheckers"], #stage[data-g="mpreversi"], #stage[data-g="mpgomoku"], #stage[data-g="mpmancala"], #stage[data-g="mpttt"] { background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, .14), transparent 60%), repeating-linear-gradient(90deg, #4a2a14 0 3px, #5a3418 3px 90px, #522f16 90px 93px, #5e381a 93px 180px); box-shadow: inset 0 0 120px rgba(0, 0, 0, .65); }

/* ================= WAVE 2: puzzles ================= */
/* Sudoku: printed on newspaper-style paper with pencil-written answers */
#stage .sdk { border: 3px solid #1a1a1a; border-radius: 2px; background: #f7f3e8; box-shadow: 0 18px 30px -12px #000; transform: rotate(-.5deg); }
#stage .sdk button { background: #f7f3e8; border-color: #b9b3a4; color: #3a5ab8; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
#stage .sdk button.g { background: #f7f3e8; color: #111; font-family: Georgia, 'Times New Roman', serif; }
#stage .sdk button.sel { background: #fff3a8; }
#stage .sdk button.bad { color: #c8102e; }
#stage .sdk button.br { border-right-color: #1a1a1a; } #stage .sdk button.bb { border-bottom-color: #1a1a1a; }

/* Nonogram: graph paper, pencil-shaded squares */
#stage .nono { padding: 10px; background: #fbfaf4; border-radius: 3px; box-shadow: 0 16px 28px -12px #000; }
#stage .nono .clue { color: #333; font-family: Georgia, serif; font-weight: 700; } #stage .nono .clue.ok { color: #1f9a50; }
#stage .nono button { border-radius: 0; background: #fff; border-color: #9ec1e0; color: #888; }
#stage .nono button.f { background: repeating-linear-gradient(45deg, #2a2a2a 0 2px, #3a3a3a 2px 4px); border-color: #2a2a2a; }

/* Tower of Hanoi: wooden base and dowels, painted wooden rings */
#stage .peg { border: 0; border-radius: 6px; background: transparent; }
#stage .peg::before { content: ""; position: absolute; left: 50%; bottom: 14px; top: 16px; width: 12px; margin-left: -6px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #8a5a2e, #d9a868 45%, #8a5a2e); }
#stage .peg::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 16px; border-radius: 4px; background: repeating-linear-gradient(92deg, #8a5a2e 0 10px, #7a4c24 10px 12px), #8a5a2e; box-shadow: 0 6px 10px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 220, 170, .35); }
#stage .peg.sel { box-shadow: 0 0 0 3px rgba(255, 216, 74, .6); background: rgba(255, 216, 74, .06); }
#stage .disk { z-index: 1; margin-bottom: 0; border-radius: 12px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 3px 4px rgba(0, 0, 0, .35); }
#stage .peg > .disk:first-child { margin-bottom: 16px; }

/* Peg solitaire: a round wooden board with glass marbles */
#stage .pegb { padding: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9935a, #8a5a2e 70%, #6b4222); box-shadow: inset 0 3px 0 rgba(255, 220, 170, .4), inset 0 -8px 16px rgba(0, 0, 0, .4), 0 24px 40px -14px #000; }
#stage .pegb button { background: radial-gradient(circle, #3b2210 40%, #5a3418 70%); box-shadow: inset 0 4px 6px rgba(0, 0, 0, .7); }
#stage .pegb button.p { background: radial-gradient(circle at 32% 28%, #fff 0 8%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .35), transparent 40%), radial-gradient(circle, #ff6fb0, #c2186b 75%); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }

/* Make Ten & sliding puzzle & 2048: wooden tiles in a wooden tray */
#stage .numg, #stage .slide, #stage .tm-board { padding: 10px; border-radius: 10px; background: repeating-linear-gradient(92deg, #6b4222 0 12px, #5e391c 12px 14px); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6), 0 0 0 4px #3b2210, 0 22px 36px -14px #000; }
#stage .numg button, #stage .slide button { border: 0; border-radius: 6px; color: #3b2210; font-family: Georgia, serif;
  background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 45%), repeating-linear-gradient(100deg, #e9cf9f 0 7px, #dcb985 7px 8px, #e9cf9f 8px 15px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 4px 6px rgba(0, 0, 0, .45); }
#stage .numg button.s { background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 45%), #ffd84a; }
#stage .slide button.home { box-shadow: inset 0 0 0 3px #1f9a50, 0 4px 6px rgba(0, 0, 0, .45); }
#stage .tm-board i { background: rgba(0, 0, 0, .28); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .5); border-radius: 8px; }
#stage .tm-tile { border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 4px 6px rgba(0, 0, 0, .45); }

/* Lights out: a real light-up panel with bulbs behind frosted glass */
#stage .lgrid { padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #2a2a2a, #111); box-shadow: inset 0 2px 0 #444, 0 0 0 4px #555, 0 22px 36px -14px #000; }
#stage .lgrid button { border: 2px solid #000; border-radius: 6px; background: radial-gradient(circle, #2a2a1a, #121208); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .7); }
#stage .lgrid button.on { background: radial-gradient(circle, #fffbe0, #ffd84a 55%, #e0a800); box-shadow: 0 0 22px rgba(255, 216, 74, .8), inset 0 0 10px rgba(255, 255, 255, .6); border-color: #6b5400; }

/* Minesweeper: classic raised grey tiles */
#stage .ms-grid { background: #7b7b7b; border-radius: 4px; padding: 6px; box-shadow: inset 3px 3px 0 #555, inset -3px -3px 0 #fff, 0 18px 30px -12px #000; }
#stage .ms-grid button { border-radius: 0; background: #c6c6c6; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #7b7b7b; }
#stage .ms-grid button.o { background: #bdbdbd; box-shadow: inset 1px 1px 0 #8a8a8a; }
#stage .ms-grid button.boom { background: #ff2a2a; }

/* Color sort: real glass test tubes in a wooden rack */
#stage .tubes { padding: 16px 16px 0; border-radius: 10px; background: linear-gradient(180deg, transparent 70%, #6b4222 70%); }
#stage .tube { border: 3px solid rgba(220, 235, 255, .7); border-top: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .22) 80%, rgba(255, 255, 255, .05)); box-shadow: inset 0 -6px 10px rgba(255, 255, 255, .15), 0 10px 14px rgba(0, 0, 0, .4); }
#stage .tube i { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 3px 3px 4px rgba(255, 255, 255, .45); }

/* Gem swap: cut gems on black velvet */
#stage .gs-grid { padding: 10px; border-radius: 10px; background: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.5px) 0 0 / 4px 4px, #14101e; box-shadow: inset 0 0 30px #000, 0 0 0 4px #c9a24a, 0 22px 36px -14px #000; }
#stage .gs-grid button { border: 0; background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }

/* Block fit: wooden board with grooved slots */
#stage .bf-grid { background: repeating-linear-gradient(92deg, #6b4222 0 12px, #5e391c 12px 14px); box-shadow: 0 0 0 4px #3b2210, 0 22px 36px -14px #000; }
#stage .bf-grid button { background: rgba(0, 0, 0, .3); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .55); }

/* Solitaire: green card-table felt, real card backs */
#stage[data-g="solitaire"] { background: radial-gradient(ellipse at 50% 35%, #1f8a4c, #0f5a30 60%, #093a1f); box-shadow: inset 0 0 120px rgba(0, 0, 0, .55); }
#stage .so-card { background: linear-gradient(160deg, #fff, #f4efe4); border: 1px solid #d8d0bf; box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
#stage .so-card.back { background: repeating-linear-gradient(45deg, #9b1c2c 0 5px, #7d1322 5px 10px); border: 4px solid #fff; }
#stage .so-pile { border-color: rgba(255, 255, 255, .25); }

/* puzzles sit on a desk */
#stage[data-g="sudoku"], #stage[data-g="nono"], #stage[data-g="hanoi"], #stage[data-g="pegs"], #stage[data-g="maketen"], #stage[data-g="slide"], #stage[data-g="merge2048"], #stage[data-g="blockfit"], #stage[data-g="colorsort"] {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, .14), transparent 60%), repeating-linear-gradient(90deg, #4a2a14 0 3px, #5a3418 3px 90px, #522f16 90px 93px, #5e381a 93px 180px); box-shadow: inset 0 0 120px rgba(0, 0, 0, .65); }
/* fixes after review */
#stage .ms-grid { gap: 0; }
#stage .ms-grid button.o { background: #d9d9d9; box-shadow: inset 1px 1px 0 #9a9a9a; text-shadow: 0 0 1px rgba(0, 0, 0, .6); }
#stage .gs-grid button { font-size: clamp(1.5rem, 7vw, 2.3rem); }#stage .ms-grid button.o { text-shadow: none; font-family: Arial Black, Arial, sans-serif; }

/* ================= WAVE 3: word & brain games ================= */
/* letter tiles: real wooden word-game tiles with a printed letter */
#stage .letters span, #stage .lp-letters button, #stage .wg button, #stage .fl-row span {
  border: 0; border-radius: 6px; color: #2a1a08; font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%), repeating-linear-gradient(100deg, #f1dcae 0 7px, #e6cd98 7px 8px, #f1dcae 8px 15px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(120, 80, 30, .35), 0 4px 6px rgba(0, 0, 0, .45); }
#stage .lp-letters button.used { opacity: .35; }
#stage .wg button.on { background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%), #ffd84a; }
/* Five Letters keeps its green / yellow / grey clues, but as painted tiles */
#stage .fl-row span.g { background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 45%), #2fa860; color: #fff; }
#stage .fl-row span.y { background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 45%), #d9a81c; color: #fff; }
#stage .fl-row span.n { background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent 45%), #5a5a5a; color: #fff; }
#stage .fl-row span:not(.g):not(.y):not(.n):empty { background: rgba(0, 0, 0, .25); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .5); }
/* the on-screen keyboard looks like real keycaps */
#stage .fl-kb button { border-radius: 6px; background: linear-gradient(180deg, #f4f4f4, #d6d6d6); color: #222; box-shadow: 0 4px 0 #9a9a9a, 0 6px 8px rgba(0, 0, 0, .4); }
#stage .fl-kb button.g { background: #2fa860; color: #fff; box-shadow: 0 4px 0 #1b6a3a; }
#stage .fl-kb button.y { background: #d9a81c; color: #fff; box-shadow: 0 4px 0 #8a6a0a; }
#stage .fl-kb button.n { background: #6a6a6a; color: #ddd; box-shadow: 0 4px 0 #3a3a3a; }

/* Word search: printed on a puzzle-book page */
#stage .ws { padding: 12px; background: #fbf8ef; border-radius: 3px; box-shadow: 0 16px 28px -12px #000; transform: rotate(.4deg); }
#stage .ws button { background: transparent; color: #222; font-family: 'Courier New', monospace; }
#stage .ws button.f { background: rgba(255, 230, 0, .55); color: #222; border-radius: 10px; }
#stage .ws button.s { background: rgba(80, 160, 255, .45); color: #222; border-radius: 10px; }

/* quiz / brain games: answers on chalkboard cards */
#stage .quiz-q { color: #f4f1e6; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; padding: 14px; border-radius: 8px;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, .06), transparent 60%), #24382c; box-shadow: inset 0 0 0 10px #7a4c24, inset 0 0 0 12px #4a2c12, 0 18px 30px -12px #000; }
#stage .quiz-opts button, #stage .cbtns button { border: 0; border-radius: 6px; color: #2a1a08; background: linear-gradient(180deg, #fffdf5, #f1ead6); box-shadow: 0 4px 0 #c9bfa4, 0 6px 10px rgba(0, 0, 0, .4); }
#stage .quiz-opts button:hover, #stage .cbtns button:hover { transform: translateY(-2px); }
#stage .quiz-opts button.right { background: #c8f2d4; } #stage .quiz-opts button.wrong { background: #ffd0d6; }
/* every word, brain and puzzle game sits on a study desk */
#stage[data-g="pairs"], #stage[data-g="lights"], #stage[data-g="slide"], #stage[data-g="odd"], #stage[data-g="react"], #stage[data-g="echo"], #stage[data-g="math"], #stage[data-g="guess"], #stage[data-g="scramble"], #stage[data-g="rescue"], #stage[data-g="typing"], #stage[data-g="hanoi"], #stage[data-g="pegs"], #stage[data-g="maketen"], #stage[data-g="sudoku"], #stage[data-g="flood"], #stage[data-g="nono"], #stage[data-g="codebreak"], #stage[data-g="hilo"], #stage[data-g="recall"], #stage[data-g="stroop"], #stage[data-g="digits"], #stage[data-g="vowels"], #stage[data-g="flashspell"], #stage[data-g="wsearch"], #stage[data-g="blockfit"], #stage[data-g="gemswap"], #stage[data-g="colorsort"], #stage[data-g="pipeflow"], #stage[data-g="iceglide"], #stage[data-g="carjam"], #stage[data-g="collapse"], #stage[data-g="laser"], #stage[data-g="sameornot"], #stage[data-g="chainmath"], #stage[data-g="dotflash"], #stage[data-g="spinflip"], #stage[data-g="nextnum"], #stage[data-g="clockread"], #stage[data-g="moreless"], #stage[data-g="oddword"], #stage[data-g="letterpool"], #stage[data-g="wordrain"], #stage[data-g="fillgap"], #stage[data-g="wordchain"], #stage[data-g="spotspell"], #stage[data-g="wordgrid"], #stage[data-g="merge2048"], #stage[data-g="fiveletters"], #stage[data-g="minesweep"], #stage[data-g="solitaire"] { background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, .14), transparent 60%), repeating-linear-gradient(90deg, #4a2a14 0 3px, #5a3418 3px 90px, #522f16 90px 93px, #5e381a 93px 180px); box-shadow: inset 0 0 120px rgba(0, 0, 0, .65); }
#stage[data-g="solitaire"] { background: radial-gradient(ellipse at 50% 35%, #1f8a4c, #0f5a30 60%, #093a1f); }

/* ================= WAVE 4: arcade games sit inside a real arcade cabinet ================= */
/* dim arcade room with carpet glow */
#stage[data-g="meteor"], #stage[data-g="trail"], #stage[data-g="bricks"], #stage[data-g="runner"], #stage[data-g="shooter"], #stage[data-g="stack"], #stage[data-g="catch"], #stage[data-g="aim"], #stage[data-g="whack"], #stage[data-g="racer"], #stage[data-g="bubbles"], #stage[data-g="gflip"], #stage[data-g="skybounce"], #stage[data-g="juggle"], #stage[data-g="dodge"], #stage[data-g="golf"], #stage[data-g="cannon"], #stage[data-g="tunnel"], #stage[data-g="colorgate"], #stage[data-g="slope"], #stage[data-g="roadhop"], #stage[data-g="orbit"], #stage[data-g="coredef"], #stage[data-g="beatlanes"], #stage[data-g="tiltmaze"], #stage[data-g="blockdrop"], #stage[data-g="lanedash"], #stage[data-g="traprun"], #stage[data-g="hillrider"] { background: radial-gradient(ellipse at 50% 20%, rgba(80, 120, 255, .18), transparent 55%), radial-gradient(circle at 20% 90%, rgba(255, 60, 200, .1), transparent 40%), #07070f; }
/* the screen: glossy curved glass in a thick black bezel, inside a coloured cabinet */
#stage[data-g="meteor"] .cv, #stage[data-g="trail"] .cv, #stage[data-g="bricks"] .cv, #stage[data-g="runner"] .cv, #stage[data-g="shooter"] .cv, #stage[data-g="stack"] .cv, #stage[data-g="catch"] .cv, #stage[data-g="aim"] .cv, #stage[data-g="whack"] .cv, #stage[data-g="racer"] .cv, #stage[data-g="bubbles"] .cv, #stage[data-g="gflip"] .cv, #stage[data-g="skybounce"] .cv, #stage[data-g="juggle"] .cv, #stage[data-g="dodge"] .cv, #stage[data-g="golf"] .cv, #stage[data-g="cannon"] .cv, #stage[data-g="tunnel"] .cv, #stage[data-g="colorgate"] .cv, #stage[data-g="slope"] .cv, #stage[data-g="roadhop"] .cv, #stage[data-g="orbit"] .cv, #stage[data-g="coredef"] .cv, #stage[data-g="beatlanes"] .cv, #stage[data-g="tiltmaze"] .cv, #stage[data-g="blockdrop"] .cv, #stage[data-g="lanedash"] .cv, #stage[data-g="traprun"] .cv, #stage[data-g="hillrider"] .cv { border: 0; border-radius: 18px / 22px;
  box-shadow: 0 0 0 10px #050505, 0 0 0 12px #2a2a2a, 0 0 0 26px var(--c, #7c5cff), 0 0 0 28px rgba(0, 0, 0, .6), 0 0 60px 20px rgba(124, 92, 255, .25), 0 40px 60px -20px #000;
  margin: 34px auto; filter: saturate(1.15) contrast(1.05); }
/* scanlines + glass reflection laid over the screen */
#stage[data-g="meteor"] #area, #stage[data-g="trail"] #area, #stage[data-g="bricks"] #area, #stage[data-g="runner"] #area, #stage[data-g="shooter"] #area, #stage[data-g="stack"] #area, #stage[data-g="catch"] #area, #stage[data-g="aim"] #area, #stage[data-g="whack"] #area, #stage[data-g="racer"] #area, #stage[data-g="bubbles"] #area, #stage[data-g="gflip"] #area, #stage[data-g="skybounce"] #area, #stage[data-g="juggle"] #area, #stage[data-g="dodge"] #area, #stage[data-g="golf"] #area, #stage[data-g="cannon"] #area, #stage[data-g="tunnel"] #area, #stage[data-g="colorgate"] #area, #stage[data-g="slope"] #area, #stage[data-g="roadhop"] #area, #stage[data-g="orbit"] #area, #stage[data-g="coredef"] #area, #stage[data-g="beatlanes"] #area, #stage[data-g="tiltmaze"] #area, #stage[data-g="blockdrop"] #area, #stage[data-g="lanedash"] #area, #stage[data-g="traprun"] #area, #stage[data-g="hillrider"] #area { position: relative; }
/* arcade cabinet marquee and WORKING control panel (built by cabinet.js) */
#stage.cabinet .cab-top { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(560px, 100%); margin: 0 auto -18px; padding: 12px 18px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%), var(--c, #7c5cff); box-shadow: 0 0 0 4px #050505, 0 0 40px rgba(255, 255, 255, .15), inset 0 -6px 0 rgba(0, 0, 0, .25); position: relative; z-index: 1; }
#stage.cabinet .cab-top b { font: 900 clamp(1.1rem, 4.5vw, 1.7rem)/1 var(--display); color: #fff; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(255, 255, 255, .7); }
#stage.cabinet .cab-top span { font-size: 1.3rem; filter: drop-shadow(0 0 6px #fff); }
#stage.cabinet .cab-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(560px, 100%); margin: -22px auto 0; padding: 26px 22px 18px; border-radius: 4px 4px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%), linear-gradient(90deg, #161616, #2a2a2a 50%, #161616); box-shadow: 0 0 0 4px #050505, inset 0 3px 0 #3a3a3a, 0 20px 30px -14px #000;
  user-select: none; -webkit-user-select: none; touch-action: none; }
/* joystick */
#stage.cabinet .cab-stick { position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle, #0a0a0a 0 34%, #262626 35% 60%, #111 61%); box-shadow: inset 0 3px 8px #000, 0 2px 0 #444; }
#stage.cabinet .cab-stick .base { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #555; }
#stage.cabinet .cab-stick .ball { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; transition: transform .06s;
  background: radial-gradient(circle at 35% 30%, #ff9a9a, #e3132a 55%, #7a0010); box-shadow: 0 6px 8px rgba(0, 0, 0, .6), inset 0 -4px 0 rgba(0, 0, 0, .25); pointer-events: none; }
#stage.cabinet .cab-stick b { position: absolute; font-size: .6rem; color: #555; pointer-events: none; transition: color .1s, text-shadow .1s; }
#stage.cabinet .cab-stick b[data-d=up] { left: 50%; top: 3px; transform: translateX(-50%); } #stage.cabinet .cab-stick b[data-d=down] { left: 50%; bottom: 3px; transform: translateX(-50%); }
#stage.cabinet .cab-stick b[data-d=left] { left: 4px; top: 50%; transform: translateY(-50%); } #stage.cabinet .cab-stick b[data-d=right] { right: 4px; top: 50%; transform: translateY(-50%); }
#stage.cabinet .cab-stick b.on { color: #ffe14a; text-shadow: 0 0 8px #ffb000; }
/* action buttons */
#stage.cabinet .cab-btns { display: flex; gap: 12px; align-items: center; }
#stage.cabinet .cab-panel .b { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; touch-action: none; font: 900 1.1rem/1 Arial Black, Arial, sans-serif; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .6), 0 0 0 4px #0a0a0a, 0 0 0 6px #444, inset 0 -4px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .45); transition: transform .05s, box-shadow .05s, filter .1s; }
#stage.cabinet .cab-panel .b1 { background: radial-gradient(circle at 40% 30%, #ff7a8a, #e3132a 60%); }
#stage.cabinet .cab-panel .b2 { background: radial-gradient(circle at 40% 30%, #fff3a0, #ffd000 60%); color: #3a2a00; text-shadow: none; }
#stage.cabinet .cab-panel .b3 { background: radial-gradient(circle at 40% 30%, #8ac4ff, #1a7ae8 60%); }
#stage.cabinet .cab-panel .b.on { transform: translateY(5px); filter: brightness(1.35); box-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 0 4px #0a0a0a, 0 0 0 6px #444, 0 0 22px rgba(255, 255, 255, .55), inset 0 3px 0 rgba(0, 0, 0, .25); }
#stage.cabinet .cab-panel .b:focus-visible, #stage.cabinet .cab-panel .coin:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* insert coin: starts / restarts */
#stage.cabinet .cab-panel .coin { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 10px; border: 0; border-radius: 6px; cursor: pointer; background: #000; color: #ff3b3b;
  font: 800 .6rem var(--mono); letter-spacing: .12em; box-shadow: inset 0 0 0 2px #444; animation: coinBlink 1s steps(1) infinite; }
#stage.cabinet .cab-panel .coin .slot { width: 6px; height: 22px; border-radius: 3px; background: #111; box-shadow: inset 0 0 0 2px #ff3b3b, 0 0 8px rgba(255, 59, 59, .6); }
#stage.cabinet .cab-panel .coin:hover { background: #1a0000; } #stage.cabinet .cab-panel .coin:active { transform: scale(.96); }
@keyframes coinBlink { 50% { color: #5a0a0a; } }
#stage.cabinet #area .cv { margin-top: 30px; margin-bottom: 30px; }
@media (max-width: 560px) {
  #stage.cabinet .cab-panel { padding: 22px 12px 14px; gap: 8px; }
  #stage.cabinet .cab-stick { width: 84px; height: 84px; }
  #stage.cabinet .cab-panel .b { width: 50px; height: 50px; font-size: .95rem; }
  #stage.cabinet .cab-btns { gap: 8px; }
  #stage.cabinet .cab-panel .coin { padding: 6px; font-size: .5rem; }
}
html.shot #stage.cabinet .cab-top, html.shot #stage.cabinet .cab-panel { display: none; }
/* by category (covers every game, however it is written) */
#stage[data-cat="Word"], #stage[data-cat="Brain"], #stage[data-cat="Puzzle"] { background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, .14), transparent 60%), repeating-linear-gradient(90deg, #4a2a14 0 3px, #5a3418 3px 90px, #522f16 90px 93px, #5e381a 93px 180px); box-shadow: inset 0 0 120px rgba(0, 0, 0, .65); }
#stage[data-cat="Arcade"] { background: radial-gradient(ellipse at 50% 20%, rgba(80, 120, 255, .18), transparent 55%), radial-gradient(circle at 20% 90%, rgba(255, 60, 200, .1), transparent 40%), #07070f; }
#stage[data-g="solitaire"] { background: radial-gradient(ellipse at 50% 35%, #1f8a4c, #0f5a30 60%, #093a1f); }
@media (max-width: 560px) {
  #stage .cboard { outline-width: 6px; box-shadow: 0 0 0 7px #5a3418, 0 0 0 8px #c9a24a, 0 0 0 11px var(--frame2), 0 20px 30px -12px #000; margin: 14px auto; }
  #stage .ck { outline-width: 6px; box-shadow: 0 0 0 7px #5a3418, 0 0 0 8px #c9a24a, 0 0 0 11px var(--frame2), 0 20px 30px -12px #000; margin: 14px auto; }
}
/* ===== matched to real reference photos (Wikimedia Commons) ===== */
/* Triple Dice → casino Sic Bo table: bright green felt, white outlined boxes, red dice with white pips */
#stage .ck-felt { background: radial-gradient(ellipse at 50% 40%, #2a9a4a, #1d7a38 70%); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #1d7a38, inset 0 0 40px rgba(0, 0, 0, .3), 0 16px 30px -12px #000; }
#stage .ck-title { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
#stage .ck-spot { border: 3px solid #fff; border-radius: 6px; background: transparent; gap: 8px; }
#stage .ck-spot b { font: 900 1rem/1 Arial Black, Arial, sans-serif; color: #fff; letter-spacing: .04em; }
#stage .ck-die { background: linear-gradient(145deg, #e8283a, #b8101f); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 8px rgba(0, 0, 0, .5); }
#stage .ck-die i.on { background: radial-gradient(circle at 40% 35%, #fff, #e8e8e8); }
#stage .ck-die.m { background: linear-gradient(145deg, #ffe14a, #e0a800); box-shadow: 0 0 16px rgba(255, 225, 74, .9), 0 4px 8px rgba(0, 0, 0, .5); }
#stage .ck-die.m i.on { background: #8a1020; }
#stage .ck-spot[aria-pressed="true"] { border-color: #ffd84a; background: rgba(255, 216, 74, .15); }
#stage .ck-pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font: 800 .8rem Arial, sans-serif; font-style: normal; }
#stage .ck-pays span { padding: 6px 4px; border: 2px solid #fff; border-radius: 4px; color: #fff; text-align: center; }

/* Keno → real ticket: pink-red printed boxes, picks marked with a crayon stroke */
#stage .kn-ticket { background: #fff; background-image: none; }
#stage .kn-th b { color: #e0005a; font-family: Arial Black, Arial, sans-serif; font-style: italic; }
#stage .kn-spots button { border: 2px solid #f2a0b8; background: #fde8ef; color: #e0005a; font: 700 .85rem/1 Arial, sans-serif; border-radius: 2px; }
#stage .kn-spots button.pk { color: #e0005a; }
#stage .kn-spots button.pk::after { inset: 18% 42%; border: 0; border-radius: 2px; background: #1a1a1a; opacity: .88; transform: rotate(6deg); }
#stage .kn-spots button.hit { background: #c8f2d4; border-color: #2fa860; }

/* Dice Roll → real percentile dice: glossy, white numbers (tens die black, ones die red) */
#stage .dr-die .b { fill: #111; } #stage .dr-die .t { fill: #2a2a2a; }
#stage .dr-die.ones .b { fill: #8a0d1c; } #stage .dr-die.ones .t { fill: #b8142a; }
#stage .dr-die b, #stage .dr-die.ones b { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
#stage .dr-die svg { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)) drop-shadow(-3px -3px 0 rgba(255, 255, 255, .06)); }
/* ================= home page: a real arcade hall ================= */
/* the classic glow-in-the-dark arcade carpet */
body { background:
  radial-gradient(1200px 600px at 85% -10%, rgba(124, 92, 255, .2), transparent 60%),
  radial-gradient(circle at 20px 20px, rgba(255, 60, 200, .14) 0 3px, transparent 4px) 0 0 / 120px 120px,
  radial-gradient(circle at 80px 70px, rgba(57, 208, 255, .14) 0 5px, transparent 6px) 0 0 / 120px 120px,
  conic-gradient(from 45deg at 60px 30px, transparent 0 80deg, rgba(255, 216, 74, .07) 80deg 100deg, transparent 100deg) 0 0 / 120px 120px,
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px),
  #07071a; background-attachment: fixed; }
/* section titles become neon tube signs */
.shelf-head h3, .section-head h2 { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .5), 0 0 14px var(--neon, #ff4af0), 0 0 28px var(--neon, #ff4af0); }
.shelf:nth-of-type(3n+1) { --neon: #ff4af0; } .shelf:nth-of-type(3n+2) { --neon: #39d0ff; } .shelf:nth-of-type(3n) { --neon: #ffd84a; }
/* game tiles look like lit screens in a black bezel */
.mz-t, .card .thumb, .card > button:first-child { box-shadow: 0 0 0 3px #050505, 0 0 0 4px rgba(255, 255, 255, .08), 0 10px 22px -10px #000; }
.mz-t:hover { box-shadow: 0 0 0 3px #050505, 0 0 0 5px var(--c, #7c5cff), 0 0 26px var(--c, #7c5cff), 0 12px 26px -10px #000; }
.mz-t::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 35%); }
/* thumbnails show just the game screen, no cabinet frame */
html.shot #stage[data-g="meteor"] .cv, html.shot #stage[data-g="trail"] .cv, html.shot #stage[data-g="bricks"] .cv, html.shot #stage[data-g="runner"] .cv, html.shot #stage[data-g="shooter"] .cv, html.shot #stage[data-g="stack"] .cv, html.shot #stage[data-g="catch"] .cv, html.shot #stage[data-g="aim"] .cv, html.shot #stage[data-g="whack"] .cv, html.shot #stage[data-g="racer"] .cv, html.shot #stage[data-g="bubbles"] .cv, html.shot #stage[data-g="gflip"] .cv, html.shot #stage[data-g="skybounce"] .cv, html.shot #stage[data-g="juggle"] .cv, html.shot #stage[data-g="dodge"] .cv, html.shot #stage[data-g="golf"] .cv, html.shot #stage[data-g="cannon"] .cv, html.shot #stage[data-g="tunnel"] .cv, html.shot #stage[data-g="colorgate"] .cv, html.shot #stage[data-g="slope"] .cv, html.shot #stage[data-g="roadhop"] .cv, html.shot #stage[data-g="orbit"] .cv, html.shot #stage[data-g="coredef"] .cv, html.shot #stage[data-g="beatlanes"] .cv, html.shot #stage[data-g="tiltmaze"] .cv, html.shot #stage[data-g="blockdrop"] .cv, html.shot #stage[data-g="lanedash"] .cv, html.shot #stage[data-g="traprun"] .cv, html.shot #stage[data-g="hillrider"] .cv { box-shadow: none; margin: 0 auto; border-radius: 14px; filter: none; }
html.shot #stage[data-cat="Arcade"] { background: #07070f; }

/* ================= Download panel ================= */
.dl-panel { display: grid; gap: 14px; max-width: 460px; }
.dl-head { display: flex; gap: 14px; align-items: center; }
.dl-head img { border-radius: 16px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6); flex: none; }
.dl-head h3 { margin: 0 0 4px; }
.dl-head .sub { margin: 0; }
.dl-opts { display: grid; gap: 10px; }
.dl-opt { display: grid; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #fff; cursor: pointer; border: 0;
  background: linear-gradient(135deg, #7c5cff, #4a2fd0); box-shadow: 0 8px 18px -8px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s; }
.dl-opt:hover { transform: translateY(-2px); }
.dl-opt b { font-size: 1.05rem; }
.dl-opt span { font-size: .85rem; opacity: .85; }
.dl-opt.dl-win { background: linear-gradient(135deg, #1a7ae8, #0b4aa8); box-shadow: 0 8px 18px -8px rgba(26, 122, 232, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.dl-how { border-radius: 12px; background: rgba(255, 255, 255, .05); padding: 10px 14px; }
.dl-how summary { cursor: pointer; font-weight: 700; }
.dl-how p, .dl-how ol { margin: 8px 0 2px; font-size: .9rem; }
#installBtn:not([hidden]) { background: linear-gradient(135deg, #3ee07a, #1f9a50); color: #04210f; border-color: transparent; font-weight: 800; }
/* report form + delete account */
.fr-report { display: grid; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.fr-report textarea { font: inherit; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); resize: vertical; }
.fr-rbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.del-acct { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 77, 109, .08); border: 1px solid rgba(255, 77, 109, .25); }
.del-acct summary { cursor: pointer; color: #ff8fa3; font-weight: 700; }
.btn.warn { background: #c8102e; color: #fff; border-color: #c8102e; }

/* "All 132 free games" A-Z list at the bottom of the home page (also how search engines find every game) */
.az { max-width: 1200px; margin: 40px auto 10px; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.az h2 { margin: 0 0 14px; font-size: 1.3rem; }
.az > section { display: inline-block; vertical-align: top; width: 220px; margin: 0 18px 18px 0; }
.az h3 { margin: 0 0 6px; font-size: .9rem; color: #ffd84a; letter-spacing: .04em; }
.az ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.az li { margin: 2px 0; }
.az a { color: #b9bde6; text-decoration: none; font-size: .88rem; }
.az a:hover { color: #fff; text-decoration: underline; }
body.playing .az { display: none; }
@media (max-width: 560px) { .az > section { width: calc(50% - 12px); margin-right: 8px; } }
/* ================= Locker: avatar frames ================= */
.avatar[data-fr] { position: relative; }
.avatar[data-fr]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }
.avatar[data-fr="fr_neon"]::after { box-shadow: 0 0 0 2px #39d0ff, 0 0 8px #39d0ff, 0 0 14px rgba(57, 208, 255, .6); }
.avatar[data-fr="fr_gold"]::after { inset: -4px; background: conic-gradient(#fff6c8, #e6b84a, #8a6416, #e6b84a, #fff6c8, #b8860b, #fff6c8); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); }
.avatar[data-fr="fr_fire"]::after { inset: -4px; background: conic-gradient(#ff3b1f, #ffb000, #ff5a1f, #ffe14a, #ff3b1f); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); box-shadow: 0 0 10px rgba(255, 120, 30, .8); animation: lkSpin 3s linear infinite; }
.avatar[data-fr="fr_ice"]::after { inset: -4px; background: conic-gradient(#e8fbff, #7ad3ff, #ffffff, #3a9ae8, #e8fbff); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); box-shadow: 0 0 10px rgba(122, 211, 255, .8); }
.avatar[data-fr="fr_rainbow"]::after { inset: -4px; background: conic-gradient(#ff4d6d, #ffcc33, #3ee07a, #39d0ff, #b48cff, #ff4d6d); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); animation: lkSpin 4s linear infinite; }
.avatar[data-fr="fr_diamond"]::after { inset: -5px; background: conic-gradient(#fff, #bff2ff, #fff, #d9c8ff, #fff, #bff2ff, #fff); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); box-shadow: 0 0 12px rgba(255, 255, 255, .85), 0 0 24px rgba(160, 220, 255, .6); animation: lkSpin 6s linear infinite; }
.avatar[data-fr="fr_crown"]::after { inset: -4px; background: conic-gradient(#fff6c8, #e6b84a, #fff6c8, #b8860b, #fff6c8); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); box-shadow: 0 0 14px rgba(255, 216, 74, .9); }
.avatar[data-fr="fr_crown"]::before { content: "👑"; position: absolute; top: -.85em; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: .75em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
@keyframes lkSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar[data-fr]::after { animation: none; } }

/* ================= Locker: card backs (every card game) ================= */
html[data-cardback="cb_blue"] { --cb: repeating-linear-gradient(45deg, #1f4fa8 0 5px, #173c82 5px 10px); }
html[data-cardback="cb_royal"] { --cb: repeating-linear-gradient(45deg, #6a2fb0 0 5px, #4e1f88 5px 10px); }
html[data-cardback="cb_noir"] { --cb: radial-gradient(circle, #e6b84a 0 1.5px, transparent 2px) 0 0 / 9px 9px, repeating-linear-gradient(45deg, #151515 0 5px, #0a0a0a 5px 10px); }
html[data-cardback="cb_neon"] { --cb: linear-gradient(rgba(57, 208, 255, .55) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(255, 74, 240, .55) 1px, transparent 1px) 0 0 / 8px 8px, #0b0b24; }
html[data-cardback="cb_galaxy"] { --cb: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px) 0 0 / 11px 13px, radial-gradient(ellipse at 70% 60%, #b04ad8, transparent 60%), radial-gradient(ellipse at 30% 30%, #2a5ad8, transparent 60%), #0a0624; }
html[data-cardback] .playcard.back, html[data-cardback] #stage.casino .playcard.back, html[data-cardback] .so-card.back, html[data-cardback] #stage .so-card.back,
html[data-cardback] .pk-card.back, html[data-cardback] #stage.casino .pk-card.back, html[data-cardback] .vpm .playcard.back,
html[data-cardback] .bj-shoe i, html[data-cardback] .bj-discard i, html[data-cardback] .hl-deck i { background: var(--cb) !important; }

/* ================= Locker: table felts (casino + card tables) ================= */
html[data-felt="ft_blue"] { --ft: radial-gradient(ellipse at 50% 40%, #2a6fd0, #174a95 55%, #0c2c62); }
html[data-felt="ft_red"] { --ft: radial-gradient(ellipse at 50% 40%, #c8283a, #8f1426 55%, #5a0a16); }
html[data-felt="ft_purple"] { --ft: radial-gradient(ellipse at 50% 40%, #7a3ac8, #52208f 55%, #2e0e5a); }
html[data-felt="ft_black"] { --ft: radial-gradient(ellipse at 50% 40%, #3a3a3a, #1c1c1c 55%, #080808); }
html[data-felt="ft_gold"] { --ft: radial-gradient(ellipse at 50% 40%, #d8b04a, #a8822a 55%, #6a4e10); }
html[data-felt] .bj-felt, html[data-felt] .bc-felt, html[data-felt] #stage.casino .pk-felt, html[data-felt] .pk-felt, html[data-felt] #stage .ck-felt,
html[data-felt] .dr-felt, html[data-felt] .hl-mat, html[data-felt] #stage[data-g="solitaire"] { background: var(--ft) !important; }

/* ================= Locker window ================= */
.lk { display: grid; gap: 12px; max-width: 560px; }
.lk.busy { opacity: .6; pointer-events: none; }
.lk h3 { margin: 0; }
.lk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-right: 40px; }
.lk-tix { font-weight: 800; padding: 6px 12px; border-radius: 99px; background: linear-gradient(135deg, #ffe14a, #e0a800); color: #3a2400; white-space: nowrap; }
.lk-reward { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.lk-reward.ready { background: linear-gradient(135deg, rgba(62, 224, 122, .2), rgba(57, 208, 255, .15)); border-color: #3ee07a; }
.lk-reward small { display: block; color: var(--muted); margin-top: 2px; }
.lk-earn { margin: 0; font-size: .82rem; color: var(--muted); }
.lk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-tabs button { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); font-weight: 700; cursor: pointer; }
.lk-tabs button[aria-selected="true"] { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.lk-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); text-align: center; }
.lk-item.on { border-color: #3ee07a; box-shadow: 0 0 0 1px #3ee07a; }
.lk-item.locked { opacity: .55; }
.lk-item b { font-size: .85rem; }
.lk-item small { color: var(--muted); }
.lk-item .btn { padding: 6px 12px; min-height: 0; font-size: .82rem; }
.lk-tag { font-size: .75rem; font-weight: 800; color: #3ee07a; }
.lk-lock { font-size: .75rem; color: var(--muted); }
.lk-av { width: 44px !important; height: 44px !important; font-size: 1.3rem !important; margin: 6px 0; }
.lk-card { width: 40px; height: 56px; border-radius: 5px; border: 3px solid #fff; background: repeating-linear-gradient(45deg, #9b1c2c 0 5px, #7d1322 5px 10px); box-shadow: 0 3px 6px rgba(0, 0, 0, .4); }
.lk-card[data-cb="cb_blue"] { background: repeating-linear-gradient(45deg, #1f4fa8 0 5px, #173c82 5px 10px); }
.lk-card[data-cb="cb_royal"] { background: repeating-linear-gradient(45deg, #6a2fb0 0 5px, #4e1f88 5px 10px); }
.lk-card[data-cb="cb_noir"] { background: radial-gradient(circle, #e6b84a 0 1.5px, transparent 2px) 0 0 / 9px 9px, repeating-linear-gradient(45deg, #151515 0 5px, #0a0a0a 5px 10px); }
.lk-card[data-cb="cb_neon"] { background: linear-gradient(rgba(57, 208, 255, .55) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(255, 74, 240, .55) 1px, transparent 1px) 0 0 / 8px 8px, #0b0b24; }
.lk-card[data-cb="cb_galaxy"] { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px) 0 0 / 11px 13px, radial-gradient(ellipse at 70% 60%, #b04ad8, transparent 60%), radial-gradient(ellipse at 30% 30%, #2a5ad8, transparent 60%), #0a0624; }
.lk-felt { width: 64px; height: 44px; border-radius: 22px 22px 8px 8px; border: 4px solid #6b4222; background: radial-gradient(ellipse at 50% 40%, #2fae64, #156b42); }
.lk-felt[data-ft="ft_blue"] { background: radial-gradient(ellipse at 50% 40%, #2a6fd0, #0c2c62); }
.lk-felt[data-ft="ft_red"] { background: radial-gradient(ellipse at 50% 40%, #c8283a, #5a0a16); }
.lk-felt[data-ft="ft_purple"] { background: radial-gradient(ellipse at 50% 40%, #7a3ac8, #2e0e5a); }
.lk-felt[data-ft="ft_black"] { background: radial-gradient(ellipse at 50% 40%, #3a3a3a, #080808); }
.lk-felt[data-ft="ft_gold"] { background: radial-gradient(ellipse at 50% 40%, #d8b04a, #6a4e10); }
.locker-btn b { color: #ffd84a; }
.reward-btn { animation: rewardPulse 1.6s ease-in-out infinite; }
@keyframes rewardPulse { 50% { box-shadow: 0 0 0 4px rgba(62, 224, 122, .35); } }
.age-ok { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; margin: 4px 0 2px; line-height: 1.35; }
.age-ok input { margin-top: 2px; width: 18px; height: 18px; flex: none; }