:root { --game-bg:#10251c; --game-card:#f3eee2; --game-yellow:#f2c94c; --game-red:#ef6b4a; --game-green:#2a7655; --game-line:#66766e; }
* { box-sizing:border-box; }
body.game-page { margin:0; color:#edf3ee; background:var(--game-bg); font-family:"Songti SC","STSong",serif; }
.game-grain { position:fixed; inset:0; z-index:-1; opacity:.18; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.2) .6px,transparent .7px); background-size:5px 5px; }
.game-header { width:min(1240px,calc(100% - 40px)); min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:auto; border-bottom:1px solid var(--game-line); }
.game-brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.game-brand>span { display:grid; place-items:center; width:46px; height:46px; color:var(--game-bg); background:var(--game-yellow); border:1px solid #fff; border-radius:50%; font:900 23px "STKaiti","KaiTi",serif; transform:rotate(-5deg); }
.game-brand strong { font-size:18px; letter-spacing:.04em; }
.game-brand small { display:block; margin-top:3px; color:#9caea4; font:700 7px ui-monospace,monospace; letter-spacing:.25em; }
.game-header nav { display:flex; gap:18px; }
.game-header nav a,.game-footer a { color:#d5e0d9; font-size:10px; text-decoration:none; }
.game-header nav a:hover,.game-footer a:hover { color:var(--game-yellow); }
.game-main { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:54px 0 90px; }
.arcade-hero { min-height:250px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:32px 0 50px; }
.arcade-hero p:first-child { margin:0 0 13px; color:var(--game-yellow); font:800 9px ui-monospace,monospace; letter-spacing:.18em; }
.arcade-hero h1 { margin:0; font:900 clamp(62px,10vw,138px)/.8 "STKaiti","KaiTi",serif; letter-spacing:-.06em; }
.arcade-hero div>p:last-child { max-width:550px; margin:28px 0 0; color:#aebdb5; font-size:12px; line-height:1.8; }
.arcade-hero aside { min-width:230px; padding:20px; color:var(--game-bg); background:var(--game-yellow); border:1px solid #fff; box-shadow:8px 8px 0 var(--game-red); transform:rotate(1.5deg); }
.arcade-hero aside b { display:block; margin-bottom:10px; font:900 16px ui-monospace,monospace; }
.arcade-hero aside span { font-size:9px; line-height:1.7; }
.game-nav { display:grid; grid-template-columns:repeat(8,1fr); border:1px solid var(--game-line); border-bottom:0; }
.game-nav a { min-width:0; display:flex; flex-direction:column; gap:8px; padding:16px 13px; color:#b5c4bc; border-right:1px solid var(--game-line); text-decoration:none; font-size:10px; transition:.16s ease; }
.game-nav a:last-child { border:0; }
.game-nav a span { color:#71847a; font:750 8px ui-monospace,monospace; }
.game-nav a:hover,.game-nav a.active { color:var(--game-bg); background:var(--game-yellow); }
.game-nav a.active span { color:#704b12; }
.game-panel { min-height:620px; color:#17231d; background:var(--game-card); border:1px solid var(--game-line); }
.game-toolbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 18px; border-bottom:1px solid #17231d; background:#e5dfd2; }
.game-toolbar>div { display:flex; align-items:center; gap:8px; }
.score-pair { display:flex; flex-wrap:wrap; gap:8px; }
.score-pair span { min-width:90px; padding:9px 12px; color:#59665f; background:#f8f4eb; border:1px solid #bdb8ad; font:700 8px ui-monospace,monospace; text-transform:uppercase; }
.score-pair b { display:block; margin-top:3px; color:var(--game-green); font-size:16px; }
.game-panel button,.game-panel select,.game-panel input { min-height:38px; padding:8px 12px; color:#17231d; background:#f8f4eb; border:1px solid #17231d; font:700 10px inherit; }
.game-panel button { cursor:pointer; }
.game-panel button:hover { transform:translateY(-1px); box-shadow:2px 3px 0 #17231d; }
.game-panel .game-primary { color:#fff; background:var(--game-green); }
.game2048-layout,.snake-layout,.mine-layout,.sudoku-layout,.memory-layout,.ttt-layout,.reaction-layout,.guess-layout { display:grid; min-height:547px; }
.game2048-layout { grid-template-columns:minmax(420px,.9fr) 1.1fr; }
.game2048-board { --tile-gap:10px; --tile-size:calc((100% - var(--tile-gap) * 5) / 4); position:relative; width:min(500px,calc(100% - 50px)); aspect-ratio:1; align-self:center; justify-self:center; touch-action:none; user-select:none; background:#b8ad9d; border:1px solid #17231d; box-shadow:10px 12px 0 #17231d; }
.game2048-grid { position:absolute; inset:var(--tile-gap); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--tile-gap); }
.game2048-grid span { min-width:0; background:#cec5b8; border:1px solid rgba(23,35,29,.18); }
.game2048-tiles { position:absolute; inset:0; }
.tile { position:absolute; top:var(--tile-gap); left:var(--tile-gap); z-index:1; width:var(--tile-size); height:var(--tile-size); display:grid; place-items:center; min-width:0; color:#665c50; background:#cec5b8; border:1px solid rgba(23,35,29,.22); font:900 clamp(22px,4vw,48px)/1 ui-monospace,monospace; transform:translate(calc(var(--tile-x) * (100% + var(--tile-gap))),calc(var(--tile-y) * (100% + var(--tile-gap)))); transition:transform .16s cubic-bezier(.2,.75,.25,1),background .1s ease; will-change:transform; }
.tile-new { animation:tile-spawn .2s cubic-bezier(.2,.9,.35,1.25) both; }
.tile-merged { z-index:2; animation:tile-merge .24s cubic-bezier(.2,.9,.35,1.35) both; }
@keyframes tile-spawn { from { opacity:0; scale:.35; } }
@keyframes tile-merge { 45% { scale:1.16; } }
.tile-2{background:#eee7db}.tile-4{background:#e9dfc5}.tile-8{color:#fff;background:#eaa66d}.tile-16{color:#fff;background:#ed8758}.tile-32{color:#fff;background:#ed6d4d}.tile-64{color:#fff;background:#d94a32}.tile-128{background:#e6c95d}.tile-256{background:#e2be40}.tile-512{background:#d6aa27}.tile-1024{color:#fff;background:#97771b;font-size:clamp(18px,3vw,36px)}.tile-2048,.tile-4096{color:#fff;background:#176b4d;font-size:clamp(18px,3vw,34px)}
.game2048-layout aside,.snake-layout aside,.mine-layout aside,.memory-layout aside,.ttt-layout aside { display:grid; align-content:center; gap:15px; padding:45px; border-left:1px solid #17231d; background:#e2e9df; }
.game2048-layout h2,.snake-layout h2,.mine-layout h2,.memory-layout h2,.ttt-layout h2 { margin:0; font:900 32px "STKaiti","KaiTi",serif; }
.game2048-layout aside p,.snake-layout aside p,.mine-layout aside p,.memory-layout aside p,.ttt-layout aside p { color:#56645d; font-size:11px; line-height:1.8; }
.game2048-layout aside strong { color:var(--game-green); font-size:11px; }
.direction-pad,.snake-pad { width:170px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:12px 0; }
.direction-pad button:first-child,.snake-pad button:first-child { grid-column:2; }
.direction-pad button:nth-child(2),.snake-pad button:nth-child(2) { grid-column:1; }
.direction-pad button:nth-child(3),.snake-pad button:nth-child(3) { grid-column:2; }
.direction-pad button:nth-child(4),.snake-pad button:nth-child(4) { grid-column:3; grid-row:2; }
.snake-layout { grid-template-columns:minmax(420px,.9fr) 1.1fr; }
#snake-canvas { width:min(500px,calc(100% - 50px)); height:auto; align-self:center; justify-self:center; border:1px solid #17231d; box-shadow:10px 12px 0 #17231d; image-rendering:pixelated; }
.mine-layout { grid-template-columns:minmax(0,1fr) 310px; }
.mine-layout>div:first-child { align-self:center; justify-self:center; }
.mine-board { display:grid; grid-template-columns:repeat(var(--mine-columns),32px); grid-auto-rows:32px; gap:1px; padding:8px; background:#859087; border:1px solid #17231d; box-shadow:7px 8px 0 #17231d; }
.mine-board.wide { justify-self:start !important; margin:25px; }
.mine-cell { width:32px; min-height:32px!important; padding:0!important; background:#d8d4ca!important; border-color:#f9f5ec #6e756f #6e756f #f9f5ec!important; font:900 12px ui-monospace,monospace!important; }
.mine-cell.open { background:#bfc5bd!important; border:1px solid #8e958e!important; box-shadow:none!important; transform:none!important; }
.mine-cell.flagged { color:#9c2e20; }
.mine-cell[data-near="1"]{color:#1554a0}.mine-cell[data-near="2"]{color:#18703d}.mine-cell[data-near="3"]{color:#b13626}.mine-cell[data-near="4"]{color:#542280}.mine-cell[data-near="5"]{color:#7a1717}
.mine-layout { overflow:auto; }
.mine-legend { display:grid; gap:8px; margin-top:15px; }
.mine-legend span { padding:9px; background:#f5f1e7; border:1px solid #b9c0b9; font-size:9px; }
.sudoku-layout { grid-template-columns:minmax(480px,.9fr) 1.1fr; }
.sudoku-board { width:min(500px,calc(100% - 45px)); aspect-ratio:1; align-self:center; justify-self:center; display:grid; grid-template-columns:repeat(9,1fr); border:2px solid #17231d; box-shadow:9px 10px 0 #17231d; }
.sudoku-board button { position:relative; min-width:0; min-height:0; padding:0; border:0; border-right:1px solid #adb4ad; border-bottom:1px solid #adb4ad; font:800 clamp(17px,3vw,28px) ui-monospace,monospace; box-shadow:none!important; transform:none!important; }
.sudoku-board button:nth-child(3n) { border-right:2px solid #17231d; }
.sudoku-board button:nth-child(n+19):nth-child(-n+27),.sudoku-board button:nth-child(n+46):nth-child(-n+54) { border-bottom:2px solid #17231d; }
.sudoku-board .given { color:#17231d; background:#ded8cc; }
.sudoku-board .editable { color:var(--game-green); background:#fbf8f1; }
.sudoku-board .selected { background:#f2d969; }
.sudoku-board .conflict { color:#a82d20; background:#f2c8be; }
.sudoku-layout aside { background:#e2e9df; border-left:1px solid #17231d; }
.sudoku-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:220px; }
.sudoku-actions { display:flex; flex-wrap:wrap; gap:6px; }
.sudoku-actions button.active { color:#fff; background:var(--game-green); }
.sudoku-notes { position:absolute; inset:3px; display:grid; grid-template-columns:repeat(3,1fr); font:700 7px ui-monospace,monospace; }
.memory-layout { grid-template-columns:minmax(480px,.95fr) 1.05fr; }
.memory-board { width:min(540px,calc(100% - 45px)); align-self:center; justify-self:center; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.memory-board button { position:relative; min-height:100px; padding:0; transform-style:preserve-3d; transition:transform .35s ease; box-shadow:4px 5px 0 #17231d; }
.memory-board button:hover { transform:translateY(-2px); }
.memory-board button.open,.memory-board button.matched { transform:rotateY(180deg); }
.memory-board button.matched { opacity:.58; }
.memory-front,.memory-back { position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; font:900 32px "STKaiti","KaiTi",serif; }
.memory-front { color:#fff; background:var(--game-green); }
.memory-back { color:#17231d; background:var(--game-yellow); transform:rotateY(180deg); }
.ttt-layout { grid-template-columns:minmax(420px,.85fr) 1.15fr; }
.ttt-board { width:420px; height:420px; flex:none; align-self:center; justify-self:center; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); border:2px solid #17231d; box-shadow:9px 10px 0 #17231d; }
.ttt-board button { min-height:0; padding:0; color:var(--game-green); background:#f8f4eb; border:0; border-right:2px solid #17231d; border-bottom:2px solid #17231d; box-shadow:none!important; transform:none!important; font:900 clamp(56px,8vw,105px)/1 "STKaiti","KaiTi",serif; }
.ttt-board button:nth-child(3n){border-right:0}.ttt-board button:nth-child(n+7){border-bottom:0}.ttt-board button.o{color:var(--game-red)}
.ttt-layout .section-kicker,.reaction-layout .section-kicker,.guess-layout .section-kicker { margin:0; color:var(--game-red); font:800 9px ui-monospace,monospace; letter-spacing:.15em; }
.reaction-layout { grid-template-columns:1.35fr .65fr; }
.reaction-stage { min-height:547px!important; display:grid; place-items:center; align-content:center; gap:15px; padding:40px!important; border:0!important; border-right:1px solid #17231d!important; box-shadow:none!important; transform:none!important; cursor:pointer; }
.reaction-stage[data-state="idle"],.reaction-stage[data-state="result"],.reaction-stage[data-state="done"] { background:#e2e9df; }
.reaction-stage[data-state="waiting"] { color:#fff; background:#b94c38; }
.reaction-stage[data-state="ready"] { color:#fff; background:#23865e; }
.reaction-stage span { font-size:70px; }
.reaction-stage strong { font:900 clamp(30px,5vw,65px) "STKaiti","KaiTi",serif; }
.reaction-stage small { font-size:10px; }
.reaction-layout aside { padding:38px; }
.reaction-layout aside h2,.guess-layout h2 { margin:10px 0 25px; font:900 27px "STKaiti","KaiTi",serif; }
.reaction-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.reaction-stats article { padding:12px 5px; background:#e4dfd3; border:1px solid #b9b5ab; text-align:center; }
.reaction-stats b { display:block; color:var(--game-green); font:850 16px ui-monospace,monospace; }
.reaction-stats span { font-size:8px; }
#reaction-rounds { margin:25px 0 0; padding:0; list-style:none; }
#reaction-rounds li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #a8aea8; font-size:9px; }
.guess-layout { grid-template-columns:1.15fr .85fr; }
.guess-layout>section,.guess-layout>aside { padding:48px; }
.guess-layout>section { border-right:1px solid #17231d; background:#e2e9df; }
.guess-layout p { color:#57645d; font-size:10px; line-height:1.7; }
.guess-entry { display:grid; grid-template-columns:1fr auto; gap:8px; margin:30px 0; }
.guess-entry input { min-width:0; height:64px; font:900 28px ui-monospace,monospace; }
.guess-meter { position:relative; display:flex; height:14px; margin:25px 0; overflow:hidden; background:#d7d1c5; border:1px solid #17231d; }
.guess-meter i { display:block; height:100%; }
#guess-low,#guess-high { background:#b7b1a5; }
#guess-target { position:absolute; background:var(--game-yellow); }
.guess-actions { display:flex; gap:8px; }
#guess-history { max-height:350px; margin:0; padding:0; overflow:auto; list-style:none; }
#guess-history li { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #c2bdb3; font:750 14px ui-monospace,monospace; }
#guess-history b { color:var(--game-red); font-size:9px; }
.game-footer { width:min(1240px,calc(100% - 40px)); min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:auto; border-top:1px solid var(--game-line); color:#8fa198; font-size:9px; }

@media (max-width:980px) {
  .game-nav { grid-template-columns:repeat(4,1fr); }
  .game-nav a:nth-child(4) { border-right:0; }
  .game-nav a:nth-child(-n+4) { border-bottom:1px solid var(--game-line); }
  .game2048-layout,.snake-layout,.mine-layout,.sudoku-layout,.memory-layout,.ttt-layout,.reaction-layout,.guess-layout { grid-template-columns:1fr; }
  .game2048-layout aside,.snake-layout aside,.mine-layout aside,.sudoku-layout aside,.memory-layout aside,.ttt-layout aside { border-left:0; border-top:1px solid #17231d; }
  .mine-layout,.sudoku-layout,.memory-layout,.ttt-layout { padding-top:30px; }
  .mine-layout aside,.sudoku-layout aside,.memory-layout aside,.ttt-layout aside { margin-top:30px; }
  .reaction-stage,.guess-layout>section { border-right:0!important; border-bottom:1px solid #17231d!important; }
}
@media (max-width:640px) {
  .game-header { min-height:72px; }
  .game-header nav a:last-child { display:none; }
  .game-main { width:min(100% - 22px,1240px); padding-top:28px; }
  .arcade-hero { align-items:stretch; flex-direction:column; padding-bottom:35px; }
  .arcade-hero aside { min-width:0; }
  .arcade-hero h1 { font-size:68px; }
  .game-nav { grid-template-columns:repeat(2,1fr); }
  .game-nav a:nth-child(even) { border-right:0; }
  .game-nav a { border-bottom:1px solid var(--game-line); }
  .game-toolbar { align-items:stretch; flex-direction:column; }
  .game-toolbar>div { flex-wrap:wrap; }
  .score-pair span { min-width:78px; flex:1; }
  .game2048-board,#snake-canvas,.sudoku-board,.memory-board { width:calc(100% - 28px); margin:28px 0; box-shadow:5px 6px 0 #17231d; }
  .game2048-board { --tile-gap:6px; }
  .ttt-board { width:min(320px,calc(100vw - 50px)); height:min(320px,calc(100vw - 50px)); margin:28px 0; box-shadow:5px 6px 0 #17231d; }
  .tile { font-size:22px; }
  .game2048-layout aside,.snake-layout aside,.mine-layout aside,.sudoku-layout aside,.memory-layout aside,.ttt-layout aside { padding:28px 20px; }
  .mine-layout { padding-top:10px; }
  .mine-layout>div:first-child { width:100%; padding:18px; overflow:auto; }
  .mine-board { grid-template-columns:repeat(var(--mine-columns),28px); grid-auto-rows:28px; }
  .mine-cell { width:28px; min-height:28px!important; }
  .mine-board.wide { margin:0; }
  .sudoku-board button { font-size:18px; }
  .memory-board { gap:7px; }
  .memory-board button { min-height:70px; }
  .memory-front,.memory-back { font-size:24px; }
  .reaction-stage { min-height:420px!important; }
  .reaction-layout aside,.guess-layout>section,.guess-layout>aside { padding:28px 20px; }
  .guess-entry { grid-template-columns:1fr; }
  .game-footer { align-items:flex-start; flex-direction:column; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .memory-board button,.game-nav a,.tile { transition:none; }
  .tile-new,.tile-merged { animation:none; }
}

/* 2026 arcade collection — deep lacquer, brass and illuminated glass */
:root {
  --game-bg:#071610;
  --game-card:#eee9dc;
  --game-yellow:#e7c46a;
  --game-red:#d95f4c;
  --game-green:#236e50;
  --game-line:rgba(218,201,157,.28);
  --game-ink:#12221b;
  --game-muted:#8da197;
  --game-glow:rgba(231,196,106,.18);
}
body.game-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 80% 4%,rgba(82,148,116,.14),transparent 31rem),
    radial-gradient(circle at 8% 26%,rgba(231,196,106,.09),transparent 23rem),
    linear-gradient(145deg,#06130e 0%,#0a1c15 46%,#07140f 100%);
}
.game-grain {
  opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  background-size:190px 190px;
}
.game-header {
  position:relative;
  min-height:94px;
  border-color:var(--game-line);
}
.game-header::after {
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  width:130px;
  height:1px;
  background:var(--game-yellow);
  box-shadow:0 0 18px var(--game-yellow);
}
.game-brand>span {
  color:#0b1d15;
  background:linear-gradient(145deg,#f8df94,#bd8e35);
  border-color:#ffe7a5;
  box-shadow:0 0 0 5px rgba(231,196,106,.08),0 12px 30px rgba(0,0,0,.25);
}
.game-brand strong { font-size:17px; letter-spacing:.08em; }
.game-header nav a {
  position:relative;
  padding:9px 0;
  color:#b3c3ba;
  font:700 10px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.08em;
}
.game-header nav a::after {
  content:"";
  position:absolute;
  right:0;
  bottom:3px;
  left:0;
  height:1px;
  background:var(--game-yellow);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.game-header nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.game-main { width:min(1320px,calc(100% - 48px)); padding-top:32px; }
.arcade-hero {
  position:relative;
  min-height:340px;
  padding:54px 4% 65px;
  overflow:hidden;
  border-right:1px solid var(--game-line);
  border-left:1px solid var(--game-line);
}
.arcade-hero::before {
  content:attr(data-edition);
  position:absolute;
  right:4%;
  bottom:-.08em;
  color:rgba(231,196,106,.055);
  font:900 160px/.8 ui-monospace,monospace;
  letter-spacing:-.12em;
  pointer-events:none;
}
.arcade-hero::after {
  content:"";
  position:absolute;
  top:20%;
  right:30%;
  width:1px;
  height:60%;
  background:linear-gradient(transparent,var(--game-line),transparent);
}
.arcade-hero h1 {
  color:#f5f0e6;
  text-shadow:0 24px 50px rgba(0,0,0,.42);
}
.arcade-hero div>p:last-child { max-width:610px; color:#a9b9af; font-family:ui-sans-serif,system-ui,sans-serif; }
.arcade-hero aside {
  position:relative;
  min-width:250px;
  padding:24px;
  color:#11231a;
  background:linear-gradient(145deg,#f2d688,#c9a44f);
  border:1px solid #ffe8a8;
  box-shadow:0 24px 60px rgba(0,0,0,.32),9px 9px 0 rgba(217,95,76,.88);
  transform:rotate(1deg);
}
.game-library {
  margin-top:22px;
  padding:27px;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--game-line);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.library-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}
.library-heading p {
  margin:0 0 7px;
  color:var(--game-yellow);
  font:800 8px ui-monospace,monospace;
  letter-spacing:.21em;
}
.library-heading h2 {
  margin:0;
  font:900 clamp(26px,4vw,44px)/1 "STKaiti","KaiTi",serif;
}
.library-actions { display:flex; gap:9px; }
.library-actions label {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:230px;
  padding:0 13px;
  border:1px solid var(--game-line);
  background:rgba(0,0,0,.16);
}
.library-actions label span { color:var(--game-yellow); }
.library-actions input {
  width:100%;
  height:40px;
  color:#edf3ee;
  background:transparent;
  border:0;
  outline:0;
  font:600 11px ui-sans-serif,system-ui,sans-serif;
}
.library-actions button,.game-categories button {
  min-height:40px;
  padding:9px 13px;
  color:#c6d1ca;
  background:transparent;
  border:1px solid var(--game-line);
  font:750 9px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;
  cursor:pointer;
}
.library-actions button:hover,.game-categories button:hover,.game-categories button.active {
  color:#0c1d15;
  background:var(--game-yellow);
  border-color:var(--game-yellow);
}
.game-categories { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.game-nav {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  border:0;
}
.game-nav a {
  position:relative;
  min-height:126px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:13px;
  overflow:hidden;
  color:#d6e0da;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(218,201,157,.19);
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.game-nav a:hover,.game-nav a.active {
  color:#f6f1e8;
  background:linear-gradient(145deg,rgba(231,196,106,.12),rgba(255,255,255,.025));
  border-color:rgba(231,196,106,.7);
  box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 0 30px rgba(231,196,106,.04);
  transform:translateY(-3px);
}
.game-cover {
  position:relative;
  width:72px;
  height:90px;
  display:grid!important;
  place-items:center;
  color:#101f18!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.4),transparent 35%),
    linear-gradient(160deg,#e4c569,#9e7a31);
  border:1px solid #f6dc8c;
  box-shadow:0 12px 25px rgba(0,0,0,.28);
  font:900 8px ui-monospace,monospace!important;
  overflow:hidden;
}
.game-cover::before {
  content:attr(data-mark);
  position:relative;
  z-index:1;
  font:900 28px "STKaiti","KaiTi",serif;
}
.game-cover i {
  position:absolute;
  inset:7px;
  border:1px solid rgba(17,34,27,.35);
}
.game-cover b { position:absolute; right:7px; bottom:5px; font:800 8px ui-monospace,monospace; }
.game-card-copy { min-width:0; display:block!important; }
.game-card-copy small { display:block; color:#d6ba6b; font:700 7px ui-monospace,monospace; letter-spacing:.13em; }
.game-card-copy strong { display:block; margin:8px 0 6px; font:900 17px "STKaiti","KaiTi",serif; }
.game-card-copy em {
  display:-webkit-box;
  overflow:hidden;
  color:#91a49a;
  font:500 9px/1.65 ui-sans-serif,system-ui,sans-serif;
  font-style:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.game-card-arrow {
  align-self:end;
  color:#dcc16d;
  font:800 7px ui-monospace,monospace;
  letter-spacing:.1em;
}
.game-library-empty { margin:18px 0 2px; color:var(--game-muted); font-size:11px; text-align:center; }
.game-panel {
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.52),transparent 25rem),
    var(--game-card);
  border-color:#46564d;
  box-shadow:0 34px 90px rgba(0,0,0,.32);
}
.game-toolbar {
  background:rgba(224,218,205,.8);
  backdrop-filter:blur(12px);
}
.score-pair span { background:rgba(255,255,255,.58); }
.game-panel button,.game-panel select,.game-panel input { border-radius:2px; }
.game-panel button { transition:transform .14s ease,box-shadow .14s ease,background .14s ease; }
.game-panel .game-primary { background:linear-gradient(145deg,#2d805f,#1d5c44); }
.tetris-layout,.breakout-layout,.gomoku-layout,.lights-layout,.fifteen-layout {
  display:grid;
  min-height:610px;
  grid-template-columns:minmax(460px,.95fr) 1.05fr;
}
.tetris-layout aside,.breakout-layout aside,.gomoku-layout aside,.lights-layout aside,.fifteen-layout aside {
  display:grid;
  align-content:center;
  gap:16px;
  padding:50px;
  background:linear-gradient(145deg,#dce7de,#edf0e8);
  border-left:1px solid var(--game-ink);
}
.tetris-layout aside h2,.breakout-layout aside h2,.gomoku-layout aside h2,.lights-layout aside h2,.fifteen-layout aside h2 {
  margin:0;
  font:900 34px "STKaiti","KaiTi",serif;
}
.tetris-layout aside p,.breakout-layout aside p,.gomoku-layout aside p,.lights-layout aside p,.fifteen-layout aside p {
  color:#526158;
  font-size:11px;
  line-height:1.8;
}
.tetris-layout .section-kicker,.breakout-layout .section-kicker,.gomoku-layout .section-kicker,.lights-layout .section-kicker,.fifteen-layout .section-kicker {
  margin:0;
  color:var(--game-red);
  font:800 9px ui-monospace,monospace;
  letter-spacing:.15em;
}
#tetris-canvas {
  width:300px;
  height:600px;
  align-self:center;
  justify-self:center;
  border:1px solid var(--game-ink);
  box-shadow:12px 14px 0 var(--game-ink),0 26px 50px rgba(16,34,27,.2);
}
.next-piece { width:160px; padding:12px; background:rgba(255,255,255,.52); border:1px solid #aeb7af; }
.next-piece span { display:block; color:#5f6d65; font:700 8px ui-monospace,monospace; text-transform:uppercase; }
.next-piece canvas { display:block; margin:auto; }
.tetris-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(310px,100%); }
.tetris-pad button:nth-child(4) { grid-column:1/3; }
.tetris-pad button:nth-child(5) { grid-column:3; }
.breakout-layout { grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); }
#breakout-canvas {
  width:calc(100% - 50px);
  height:auto;
  align-self:center;
  justify-self:center;
  border:1px solid var(--game-ink);
  box-shadow:10px 12px 0 var(--game-ink);
  touch-action:none;
}
.breakout-pad { display:flex; gap:7px; }
.gomoku-board {
  width:min(570px,calc(100% - 48px));
  aspect-ratio:1;
  align-self:center;
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(15,1fr);
  padding:3.125%;
  background:
    linear-gradient(rgba(32,47,39,.48) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,47,39,.48) 1px,transparent 1px),
    linear-gradient(145deg,#d9bd78,#bb934d);
  background-size:6.25% 6.25%,6.25% 6.25%,auto;
  background-position:6.25% 6.25%,6.25% 6.25%,0 0;
  box-shadow:12px 14px 0 var(--game-ink),0 25px 55px rgba(22,35,29,.2);
}
.gomoku-board button {
  position:relative;
  min-width:0;
  min-height:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none!important;
  transform:none!important;
}
.gomoku-board button::after {
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  transform:scale(0);
  transition:transform .18s ease;
}
.gomoku-board .stone::after { transform:scale(1); }
.gomoku-board .stone-1::after { background:radial-gradient(circle at 35% 30%,#4a554f,#08100c 60%); box-shadow:0 3px 5px rgba(0,0,0,.42); }
.gomoku-board .stone-2::after { background:radial-gradient(circle at 35% 30%,#fff,#d7d5cb 66%); box-shadow:0 3px 5px rgba(0,0,0,.25); }
.gomoku-board .last-move::before { content:""; position:absolute; z-index:2; inset:39%; border:2px solid #d95f4c; border-radius:50%; pointer-events:none; }
.gomoku-roles { display:flex; justify-content:space-between; gap:10px; margin:18px 0 12px; }
.gomoku-roles span { padding:7px 9px; background:#e3e9e3; border:1px solid #a8b1aa; font:800 8px ui-monospace,monospace; }
.gomoku-evaluation { margin:0 0 20px; padding:13px; background:#f8f3e8; border:1px solid #aeb7af; }
.gomoku-evaluation>div:first-child { display:flex; justify-content:space-between; gap:8px; font:750 8px ui-monospace,monospace; }
.gomoku-eval-track { height:10px; margin:9px 0; overflow:hidden; background:#ece9df; border:1px solid var(--game-ink); }
.gomoku-eval-track i { display:block; width:50%; height:100%; background:#17231d; transition:width .25s ease; }
.gomoku-evaluation small { color:#65736b; font-size:7px; line-height:1.5; }
.gomoku-replay { margin-top:18px; padding-top:16px; border-top:1px solid #aab3ac; }
.gomoku-replay>strong,.gomoku-replay>span { display:block; margin-bottom:8px; }
.gomoku-replay>span { color:#65736b; font:750 8px ui-monospace,monospace; }
.gomoku-replay>div { display:grid; grid-template-columns:auto 1fr 1fr auto; gap:5px; }
.gomoku-replay button { padding:7px 8px; font-size:8px; }
.lights-board {
  width:min(510px,calc(100% - 48px));
  aspect-ratio:1;
  align-self:center;
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  padding:20px;
  background:#0b1d15;
  border:1px solid var(--game-ink);
  box-shadow:12px 14px 0 var(--game-ink);
}
.lights-board button {
  min-width:0;
  min-height:0;
  padding:0;
  border:1px solid #43594c;
  border-radius:50%;
  background:radial-gradient(circle,#31453a,#14261d 65%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.5)!important;
  transform:none!important;
}
.lights-board button.light-on {
  background:radial-gradient(circle,#fff5b4 0%,#e6c85f 40%,#7c6626 78%);
  border-color:#ffe88a;
  box-shadow:0 0 24px rgba(242,213,105,.78),inset 0 0 12px #fff2a4!important;
}
.lights-board button.light-hint { animation:light-hint 1s ease-in-out infinite; }
@keyframes light-hint { 50% { outline:4px solid rgba(217,95,76,.6); outline-offset:2px; } }
.fifteen-board {
  width:min(520px,calc(100% - 48px));
  aspect-ratio:1;
  align-self:center;
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  padding:14px;
  background:#b69c69;
  border:1px solid var(--game-ink);
  box-shadow:12px 14px 0 var(--game-ink);
}
.fifteen-board button { min-width:0; min-height:0; padding:0; }
.fifteen-tile {
  color:#f6efe1!important;
  background:linear-gradient(145deg,#2c7558,#174b37)!important;
  border-color:#123a2b!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),3px 4px 0 rgba(16,34,27,.42)!important;
  font:900 clamp(27px,5vw,54px) "STKaiti","KaiTi",serif!important;
}
.fifteen-empty { visibility:hidden; }

.pong-layout,.connect-layout,.maze-layout,.simon-layout,.mole-layout {
  display:grid;
  min-height:610px;
  grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);
}
.pong-layout aside,.connect-layout aside,.maze-layout aside,.simon-layout aside,.mole-layout aside {
  display:grid;
  align-content:center;
  gap:16px;
  padding:50px;
  background:linear-gradient(145deg,#dce7de,#edf0e8);
  border-left:1px solid var(--game-ink);
}
.pong-layout aside h2,.connect-layout aside h2,.maze-layout aside h2,.simon-layout aside h2,.mole-layout aside h2 { margin:0; font:900 34px "STKaiti","KaiTi",serif; }
.pong-layout aside p,.connect-layout aside p,.maze-layout aside p,.simon-layout aside p,.mole-layout aside p { color:#526158; font-size:11px; line-height:1.8; }
.pong-layout .section-kicker,.connect-layout .section-kicker,.maze-layout .section-kicker,.simon-layout .section-kicker,.mole-layout .section-kicker { margin:0; color:var(--game-red); font:800 9px ui-monospace,monospace; letter-spacing:.15em; }
#pong-canvas,#maze-canvas { width:calc(100% - 52px); height:auto; align-self:center; justify-self:center; border:1px solid var(--game-ink); box-shadow:11px 13px 0 var(--game-ink); touch-action:none; }
.pong-pad { display:flex; gap:7px; }
.connect-layout { grid-template-columns:minmax(520px,1.1fr) minmax(290px,.9fr); }
.connect-board {
  width:min(650px,calc(100% - 54px));
  aspect-ratio:7/6;
  align-self:center;
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:9px;
  padding:19px;
  background:linear-gradient(145deg,#1e6b51,#124432);
  border:1px solid #10231a;
  box-shadow:12px 14px 0 var(--game-ink);
}
.connect-board button { position:relative; min-width:0; min-height:0; padding:0; overflow:hidden; border:0; border-radius:50%; background:#c8c6bb; box-shadow:inset 4px 5px 10px rgba(14,35,25,.4)!important; transform:none!important; }
.connect-board button::after { content:""; position:absolute; inset:7%; border-radius:50%; transform:translateY(-145%); transition:transform .24s cubic-bezier(.2,.9,.3,1.15); }
.connect-board .connect-piece::after { transform:translateY(0); }
.connect-board .player-1::after { background:radial-gradient(circle at 34% 27%,#ffad85,#d6533d 60%); box-shadow:0 4px 9px rgba(80,23,16,.35); }
.connect-board .player-2::after { background:radial-gradient(circle at 34% 27%,#fff0a5,#dfbb4f 60%); box-shadow:0 4px 9px rgba(79,61,12,.3); }
.maze-layout { grid-template-columns:minmax(520px,1.1fr) minmax(290px,.9fr); }
.maze-pad { width:180px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.maze-pad button:first-child { grid-column:2; }.maze-pad button:nth-child(2){grid-column:1}.maze-pad button:nth-child(3){grid-column:2}.maze-pad button:nth-child(4){grid-column:3}
.simon-layout { grid-template-columns:minmax(520px,1.05fr) minmax(290px,.95fr); }
.simon-board { position:relative; width:min(520px,calc(100% - 52px)); aspect-ratio:1; align-self:center; justify-self:center; display:grid; grid-template-columns:repeat(2,1fr); gap:13px; padding:24px; background:#10231a; border-radius:50%; box-shadow:12px 14px 0 var(--game-ink),0 25px 55px rgba(22,35,29,.25); }
.simon-board button { min-width:0; min-height:0; padding:0; border:0; opacity:.52; transform:none!important; transition:opacity .12s ease,filter .12s ease; }
.simon-board button:nth-child(1){background:#2f9c68;border-radius:100% 8px 8px 8px}.simon-board button:nth-child(2){background:#e6bd47;border-radius:8px 100% 8px 8px}.simon-board button:nth-child(3){background:#db5a48;border-radius:8px 8px 8px 100%}.simon-board button:nth-child(4){background:#4585c6;border-radius:8px 8px 100% 8px}.simon-board button.lit{opacity:1;filter:brightness(1.5) saturate(1.2);box-shadow:0 0 35px currentColor!important}.simon-board strong{position:absolute;inset:37%;display:grid;place-items:center;color:#f1d276;background:#0b1b14;border:7px solid #10231a;border-radius:50%;font:900 40px "STKaiti",serif}
.mole-layout { grid-template-columns:minmax(520px,1.1fr) minmax(290px,.9fr); }
.mole-board { width:min(650px,calc(100% - 52px)); aspect-ratio:1.22; align-self:center; justify-self:center; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:28px; background:linear-gradient(145deg,#cfb77f,#a98b51); border:1px solid var(--game-ink); box-shadow:12px 14px 0 var(--game-ink); }
.mole-board button { position:relative; min-width:0; min-height:0; padding:0; overflow:hidden; border:0; border-radius:50%; background:radial-gradient(ellipse at center,#17140e 0 44%,#806539 48% 61%,transparent 63%); box-shadow:none!important; transform:none!important; }
.mole-board button span { position:absolute; left:22%; right:22%; bottom:-65%; aspect-ratio:.83; background:radial-gradient(circle at 35% 28%,#f4dcab 0 5%,transparent 6%),radial-gradient(circle at 65% 28%,#f4dcab 0 5%,transparent 6%),linear-gradient(#8a5a35,#55311f); border-radius:48% 48% 35% 35%; transition:bottom .1s ease; box-shadow:inset 0 0 0 3px rgba(55,26,12,.25); }
.mole-board button span::after{content:"•ᴗ•";position:absolute;inset:30% 0 auto;text-align:center;color:#20140d;font:900 clamp(13px,2.5vw,25px) ui-monospace,monospace}.mole-board button.active span{bottom:10%}

@media (max-width:1120px) {
  .game-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .breakout-layout { grid-template-columns:1fr; padding-top:30px; }
  .breakout-layout aside { margin-top:30px; border-top:1px solid var(--game-ink); border-left:0; }
}
@media (max-width:980px) {
  .game-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-nav a:nth-child(n) { border-right:1px solid rgba(218,201,157,.19); border-bottom:1px solid rgba(218,201,157,.19); }
  .tetris-layout,.gomoku-layout,.lights-layout,.fifteen-layout { grid-template-columns:1fr; padding-top:32px; }
  .tetris-layout aside,.gomoku-layout aside,.lights-layout aside,.fifteen-layout aside { margin-top:32px; border-top:1px solid var(--game-ink); border-left:0; }
  .arcade-hero::after { display:none; }
  .pong-layout,.connect-layout,.maze-layout,.simon-layout,.mole-layout { grid-template-columns:1fr; padding-top:32px; }
  .pong-layout aside,.connect-layout aside,.maze-layout aside,.simon-layout aside,.mole-layout aside { margin-top:32px; border-top:1px solid var(--game-ink); border-left:0; }
}
@media (max-width:680px) {
  .game-main { width:min(100% - 20px,1320px); }
  .arcade-hero { min-height:0; padding:38px 20px 48px; }
  .arcade-hero h1 { font-size:64px; }
  .game-library { padding:18px 12px; }
  .library-heading { align-items:stretch; flex-direction:column; }
  .library-actions { flex-direction:column; }
  .library-actions label { min-width:0; }
  .game-categories { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .game-categories button { flex:none; }
  .game-nav { grid-template-columns:1fr; }
  .game-nav a { min-height:112px; }
  .game-cover { width:64px; height:82px; }
  #tetris-canvas { width:min(270px,calc(100vw - 66px)); height:auto; }
  .tetris-layout aside,.breakout-layout aside,.gomoku-layout aside,.lights-layout aside,.fifteen-layout aside { padding:30px 20px; }
  #breakout-canvas { width:calc(100% - 24px); box-shadow:5px 6px 0 var(--game-ink); }
  .gomoku-board,.lights-board,.fifteen-board { width:calc(100% - 28px); padding:10px; box-shadow:6px 7px 0 var(--game-ink); }
  .gomoku-board { padding:3.125%; background-size:6.25% 6.25%,6.25% 6.25%,auto; background-position:6.25% 6.25%,6.25% 6.25%,0 0; }
  .lights-board { gap:6px; }
  .fifteen-board { gap:6px; }
  .pong-layout aside,.connect-layout aside,.maze-layout aside,.simon-layout aside,.mole-layout aside { padding:30px 20px; }
  #pong-canvas,#maze-canvas,.connect-board,.simon-board,.mole-board { width:calc(100% - 26px); box-shadow:6px 7px 0 var(--game-ink); }
  .connect-board { gap:5px; padding:10px; }
  .simon-board { gap:8px; padding:14px; }
  .mole-board { gap:12px; padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .game-nav a,.gomoku-board button::after { transition:none; }
  .lights-board button.light-hint { animation:none; outline:4px solid rgba(217,95,76,.6); }
}