/* Shardkeep — mapa świata (public/js/ui/worldmap.js). Wszystko pod .wm-root, żeby nie kolidować ze stylem gry.
   Stylistyka: kolorowa, „niskowielokątowa” mapa w ramie z ciemnego kamienia z błękitną, świecącą krawędzią — jak logo,
   menu główne i okna gry (style.css). Nazwy zmiennych --wm-gold* zostały z dawnego złotego motywu; dziś to kolory ram. */
.wm-root { --wm-gold: rgba(110, 190, 255, .6); --wm-gold-hi: #eef4ff; --wm-gold-dim: rgba(120, 165, 215, .34); --wm-panel: #0e121a; --wm-ink: #e6ecf5; --wm-dim: #9eaabd; --wm-biome: #79c84e;
  --wm-stone: #0c0f16; --wm-plate: linear-gradient(#636a78, #474d59 48%, #3a3f4a 52%, #2c3139);
  position: absolute; inset: 0; z-index: 60; overflow: hidden; background: #1d5a8a; color: var(--wm-ink); font: 14px/1.4 "Segoe UI", system-ui, sans-serif; user-select: none; outline: none; }
.wm-root *, .wm-root *::before, .wm-root *::after { box-sizing: border-box; }
.wm-root.wm-hidden { display: none; }
.wm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.wm-dragging .wm-canvas { cursor: grabbing; }
.wm-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 58%, rgba(6, 16, 34, .5) 100%), linear-gradient(rgba(8, 12, 22, .55), transparent 120px); }

/* rama z narożnikami */
.wm-frame { position: absolute; inset: 0; pointer-events: none; border: 7px solid var(--wm-stone); box-shadow: inset 0 0 0 1px var(--wm-gold), inset 0 0 14px rgba(80, 160, 255, .35), inset 0 0 60px rgba(0, 0, 0, .35); }
.wm-frame i { position: absolute; width: 34px; height: 34px; border: 1px solid var(--wm-gold); background: var(--wm-stone); transform: rotate(45deg); box-shadow: inset 0 0 0 4px var(--wm-stone), inset 0 0 0 5px var(--wm-gold-dim), 0 0 10px rgba(80, 160, 255, .35); }
.wm-frame i:nth-child(1) { left: -18px; top: -18px; } .wm-frame i:nth-child(2) { right: -18px; top: -18px; }
.wm-frame i:nth-child(3) { left: -18px; bottom: -18px; } .wm-frame i:nth-child(4) { right: -18px; bottom: -18px; }

/* pasek tytułu */
.wm-top { position: absolute; left: 7px; right: 7px; top: 7px; height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 20px; pointer-events: none;
  background: linear-gradient(rgba(12, 15, 22, .94), rgba(12, 15, 22, .82) 70%, rgba(12, 15, 22, 0)); }
.wm-top > * { pointer-events: auto; }
.wm-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wm-crest { flex: none; width: 30px; height: 30px; transform: rotate(45deg); border: 1px solid #b8dcff; background: linear-gradient(135deg, #7fd8ff, #2f7fe0 55%, #1b3f8a); box-shadow: 0 0 14px rgba(110, 200, 255, .75), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.wm-title h1 { margin: 0; font: 700 22px/1.05 Georgia, "Times New Roman", serif; letter-spacing: .06em; color: var(--wm-gold-hi); text-shadow: 0 2px 0 #1a2030, 0 0 12px rgba(110, 190, 255, .5); white-space: nowrap; }
.wm-title p { margin: 2px 0 0; font-size: 12px; color: var(--wm-dim); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.wm-stats { display: flex; gap: 10px; margin-left: auto; }
.wm-stat { display: flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--wm-gold-dim); border-radius: 16px; background: rgba(8, 11, 17, .75); white-space: nowrap; }
.wm-stat b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.wm-stat span { font-size: 11px; color: var(--wm-dim); text-transform: uppercase; letter-spacing: .07em; }
.wm-stat svg { width: 17px; height: 17px; fill: #ffd23f; filter: drop-shadow(0 1px 1px #000); }
.wm-gold b { color: #ffe08a; } .wm-blue b { color: #8fc4ff; }
.wm-root button { font: inherit; color: var(--wm-ink); cursor: pointer; box-shadow: none; text-shadow: none; transition: filter .14s, box-shadow .14s, border-color .14s; }
.wm-root kbd { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; padding: 3px 6px; margin-left: 8px; border: 1px solid rgba(190, 220, 255, .4); border-radius: 4px; background: rgba(0, 0, 0, .3); color: #dbe7f5; }
.wm-close { flex: none; padding: 8px 12px 8px 14px; border: 1px solid #8fa0b8; border-radius: 6px; background: var(--wm-plate); color: #eef4ff !important; box-shadow: 0 0 0 1px #12151c, 0 3px 10px #0009, inset 0 1px 0 rgba(255, 255, 255, .22) !important; white-space: nowrap; }
.wm-close:hover, .wm-zoom button:hover { filter: brightness(1.1); border-color: #b8d8ff; box-shadow: 0 0 0 1px #12151c, 0 0 14px rgba(80, 170, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .28) !important; }

/* legenda, podpowiedź klawiszy, przybliżanie */
.wm-legend { position: absolute; left: 22px; bottom: 20px; display: flex; gap: 14px; padding: 7px 14px; border: 1px solid var(--wm-gold-dim); border-radius: 18px; background: rgba(12, 15, 22, .85); font-size: 12px; pointer-events: none; }
.wm-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wm-legend em { font-style: normal; color: #d6e0ee; }
.wm-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #e7b23c; background: #79c84e; flex: none; }
.wm-dot.wm-available { box-shadow: 0 0 0 2px rgba(255, 226, 122, .55), 0 0 8px #ffe27a; }
.wm-dot.wm-done { background: #2fae4a; border-color: #fff; }
.wm-dot.wm-locked { background: #6d727a; border-color: #9aa0a9; }
.wm-dot.wm-boss { background: #8f1a17; border-color: #e7b23c; border-radius: 3px; transform: rotate(45deg) scale(.86); }
.wm-dot.wm-room { background: #2f7fe0; border-color: #fff; }
.wm-dot.wm-rift { background: radial-gradient(circle, #fff 0 20%, #b88cff 45%, #3a1a6a 100%); border-color: #e4d2ff; box-shadow: 0 0 8px #b88cff; animation: wm-rift-dot 2.4s linear infinite; }
@keyframes wm-rift-dot { to { filter: hue-rotate(360deg); } }
/* karta szczeliny */
.wm-tag-rift { background: linear-gradient(90deg, var(--wm-biome), #8a5cff); color: #fff; }
.wm-rift-clock { margin-left: auto; font-size: 12px; color: #e6dcc6; }
.wm-rift-clock b { font-variant-numeric: tabular-nums; color: #fff; }
.wm-rift-clock.gone { color: #ffb27a; }
.wm-rift-num { background: radial-gradient(circle at 50% 50%, #fff 0 12%, var(--wm-biome) 42%, #1d0f38 100%) !important; box-shadow: 0 0 18px var(--wm-biome); animation: wm-rift-spin 3s linear infinite; }
@keyframes wm-rift-spin { to { transform: rotate(360deg); } }
.wm-start.wm-rift-start:not(:disabled) { background: linear-gradient(180deg, #b79bff, #6a3ae0 60%, #45208f); border-color: #e4d2ff; color: #fff !important; text-shadow: 0 1px 2px rgba(20, 0, 50, .7) !important; box-shadow: 0 0 20px rgba(160, 120, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .45) !important; }
.wm-start.wm-rift-start kbd { color: #fff; background: rgba(30, 10, 70, .35); border-color: rgba(255, 255, 255, .4); }
/* karta podziemia */
.wm-tag-dungeon { background: linear-gradient(90deg, #5a1408, #d2501c); border-color: #ff8a3c; color: #ffe2c4; }
.wm-dg-num { background: radial-gradient(ellipse 60% 70% at 50% 85%, #ffd36a 0 14%, #e0571b 40%, #3a0c06 78%) !important; border-color: #ffb27a !important; box-shadow: 0 0 16px rgba(255, 110, 30, .7) !important; border-radius: 19px 19px 6px 6px !important; animation: wm-dg-ember 2.2s ease-in-out infinite; }
@keyframes wm-dg-ember { 50% { filter: brightness(1.25); box-shadow: 0 0 24px rgba(255, 130, 40, .9); } }
.wm-dg-bosses b { min-width: 22px; text-align: center; }
.wm-start.wm-dg-start { background: linear-gradient(180deg, #ff9a4a, #c2381a 60%, #6a1a0c); border-color: #ffc89a; color: #fff !important; text-shadow: 0 1px 2px rgba(50, 10, 0, .8) !important; box-shadow: 0 0 20px rgba(255, 110, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.wm-foot .wm-locknote:last-child { margin: 2px 0; }
.wm-dg-party { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 10px; border: 1px solid rgba(255, 190, 90, .65); border-radius: 6px; background: rgba(255, 170, 40, .14); color: #ffe2a8; font-size: 13px; font-weight: 600; }
.wm-dg-party i { font-style: normal; font-size: 17px; line-height: 1; }
/* krypta: zimna, zielonkawa poświata zamiast żaru */
.wm-dg-crypt .wm-dg-num { background: radial-gradient(ellipse 60% 70% at 50% 85%, #d8fff2 0 14%, #3ad6a8 40%, #0a2e28 78%) !important; border-color: #9effe0 !important; box-shadow: 0 0 16px rgba(60, 230, 180, .7) !important; }
/* pień (las), cytadela (lód), świątynia (dżungla) — własna barwa poświaty na znaczku banera i przycisku wejścia */
.wm-dg-hollow .wm-dg-num { background: radial-gradient(ellipse 60% 70% at 50% 85%, #eaffc0 0 14%, #7ad83a 40%, #1a2a08 78%) !important; border-color: #c8ff8a !important; box-shadow: 0 0 16px rgba(130, 230, 60, .7) !important; }
.wm-dg-citadel .wm-dg-num { background: radial-gradient(ellipse 60% 70% at 50% 85%, #ffffff 0 14%, #8fd0ff 40%, #12304e 78%) !important; border-color: #dff2ff !important; box-shadow: 0 0 16px rgba(130, 200, 255, .75) !important; }
.wm-dg-temple .wm-dg-num { background: radial-gradient(ellipse 60% 70% at 50% 85%, #d8ffe8 0 14%, #2ed890 40%, #062a1a 78%) !important; border-color: #9effc8 !important; box-shadow: 0 0 16px rgba(40, 220, 140, .7) !important; }
.wm-start.wm-dg-start.wm-dg-hollow { background: linear-gradient(180deg, #b4ea6a, #4f8f22 60%, #26480e); border-color: #dcffb0; text-shadow: 0 1px 2px rgba(10, 30, 0, .8) !important; box-shadow: 0 0 20px rgba(130, 230, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.wm-start.wm-dg-start.wm-dg-citadel { background: linear-gradient(180deg, #a8dcff, #3a7ec2 60%, #1a3f6e); border-color: #e2f4ff; text-shadow: 0 1px 2px rgba(0, 20, 50, .8) !important; box-shadow: 0 0 20px rgba(130, 200, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .45) !important; }
.wm-start.wm-dg-start.wm-dg-temple { background: linear-gradient(180deg, #6ee8a8, #1d8f5a 60%, #0b4a2c); border-color: #b4ffd6; text-shadow: 0 1px 2px rgba(0, 30, 14, .8) !important; box-shadow: 0 0 20px rgba(40, 220, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.wm-start.wm-dg-start.wm-dg-crypt { background: linear-gradient(180deg, #6ee8c4, #1f8f78 60%, #0d4a40); border-color: #b4ffe8; text-shadow: 0 1px 2px rgba(0, 30, 24, .8) !important; box-shadow: 0 0 20px rgba(60, 230, 180, .45), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.wm-zoom { position: absolute; left: 22px; bottom: 66px; display: flex; flex-direction: column; gap: 5px; }
.wm-left-card .wm-legend, .wm-left-card .wm-zoom { display: none; }
/* debug: „Odblokuj wszystkie plansze” (widać tylko z odblokowanym menu debugu) */
.wm-debug { position: absolute; left: 22px; top: 78px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; border: 1px dashed #9fe8ff; border-radius: 6px; background: rgba(12, 22, 30, .86); color: #bfefff !important; font-size: 12px; cursor: pointer; }
.wm-debug:hover { filter: brightness(1.15); }
.wm-debug.on { border-style: solid; background: rgba(20, 70, 60, .9); color: #d8ffe9 !important; box-shadow: 0 0 14px rgba(90, 240, 190, .45); }
.wm-debug small { color: #ffb27a; font-size: 10.5px; }
.wm-debug small:empty { display: none; }
.wm-hidden-dbg, .wm-left-card .wm-debug { display: none; }
.wm-zoom button { width: 34px; height: 34px; padding: 0; border: 1px solid #8fa0b8; border-radius: 6px; background: var(--wm-plate); font-size: 19px; line-height: 1; box-shadow: 0 0 0 1px #12151c, 0 3px 10px #0009, inset 0 1px 0 rgba(255, 255, 255, .22) !important; }

/* karta planszy */
.wm-card { position: absolute; right: 22px; top: 74px; bottom: 22px; width: 404px; max-width: calc(100% - 44px); display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse 90% 40% at 50% 100%, rgba(70, 150, 255, .1), transparent 70%), var(--wm-panel); border: 1px solid var(--wm-gold); border-radius: 10px; box-shadow: 0 0 0 1px #05070b, 0 0 20px rgba(80, 160, 255, .25), 0 16px 44px rgba(0, 0, 0, .6); }
.wm-card.wm-card-left { right: auto; left: 22px; }
.wm-card-hidden { display: none; }
.wm-card-in { animation: wm-card-in .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes wm-card-in { from { opacity: 0; transform: translateX(26px); } }
.wm-card-left.wm-card-in { animation-name: wm-card-in-left; }
@keyframes wm-card-in-left { from { opacity: 0; transform: translateX(-26px); } }
.wm-banner { position: relative; flex: none; height: 132px; border-bottom: 2px solid var(--wm-biome); }
.wm-banner canvas { display: block; width: 100%; height: 100%; }
.wm-num { position: absolute; left: 12px; top: 12px; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; border-radius: 19px; border: 2px solid #e6f2ff; background: var(--wm-biome); color: #fff; font: 800 18px/1 "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 10px rgba(110, 190, 255, .45); }
.wm-card-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(190, 220, 255, .45); border-radius: 50%; background: rgba(8, 11, 17, .65); font-size: 20px; line-height: 1; }
.wm-card-x:hover { background: rgba(8, 11, 17, .9); border-color: #fff; box-shadow: 0 0 10px rgba(110, 190, 255, .6) !important; }
.wm-banner-text { position: absolute; left: 14px; right: 14px; bottom: 8px; text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, .8); }
.wm-banner-text h2 { margin: 0; font: 700 24px/1.1 Georgia, "Times New Roman", serif; color: #f4f9ff; letter-spacing: .02em; }
.wm-banner-text p { margin: 2px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: #e2ebf6; }
.wm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 6px; scrollbar-width: thin; scrollbar-color: var(--wm-gold-dim) transparent; }
.wm-body h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fc8ff; }
.wm-body h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--wm-gold-dim), transparent); }
.wm-body ul { list-style: none; margin: 0; padding: 0; }
.wm-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wm-tag { padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent; }
.wm-state-available { background: rgba(255, 214, 90, .18); border-color: #ffd65a; color: #ffe9a6; }
.wm-state-done { background: rgba(47, 174, 74, .22); border-color: #46c964; color: #b8f3c4; }
.wm-state-locked { background: rgba(140, 146, 156, .2); border-color: #8c929c; color: #d3d7de; }
.wm-tag-final { background: rgba(226, 58, 30, .26); border-color: #ff7a3c; color: #ffd0b0; }
.wm-tag-side { background: rgba(120, 160, 255, .18); border-color: #8fb0ff; color: #d3e0ff; }
.wm-stars { margin-left: auto; display: flex; gap: 2px; }
.wm-stars i { width: 22px; height: 22px; } .wm-stars svg { width: 100%; height: 100%; fill: #3b3f47; stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.wm-stars i.on svg { fill: #ffd23f; filter: drop-shadow(0 0 4px rgba(255, 210, 63, .8)); }
.wm-facts { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; margin-top: 10px; }
.wm-facts > div { padding: 6px 10px; border: 1px solid var(--wm-gold-dim); border-radius: 6px; background: rgba(4, 7, 12, .45); min-width: 0; }
.wm-facts span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--wm-dim); }
.wm-facts b { display: block; margin-top: 1px; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-fact-boss.has { border-color: rgba(226, 70, 50, .6); background: rgba(160, 30, 24, .2); } .wm-fact-boss.has b { color: #ffb9a6; font-size: 14.5px; line-height: 1.5; }
.wm-skulls { display: flex !important; gap: 1px; align-items: center; height: 24px; }
.wm-skulls i { width: 17px; height: 17px; } .wm-skulls svg { width: 100%; height: 100%; fill: #3a404c; } .wm-skulls i.on svg { fill: #ff8a5c; }
.wm-blurb { margin: 12px 0 0; color: #dfe7f2; font: italic 14.5px/1.5 Georgia, "Times New Roman", serif; }
.wm-mods li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.wm-mods b { flex: none; padding: 1px 8px; border-radius: 9px; background: rgba(214, 90, 60, .22); border: 1px solid rgba(232, 120, 84, .6); color: #ffcbb8; font-size: 12px; white-space: nowrap; }
.wm-mods span, .wm-goals span { color: #c8d2e0; font-size: 13px; }
.wm-none span { color: var(--wm-dim) !important; font-size: 13px; }
.wm-goals li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; }
.wm-goals svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: #3b3f47; stroke: rgba(255, 210, 63, .55); stroke-width: 1.2; }
.wm-goals li.got svg { fill: #ffd23f; stroke: #7a4e08; filter: drop-shadow(0 0 3px rgba(255, 210, 63, .7)); }
.wm-goals b { display: block; font-size: 13.5px; color: #fff; } .wm-goals li.got b { color: #ffe9a6; }
.wm-best { margin-left: 0; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #9fd8ff; font-size: 12px; order: 3; }
.wm-count { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 9px; background: #2f7fe0; color: #fff; font-size: 11.5px; text-align: center; letter-spacing: 0; }
.wm-rooms li { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; margin-bottom: 5px; border: 1px solid rgba(110, 170, 255, .4); border-radius: 6px; background: rgba(47, 127, 224, .13); }
.wm-rooms li.wm-none { border-style: dashed; border-color: var(--wm-gold-dim); background: none; }
.wm-room-who { flex: 1; min-width: 0; }
.wm-room-who b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-room-who span { display: block; font-size: 12px; color: #bcd3f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-seats { display: flex; align-items: center; gap: 3px; flex: none; }
.wm-seats i { width: 9px; height: 15px; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); }
.wm-seats i.on { background: #6fb4ff; border-color: #d6e9ff; box-shadow: 0 0 5px rgba(111, 180, 255, .8); }
.wm-seats em { font-style: normal; font-size: 12px; margin-left: 4px; color: #dbe9ff; font-variant-numeric: tabular-nums; }
.wm-join { flex: none; padding: 6px 14px; border: 1px solid #8fa0b8; border-radius: 6px; background: var(--wm-plate); font-weight: 700; color: #fff !important; box-shadow: 0 0 0 1px #12151c, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 12px rgba(90, 170, 255, .15) !important; }
.wm-join:hover:not(:disabled) { filter: brightness(1.12); border-color: #b8d8ff; box-shadow: 0 0 0 1px #12151c, 0 0 12px rgba(80, 170, 255, .45) !important; }
.wm-join:disabled { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #9aa0a9 !important; cursor: default; }
.wm-foot { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--wm-gold-dim); background: rgba(6, 9, 14, .6); text-align: center; }
.wm-start { width: 100%; padding: 13px 16px; border: 1px solid #9fd0ff; border-radius: 8px; background: radial-gradient(ellipse 80% 80% at 50% 40%, rgba(90, 170, 255, .22), transparent 75%), var(--wm-plate); color: #eef4ff !important; font: 700 18px/1 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .45) !important; box-shadow: 0 0 0 1px #12151c, 0 4px 14px #000a, 0 0 14px rgba(80, 170, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 22px rgba(90, 170, 255, .2) !important; }
.wm-root .wm-start { font: 700 18px/1 Georgia, serif; }
.wm-start:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); border-color: #d8ecff; box-shadow: 0 0 0 1px #12151c, 0 6px 18px #000b, 0 0 22px rgba(80, 170, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 26px rgba(90, 170, 255, .3) !important; }
.wm-start:disabled { background: linear-gradient(#3a3f4a, #262a32); border-color: #5d6b80; color: #9eaabd !important; text-shadow: none !important; box-shadow: none !important; cursor: default; }
.wm-start:disabled kbd { display: none; }
.wm-foot small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--wm-dim); }
.wm-locknote { margin: 0 0 8px; font-size: 13px; color: #ffcf9a; }
.wm-root button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wm-shake .wm-start { animation: wm-shake .3s; }
@keyframes wm-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* węższe okna */
@media (max-width: 1180px) { .wm-stat span { display: none; } .wm-title p { display: none; } }
@media (max-width: 980px) { .wm-legend em { display: none; } .wm-legend { gap: 9px; padding: 7px 10px; } }
@media (max-width: 860px) {
  .wm-card, .wm-card.wm-card-left { left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; max-width: none; max-height: 56%; }
  .wm-banner { height: 92px; } .wm-banner-text h2 { font-size: 20px; }
  .wm-card-in, .wm-card-left.wm-card-in { animation-name: wm-card-up; }
  .wm-stats .wm-blue { display: none; } .wm-close span { display: none; } .wm-close kbd { margin: 0; }
}
@keyframes wm-card-up { from { opacity: 0; transform: translateY(26px); } }
@media (max-height: 640px) { .wm-banner { height: 88px; } .wm-blurb { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .wm-card-in, .wm-shake .wm-start { animation: none; } }

/* podpowiedź o wrogach planszy: na co są wrażliwi i odporni */

/* przełącznik kampanii przy tytule: nazwa kampanii (zamiast „Mapa świata”), pod nią „Mapa świata · Kampania 1 z 2”,
   po bokach kamienne strzałki; strzałka do kampanii „w przygotowaniu” jest przygaszona, z kłódką */
.wm-title .wm-camp-sub { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .1em; }
.wm-title .wm-camp-sub.wm-camp-note { color: #ffcf9a; }
/* przycisk kampanii: strzałka + nazwa kampanii docelowej w jej barwie (dawniej małe kółko z samym „‹ ›” — słabo widoczne) */
.wm-camp-arrow { --wm-camp: #8fb8e8; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 2px solid var(--wm-camp); border-radius: 19px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)), var(--wm-plate); color: #f4f8ff !important; font: 700 13px/1 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  text-shadow: 0 1px 0 #10141c; box-shadow: 0 0 0 1px #12151c, 0 3px 10px #0009, 0 0 12px color-mix(in srgb, var(--wm-camp) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22) !important; transition: filter .14s, transform .14s, box-shadow .14s; }
.wm-camp-arrow b { font: 700 24px/1 Georgia, serif; margin-top: -3px; color: var(--wm-camp); }
.wm-camp-arrow:hover { filter: brightness(1.18); transform: translateY(-1px); box-shadow: 0 0 0 1px #12151c, 0 4px 14px #000a, 0 0 20px color-mix(in srgb, var(--wm-camp) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
.wm-camp-arrow:not(.wm-camp-locked) { animation: wm-camp-glow 2.4s ease-in-out infinite; }
@keyframes wm-camp-glow { 50% { border-color: color-mix(in srgb, var(--wm-camp) 60%, #fff); } }
@media (max-width: 1180px) { .wm-camp-to { display: none; } .wm-camp-arrow { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .wm-camp-arrow { animation: none !important; } }
.wm-camp-arrow[hidden] { display: inline-flex; visibility: hidden; }
.wm-camp-arrow.wm-camp-locked { opacity: .55; position: relative; }
.wm-camp-arrow.wm-camp-locked::after { content: ''; position: absolute; right: -2px; bottom: -3px; width: 9px; height: 7px; border-radius: 2px; background: #c9d2de; box-shadow: 0 0 0 1px #12151c; }
.wm-camp-arrow.wm-camp-locked::before { content: ''; position: absolute; right: -2.5px; bottom: 3px; width: 6px; height: 5px; border: 1.5px solid #c9d2de; border-bottom: 0; border-radius: 4px 4px 0 0; }
.wm-switch .wm-canvas { animation: wm-switch .45s ease-out; }
@keyframes wm-switch { from { opacity: .15; filter: blur(4px); } }
@media (max-width: 1180px) { .wm-title .wm-camp-sub { display: none; } }
@media (max-width: 860px) { .wm-title h1 { font-size: 18px; } .wm-title .wm-crest { display: none; } }
@media (prefers-reduced-motion: reduce) { .wm-switch .wm-canvas { animation: none; } }

/* ── EKRAN WYBORU KAMPANII (public/js/ui/campaigns.js) — styl logo i menu głównego: ciemny kamień, runy,
   błękitna poświata kryształu; każda karta ma barwę swojej kampanii (--cp) w poświacie i pasku postępu */
.cp-root { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 10px; padding: 26px 24px 20px; overflow-y: auto; outline: none;
  background: radial-gradient(ellipse 60% 42% at 50% 42%, rgba(70, 150, 255, .2), transparent 72%), radial-gradient(ellipse at center, rgba(8, 11, 18, .82), rgba(4, 6, 10, .95));
  color: #e6ecf5; font: 14px/1.4 "Segoe UI", system-ui, sans-serif; user-select: none; animation: cp-in .25s ease-out; }
.cp-root *, .cp-root *::before, .cp-root *::after { box-sizing: border-box; }
@keyframes cp-in { from { opacity: 0; } }
.cp-head { display: flex; align-items: center; gap: 18px; }
.cp-head h1 { margin: 0; font: 700 30px Georgia, "Times New Roman", serif; letter-spacing: .12em; text-transform: uppercase; color: #eef4ff; text-shadow: 0 2px 0 #1a2030, 0 0 14px rgba(110, 190, 255, .5); }
.cp-rune { font: 600 14px Georgia, serif; letter-spacing: .25em; color: rgba(130, 205, 255, .6); text-shadow: 0 0 8px rgba(90, 180, 255, .9); }
.cp-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 34px; width: 100%; }
.cp-card { --cp: #5ab0ff; position: relative; display: flex; flex-direction: column; width: min(440px, 44vw); min-width: 280px; padding: 0; text-align: left; cursor: pointer; overflow: hidden;
  color: #e6ecf5; font: inherit; border: 1px solid #8fa0b8; border-radius: 12px;
  background: radial-gradient(ellipse 90% 50% at 50% 100%, color-mix(in srgb, var(--cp) 16%, transparent), transparent 70%), linear-gradient(#1a1f2a, #0e121a);
  box-shadow: 0 0 0 1px #05070b, 0 10px 34px #000b, 0 0 16px rgba(80, 160, 255, .16), inset 0 1px 0 rgba(170, 215, 255, .14);
  transition: transform .18s, box-shadow .18s, border-color .18s, filter .18s; }
.cp-card::before, .cp-card::after { content: 'ᚱᚢᚾ'; position: absolute; bottom: 14px; font: 600 11px Georgia, serif; letter-spacing: .2em; color: rgba(130, 205, 255, .4); text-shadow: 0 0 6px rgba(90, 180, 255, .8); pointer-events: none; }
.cp-card::before { left: 14px; } .cp-card::after { right: 14px; content: 'ᛊᚺᚨ'; }
.cp-card.cp-on, .cp-card:focus-visible { outline: none; transform: translateY(-4px); border-color: #cfe6ff;
  box-shadow: 0 0 0 1px #05070b, 0 16px 40px #000c, 0 0 26px color-mix(in srgb, var(--cp) 55%, transparent), 0 0 18px rgba(110, 190, 255, .45), inset 0 1px 0 rgba(200, 230, 255, .25); }
.cp-art { position: relative; display: block; height: clamp(150px, 26vh, 240px); border-bottom: 2px solid var(--cp); }
.cp-art canvas { display: block; width: 100%; height: 100%; }
.cp-art .cp-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* grafika kampanii (gfx/campaignN.jpg → public/campaigns/<id>.webp) przykrywa rysunek z canvasu */
.cp-num { position: absolute; left: 12px; top: 12px; min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e6f2ff; background: var(--cp);
  color: #fff; font: 700 17px/1 Georgia, serif; text-shadow: 0 1px 2px #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 12px rgba(110, 190, 255, .45); }
.cp-hard { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 5px; padding: 4px 11px 4px 7px; border: 1px solid #ff8a5c; border-radius: 14px; background: rgba(120, 24, 16, .82);
  color: #ffd8c4; font: 700 11.5px "Segoe UI", sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 12px rgba(255, 90, 50, .45); }
.cp-hard svg { width: 15px; height: 15px; fill: #ffb08a; }
.cp-hard em, .cp-lock em, .cp-go em { font-style: normal; }
.cp-lock { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; gap: 9px; padding: 9px 0;
  background: linear-gradient(90deg, transparent, rgba(8, 11, 17, .88) 20%, rgba(8, 11, 17, .88) 80%, transparent); color: #eef4ff; font: 700 17px Georgia, serif; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 10px rgba(110, 190, 255, .6); }
.cp-lock svg { width: 20px; height: 20px; fill: #c9d6e6; }
.cp-text { display: block; padding: 14px 18px 4px; }
.cp-name { display: block; font: 700 24px/1.15 Georgia, "Times New Roman", serif; letter-spacing: .04em; color: #f4f9ff; text-shadow: 0 2px 0 #1a2030, 0 0 12px color-mix(in srgb, var(--cp) 60%, transparent); }
.cp-sub { display: block; margin-top: 5px; color: #c8d2e0; font: italic 14.5px/1.45 Georgia, "Times New Roman", serif; min-height: 42px; }
.cp-meta { display: flex; align-items: center; gap: 12px; padding: 10px 18px 0; }
.cp-stars { display: flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid rgba(120, 165, 215, .34); border-radius: 14px; background: rgba(8, 11, 17, .75); }
.cp-stars svg { width: 17px; height: 17px; fill: #ffd23f; filter: drop-shadow(0 1px 1px #000); }
.cp-stars b { color: #ffe08a; font-size: 15px; font-variant-numeric: tabular-nums; }
.cp-done { color: #9eaabd; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }
.cp-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(4, 7, 12, .7); box-shadow: inset 0 0 0 1px rgba(120, 165, 215, .25); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--cp) 70%, #fff), var(--cp)); box-shadow: 0 0 8px var(--cp); }
.cp-go { display: flex; justify-content: center; align-items: center; margin: 14px 18px 38px; padding: 11px 14px; border: 1px solid #9fd0ff; border-radius: 8px;
  background: radial-gradient(ellipse 80% 80% at 50% 40%, rgba(90, 170, 255, .2), transparent 75%), linear-gradient(#636a78, #474d59 48%, #3a3f4a 52%, #2c3139);
  color: #eef4ff; font: 700 16px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .45);
  box-shadow: 0 0 0 1px #12151c, 0 4px 14px #000a, inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 22px rgba(90, 170, 255, .2); transition: filter .14s, box-shadow .14s; }
.cp-card.cp-on .cp-go { filter: brightness(1.12); box-shadow: 0 0 0 1px #12151c, 0 4px 14px #000a, 0 0 18px rgba(80, 170, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 26px rgba(90, 170, 255, .3); }
.cp-root kbd { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; padding: 3px 6px; margin-left: 10px; border: 1px solid rgba(190, 220, 255, .45); border-radius: 4px; background: rgba(0, 0, 0, .25); color: #dbe7f5; text-shadow: none; letter-spacing: 0; }
/* kampania w przygotowaniu: widoczna, przygaszona, z pasem „W przygotowaniu” */
.cp-card.cp-locked { cursor: not-allowed; border-color: #5d6b80; }
.cp-card.cp-locked .cp-art canvas, .cp-card.cp-locked .cp-pic { filter: grayscale(.55) brightness(.62); }
.cp-card.cp-locked .cp-lock { display: flex; }
.cp-card.cp-locked .cp-go { background: linear-gradient(#3a3f4a, #262a32); border-color: #5d6b80; color: #9eaabd; text-shadow: none; box-shadow: none; filter: none; }
.cp-card.cp-locked.cp-on { box-shadow: 0 0 0 1px #05070b, 0 16px 40px #000c, 0 0 14px rgba(110, 150, 200, .3); }
.cp-shake { animation: cp-shake .32s; }
@keyframes cp-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.cp-foot { display: flex; align-items: center; gap: 18px; }
.cp-back { padding: 9px 14px 9px 16px; border: 1px solid #8fa0b8; border-radius: 6px; cursor: pointer; background: linear-gradient(#636a78, #474d59 48%, #3a3f4a 52%, #2c3139); color: #eef4ff; font: 600 14px "Segoe UI", sans-serif;
  box-shadow: 0 0 0 1px #12151c, 0 3px 10px #0009, inset 0 1px 0 rgba(255, 255, 255, .22); }
.cp-back:hover { filter: brightness(1.1); border-color: #b8d8ff; box-shadow: 0 0 0 1px #12151c, 0 0 14px rgba(80, 170, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .28); }
.cp-hint { color: #9eaabd; font-size: 12px; }
.cp-hint kbd { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; padding: 3px 6px; margin: 0 5px 0 2px; border: 1px solid rgba(190, 220, 255, .4); border-radius: 4px; background: rgba(0, 0, 0, .3); color: #dbe7f5; }
@media (max-width: 760px) { .cp-card { width: 100%; } .cp-head h1 { font-size: 22px; } .cp-rune, .cp-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .cp-root, .cp-shake { animation: none; } .cp-card { transition: none; } }