/*
 * style.css — 小忧的游戏角 / game.imxiaoyou.online
 * 作者：achou（为小忧）
 * 主题：一间有人待着的小游戏室 —— 旧木色 × 台灯暖光 × 桌游贴纸质感
 * 与图书室同一套木色，但更「玩」一点
 */
:root{
  --wood-dark:#3b2a1a; --wood-mid:#6b4226; --wood-warm:#8b5e3c; --wood-light:#c49a6c; --wood-grain:#b07d4a;
  --paper-cream:#f5edd8; --paper-warm:#ede0c4; --paper-aged:#d6c5a0; --paper-shadow:#c8b48a;
  --lamp-core:#fff8e8; --lamp-mid:#fef3d0; --lamp-edge:#f5e8bc;
  --ink-dark:#2a1e0e; --ink-mid:#5a3e28; --ink-light:#8b6645; --ink-faint:#b0926a;
  --gold:#c8952a; --gold-light:#e8b84b; --gold-pale:#f5dfa0;
  --t2:#f0e8d0; --t2-text:#7a5c3a; --t4:#e8d8b0; --t4-text:#6b4e2a; --t8:#d4a86a; --t8-text:#f5edd8;
  --t16:#c8844a; --t16-text:#f5edd8; --t32:#c06030; --t32-text:#fef3d0; --t64:#b04020; --t64-text:#fef3d0;
  --t128:#a03060; --t128-text:#fef3d0; --t256:#8020a0; --t256-text:#fce8ff; --t512:#5028b0; --t512-text:#e8e0ff;
  --t1024:#2040c0; --t1024-text:#dce8ff; --t2048:#1060e0; --t2048-text:#ffffff;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:Georgia,"Noto Serif SC",serif;
  --shadow-card:0 4px 16px rgba(42,20,8,.18),0 1px 4px rgba(42,20,8,.12);
  --shadow-lift:0 12px 32px rgba(42,20,8,.28),0 3px 8px rgba(42,20,8,.18);
  --shadow-inset:inset 0 2px 8px rgba(42,20,8,.22),inset 0 1px 3px rgba(42,20,8,.15);
  --shadow-btn:0 3px 0 0 var(--wood-dark),0 4px 8px rgba(42,20,8,.25);
  --shadow-btn-press:0 1px 0 0 var(--wood-dark),0 1px 3px rgba(42,20,8,.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);color:var(--ink-dark);min-height:100vh;background-attachment:fixed;
  background-color:var(--wood-dark);
  background-image:
    repeating-linear-gradient(87deg,transparent 0 18px,rgba(255,255,255,.018) 18px 19px),
    repeating-linear-gradient(92deg,transparent 0 34px,rgba(0,0,0,.04) 34px 35px),
    linear-gradient(180deg,#3b2a1a 0%,#4a3220 40%,#3e2b1b 100%);
}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-light)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:var(--r-sm)}

.top{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:16px;padding:12px 24px;
  background:linear-gradient(180deg,rgba(42,20,8,.96) 0%,rgba(42,20,8,.88) 100%);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(200,149,42,.25);box-shadow:0 2px 16px rgba(0,0,0,.35)}
.brand{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--gold-light);letter-spacing:.03em;
  text-shadow:0 1px 8px rgba(232,184,75,.4);white-space:nowrap}
.top-links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.top-links a{font-size:.82rem;color:var(--paper-aged);padding:4px 10px;border-radius:var(--r-sm);
  border:1px solid rgba(200,149,42,.2);transition:all .2s;white-space:nowrap}
.top-links a:hover{color:var(--gold-light);background:rgba(200,149,42,.12);border-color:rgba(200,149,42,.45)}

.wrap{max-width:860px;margin:0 auto;padding:40px 20px 60px;position:relative}
.wrap::before{content:'';position:fixed;top:0;left:50%;transform:translateX(-50%);width:700px;height:500px;
  background:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(255,245,200,.12) 0%,rgba(255,235,160,.06) 35%,transparent 70%);
  pointer-events:none;z-index:0}
.h1{font-family:var(--font-serif);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--lamp-core);text-align:center;
  letter-spacing:.04em;margin-bottom:10px;text-shadow:0 2px 20px rgba(255,245,200,.35),0 1px 4px rgba(0,0,0,.4);
  position:relative;z-index:1}
.sub{text-align:center;color:var(--paper-aged);font-size:.95rem;margin-bottom:36px;opacity:.85;line-height:1.7;position:relative;z-index:1}

.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px;position:relative;z-index:1}
.gcard{display:flex;flex-direction:column;align-items:center;padding:24px 16px 20px;border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--lamp-core) 0%,var(--paper-cream) 40%,var(--paper-warm) 100%);
  border:1px solid rgba(176,125,74,.35);box-shadow:var(--shadow-card);color:var(--ink-dark);text-decoration:none;
  cursor:pointer;position:relative;overflow:hidden;outline:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
.gcard::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,transparent 50%);pointer-events:none}
.gcard::after{content:'';position:absolute;bottom:0;left:4px;right:4px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(107,66,38,.35),transparent);border-radius:0 0 var(--r-lg) var(--r-lg)}
.gcard:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:var(--shadow-lift)}
.gcard:active{transform:translateY(-2px) rotate(0deg);box-shadow:var(--shadow-card)}
.gcard:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.tag{position:absolute;top:10px;right:10px;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:20px;
  background:var(--gold);color:var(--lamp-core);letter-spacing:.05em;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.gcard-emoji{font-size:2.8rem;line-height:1;margin-bottom:12px;display:block;
  filter:drop-shadow(0 3px 6px rgba(42,20,8,.25));transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.gcard:hover .gcard-emoji{transform:scale(1.12) rotate(3deg)}
.gcard h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;margin-bottom:6px;letter-spacing:.02em}
.gcard p{font-size:.8rem;color:var(--ink-mid);text-align:center;line-height:1.5}
.foot{text-align:center;color:var(--ink-faint);font-size:.8rem;margin-top:40px;opacity:.7;position:relative;z-index:1}

section.panel{position:relative;z-index:1;max-width:560px;margin:0 auto;
  background:linear-gradient(155deg,rgba(245,237,216,.06) 0%,rgba(245,237,216,.02) 100%);
  border-radius:var(--r-xl);padding:28px 20px 24px}
.bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sp{flex:1}

.score{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:6px 14px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--wood-mid) 0%,var(--wood-dark) 100%);
  border:1px solid var(--wood-light);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(196,154,108,.3);
  position:relative;overflow:hidden}
.score::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,154,108,.6),transparent)}
.score b{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--wood-light);opacity:.8}
.score span{font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:var(--gold-light);line-height:1.1;
  text-shadow:0 1px 8px rgba(232,184,75,.5)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 16px;font-family:var(--font-sans);
  font-size:.82rem;font-weight:600;cursor:pointer;border:none;border-radius:var(--r-md);letter-spacing:.03em;
  white-space:nowrap;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.3);
  background:linear-gradient(160deg,var(--wood-warm) 0%,var(--wood-mid) 100%);
  color:var(--paper-cream);box-shadow:var(--shadow-btn);transition:transform .1s,box-shadow .1s,background .2s}
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}
.btn:hover{background:linear-gradient(160deg,var(--wood-light) 0%,var(--wood-warm) 100%);transform:translateY(-1px);
  box-shadow:0 4px 1px 0 var(--wood-dark),0 5px 10px rgba(42,20,8,.3)}
.btn:active{transform:translateY(2px);box-shadow:var(--shadow-btn-press)}
.btn.ghost{background:transparent;color:var(--paper-aged);box-shadow:none;
  border:1.5px solid rgba(196,154,108,.45);text-shadow:none}
.btn.ghost::before{display:none}
.btn.ghost:hover{background:rgba(196,154,108,.12);color:var(--paper-cream);border-color:rgba(196,154,108,.7);
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(42,20,8,.2)}
.btn.ghost:active{transform:translateY(1px);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.auto-btn.on{background:linear-gradient(160deg,#c8952a 0%,#9a6c18 100%);color:var(--lamp-core);
  box-shadow:0 3px 0 0 #5a3a08,0 4px 8px rgba(200,149,42,.35),0 0 18px rgba(200,149,42,.3);
  animation:lamp-breathe 2.4s ease-in-out infinite}
@keyframes lamp-breathe{
  0%,100%{box-shadow:0 3px 0 0 #5a3a08,0 4px 8px rgba(200,149,42,.35),0 0 18px rgba(200,149,42,.3)}
  50%{box-shadow:0 3px 0 0 #5a3a08,0 6px 16px rgba(200,149,42,.55),0 0 32px rgba(232,184,75,.45)}
}

/* ★ 集成修正（小忧补）：2048 棋盘必须【有确定尺寸】—— JS 用 board.clientWidth 算格子
   否则 inline-block + 无宽高 → clientWidth 可能为 0 → 棋盘塌掉 */
.board-wrap{position:relative;display:block;width:min(100%,468px);margin:0 auto;border-radius:var(--r-lg);padding:10px;
  background:linear-gradient(145deg,var(--wood-mid) 0%,var(--wood-dark) 50%,var(--wood-mid) 100%);
  border:1px solid var(--wood-light);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(196,154,108,.3),inset 0 -1px 0 rgba(0,0,0,.2)}
.board-wrap::before{content:'';position:absolute;top:0;left:10%;right:10%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(196,154,108,.6),transparent)}
.board{width:100%;aspect-ratio:1;border-radius:var(--r-md);background:var(--wood-dark);
  box-shadow:var(--shadow-inset);position:relative;overflow:hidden}
.cell{position:absolute;border-radius:var(--r-sm);background:linear-gradient(145deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.15) 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 1px 2px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.15)}
.tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  font-family:var(--font-serif);font-weight:700;user-select:none;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 3px 8px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.15);transition:background-color .12s ease;will-change:transform}
.tile.new{animation:tile-pop .18s cubic-bezier(.34,1.56,.64,1) both}
.tile.merged{animation:tile-bump .15s cubic-bezier(.34,1.56,.64,1) both;z-index:2}
@keyframes tile-pop{from{opacity:0}to{opacity:1}}
@keyframes tile-bump{50%{filter:brightness(1.15)}}
.tile.t-2{background:var(--t2);color:var(--t2-text);box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5)}
.tile.t-4{background:var(--t4);color:var(--t4-text);box-shadow:0 2px 6px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.4)}
.tile.t-8{background:var(--t8);color:var(--t8-text);box-shadow:0 3px 8px rgba(180,90,30,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.tile.t-16{background:var(--t16);color:var(--t16-text);box-shadow:0 3px 10px rgba(160,70,20,.35)}
.tile.t-32{background:var(--t32);color:var(--t32-text);box-shadow:0 4px 12px rgba(140,50,15,.4)}
.tile.t-64{background:var(--t64);color:var(--t64-text);box-shadow:0 4px 14px rgba(120,30,8,.45)}
.tile.t-128{background:var(--t128);color:var(--t128-text);box-shadow:0 4px 16px rgba(100,20,60,.45)}
.tile.t-256{background:var(--t256);color:var(--t256-text);box-shadow:0 5px 18px rgba(80,10,120,.5)}
.tile.t-512{background:var(--t512);color:var(--t512-text);box-shadow:0 5px 20px rgba(50,20,140,.55)}
.tile.t-1024{background:var(--t1024);color:var(--t1024-text);box-shadow:0 6px 22px rgba(20,40,160,.55),inset 0 1px 0 rgba(255,255,255,.15)}
.tile.t-2048{background:linear-gradient(135deg,#1a80ff 0%,#005ce6 50%,#0040c0 100%);color:#fff;z-index:5;
  box-shadow:0 0 0 2px rgba(100,180,255,.5),0 6px 24px rgba(20,80,200,.7),0 0 40px rgba(80,160,255,.55),0 0 80px rgba(40,120,255,.3),inset 0 1px 0 rgba(255,255,255,.3);
  animation:tile-glow 1.8s ease-in-out infinite}
@keyframes tile-glow{
  0%,100%{box-shadow:0 0 0 2px rgba(100,180,255,.5),0 6px 24px rgba(20,80,200,.7),0 0 40px rgba(80,160,255,.55),0 0 80px rgba(40,120,255,.3),inset 0 1px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 0 0 3px rgba(120,200,255,.7),0 8px 30px rgba(20,80,200,.85),0 0 60px rgba(100,180,255,.7),0 0 110px rgba(60,140,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}}
.tile.t-big{background:linear-gradient(135deg,#ff6b6b 0%,#c0392b 50%,#8e1010 100%);color:#fff5e8;z-index:5;
  box-shadow:0 0 0 2px rgba(255,150,100,.5),0 6px 24px rgba(180,30,20,.65),0 0 40px rgba(255,100,80,.4),inset 0 1px 0 rgba(255,255,255,.2);
  animation:tile-glow-big 2s ease-in-out infinite}
@keyframes tile-glow-big{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

.over{position:absolute;inset:0;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;z-index:10;backdrop-filter:blur(3px);
  background:linear-gradient(160deg,rgba(42,20,8,.88) 0%,rgba(58,30,12,.92) 100%)}
.over h3{font-family:var(--font-serif);font-size:1.5rem;color:var(--gold-light);
  text-shadow:0 2px 12px rgba(232,184,75,.5);letter-spacing:.05em}
.over p{font-size:.9rem;color:var(--paper-aged);opacity:.85}
.over .row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center}

.cv{display:block;max-width:100%;height:auto;border-radius:var(--r-md);border:3px solid var(--wood-mid);
  background:var(--wood-dark);box-shadow:0 0 0 1px var(--wood-light),0 8px 28px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3),var(--shadow-inset)}
.board-wrap:has(.cv){width:min(100%,480px);padding:12px;
  background:linear-gradient(145deg,var(--wood-mid) 0%,var(--wood-dark) 50%,var(--wood-warm) 100%)}
.board-wrap:has(.cv)::before{display:none}

.sd-wrap{position:relative;display:block;width:min(100%,470px);margin:0 auto;padding:10px;border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--lamp-core) 0%,var(--paper-cream) 100%);
  border:1px solid var(--paper-shadow);box-shadow:0 6px 24px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.7)}
.sd{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:2.5px solid var(--ink-mid);
  border-radius:var(--r-sm);overflow:hidden;background:var(--paper-cream)}
.sdc{font-family:var(--font-serif);font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:400;background:transparent;
  border:.5px solid rgba(90,62,40,.2);cursor:pointer;color:var(--ink-mid);transition:background .15s,color .15s;
  min-width:0;padding:0;line-height:1;position:relative;display:flex;align-items:center;justify-content:center}
.sdc.br{border-right:2px solid var(--ink-mid)}
.sdc.bb{border-bottom:2px solid var(--ink-mid)}
.sdc.fixed{font-weight:700;color:var(--ink-dark);background:rgba(196,154,108,.1);cursor:default}
.sdc.mine{color:var(--wood-mid);font-weight:600}
.sdc.sel{background:rgba(200,149,42,.18);color:var(--gold);box-shadow:inset 0 0 0 2px rgba(200,149,42,.5);z-index:1}
.sdc:hover:not(.fixed){background:rgba(200,149,42,.1)}
.sd-win{position:absolute;inset:0;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;z-index:20;backdrop-filter:blur(2px);
  background:linear-gradient(160deg,rgba(245,237,216,.95) 0%,rgba(237,224,196,.97) 100%);
  font-family:var(--font-serif);font-size:1.4rem;color:var(--gold);text-shadow:0 1px 8px rgba(200,149,42,.3)}
.pad{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;width:min(100%,470px);margin:16px auto 0}
.pn{aspect-ratio:1;font-family:var(--font-serif);font-size:clamp(.95rem,3vw,1.1rem);font-weight:600;
  border-radius:var(--r-md);cursor:pointer;color:var(--ink-dark);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--paper-warm) 0%,var(--paper-aged) 100%);
  border:1px solid var(--paper-shadow);box-shadow:0 2px 0 0 var(--paper-shadow),0 3px 6px rgba(0,0,0,.12);
  transition:transform .1s,box-shadow .1s,background .15s}
.pn:hover{background:linear-gradient(160deg,var(--lamp-core) 0%,var(--paper-warm) 100%);transform:translateY(-2px);
  box-shadow:0 3px 0 0 var(--paper-shadow),0 5px 10px rgba(0,0,0,.15)}
.pn:active{transform:translateY(1px);box-shadow:0 1px 0 0 var(--paper-shadow),0 1px 3px rgba(0,0,0,.1)}
.pn.clr{font-family:var(--font-sans);background:linear-gradient(160deg,rgba(176,125,74,.25) 0%,rgba(139,94,60,.2) 100%);
  color:var(--wood-mid);border-color:rgba(176,125,74,.4)}

.hint{font-size:.8rem;color:var(--ink-faint);text-align:center;margin-top:10px;line-height:1.6;position:relative;z-index:1}
kbd{display:inline-block;padding:1px 6px;border-radius:4px;font-family:var(--font-sans);font-size:.75rem;font-weight:600;
  background:var(--paper-warm);border:1px solid var(--paper-shadow);border-bottom-width:2px;color:var(--ink-mid);
  box-shadow:0 1px 0 var(--paper-shadow);white-space:nowrap}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--wood-dark)}
::-webkit-scrollbar-thumb{background:var(--wood-mid);border-radius:4px;border:2px solid var(--wood-dark)}
::-webkit-scrollbar-thumb:hover{background:var(--wood-warm)}
::selection{background:rgba(200,149,42,.3);color:var(--ink-dark)}

@media (max-width:640px){
  .wrap{padding:24px 12px 40px}
  .top{padding:10px 14px}
  .brand{font-size:.95rem}
  .top-links a{font-size:.75rem;padding:3px 7px}
  .h1{font-size:1.5rem}
  .games{grid-template-columns:repeat(2,1fr);gap:14px}
  .gcard{padding:16px 10px 14px}
  .gcard-emoji{font-size:2.2rem;margin-bottom:8px}
  .gcard h3{font-size:.95rem}
  .gcard p{font-size:.74rem}
  .bar{gap:6px}
  .btn{padding:6px 11px;font-size:.78rem}
  .score{min-width:60px;padding:5px 10px}
  .score span{font-size:1.1rem}
  .cv{width:100% !important;height:auto !important}
  .board-wrap,.sd-wrap{width:100%}
  .pad{gap:5px}
  section.panel{padding:18px 10px 16px}
}
@media (max-width:380px){
  .games{gap:10px}
  .gcard-emoji{font-size:1.8rem}
  .pn{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}