/* Shared cabinet materials; each playable surface keeps its own game palette. */
body[data-game]{background:radial-gradient(ellipse at 50% 0,#252a32,#101216 65%);color:#eef1f3;font-family:Arial,sans-serif}
body[data-game] .hero,body[data-game] .layout__board,body[data-game] .layout__side{border:1px solid #42464d;border-radius:16px;box-shadow:0 12px 32px #0004;background:linear-gradient(145deg,#22262d,#16191f)}
body[data-game] .hero{padding:14px 18px;border-left:4px solid #efc95d}
body[data-game] .hero h1{font-weight:600;font-family:Arial,sans-serif}
body[data-game] .stats,body[data-game] .status-bar{border:1px solid #41454d;border-radius:10px;box-shadow:none;background:#11151b}
body[data-game] .stat{border:0;border-radius:7px;background:#ffffff04}
body[data-game] .button,body[data-game] .controls button{border-radius:9px;box-shadow:0 3px 0 #0007;border:1px solid #555c67}
body[data-game] canvas{border:2px solid #59616b;border-radius:16px;box-shadow:0 0 0 6px #101217,0 15px 30px #0009}
body[data-game] .sector-hint{display:none;text-align:center;font-size:14px;color:#b7c8d8;line-height:1.4;padding:8px;max-width:100%;box-sizing:border-box}
body[data-game] .canvas-wrap{flex-direction:column;align-items:center;min-width:0;width:100%}
body[data-game] canvas[data-sector]{border-color:#f5d76a;box-shadow:0 0 0 5px #f5d76a22,0 15px 30px #0009}
body[data-game] .layout__side{min-width:0}
/* Lacquered discs and ceramic playing pieces. */
[data-game=connect-four] .slot[data-player="1"]{background:radial-gradient(circle at 35% 25%,#ffab88,#f24831 50%,#921d17);box-shadow:inset 0 0 0 4px #ffffff17,0 3px 5px #0007}
[data-game=connect-four] .slot[data-player="2"]{background:radial-gradient(circle at 35% 25%,#fff4a0,#f4c52b 55%,#9c6900);box-shadow:inset 0 0 0 4px #ffffff25,0 3px 5px #0007}
[data-game=tictactoe] #board{padding:12px;background:#0f141b;border:8px solid #3d434c;border-radius:16px;box-shadow:inset 0 4px 15px #0009,0 15px 25px #0008}
[data-game=tictactoe] .cell{border:1px solid #515b69;border-radius:10px;background:linear-gradient(145deg,#2f3945,#1a2029);text-shadow:0 3px 0 #0008,0 0 18px currentColor;font-family:Arial,sans-serif}
/* Warm 2048 ceramics, matching the cover rather than pastel flat squares. */
[data-game="2048"] .board-2048{border:10px solid #61584e;border-radius:14px;box-shadow:0 15px 30px #0008; background:#383632;--tile-gap:8px}
[data-game="2048"] .tile{border-radius:8px;border:1px solid #fff6;box-shadow:inset 0 2px 1px #ffffff8a,inset 0 -4px 1px #0002,0 3px 6px #0007;font:700 clamp(20px,5vw,34px) Arial,sans-serif}
[data-game="2048"] .tile[data-value="2"]{background:#eee6d7;color:#5b5146}[data-game="2048"] .tile[data-value="4"]{background:#e7d8b9;color:#5b5146}
[data-game="2048"] .tile[data-value="8"]{background:#ef9850;color:white}[data-game="2048"] .tile[data-value="16"]{background:#e76b30;color:white}
[data-game="2048"] .tile[data-value="32"]{background:#df4d35;color:white}[data-game="2048"] .tile[data-value="64"]{background:#c73727;color:white}
[data-game="2048"] .tile[data-value="1024"],[data-game="2048"] .tile[data-value="2048"]{background:#ffca29;color:#5c3700;box-shadow:0 0 20px #ffc83d77,inset 0 2px 2px #fff8}
/* Picture puzzle, with a wood frame and persistent number labels. */
[data-game=sliding] #board{padding:7px;gap:5px;background:#432b1d;border:9px solid #896441;border-radius:13px;box-shadow:inset 0 2px 10px #000a,0 12px 24px #0008}
[data-game=sliding] .tile{position:relative;border:1px solid #ffe7bc80;border-radius:5px;box-shadow:inset 0 2px 1px #fff6,0 3px 4px #0009;background-image:url('previews/sliding-landscape.webp');background-size:400% 400%;background-repeat:no-repeat;overflow:hidden}
[data-game=sliding] .tile span{position:absolute;top:4px;left:4px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 3px;box-sizing:border-box;background:#fff6dded;color:#35251a;border-radius:5px;font:700 16px Arial,sans-serif;box-shadow:0 1px 3px #0006}
[data-game=sliding] .tile.empty{background-image:none;background-color:#201a14;box-shadow:inset 0 2px 9px #000a;border:1px solid #22170f}
.puzzle-reference{margin:10px 0;max-width:320px}.puzzle-reference summary{cursor:pointer;padding:10px;color:#eed3a3;font-size:14px}.puzzle-reference img{width:100%;height:auto;border-radius:8px}
/* Realistically spaced memory cards and a four-part Simon device. */
[data-game=memory] .memory-card__back{background:repeating-conic-gradient(#2d4e7b 0 25%,#365f96 0 50%) 0/14px 14px;border:3px solid #c2cbd5}
[data-game=memory] .memory-card__front{background:linear-gradient(135deg,#fffdf3,#e9e0c9);border:3px solid #eee7d7}
[data-game=memory] .memory-card__badge{color:#c4d5f0;background:transparent;border:0}
[data-game=memory] .memory-card.is-matched .memory-card__front{background:#e5f1ce;border-color:#9bcc64}
[data-game=simon] .simon-grid{width:min(100%,440px);aspect-ratio:1;align-self:center;gap:12px;padding:16px;border:10px solid #11151b;border-radius:50%;background:radial-gradient(circle,#414650,#171b22);box-shadow:0 16px 28px #0009}
[data-game=simon] .pad-btn{min-height:0;border:2px solid #ffffff33;filter:brightness(.72);background:radial-gradient(circle at 30% 20%,#ffffff77,transparent 55%),var(--pad);font-size:clamp(12px,3vw,17px);box-shadow:inset 0 -7px 4px #0005}
[data-game=simon] .pad-btn:nth-child(1){border-radius:100% 16px 16px 16px}[data-game=simon] .pad-btn:nth-child(2){border-radius:16px 100% 16px 16px}[data-game=simon] .pad-btn:nth-child(3){border-radius:16px 16px 16px 100%}[data-game=simon] .pad-btn:nth-child(4){border-radius:16px 16px 100% 16px}
[data-game=simon] .pad-btn.active{filter:brightness(1.45);border-color:white;box-shadow:0 0 32px var(--pad),inset 0 0 28px #fff8}
[data-game=reaction] .reaction{width:min(100%,400px);aspect-ratio:1;min-height:0;align-self:center;border:12px solid #343c42;border-radius:50%;background:radial-gradient(circle at 35% 20%,#5c6570,#26313c 65%);box-shadow:inset 0 5px 8px #ffffff28,inset 0 -12px 4px #0006,0 15px 30px #0008}
[data-game=reaction] .reaction.waiting{background:radial-gradient(circle at 35% 20%,#ed654a,#a11f23 70%);color:white}
[data-game=reaction] .reaction.ready{background:radial-gradient(circle at 35% 20%,#dbff86,#53d92c 60%,#25851c);color:#0e330c;box-shadow:0 0 35px #73ec3888,inset 0 6px 8px #fff8}
[data-game=reaction] .reaction.result{background:radial-gradient(circle at 35% 20%,#63869e,#253a4e 70%);color:white}
[data-game=bulls-and-cows] .guess-form{padding:18px;background:linear-gradient(145deg,#5d503a,#292a28);border:2px solid #867353;border-radius:14px;box-shadow:inset 0 2px 3px #fff2,0 8px 16px #0006}
[data-game=bulls-and-cows] #guess-input{min-width:0;width:100%;max-width:100%;flex-basis:100%;box-sizing:border-box;font:700 32px/1.3 'Courier New',monospace;letter-spacing:.28em;color:#fff2c2;background:#101714;border:2px solid #b19965;border-radius:8px;text-align:center}
[data-game=bulls-and-cows] .history-row{border:1px solid #6f644f;background:linear-gradient(145deg,#3c3f38,#242a24);border-radius:9px;box-shadow:inset 0 1px 1px #fff2}
[data-game=bulls-and-cows] .global-record{border-color:#ad9251;background:#24271e}
[data-game=whack] .hole-grid{padding:16px;border:9px solid #d5942a;background:linear-gradient(145deg,#f7c44a,#c67719);border-radius:22px;box-shadow:inset 0 2px 5px #fff9,0 14px 24px #0008}
[data-game=whack] .hole{position:relative;aspect-ratio:1;min-height:0;border:6px solid #b54a30;border-radius:50%;background:radial-gradient(ellipse,#140d08 30%,#512617);box-shadow:inset 0 6px 10px #000b,0 3px 0 #ffd67e;overflow:hidden}
[data-game=whack] .hole.active{background:radial-gradient(ellipse,#140d08 30%,#512617)}
[data-game=whack] .hole img{width:100%;height:100%;object-fit:contain;animation:mole-rise .62s cubic-bezier(.2,.8,.2,1);pointer-events:none}
@keyframes mole-rise{from{transform:translateY(65%)}to{transform:none}}
/* Keep native card and mine mechanics, replace old desktop chrome with tabletop materials. */
[data-game=kosynka] .win-window,[data-game=minesweeper] .win-window{border:1px solid #7d6a4b;border-radius:14px;background:#292d2b;box-shadow:0 18px 50px #0009;overflow:visible;color:#e8e9df}
[data-game=kosynka] .title-bar,[data-game=minesweeper] .title-bar{background:linear-gradient(110deg,#3b4f40,#222e28);border-radius:12px 12px 0 0;color:#f5e7c5}
[data-game=kosynka] .menu-bar,[data-game=minesweeper] .menu-bar{background:#343b34;color:#efe8d4;border:0}
[data-game=kosynka] .menu-button,[data-game=minesweeper] .menu-button{color:inherit}
[data-game=kosynka] .score-panel,[data-game=minesweeper] .score-panel{background:#1d2521;border:1px solid #62654f;border-radius:8px}
[data-game=kosynka] .game-panel{width:calc(var(--game-w) + 28px);background:radial-gradient(ellipse at 40% 20%,#277b48,#145436);border:7px solid #775236;border-radius:10px;box-shadow:inset 0 2px 12px #001d12}
[data-game=kosynka] .status-row,[data-game=kosynka] .records,[data-game=minesweeper] .status-row,[data-game=minesweeper] .records{color:#d4dfd7}
[data-game=kosynka] .status-row kbd,[data-game=minesweeper] .status-row kbd{color:#252525}
[data-game=kosynka] .card{border:1px solid #baad95;border-radius:6px;background:linear-gradient(135deg,#fffdf5,#e8e0cd);box-shadow:0 2px 4px #0005}
[data-game=kosynka] .card.back{background:repeating-conic-gradient(#254b79 0 25%,#375c8b 0 50%) 0/8px 8px;box-shadow:inset 0 0 0 3px #e5e2d5,0 3px 5px #0006}
[data-game=kosynka] .card .playing-card-art{display:block;width:100%;height:100%;fill:currentColor;pointer-events:none}
[data-game=kosynka] .card{padding:0;color:#192329}
[data-game=kosynka] .card.red{color:#b72136}
[data-game=minesweeper] .board-wrap{padding:10px;background:#4d5356;border:3px solid #899092;border-radius:9px}
[data-game=minesweeper] .cell{background:linear-gradient(145deg,#d1d3cc,#8d9696);border:1px solid #e4e7e0;border-radius:3px;box-shadow:inset -2px -2px 0 #6b7478,inset 2px 2px 0 #fff8}
[data-game=minesweeper] .cell.revealed{background:#c9d0c8;border:1px solid #8d9993;box-shadow:inset 0 1px 3px #0002}
@media(max-width:640px){
 body[data-game] .stats:has(.stat:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
 body[data-game] .sector-hint{display:block}
 body[data-game] .hero{padding:10px 12px}body[data-game] .layout__board{padding:10px}
 body[data-game] .layout__side{display:block}
 [data-game=simon] .simon-grid{padding:10px;gap:8px;border-width:7px}
 [data-game=sliding] #board{border-width:6px;padding:4px;gap:3px}
 [data-game=sliding] .tile span{min-width:21px;height:21px;font-size:14px;top:2px;left:2px}
 [data-game=whack] .hole-grid{padding:10px;gap:8px;border-width:6px}
 [data-game=whack] .hole{border-width:4px}
}
[data-game=tictactoe] .xo[data-mark="X"]{color:#61cdf5}[data-game=tictactoe] .xo[data-mark="O"]{color:#fa7959}
[data-game=simon] .pad-btn[data-pad="3"]{grid-area:1/1;border-radius:100% 16px 16px 16px}
[data-game=simon] .pad-btn[data-pad="0"]{grid-area:1/2;border-radius:16px 100% 16px 16px}
[data-game=simon] .pad-btn[data-pad="2"]{grid-area:2/1;border-radius:16px 16px 16px 100%}
[data-game=simon] .pad-btn[data-pad="1"]{grid-area:2/2;border-radius:16px 16px 100% 16px}

/* Desktop has a larger visual field, so give short feedback animations enough time to read.
   Touch devices keep the snappier timings used by the mobile layout. */
@media (hover:hover) and (pointer:fine) {
  [data-game=connect-four] .slot.is-win { animation-duration: .9s; }
  [data-game=memory] .memory-card__inner { transition-duration: .8s; }
  [data-game=memory] .memory-card { animation-duration: .34s; }
  [data-game=simon] .pad-btn { transition-duration: .2s; }
  [data-game=whack] .hole img { animation-duration: .28s; }
  .game-result[open] { animation-duration: .4s; }
  .cell.revealed, .cell.flag, .hole.active, .mole.active { animation-duration: .32s; }
}