:root{color-scheme:dark;--surface:#151b25;--line:#2b3545;--muted:#91a0b5;--accent:#83b7a4;--accent-hover:#a1d0be;--header:72px;--nav:64px;--grid-color:rgba(200,218,235,.17)}
*{box-sizing:border-box}body{font-family:Inter,'Segoe UI',sans-serif;background:#0c1119;color:#e9edf5}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #b4e3ce;outline-offset:3px}input,select,textarea{user-select:text}button{min-height:40px}button[hidden],[hidden]{display:none!important}
#app-header{height:var(--header);padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#111722;gap:16px;position:relative;z-index:240}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:42px;font-family:Georgia,serif;font-size:28px;background:#83b7a422;color:#b4dccb;border:1px solid #83b7a455;border-radius:10px}.brand strong{font-size:22px;letter-spacing:.02em}.brand small{display:block;font-size:9px;letter-spacing:.15em;color:var(--muted)}#session-summary{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.status-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#90c8b2;box-shadow:0 0 10px #90c8b233}.header-actions{display:flex;align-items:center;gap:12px}.header-actions>button:last-child{width:40px;color:var(--muted)}#save-status{font-size:11px;color:var(--muted)}.primary-button,.secondary-button,.character-actions button,.health-controls button{border:1px solid #4e7565!important;background:#25483d!important;color:#d7f4e5!important;padding:10px 14px;border-radius:8px;font-size:12px;font-weight:600}.secondary-button{background:#1d2735!important;border-color:var(--line)!important;margin:8px;width:calc(100% - 16px)}
#app-container{width:100%;height:calc(100dvh - var(--header) - var(--nav));min-height:0;position:relative}.panel{background:#131a24;box-shadow:none;border-color:var(--line);z-index:220;min-height:0}#tools-panel{width:264px}#combat-panel{width:264px;border-left:1px solid var(--line)}.panel>div:first-child{min-height:70px;padding:16px;background:transparent;border-color:var(--line)}.panel h2,.sheet-heading h2{font-size:18px;font-weight:650;margin:4px 0 0}.eyebrow,.sheet-heading small{font-size:9px;letter-spacing:.1em;color:var(--muted)}.panel-close{display:none}.panel .p-3{padding:14px 16px}.panel .text-xs{font-size:12px}.panel .text-gray-500{color:#93a0b3}.tool-btn{border-left:0;border-radius:8px;padding:10px 12px;min-height:44px;font-size:12px;gap:12px}.tool-btn.active{background:#83b7a420;color:#bfdfd0;font-weight:600}.tool-btn:hover{background:#ffffff09}.tool-icon{color:#a4b4c8}.tool-btn.active .tool-icon{color:#a3d6bf}.input-dark{background:#0d131e;border:1px solid #344052;border-radius:7px;min-height:38px;max-width:100%;width:100%;font-size:13px;padding:8px;color:#e7edf5}.input-dark.w-12{width:56px}.input-dark:focus{border-color:#83b7a4}.context-panel{background:#1a2431;border-color:#344052;border-radius:10px;margin:4px 12px 12px}.context-panel label{font-size:12px;display:block;margin:8px 0}.context-panel button{margin-top:8px;width:100%}#decor-grid button{min-width:0;padding:4px}#tools-panel .flex.gap-2.text-xs label{min-height:36px}input[type=checkbox]{width:17px;height:17px;accent-color:#83b7a4}
#viewport{background-color:#0b1018;background-image:radial-gradient(#283343 1px,transparent 1px);background-size:24px 24px;touch-action:none;overscroll-behavior:contain;min-width:0;min-height:0;scrollbar-width:thin}#map-stage{position:relative;min-width:100%;min-height:100%;padding:32px}#grid-container{margin:0;transition:none;background-color:#1a222b;box-shadow:0 0 0 1px #455365,0 15px 60px #0006}#layer-tokens{pointer-events:none}.token{pointer-events:auto;touch-action:none}.token-avatar{background-color:#233d46}.token.selected{outline-color:#b3e6cd!important}#layer-manual-fog{z-index:39;opacity:.75}body:not(.session-player) .fog-manual{background:#080c14;border-color:#111e2e;background-image:repeating-linear-gradient(45deg,transparent,transparent 7px,#172334 7px,#172334 8px)}.vision-mask{background:#080c14;opacity:.88}.session-player .vision-mask,.session-player #layer-manual-fog{opacity:1}#map-controls{position:absolute;z-index:110;top:14px;left:calc(264px + 14px);right:calc(264px + 14px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}#map-controls>*{pointer-events:auto;background:#141c28f5;border:1px solid #344052;border-radius:10px;box-shadow:0 4px 18px #0004}.map-tool-status{display:flex;align-items:center;gap:9px;padding:12px 14px;flex-wrap:wrap;max-width:390px}.map-tool-status strong{font-size:12px;font-weight:600}#tool-hint{display:block;font-size:10px;flex-basis:100%;color:#9aabc0;padding-left:15px;line-height:1.5}.map-action-row{display:flex;align-items:center;padding:3px;flex-shrink:0}.map-action-row button{min-width:34px;min-height:36px;color:#bac9dc;border-radius:6px;font-size:13px}.map-action-row button:hover{background:#2a3849}.control-divider{height:20px;width:1px;background:var(--line);margin:0 4px}#zoom-label{font-size:11px;min-width:48px}
#workspace-nav{height:calc(var(--nav) + env(safe-area-inset-bottom,0px));position:fixed;bottom:0;left:0;right:0;padding-bottom:env(safe-area-inset-bottom,0px);z-index:240;display:flex;align-items:stretch;justify-content:center;gap:12px;background:#111722;border-top:1px solid var(--line)}#workspace-nav button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:136px;color:#91a0b5;font-size:12px;position:relative}#workspace-nav button.active{color:#b8decf;background:#83b7a40a}#workspace-nav button.active:before{content:'';position:absolute;top:0;height:2px;width:36px;background:#9ccdb6}.workspace-sheet{position:fixed;top:var(--header);bottom:var(--nav);right:0;width:360px;max-width:100%;background:#151d29;z-index:230;border-left:1px solid var(--line);overflow-y:auto;transform:translateX(101%);transition:transform .2s;box-shadow:-16px 0 48px #0005}.sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#151d29;z-index:1}.sheet-heading button{width:40px;font-size:24px}.empty-state{text-align:center;padding:60px 26px;color:#91a0b5;font-size:13px;line-height:1.7}.empty-state>i{font-size:36px;color:#8ebfa9;margin-bottom:16px}.empty-state h3{color:#e8edf5;font-size:16px;font-weight:600}.empty-state button{margin-top:20px}#character-body{padding:16px}#movement-card{border:1px solid #456855;background:#83b7a40a;border-radius:10px;padding:16px;margin-bottom:12px}#movement-card small{display:block;color:#9db6ac;font-size:10px}#movement-card strong{display:block;font-size:26px;color:#d6efe1;margin:5px 0}#movement-card strong span{font-size:13px;color:#91ab9f}progress{appearance:none;width:100%;height:5px;margin:5px 0 9px}progress::-webkit-progress-bar{background:#2b3f37;border-radius:5px}progress::-webkit-progress-value{background:#8cc5a9;border-radius:5px}progress::-moz-progress-bar{background:#8cc5a9}.character-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:20px}.character-actions button{font-size:11px;padding:8px;background:#1e2937!important;border-color:#38475a!important;color:#c1cfe0!important}.sheet-section{padding:18px 0;border-top:1px solid var(--line);margin-top:16px}.sheet-section h3{font-size:13px;font-weight:600;margin-bottom:12px}#character-editor label{font-size:11px;color:#a3b2c6}#character-editor .space-y-2>div{margin-top:12px}#character-editor .grid{gap:8px}#character-editor input,#character-editor select{min-height:42px}#character-editor .flex select{min-width:0}.health-controls{display:flex;gap:8px}.health-controls input{min-width:0;width:64px;border:1px solid #344052;border-radius:7px;background:#0d131e;padding:8px}.health-controls button{flex:1}.health-controls button:nth-child(2){background:#502930!important;border-color:#7d3c48!important;color:#f9c0c8!important}.condition-config{display:flex;gap:10px;margin-bottom:12px}.condition-config label{font-size:11px;color:#9cadc1;min-width:0;flex:1}.condition-config input{margin-top:6px;width:100%;background:#0d131e;border:1px solid #344052;border-radius:7px;padding:9px;min-height:42px}#character-conditions{display:flex;flex-wrap:wrap;gap:6px}.condition-chip{padding:9px 10px;display:flex;align-items:center;gap:7px;font-size:11px;min-height:40px;background:#1c2736;border:1px solid #344052;border-radius:7px;color:#b7c6d8}.condition-chip.active{border-color:#8ebfa9;background:#315343;color:#def4e8}details{margin-top:12px;font-size:12px;color:#adbdcf;border:1px solid var(--line);border-radius:8px;padding:12px}summary{cursor:pointer;color:#d9e4f1}summary small{float:right;font-size:10px;color:#a1b4a9}details p{margin-top:10px;line-height:1.7}.danger-button{color:#eba4ac;border:1px solid #663842;border-radius:8px;padding:10px;width:100%;font-size:12px}
#selection-bar{position:absolute;left:calc(264px + 16px);right:calc(264px + 16px);bottom:16px;z-index:110;border:1px solid #3f5c51;background:#15261ff5;border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#c4dfd0;max-width:500px;margin:auto}#selection-bar button{color:#d5eee0;min-height:32px;font-weight:600;white-space:nowrap}#selection-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#panel-backdrop{position:fixed;inset:var(--header) 0 var(--nav);background:#03070d88;backdrop-filter:blur(2px);z-index:210;border:0;width:100%}body[data-panel=character] #character-panel{transform:translateX(0)}#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 20px);transform:translateX(-50%);padding:12px 18px;border:1px solid #42556c;background:#202d3d;color:#e1eaf5;max-width:calc(100vw - 32px);width:max-content;border-radius:10px;box-shadow:0 10px 40px #0008;z-index:700;font-size:12px;pointer-events:none}
body.panoramic .floating-menu,body .floating-menu{display:none!important}#panoramic-restore{display:none!important}body.panoramic #map-controls,body.panoramic #selection-bar{left:16px;right:16px}body.panoramic[data-panel=tools] #tools-panel,body.panoramic[data-panel=combat] #combat-panel{display:flex!important;position:fixed;top:var(--header);bottom:var(--nav);width:300px;z-index:230}body.panoramic[data-panel=tools] #tools-panel{left:0}body.panoramic[data-panel=combat] #combat-panel{right:0}
[id^=modal-]{z-index:400!important;padding:20px!important;overflow-y:auto;overscroll-behavior:contain}[id^=modal-]>div{max-width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;flex-shrink:0}[id^=modal-] h2{font-size:20px}[id^=modal-] .input-dark{min-height:42px}#modal-db-manager>div{width:960px}#modal-settings>div{width:640px}#modal-session>div{width:520px;padding:24px;border-radius:14px;background:#151d29;border:1px solid #3a485d}#modal-session label{display:block;font-size:12px;color:#aabbd0;margin:16px 0 6px}#modal-session p{font-size:12px;color:#9db0c7;line-height:1.7;margin:12px 0}#modal-session h2{font-weight:650}#modal-session h3{font-size:14px;margin-top:20px}#modal-session button{margin-top:12px}#modal-session input,#modal-session select{width:100%}.session-row{display:flex;gap:8px;align-items:center}.session-row input{min-width:0}.session-row button{margin:0!important;white-space:nowrap}#session-error{color:#ffb8bf!important}#assignment-list label{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px}.session-player #tools-panel .p-3,.session-player #tools-panel button[onclick*="spawnToken"],.session-player #character-editor,.session-player .health-controls,.session-player .condition-config,.session-player #character-conditions,.session-player .danger-button,.session-player button[onclick*="resetMovement"]{display:none!important}.session-player #tools-panel .p-3:first-child{display:none}.session-player #tools-panel .tool-btn:not(#btn-select):not(#btn-pan):not(#btn-measure):not(#btn-jump):not(#btn-vision){display:none}.session-player #combat-panel button{display:none}.session-player #undo-button,.session-player #redo-button{display:none}
@media(min-width:1101px){body:not(.panoramic)[data-panel=tools] #panel-backdrop,body:not(.panoramic)[data-panel=combat] #panel-backdrop{display:none}}
@media(max-width:1100px){#tools-panel,#combat-panel{position:fixed;top:var(--header);bottom:var(--nav);width:310px;max-width:90vw;z-index:230;transition:transform .2s}#tools-panel{left:0;transform:translateX(-101%)}#combat-panel{right:0;transform:translateX(101%)}body[data-panel=tools] #tools-panel,body[data-panel=combat] #combat-panel{transform:translateX(0)}.panel-close{display:block;font-size:24px;width:40px}#map-controls,#selection-bar{left:16px;right:16px}.map-tool-status{max-width:360px}#save-status{display:none}}
@media(max-width:600px){:root{--header:60px;--nav:64px}#app-header{padding:0 14px;gap:8px}.brand{gap:8px}.brand strong{font-size:19px}.brand-mark{width:30px;height:34px;font-size:23px}.brand small{font-size:7px}.header-actions{gap:4px}.header-actions .primary-button{font-size:11px;padding:8px 10px}#session-summary{display:none}#workspace-nav{gap:0}#workspace-nav button{flex:1;min-width:0;font-size:10px;gap:5px;flex-direction:column}#workspace-nav i{font-size:16px}#map-controls{left:10px;right:10px;top:10px;flex-wrap:wrap;gap:8px}.map-tool-status{max-width:100%;width:100%;padding:10px 12px;align-items:center}#tool-hint{flex-basis:auto;flex:1;font-size:9px;padding-left:0}.map-action-row{margin-left:auto}.map-action-row button{min-width:36px;min-height:40px}#selection-bar{left:10px;right:10px;bottom:10px;font-size:11px}#character-panel{width:100%;top:calc(var(--header) + 40px);border-radius:18px 18px 0 0}#map-stage{padding:32px}[id^=modal-]{padding:10px!important}[id^=modal-]>div{max-height:calc(100dvh - 20px);padding:20px!important;width:100%}#modal-db-manager .grid-cols-2,#modal-db-manager .grid-cols-3,#modal-settings .grid-cols-2{grid-template-columns:1fr}#modal-db-manager .w-1\/2{width:100%}.checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px) and (orientation:landscape){:root{--header:48px;--nav:50px}#app-header{padding:0 16px}.brand-mark{height:30px}.brand small{display:none}#workspace-nav button{flex-direction:row;gap:8px;font-size:11px}#map-controls{top:8px;flex-wrap:nowrap}.map-tool-status{width:auto;max-width:45%;padding:8px 10px}#tool-hint{display:none}.map-action-row button{min-height:32px}.sheet-heading{padding:12px 16px}#character-panel{top:var(--header);border-radius:0}#selection-bar{bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.create-token-button{margin:14px 12px 6px;width:calc(100% - 24px);display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}.tool-disclosure{margin:8px 12px;padding:12px 0;background:#101722}.tool-disclosure>summary{padding:0 12px;font-size:12px}.tool-disclosure>div{margin-top:10px}.tool-disclosure>div>.flex{flex-wrap:wrap}.tool-disclosure .p-3{padding:12px}.session-player .create-token-button,.session-player .tool-disclosure{display:none!important}

.session-player button[onclick*="saveAsTemplate"]{display:none!important}#character-vitals{display:flex;gap:8px;margin:12px 0;font-size:13px;color:#c6d9cf}#character-vitals span{flex:1;padding:12px;border:1px solid #344052;border-radius:8px;background:#101923}.session-player #character-vitals{margin-top:0}.tool-disclosure .text-xs label{min-height:40px}#selected-focus{margin-right:8px;color:#adcebf}

.initiative-row{display:grid;grid-template-columns:1fr 88px;align-items:center;gap:16px;font-size:13px;color:#c5d3e3;margin-bottom:12px}#modal-initiative>div{width:480px}#tools-panel .create-token-button{font-size:11px}.session-player #save-status{visibility:hidden}

#map-stage{padding-top:112px}#combat-tracker{min-height:80px}#combat-panel>.h-48{height:clamp(72px,22vh,160px);flex-shrink:1;min-height:64px}@media(max-height:500px) and (orientation:landscape){#map-stage{padding-top:64px}#combat-panel>div:first-child{min-height:44px;padding:8px 16px}#combat-panel>.p-2{padding:6px 10px}#combat-panel>.h-48{height:64px;min-height:50px}#combat-tracker{min-height:64px}#combat-panel button{min-height:32px}}

#grid-container{background-image:linear-gradient(to right,var(--grid-color) calc(1px / var(--map-zoom,1)),transparent 0),linear-gradient(to bottom,var(--grid-color) calc(1px / var(--map-zoom,1)),transparent 0)}