/* 駅名の漢字／図鑑の単語 共用版面：背景＋立繪（左下）＋右側舞台（主畫面）＋底部對話框。手機：立繪縮到左下角、舞台吃滿。 */
:root{--ink:#262a40;--muted:#6b6f88;--sakura:#e0718b;--ok:#3f9a6a;--ng:#d0574e;--paper:#fffdf8;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#1b1c30;color:#fff;font-family:"Noto Sans TC",sans-serif;-webkit-tap-highlight-color:transparent}
.bg{position:fixed;inset:0;background:#2b2d48 center/cover;filter:brightness(.62) saturate(.9)}
.sprite{position:fixed;left:2vw;bottom:0;height:min(88vh,980px);pointer-events:none;transition:transform .25s}
.sprite img{height:100%;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.sprite.hop{animation:hop .45s}
.sprite.shake{animation:shake .45s}
@keyframes hop{30%{transform:translateY(-18px)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.puff{position:fixed;left:calc(2vw + min(30vh,330px));bottom:min(70vh,780px);font-size:56px;opacity:0;transition:opacity .2s;pointer-events:none}
.puff.on{opacity:1}
.top{position:fixed;left:16px;right:16px;top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:3}
.top a,.top button{font:inherit;font-size:15px;color:#fff;text-decoration:none;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.4);border-radius:999px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;cursor:pointer}
.top .title{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:clamp(20px,2.2vw,28px);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.stage{position:fixed;left:max(36vw,420px);right:3vw;top:72px;bottom:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:2}
.dlg{position:fixed;left:max(36vw,420px);right:3vw;bottom:20px;min-height:110px;background:rgba(255,253,248,.95);color:var(--ink);border-radius:18px;padding:14px 20px;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dlg .who{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;color:var(--sakura);font-size:15px}
.dlg p{margin:4px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.6}
.dlg .ja{font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
.dlg .zh{color:var(--muted);font-size:15px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:min(720px,100%)}
.opt{font:inherit;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:clamp(20px,1.8vw,26px);color:var(--ink);background:var(--paper);border:3px solid transparent;border-radius:16px;min-height:64px;padding:8px 12px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.opt:hover{border-color:var(--sakura)}
.opt.ok{background:#dff3e7;border-color:var(--ok)}
.opt.ng{background:#f8dedb;border-color:var(--ng);animation:shake .4s}
.opt small{display:block;font-family:"Noto Sans TC",sans-serif;font-weight:400;font-size:14px;color:var(--muted)}
.btn{font:inherit;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:20px;color:#fff;background:var(--sakura);border:0;border-radius:999px;min-height:56px;padding:0 36px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5)}
.credit{position:fixed;right:12px;bottom:4px;font-size:11px;opacity:.6;z-index:1}
#mute{width:44px;padding:0;justify-content:center}
@media (max-width:760px){
  .sprite{left:-6vw;height:46vh;bottom:0;opacity:.95}
  .puff{left:24vw;bottom:38vh;font-size:40px}
  .stage{left:16px;right:16px;top:68px;bottom:auto;height:calc(100% - 68px - 190px)}
  .dlg{left:34vw;right:12px;bottom:14px;min-height:96px;padding:10px 14px}
  .dlg p{font-size:16px}
}