/* 小忧的游戏角 · game.imxiaoyou.online
   同一个世界的第三个房间：木桌、暖灯、旧纸、暗金 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#17110b; --bg2:#20170e; --card:#241a10;
  --wood:#8b5e3c; --wood-2:#5e3d22; --line:#3a2b1c;
  --ink:#eadcc6; --ink-soft:#a8907a; --faint:#6f5c48;
  --gold:#d2a15e; --gold-2:#e8c078;
  --tile-2:#3a2b1c; --tile-4:#4a361f; --tile-8:#8a5a2a; --tile-16:#a8663a;
  --tile-32:#c97a4a; --tile-64:#d98d5a; --tile-128:#c9a25a; --tile-256:#d4b068;
  --tile-512:#dfbe78; --tile-1024:#e9cc8a; --tile-2048:#f2d99b;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:Georgia,"Noto Serif SC",serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:
    radial-gradient(ellipse 120% 80% at 20% 0%,rgba(210,161,94,.10),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  background-attachment:fixed;
  color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
[hidden]{display:none !important}

/* 顶栏 */
.top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:0 max(14px,4vw);height:52px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif);font-size:1rem;font-weight:600;letter-spacing:.06em;color:var(--gold);display:flex;gap:.4em;align-items:center}
.brand::before{content:"🎮";font-size:.9em;font-family:var(--sans)}
.top-links{margin-left:auto;display:flex;gap:.3rem;flex-wrap:wrap}
.top-links a{font-size:.8rem;color:var(--ink-soft);padding:.35em .8em;border-radius:2em;transition:.18s}
.top-links a:hover{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}

.wrap{max-width:820px;margin:0 auto;padding:clamp(20px,4vw,40px) max(14px,4vw) 80px}
.h1{font-family:var(--serif);font-size:clamp(1.4rem,5vw,2rem);font-weight:600;letter-spacing:.04em}
.sub{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem}

/* 游戏列表 */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px;margin-top:28px}
.gcard{
  display:block;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:20px 18px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;
}
.gcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent)}
.gcard-emoji{font-size:1.9rem;line-height:1;display:block;margin-bottom:.6rem}
.gcard h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:.25rem}
.gcard p{font-size:.78rem;color:var(--faint)}
.gcard .tag{position:absolute;top:14px;right:14px;font-size:.65rem;letter-spacing:.1em;
  color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:2em;padding:.15em .6em}
.gcard.soon{opacity:.5;pointer-events:none}
.gcard.soon::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,transparent 0 8px,rgba(255,255,255,.015) 8px 9px)}

/* 2048 面板 */
.panel{margin-top:22px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.score{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 16px;text-align:center;min-width:86px}
.score b{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--faint);font-weight:400}
.score span{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--gold-2);font-variant-numeric:tabular-nums}
.bar .sp{flex:1}
.btn{
  font:inherit;font-size:.84rem;cursor:pointer;border-radius:10px;padding:.6em 1.3em;
  background:linear-gradient(160deg,var(--wood),var(--wood-2));color:#f4e7d2;border:1px solid #43290f;
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,220,160,.25);
  transition:transform .15s,filter .15s;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-soft);box-shadow:none}
.btn.ghost:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* 棋盘 */
.board-wrap{position:relative;width:min(100%,440px);margin:0 auto}
.board{
  position:relative;width:100%;aspect-ratio:1;border-radius:14px;
  background:linear-gradient(160deg,#2e2114,#20170e);
  border:1px solid var(--line);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  padding:calc(100% / 4 * 0.035);
  --gap:2.2%;
  touch-action:none;user-select:none;
}
.cell{
  position:absolute;border-radius:9px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.03);
}
.tile{
  position:absolute;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;color:#f7ecd8;
  transition:transform .12s ease-in-out;
  will-change:transform;z-index:2;
  box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16);
}
.tile.new{animation:pop .16s ease-out}
.tile.merged{animation:bump .18s ease-out}
@keyframes pop{from{transform:var(--tf) scale(.35)}}
@keyframes bump{50%{transform:var(--tf) scale(1.12)}}
.t-2{background:var(--tile-2);color:#c9b79c}
.t-4{background:var(--tile-4)}
.t-8{background:var(--tile-8)}
.t-16{background:var(--tile-16)}
.t-32{background:var(--tile-32)}
.t-64{background:var(--tile-64)}
.t-128{background:var(--tile-128);color:#2a1d0c;font-size:.8em}
.t-256{background:var(--tile-256);color:#2a1d0c;font-size:.8em}
.t-512{background:var(--tile-512);color:#2a1d0c;font-size:.8em}
.t-1024{background:var(--tile-1024);color:#2a1d0c;font-size:.68em}
.t-2048{background:var(--tile-2048);color:#2a1d0c;font-size:.68em;
  box-shadow:0 0 22px color-mix(in srgb,var(--gold-2) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.t-big{background:linear-gradient(160deg,#f2d99b,#d2a15e);color:#2a1d0c;font-size:.6em}

/* 遮罩 */
.over{
  position:absolute;inset:0;z-index:10;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,#17110b 84%,transparent);backdrop-filter:blur(3px);
  animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}}
.over h3{font-family:var(--serif);font-size:1.5rem;color:var(--gold-2);letter-spacing:.08em}
.over p{font-size:.82rem;color:var(--ink-soft);text-align:center;padding:0 20px}
.over .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.hint{margin-top:20px;font-size:.78rem;color:var(--faint);text-align:center;line-height:1.9}
kbd{font-family:var(--sans);font-size:.72rem;background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:.1em .45em;color:var(--ink-soft)}

.foot{margin-top:44px;text-align:center;font-size:.74rem;color:var(--faint);font-family:var(--serif);font-style:italic}

@media (max-width:520px){
  .score{min-width:74px;padding:6px 12px}
  .btn{padding:.55em 1em;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .tile{transition:none}
}

/* ── 自动开关（开着时呼吸一下）── */
.auto-btn.on{
  background:linear-gradient(160deg,var(--gold-2),var(--gold));
  color:#2a1d0c;border-color:#8a6a2a;
  box-shadow:0 0 16px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
  animation:auto-pulse 1.6s ease-in-out infinite;
}
@keyframes auto-pulse{
  0%,100%{box-shadow:0 0 12px color-mix(in srgb,var(--gold) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
  50%    {box-shadow:0 0 22px color-mix(in srgb,var(--gold) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
}
@media (prefers-reduced-motion:reduce){ .auto-btn.on{animation:none} }

/* ── canvas 游戏（贪吃蛇 / 五子棋）── */
.cv{display:block;width:100%;height:auto;border-radius:14px;background:#20170e;
  border:1px solid var(--line);box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  touch-action:none;user-select:none}

/* ── 数独 ── */
.sd-wrap{width:min(100%,470px);margin:0 auto;position:relative}
.sd{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:#2a1d10;border:2px solid var(--wood);box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4)}
.sdc{font:inherit;font-family:var(--serif);font-size:clamp(.85rem,3.4vw,1.15rem);font-weight:600;
  background:rgba(255,255,255,.028);border:0;border-right:1px solid rgba(210,161,94,.14);border-bottom:1px solid rgba(210,161,94,.14);
  color:var(--gold-2);cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center}
.sdc:hover{background:rgba(210,161,94,.10)}
.sdc.fixed{color:var(--ink);background:rgba(255,255,255,.05);cursor:default}
.sdc.mine{color:var(--gold)}
.sdc.sel{background:color-mix(in srgb,var(--gold) 26%,transparent);box-shadow:inset 0 0 0 2px var(--gold)}
.sdc.br{border-right:2px solid var(--wood)}
.sdc.bb{border-bottom:2px solid var(--wood)}
.sd-win{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.3rem;color:var(--gold-2);
  background:color-mix(in srgb,#17110b 78%,transparent);border-radius:10px;animation:fade .3s ease}

.pad{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;width:min(100%,470px);margin:14px auto 0}
.pn{font:inherit;font-family:var(--serif);font-size:clamp(.8rem,3vw,1rem);font-weight:600;
  aspect-ratio:1;border-radius:8px;cursor:pointer;color:var(--gold-2);
  background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);
  transition:transform .12s,background .15s}
.pn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--gold) 16%,var(--card))}
.pn:active{transform:translateY(0)}
.pn.clr{color:var(--ink-soft);font-size:.9rem}