/* ── WODETIANNA · 街机外壳 ─────────────────────────────────────
   自适应的框：顶部品牌条、中间整块画布（等比 contain）、底部触控键。
   canvas 由游戏脚本注入 body，靠 grid-row 定位，不依赖 DOM 顺序。 */

:root{
  --paper:#FAF9F6; --paper-2:#F2F0EA; --ink:#141317; --ink-soft:#56545E; --ink-faint:#6E6C76;
  --line:#E4E0D6; --signal:#E8451B; --mono:ui-monospace,"SF Mono",JetBrains Mono,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --bar:48px; --pad-h:0px;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#0E0D12;--paper-2:#16151B;--ink:#F1EEE8;--ink-soft:#A9A5AE;--ink-faint:#8A8792;
    --line:#272430;--signal:#FF6B3D;}
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);
  font:14px/1.5 var(--sans);-webkit-text-size-adjust:100%}
body{
  display:grid;
  grid-template-rows:var(--bar) minmax(0,1fr) auto;
  height:100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--signal) 7%, transparent), transparent 60%),
    var(--paper);
}

/* 顶部条 */
.wb-bar{
  grid-row:1; display:flex; align-items:center; gap:.55rem;
  padding:0 clamp(12px,3vw,22px);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  backdrop-filter:saturate(1.2) blur(6px);
  font:11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.wb-brand{color:var(--ink);font-weight:700}
.wb-sep{color:var(--line)}
.wb-title{color:var(--ink-soft)}
.wb-bar .wb-link{
  margin-left:auto; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:2px; padding:7px 10px;
  transition:color .18s,border-color .18s;
}
.wb-bar .wb-link:hover,.wb-bar .wb-link:focus-visible{color:var(--signal);border-color:var(--signal);outline:none}

/* 画布：填满中间格，等比 contain，不做插值 */
body > canvas{
  grid-row:2;
  place-self:center;
  width:auto; height:auto;
  max-width:min(100%, 1220px);
  max-height:100%;
  aspect-ratio:762/720;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#0b0b0e;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.55);
  touch-action:none;
}

/* 底部：桌面显示快捷键，触屏显示按键 */
.wb-foot{
  grid-row:3; display:flex; align-items:center; gap:.5rem;
  padding:10px clamp(12px,3vw,22px) calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  font:11px/1.4 var(--mono); color:var(--ink-faint);
}
.wb-keys{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
kbd{font:inherit;background:var(--paper-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:2px;padding:3px 6px;color:var(--ink-soft)}
.wb-note{margin-left:auto;white-space:nowrap}

/* 触控键 */
.wb-pad{display:none}
@media (hover:none) and (pointer:coarse){
  .wb-keys{display:none}
  .wb-note{margin-left:0}
  .wb-pad{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:6px clamp(10px,3vw,20px) calc(14px + env(safe-area-inset-bottom,0px));
    grid-row:3;
  }
  .wb-foot{display:none}
  .wb-dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:4px}
  .wb-btn{
    display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;
    background:var(--paper-2);color:var(--ink-soft);font:16px/1 var(--mono);
    user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
    touch-action:none;transition:transform .06s,background .12s,color .12s;
  }
  .wb-btn:active,.wb-btn.on{background:var(--signal);border-color:var(--signal);color:#fff;transform:scale(.96)}
  .wb-ab{display:flex;gap:12px;align-items:center}
  .wb-ab .wb-btn{width:66px;height:66px;border-radius:50%;font-size:13px;letter-spacing:.04em}
  .wb-btn--up{grid-area:1/2}
  .wb-btn--left{grid-area:2/1}
  .wb-btn--right{grid-area:2/3}
  .wb-btn--down{grid-area:3/2}
}
@media (hover:none) and (pointer:coarse) and (min-width:520px){
  .wb-dpad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px)}
  .wb-ab .wb-btn{width:74px;height:74px}
}

/* 横屏手机：按键浮在画面两侧，不再占布局高度 */
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  :root{--bar:36px}
  .wb-bar{font-size:10px;padding:0 12px}
  .wb-bar .wb-link{padding:5px 8px}
  body{grid-template-rows:var(--bar) minmax(0,1fr)}
  body > canvas{border:0}
  .wb-pad{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:0 calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));
    pointer-events:none; background:transparent; border:0; z-index:5;
  }
  .wb-dpad{pointer-events:auto; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,48px); opacity:.92}
  .wb-ab{pointer-events:auto; opacity:.92}
  .wb-ab .wb-btn{width:60px;height:60px}
  .wb-btn{background:color-mix(in srgb, var(--paper-2) 78%, transparent); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}

/* ── 游戏大厅 ───────────────────────────────────────────── */
body.lobby{display:block;overflow:auto;height:auto;min-height:100dvh}
.lobby .wb-bar{position:sticky;top:0;z-index:20;height:var(--bar)}
.lobby-main{max-width:1120px;margin:0 auto;padding:clamp(28px,6vw,64px) clamp(16px,4vw,28px) 80px}
.lobby-head{max-width:640px;margin:0 0 clamp(24px,4vw,40px)}
.lobby-kicker{font:11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.lobby-title{margin:0;font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.25;letter-spacing:-.01em;font-weight:650}
.lobby-sub{margin:12px 0 0;color:var(--ink-soft);font-size:clamp(.92rem,2.4vw,1rem);line-height:1.7}
.grid{display:grid;gap:clamp(14px,2.2vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper-2);
  padding:clamp(18px,3vw,24px);text-decoration:none;color:inherit;
  transition:transform .18s var(--ease,cubic-bezier(.2,.7,.3,1)),border-color .18s,box-shadow .18s;
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 65%);
  transition:opacity .18s;
}
.card:hover,.card:focus-visible{border-color:var(--signal);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(0,0,0,.5);outline:none}
.card:hover::after,.card:focus-visible::after{opacity:1}
.card-art{
  height:96px;border-radius:6px;border:1px solid var(--line);
  background:var(--paper);display:grid;place-items:center;
  font:600 26px/1 var(--mono);letter-spacing:.04em;color:var(--ink-soft);
  overflow:hidden;position:relative;
}
.card-art span{position:relative;z-index:1}
.card-art::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--line) 60%, transparent) 7px 8px);}
.card-art--mario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(#E8451B22,#E8451B44);border-top:1px solid color-mix(in srgb, var(--signal) 35%, transparent)}
.card-art--sudoku::after{content:"";position:absolute;inset:18px;
  background:
    linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--ink) 22%, transparent) 32% 34%, transparent 34% 65%, color-mix(in srgb, var(--ink) 22%, transparent) 65% 67%, transparent 67%),
    linear-gradient(0deg, transparent 32%, color-mix(in srgb, var(--ink) 22%, transparent) 32% 34%, transparent 34% 65%, color-mix(in srgb, var(--ink) 22%, transparent) 65% 67%, transparent 67%);
}
.card-art--cart::after{content:"";position:absolute;left:50%;top:26px;width:46px;height:34px;transform:translateX(-50%);
  border:2px solid color-mix(in srgb, var(--ink) 30%, transparent);border-radius:4px}
.card-title{margin:0;font-size:1.06rem;font-weight:640;letter-spacing:-.005em}
.card-desc{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.65}
.card-meta{margin-top:auto;display:flex;align-items:center;gap:.5rem;font:11px/1 var(--mono);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.card-go{margin-left:auto;color:var(--signal)}
.lobby-foot{margin-top:clamp(28px,5vw,48px);font:12px/1.7 var(--mono);color:var(--ink-faint)}