:root{color-scheme:dark;--bg:#0c1118;--panel:#141c26;--panel2:#192330;--line:#283544;--text:#edf2f7;--muted:#8493a5;--gold:#d7aa61;--gold2:#f0c982;--ally:#62b8a0;--enemy:#e07878;--neutral:#a2aabb;--radius:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:800}.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 20%,#263442 0,#0c1118 60%)}.auth-card{width:min(100%,410px);padding:38px;background:#141d28;border:1px solid #344353;border-radius:20px;box-shadow:0 30px 100px #0008;text-align:center}.brand-mark{width:54px;height:54px;border:1px solid #9e7d4e;border-radius:16px;display:grid;place-items:center;margin:0 auto 20px;color:var(--gold2);font-size:27px;background:#d7aa6115}.brand-mark.small{width:38px;height:38px;margin:0;font-size:20px;border-radius:11px}.auth-card h1{font:700 24px Unbounded,sans-serif;line-height:1.5;letter-spacing:1px;margin:10px 0}.auth-card h1 span{color:var(--gold2)}.auth-copy{line-height:1.7;margin:12px 0 28px}.auth-card form,.modal form{display:grid;gap:15px;text-align:left}label{display:grid;gap:7px;color:#aeb9c7;font-size:12px;font-weight:700}input,select,textarea{width:100%;background:#0e151e;border:1px solid #344252;border-radius:9px;padding:12px;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--gold)}.btn{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-weight:800;font-size:12px;transition:.15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn.primary{background:linear-gradient(135deg,#d9b16d,#b88849);color:#1a1b1b}.btn.ghost{background:#1b2734;border-color:#344454;color:#dce4ec}.btn.danger{background:#542d32;border-color:#8b4148;color:#ffd8d8}.btn.full{width:100%;margin-top:5px}.link-button,.text-button{background:none;border:0;color:var(--gold2);font-size:12px;padding:12px}.message{min-height:18px;color:#e4b879;font-size:12px;text-align:center}.app-shell{min-height:100vh;display:flex}.sidebar{width:238px;flex:0 0 238px;background:#111923;border-right:1px solid var(--line);padding:25px 16px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 7px 32px}.brand strong{display:block;font:700 14px Unbounded,sans-serif;letter-spacing:1px}.brand span{display:block;color:var(--muted);font-size:8px;letter-spacing:2px;margin-top:5px}.campaign-label{font-size:9px;letter-spacing:1.7px;color:#728195;padding:0 10px 12px}.campaign-label b{float:right;color:var(--gold)}nav{display:grid;gap:6px}.nav-item{width:100%;border:0;background:transparent;color:#98a7b8;text-align:left;padding:12px;border-radius:9px;font-size:12px;font-weight:700}.nav-item span{display:inline-block;width:26px;color:#a7b3c1;font-size:16px}.nav-item.active{background:#26313e;color:#fff;box-shadow:inset 2px 0 var(--gold)}.nav-item.active span{color:var(--gold2)}.sidebar-bottom{margin-top:auto}.connection{display:flex;align-items:center;gap:9px;color:#8b9aac;font-size:10px;padding:12px 8px 18px}.connection i{width:7px;height:7px;border-radius:50%;background:#d5a75e;box-shadow:0 0 10px currentColor}.connection.online i{background:#64c59f}.connection.offline i{background:#e07878}.user-mini{border-top:1px solid var(--line);padding:17px 5px 8px;display:flex;align-items:center;gap:10px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#3a4655;color:var(--gold2);font-weight:800}.user-info{min-width:0}.user-info strong{display:block;max-width:145px;overflow:hidden;text-overflow:ellipsis;font-size:10px}.user-info span{font-size:9px;color:var(--muted)}.logout{font-size:10px}.workspace{flex:1;min-width:0;padding:0 30px 20px;max-width:1800px;margin:auto}.topbar{min-height:104px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar h2{font:600 21px Unbounded,sans-serif;margin:7px 0 0}.top-actions{display:flex;align-items:center;gap:10px}.save-status{font-size:10px;color:#7f9c8e;margin-right:10px}.role-pill{font-size:9px;letter-spacing:1px;color:var(--gold2);border:1px solid #80683f;border-radius:30px;padding:7px 10px}.icon-btn{width:34px;height:34px;background:#1a2531;border:1px solid #344252;border-radius:9px;color:#d5e0eb;font-size:17px}.view{padding-top:24px}.battle-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.stats{display:flex;gap:30px}.stat{display:grid;gap:5px}.stat span{font-size:8px;letter-spacing:1.3px;color:var(--muted);font-weight:800}.stat strong{font:600 22px Unbounded}.ally-text{color:var(--ally)}.enemy-text{color:var(--enemy)}.toolbar-actions{display:flex;gap:8px}.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:stretch}.map-panel,.roster-panel,.log-strip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:17px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel-head h3,.log-strip h3,.section-intro h3{font:600 15px Unbounded;margin:5px 0 0}.map-hint{color:#7f8ea0;font-size:10px}.battle-map{position:relative;width:100%;aspect-ratio:1.55;min-height:360px;max-height:620px;overflow:hidden;border:1px solid #40505a;border-radius:8px;background:linear-gradient(135deg,#293b3b,#233333 50%,#1c2d31)}.map-grid{position:absolute;inset:0;background-image:linear-gradient(#d0d9d012 1px,transparent 1px),linear-gradient(90deg,#d0d9d012 1px,transparent 1px);background-size:5% 10%;background-position:0 0}.battle-map:before,.battle-map:after{content:"";position:absolute;border:1px solid #b4a47a24;border-radius:50%;width:48%;height:65%;left:26%;top:18%;transform:rotate(-24deg)}.battle-map:after{width:28%;height:35%;left:38%;top:32%;border-style:dashed}.map-axis{position:absolute;z-index:2;color:#c7d0c080;font-size:8px;pointer-events:none}.axis-top{top:5px;left:7%;right:2%;text-align:center;letter-spacing:1.5px}.axis-left{top:8%;bottom:2%;left:6px;display:flex;flex-direction:column;justify-content:space-around}.map-tokens{position:absolute;inset:7% 4% 4% 8%;z-index:3}.map-token{position:absolute;width:42px;height:42px;border-radius:50%;border:2px solid #c4d3d4;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:11px;font-weight:900;color:#10171b;box-shadow:0 4px 14px #0008;cursor:grab;user-select:none}.map-token:active{cursor:grabbing}.map-token.ally{background:var(--ally);border-color:#b4f1dc}.map-token.enemy{background:var(--enemy);border-color:#ffd0ca}.map-token.neutral{background:var(--neutral);border-color:#e2e6ed}.map-token small{position:absolute;top:43px;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 4px #000;font-size:9px;font-weight:700}.map-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#c6d0ce;pointer-events:none}.map-empty span{font-size:35px;color:#c3a16c}.map-empty strong{font-size:13px}.map-empty small{font-size:10px;color:#a4b3ae}.map-legend{display:flex;gap:20px;padding:13px 2px 0;color:#aab6c2;font-size:9px}.map-legend span{display:flex;align-items:center;gap:7px}.legend-dot{width:7px;height:7px;border-radius:50%}.legend-dot.ally{background:var(--ally)}.legend-dot.enemy{background:var(--enemy)}.legend-dot.neutral{background:var(--neutral)}.counter{background:#283543;color:#d4b477;padding:4px 8px;border-radius:20px;font-size:10px}.filter-row{display:flex;gap:5px;border-bottom:1px solid var(--line);padding-bottom:12px}.filter{background:transparent;border:1px solid transparent;color:#8c9aab;padding:6px 9px;border-radius:7px;font-size:10px}.filter.active{background:#2a3541;color:#f1c87e;border-color:#4c4b40}.unit-list{display:grid;gap:8px;max-height:470px;overflow:auto;padding:12px 2px}.unit-card{background:#1b2733;border:1px solid #2e3d4c;border-radius:9px;padding:10px;display:flex;align-items:center;gap:9px;cursor:pointer}.unit-card:hover{border-color:#92784e}.unit-symbol{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;font-weight:900}.unit-symbol.ally{background:#285447;color:#8fe0c5}.unit-symbol.enemy{background:#58373b;color:#ffb5ad}.unit-symbol.neutral{background:#394451;color:#d2dae4}.unit-meta{min-width:0;flex:1}.unit-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.unit-meta small{display:block;color:#8190a0;font-size:9px;margin-top:4px}.hp-mini{font-size:9px;color:#b9c4ce}.empty-list{color:#718093;text-align:center;padding:28px 8px;font-size:11px}.log-strip{display:flex;align-items:center;gap:22px;margin-top:16px}.log-strip>div:first-child{flex:0 0 auto}.recent-log{flex:1;color:#a9b6c3;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-button{white-space:nowrap}.section-intro{display:flex;justify-content:space-between;align-items:center;margin:8px 0 22px}.section-intro p{color:var(--muted);font-size:11px}.roster-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.roster-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px}.roster-card-head{display:flex;justify-content:space-between;align-items:center}.roster-card h4{margin:12px 0 5px;font-size:13px}.roster-card p{color:var(--muted);font-size:10px;min-height:28px}.roster-card .unit-stats{display:flex;gap:14px;color:#aebdca;font-size:10px}.chronicle-list{display:grid;gap:8px}.chronicle-item{display:flex;gap:15px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px}.chronicle-time{color:var(--gold);font-size:9px;white-space:nowrap;padding-top:2px}.chronicle-text{font-size:11px;color:#d4dce5}.footer-note{text-align:center;color:#586777;font-size:8px;letter-spacing:2px;padding:30px 0 8px}.footer-note span{color:var(--gold)}.modal{width:min(94vw,470px);border:1px solid #425263;border-radius:16px;background:#17212c;color:var(--text);padding:23px;box-shadow:0 24px 90px #000b}.modal::backdrop{background:#05090dcc;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h3{font:600 16px Unbounded;margin:6px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;align-items:center;gap:8px;margin-top:5px}.modal-actions span{flex:1}.member-list{display:grid;gap:7px;margin-top:14px}.member-row{display:flex;justify-content:space-between;align-items:center;padding:9px;background:#202c39;border-radius:8px;font-size:10px}.member-row button{background:none;border:0;color:#e58d8d}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#263644;border:1px solid #516477;border-radius:10px;padding:11px 16px;color:#f2f5f8;font-size:11px;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:1000px){.battle-layout{grid-template-columns:minmax(0,1fr) 260px}.workspace{padding:0 18px 20px}.sidebar{width:205px;flex-basis:205px}}@media(max-width:760px){.app-shell{display:block}.sidebar{width:100%;padding:12px 15px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 3px 10px}.campaign-label,.sidebar-bottom{display:none}nav{display:flex;gap:5px;overflow:auto}nav .nav-item{white-space:nowrap;width:auto;padding:9px}.workspace{padding:0 12px 18px}.topbar{min-height:82px}.topbar h2{font-size:16px}.save-status{display:none}.battle-toolbar{align-items:flex-start;flex-direction:column}.stats{gap:20px}.battle-layout{grid-template-columns:1fr}.battle-map{min-height:300px;aspect-ratio:1.15}.roster-panel{min-height:200px}.unit-list{max-height:260px}.log-strip{flex-wrap:wrap;gap:10px}.recent-log{flex-basis:100%;order:3}.top-actions{gap:6px}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.section-intro{gap:10px}.section-intro h3{font-size:13px}}
/* Sword Coast map and army catalogue */
.battle-map{aspect-ratio:1.5;min-height:420px;max-height:760px;background:#172c37;border-color:#75684d}
.faerun-map-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.map-tokens{inset:0}
.map-token{width:38px;height:38px;cursor:grab}
.map-token small{top:39px;background:#111923d9;padding:2px 5px;border-radius:4px}
.map-empty{background:#0b111866}
.map-attribution{padding:7px 2px 0;color:#718093;font-size:9px;text-align:right}
.map-attribution a{color:#c6a66e;text-decoration:none}
.map-attribution a:hover{text-decoration:underline}
.catalog-panel{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.catalog-head{margin-bottom:15px}
.catalog-head h3{font:600 16px Unbounded;margin:5px 0}
.catalog-head p{margin:7px 0 0;color:var(--muted);font-size:10px}
.catalog-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.catalog-faction{min-width:0;background:#101923;border:1px solid var(--line);border-radius:11px;padding:13px}
.catalog-faction-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.catalog-faction-head h4{font:600 13px Unbounded;margin:5px 0 0}
.catalog-total{font-size:9px;color:#a9b6c3;text-align:right}
.catalog-faction.allies .catalog-faction-head h4{color:var(--ally)}
.catalog-faction.cult .catalog-faction-head h4{color:var(--enemy)}
.catalog-list{display:grid;gap:6px}
.catalog-unit{display:flex;align-items:center;gap:8px;padding:8px;background:#1a2531;border:1px solid #2b3947;border-radius:8px;min-width:0}
.catalog-unit-main{flex:1;min-width:0}
.catalog-unit-main strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-unit-main small{display:block;font-size:8px;color:#8493a5;margin-top:3px}
.catalog-unit-stats{display:flex;gap:6px;color:#bdc9d4;font-size:9px;white-space:nowrap}
.catalog-unit-actions{display:flex;align-items:center;gap:6px}
.catalog-qty{font-size:10px;color:var(--gold2);font-weight:800}
.deploy-btn{padding:4px 8px;min-width:28px;font-size:11px}
.special-head{margin:15px 0 8px;color:var(--gold2);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.special-tag{color:#d9b16d;border:1px solid #6c5736;border-radius:5px;padding:3px 5px;font-size:8px}
.catalog-note{font-size:9px;line-height:1.5;color:#d6ad72;margin:10px 2px 0}
@media(max-width:900px){.catalog-columns{grid-template-columns:1fr}}
@media(max-width:760px){.battle-map{min-height:300px;aspect-ratio:1.15}.catalog-panel{padding:12px}.catalog-faction{padding:10px}.catalog-unit{gap:6px}.catalog-unit-stats{gap:4px;font-size:8px}}

/* Larger full-map tactical viewport and zoom controls */
.battle-layout{grid-template-columns:minmax(0,1fr) 270px;align-items:start}
.map-panel{min-width:0}
.map-controls{display:flex;align-items:center;gap:7px;margin:-3px 0 12px}
.map-zoom-btn{width:36px;height:34px;padding:0;font-size:18px;line-height:1}
.map-zoom-label{min-width:48px;text-align:center;color:#e6c58e;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.map-fit-btn{height:34px;padding:0 11px}
.map-zoom-hint{margin-left:auto;color:#7f8ea0;font-size:9px}
.battle-map{height:clamp(460px,calc(100vh - 285px),820px);min-height:460px;max-height:820px;aspect-ratio:auto;background:#101923;touch-action:pan-y}
.map-world{position:absolute;inset:0;transform:scale(1);transform-origin:50% 50%;transition:transform .12s ease-out}
.faerun-map-image{object-fit:contain}
.map-tokens{inset:0}
.map-token{touch-action:none}
.map-empty{z-index:4}
@media(max-width:1000px){.battle-layout{grid-template-columns:minmax(0,1fr) 245px}}
@media(max-width:760px){
 .battle-layout{grid-template-columns:1fr}
 .battle-map{height:min(68vh,620px);min-height:360px;aspect-ratio:auto}
 .map-zoom-hint{display:none}
 .map-controls{margin-bottom:9px}
}
@media(max-height:760px) and (min-width:761px){.battle-map{height:calc(100vh - 245px);min-height:390px}}

/* Calibrated hex battlefield layer and functional zoom/pan */
.battle-map{height:clamp(430px,68vh,820px);min-height:430px;max-height:820px;aspect-ratio:auto;overflow:hidden;touch-action:none;position:relative;cursor:grab}
.battle-map:active{cursor:grabbing}
.battle-map:before,.battle-map:after{display:none;content:none}
.map-world{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:auto;height:auto;aspect-ratio:17 / 11;inset:auto;overflow:visible;transform:translate(-50%,-50%) scale(1);transform-origin:center center;transition:transform .08s linear;will-change:transform}
.faerun-map-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.hex-grid{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-tokens{position:absolute;inset:0;z-index:3}
.map-token{width:calc(var(--hex-width,9px)*.86);height:calc(var(--hex-width,9px)*.86);min-width:0;min-height:0;padding:0;border-width:1px;font-size:clamp(4px,calc(var(--hex-width,9px)*.43),8px);line-height:1;box-shadow:0 1px 4px #000a;overflow:visible}
.map-token small{display:none;position:absolute;z-index:8;top:calc(100% + 5px);left:50%;transform:translateX(-50%);max-width:220px;padding:4px 7px;border:1px solid #b99b68;border-radius:5px;background:#101923f2;color:#fff;font-size:11px;line-height:1.3;white-space:nowrap;overflow:visible;text-overflow:clip;pointer-events:none}
.map-token:hover small,.map-token:focus-visible small{display:block}
.map-token:focus-visible{outline:2px solid #fff;outline-offset:2px}
.map-empty{z-index:5;pointer-events:none}
.map-zoom-hint{max-width:55%;text-align:right;line-height:1.35}
@media(max-width:760px){.battle-map{height:62vh;min-height:360px}.map-zoom-hint{display:none}}

/* Ensure the hex overlay is visibly composited above the map image */
#mapWorld{isolation:isolate}
#hexGrid.hex-grid{display:block!important;visibility:visible!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:2!important;overflow:hidden!important;pointer-events:none!important}
#hexGrid rect{fill:url(#hexPattern)!important}
#hexGrid path{stroke:#000!important;stroke-opacity:.22!important;stroke-width:.65px!important;fill:none!important;vector-effect:non-scaling-stroke;stroke-linejoin:round!important}