.map-shell{min-width:0}
.map-placeholder{box-sizing:border-box;max-width:100%;visibility:hidden;pointer-events:none;flex:none;overflow:hidden}
.map-controls{position:absolute;z-index:10;right:8px;top:8px;display:flex;align-items:flex-start;gap:2px;max-width:calc(100% - 16px);margin:0;padding:3px;border:1px solid #536570;border-radius:8px;background:#13212bf2;color:#e4edf2;box-shadow:0 2px 8px #0003;cursor:default;touch-action:manipulation}
.map-camera-controls{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0}
.map-with-navigation{display:grid;grid-template-columns:minmax(0,1fr);width:max-content}
.map-projection-controls{display:flex;align-items:center;flex:none;padding-right:3px;margin-right:1px;border-right:1px solid #536570}
.map-projection-controls .map-control{font-family:var(--mono,monospace);font-weight:600;padding-inline:6px}
.map-projection-controls .map-control[aria-busy=true]{opacity:.65;cursor:progress}
/* Auxiliary rows fill the primary controls' width without widening them. */
.map-navigation-panel{display:grid;gap:6px;contain:inline-size;max-width:100%;min-width:0;margin-top:3px;padding:7px 4px 4px;border-top:1px solid #536570}
.map-navigation-panel[hidden],.map-drag-controls[hidden]{display:none}
.map-drag-controls{display:flex;gap:4px;justify-content:center}
.map-drag-controls .map-control{flex:1;max-width:10rem;border-color:#536570}
.map-direction-controls{display:flex;align-items:center;justify-content:center;gap:4px}
.map-direction-controls .map-control{border-color:#536570}
.map-navigation-hint,.map-spatial-status{margin:2px 4px 3px;font-size:.75rem;line-height:1.5;color:#cad8e0;overflow-wrap:anywhere}
.map-spatial-status{contain:inline-size;min-width:0;max-width:100%}
.map-spatial-status{color:#ffcf8b}
.map-view-controls{display:flex;flex-wrap:wrap;gap:2px;max-width:100%}
.map-controls .map-control{min-width:36px;min-height:36px;padding:5px 8px;font-size:.8125rem;line-height:1.4;border-color:transparent;background:transparent;color:inherit}
.map-controls .map-control:hover{background:#30444f}
.map-controls .map-control:is([aria-expanded=true],[aria-pressed=true]){color:#ffcf8b;background:#30444f}
.map-controls .map-control:focus-visible{outline-color:#ffdfb0;outline-offset:-2px}
.map-zoom-controls{display:flex;align-items:center;flex-wrap:wrap;gap:0;min-width:0;max-width:100%;border-right:1px solid #536570;padding-right:3px;margin-right:1px}
.map-controls .map-control-icon{display:grid;place-items:center;width:36px;padding:7px}
.map-control-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-zoom-level{font:.6875rem var(--mono,monospace);min-width:3.2em;text-align:center;color:#cad8e0}
.map-viewport,.map-load-state{position:relative;width:100%;aspect-ratio:1000/680;min-height:240px;border:1px solid #34444c;border-radius:8px;background:#0a111a}
.map-viewport{overflow:clip;overflow-anchor:none;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;scroll-margin:8px}
.map-viewport[data-map-unavailable]{touch-action:auto;cursor:default}
.map-viewport[data-map-navigation-open]{min-height:calc(var(--map-controls-inset,60px) + 220px)!important}
.atlas-viewport>.map-load-state{position:absolute;inset:0;z-index:3;height:100%;min-height:0;aspect-ratio:auto;border:0;border-radius:inherit;overflow:auto;touch-action:auto;cursor:default;padding-top:calc(var(--map-controls-inset,60px) + 16px)}
/* Error copy may outgrow the canvas at enlarged text sizes. Intrinsic rows
   keep wrapped Retry labels inside their controls instead of compressing them. */
.map-load-state{display:grid;grid-auto-rows:max-content;place-content:center;align-content:safe center;justify-items:center;gap:16px;padding:24px;color:#cad8e0;text-align:center;overflow-wrap:anywhere}
.map-load-state>p{margin:0;max-width:32em;line-height:1.5}
.map-load-state>button{max-width:100%;color:#e4edf2;border-color:#536570;background:#13212b}
.map-load-state>button:hover{background:#30444f}
.map-load-state>button:focus-visible{outline-color:#ffdfb0}
.map-viewport:active{cursor:grabbing}
.map-viewport:focus-visible{outline:2px solid var(--focus,#d9b17c);outline-offset:3px}
.map-viewport>.map-scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;transform-origin:0 0;overflow:visible;aspect-ratio:auto}
/* SVG non-scaling-stroke alone does not cover an outer CSS camera transform. */
.map-viewport .atlas-lines line{stroke-width:calc(1px / var(--map-zoom,1))}
.map-viewport .atlas-player-lines line{stroke-width:calc(2px / var(--map-zoom,1));stroke-dasharray:calc(4px / var(--map-zoom,1)) calc(4px / var(--map-zoom,1))}
.map-dialog-open{overflow:hidden}
dialog.map-dialog{--map-dialog-inset:16px;box-sizing:border-box;width:calc(100vw - 32px);max-width:none;height:calc(100dvh - 32px);max-height:100dvh;padding:var(--map-dialog-inset);border:1px solid var(--line,#48545d);border-radius:12px;background:var(--page,#111113);color:var(--text,#e7e7e7);overflow:auto}
dialog.map-dialog::backdrop{background:#05090ed9}
/* A scrolled index must not strand pointer users away from the in-map exit.
   It is fixed only while that original control is outside the scrollport. */
.map-dialog-return{position:fixed;z-index:20;top:max(32px,env(safe-area-inset-top));right:max(32px,env(safe-area-inset-right));max-width:calc(100vw - 64px);min-height:44px;background:var(--surface,#18191b);color:var(--text,#e7e7e7);border-color:var(--control,#536570);box-shadow:0 2px 8px #0003}
.map-dialog-return svg{display:none}
.map-dialog-return:hover{background:var(--hover,#212225)}
dialog.map-dialog,.map-shell:fullscreen{scroll-padding-block-start:calc(2.5rem + max(40px,env(safe-area-inset-top)))}
dialog.map-fullscreen .map-dialog-return,.map-shell:fullscreen>.map-dialog-return{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - 24px)}
@media(max-width:600px){.map-dialog-return{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - 24px)}}
.map-dialog:has(.map-contained-scroll){overflow:hidden}
.map-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-width:0;padding-top:max(0px,env(safe-area-inset-top) - var(--map-dialog-inset));padding-right:max(6px,env(safe-area-inset-right) - var(--map-dialog-inset));padding-left:max(6px,env(safe-area-inset-left) - var(--map-dialog-inset))}
.map-dialog-title{font-size:.875rem;font-weight:600;overflow-wrap:anywhere}
.map-dialog-bar>.map-dialog-return{position:static;display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;padding:0;box-shadow:none}
.map-dialog-bar>.map-dialog-return:focus-visible{outline-offset:-4px}
.map-dialog-bar>.race-clock{margin-inline-start:auto;min-height:38px;padding:6px 8px}
.map-dialog-bar:has(>.race-clock) .map-dialog-title{min-width:0}
.map-dialog-bar .map-return-label{display:none}
.map-dialog-bar .map-dialog-return svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
dialog.map-dialog .map-viewport{height: min(64dvh,900px);min-height:260px;aspect-ratio:auto}
dialog.map-dialog .map-shell{width:100%;max-width:none;margin:0}
.map-shell:fullscreen{--map-dialog-inset:12px;box-sizing:border-box;width:100vw;height:100dvh;padding:var(--map-dialog-inset);overflow:auto;background:var(--page,#111113);color:var(--text,#e7e7e7)}
dialog.map-dialog.map-fullscreen,dialog.map-dialog:fullscreen{--map-dialog-inset:12px;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;margin:0;padding:var(--map-dialog-inset)}
/* Fullscreen height is a default; each mode's flexible workspace owns its canvas. */
dialog.map-dialog:where(.map-fullscreen) .map-viewport{height:72dvh}
@media(max-width:600px){.map-controls .map-control{min-height:40px;padding:5px 8px}dialog.map-dialog{--map-dialog-inset:12px;padding:var(--map-dialog-inset);width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0}dialog.map-dialog .map-viewport,dialog.map-dialog.map-fullscreen .map-viewport{height:55dvh;min-height:240px}}
/* The completed island gets the available screen, with controls and the full
   word index alongside it. Geometry remains isotropic inside the flexible box. */
dialog.map-dialog .world-section.map-shell{display:flex;flex-direction:column;height:100%;min-height:0}
dialog.map-dialog .world-section.map-contained-scroll{gap:12px;overflow:hidden}
dialog.map-dialog .world-section.map-contained-scroll>.world-reading{display:flex;flex-direction:column;position:relative;flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:6px;scroll-padding:6px}
.world-section.map-contained-scroll>.map-replay{margin:0 6px 6px}
dialog.map-dialog .world-reading:focus-visible{outline-offset:-4px}
dialog.map-dialog .world-section.map-contained-scroll #world-caption{display:none}
dialog.map-dialog .world-section.map-contained-scroll .world-toolbar:not(:has(>:not([hidden]):not(#world-caption))){display:none}
/* Retain the scale's intrinsic height; short dialogs scroll before replay overlaps it. */
dialog.map-dialog .world-section.round-map>.world-reading{display:grid;grid-template-rows:auto minmax(min-content,1fr) auto auto}
dialog.map-dialog .world-section.round-map>.world-reading>.world{align-self:stretch}
dialog.map-dialog .world-section.round-map>.world-reading>.map-replay{grid-column:1/-1;grid-row:3}
dialog.map-dialog .world-section.round-map>.world-reading>.world-footer{grid-row:4}
dialog.map-dialog .world-section>.world-reading>.world-toolbar,dialog.map-dialog .world-section>.world-reading>.world-footer{flex:none}
dialog.map-dialog .world-section .world{display:flex;flex-direction:column;flex:1;min-height:0}
dialog.map-dialog .world-section .map-viewport{flex:1;height:auto;min-height:min(240px,40dvh);aspect-ratio:auto}
dialog.map-dialog .world-section .map-meta{flex:none;max-height:25dvh;overflow:auto;overscroll-behavior:contain;padding:2px}
/* Expanded island lists extend the page; they never resize the canvas above.
   The adapter subtracts persistent controls from the current viewport height. */
dialog.map-dialog:has(.world-section[data-expanded-canvas]):not(:has(.world-reading)),.world-section[data-expanded-canvas]:fullscreen:not(:has(>.world-reading)),.world-section[data-expanded-canvas]>.world-reading{scrollbar-gutter:stable}
dialog.map-dialog .world-section.round-map[data-expanded-canvas]>.world-reading{grid-template-rows:auto minmax(min-content,auto) auto;align-content:start}
dialog.map-dialog .world-section.round-map[data-expanded-canvas]>.world-reading>.world-footer{grid-row:3}
dialog.map-dialog .world-section[data-expanded-canvas] .world{display:block;flex:none}
dialog.map-dialog .world-section[data-expanded-canvas] .map-viewport{flex:none;height:var(--expanded-canvas-height,60dvh)}
dialog.map-dialog .world-section[data-expanded-canvas] .map-meta{max-height:none;overflow:visible;padding:4px}
/* Seeking to an empty frame hides controls without moving the replay above. */
.world-section[data-expanded-canvas] .map-meta-grid>details[hidden]{display:contents!important;visibility:hidden;pointer-events:none}
.world-section[data-expanded-canvas] .map-meta-grid>details[hidden]::details-content{display:none}
@media(pointer:coarse){.map-controls .map-control{min-height:44px;min-width:44px}}