/* --- world map strip ---------------------------------------- */ /* main's children are flex items, so z-index ranks them even at the default position:static - no position:relative needed here. Elevated only while a capital card is open (JS toggles this), so the panel doesn't otherwise sit above panels the admin has reordered on top of it. */ .panel.wm-popped { z-index: 20; } .worldmap .wm-stage { position: relative; aspect-ratio: 2 / 1; /* reserve space before the SVG loads - no layout shift */ } .wm-canvas { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--panel-brd); background: linear-gradient(to bottom, color-mix(in srgb, var(--sky-top) 55%, transparent), color-mix(in srgb, #0b2a4a 40%, transparent)); touch-action: pan-y; /* strip: let the page scroll; full screen flips this to none */ } .wm-svg { display: block; width: 100%; height: 100%; will-change: transform; } .wm-ocean { fill: transparent; pointer-events: none; } .wm-grat line { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 0.3; } .wm-c { fill: color-mix(in srgb, var(--ink) 80%, transparent); stroke: color-mix(in srgb, #0b2a4a 55%, transparent); stroke-width: 0.4; fill-rule: evenodd; cursor: pointer; transition: fill 0.12s ease; } .wm-c:hover, .wm-c.is-sel { fill: var(--accent); } .wm-c:focus-visible { outline: none; fill: var(--accent); stroke: var(--ink); stroke-width: 0.8; } .wm-cap { fill: var(--accent); opacity: 0.5; pointer-events: none; } .wm-hint { margin: 8px 0 0; font: 400 0.66rem/1.4 var(--mono); color: var(--ink-dim); } /* map buttons (full-screen toggle + zoom cluster) */ .wm-toolbar { position: absolute; top: 8px; right: 8px; z-index: 7; display: flex; gap: 6px; } .wm-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 7; display: flex; flex-direction: column; gap: 5px; } .wm-zoom[hidden] { display: none; } .wm-btn { width: 36px; height: 36px; display: grid; place-items: center; font: 600 1.1rem/1 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--sky-top), transparent 14%); border: 1px solid var(--panel-brd); border-radius: 10px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; } .wm-btn:hover { background: color-mix(in srgb, var(--sky-top), transparent 4%); } .wm-btn:active { transform: scale(0.94); } .wm-btn:disabled { opacity: 0.38; cursor: default; } .wm-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* --- full screen ------------------------------------------- */ html.wm-fs-lock, html.wm-fs-lock body { overflow: hidden; } /* stage is re-parented to while full screen, so no .worldmap prefix */ .wm-stage.wm-fs { position: fixed; inset: 0; z-index: 9999; aspect-ratio: auto; margin: 0; background: radial-gradient(120% 90% at 50% 32%, color-mix(in srgb, var(--sky-mid) 55%, var(--sky-top)) 0%, var(--sky-top) 70%); } .wm-stage.wm-fs .wm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; touch-action: none; } /* the SVG letterboxes inside the tall canvas; JS pan/zoom rides on top */ .wm-stage.wm-fs .wm-svg { will-change: transform; } .wm-stage.wm-fs .wm-hint { display: none; } .wm-stage.wm-fs .wm-toolbar { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); } /* stacked under the close button so the bottom sheet never covers it */ .wm-stage.wm-fs .wm-zoom { top: calc(54px + env(safe-area-inset-top, 0px)); bottom: auto; transform: none; right: calc(8px + env(safe-area-inset-right, 0px)); } /* --- capital card ---------------------------------------- */ .wm-pop { position: absolute; z-index: 8; min-width: 190px; max-width: 264px; /* opaque enough that the busy map behind never shows through the text (the shared --panel alpha is too low over the pale landmasses) */ background: color-mix(in srgb, var(--sky-top), transparent 6%); border: 1px solid var(--panel-brd); border-radius: 12px; padding: 11px 13px 12px; -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 14px 44px -18px var(--shadow); color: var(--ink); font-family: var(--sans); } .wm-pop[hidden] { display: none; } .wm-pop-hd { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; } .wm-pop-flag { font-size: 1.15rem; line-height: 1; } .wm-pop-cap { margin-top: 3px; font: 600 0.68rem/1.35 var(--mono); letter-spacing: 0.03em; color: var(--accent); } .wm-pop-grid { margin-top: 9px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; } .wm-pop-grid .wm-k { font: 600 0.6rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); opacity: 0.85; } .wm-pop-grid .wm-v { font-size: 0.74rem; color: var(--ink-soft); } .wm-pop-extract { margin: 9px 0 0; font-size: 0.75rem; line-height: 1.46; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .wm-pop-extract:empty { display: none; } .wm-pop-link { display: inline-block; margin-top: 9px; font: 600 0.68rem/1 var(--mono); color: var(--accent-2); text-decoration: none; } .wm-pop-link:hover { text-decoration: underline; } .wm-pop-grip, .wm-pop-x { display: none; } @media (max-width: 560px) { .wm-pop:not(.is-sheet) { max-width: 66vw; min-width: 150px; } } /* card as a bottom sheet (touch / narrow, in full screen) */ .wm-pop.is-sheet { left: 0; right: 0; bottom: 0; top: auto; min-width: 0; max-width: none; width: auto; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -16px 48px -14px var(--shadow); animation: wmSheet 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); touch-action: none; } @keyframes wmSheet { from { transform: translateY(100%); } to { transform: none; } } .wm-pop.is-sheet .wm-pop-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--ink-dim); opacity: 0.5; margin: 2px auto 12px; } .wm-pop.is-sheet .wm-pop-x { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-dim); font-size: 1rem; cursor: pointer; } .wm-pop.is-sheet .wm-pop-hd { padding-right: 36px; font-size: 1.02rem; } .wm-pop.is-sheet .wm-pop-extract { -webkit-line-clamp: 6; font-size: 0.8rem; } .wm-pop.is-sheet .wm-pop-grid .wm-v { font-size: 0.8rem; } @media (prefers-reduced-motion: reduce) { .wm-c { transition: none; } .wm-pop.is-sheet { animation: none; } }