:root{--bg-0: #060a11;--bg-1: #0b1220;--bg-2: #10192b;--surface-0: rgba(12, 19, 32, .82);--surface-1: rgba(17, 27, 43, .9);--surface-2: rgba(26, 36, 56, .96);--border-soft: #2c3c56;--border-strong: #3f5272;--text-main: #e8eef8;--text-muted: #9eafc8;--text-dim: #7588a4;--accent: #f2b948;--accent-strong: #ffd273;--danger: #a33a1f;--warn: #8a541f;--info: #27547d;--space-1: 3px;--space-2: 6px;--space-3: 9px;--space-4: 12px;--space-5: 16px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);--motion-fast: .14s;--motion-base: .22s;--ease-out: cubic-bezier(.2, .9, .2, 1)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--text-main);font-family:Fira Code,IBM Plex Mono,Consolas,monospace;background:radial-gradient(120% 85% at 20% 0%,#18263f,#18263f00 55%),radial-gradient(120% 120% at 90% 95%,#0f2437,#0f243700 52%),linear-gradient(140deg,var(--bg-1) 0%,var(--bg-0) 62%)}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"center right" "left right";gap:var(--space-3);height:100%;padding:var(--space-3)}.left-rail,.center-stage,.right-rail{min-height:0}.left-rail{grid-area:left;display:flex;flex-direction:column;gap:var(--space-2)}.center-stage{grid-area:center;display:flex;min-width:0;min-height:0;justify-content:center}.right-rail{grid-area:right}.viewport-shell{width:min(100%,1100px);min-height:0;height:100%;position:relative;overflow:hidden;padding:var(--space-2);border:0;border-radius:var(--radius-lg);background:linear-gradient(160deg,#0c14218f,#080d1785);box-shadow:0 12px 28px #00000038;display:flex;align-items:center;justify-content:center}#viewport-canvas{width:auto;height:100%;max-width:100%;min-height:0;aspect-ratio:33 / 21;border:none;border-radius:var(--radius-md);background:#000}#viewport-canvas:focus,#viewport-canvas:focus-visible{outline:none;box-shadow:none}.map-turn-overlay{position:absolute;top:var(--space-2);left:var(--space-2);z-index:5;max-width:min(46%,420px);border-radius:var(--radius-sm);background:#060c1694;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);pointer-events:none}.map-turn-overlay.hidden{display:none}.map-focus-overlay{position:absolute;right:var(--space-2);bottom:var(--space-2);z-index:6;max-width:min(44%,420px);border-radius:var(--radius-sm);background:#070d17a3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(64,82,109,.52);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:auto}.map-focus-overlay.hidden{display:none}.map-turn-overlay-title{font-size:11px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;font-weight:700}.map-turn-overlay-list{display:flex;flex-direction:column;gap:3px}.map-turn-overlay-entry{display:flex;align-items:center;gap:6px;min-width:0}.map-turn-overlay-icon{width:14px;height:14px;border-radius:2px;image-rendering:pixelated;flex:0 0 auto}.map-turn-overlay-text{color:var(--text-main);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-turn-overlay-repeat{margin-left:auto;border-radius:999px;background:#394962b8;color:#d3dceb;font-size:10px;padding:0 5px}.command-card{border:0;border-radius:var(--radius-lg);background:linear-gradient(155deg,#1721347a,#0b122075);box-shadow:0 10px 24px #0003;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.turn-summary{color:var(--text-muted);font-size:12px;line-height:1.4;border:0;border-radius:var(--radius-sm);background:#080f1a57;padding:var(--space-2) var(--space-3)}.command-bar{display:flex;flex-direction:column;gap:var(--space-2)}.command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);align-items:center}.command-input{min-width:0;min-height:44px;background:#070d1694;border:1px solid rgba(66,86,114,.75);color:var(--text-main);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;font-family:inherit;transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}.command-input::placeholder{color:var(--text-dim)}.command-input:focus,.command-input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px #f2b94859}.command-run{min-width:72px;min-height:44px;border:0;border-radius:var(--radius-sm);background:linear-gradient(180deg,#4a3a17,#342a12);color:var(--accent-strong);font-family:inherit;font-size:13px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}.command-run:hover{transform:translateY(-1px);border-color:#a78944}.command-run:focus,.command-run:focus-visible{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 1px #f2b94859}.hud-toggle{display:none;min-height:44px;min-width:56px;border:0;border-radius:var(--radius-sm);padding:0 12px;background:#1c2b44d1;color:#d6e3f4;font-family:inherit;font-size:12px;cursor:pointer}.hud-toggle:focus,.hud-toggle:focus-visible{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 1px #f2b94859}.hud-backdrop{display:none}.command-templates{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.command-template{min-height:36px;border:0;border-radius:999px;padding:0 12px;background:#18273fb3;color:#c5d3e7;cursor:pointer;font:inherit;font-size:12px;transition:border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}.command-template:hover{background:#263957db;color:var(--accent-strong)}.command-template:focus,.command-template:focus-visible{outline:none;box-shadow:0 0 0 1px #f2b94859}.command-quick-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.command-assist{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);min-height:0}.command-assist.hidden{display:none}.command-assist-title{color:var(--text-dim);font-size:11px;margin-right:var(--space-2)}.command-assist-chip{min-height:28px;border:0;border-radius:999px;padding:2px 10px;background:#18273fb8;color:#c5d4e9;cursor:pointer;font:inherit;font-size:11px}.command-assist-chip:hover{background:#243958d6}.command-assist-chip.verb{color:#9ec6ff}.command-assist-chip.entity{color:#a8e3b2}.command-assist-chip.clarification{color:#ffd58a;background:#3a2d15bd}.command-assist-chip:focus,.command-assist-chip:focus-visible{outline:none;box-shadow:0 0 0 1px #f2b94859}@media(min-width:761px){.viewport-shell{width:100%;max-width:none}#viewport-canvas{width:100%;height:100%;aspect-ratio:auto}.command-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"assist assist" "templates templates" "input quick";column-gap:var(--space-2);row-gap:var(--space-2);align-items:center}.command-assist{grid-area:assist;min-height:32px;max-height:32px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.command-assist.hidden{display:flex;visibility:hidden;pointer-events:none}.command-row{grid-area:input;width:100%}.command-templates{grid-area:templates;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.command-quick-actions{grid-area:quick;justify-self:end;flex-wrap:nowrap}.command-assist-title,.command-assist-chip{white-space:nowrap;flex:0 0 auto}}.quick-action{width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:linear-gradient(180deg,#19273fe6,#101b2ce6);color:#c7d6ea;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}.quick-action:hover{transform:translateY(-1px);background:linear-gradient(180deg,#283a5af2,#121f32f2);color:var(--accent-strong)}.quick-action:focus,.quick-action:focus-visible{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 1px #f2b94859}.quick-action svg{width:18px;height:18px;pointer-events:none}.sidebar{display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#3f4f67 #0f1727}.sidebar::-webkit-scrollbar{width:10px}.sidebar::-webkit-scrollbar-track{background:#0f1727;border-radius:999px}.sidebar::-webkit-scrollbar-thumb{border-radius:999px;background:#3f4f67;border:2px solid #0f1727}.panel{border:0;background:linear-gradient(160deg,#10192875,#0a101c6b);border-radius:var(--radius-md);padding:var(--space-3);display:flex;flex-direction:column;transition:background var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}.panel:hover{background:linear-gradient(160deg,#131d2e94,#0c131f8f)}.panel-toggle{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0;width:100%;display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--space-2)}.panel-title{color:var(--accent);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}.panel-indicator{color:var(--text-dim);font-size:14px}.panel-body{min-height:0}.panel.collapsed{padding-bottom:var(--space-2)}.panel.collapsed .panel-toggle{margin-bottom:0}.panel.collapsed .panel-body{display:none}.panel-content{color:var(--text-muted);font-size:13px;line-height:1.45}.focus-description{color:var(--text-muted);font-size:12px;line-height:1.4}.map-assist-content{display:flex;flex-direction:column;gap:var(--space-2)}.map-assist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.map-assist-toggle{min-height:32px;border:0;border-radius:var(--radius-sm);background:#18263a94;color:var(--text-muted);cursor:pointer;font:inherit;font-size:12px;transition:color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}.map-assist-toggle:hover{background:#21334dc7;color:#d3def0}.map-assist-toggle.active{background:linear-gradient(180deg,#46371ad6,#362a14db);color:var(--accent-strong)}.map-assist-toggle:focus,.map-assist-toggle:focus-visible{outline:none;box-shadow:0 0 0 1px #f2b94861}.settings-content,.settings-group{display:flex;flex-direction:column;gap:var(--space-2)}.settings-zoom-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.settings-zoom-label{color:var(--text-muted);font-size:12px}.settings-zoom-value{color:var(--text-main);font-size:12px}.settings-zoom-controls{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--space-2)}.settings-action{min-height:36px;border:0;border-radius:var(--radius-sm);padding:0 12px;background:#18263a94;color:var(--text-main);cursor:pointer;font:inherit;font-size:12px;text-align:left;transition:color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}.settings-action:hover{background:#21334dc7}.settings-action.compact{min-width:36px;padding:0;text-align:center}.settings-action:focus,.settings-action:focus-visible{outline:none;box-shadow:0 0 0 1px #f2b94861}.settings-action:disabled{opacity:.58;cursor:default}.inventory-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-2)}.inventory-row+.inventory-row{margin-top:4px}.inventory-icon{width:16px;height:16px;border-radius:2px;image-rendering:pixelated}.inventory-label{color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.objective-row{color:var(--text-main);font-size:12px;line-height:1.4}.objective-row+.objective-row{margin-top:4px}.stats-row{display:flex;justify-content:space-between;gap:var(--space-2)}.stats-row+.stats-row{margin-top:2px}.stats-label{color:var(--text-muted)}.stats-value{color:var(--text-main)}.stats-meter-row{display:flex;flex-direction:column;gap:4px}.stats-meter-row+.stats-meter-row{margin-top:4px}.stats-position-row{margin-top:6px}.stats-meter-track{width:100%;height:6px;border-radius:999px;overflow:hidden;background:#36455c8c}.stats-meter-fill{height:100%;border-radius:inherit;background:#a5b4c7}.stats-meter-track.hp .stats-meter-fill{background:linear-gradient(90deg,#dd6b56,#f19c67)}.stats-meter-track.stamina .stats-meter-fill{background:linear-gradient(90deg,#4aa0d8,#6ac8ff)}.minimap-canvas{width:100%;height:auto;border:0;border-radius:var(--radius-sm);background:#0a1018}.legend-content{max-height:230px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1);color:var(--text-muted);font-size:12px;line-height:1.25;scrollbar-width:thin;scrollbar-color:#3b4556 #111722}.legend-section{grid-column:1 / -1;color:var(--text-main);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}.legend-section:first-child{margin-top:0}.legend-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}.legend-swatch{width:22px;height:22px;border:0;border-radius:2px;background:#0a1018;image-rendering:pixelated;flex:0 0 auto}.legend-label{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nearby-content{color:var(--text-muted);font-size:12px}.nearby-list{display:flex;flex-direction:column;gap:6px}.nearby-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2);align-items:center}.nearby-icon{width:16px;height:16px;image-rendering:pixelated;border-radius:2px;flex:0 0 auto}.nearby-heading{display:inline-flex;align-items:baseline;gap:6px;min-width:0}.nearby-name{color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nearby-distance{color:var(--accent);font-size:11px}.nearby-badges{display:inline-flex;flex-wrap:wrap;gap:var(--space-1)}.status-badge{border-radius:999px;padding:1px 6px;font-size:10px;line-height:1.4;border:0;background:#111827;color:#cbd5e1}.status-badge.burning{border-color:var(--danger);background:#3b1f16;color:#ffb089}.status-badge.heated{border-color:var(--warn);background:#342314;color:#ffc875}.status-badge.soaked{border-color:var(--info);background:#12263a;color:#86c8ff}.status-badge.ai{border-color:#46556d;background:#1b2432;color:#c6d4e6}.event-panel{min-height:220px;display:flex;flex-direction:column}.event-panel .panel-body{flex:1;min-height:0;display:flex;flex-direction:column}.event-panel.collapsed{min-height:unset}.event-log{overflow-y:auto;font-size:12px;line-height:1.4;color:var(--text-muted);flex:1;scrollbar-width:thin;scrollbar-color:#3b4556 #111722}.event-filter-bar{display:inline-flex;gap:var(--space-1);margin-bottom:var(--space-2);flex-wrap:wrap}.event-filter{min-height:28px;border:0;background:#1c2a4070;color:#9fb0c6;border-radius:999px;font-size:11px;padding:2px 9px;cursor:pointer}.event-filter.active{border-color:transparent;color:var(--accent);background:#3a2f148f}.event-entry{border-bottom:1px solid rgba(46,55,68,.46);padding:7px 0}.event-entry--combat,.event-entry--status,.event-entry--system,.event-entry--command{border-left:0;padding-left:0}.event-repeat{display:inline-block;margin-left:24px;margin-bottom:2px;padding:0 6px;border:0;border-radius:999px;background:#38465c99;color:#d3dceb;font-size:10px}.event-main{display:flex;align-items:center;gap:var(--space-2)}.event-icon{width:16px;height:16px;border:0;border-radius:2px;background:#0a1018;image-rendering:pixelated;flex:0 0 auto}.event-headline{display:inline-flex;align-items:baseline;gap:var(--space-1)}.event-turn{color:var(--accent);flex:0 0 auto}.debug-content{margin:0;max-height:220px;overflow:auto;font-size:11px;color:#95f9a6;scrollbar-width:thin;scrollbar-color:#3b4556 #111722}.legend-content::-webkit-scrollbar,.event-log::-webkit-scrollbar,.debug-content::-webkit-scrollbar{width:10px}.legend-content::-webkit-scrollbar-track,.event-log::-webkit-scrollbar-track,.debug-content::-webkit-scrollbar-track{background:#111722;border-radius:8px}.legend-content::-webkit-scrollbar-thumb,.event-log::-webkit-scrollbar-thumb,.debug-content::-webkit-scrollbar-thumb{background:#3b4556;border-radius:8px;border:2px solid #111722}.legend-content::-webkit-scrollbar-thumb:hover,.event-log::-webkit-scrollbar-thumb:hover,.debug-content::-webkit-scrollbar-thumb:hover{background:#4a566a}@media(max-width:1200px){.layout{grid-template-columns:minmax(0,1fr) minmax(280px,330px)}}@media(max-width:1100px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto minmax(220px,40vh);grid-template-areas:"center" "left" "right"}.right-rail{max-height:40vh}#viewport-canvas{width:100%;height:auto;min-height:340px}}@media(max-width:760px){.layout{padding:var(--space-2);gap:var(--space-2);grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);grid-template-areas:"center";height:100dvh}.right-rail{display:none}.center-stage{justify-content:center;padding-bottom:calc(var(--mobile-dock-height, 0px) + var(--space-2))}.viewport-shell{align-items:flex-end}.left-rail{grid-area:auto;position:fixed;left:var(--space-2);right:var(--space-2);bottom:0;z-index:50;min-width:0;padding-bottom:env(safe-area-inset-bottom);pointer-events:none}.command-card{pointer-events:auto;min-width:0;width:100%;max-width:100%;overflow-x:clip;padding:var(--space-3);border-radius:var(--radius-md);background:linear-gradient(165deg,#141f32d1,#080e17db)}.command-bar{min-width:0;width:100%;max-width:100%}.command-input{font-size:15px}.command-row{min-width:0;grid-template-columns:minmax(0,1fr) auto auto}.command-run{min-width:68px;font-size:12px}.hud-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.command-templates{min-width:0;width:100%;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none}.command-templates::-webkit-scrollbar{display:none}.command-template{white-space:nowrap;min-height:38px;min-width:0;max-width:min(78vw,320px);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}.command-assist{min-width:0;width:100%;max-width:100%;min-height:32px;max-height:32px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.command-assist::-webkit-scrollbar{display:none}.command-assist.hidden{display:flex;visibility:hidden;pointer-events:none}.command-assist-title,.command-assist-chip{white-space:nowrap;min-width:0;flex:0 1 auto}.command-assist-chip{max-width:min(78vw,320px);overflow:hidden;text-overflow:ellipsis}.command-quick-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}.quick-action{width:100%;min-width:0;height:44px}#viewport-canvas{width:100%;height:auto;min-height:clamp(220px,30dvh,420px)}.map-turn-overlay{max-width:min(78%,360px)}.map-focus-overlay{top:var(--space-2);right:var(--space-2);bottom:auto;max-width:min(88%,420px);max-height:min(46dvh,320px);overflow:auto}.panel{padding:var(--space-2)}.panel-title{font-size:12px}.event-panel{min-height:180px}.layout.mobile-hud-open .right-rail{display:flex;position:fixed;inset:var(--space-2) var(--space-2) calc(168px + env(safe-area-inset-bottom)) var(--space-2);z-index:60;padding:var(--space-2);border:0;border-radius:var(--radius-md);background:linear-gradient(160deg,#0c1421fa,#090f19f7);box-shadow:var(--shadow-soft);max-height:unset}.layout.mobile-hud-open+.hud-backdrop{display:block;position:fixed;inset:0;z-index:55;border:0;padding:0;margin:0;background:#03080f8c}}