:root{--bg:#efe6d0;--fg:#2b2218;--btn:#5b3f8c;--btnfg:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14101c;--fg:#e9dfc9;--btn:#7a5cc0}}
:root[data-theme="dark"]{--bg:#14101c;--fg:#e9dfc9;--btn:#7a5cc0}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}
h1{font-size:15px;margin:0;letter-spacing:.5px}
#w{position:relative;width:max-content;border:4px solid #000;border-radius:6px;box-shadow:0 0 0 3px var(--btn),0 6px 18px rgba(0,0,0,.45)}
canvas{display:block;width:320px;height:240px;image-rendering:pixelated;background:#000}
#w::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.11) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35))}
#dlg{position:absolute;left:3%;right:3%;bottom:3%;z-index:2;background:linear-gradient(#3248c8,#16205f);border:3px solid #fff;outline:3px solid #000;border-radius:4px;box-shadow:inset 0 0 0 2px #1a2680;color:#fff;padding:14px 14px 9px;font:700 var(--fs,14px)/1.45 "Courier New",ui-monospace,monospace;text-shadow:1px 1px #000;min-height:3.4em}
#dlg[hidden],#bn[hidden]{display:none}#bn{position:absolute;top:13%;left:50%;transform:translateX(-50%);z-index:2;background:#000b;color:#ffd84a;border:2px solid #fff;border-radius:4px;padding:2px 10px;font-size:calc(var(--fs,14px)*.85);white-space:nowrap}
#nm{position:absolute;left:10px;top:-14px;background:#ffd84a;color:#2a1a00;text-shadow:none;border:2px solid #000;border-radius:3px;padding:0 8px;font-size:.82em;line-height:1.45}
#dlg i{visibility:hidden}#dlg.done i{visibility:visible}#dlg i{position:absolute;right:8px;bottom:2px;font-style:normal;animation:b .6s steps(2) infinite}
@keyframes b{50%{transform:translateY(3px)}}
#pad{display:flex;justify-content:space-between;align-items:center;width:min(96vw,640px)}
#dp{display:grid;grid-template:repeat(3,48px)/repeat(3,48px);gap:2px}
button{background:var(--btn);color:var(--btnfg);border:3px solid #000;border-radius:8px;padding:0;display:flex;align-items:center;justify-content:center;font:700 24px "Courier New",ui-monospace,monospace;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(0,0,0,.35)}button img{width:20px;height:20px;pointer-events:none}
button:active{filter:brightness(1.25);transform:translateY(2px)}
#a{width:72px;height:72px;border-radius:50%;background:#c43a3a;color:#fff;font-size:26px}
#au{width:62px;height:46px;border-radius:12px;background:#2f8f4a;color:#fff;font-size:14px}
small{opacity:.7;font-size:11px;text-align:center;line-height:1.4;padding:0 6px}
#hud{position:absolute;top:3%;left:3%;right:3%;z-index:2;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font:700 calc(var(--fs,14px)*.8) "Courier New",ui-monospace,monospace;color:#fff;text-shadow:1px 1px #000}
#hud img{margin-right:3px;filter:drop-shadow(1px 1px 0 #000)}
#go{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(20,0,0,.72);color:#fff;font:700 var(--fs,14px) "Courier New",ui-monospace,monospace;text-shadow:1px 1px #000;text-align:center}
#go b{font-size:1.9em;color:#e83a3a;letter-spacing:2px}
#go[hidden]{display:none}

/* ---- book sheet ---- */
:root{--sh-bg:#f8f1dc;--sh-fg:#2b2218;--sh-mut:#7a6a52;--sh-line:rgba(43,34,24,.18);--sh-chip:#e9dcf7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sh-bg:#211a2f;--sh-fg:#efe6d0;--sh-mut:#a99dbd;--sh-line:rgba(239,230,208,.16);--sh-chip:#3a2d57}}
:root[data-theme="dark"]{--sh-bg:#211a2f;--sh-fg:#efe6d0;--sh-mut:#a99dbd;--sh-line:rgba(239,230,208,.16);--sh-chip:#3a2d57}
#sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(8,5,16,.75)}
#sheet[hidden]{display:none}
.sh-card{width:min(100%,560px);max-height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:var(--sh-bg);color:var(--sh-fg);border:4px solid #000;border-radius:8px;box-shadow:0 0 0 3px var(--btn),0 14px 36px rgba(0,0,0,.55);animation:shin .18s ease-out}
@keyframes shin{from{transform:translateY(24px) scale(.97);opacity:0}}
.sh-head{flex:none;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--btn);color:#fff;border-bottom:4px solid #000}
#sh-av{flex:none;width:56px;height:56px;image-rendering:pixelated;background:rgba(0,0,0,.25);border:3px solid #000;border-radius:6px}
.sh-ttl{flex:1;min-width:0}
.sh-t{font:700 18px/1.25 "Courier New",ui-monospace,monospace;overflow-wrap:anywhere}
.sh-ttl p{margin:3px 0 0;font-size:13px;opacity:.85}
.sh-ttl p[hidden]{display:none}
.sh-x{flex:none;width:40px;height:40px;background:#c43a3a}
.sh-x img{width:16px;height:16px}
.sh-body{overflow-y:auto;padding:4px 16px 18px;font-size:15px;line-height:1.65;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
.sh-sec{padding:14px 0 4px}
.sh-sec+.sh-sec{border-top:2px dashed var(--sh-line)}
.sh-sec h3{margin:0 0 10px;font:700 13px "Courier New",ui-monospace,monospace;letter-spacing:.5px;color:var(--btn)}
.sh-sec h3::before{content:"$ ";opacity:.7}
.sh-sec p{margin:0 0 10px}
.sh-sec a{color:var(--btn);text-underline-offset:3px}
.sh-sec dl{margin:0 0 6px;display:grid;grid-template-columns:minmax(84px,30%) 1fr;column-gap:12px}
.sh-sec dt,.sh-sec dd{margin:0;padding:7px 0;border-bottom:1px solid var(--sh-line)}
.sh-sec dt{color:var(--sh-mut);font-size:13px}
.sh-sec dd{font-weight:600;overflow-wrap:anywhere}
.sh-sec dl>:nth-last-child(-n+2){border-bottom:0}
.sh-sec ul{margin:0 0 6px;padding:0;list-style:none}
.sh-sec li{position:relative;padding:3px 0 3px 18px}
.sh-sec li::before{content:"";position:absolute;left:3px;top:.8em;width:6px;height:6px;background:var(--btn)}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:8px}
.tags span{background:var(--sh-chip);border:2px solid #000;border-radius:4px;padding:1px 9px;font:700 13px/1.6 "Courier New",ui-monospace,monospace}
.sh-msg{margin:14px 0 0}
.sh-msg.sm{font-size:13px;color:var(--sh-mut)}

.sh-back{width:auto;height:auto;margin:12px 0 0;padding:3px 12px;border-radius:6px;font-size:13px}
.lnks,.cards{display:grid;gap:10px;padding-bottom:8px}
.lnk,.card{display:block;text-decoration:none;color:var(--sh-fg);background:var(--sh-chip);border:2px solid #000;border-radius:6px;padding:9px 12px;box-shadow:0 3px 0 rgba(0,0,0,.35);outline-offset:2px}
.lnk b,.card b{display:block;font:700 14px/1.4 "Courier New",ui-monospace,monospace;overflow-wrap:anywhere}
.lnk span,.card p{display:block;margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--sh-mut)}
.card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.card:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.card.off{opacity:.65;cursor:default}
.card .ch{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card em{flex:none;font:700 11px "Courier New",ui-monospace,monospace;font-style:normal;background:var(--btn);color:#fff;border-radius:4px;padding:0 7px}
.card p.sm{font-size:12px}

#menu-btn{position:fixed;z-index:5;top:calc(env(safe-area-inset-top,0px) + 8px);right:8px;width:auto;height:30px;padding:0 10px;border-radius:6px;font-size:12px;letter-spacing:.5px}
#start,#howto{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(8,5,16,.8)}
#start[hidden],#howto[hidden]{display:none}
.st-card{width:min(100%,400px);text-align:center;background:var(--sh-bg);color:var(--sh-fg);border:4px solid #000;border-radius:8px;box-shadow:0 0 0 3px var(--btn),0 14px 36px rgba(0,0,0,.55);padding:22px 20px 18px;animation:shin .18s ease-out}
.st-card h2{margin:0 0 6px;font:700 20px/1.3 "Courier New",ui-monospace,monospace}
.st-card p{margin:0 0 18px;color:var(--sh-mut);font-size:14px}
#st-av{display:block;margin:0 auto 10px;width:72px;height:72px;image-rendering:pixelated;background:rgba(0,0,0,.25);border:3px solid #000;border-radius:8px;box-shadow:0 0 0 3px #ffd84a}
.st-card p.st-intro{margin:2px 0 12px;padding-bottom:12px;border-bottom:2px dashed var(--sh-line);color:var(--sh-fg);font-size:14px;font-weight:600}
.st-card p.st-ask{margin:0 0 16px}
#st-play{width:100%;height:68px;border-radius:12px;background:#c43a3a;font-size:20px;letter-spacing:.5px}
#st-quick{display:inline-block;margin-top:16px;padding:6px 8px;color:var(--sh-mut);font-size:14px;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
#au{margin-left:auto;margin-right:12px}
.hw{list-style:none;margin:0 0 18px;padding:0;text-align:left}
.hw li{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--sh-line);font-size:14px}
.hw li:last-child{border-bottom:0}
.hw b{font:700 12px/1.6 "Courier New",ui-monospace,monospace;background:var(--sh-chip);border:2px solid #000;border-radius:4px;padding:0 8px}
.hw span{font-weight:600;text-align:right}
#hw-ok{width:100%;height:56px;border-radius:12px;background:#2f8f4a;font-size:18px;letter-spacing:.5px}

.lnk.ico{display:flex;align-items:center;gap:10px}
.lnk.ico img{flex:none;width:28px;height:28px;border-radius:5px;image-rendering:auto}
.lnk.ico .lt{min-width:0}