/* Shared tactical presentation. Geometry and visibility remain server-owned. */
.zoneBox { fill: #202425; stroke: #4b4e48; stroke-width: 1; }
/* Terrain reads at a glance: built places are warm timber, open ground is
   cool green-slate. Unclassifiable zones keep the neutral panel colour. */
.zoneBox.interior { fill: #251f17; stroke: #5a5140; }
.zoneBox.exterior { fill: #1a221c; stroke: #45543f; }
.zoneBox.here { stroke: var(--accent); stroke-width: 2; }
.zoneBox.interior.here { fill: #33291a; }
.zoneBox.exterior.here { fill: #26311f; }
.zoneBox.here:not(.interior):not(.exterior) { fill: #30291b; }
.zoneName { fill: var(--dim); font-family: var(--sans); font-size: 9px; }
.zoneName.here { fill: var(--accent-pale); }
.zoneMark { opacity: .55; }
.edge { stroke: #4a4e4a; stroke-width: 2; }
.pip { stroke: #101213; stroke-width: 1; }
.pip.party { fill: var(--ok); }
.pip.foe { fill: var(--blood); }
.pip.neutral { fill: #7a6a4a; }
.pip.down { fill: #514d47; }
.pip.active { stroke: var(--accent-pale); stroke-width: 2; }
.pip.you { stroke: #f5efdf; stroke-width: 1.6; }
.pipInitial {
  fill: #12161a;
  font-family: var(--sans);
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}
.pipName { fill: var(--ink-soft); font-family: var(--sans); text-anchor: middle; }
.pipName.you { fill: var(--accent-pale); font-weight: 700; }
.pipName.down { fill: #7d766a; }
.featMore { fill: var(--dim); font-family: var(--sans); font-size: 6px; }
.pipLabel { fill: var(--ink); font-family: var(--sans); font-size: 9px; }

.mapActionCell { fill: transparent; stroke-width: 2; cursor: pointer; }
.reachableCell { fill: rgba(73, 177, 116, .15); stroke: rgba(73, 177, 116, .48); }
.reachableCell:hover, .reachableCell:focus { fill: rgba(73, 177, 116, .32); stroke: #61d292; outline: none; }
.blockedCell { cursor: not-allowed; stroke: transparent; }
.blockedCell:hover, .blockedCell:focus { fill: rgba(168, 72, 62, .14); stroke: rgba(192, 86, 74, .55); outline: none; }
.movePreview { display: none; fill: none; stroke: #51c984; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 7; pointer-events: none; }
.movePreview.shown { display: block; }
.dashCell { fill: rgba(73, 140, 185, .10); stroke: #417faa; stroke-dasharray: 3 5; }
.dashCell:hover, .dashCell:focus, .dashReachable { fill: rgba(73, 140, 185, .24); stroke: #315f87; stroke-dasharray: 3 5; }
.rangeCell { fill: rgba(46, 126, 83, .08); stroke: rgba(46, 126, 83, .25); pointer-events: none; }
.selectedRoute { fill: none; stroke: #166137; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 5 6; pointer-events: none; }
.riskyPath { stroke: #976000; stroke-dasharray: 10 5 2 5; }
.routeWarning { fill: #6b3800; stroke: #fff3d1; stroke-width: 2; paint-order: stroke; font-size: 23px; text-anchor: middle; pointer-events: none; }
.waypointMarker { pointer-events: none; }
.waypointMarker circle { fill: #263e69; stroke: #fff4d3; stroke-width: 2; }
.waypointMarker text { fill: white; font: bold 12px sans-serif; text-anchor: middle; }
.targetRuler { display: none; pointer-events: none; }
.targetRuler.shown, .invalidRoute { display: block; }
.targetRuler line { stroke-width: 4; stroke-dasharray: 7 5; }
.targetRuler text { font: bold 25px sans-serif; stroke: #fff7df; stroke-width: 3; paint-order: stroke; }
.validRuler line { stroke: #146333; }
.validRuler text { fill: #146333; }
.invalidRuler line { stroke: #a02a28; }
.invalidRuler text { fill: #a02a28; }
.tacticalAim { cursor: crosshair; }
.tacticalAim:focus-visible { outline: 3px solid #234578; outline-offset: 4px; }
.movementHud { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; grid-column: 1 / -1; font: .85rem var(--sans); }
.movementHud[hidden] { display: none; }
.movementHud meter { width: 7rem; max-width: 30vw; }
.movementHud button { min-height: 40px; }
.movementMeter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex-basis: 100%; font-size: .85rem; }
.movementMeter meter { min-width: 8rem; height: 1.2rem; }
#mapMovementModifiers { flex-basis: 100%; }
#mapActionBar label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; }
#mapActionBar button, #mapActionBar select { min-height: 44px; }
#mapActionBar button[aria-pressed="true"] { outline: 2px solid var(--accent); }
#mapRouteOptions { flex-basis: 100%; }
#mapRouteOptions summary { min-height: 44px; padding: .65rem .3rem; cursor: pointer; font: .85rem var(--sans); }
.mapAdvancedControls { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; padding-bottom: .3rem; }
#mapActionStatus { flex-basis: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  #mapActionBar { gap: .4rem; }
  #mapActionBar label { flex: 1 1 44%; }
  #mapActionBar select { max-width: 100%; }
  #mapActionBar button { flex: 1 1 auto; }
  .movementHud { font-size: .75rem; }
}
.spellAimCell { fill: rgba(214, 151, 55, .13); stroke: rgba(214, 151, 55, .42); }
.spellAimCell:hover, .spellAimCell:focus { fill: rgba(214, 151, 55, .28); stroke: #f1b955; outline: none; }
.areaPreview { display: none; fill: rgba(227, 89, 54, .30); stroke: #ec784f; stroke-width: 2; pointer-events: none; }
.areaPreview.shown { display: block; }
.tacticalTarget { cursor: crosshair; stroke: #f0b84f !important; stroke-width: 4 !important; filter: drop-shadow(0 0 6px rgba(240,184,79,.8)); }
.tacticalTarget:hover, .tacticalTarget:focus { stroke: #fff5bf !important; outline: none; }
.tacticalPortal { cursor: pointer; stroke: #f0b84f !important; filter: drop-shadow(0 0 4px rgba(240,184,79,.75)); }
.tacticalObject { cursor: pointer; outline: 2px dashed rgba(91, 200, 242, .7); outline-offset: 4px; }
.tacticalObject.selected { outline: 3px solid #5bc8f2; filter: drop-shadow(0 0 6px rgba(91,200,242,.75)); }
.tokenStatus, .effectStatus, .elevationBadge { pointer-events: none; font-family: var(--sans); font-size: 8px; font-weight: 800; }
.tokenStatus.legacyStatus circle { fill: #7a2730; stroke: #fff1d0; stroke-width: 1; }
.tokenStatus.legacyStatus text { fill: #fff8e7; }
.tokenStatus.artStatus { filter: drop-shadow(0 1px 1px rgba(12, 10, 7, .42)); }
.elevationBadge rect { fill: #223846; stroke: #9bd5ef; stroke-width: 1; }
.elevationBadge text { fill: #dff5ff; }
.effectStatus rect { fill: #31566b; stroke: #b7e4f6; stroke-width: 1; }
.effectStatus text { fill: #effbff; }
.combatMotion { stroke: rgba(81, 201, 132, .85); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 6 7; pointer-events: none; animation: motionFade .9s ease-out both; }
.pip.fx-move { animation: tokenMove .55s ease-out; }
.pip.fx-hit { animation: tokenHit .55s ease-out; }
.pip.fx-heal { animation: tokenHeal .7s ease-out; }
.pip.fx-down { animation: tokenDown .75s ease-out; }
.pip.fx-move, .pip.fx-hit, .pip.fx-heal, .pip.fx-down { transform-box: fill-box; transform-origin: center; }
@keyframes tokenMove { 0% { transform: scale(.65); opacity: .45; } 65% { transform: scale(1.16); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tokenHit { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); fill: #d84b40; } 40%,80% { transform: translateX(7px); } }
@keyframes tokenHeal { 0% { filter: drop-shadow(0 0 0 #62d98c); } 50% { filter: drop-shadow(0 0 13px #62d98c); transform: scale(1.18); } 100% { filter: none; transform: scale(1); } }
@keyframes tokenDown { 0% { transform: scale(1); } 55% { transform: scale(1.2) rotate(8deg); fill: #9d3131; } 100% { transform: scale(.92) rotate(0); } }
@keyframes motionFade { from { opacity: 1; stroke-dashoffset: 24; } to { opacity: 0; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .combatMotion, .pip.fx-move, .pip.fx-hit, .pip.fx-heal, .pip.fx-down { animation: none !important; }
}

.edgeRoad { stroke: #3c423b; stroke-width: 9; stroke-linecap: round; }
.edgeDash { stroke: #79806f; stroke-width: 1.8; stroke-dasharray: 8 7; }
.featLabel { fill: var(--dim); font-family: var(--sans); text-anchor: middle; }

.roomTitle { fill: var(--ink-soft); font-family: var(--serif); }
.door { cursor: pointer; }
.doorLabel { fill: var(--dim); font-family: var(--sans); }
.door:hover .doorLabel { fill: var(--accent-pale); }
.door.fog { cursor: default; }
.door.fog .doorLabel { fill: #776f62; font-style: italic; }
.fogBadge { fill: rgba(10, 12, 12, .84); stroke: #75684e; stroke-width: 1; }
.fogText { fill: #d2c6aa; font-family: var(--sans); letter-spacing: .025em; }
.mapRemembered { opacity: .42; filter: saturate(.42); }
.memoryLabel { fill: #756b58; font-family: var(--sans); font-style: italic; letter-spacing: .08em; }
.mapLight { fill: rgba(236, 190, 75, .15); stroke: rgba(213, 158, 50, .22); stroke-width: 1; }
.mapTerrain { fill: rgba(109, 91, 61, .22); stroke: rgba(70, 59, 44, .3); stroke-width: 1; }
.terrain-water { fill: rgba(70, 120, 155, .3); }
.terrain-hazard { fill: rgba(155, 68, 47, .26); }
.terrain-difficult, .terrain-rubble { fill: rgba(105, 94, 78, .32); }
.mapWall { stroke: #262019; stroke-width: 8; stroke-linecap: square; }
.mapPortal { fill: none; stroke-width: 6; stroke-linecap: butt; }
.portal-door { stroke: #7d552f; }
.portal-door.state-open, .portal-door.state-broken { stroke-width: 2; stroke-dasharray: 7 7; opacity: .58; }
.portal-window { stroke: #4d91b8; stroke-width: 5; stroke-dasharray: 3 2; }
.portal-archway { stroke: #eee6d1; stroke-width: 9; stroke-dasharray: 8 5; }
.cellFog { pointer-events: none; }
.rememberedCell { fill: rgba(32, 31, 28, .48); }
.unknownCell { fill: #11191d; }
.propLabel { fill: var(--dim); font-family: var(--sans); }
.mapTooltip { position:fixed; z-index:1000; pointer-events:none; max-width:min(28rem,calc(100vw - 24px)); width:max-content; padding:.65rem .85rem; border:1px solid var(--accent,#ad873b); border-radius:.6rem; background:var(--panel,#172321); color:var(--ink,#f5eddb); box-shadow:0 4px 18px #0005; font:.9rem/1.45 var(--sans,sans-serif); white-space:pre-line; overflow-wrap:anywhere; }
.mapTooltip[hidden] { display:none; }
.featIcon:focus-visible { outline:2px solid var(--accent,#ad873b); outline-offset:3px; }
.hereFrame { fill: none; stroke: var(--accent); stroke-width: 2.5; }
/* PAPER MAPS — the classic look: black ink on grid paper below ground,
   pencil-and-parchment above it. Same truth (zones, doors, tokens), a
   different drawing language. */
.paper { --sans:ui-sans-serif,system-ui,sans-serif; --serif:Georgia,serif; --ink:#f2eadb; --ink-soft:#dbcfba; --dim:#b8b3a5; --accent:#e0b969; --accent-pale:#f5da9d; --ok:#a8d2b5; --blood:#ffa79d; background:#eee6d4; border-radius:6px; }
.paper .roomTitle { fill:#2b2418; }
.paper .doorLabel { fill:#514736; }
.paper .door:hover .doorLabel { fill:#73461a; }
.paper .propLabel,.paper .featLabel { fill:#514736; }
.paper .pipName { fill:#332c23; paint-order:stroke; stroke:#fff9e9; stroke-width:2px; stroke-linejoin:round; }
.paper .pipName.you { fill:#4e3615; font-weight:750; }
.paper .pipName.down { fill:#625749; }
.paper .pip { stroke:#fff7df; stroke-width:2; }
.paper .pip.party { fill:#35667b; }
.paper .pip.foe { fill:#963e34; }
.paper .pip.neutral { fill:#6e6148; }
.paper .pip.down { fill:#625749; }
.paper .pip.active { stroke:#c8952e; stroke-width:4; }
.paper .pip.you { stroke:#fff8e5; stroke-width:3; }
.paper .pipInitial { fill:#fff9e9; }
.paper .hereFrame { stroke:#94691e; }
.paper .propMark { filter:drop-shadow(0 1px 1px #30251633); }
.paper .mapWall { stroke:#38332b; }
.paper .mapRemembered { opacity:.6; filter:saturate(.15); }
.paper .rememberedCell { fill:#363d3e88; }
.paper .unknownCell { fill:#11191d; }
.paper .mapLight { fill:#edc97622; stroke:#b78c3433; }
.paper .memoryLabel { fill:#5b5345; }
body[data-theme="high-contrast"] .paper .pip { stroke-width:3; }
body[data-theme="high-contrast"] .paper .mapWall { stroke:#171512; }
body[data-theme="high-contrast"] .paper .pipName { stroke-width:3; }