:root{--edge: #140e12;--ink: #f4e8d0;--dim: rgba(244, 232, 208, .62);--panel-bg: #1c1310;--wood: #3a2618;--line: rgba(244, 216, 160, .2);--accent: #ffcf6a;--red: #d8452e;--px: 3px;--panel: 80px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--edge);color:var(--ink);font-family:VT323,ui-monospace,monospace;overflow:hidden;transition:background-color 1s ease;-webkit-font-smoothing:none;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit}#app{position:fixed;inset:0;overflow:hidden}[hidden]{display:none!important}.stage{position:absolute;overflow:hidden;background:#000}.stage canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;-webkit-tap-highlight-color:transparent}.speech{position:absolute;max-width:62%;text-align:center;font-size:calc(var(--px) * 9);line-height:.95;pointer-events:auto;cursor:pointer;text-shadow:calc(var(--px) * -.4) 0 0 #000,calc(var(--px) * .4) 0 0 #000,0 calc(var(--px) * -.4) 0 #000,0 calc(var(--px) * .4) 0 #000,calc(var(--px) * .4) calc(var(--px) * .4) 0 #000,calc(var(--px) * -.4) calc(var(--px) * .4) 0 #000,0 calc(var(--px) * .8) 0 rgba(0,0,0,.6);padding:0 4px}.caption{position:absolute;left:8%;right:8%;top:calc(var(--px) * 6);text-align:center;font-size:calc(var(--px) * 8.5);line-height:1;padding:calc(var(--px) * 3) calc(var(--px) * 5);background:#0e0908db;border:1px solid var(--line);box-shadow:0 0 0 calc(var(--px) * .6) #00000080;cursor:pointer}.hover{position:absolute;pointer-events:none;white-space:nowrap;font-size:calc(var(--px) * 7.5);color:#fff6d8;padding:0 calc(var(--px) * 2);background:#0a0606b8;border-radius:2px}.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--px) * 3);text-align:center;cursor:pointer;animation:cardin 1.2s ease both}.card .c1{font-family:Silkscreen,VT323,monospace;color:var(--accent);font-size:calc(var(--px) * 7);letter-spacing:.2em;text-transform:uppercase}.card .c2{font-size:calc(var(--px) * 20);line-height:.9}.card .c3{color:var(--dim);font-size:calc(var(--px) * 8)}@keyframes cardin{0%{opacity:0;transform:translateY(8px)}}.toast{position:absolute;left:50%;bottom:calc(var(--px) * 6);transform:translate(-50%);font-size:calc(var(--px) * 7.5);padding:calc(var(--px) * 1.2) calc(var(--px) * 5);background:#140c08e6;border:1px solid var(--accent);color:var(--accent);pointer-events:none;white-space:nowrap}.toast.show{animation:toast 2.2s ease both}@keyframes toast{0%{opacity:0;transform:translate(-50%,6px)}10%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}.panel{position:absolute;display:flex;gap:8px;align-items:stretch;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 23px),linear-gradient(#3a2618,#24170f);border-top:3px solid #120b08;box-shadow:inset 0 2px #ffdca01f}.panel.busy .inv{opacity:.55}.inv{flex:1;display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;align-items:center;padding:2px;scrollbar-width:thin}.slot{flex:0 0 auto;height:calc(var(--panel) - 20px);aspect-ratio:1;max-height:72px;padding:4px;border:2px solid #120b08;background:#4a3222;box-shadow:inset 0 0 0 2px #ffdca014;cursor:pointer;transition:transform .12s}.slot canvas{width:100%;height:100%;display:block;image-rendering:pixelated;pointer-events:none}.slot:hover{background:#5e402a}.slot.sel{border-color:var(--accent);background:#6a4a2a;transform:translateY(-2px)}.slot.fresh{animation:fresh 1s ease}@keyframes fresh{0%{transform:scale(1.35);border-color:var(--accent)}}.side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:2px;min-width:0}.plabel{font-size:19px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;min-height:1em;line-height:1}.btns{display:flex;gap:4px}.btn{width:38px;height:34px;display:grid;place-items:center;border:2px solid #120b08;background:#4a3222;cursor:pointer;padding:0}.btn svg{width:18px;height:18px}.btn:hover,.btn.on{background:#6a4a2a;color:var(--accent)}.choices{flex:1;display:flex;flex-direction:column;gap:1px;overflow-y:auto;justify-content:center}.panel.choosing{height:auto!important;min-height:var(--panel)}.choice{text-align:left;background:none;border:none;font-size:21px;line-height:1.05;padding:2px 6px;cursor:pointer;color:#e8d0a0}.choice .n{color:var(--dim);margin-right:8px}.choice:hover{color:#fff;background:#ffcf6a1f}.modal{position:fixed;inset:0;display:grid;place-items:center;background:#08050499;z-index:10;padding:16px}.sheet{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:22px 26px;background:#22170f;border:3px solid #120b08;box-shadow:inset 0 0 0 2px #ffdca01f,0 12px 40px #0009;font-size:22px;line-height:1.1}.sheet h2{margin:0 0 12px;font-family:Silkscreen,monospace;font-weight:400;font-size:22px;color:var(--accent)}.sheet .close{position:absolute;top:10px;right:10px}.sheet.paper{background:#efe0bc;color:#3a2616;border-color:#8a6a3a;width:min(620px,100%);transform:rotate(-.6deg);cursor:pointer}.doc h3{margin:0 0 10px;font-family:Silkscreen,monospace;font-weight:400;font-size:17px;color:#6a3a1a}.doc p{margin:0;white-space:pre-line;font-size:25px;line-height:1.12}.doc .tap{margin-top:14px;text-align:right;font-size:17px;color:#8a6a4a}.wide{display:block;width:100%;text-align:left;padding:7px 12px;margin:6px 0;background:#3a2618;border:2px solid #120b08;box-shadow:inset 0 0 0 1px #ffdca01a;font-size:23px;cursor:pointer}.wide:hover:not(:disabled){background:#5a3c24;color:var(--accent)}.wide:disabled{opacity:.4;cursor:default}.wide.primary{border-color:var(--accent);color:var(--accent)}.wide small{display:block;font-size:17px;color:var(--dim)}.jhead .k{font-family:Silkscreen,monospace;font-size:13px;color:var(--dim);letter-spacing:.15em;text-transform:uppercase}.jhead h2{margin:2px 0 0}.jhead .place{color:var(--dim);margin-bottom:12px}.objs{list-style:none;padding:0;margin:0 0 14px}.objs li{display:flex;gap:10px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--line)}.objs .box{width:14px;height:14px;border:2px solid var(--dim);flex:0 0 auto}.objs li.done{color:var(--dim);text-decoration:line-through}.objs li.done .box{background:var(--accent);border-color:var(--accent)}.jfoot{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--dim);font-size:19px}.jfoot b{color:var(--accent);font-weight:400}.goal{color:var(--dim);margin-bottom:8px}.hint{margin:8px 0;padding-left:10px;border-left:3px solid var(--accent)}.hint.t2{border-color:var(--red)}.slots{display:flex;flex-direction:column;gap:6px}.slotrow{display:flex;gap:12px;align-items:center;padding:6px;background:#3a2618;border:2px solid #120b08;cursor:pointer;text-align:left}.slotrow:hover:not(:disabled){background:#5a3c24}.slotrow:disabled{opacity:.4;cursor:default}.slotrow .thumb{width:112px;aspect-ratio:16 / 9;background:#120b08;flex:0 0 auto}.slotrow .thumb img{width:100%;height:100%;image-rendering:pixelated;display:block}.slotrow .meta{display:flex;flex-direction:column;font-size:18px;color:var(--dim)}.slotrow .meta b{font-weight:400;font-size:22px;color:var(--ink)}.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border-bottom:1px dashed var(--line)}.row input[type=range]{width:50%;accent-color:var(--accent)}.row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.seg{display:flex}.seg button{background:#3a2618;border:2px solid #120b08;padding:2px 10px;cursor:pointer}.seg button.on{color:#1a100a;background:var(--accent)}.help{padding-left:18px;margin:0 0 10px}.help li{margin-bottom:6px}.help b{color:var(--accent);font-weight:400}.title-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:16px;background:radial-gradient(ellipse at 50% 40%,#0a06041a,#0a0604a6);z-index:5}.logo{text-align:center;text-shadow:0 3px 0 #1a0c06,0 0 24px rgba(0,0,0,.6)}.logo .pre{font-family:Silkscreen,monospace;font-size:clamp(12px,1.6vw,18px);letter-spacing:.25em;color:#ffe6b0;text-transform:uppercase}.logo h1{margin:6px 0 0;font-family:Silkscreen,monospace;font-weight:700;font-size:clamp(30px,6.5vw,76px);line-height:.95;color:var(--accent);display:flex;flex-direction:column;align-items:center}.logo h1 span{font-family:VT323,monospace;font-weight:400;font-size:.45em;color:#ffe6b0;margin:2px 0}.menu-list{width:min(340px,100%)}.title-screen .wide{background:#22160ee6;text-align:center}.made,.roll a{color:#ffe6b0;font-size:18px;opacity:.8}.credits{position:fixed;inset:0;display:grid;place-items:center;z-index:6;padding:16px;background:linear-gradient(transparent 40%,#0a0604b3)}.roll{text-align:center;max-width:640px;font-size:22px;text-shadow:0 2px 0 #000;animation:cardin 2s ease both}.roll .k{font-family:Silkscreen,monospace;color:var(--accent);letter-spacing:.25em;text-transform:uppercase}.roll h2{font-family:Silkscreen,monospace;font-size:clamp(24px,4vw,44px);margin:6px 0 14px;color:var(--accent)}.roll b{color:var(--accent);font-weight:400}.roll .cast{color:#f4e8d0;font-size:19px}.roll .wide{text-align:center;width:260px;margin:14px auto 0}@media(max-width:640px){.plabel{display:none}.btn{width:34px;height:30px}.choice{font-size:18px}}.rotate{position:fixed;left:0;right:0;top:0;z-index:20;display:grid;place-items:center;padding:18px 16px;text-align:center;font-size:22px;color:var(--accent);background:#140c08eb;border-bottom:2px solid #120b08}.rotate small{display:block;font-size:16px;color:var(--dim)}@media(orientation:portrait){.slot{max-height:54px}}
