:root{--right-col: 384px;--bg: #14161c;--panel-bg: rgba(22, 25, 33, .92);--panel-border: #2c313d;--text: #e6e8ee;--text-dim: #99a0ad;--accent: #4a89ff;--team-a: #4a89ff;--team-b: #e7553c;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px}#layout{position:fixed;inset:0;display:grid;grid-template-columns:1fr var(--right-col);grid-template-rows:100%}#game-root{grid-column:1;grid-row:1;position:relative;overflow:hidden}#game-root canvas{display:block}.panel{pointer-events:auto;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;backdrop-filter:blur(6px)}#transport{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.4rem .6rem}#transport button{pointer-events:auto;font-size:1rem;line-height:1;min-width:2.4rem;padding:.35rem .5rem;color:var(--text);background:#232834;border:1px solid var(--panel-border);border-radius:7px;cursor:pointer}#transport button:hover:not(:disabled){background:#2c3340}#transport button:disabled{opacity:.4;cursor:default}#right{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:8px;padding:8px;min-height:0;overflow:hidden}#mode-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}#mode-selector{flex:0 0 auto;padding:.5rem .6rem}.mode-select{width:100%;padding:.4rem .5rem;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:6px;font-family:var(--sans);font-size:.95rem;font-weight:600;cursor:pointer}#config-bar{flex:0 0 auto;padding:.6rem .7rem}#narrator-console,#event-inspector{flex:1 1 50%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.panel-header{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-bottom:1px solid var(--panel-border);font-weight:600;font-size:.85rem;letter-spacing:.02em;color:var(--text-dim)}.panel-collapse{flex:1 1 auto;display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:0;background:none;border:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.panel-collapse:hover .panel-title{color:var(--text)}.collapse-chevron{flex:0 0 auto;width:1.4rem;font-size:1.4rem;line-height:1}#event-inspector.collapsed,#narrator-console.collapsed{flex:0 0 auto}#event-inspector.collapsed .panel-header,#narrator-console.collapsed .panel-header{border-bottom:none}#event-inspector.collapsed .panel-scroll,#narrator-console.collapsed .panel-scroll{display:none}.panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.4rem .6rem}#version-badge{position:absolute;left:10px;top:8px;z-index:2;pointer-events:none;font-family:var(--mono);font-size:.72rem;color:#c4c9d2;text-shadow:0 1px 2px rgba(0,0,0,.8)}.inspector-meta{flex:0 0 auto;font-weight:400;font-family:var(--mono);font-size:.72rem;color:var(--text-dim)}.narration-list{list-style:none;margin:0;padding:0}.narration-row{padding:.18rem .2rem;line-height:1.35;font-size:.82rem;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.03)}.narration-turn{margin-top:.35rem;font-weight:700;color:#cdd3df;border-bottom:1px solid var(--panel-border)}.narration-name{font-weight:600}.narration-value{color:var(--kind, var(--text-dim))}.narration-hit{--kind: #ffd9b0}.narration-damage{--kind: #ffc0b0}.narration-heal{--kind: #b6f0c0}.narration-spell{--kind: #c9b6ff}.narration-save{--kind: #bfe0ff}.narration-condition{--kind: #ffe39a}.narration-death{--kind: #ff8e7a}.narration-rest{--kind: #9fd0d6;font-style:italic}.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem .6rem}.config-grid label{display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.78rem;color:var(--text-dim)}.config-grid input,.config-grid select{width:5.5rem;padding:.2rem .3rem;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:5px;font-family:var(--mono);font-size:.78rem}.show-earlier{width:100%;margin-bottom:.4rem;padding:.3rem;color:var(--text-dim);background:#20242e;border:1px dashed var(--panel-border);border-radius:6px;cursor:pointer;font-size:.74rem}.event-list{list-style:none;margin:0;padding:0}.event-row{padding:.25rem .4rem;border-left:3px solid transparent;border-bottom:1px solid rgba(255,255,255,.04)}.event-resolution{border-left-color:#ffb454}.event-encounter{border-left-color:#6ad1ff}.event-state-change{border-left-color:#6a7180}.event-line{display:flex;gap:.45rem;align-items:baseline}.event-index{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);min-width:2.4rem}.event-type{font-weight:600;font-size:.78rem}.event-preview{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-row details{margin-top:.15rem}.event-row summary{cursor:pointer;font-size:.68rem;color:#6a7180}.event-payload{margin:.3rem 0 0;max-height:16rem;overflow:auto;font-family:var(--mono);font-size:.68rem;color:var(--text-dim);white-space:pre-wrap}#command-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:.4rem;padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,#0a0c10eb,#0a0c1000);pointer-events:none}#command-bar>*{pointer-events:auto}.cmd-economy{align-self:center;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.82rem;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.85)}.cmd-pip{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#2c7d4f;color:#eafff0;font-weight:700;font-size:.72rem}.cmd-pip.spent{background:#3a3f4a;color:#6a7180}.cmd-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}.cmd-btn{flex:0 0 auto;min-width:4.5rem;min-height:2.6rem;padding:.5rem .85rem;color:var(--text);background:#232834f5;border:1px solid var(--panel-border);border-radius:8px;font-family:var(--sans);font-size:.95rem;font-weight:600;cursor:pointer}.cmd-btn:hover:not(:disabled){background:#2c3340}.cmd-btn:disabled{opacity:.4;cursor:default}.cmd-btn.active{border-color:var(--accent);box-shadow:0 0 0 2px #4a89ff80}.cmd-end{margin-left:.6rem}.cmd-end.suggested{background:#4a89ff38;border-color:var(--accent)}.cmd-quit{background:#e7553c33;border-color:#e7553c}#confirm-dialog{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0c1099}#confirm-dialog[hidden]{display:none}.confirm-card{width:min(320px,100%);display:flex;flex-direction:column;gap:.8rem;padding:1.2rem;text-align:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;backdrop-filter:blur(8px)}.confirm-title{margin:0;font-size:1.2rem}.confirm-message{margin:0;font-size:.88rem;color:var(--text-dim)}.confirm-actions{display:flex;gap:.5rem}.confirm-actions .start-btn{flex:1 1 0}.confirm-yes{background:#e7553c3d;border-color:#e7553c}.char-tooltip{position:fixed;z-index:8;pointer-events:none;max-width:16rem;padding:.5rem .65rem;background:#10131af5;border:1px solid var(--panel-border);border-radius:8px;font-size:.8rem;line-height:1.35;color:var(--text);box-shadow:0 4px 16px #0006}.char-tooltip[hidden]{display:none}.tt-name{font-weight:700}.tt-line{color:var(--text-dim)}.tt-spells-title{margin-top:.35rem;padding-top:.3rem;border-top:1px solid var(--panel-border);font-weight:700;font-size:.74rem;letter-spacing:.02em;color:var(--text-dim)}.tt-spell{font-size:.76rem;line-height:1.3}.turn-banner{position:absolute;top:16%;left:50%;z-index:4;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--sans);font-weight:800;font-size:clamp(.8rem,2.75vw,1.8rem);letter-spacing:.01em;text-align:center;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9);animation:turn-banner-in .26s ease-out}.turn-banner[hidden]{display:none}.turn-banner.turn-self{color:#f2f4f8}.turn-banner.turn-ally{color:var(--team-a)}.turn-banner.turn-enemy{color:var(--team-b)}@keyframes turn-banner-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}#option-menu{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:center;padding:0 .6rem 5rem;pointer-events:auto}#option-menu[hidden]{display:none}.menu-card{width:min(300px,100%);display:flex;flex-direction:column;gap:.3rem;padding:.5rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;backdrop-filter:blur(8px)}.menu-title{padding:.2rem .4rem .35rem;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--text-dim)}.menu-item{min-height:2.6rem;padding:.5rem .7rem;text-align:left;color:var(--text);background:#232834;border:1px solid var(--panel-border);border-radius:7px;font-size:.95rem;font-weight:600;cursor:pointer}.menu-item:hover:not(:disabled){background:#2c3340}.menu-item:disabled{opacity:.4;cursor:default}#logs-toggle{position:absolute;top:8px;right:8px;z-index:4;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--text);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;font-size:1.05rem;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}#logs-toggle:hover{background:#2c3340}#layout.logs-collapsed{grid-template-columns:1fr 0}#layout.logs-collapsed #right{display:none}#start-screen{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0c10db;overflow-y:auto}.start-card{width:min(420px,100%);display:flex;flex-direction:column;gap:1rem;padding:1.4rem 1.5rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(8px)}.start-title{margin:0;text-align:center;font-size:1.5rem}.start-daily{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;font-size:.82rem;color:var(--text);background:#4a89ff1a;border:1px solid var(--panel-border);border-radius:8px}.start-locked{opacity:.5}.start-card :disabled{cursor:not-allowed}.start-seed{display:flex;align-items:center;gap:.5rem}.start-seed label{flex:1 1 auto;display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-dim)}.start-seed-input{flex:1 1 auto;min-width:0;padding:.4rem .5rem;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:6px;font-family:var(--mono);font-size:.85rem}.start-reroll{flex:0 0 auto;width:2.4rem;height:2.4rem;color:var(--text);background:#232834;border:1px solid var(--panel-border);border-radius:7px;font-size:1.1rem;cursor:pointer}.start-field{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--text-dim)}.start-level-group{display:flex;flex-direction:column;gap:.35rem}.start-level-warning{margin:0;font-size:.74rem;line-height:1.3;color:#ffd84d}.start-select,.start-name-input{flex:1 1 auto;min-width:0;padding:.4rem .5rem;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:6px;font-family:var(--sans);font-size:.9rem}.start-manual{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-dim)}.start-btn{min-height:2.8rem;padding:.6rem 1rem;color:var(--text);background:#232834f5;border:1px solid var(--panel-border);border-radius:9px;font-size:1rem;font-weight:600;cursor:pointer}.start-btn:hover{background:#2c3340}.start-primary{background:#4a89ff3d;border-color:var(--accent)}#end-screen{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0c10c7}.end-card{width:min(360px,100%);display:flex;flex-direction:column;gap:.9rem;padding:1.6rem 1.5rem;text-align:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(8px)}.end-title{margin:0;font-size:2rem}.end-victory{color:#b6f0c0}.end-defeat{color:#ff8e7a}.end-note{margin:0;color:var(--text-dim)}#dice-prompt{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0c1099}#dice-prompt[hidden]{display:none}.dice-card{width:min(320px,100%);display:flex;flex-direction:column;gap:.7rem;padding:1.2rem;text-align:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;backdrop-filter:blur(8px)}.dice-title{margin:0;font-size:1.3rem}.dice-context{margin:0;font-size:.82rem;color:var(--text-dim)}.dice-input{padding:.6rem;text-align:center;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:8px;font-family:var(--mono);font-size:1.3rem}.dice-actions{display:flex;gap:.5rem}.dice-actions button{flex:1 1 0;min-height:2.7rem;color:var(--text);border:1px solid var(--panel-border);border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer}.dice-submit{background:#4a89ff3d;border-color:var(--accent)}.dice-app{background:#232834f5}.dice-rest{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;color:var(--text-dim)}#amount-prompt{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0c1099}#amount-prompt[hidden]{display:none}.amount-card{width:min(320px,100%);display:flex;flex-direction:column;gap:.7rem;padding:1.2rem;text-align:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;backdrop-filter:blur(8px)}.amount-title{margin:0;font-size:1.2rem}.amount-context{margin:0;font-size:.82rem;color:var(--text-dim)}.amount-input{padding:.6rem;text-align:center;color:var(--text);background:#20242e;border:1px solid var(--panel-border);border-radius:8px;font-family:var(--mono);font-size:1.3rem}.amount-actions{display:flex;gap:.5rem}.amount-actions button{flex:1 1 0;min-height:2.7rem;color:var(--text);border:1px solid var(--panel-border);border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer}.amount-submit{background:#4a89ff3d;border-color:var(--accent)}.amount-cancel{background:#232834f5}#signin-screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:1.25rem;overflow-y:auto;background:#131418;color:#dbdee1;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#signin-screen [hidden]{display:none}#signin-screen .auth-card{width:min(22rem,100%);padding:1.5rem;text-align:center;background:#1c1d22;border:1px solid #2e3138;border-radius:.5rem}#signin-screen .auth-title{margin:0 0 .5rem;font-size:1.4rem}#signin-screen .auth-subtitle{margin:0 0 1rem}#signin-screen .auth-form{display:flex;flex-direction:column;gap:.75rem;text-align:left}#signin-screen .auth-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:#8a8f99}#signin-screen .auth-form input{font:inherit;padding:.5rem;background:#131418;color:#dbdee1;border:1px solid #2e3138;border-radius:.375rem}#signin-screen .form-hint{margin:0;font-size:.85rem;color:#8a8f99}#signin-screen .form-error{margin:0;font-size:.85rem;color:#f26b6b}#signin-screen .auth-submit{margin-top:.25rem;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer;background:#c0c4cb;color:#15171a;border:1px solid #2e3138;border-radius:.375rem}#signin-screen .auth-toggle{margin:1rem 0 0;font-size:.9rem;color:#8a8f99}#signin-screen .link-button{padding:0;font:inherit;cursor:pointer;color:#c0c4cb;background:none;border:none;text-decoration:underline}#signin-screen .guest-link{font-size:.95rem}@media (max-width: 720px){#command-bar .cmd-btn{min-height:3rem;font-size:1rem}#layout.logs-collapsed{grid-template-columns:100%;grid-template-rows:100%}#logs-toggle{width:2.6rem;height:2.6rem}#start-screen,#dice-prompt,#amount-prompt,#end-screen,#confirm-dialog{position:fixed}#layout{grid-template-columns:100%;grid-template-rows:minmax(0,1fr) auto}#right{grid-column:1;grid-row:2}#mode-content,#event-inspector,#narrator-console{flex:0 0 auto}#event-inspector .panel-scroll,#narrator-console .panel-scroll{max-height:26vh}#transport button{min-width:2.9rem;padding:.55rem .5rem;font-size:1.15rem}.config-grid{gap:.45rem .6rem}.config-grid input,.config-grid select{width:5rem;padding:.35rem;font-size:.85rem}}