/* HIPPOCAMP — modul "The world" (peta sonar, elemen, jam Undertow). Semua kelas berawalan wm-. */

.wm { --wm-cyan: #7ef0ff; --wm-dim: #3a5584; position: relative; color: var(--foam); }
.wm canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.wm button { font: inherit; color: inherit; }

/* ---------- tab ---------- */
.wm-tabs { display: flex; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.wm-tab {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline;
  padding: 12px 18px 13px 14px; border: 0; cursor: pointer; text-align: left; background: var(--ink-1);
  box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--shadow);
  transition: background .12s steps(2), transform .08s steps(2);
}
.wm-tab-n { grid-row: 1 / 3; font: 400 11px/1 var(--f-label); color: var(--mist-2); align-self: center; padding: 6px 5px 5px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-tab-l { font: 600 18px/1.1 var(--f-pixel); color: var(--foam); }
.wm-tab-h { font: 400 10px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2); }
.wm-tab:hover { background: var(--ink-2); transform: translateY(-2px); }
.wm-tab[aria-selected="true"] { background: var(--ink-3); box-shadow: 0 0 0 2px var(--pearl), 0 0 0 4px var(--shadow), 4px 4px 0 4px var(--shadow); }
.wm-tab[aria-selected="true"] .wm-tab-n { background: var(--pearl); color: #1a1204; box-shadow: 0 0 0 2px var(--pearl-dk); }
.wm-tab[aria-selected="true"] .wm-tab-h { color: var(--pearl); }
.wm-tab:focus-visible, .wm-pane:focus-visible { outline: 3px solid var(--glow); outline-offset: 5px; }
.wm-pane[hidden] { display: none; }
.wm-pane { animation: wm-in .28s steps(4) both; }
@keyframes wm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wm-intro { margin: 0 0 22px; max-width: 64ch; color: var(--mist); font-size: 16px; }

/* ---------- peta: tata letak ---------- */
.wm-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.wm-detail.is-closed { position: sticky; top: 20px; }

/* ---------- sonar ---------- */
.wm-sonar { background: #030813; padding: 0; }
.wm-sonar-head, .wm-sonar-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  font: 400 11px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
  background: var(--ink-1);
}
.wm-sonar-head { box-shadow: inset 0 -2px 0 var(--line); }
.wm-sonar-foot { box-shadow: inset 0 2px 0 var(--line); flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; }
.wm-sonar-id { display: inline-flex; align-items: center; gap: 9px; color: var(--foam); }
.wm-led { width: 8px; height: 8px; background: var(--wm-cyan); box-shadow: 0 0 0 2px var(--shadow), 0 0 10px var(--wm-cyan); animation: wm-blink 1.4s steps(2) infinite; }
@keyframes wm-blink { 50% { opacity: .35; } }
.wm-readout { color: var(--mist-2); white-space: nowrap; }
.wm-readout b { display: inline-block; min-width: 7ch; text-align: right; color: var(--wm-cyan); font-weight: 400; }
.wm-foot-scale { margin-left: auto; color: var(--mist-2); }
.wm-key { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.wm-key-open { background: var(--wm-cyan); box-shadow: 0 0 0 2px var(--shadow), 0 0 8px var(--wm-cyan); }
.wm-key-closed { background: transparent; box-shadow: inset 0 0 0 2px var(--mist-2); }

.wm-sonar-body { position: relative; height: 900px; overflow: hidden; }
.wm-sonar-cv { position: absolute; left: 0; top: 0; display: block; }
.wm-ruler { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.wm-tick {
  position: absolute; right: 9px; transform: translateY(-50%);
  font: 400 10px/1 var(--f-label); color: var(--mist); letter-spacing: .04em; white-space: nowrap;
}
.wm-tick-surf { color: var(--wm-cyan); }

.wm-bands { position: absolute; inset: 0; }
.wm-band {
  position: absolute; right: 0; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.wm-band:hover { background: rgba(126, 240, 255, .035); }
.wm-band:focus-visible { outline: 2px dashed var(--glow); outline-offset: -4px; }
.wm-band[aria-current="true"] { background: linear-gradient(90deg, transparent, rgba(246, 217, 139, .05) 50%, transparent); }
.wm-band[aria-current="true"]::before, .wm-band[aria-current="true"]::after {
  content: ""; position: absolute; right: 8px; width: 10px; height: 2px; background: var(--pearl);
}
.wm-band[aria-current="true"]::before { top: 4px; box-shadow: 8px 0 0 var(--pearl); }
.wm-band[aria-current="true"]::after { bottom: 4px; box-shadow: 8px 0 0 var(--pearl); }

/* titik zona (persegi piksel di kontur) */
.wm-node {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--el); box-shadow: 0 0 0 2px var(--shadow), 0 0 14px var(--el);
}
.wm-node::after { content: ""; position: absolute; inset: 3px; background: #fff; opacity: .55; }
.wm-band.is-closed .wm-node { background: #0a1428; box-shadow: inset 0 0 0 2px var(--mist-2), 0 0 0 2px var(--shadow); }
.wm-band.is-closed .wm-node::after { display: none; }
.wm-band[aria-current="true"] .wm-node { width: 18px; height: 18px; margin: -9px 0 0 -9px; box-shadow: 0 0 0 2px var(--shadow), 0 0 0 4px var(--pearl), 0 0 0 6px var(--shadow), 0 0 18px var(--el); }
.wm-band.is-closed[aria-current="true"] .wm-node { box-shadow: inset 0 0 0 2px var(--mist), 0 0 0 2px var(--shadow), 0 0 0 4px var(--pearl), 0 0 0 6px var(--shadow); }

.wm-lab { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: grid; gap: 3px; pointer-events: none; }
.wm-lab-name { font: 600 18px/1.05 var(--f-pixel); color: var(--foam); text-shadow: 0 2px 0 var(--shadow); }
.wm-lab-meta { display: flex; align-items: center; gap: 7px; font: 400 10px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.wm-lab-meta .el-dot { width: 8px; height: 8px; }
.wm-lab-tag { justify-self: start; font: 400 9px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px 4px; margin-top: 2px; color: #04212a; background: var(--wm-cyan); }
.wm-band.is-closed .wm-lab-name { color: var(--mist); }
.wm-band.is-closed .wm-lab-meta { color: var(--mist-2); }
.wm-band.is-closed .wm-lab-tag { color: var(--mist); background: transparent; box-shadow: inset 0 0 0 1px var(--wm-dim); }
.wm-band.is-closed:hover .wm-lab-name { color: var(--foam); }
.wm-band[aria-current="true"] .wm-lab-name { color: var(--pearl); }

/* penanda Marlo */
.wm-marlo { position: absolute; pointer-events: none; display: grid; justify-items: center; animation: wm-bob 2.4s steps(6) infinite; }
.wm-marlo canvas { display: block; width: 68px; height: 68px; }
.wm-marlo.is-small canvas { width: 34px; height: 34px; }
.wm-marlo-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 400 8px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; padding: 3px 5px; color: #1a1204; background: var(--pearl); box-shadow: 0 0 0 2px var(--shadow);
}
.wm-marlo.is-small .wm-marlo-tag { top: -14px; }
@keyframes wm-bob { 50% { transform: translateY(-4px); } }

/* ---------- panel detail ---------- */
.wm-detail { padding: 24px 24px 22px; --el: var(--glow); }
.wm-detail.wm-swap { animation: wm-swap .32s steps(5) backwards; }
@keyframes wm-swap { from { clip-path: inset(-20px -20px 100% -20px); } to { clip-path: inset(-20px); } }
.wm-d-head { display: grid; gap: 8px; margin-bottom: 16px; }
.wm-d-title { margin: 0; font: 700 34px/1 var(--f-pixel); color: var(--foam); text-shadow: 0 3px 0 var(--ink-3), 0 5px 0 var(--shadow); }
.wm-d-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.wm-elchip i { background: var(--el); box-shadow: 0 0 8px var(--el); }
.wm-chip-open { color: #04212a; background: var(--wm-cyan); box-shadow: 0 0 0 2px #2f8fb0, 0 0 0 4px var(--shadow); }
.wm-chip-open i { background: #04212a; box-shadow: none; }
.wm-chip-dev { color: var(--mist); background: var(--ink-0); }
.wm-chip-dev i { background: transparent; box-shadow: inset 0 0 0 2px var(--mist-2); }

.wm-preview { position: relative; height: 168px; margin: 0 0 16px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--shadow); overflow: hidden; }
.wm-sea { display: block; width: 100%; height: 100%; }
.wm-detail.is-closed .wm-sea { filter: brightness(.5) saturate(.5); }
.wm-preview-tag {
  position: absolute; left: 10px; top: 10px; font: 400 9px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 6px; background: rgba(4, 10, 24, .75); color: var(--foam); box-shadow: 0 0 0 2px rgba(2, 5, 13, .6);
}
.wm-preview-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 0; background: #ff5d4f; animation: wm-blink 1s steps(2) infinite; }
.wm-detail.is-closed .wm-preview-tag::before { background: var(--mist-2); animation: none; }
.wm-preview-veil {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px;
  background: repeating-linear-gradient(135deg, rgba(4, 10, 24, .0) 0 10px, rgba(4, 10, 24, .35) 10px 20px);
}
.wm-preview-veil b { font: 600 22px/1 var(--f-pixel); color: var(--foam); text-shadow: 0 2px 0 var(--shadow); }
.wm-preview-veil > * { justify-self: center; padding: 4px 10px; background: rgba(4, 10, 24, .82); }
.wm-preview-veil small { font: 400 10px/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }

.wm-d-blurb { margin: 0 0 16px; color: var(--mist); font-size: 16px; }
.wm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.wm-stats > div { background: var(--ink-0); padding: 9px 11px 10px; box-shadow: 0 0 0 2px var(--line); }
.wm-stats dt { font: 400 9px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.wm-stats dd { margin: 6px 0 0; font: 600 18px/1 var(--f-pixel); color: var(--foam); }

.wm-sub { margin: 0 0 10px; font: 400 11px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--pearl); }
.wm-mobs { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wm-mobs li { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 8px 6px 10px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-mobs li canvas { width: 68px; height: 68px; }
.wm-mobs b { font: 600 15px/1.1 var(--f-pixel); }
.wm-mobs small { font: 400 9px/1.2 var(--f-label); letter-spacing: .06em; color: var(--mist-2); }

.wm-bosses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.wm-boss { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); min-width: 0; }
.wm-boss-guardian { box-shadow: 0 0 0 2px var(--pearl-dk); }
.wm-boss-art { flex: none; width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; }
.wm-boss-art canvas { width: 102px; height: 102px; }
.wm-boss-txt { display: grid; gap: 3px; min-width: 0; }
.wm-boss-txt b { font: 600 17px/1.05 var(--f-pixel); }
.wm-boss-txt .label { font-size: 9px; color: var(--coral-lt); }
.wm-boss-guardian .wm-boss-txt .label { color: var(--pearl); }
.wm-boss-txt small { font: 400 9px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); display: flex; align-items: center; gap: 4px; }
.wm-boss-txt small .el-dot { width: 7px; height: 7px; }

.wm-edges { display: grid; gap: 12px; margin-bottom: 20px; }
.wm-edge { padding: 12px 14px 12px; background: color-mix(in srgb, var(--el) 9%, var(--ink-0)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--el) 55%, var(--ink-1)), 0 0 0 4px var(--shadow); }
.wm-edge-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.wm-edge-head .wm-glyph { flex: none; margin-top: 2px; }
.wm-edge-title { font: 600 18px/1.15 var(--f-pixel); color: var(--el); }
.wm-edge-why { margin: 3px 0 0; font-size: 14px; color: var(--mist); line-height: 1.45; }
.wm-heroes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wm-hero { display: flex; align-items: center; gap: 6px; padding: 2px 12px 2px 2px; background: var(--ink-1); box-shadow: 0 0 0 2px var(--line); }
.wm-hero canvas { width: 50px; height: 50px; object-fit: none; }
.wm-hero-txt { display: grid; gap: 1px; }
.wm-hero-txt b { font: 600 16px/1 var(--f-pixel); }
.wm-hero-txt small { font: 400 9px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); }
.wm-muted { margin: 0; color: var(--mist-2); font-size: 14px; }

.wm-dev { padding: 14px 16px 4px; margin-bottom: 20px; background: var(--ink-0); box-shadow: inset 0 0 0 2px var(--wm-dim); }
.wm-dev > b { font: 600 20px/1.1 var(--f-pixel); }
.wm-dev p { margin: 6px 0 14px; color: var(--mist); font-size: 15px; }
.wm-dev .wm-stats { margin-bottom: 12px; }

.wm-d-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding-top: 6px; }
.wm-d-nav .wm-prev { justify-self: start; }
.wm-d-nav .wm-next { justify-self: end; }
.wm-play, .wm-noplay { grid-column: 1 / -1; grid-row: 1; }
.wm-noplay { text-align: center; font: 400 11px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mist-2); padding: 12px; box-shadow: inset 0 0 0 2px var(--wm-dim); }

/* ---------- elemen ---------- */
.wm-el { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.wm-el-board { padding: 16px 12px 18px; background: #030813; background-image: radial-gradient(rgba(126, 240, 255, .08) 1px, transparent 1px); background-size: 16px 16px; }
.wm-el-cap { display: flex; justify-content: space-between; padding: 0 6px 0; }
.wm-el-cap .label { color: var(--mist-2); }
.wm-el-stage { position: relative; margin: 6px auto 0; }
.wm-el-cv { position: absolute; inset: 0; display: block; }
.wm-el-nodes { position: absolute; inset: 0; }
.wm-el-node {
  --sz: calc(var(--s, 3) * 22px);
  position: absolute; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.wm-el-tok {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--el) 50%, var(--ink-2)), 0 0 0 6px var(--shadow);
  transition: transform .1s steps(2);
}
.wm-el-name {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap;
  font: 400 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
}
.wm-el-node:hover .wm-el-tok { transform: translateY(-3px); }
.wm-el-node:focus-visible { outline: 3px solid var(--glow); outline-offset: 10px; }
.wm-el-node[aria-pressed="true"] .wm-el-tok { background: color-mix(in srgb, var(--el) 22%, var(--ink-1)); box-shadow: 0 0 0 3px var(--el), 0 0 0 6px var(--shadow), 0 0 26px color-mix(in srgb, var(--el) 60%, transparent); }
.wm-el-node[aria-pressed="true"] .wm-el-name { color: var(--el); }
.wm-el-node.is-target .wm-el-name::after, .wm-el-node.is-threat .wm-el-name::after {
  content: "beaten"; display: block; margin-top: 5px; text-align: center; font-size: 8px; color: #04212a; background: var(--foam); padding: 3px 4px;
}
.wm-el-node.is-target .wm-el-name::after { content: "beaten"; }
.wm-el-node.is-threat .wm-el-name::after { content: "beats it"; background: var(--coral); color: #1a0806; }
.wm-el-node.is-mutual .wm-el-name::after { content: "both ways"; background: var(--pearl); color: #1a1204; }
.wm-el-node.is-top .wm-el-name { top: auto; bottom: calc(100% + 12px); }
.wm-el-node.is-top .wm-el-name::after { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); margin: 0; }
.wm-el-rule { display: flex; gap: 12px; align-items: center; margin: 38px 6px 0; padding: 10px 12px; background: var(--ink-1); box-shadow: 0 0 0 2px var(--line); color: var(--mist); font-size: 14px; line-height: 1.4; }
.wm-el-rule b { flex: none; font: 700 26px/1 var(--f-pixel); color: var(--pearl); text-shadow: 0 2px 0 var(--shadow); }

.wm-el-info { padding: 22px 22px 22px; --el: var(--glow); }
.wm-el-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.wm-el-badge { flex: none; padding: 8px; background: var(--ink-0); box-shadow: 0 0 0 3px var(--el), 0 0 0 6px var(--shadow); }
.wm-el-badge .wm-glyph { display: block; }
.wm-el-top .wm-d-blurb { margin: 8px 0 0; }
.wm-el-rules { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.wm-el-rules li { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-el-rules b { font: 600 17px/1 var(--f-pixel); display: flex; align-items: center; gap: 6px; }
.wm-el-rules em { font: 400 10px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; font-style: normal; text-align: right; }
.wm-rule-beat { box-shadow: 0 0 0 2px var(--el) !important; }
.wm-rule-beat em { color: var(--pearl); }
.wm-rule-weak em { color: var(--coral-lt); }
.wm-el-info .wm-heroes { margin-bottom: 20px; }
.wm-el-zones { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wm-zlink { display: grid; gap: 3px; text-align: left; padding: 8px 12px 9px; border: 0; cursor: pointer; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-zlink span { font: 600 15px/1 var(--f-pixel); }
.wm-zlink small { font: 400 9px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); }
.wm-zlink:hover { box-shadow: 0 0 0 2px var(--el); }
.wm-zlink:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }

/* ---------- jam Undertow ---------- */
.wm-clock-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.wm-clock-note .wm-intro { margin: 0; }
.wm-utc-chip i { background: var(--wm-cyan); box-shadow: 0 0 8px var(--wm-cyan); animation: wm-blink 1s steps(2) infinite; }
.wm-utc { font-weight: 400; color: var(--wm-cyan); min-width: 8ch; }
.wm-clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.wm-clock { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.wm-ck-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-ck-tag { font: 400 9px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; color: var(--mist); box-shadow: inset 0 0 0 1px var(--wm-dim); }
.wm-ck-main { display: flex; gap: 12px; align-items: center; min-height: 110px; }
.wm-ck-art { flex: none; width: 102px; height: 102px; display: grid; place-items: center; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-ck-hero .wm-ck-art { background: color-mix(in srgb, var(--el, var(--glow)) 12%, var(--ink-0)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--el, var(--glow)) 55%, var(--ink-1)); }
.wm-ck-art canvas { display: block; animation: wm-bob 2.2s steps(4) infinite; }
.wm-ck-txt { display: grid; gap: 4px; min-width: 0; }
.wm-ck-txt > b { font: 600 22px/1.05 var(--f-pixel); }
.wm-ck-txt small { font: 400 10px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); }
.wm-ck-txt q { font-size: 14px; line-height: 1.35; color: var(--mist); font-style: italic; }
.wm-ck-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px; background: var(--ink-0); box-shadow: 0 0 0 2px var(--line); }
.wm-ck-row .label { font-size: 9px; }
.wm-count { font: 600 20px/1 var(--f-pixel); color: var(--pearl); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.wm-ck-fine { margin: auto 0 0; font-size: 13px; line-height: 1.45; color: var(--mist-2); }

.wm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wm-week span { position: relative; height: 26px; background: var(--ink-0); box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; overflow: hidden; }
.wm-week span small { position: relative; font: 400 8px/1 var(--f-label); letter-spacing: .04em; text-transform: uppercase; color: var(--mist-2); }
.wm-week span.is-done { background: var(--line-2); box-shadow: none; }
.wm-week span.is-done small { color: var(--foam); }
.wm-week span.is-now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: var(--pearl-dk); }
.wm-week span.is-now { box-shadow: inset 0 0 0 2px var(--pearl); }
.wm-week span.is-now small { color: var(--foam); }

.wm-days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.wm-days li { display: grid; justify-items: center; gap: 2px; padding: 4px 0 5px; background: var(--ink-0); box-shadow: inset 0 0 0 2px var(--line); }
.wm-days canvas { width: 34px; height: 34px; }
.wm-days small { font: 400 8px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); }

/* aliran arus: baris panah piksel bergerak */
.wm-stream { position: relative; height: 110px; display: grid; align-content: center; gap: 10px; background: #061a33; box-shadow: 0 0 0 2px var(--line); overflow: hidden; }
.wm-stream span {
  display: block; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%237ef0ff'%3E%3Crect x='4' y='0' width='2' height='2'/%3E%3Crect x='6' y='2' width='2' height='2'/%3E%3Crect x='8' y='4' width='2' height='2'/%3E%3Crect x='10' y='6' width='2' height='2'/%3E%3Crect x='8' y='6' width='2' height='2'/%3E%3Crect x='6' y='8' width='2' height='2'/%3E%3Crect x='4' y='10' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 24px 12px; animation: wm-flow 1.2s steps(12) infinite;
}
.wm-stream span:nth-child(2) { opacity: .55; animation-duration: 1.8s; margin-left: 10px; }
.wm-stream span:nth-child(3) { opacity: .3; animation-duration: 2.4s; }
.wm-stream.is-west span { transform: scaleX(-1); }
@keyframes wm-flow { from { background-position: 0 0; } to { background-position: 24px 0; } }
.wm-ck-dir > b { font-size: 28px; color: var(--wm-cyan); white-space: pre; }
.wm-daybar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-top: 2px; }
.wm-daybar span { height: 24px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line); }
.wm-daybar span.is-e { background: #0b2c4a; }
.wm-daybar span.is-w { background: #12183a; }
.wm-daybar small { font: 400 8px/1 var(--f-label); letter-spacing: .06em; color: var(--mist); }
.wm-now { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--pearl); box-shadow: 0 0 0 1px var(--shadow); }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .wm-clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wm-map, .wm-el { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wm-sonar-body { height: 720px; }
  .wm-detail, .wm-detail.is-closed { position: relative; top: auto; scroll-margin-top: 16px; }
  .wm-clocks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .wm-tabs { gap: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wm-tab { grid-template-columns: 1fr; padding: 9px 8px 10px; gap: 4px; justify-items: start; }
  .wm-tab-n { grid-row: auto; padding: 4px 4px 3px; font-size: 9px; }
  .wm-tab-l { font-size: 15px; }
  .wm-tab-h { display: none; }
  .wm-sonar-body { height: 640px; }
  .wm-sonar-head, .wm-sonar-foot { padding: 9px 10px; font-size: 9px; }
  .wm-foot-scale { margin-left: 0; }
  .wm-lab { right: 8px; gap: 2px; }
  .wm-lab-name { font-size: 15px; }
  .wm-lab-meta { font-size: 8px; gap: 5px; }
  .wm-lab-tag { font-size: 8px; padding: 3px 4px; }
  .wm-tick { font-size: 8px; right: 7px; }
  .wm-detail, .wm-el-info { padding: 18px 14px 16px; }
  .wm-d-title { font-size: 28px; }
  .wm-preview { height: 140px; }
  .wm-stats dd { font-size: 16px; }
  .wm-mobs { gap: 8px; }
  .wm-mobs li canvas { width: 68px; height: 68px; }
  .wm-mobs b { font-size: 13px; }
  .wm-bosses { grid-template-columns: minmax(0, 1fr); }
  .wm-play { font-size: 11px; letter-spacing: .08em; padding-left: 12px; padding-right: 12px; }
  .wm-mobs small { font-size: 8px; letter-spacing: 0; white-space: nowrap; }
  .wm-el-rules li { grid-template-columns: 74px 1fr; }
  .wm-el-rules em { grid-column: 1 / -1; text-align: left; }
  .wm-el-rule { margin-top: 32px; }
  .wm-el-name { font-size: 9px; top: calc(100% + 9px); }
  .wm-clock { padding: 16px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-marlo, .wm-ck-art canvas, .wm-stream span, .wm-led, .wm-utc-chip i { animation: none !important; }
}