:root{--bg:#121014;--panel:#1d1a1e;--iron:#4a4449;--iron-light:#6b6369;--text:#cfc6b4;--muted:#8a8174;--accent:#a3412f;--error:#d0705c;--font:"VT323", ui-monospace, monospace;--iron-dark:#2a2529;--gold:#e8c070;--party:#5f8a4a;--foe:#a3412f;--hp-foe:#8a2e22;--shadow:#000;--touch:44px;--fs-xs:14px;--fs-s:16px;--fs-m:20px;--fs-l:24px;--fs-xl:32px;--top-h:48px;--strip-h:52px;--gap:6px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);font-size:var(--fs-m);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:none;margin:0;line-height:1.15;overflow:hidden}#game{touch-action:none;position:fixed;inset:0}.hud,.chip,#party .member,#preview-sheet,#sheet .panel,#combat-log .toggle,#combat-log.open .lines{border-style:solid;border-color:var(--iron-light) var(--iron) var(--iron) var(--iron-light)}.hud{background:linear-gradient(var(--panel), #161317);pointer-events:auto;z-index:1;border-width:0;align-items:center;gap:10px;padding:0 10px;display:flex;position:fixed;left:0;right:0}.hud-top{height:calc(var(--top-h) + var(--safe-top));padding-top:var(--safe-top);border-bottom:3px solid var(--iron);box-shadow:0 2px 0 var(--shadow);flex-wrap:nowrap;justify-content:space-between;top:0}.hud-bottom{min-height:calc(36px + var(--safe-bottom));padding-bottom:var(--safe-bottom);border-top:3px solid var(--iron);box-shadow:0 -2px 0 var(--shadow);color:var(--muted);font-size:var(--fs-s);justify-content:space-between;bottom:0}.title{font-size:var(--fs-l);letter-spacing:2px;color:var(--accent);text-shadow:2px 2px 0 var(--shadow);flex:none}nav{scrollbar-width:none;flex-wrap:nowrap;gap:4px;min-width:0;display:flex;overflow-x:auto}nav::-webkit-scrollbar{display:none}nav button{min-height:36px;font-size:var(--fs-s);flex:none}button{font:inherit;color:var(--text);background:var(--iron-dark);border:2px solid var(--iron);border-top-color:var(--iron-light);border-left-color:var(--iron-light);cursor:pointer;min-height:var(--touch);min-width:var(--touch);touch-action:manipulation;padding:2px 10px}button:hover{background:#352f34}button:active{border-color:var(--iron);border-bottom-color:var(--iron-light);border-right-color:var(--iron-light);background:#1f1b1f}button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}button:disabled{cursor:default}#message{color:var(--text);text-align:right}#message.error{color:var(--error)}#combat[hidden]{display:none}#initiative-wrap{z-index:2;top:calc(var(--top-h) + var(--safe-top) + var(--gap));height:var(--strip-h);pointer-events:none;align-items:center;gap:6px;display:flex;position:fixed;left:6px;right:6px}#round{color:var(--gold);font-size:var(--fs-s);text-shadow:1px 1px 0 var(--shadow);writing-mode:vertical-rl;letter-spacing:1px;flex:none;transform:rotate(180deg)}#initiative{pointer-events:auto;scrollbar-width:none;gap:4px;min-width:0;padding:2px 4px 4px 2px;display:flex;overflow-x:auto}#initiative::-webkit-scrollbar{display:none}.chip{min-height:var(--touch);min-width:0;font:inherit;font-size:var(--fs-s);text-align:left;color:var(--text);cursor:pointer;background:var(--panel);box-shadow:2px 2px 0 var(--shadow);border-width:2px;flex:none;grid-template-rows:1fr auto;grid-template-columns:32px auto;align-items:center;column-gap:5px;padding:2px 6px 2px 2px;line-height:1;display:grid;position:relative}.chip canvas.portrait{background:#0e0c0f;grid-row:1/3;width:32px;height:32px}.chip .name{text-overflow:ellipsis;white-space:nowrap;max-width:9ch;overflow:hidden}.chip .hp{background:var(--shadow);height:4px;margin-top:3px;display:block}.chip .hp i{background:var(--party);height:100%;display:block}.chip{border-bottom:3px solid var(--party)}.chip.foe{border-bottom-color:var(--foe)}.chip.foe .name{color:#e0a090}.chip.foe .hp i{background:var(--hp-foe)}.chip.active{border-color:var(--gold);border-bottom-color:var(--gold);box-shadow:0 0 0 1px var(--shadow), 0 0 8px #e8c0708c}.chip.down{opacity:.45}.chip.down .name{text-decoration:line-through}.chip.down canvas.portrait{filter:grayscale()brightness(.6)}#party{z-index:2;left:6px;top:calc(var(--top-h) + var(--safe-top) + var(--gap));flex-direction:column;gap:4px;display:flex;position:fixed}body:has(#combat:not([hidden])) #party{top:calc(var(--top-h) + var(--safe-top) + var(--strip-h) + 2 * var(--gap))}#party .member{background:var(--panel);width:52px;min-width:0;height:60px;min-height:0;box-shadow:2px 2px 0 var(--shadow);border-width:2px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;display:flex;position:relative}#party .member canvas{background:#0e0c0f}#party .member.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--shadow), 0 0 8px #e8c0708c}#party .member.down canvas{filter:grayscale()brightness(.5)}#party .hp,#sheet .hp{background:var(--shadow);width:40px;height:4px;display:block}#party .hp i{background:var(--party);height:100%;display:block}canvas.portrait{image-rendering:pixelated;display:block}#combat-log{z-index:2;left:66px;right:8px;top:calc(var(--top-h) + var(--safe-top) + var(--strip-h) + 2 * var(--gap));font-size:var(--fs-s);color:var(--muted);text-shadow:1px 1px 0 var(--shadow);pointer-events:none;align-items:flex-start;gap:4px;display:flex;position:fixed}#combat-log .toggle{pointer-events:auto;min-height:40px;min-width:var(--touch);font-size:var(--fs-s);background:#1d1a1ee6;border-width:2px;flex:none;padding:0 6px}#combat-log .lines{min-width:0;max-width:520px;padding-top:6px;overflow:hidden}#combat-log:not(.open) .lines p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#combat-log.open{flex-direction:column}#combat-log.open .lines{pointer-events:auto;max-height:30vh;box-shadow:2px 2px 0 var(--shadow);background:#120f13eb;border-width:2px;width:min(520px,100%);padding:4px 8px;overflow-y:auto}#combat-log p{margin:0;line-height:1.1}#combat-log.open p+p{margin-top:2px}#sheet[hidden]{display:none}#sheet{z-index:5;background:#060508bf;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}#sheet .panel{background:var(--panel);width:min(460px,100%);max-height:calc(100% - 24px);box-shadow:4px 4px 0 var(--shadow);border-width:3px;flex-direction:column;display:flex}#sheet header{border-bottom:2px solid var(--iron);align-items:center;gap:10px;padding:8px 10px;display:flex}#sheet header canvas{border:2px solid var(--iron);background:#0e0c0f;flex:none}#sheet header div{flex:1;min-width:0}#sheet h2{font-weight:400;font-size:var(--fs-xl);color:var(--accent);text-shadow:2px 2px 0 var(--shadow);margin:0;line-height:1}#sheet .subtitle{color:var(--muted);font-size:var(--fs-s);margin:2px 0 0}#sheet .close{flex:none}#sheet .body{padding:4px 12px 10px;overflow-y:auto}#sheet h3{font-weight:400;font-size:var(--fs-m);color:var(--gold);border-bottom:1px solid var(--iron);margin:10px 0 2px}#sheet dl{grid-template-columns:1fr auto;align-items:center;gap:0 12px;margin:2px 0;display:grid}#sheet dt{color:var(--muted)}#sheet dd{text-align:right;margin:0}#sheet .explain,#preview-sheet .explain{color:var(--text);border-left:2px solid var(--gold);font-size:var(--fs-s);background:#0e0c0f;grid-column:1/-1;margin:2px 0 4px;padding:4px 6px}#sheet .help,#preview-sheet .help{min-width:28px;min-height:28px;font-size:var(--fs-xs);vertical-align:middle;padding:0 6px}#sheet .item{margin:6px 0}#sheet .item strong{color:var(--text);font-weight:400}#sheet .item p{color:var(--muted);font-size:var(--fs-s);margin:0;line-height:1.15}#credits[hidden]{display:none}#credits{z-index:7;background:#060508d9;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}#credits .panel{background:var(--panel);width:min(640px,100%);max-height:calc(100% - 24px);box-shadow:4px 4px 0 var(--shadow);border-width:3px;flex-direction:column;display:flex}#credits header{border-bottom:2px solid var(--iron);justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;display:flex}#credits h2{font-weight:400;font-size:var(--fs-xl);color:var(--accent);text-shadow:2px 2px 0 var(--shadow);margin:0;line-height:1}#credits .close{flex:none}#credits .body{font-size:var(--fs-s);padding:4px 12px 14px;line-height:1.3;overflow-y:auto}#credits .body h2{font-size:var(--fs-l);margin:14px 0 4px}#credits .body h2:first-child{margin-top:0}#credits .body h3{font-weight:400;font-size:var(--fs-m);color:var(--gold);border-bottom:1px solid var(--iron);margin:10px 0 2px}#credits .body p{color:var(--text);margin:4px 0}#credits .body code{background:#0e0c0f;border-radius:2px;padding:0 3px}#credits .body a{color:var(--accent);word-break:break-all}#credits .credits-table{flex-direction:column;gap:6px;margin:6px 0;display:flex}#credits .credits-row{border-left:2px solid var(--iron-light);background:#0e0c0f;grid-template-columns:auto 1fr;gap:2px 8px;margin:0;padding:6px 8px;display:grid}#credits .credits-row dt{color:var(--muted);font-size:var(--fs-xs)}#credits .credits-row dd{word-break:break-word;margin:0 0 4px}#action-bar{z-index:2;left:0;right:0;bottom:calc(36px + 3px + var(--safe-bottom));background:linear-gradient(#0000,#0a080cf0 22px);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:22px 8px 6px;display:grid;position:fixed}#action-bar .card{flex-wrap:wrap;grid-column:1;align-items:baseline;gap:2px 8px;min-width:0;display:flex}#action-bar .card strong{color:var(--text);font-size:var(--fs-l);text-shadow:2px 2px 0 var(--shadow);font-weight:400}#action-bar .hpnum{color:#9fc28a}#action-bar .pip{color:#3a3438;font-size:var(--fs-m)}#action-bar .pip.on{color:var(--gold);text-shadow:0 0 4px #e8c07099}#action-bar .move{color:var(--muted)}#action-bar .end-turn{background:#3a2222;border-color:#7a4a3a #4a2a22 #4a2a22 #7a4a3a;grid-area:1/2}#action-bar .actions{grid-column:1/-1;grid-auto-flow:column;grid-template-rows:repeat(2, var(--touch));scrollbar-width:thin;grid-auto-columns:max-content;gap:4px;padding-bottom:2px;display:grid;overflow-x:auto}#action-bar .actions button{white-space:nowrap;font-size:var(--fs-m)}#action-bar button.bonus{border-color:#8a7240 #5a4a2a #5a4a2a #8a7240}#action-bar button.selected{border-color:var(--gold);background:#5a3a22}#action-bar button:disabled{opacity:.4}#action-bar .hint{color:var(--muted);font-size:var(--fs-s);flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:8px;display:flex}#action-bar .actions:not(:has(>:nth-child(7))){grid-template-rows:var(--touch)}#preview-sheet{z-index:3;left:50%;bottom:calc(224px + var(--safe-bottom));background:var(--panel);width:min(420px,100vw - 16px);max-height:calc(100vh - 280px);box-shadow:4px 4px 0 var(--shadow);border-width:3px;padding:8px 12px 10px;position:fixed;overflow-y:auto;transform:translate(-50%)}#preview-sheet h3{color:var(--accent);font-weight:400;font-size:var(--fs-l);margin:0 0 2px;line-height:1}#preview-sheet .big{font-size:var(--fs-xl);color:#f0dcb0;text-shadow:2px 2px 0 var(--shadow);line-height:1.1}#preview-sheet .desc{color:var(--muted);font-size:var(--fs-s);margin:4px 0}#preview-sheet .error{color:var(--error)}#preview-sheet dl{border-top:1px solid var(--iron);grid-template-columns:1fr auto;align-items:center;gap:0 12px;margin:6px 0;padding-top:4px;display:grid}#preview-sheet dt{color:var(--muted)}#preview-sheet dd{text-align:right;margin:0}#preview-sheet .buttons{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}#preview-sheet .buttons button{flex:1 1 0;max-width:180px}#preview-sheet .confirm{border-color:var(--gold);color:#f0dcb0;background:#5a3a22}.audio-controls{flex:none;position:relative}.audio-toggle{min-width:var(--touch);font-size:var(--fs-m);line-height:1}.audio-panel{background:var(--panel);border:2px solid var(--iron);border-top-color:var(--iron-light);border-left-color:var(--iron-light);box-shadow:2px 2px 0 var(--shadow);z-index:10;flex-direction:column;gap:8px;min-width:160px;padding:10px;display:flex;position:absolute;top:calc(100% + 4px);right:0}.audio-slider{font-size:var(--fs-s);justify-content:space-between;align-items:center;gap:8px;display:flex}.audio-slider input[type=range]{min-width:0;accent-color:var(--accent);flex:auto}.audio-mute{font-size:var(--fs-s);align-items:center;gap:6px;display:flex}@media (width<=560px){:root{--top-h:44px;--strip-h:48px}html,body{font-size:18px}.title{font-size:var(--fs-m);letter-spacing:1px}nav button{min-height:40px;padding:2px 6px}button{padding:2px 7px}#tile-info{display:none}.chip{grid-template-columns:32px;padding:2px}.chip .name{display:none}.chip .hp{grid-row:2}.chip canvas.portrait{grid-row:1}#combat-log{font-size:var(--fs-xs)}#action-bar .actions button{font-size:var(--fs-s)}}#dialogue[hidden]{display:none}#dialogue{z-index:6;padding:8px 8px calc(var(--bottom-h,40px) + var(--safe-bottom,0px) + 8px);background:#06050899;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}body:has(#combat:not([hidden])) #dialogue{padding-bottom:calc(var(--bottom-h,40px) + var(--safe-bottom,0px) + 200px)}#dialogue .panel{background:var(--panel);border:3px solid var(--iron);width:min(640px,100%);max-height:62vh;padding:10px 12px;overflow-y:auto;box-shadow:4px 4px #000}#dialogue .line{grid-template-columns:auto 1fr;align-items:start;gap:2px 10px;display:grid}#dialogue .line canvas{border:2px solid var(--iron);background:#0e0c0f;grid-row:span 2}#dialogue .line strong{color:var(--accent);font-size:22px;font-weight:400;line-height:1}#dialogue .line p{margin:0;font-size:20px;line-height:1.2}#dialogue .line.narration{display:block}#dialogue .line.narration p{color:var(--muted);font-style:italic}#dialogue .choices{flex-direction:column;gap:6px;margin-top:10px;display:flex}#dialogue .choices button{text-align:left;white-space:normal;min-height:44px;padding:4px 10px}#dialogue .choices button.check{border-color:#6b5a3a}#dialogue .choices button:disabled{opacity:.45}#dialogue .roll{color:var(--muted);background:#120f13;align-items:center;gap:10px;margin-bottom:8px;padding:4px 6px;font-size:16px;display:flex}#dialogue .roll .die{border:2px solid var(--iron);width:40px;height:40px;color:var(--text);background:#2a2529;flex:none;place-items:center;font-size:26px;animation:.5s steps(6,end) die-roll;display:grid}#dialogue .roll.success .die{color:#b8e09a;border-color:#5f8a4a}#dialogue .roll.failure .die{border-color:var(--accent);color:#e0a090}@keyframes die-roll{0%{transform:rotate(-200deg)scale(.6)}to{transform:rotate(0)scale(1)}}@media (prefers-reduced-motion:reduce){#dialogue .roll .die{animation:none}}.bark-bubble[hidden]{display:none}.bark-bubble{left:66px;top:calc(var(--top-h) + var(--safe-top) + var(--gap));z-index:3;background:var(--panel);border:2px solid var(--iron);border-top-color:var(--iron-light);border-left-color:var(--iron-light);max-width:min(260px,100% - 74px);box-shadow:3px 3px 0 var(--shadow);align-items:center;gap:8px;padding:6px 8px;display:flex;position:fixed}.bark-bubble canvas{background:#0e0c0f;flex:none}.bark-bubble p{font-size:var(--fs-s);margin:0;line-height:1.25}.tutorial-toast[hidden]{display:none}.tutorial-toast{top:calc(var(--top-h) + var(--safe-top) + 8px);z-index:5;background:var(--panel);border:3px solid var(--gold);align-items:flex-start;gap:10px;width:min(520px,100% - 16px);padding:10px 12px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:4px 4px #000}body:has(#combat:not([hidden])) .tutorial-toast{top:calc(var(--top-h) + var(--safe-top) + var(--strip-h) + 2 * var(--gap) + 100px)}@media (width<=560px){.tutorial-toast{width:auto;left:64px;right:8px;top:calc(var(--top-h) + var(--safe-top) + 64px);transform:none}}.tutorial-toast p{font-size:var(--fs-s);flex:auto;margin:0;line-height:1.3}.tutorial-toast .close{min-width:var(--touch);min-height:var(--touch);flex:none;line-height:1}.tutorial-toggle{font-size:var(--fs-s);flex:none;align-items:center;gap:4px;padding:0 4px;display:flex}#intro[hidden]{display:none}#intro{z-index:6;background:#060508f2;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#intro .panel{background:var(--panel);border:3px solid var(--iron);flex-direction:column;gap:12px;width:min(560px,100%);padding:14px 18px;display:flex;box-shadow:4px 4px #000}#intro h2{color:var(--accent);margin:0;font-size:32px;font-weight:400}#intro p{margin:0;font-size:22px;line-height:1.3}#intro .dots{color:var(--muted);text-align:center;letter-spacing:2px}#intro .confirm{align-self:flex-end;min-height:44px;padding:4px 16px;font-size:20px}#creation[hidden]{display:none}#creation{z-index:6;padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));background:#060508eb;justify-content:center;align-items:stretch;display:flex;position:fixed;inset:0}#creation .panel{background:var(--panel);border:3px solid var(--iron);width:min(560px,100%);padding:10px 14px;overflow-y:auto;box-shadow:4px 4px #000}#creation h2{color:var(--accent);margin:0 0 4px;font-size:32px;font-weight:400}#creation h3{color:#e8c070;border-bottom:1px solid var(--iron);margin:12px 0 4px;font-size:22px;font-weight:400}#creation input[type=text]{font:inherit;width:100%;min-height:44px;color:var(--text);border:2px solid var(--iron);background:#120f13;padding:2px 8px;font-size:22px}#creation .options{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;display:grid}#creation .option{text-align:left;white-space:normal;flex-direction:column;align-items:flex-start;min-height:44px;padding:6px 8px;display:flex}#creation .option strong{font-size:20px;font-weight:400}#creation .option span{color:var(--muted);font-size:15px;line-height:1.15}#creation .option.selected{border-color:var(--gold,#e8c070);background:#3a2a1e}#creation .help-text{color:var(--muted);margin:0 0 6px;font-size:16px}#creation .budget{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:20px;display:flex}#creation .stat{grid-template-columns:1fr 44px 32px 44px 1fr;align-items:center;gap:6px;margin:4px 0;display:grid}#creation .stat .value{text-align:center;font-size:22px}#creation .stat .final{color:var(--muted);text-align:right}#creation .stat button{min-height:40px;padding:0}#creation .buttons{justify-content:space-between;gap:8px;margin-top:14px;display:flex}#creation .buttons button{flex:1;min-height:48px;font-size:22px}#creation .buttons .confirm{background:#5a3a22;border-color:#e8c070}#title[hidden]{display:none}#title{z-index:7;background:#08070a;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}#title .panel{flex-direction:column;align-items:center;gap:18px;width:min(960px,100%);display:flex}#title img{object-fit:cover;width:100%;max-height:70vh;image-rendering:pixelated;border:3px solid var(--iron);box-shadow:4px 4px #000}#title h1{color:var(--accent);letter-spacing:4px;font-size:56px;font-weight:400}#title .buttons{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#title .buttons button{min-width:180px;min-height:52px;font-size:24px}#title .buttons .confirm{background:#5a3a22;border-color:#e8c070}#dialogue .line p{white-space:pre-line}#narrator[hidden]{display:none}#narrator{left:8px;right:190px;top:calc(var(--top-h,48px) + var(--safe-top,0px) + var(--gap,6px));z-index:4;color:#f3e6c8;cursor:pointer;background:#140c1eeb;border:2px solid #e8c070;width:auto;max-width:560px;padding:8px 12px;font-size:19px;line-height:1.2;position:fixed;box-shadow:3px 3px #000}#narrator:before{content:"🎙 "}body:has(#combat:not([hidden])) #narrator{top:calc(var(--top-h) + var(--safe-top) + var(--strip-h) + 2 * var(--gap))}#announce[hidden]{display:none}#announce{z-index:5;border:2px solid var(--accent,#ff7a1a);color:var(--text,#fff4e0);cursor:pointer;text-align:center;background:#140c1ef0;padding:6px 14px;font-size:22px;position:fixed;bottom:140px;left:50%;transform:translate(-50%);box-shadow:3px 3px #000}#announce.big{letter-spacing:2px;color:#ffd27a;border-width:4px;padding:14px 28px;font-size:42px;animation:.35s ease-out announce-pop;top:38%;bottom:auto}@keyframes announce-pop{0%{opacity:0;transform:translate(-50%)scale(.6)}to{opacity:1;transform:translate(-50%)scale(1)}}#clock-hud[hidden]{display:none}#clock-hud{right:6px;top:calc(var(--top-h,48px) + var(--safe-top,0px) + var(--gap,6px));z-index:4;border:2px solid var(--iron-light,#6d5f9a);color:var(--text,#fff4e0);letter-spacing:1px;pointer-events:none;background:#140c1ee6;padding:4px 10px;font-size:24px;position:fixed;box-shadow:3px 3px #000}#clock-hud:before{content:"⏱ "}#clock-hud.low{color:#ffd27a;border-color:#e8a030}#clock-hud.critical{color:#f89;border-color:#f57}#clock-hud.expired{color:#f57;border-color:#f57;animation:.8s steps(2,end) infinite clock-flash}@keyframes clock-flash{50%{opacity:.35}}#meters{z-index:3;right:6px;top:calc(var(--top-h) + var(--safe-top) + var(--gap));flex-direction:column;align-items:flex-end;gap:4px;display:flex;position:fixed}body:has(#clock-hud:not([hidden])) #meters{top:calc(var(--top-h) + var(--safe-top) + var(--gap) + 44px)}body:has(#combat:not([hidden])) #meters{top:calc(var(--top-h) + var(--safe-top) + var(--strip-h) + 2 * var(--gap) + 44px)}#meters .meter{--meter:var(--gold);min-width:112px;min-height:var(--touch);background:var(--panel);color:var(--text);font:inherit;text-align:left;border:2px solid var(--meter);box-shadow:2px 2px 0 var(--shadow);cursor:default;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;margin:0;padding:3px 8px 6px;display:grid;position:relative}#meters button.meter{cursor:pointer}#meters .meter .icon{font-size:var(--fs-l);line-height:1}#meters .meter .text{flex-direction:column;line-height:1;display:flex}#meters .meter b{font-size:var(--fs-l);color:var(--meter);text-shadow:1px 1px #000;font-weight:400}#meters .meter small{font-size:var(--fs-xs);color:var(--muted)}#meters .meter .bar{background:var(--iron-dark);height:3px;position:absolute;bottom:2px;left:4px;right:4px}#meters .meter .bar>i{background:var(--meter);height:100%;display:block}#meters .meter .badge{background:var(--accent);color:#fff;min-width:18px;font-style:normal;font-size:var(--fs-xs);text-align:center;border:1px solid #000;padding:0 4px;position:absolute;top:-6px;right:-6px}#meters .meter.changed b{animation:.5s steps(3,end) meter-pop}@keyframes meter-pop{0%{transform:scale(1.35)}to{transform:scale(1)}}#bubbles{z-index:4;left:50%;bottom:calc(44px + var(--safe-bottom) + var(--gap));pointer-events:none;flex-direction:column;gap:4px;width:min(520px,100vw - 16px);display:flex;position:fixed;transform:translate(-50%)}body:has(#combat:not([hidden])) #bubbles{bottom:calc(256px + var(--safe-bottom))}#bubbles .bubble{--bubble:var(--gold);pointer-events:auto;cursor:pointer;border:2px solid var(--bubble);background:#140c1ef0;align-items:flex-start;gap:8px;padding:6px 8px;animation:.25s steps(3,end) bubble-in;display:flex;box-shadow:3px 3px #000}#bubbles .bubble .badge{background:var(--bubble);color:#000;width:32px;height:32px;font-size:var(--fs-s);flex:none;place-items:center;display:grid}#bubbles .bubble b{color:var(--bubble);font-weight:400;font-size:var(--fs-s);display:block}#bubbles .bubble p{font-size:var(--fs-s);margin:0;line-height:1.2}@keyframes bubble-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}#show-panel[hidden]{display:none}#show-panel{z-index:8;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}#show-panel .panel{width:min(560px,100vw - 16px);max-height:calc(100dvh - var(--top-h) - 32px);background:var(--panel);border:3px solid var(--gold);flex-direction:column;display:flex;box-shadow:4px 4px #000}#show-panel .panel>header{border-bottom:2px solid var(--iron);justify-content:space-between;align-items:center;padding:4px 8px;display:flex}#show-panel h2{font-size:var(--fs-l);color:var(--gold);margin:0;font-weight:400}#show-panel .close{min-width:var(--touch);min-height:var(--touch)}#show-panel .body{flex-direction:column;gap:8px;padding:6px 8px 10px;display:flex;overflow-y:auto}#show-panel section{--section:var(--gold);border-left:4px solid var(--section);background:var(--iron-dark);padding:4px 8px}#show-panel section>header{align-items:center;gap:8px;display:flex}#show-panel section .badge{background:var(--section);color:#000;width:30px;height:30px;font-size:var(--fs-s);flex:none;place-items:center;display:grid}#show-panel h3{font-size:var(--fs-m);color:var(--section);margin:0;font-weight:400}#show-panel section small{color:var(--muted);font-size:var(--fs-xs)}#show-panel section p{font-size:var(--fs-s);margin:4px 0 0;line-height:1.25}#show-panel section .bar{border:1px solid var(--iron);background:#000;height:16px;margin-top:4px;position:relative}#show-panel section .bar>i{background:var(--section);height:100%;display:block}#show-panel section .bar>span{text-align:center;font-size:var(--fs-xs);color:#fff;text-shadow:1px 1px #000;line-height:14px;position:absolute;inset:0}#show-panel .actions{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}#show-panel .actions button{min-height:var(--touch);flex:auto}#show-panel .actions button.primary{border-color:var(--gold);color:var(--gold)}.achievement-toast[hidden]{display:none}.achievement-toast{left:50%;top:calc(var(--top-h,48px) + var(--safe-top,0px) + 8px);z-index:7;border:3px solid var(--gold);cursor:pointer;color:#f3e6c8;background:#140c1ef5;align-items:center;gap:10px;width:min(480px,100vw - 16px);padding:8px 12px;display:flex;position:fixed;transform:translate(-50%);box-shadow:4px 4px #000}.achievement-toast.pop{animation:.45s ease-out ach-pop}@keyframes ach-pop{0%{transform:translate(-50%,-140%)}70%{transform:translate(-50%,6%)}to{transform:translate(-50%)}}.achievement-toast canvas{flex:none}.achievement-toast .text{flex-direction:column;min-width:0;display:flex}.achievement-toast .kicker{color:var(--gold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px}.achievement-toast strong{font-weight:400;font-size:var(--fs-l);color:#fff;line-height:1}.achievement-toast p{font-size:var(--fs-s);margin:2px 0 0;line-height:1.15}.achievement-toast .reward,.meta-panel .reward{color:var(--gold)}body.has-achievement #narrator{top:calc(var(--top-h,48px) + var(--safe-top,0px) + 112px)}.meta-panel[hidden]{display:none}.meta-panel{z-index:8;background:#0009;justify-content:center;align-items:center;padding:8px;display:flex;position:fixed;inset:0}.meta-panel .box{background:var(--panel);border:3px solid var(--iron);flex-direction:column;width:min(560px,100%);max-height:calc(100dvh - 16px);display:flex;box-shadow:4px 4px #000}.meta-panel header{border-bottom:2px solid var(--iron);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.meta-panel h2{font-weight:400;font-size:var(--fs-xl);color:var(--accent);margin:0;line-height:1}.meta-panel .close{min-width:var(--touch);min-height:var(--touch)}.meta-panel .body{padding:4px 12px 12px;overflow-y:auto}.meta-panel h3{color:var(--gold);font-weight:400;font-size:var(--fs-m);margin:12px 0 4px}.meta-panel .achievement{opacity:.55;align-items:center;gap:8px;padding:4px 0;display:flex}.meta-panel .achievement.got{opacity:1}.meta-panel .achievement canvas{flex:none}.meta-panel .achievement strong{font-weight:400;font-size:var(--fs-m);line-height:1}.meta-panel .achievement p{font-size:var(--fs-s);margin:0;line-height:1.15}.boxes-button.has-boxes{color:var(--gold);border-color:var(--gold)}.boxes-button.bump{animation:.6s ease-out 2 box-bump}@keyframes box-bump{30%{transform:scale(1.35)rotate(-8deg)}60%{transform:scale(.95)rotate(5deg)}}.box-overlay[hidden]{display:none}.box-overlay{z-index:9;background:#080410f7;justify-content:center;align-items:center;padding:8px;display:flex;position:fixed;inset:0;overflow-y:auto}.box-panel{background:var(--panel);border:3px solid var(--iron);flex-direction:column;gap:8px;width:min(480px,100%);padding:10px 12px;display:flex;box-shadow:4px 4px #000}.box-panel h2,.box-stage h2{font-weight:400;font-size:var(--fs-xl);color:var(--gold);text-align:center;margin:0;line-height:1}.box-panel p{font-size:var(--fs-s);margin:0}.box-panel ul{font-size:var(--fs-s);margin:0;padding-left:18px}.box-panel button{min-height:var(--touch)}.box-list{flex-direction:column;gap:6px;max-height:60dvh;display:flex;overflow-y:auto}.box-row{text-align:left;align-items:center;gap:10px;min-height:56px;display:flex;border-color:var(--tier)!important}.box-row span{flex-direction:column;display:flex}.box-row strong{font-weight:400;font-size:var(--fs-m);color:var(--tier)}.box-row small{font-size:var(--fs-xs);color:var(--muted)}.box-stage{text-align:center;color:#f3e6c8;flex-direction:column;align-items:center;gap:8px;width:min(520px,100%);display:flex;position:relative}.box-stage .sub{font-size:var(--fs-s);max-width:420px;margin:0}.box-stage .hint{color:var(--gold);min-height:1.2em;margin:0;animation:1.2s step-end infinite blink}@keyframes blink{50%{opacity:.3}}.box-stage .actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.box-stage .actions button{min-height:var(--touch);padding:0 14px}.box-stage .actions .primary{border-color:var(--gold);color:var(--gold)}.box-art{z-index:1;cursor:pointer;justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.box-row .box-art{width:48px;height:48px}.box-art.css-box:before{content:"";background:var(--tier);border:4px solid #000;width:60%;height:50%;margin-top:20%;box-shadow:inset 0 12px #ffffff40}.box-art.drop{animation:.7s cubic-bezier(.3,1.6,.6,1) box-drop}@keyframes box-drop{0%{transform:translateY(-80vh)}to{transform:translateY(0)}}.box-art.shake{animation:.12s linear infinite box-shake}.tier-plata .box-art.shake{animation-duration:90ms}.tier-oro .box-art.shake{animation-duration:70ms}.tier-legendaria .box-art.shake{animation-duration:50ms}@keyframes box-shake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-3px,1px)rotate(-3deg)}75%{transform:translate(3px,-1px)rotate(3deg)}}.box-stage.beam:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 70%, var(--beam) 0%, transparent 70%);opacity:.75;width:240px;height:260px;animation:1.4s ease-in-out infinite alternate beam;position:absolute;top:40px;left:50%;transform:translate(-50%)}@keyframes beam{0%{opacity:.45}to{opacity:.9}}.box-stage .cards{z-index:1;flex-wrap:wrap;justify-content:center;gap:8px;display:flex;position:relative}.box-stage .card{border:3px solid var(--rar);width:104px;height:156px;animation:.4s ease-out backwards card-in;animation-delay:calc(var(--i) * .12s);background:#120c1c;padding:0;position:relative}@keyframes card-in{0%{opacity:0;transform:translateY(-40px)scale(.6)}}.box-stage .card .back{color:var(--rar);background:repeating-linear-gradient(45deg,#1d1430 0 8px,#241a3a 8px 16px);justify-content:center;align-items:center;font-size:48px;display:flex;position:absolute;inset:0}.box-stage .card .face{flex-direction:column;align-items:center;gap:2px;padding:6px 4px;display:none;position:absolute;inset:0}.box-stage .card.flipped .back{display:none}.box-stage .card.flipped .face{display:flex}.box-stage .card.flipped{box-shadow:0 0 14px var(--rar);animation:.3s ease-out card-flip}@keyframes card-flip{0%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.box-stage .card strong{font-weight:400;font-size:var(--fs-s);color:#fff;line-height:1}.box-stage .card em{font-style:normal;font-size:var(--fs-xs);color:var(--rar)}.box-stage .card small{color:#d8cdb8;font-size:13px;line-height:1.05;overflow:hidden}.box-stage .coins{color:var(--gold);font-size:var(--fs-l);min-height:1em;margin:0}canvas.ui-icon{image-rendering:pixelated}@media (prefers-reduced-motion:reduce){.box-art.drop,.box-art.shake,.achievement-toast.pop,.box-stage .card,.box-stage.beam:before,.boxes-button.bump{animation:none!important}}#setup .box.setup .body{flex-direction:column;gap:8px;padding-top:10px;display:flex}.setup-option{text-align:left;min-height:var(--touch);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;display:flex}.setup-option strong{font-weight:400;font-size:var(--fs-m);color:var(--text)}.setup-option span{font-size:var(--fs-s);color:var(--muted);line-height:1.2}.setup-option.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}.setup-option.selected strong{color:var(--gold)}.setup-option:disabled{opacity:.45}#setup .warning{min-height:1.2em;color:var(--error);font-size:var(--fs-s);margin:0}.setup-buttons{justify-content:space-between;gap:8px;padding:8px 12px 12px;display:flex}.setup-buttons button{min-height:var(--touch);min-width:120px}.setup-buttons .primary{border-color:var(--gold);color:var(--gold);margin-left:auto}.box-art canvas.burst{z-index:-1;pointer-events:none;animation:6s linear infinite burst-spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes burst-spin{to{transform:translate(-50%,-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.box-art canvas.burst{animation:none}}