:root{--paper:#f7f4ed;--ink:#28332f;--muted:#77776f;--forest:#356d62;--brass:#9a7541;--line:#dcd5c9;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,Noto Sans TC,Yu Gothic UI,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--paper);min-width:320px}body{min-width:320px;min-height:100vh;margin:0}button,a{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1180px,100% - 40px);margin:0 auto;padding-bottom:40px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:82px;display:flex}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand-mark{background:var(--forest);color:#fffaf2;border-radius:12px;place-items:center;width:39px;height:39px;font-family:Yu Mincho,Noto Serif CJK TC,serif;font-size:18px;display:grid}.brand strong,.brand small{display:block}.brand strong{color:var(--ink);letter-spacing:.06em;font-size:18px}.brand small{color:var(--muted);margin-top:2px;font-size:11px}.presence{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:8px;font-size:12px;display:flex}.presence span{background:#66a980;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #66a98021}.intro{justify-content:space-between;align-items:end;padding:42px 0 24px;display:flex}.eyebrow{color:var(--brass);letter-spacing:.2em;margin:0 0 8px;font-size:10px;font-weight:700}.intro h1{color:var(--ink);letter-spacing:-.03em;margin:0 0 8px;font-family:Iowan Old Style,Yu Mincho,Georgia,serif;font-size:clamp(36px,5vw,58px);font-weight:500}.intro>div>p:last-child{color:var(--muted);font-size:14px}.controls-hint{color:var(--muted);align-items:center;gap:12px;font-size:12px;display:flex}.key-grid{grid-template-columns:repeat(3,22px);gap:2px;width:70px;display:grid}kbd{color:#5d5a54;background:#fffdf8;border:1px solid #cdc6ba;border-bottom-width:2px;border-radius:4px;place-items:center;height:20px;font:10px/1 system-ui,sans-serif;display:grid}.game-card{border:1px solid var(--line);background:#e5ded2;border-radius:22px;position:relative;overflow:hidden;box-shadow:0 26px 80px #2c302a1f}.game-canvas{aspect-ratio:16/9;width:100%}.game-canvas canvas{display:block;width:100%!important;height:100%!important}.encounter-panel{box-sizing:border-box;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffdf8f0;border:1px solid #ffffffb3;border-radius:18px;width:min(310px,100% - 44px);padding:20px;transition:opacity .25s,transform .25s;position:absolute;bottom:22px;right:22px;transform:translateY(14px);box-shadow:0 18px 60px #2b302a40}.encounter-panel.is-visible{opacity:1;pointer-events:auto;transform:none}.encounter-panel h2{color:var(--ink);margin:0 0 7px;font:500 23px/1.2 Iowan Old Style,Georgia,serif}.encounter-panel>p:not(.eyebrow){color:var(--muted);margin:0;font-size:13px;line-height:1.55}.encounter-panel small{color:#888179;margin-top:11px;font-size:10px;display:block}.encounter-actions{gap:8px;margin-top:16px;display:flex}.encounter-actions button{appearance:none;cursor:pointer;border-radius:10px;padding:10px 15px;font:600 12px/1 system-ui,sans-serif}.primary-action{border:1px solid var(--forest);background:var(--forest);color:#fff}.quiet-action{border:1px solid var(--line);color:var(--muted);background:0 0}.encounter-actions button:focus-visible{outline-offset:2px;outline:3px solid #356d623d}footer{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;padding:18px 2px 0;font-size:10px;display:flex}footer p{margin:0}@media (width<=700px){.app-shell{width:min(100% - 22px,1180px)}.topbar{min-height:68px}.presence{font-size:9px}.intro{align-items:start;padding-top:28px}.controls-hint{display:none}.game-card{border-radius:15px}.encounter-panel{width:calc(100% - 20px);padding:14px;bottom:10px;right:10px}footer{gap:12px}footer p{text-align:right}}