/* Copyright (c) 2026 Legacy Technology N.V. All rights reserved. See LICENSE. */
/* Waka Style (staging experiment, owner 16-10-2026). The player's windows as a quest in warm cards instead of columns and
   lines, rooted in Suriname: the pangi band on top of every sheet, the tembe line between chapters, Waka icon tiles,
   a footstep trail, ribbons, seals and tickets. See docs/WAKA-STYLE.md.
   One rule set for day and night: components only use the semantic tokens (--wk-paper, --wk-tile, --wk-icon-bg ...);
   body.neti swaps the tokens to the neon night, so every window gets both looks for free.
   Frozen: the monument tokens, their place on the map, the neon signs and the map itself.
   Loaded after style.css and cards.css; removing this file and waka-style.js gives the old look back. */

/* ---------- the palette: every colour comes from something Surinamese ---------- */
:root {
  --wk-faya: #b40a2d;      /* faya lobi, the red "fire love" flower; the red of the flag and of the pangi */
  --wk-forest: #123f39;    /* the rainforest that covers most of the land; the green of the flag */
  --wk-forest-2: #0b2a25;
  --wk-gold: #f1b748;      /* the gold star of the flag, and the gold of the interior */
  --wk-gold-deep: #c98a12;
  --wk-kasaba: #fffaf0;    /* kasaba bread, the cream paper of every sheet */
  --wk-sand: #fdf3dc;      /* the white sand of Zanderij and the savanna */
  --wk-sun: #fbe7c0;
  --wk-tembe: #1d2b28;     /* the dark wood of the tembe carvings; the ink */
  --wk-neon-pink: #ff4f81; /* the night: neon signs on the Waterkant */
  --wk-neon-mint: #2ee6c5; /* the night: fireflies */
  --wk-neon-gold: #f5c45b;
  --wk-red: var(--wk-faya); --wk-cream: var(--wk-kasaba); --wk-ink: var(--wk-tembe);

  --wk-pangi: repeating-linear-gradient(90deg, var(--wk-faya) 0 16px, #fff 16px 19px, var(--wk-forest) 19px 33px, #fff 33px 36px,
    var(--wk-gold) 36px 50px, #fff 50px 53px, var(--wk-tembe) 53px 58px, #fff 58px 61px);
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6c6-6 12-6 18 0s12 6 18 0 9-4 12-3M0 6c6 6 12 6 18 0s12-6 18 0 9 4 12 3' fill='none' stroke='%23c98a12' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='6' r='1.6' fill='%23c98a12'/%3E%3Ccircle cx='36' cy='6' r='1.6' fill='%23c98a12'/%3E%3C/svg%3E");
  --wk-step: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 24 36' fill='none' stroke='%23c98a12' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 13v-2.4C5 8.5 4 7.5 4 5c0-2.7 1.5-5 4.5-5S12 2.3 12 4c0 3.1-2 5.7-2 8.7V13a2 2 0 1 1-4 0Z'/%3E%3Cpath d='M19 33v-2.4c0-2.1 1-3.1 1-5.6 0-2.7-1.5-5-4.5-5S12 22.3 12 24c0 3.1 2 5.7 2 8.7V33a2 2 0 1 0 4 0Z'/%3E%3C/svg%3E");
  --wk-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23123f39'%3E%3Cellipse cx='12' cy='15' rx='5' ry='7'/%3E%3Ccircle cx='7' cy='5' r='1.8'/%3E%3Ccircle cx='11' cy='3.5' r='1.8'/%3E%3Ccircle cx='15' cy='4' r='1.7'/%3E%3Ccircle cx='18' cy='6.5' r='1.5'/%3E%3C/svg%3E");

}

/* the semantic tokens live on body, so a theme (body[data-wk-theme]) that changes the palette changes them too */
body {
  /* ---------- semantic tokens: day ---------- */
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #fffdf6 0, var(--wk-kasaba) 55%, #fbf0d8 100%);
  --wk-band: var(--wk-pangi);
  --wk-band-h: 7px;
  --wk-band-glow: none;
  --wk-frame: inset 0 0 0 1px #ead7a6, inset 0 0 0 7px var(--wk-kasaba), inset 0 0 0 8px #f1dfae;
  --wk-sheet-shadow: 0 30px 90px #05271c55;
  --wk-tile: #fff;
  --wk-tile-soft: var(--wk-kasaba);
  --wk-tile-warm: var(--wk-sand);
  --wk-tile-ring: #ecd49a;
  --wk-shadow: 0 6px 18px #7a4d0014, 0 1px 0 #fff inset;
  --wk-shadow-up: 0 10px 22px #7a4d0022;
  --wk-ink-1: var(--wk-forest);
  --wk-ink-2: #6a5a3a;
  --wk-accent: var(--wk-gold-deep);
  --wk-icon-bg: var(--wk-forest);
  --wk-icon-fg: var(--wk-gold);
  --wk-icon-ring: 0 3px 8px #123f3926;
  --wk-btn: linear-gradient(180deg, #1a5048, var(--wk-forest));
  --wk-btn-hover: linear-gradient(180deg, #226154, #164b43);
  --wk-btn-ink: #fff;
  --wk-btn-edge: 0 8px 18px #123f3933, inset 0 -3px 0 var(--wk-forest-2), inset 0 1px 0 #ffffff1f;
  --wk-chosen: linear-gradient(135deg, #1a5048, var(--wk-forest));
  --wk-chosen-ink: #fff;
  --wk-chosen-sub: #cfe0da;
  --wk-coin: linear-gradient(180deg, #f6c862, var(--wk-gold));
  --wk-ribbon-bg: var(--wk-forest);
  --wk-ribbon-ink: var(--wk-gold);
  --wk-next-ring: 0 0 0 2px var(--wk-gold), 0 10px 26px #c98a1238;
  --wk-done-bg: linear-gradient(135deg, #f1f8f4, #fff);
  --wk-stamp: #2f7d4f;
  --wk-handle: #c9b996;
  --wk-chapter-line: var(--wk-tembe-line) repeat-x left center / 48px 12px;
  --wk-track: #f3e7c8;
}

/* ---------- semantic tokens: night (same shapes, neon on deep indigo) ---------- */
body.neti {
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #1a1f40 0, #12162e 60%, #0f1328 100%);
  --wk-band: linear-gradient(90deg, var(--wk-neon-pink), var(--wk-neon-mint), var(--wk-neon-gold), var(--wk-neon-pink));
  --wk-band-h: 4px;
  --wk-band-glow: 0 0 14px #ff4f8188;
  --wk-frame: inset 0 0 0 1px #2b3258, inset 0 0 0 7px #12162e, inset 0 0 0 8px #2f3766;
  --wk-sheet-shadow: 0 30px 100px #000a;
  --wk-tile: #1b2045;
  --wk-tile-soft: #171c3b;
  --wk-tile-warm: #1d1830;
  --wk-tile-ring: #2f3766;
  --wk-shadow: 0 0 0 1px #2f3766, 0 6px 16px #0006;
  --wk-shadow-up: 0 0 0 1px #3c4580, 0 0 18px #2ee6c522;
  --wk-ink-1: #eef0ff;
  --wk-ink-2: #a9b1dc;
  --wk-accent: var(--wk-neon-gold);
  --wk-icon-bg: #2ee6c514;
  --wk-icon-fg: var(--wk-neon-mint);
  --wk-icon-ring: 0 0 0 1.5px #2ee6c5aa, 0 0 12px #2ee6c544;
  --wk-btn: linear-gradient(180deg, #f6c862, var(--wk-gold));
  --wk-btn-hover: linear-gradient(180deg, #f8d27a, #f3bf5a);
  --wk-btn-ink: #10142a;
  --wk-btn-edge: 0 0 18px #f5c45b44, inset 0 -3px 0 #c98a12;
  --wk-chosen: linear-gradient(135deg, #2a2160, #1b2045);
  --wk-chosen-ink: #fff;
  --wk-chosen-sub: #c9cff5;
  --wk-ribbon-bg: var(--wk-neon-pink);
  --wk-ribbon-ink: #fff;
  --wk-next-ring: 0 0 0 2px var(--wk-neon-mint), 0 0 22px #2ee6c555;
  --wk-done-bg: linear-gradient(135deg, #17304a, #1b2045);
  --wk-stamp: var(--wk-neon-mint);
  --wk-handle: #3c4580;
  --wk-chapter-line: linear-gradient(90deg, #ff4f81aa, transparent) left center / 100% 2px no-repeat;
  --wk-track: #1b2045;
}

/* ---------- the top bar: the pangi band underneath ---------- */
.topbar { position: relative; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--wk-pangi); opacity: .9; }

/* ---------- Waka icons: every icon in a tile shaped like the W of the logo ---------- */
:is(.secondary, .choice, .rule, .tool-button, .gps-note) > svg.lucide, .route-n > svg.lucide {
  box-sizing: content-box; width: 18px; height: 18px; padding: 7px; flex: none; color: var(--wk-icon-fg); background: var(--wk-icon-bg);
  border-radius: 10px 10px 14px 14px; transform: rotate(-4deg); stroke-width: 2.1; box-shadow: var(--wk-icon-ring);
}
.primary > svg.lucide { color: var(--wk-gold); }
body.neti .primary > svg.lucide { color: #10142a; }

/* ---------- buttons: the call to adventure, and warm cards ---------- */
#modal .primary, .journey .primary {
  background: var(--wk-btn); color: var(--wk-btn-ink); border-radius: 16px; min-height: 52px; box-shadow: var(--wk-btn-edge); letter-spacing: -.01em;
  position: relative; overflow: hidden;
}
#modal .primary:hover, .journey .primary:hover { background: var(--wk-btn-hover); }
body:not(.neti) .primary.gold { background: var(--wk-coin); color: var(--wk-forest); box-shadow: 0 8px 18px #c98a1240, inset 0 -3px 0 #d79b2e; }
#modal .primary::after, .journey .primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, #ffffff2e, transparent); animation: wk-shine 5s ease-in-out infinite;
}
@keyframes wk-shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
#modal :is(.secondary, .link-button), .journey .secondary {
  background: var(--wk-tile-soft); color: var(--wk-ink-1); border: 0; border-radius: 16px; min-height: 54px; justify-content: flex-start; gap: 12px;
  padding: 10px 14px; box-shadow: var(--wk-shadow); text-align: left; margin-top: 10px;
}
#modal :is(.secondary, .choice, .route-row):hover, .journey .secondary:hover { transform: translateY(-1px); box-shadow: var(--wk-shadow-up); }
.text-button { color: var(--wk-ink-1); text-decoration-color: var(--wk-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* loose text links (mission: try again / I'm here) as small trail chips, never glued together */
#mission .text-button, .journey .text-button {
  display: inline-block; margin: 10px 10px 0 0; padding: 7px 12px; border-radius: 999px; background: var(--wk-tile-soft);
  box-shadow: inset 0 0 0 1.5px var(--wk-tile-ring); text-decoration: none; font-weight: 700; font-size: .9em;
}

/* ---------- choices (walk length, options): cards, the chosen one (.on) in the theme colour; locked = a wax seal ---------- */
#modal .choice {
  background: var(--wk-tile-soft); color: var(--wk-ink-1); border: 0; border-radius: 18px; box-shadow: var(--wk-shadow); padding: 14px 16px; gap: 14px; margin-top: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
#modal .choice b { font-family: Manrope, sans-serif; font-size: 1rem; letter-spacing: -.02em; }
/* only a choice the player really made (the app marks it .on) looks chosen; never simply the first in the list */
#modal .choice.on:not(.locked) { background: var(--wk-chosen); color: var(--wk-chosen-ink); }
#modal .choice.on:not(.locked) small { color: var(--wk-chosen-sub); }
#modal .choice.on:not(.locked) > svg.lucide { background: var(--wk-gold); color: var(--wk-forest); box-shadow: none; }
#modal .choice.locked { background: repeating-linear-gradient(135deg, var(--wk-tile-soft) 0 10px, var(--wk-tile-warm) 10px 20px); }
#modal .choice.locked > svg.lucide {
  border-radius: 50%; padding: 8px; color: #ffe7b0; transform: rotate(-8deg);
  background: radial-gradient(circle at 35% 30%, #d8433f 0, var(--wk-faya) 55%, #7c0620 100%);
  box-shadow: 0 0 0 3px #b40a2d33, 0 4px 8px #7c062055, inset 0 -2px 3px #0004;
}

/* ---------- the sheet: a quest card (paper, double frame, the band on top); from below on a phone ---------- */
dialog#modal { background: var(--wk-paper); border-radius: 28px; padding: 0; overflow: hidden; box-shadow: var(--wk-sheet-shadow), var(--wk-frame); }
dialog#modal::before { content: ''; display: block; height: var(--wk-band-h); background: var(--wk-band); box-shadow: var(--wk-band-glow); }
dialog#modal .modal-head { padding: 18px 22px 0; margin-bottom: 8px; }
dialog#modal #modal-body { padding: 0 22px 24px; max-height: calc(88dvh - 80px); overflow: auto; }
dialog#modal .eyebrow { color: var(--wk-accent); }
dialog#modal h2 { font-weight: 800; letter-spacing: -.045em; }
#close-modal { background: var(--wk-tile); box-shadow: var(--wk-shadow); border: 0; }
@media (max-width: 720px) {
  /* the sheet sits on the bottom edge by its own position, not by an automatic margin (owner 18-10-2026: on iPhones,
     Safari and Chrome alike, the welcome sheet stood below the screen with only its band in view while the page behind
     it was dimmed; Android was fine). svh first, the height that never hides behind Safari's bars; vh for older phones. */
  dialog#modal { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
    max-height: 92vh; max-height: 92svh; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog#modal #modal-body { max-height: calc(86vh - 80px); max-height: calc(86svh - 80px - env(safe-area-inset-bottom, 0px)); }
  dialog#modal[open] { animation: wk-sheet .28s cubic-bezier(.2, .9, .3, 1); }
  dialog#modal .modal-head { position: relative; padding-top: 22px; }
  dialog#modal .modal-head::before { content: ''; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: var(--wk-handle); }
}
@keyframes wk-sheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- route lists: chapters as ribbons, every monument a card with its figure, footsteps between ---------- */
#modal .route-chapter {
  display: flex; align-items: center; gap: 10px; padding: 24px 2px 8px; color: var(--wk-ink-1); font-weight: 800; letter-spacing: .14em; font-size: .7rem;
}
#modal .route-chapter::after { content: ''; flex: 1; height: 12px; background: var(--wk-chapter-line); opacity: .85; }
#modal .route-chapter.wk-ribbon { padding: 0; margin: 22px 0 10px; width: 100%; }
#modal .route-chapter.wk-ribbon .wk-rib {
  display: inline-block; padding: 7px 18px 7px 16px; background: var(--wk-ribbon-bg); color: var(--wk-ribbon-ink); font-weight: 800; letter-spacing: .16em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%); white-space: nowrap;
}
#modal .route-row {
  background: var(--wk-tile); color: var(--wk-ink-1); border: 0; border-radius: 18px; padding: 10px 12px 10px 10px; margin-top: 8px; box-shadow: var(--wk-shadow); gap: 12px;
  transition: transform .12s ease, box-shadow .12s ease; position: relative; overflow: visible;
}
#modal .route-row small { color: var(--wk-ink-2); }
#modal .route-row .route-n {
  width: 54px; height: 54px; border-radius: 16px; background: radial-gradient(circle at 50% 70%, var(--wk-tile) 0 30%, var(--wk-tile-warm) 70%);
  position: relative; font-weight: 800; color: var(--wk-ink-1); border: 0;
}
#modal .route-row .route-n.wk-has-fig > svg.lucide { display: none; }
#modal .route-row .route-n .wk-fig { position: absolute; left: 3px; top: 2px; width: 48px; height: 48px; inset: auto; transform: none; filter: drop-shadow(0 4px 4px #7a4d0033); }
#modal .route-row .route-n .wk-num { position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--wk-gold); color: var(--wk-forest); font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px #7a4d0033; }
#modal .route-row .route-name { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: .92rem; }
#modal .route-row > svg.lucide-chevron-right { color: var(--wk-accent); }
#modal .route-row.errand .route-n { background: radial-gradient(circle at 50% 70%, var(--wk-tile) 0 30%, var(--wk-sun) 70%); }
body.neti #modal .route-row.errand .route-n { background: radial-gradient(circle at 50% 70%, var(--wk-tile) 0 30%, #2a2160 70%); }
#modal .route-row + .route-row::before {
  content: ''; position: absolute; left: 30px; top: -16px; width: 16px; height: 24px; z-index: 0; background: var(--wk-step) no-repeat center / contain;
}
body.neti #modal .route-row + .route-row::before { filter: hue-rotate(120deg) saturate(1.6) brightness(1.4); }
#modal .route-row.wk-next { box-shadow: var(--wk-next-ring); }
#modal .route-row.wk-next .route-n { animation: wk-bob 2.4s ease-in-out infinite; }
@keyframes wk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#modal .route-row.done { background: var(--wk-done-bg); opacity: .92; }
#modal .route-row.done .route-n .wk-num { background: var(--wk-forest); color: var(--wk-gold); }
#modal .route-row.done .route-n .wk-num::before { content: '✓ '; }
#modal .route-row.done .route-n::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--wk-stamp) 80%, transparent); transform: rotate(-12deg);
  background: radial-gradient(circle, transparent 60%, color-mix(in srgb, var(--wk-stamp) 10%, transparent) 61%); pointer-events: none;
}

/* ---------- rules of play: tiles with a Waka icon ---------- */
#modal .rules { display: grid; gap: 10px; }
#modal .rule { background: var(--wk-tile); color: var(--wk-ink-1); border: 0; border-radius: 18px; box-shadow: var(--wk-shadow); padding: 14px; gap: 12px; margin: 0; }

/* ---------- the day panel: the mission as a quest card, the trail of progress ---------- */
.journey { background: linear-gradient(180deg, #fff 0, var(--wk-kasaba) 220px); }
.journey::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--wk-band); box-shadow: var(--wk-band-glow); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: .95; }
.journey-top h2 { font-weight: 800; letter-spacing: -.035em; font-size: 1.12rem; }
.journey .eyebrow { display: inline-block; background: var(--wk-ribbon-bg); color: var(--wk-ribbon-ink); padding: 4px 10px 4px 9px; border-radius: 6px 12px 12px 6px; }
.progress-track {
  height: 14px; border-radius: 10px; box-shadow: inset 0 1px 2px #7a4d0022; position: relative; overflow: visible;
  background: var(--wk-track) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Ccircle cx='11' cy='7' r='1.6' fill='%23c98a12' opacity='.45'/%3E%3C/svg%3E") repeat-x center;
}
.progress-track::after {
  content: ''; position: absolute; inset: -3px 0; pointer-events: none;
  background: radial-gradient(circle, var(--wk-forest) 0 4px, var(--wk-gold) 4.5px 6px, transparent 6.5px) 25% 50% / 20px 20px no-repeat,
              radial-gradient(circle, var(--wk-forest) 0 4px, var(--wk-gold) 4.5px 6px, transparent 6.5px) 50% 50% / 20px 20px no-repeat,
              radial-gradient(circle, var(--wk-forest) 0 4px, var(--wk-gold) 4.5px 6px, transparent 6.5px) 75% 50% / 20px 20px no-repeat;
}
#progress-fill { background: linear-gradient(90deg, var(--wk-gold), #f6c862); border-radius: 10px; box-shadow: 0 0 8px #f1b74888; }
.status-mini .mini-score, .status-mini .mini-pass { border-radius: 12px 12px 15px 15px; box-shadow: var(--wk-shadow); }
.mission-art { border-radius: 22px; background: radial-gradient(120% 90% at 50% 100%, #fff 0, var(--wk-sand) 60%, var(--wk-sun) 100%); box-shadow: var(--wk-shadow), inset 0 0 0 2px #fff, inset 0 0 0 3px #ecd49a; }
.mission-art .number { background: var(--wk-coin); color: var(--wk-forest); font-weight: 800; border-radius: 10px 10px 16px 16px; box-shadow: 0 4px 10px #c98a1240; }
#mission h3 { font-weight: 800; letter-spacing: -.045em; }
.gps-note { background: #fff7e3; border: 0; border-radius: 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--wk-shadow); }
.walk-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; padding-top: 4px; margin-top: 16px; }
.walk-tools .tool-button {
  flex-direction: column; justify-content: center; gap: 8px; text-align: center; background: var(--wk-kasaba); border-radius: 16px; padding: 12px 6px;
  box-shadow: var(--wk-shadow); font-size: .72rem; font-weight: 700; color: var(--wk-forest); min-height: 86px; text-decoration: none;
}
.journey-foot { border: 0; background: var(--wk-sand); border-radius: 16px; padding: 12px 14px; color: #6a5a3a; }
.journey-foot svg { color: var(--wk-gold-deep); }
.tag.gold { border-radius: 10px 10px 13px 13px; box-shadow: 0 3px 8px #c98a1226; }

/* ---------- the free game: nine medallion slots on a trail; a done one carries a gold footprint ---------- */
#modal .free-boxes { gap: 6px; margin: 10px 0 14px; position: relative; }
#modal .free-boxes::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 2px dashed var(--wk-tile-ring); z-index: 0; }
#modal .free-box { height: auto; aspect-ratio: 1; border-radius: 50%; position: relative; z-index: 1; background: var(--wk-tile-soft); box-shadow: inset 0 0 0 2px var(--wk-tile-ring); }
#modal .free-box.on { background: radial-gradient(circle at 35% 30%, #f6c862, var(--wk-gold) 60%, var(--wk-gold-deep)); box-shadow: 0 0 0 2px var(--wk-forest), 0 3px 6px #c98a1255; }
#modal .free-box.on::after { content: ''; position: absolute; inset: 22%; transform: rotate(-12deg); background: var(--wk-foot) center / contain no-repeat; }
#modal .free-head { display: inline-block; background: var(--wk-ribbon-bg); color: var(--wk-ribbon-ink); padding: 5px 12px; border-radius: 6px 14px 14px 6px; font-size: .95em; letter-spacing: .04em; }
#modal :is(.free-list, .pass-list) { list-style: none; }
#modal .free-list { padding: 12px 14px; margin: 8px 0 12px; border-radius: 14px; background: var(--wk-tile-soft); box-shadow: inset 0 0 0 1.5px var(--wk-tile-ring); }
#modal .pass-list { padding-left: 0; }
#modal :is(.free-list, .pass-list) li { position: relative; padding-left: 24px; margin: 6px 0; }
#modal :is(.free-list, .pass-list) li::before { content: '✦'; position: absolute; left: 2px; top: 0; color: var(--wk-gold); font-size: 1.05em; }
#modal .free-pass { border-left: 4px solid var(--wk-gold); }

/* ---------- the pass: a city ticket with notches and a pangi stub; the code field as the tear-off stub ---------- */
#modal-body:has(#pass-code) .errand-art {
  position: relative; background: linear-gradient(135deg, #f6c862, var(--wk-gold) 55%, #e09d22); color: var(--wk-forest);
  border-radius: 14px; box-shadow: 0 8px 18px #c98a1240, inset 0 0 0 2px #fff6, inset 0 0 0 6px #123f3922;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
#modal-body:has(#pass-code) .errand-art::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 14px 14px; background: var(--wk-pangi); }
#modal-body:has(#pass-code) .errand-art svg { color: var(--wk-forest); transform: rotate(-8deg) scale(1.15); }
#modal #pass-code {
  text-align: center; font-size: 1.35em; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--wk-ink-1);
  background: var(--wk-tile-soft); border: 2px dashed var(--wk-gold); border-radius: 12px; padding: 14px 10px;
}
#modal #pass-code::placeholder { color: color-mix(in srgb, var(--wk-gold) 60%, var(--wk-ink-2)); letter-spacing: .28em; }
#modal #pass-code:focus { outline: none; border-style: solid; box-shadow: 0 0 0 4px #f1b74840; }

/* ---------- the night quest: the offer as a neon reward ticket, the firefly line as a glowing reward ---------- */
body.neti #modal .partner-box.neti-act {
  position: relative; border: 1.5px dashed #f5c45b99; border-radius: 16px; background: linear-gradient(160deg, #241a3a, #1a2136);
  box-shadow: 0 0 0 1px #f5c45b22, 0 0 18px #f5c45b1f;
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
body.neti #modal .partner-box.neti-act .partner-offer { color: var(--wk-neon-gold); text-shadow: 0 0 10px #f5c45b55; }
body.neti #modal .waka-neon-hint {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; color: #ffe9a8;
  background: radial-gradient(circle at 12% 50%, #f5c45b2e, transparent 45%), var(--wk-tile-warm); box-shadow: inset 0 0 0 1.5px #ff4f8166, 0 0 16px #ff4f8122;
}
body.neti #modal .waka-neon-hint > svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--wk-neon-gold); background: #f5c45b22; box-shadow: 0 0 12px #f5c45b88; animation: wk-glow 2.6s ease-in-out infinite; }
@keyframes wk-glow { 50% { box-shadow: 0 0 22px #f5c45bcc; } }
body.neti #modal .neti-tags span { box-shadow: inset 0 0 0 1px #2ee6c566, 0 0 8px #2ee6c522; }

/* ---------- less motion for people who ask for it ---------- */
@media (prefers-reduced-motion: reduce) {
  dialog#modal[open], #modal .route-row.wk-next .route-n, body.neti #modal .waka-neon-hint > svg { animation: none; }
  #modal .primary::after, .journey .primary::after { animation: none; display: none; }
}


/* ---------- the medallion next to every window title ---------- */
dialog#modal .modal-head { display: flex; align-items: center; gap: 10px; }
dialog#modal .modal-head .wk-medal + .eyebrow { margin-right: auto; }
.wk-medal {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px 11px 15px 15px; transform: rotate(-6deg);
  background: var(--wk-icon-bg); color: var(--wk-icon-fg); box-shadow: var(--wk-icon-ring), 0 0 0 3px var(--wk-tile-soft), 0 0 0 4.5px var(--wk-tile-ring);
}
.wk-medal svg { width: 19px; height: 19px; stroke-width: 2.1; }


/* ======================= step 4: rules, how to play, Jouw avond, Samen op stap, the seal ======================= */
/* how to play: the steps as a quest map, a gold coin per step and a trail between them */
#modal-body > ol.small-text { list-style: none; counter-reset: wk-step; padding: 0; margin: 12px 0 16px; display: grid; gap: 14px; position: relative; }
#modal-body > ol.small-text::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 20px; border-left: 2px dashed var(--wk-tile-ring); }
#modal-body > ol.small-text > li {
  counter-increment: wk-step; position: relative; padding: 12px 14px 12px 58px; border-radius: 16px; background: var(--wk-tile); color: var(--wk-ink-1);
  box-shadow: var(--wk-shadow); font-size: .86rem; line-height: 1.5;
}
#modal-body > ol.small-text > li::before {
  content: counter(wk-step); position: absolute; left: 6px; top: 10px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--wk-coin); color: var(--wk-forest); font: 800 .95rem Manrope, sans-serif; transform: rotate(-8deg);
  box-shadow: 0 0 0 3px var(--wk-tile), 0 0 0 4.5px var(--wk-tile-ring), 0 4px 8px #c98a1240;
}
#modal-body > ol.small-text > li > b:first-child { display: block; font-size: .95rem; margin-bottom: 2px; color: var(--wk-ink-1); }

/* rules of play: the Waka code of honour; numbered seals, cards slightly tilted like pinned notes */
#modal .rules { counter-reset: wk-rule; gap: 14px; margin: 14px 0 16px; }
#modal .rule { counter-increment: wk-rule; position: relative; padding: 14px 14px 14px 16px; align-items: flex-start; }
#modal .rule:nth-child(odd) { transform: rotate(-.5deg); }
#modal .rule:nth-child(even) { transform: rotate(.5deg); }
#modal .rule::after {
  content: counter(wk-rule); position: absolute; right: -6px; top: -8px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font: 800 .75rem Manrope, sans-serif; color: #ffe7b0; transform: rotate(10deg);
  background: radial-gradient(circle at 35% 30%, #d8433f 0, var(--wk-faya) 55%, #7c0620 100%); box-shadow: 0 0 0 2px #b40a2d33, 0 3px 6px #7c062055;
}
body.neti #modal .rule::after { background: radial-gradient(circle at 35% 30%, #ff7aa0 0, var(--wk-neon-pink) 60%, #b02a5a 100%); color: #fff; box-shadow: 0 0 12px #ff4f8188; }
#modal .rule p b { display: block; font-size: .95rem; margin-bottom: 2px; }
#modal .rules-tip { border-radius: 14px; padding: 12px 14px; background: var(--wk-tile-warm); color: var(--wk-ink-1); box-shadow: inset 0 0 0 1.5px var(--wk-tile-ring); }
#modal .rules-tip > svg.lucide { color: var(--wk-accent); }

/* Jouw avond: the stops of the evening as a trail of cards, with times as pills */
#modal .avond-list { gap: 14px; position: relative; }
#modal .avond-list::before { content: ''; position: absolute; left: 27px; top: 24px; bottom: 24px; border-left: 2px dotted var(--wk-neon-pink); opacity: .55; }
#modal .avond-row { position: relative; background: var(--wk-tile); color: var(--wk-ink-1); border-radius: 16px; padding: 10px 12px; box-shadow: var(--wk-shadow); }
#modal .avond-row .route-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 0; font-weight: 800; transform: rotate(-6deg);
  background: var(--wk-coin); color: var(--wk-forest); box-shadow: 0 0 0 3px var(--wk-tile), 0 0 0 4.5px var(--wk-tile-ring);
}
body.neti #modal .avond-row .route-n { background: #2a2160; color: var(--wk-neon-gold); box-shadow: 0 0 0 2px var(--wk-neon-pink), 0 0 12px #ff4f8166; }
#modal .avond-row.cur { box-shadow: var(--wk-next-ring); }
#modal .avond-row.done .route-n { background: var(--wk-forest); color: var(--wk-gold); }
#modal .avond-when {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800;
  background: color-mix(in srgb, var(--wk-gold) 22%, transparent); color: var(--wk-ink-1);
}
body.neti #modal .avond-when { background: #f5c45b22; color: var(--wk-neon-gold); box-shadow: inset 0 0 0 1px #f5c45b55; }
#modal .avond-fixed { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; background: #2ee6c522; color: var(--wk-neon-mint); }
#modal .avond-done { border-radius: 18px; background: radial-gradient(circle at 50% 0%, #3a2a7a, #1d1830); box-shadow: 0 0 0 1.5px #f5c45b55, 0 0 22px #f5c45b22; }

/* Samen op stap: the shared evening as an invitation card (a ticket with notches and a neon edge) */
#modal .samen-card:not([hidden]) {
  position: relative; border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, #fff3d6, #ffe7ef); color: var(--wk-forest);
  box-shadow: inset 0 0 0 1.5px #f1b74888, 0 6px 16px #7a4d0018;
  -webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 8px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
body.neti #modal .samen-card:not([hidden]) { background: linear-gradient(135deg, #2a1b5c, #3a1640); color: #fff; box-shadow: inset 0 0 0 1.5px #ff4f8188, 0 0 18px #ff4f8122; }
#modal .samen-card > svg.lucide { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--wk-faya); color: #fff; transform: rotate(-6deg); }
body.neti #modal .samen-card > svg.lucide { background: var(--wk-neon-pink); box-shadow: 0 0 12px #ff4f8199; }
#modal .samen-code { background: var(--wk-tile-soft); color: var(--wk-ink-1); border: 2px dashed var(--wk-gold); }

/* the seal: a round gold stamp with an hourglass for what comes later (an upcoming shared evening); no words, so it
   works in all six languages; the sentence itself stays a quiet note */
.wk-seal { font-style: italic; opacity: .9; }
#modal .samen-card.wk-later { padding-right: 56px; }
#modal .samen-card.wk-later::after {
  content: ''; position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; transform: rotate(12deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9M16 3c0 5-8 5-8 9s8 4 8 9'/%3E%3Cpath d='M10 19h4' stroke-width='2.6'/%3E%3C/svg%3E") center / 20px no-repeat,
              radial-gradient(circle at 35% 30%, #f6c862, var(--wk-gold) 60%, var(--wk-gold-deep));
  box-shadow: 0 0 0 2px var(--wk-tile-soft), 0 0 0 3.5px var(--wk-gold-deep), 0 4px 8px #0003;
}

/* ======================= themes (owner 16-10-2026): one at a time, chosen with the button next to day/night ======================= */
/* Every theme keeps the grietjebie (hero, help icon) and the faya lobi red (--wk-faya, also in each band). Named after
   the motif, not after a group: Pangi (the default above), Sari, later Batik, Lantaarn and Mand. */

/* ---------- Sari: the sari border with gold zari, rangoli dots, marigold, deep sari red and peacock blue ---------- */
/* on body, and on a card in the choice sheet, which shows that theme on itself */
[data-wk-theme="sari"] {
  --wk-forest: #6b1030;    /* the deep red of a festive sari */
  --wk-forest-2: #4a0820;
  --wk-gold: #f4a62a;      /* marigold (genda), and the gold zari thread of the border */
  --wk-gold-deep: #c47a0c;
  --wk-kasaba: #fff8ee;
  --wk-sand: #fdecd6;
  --wk-sun: #fbd9a8;
  --wk-tembe: #2b1620;
  --wk-peacock: #0e6b73;   /* peacock blue */
  --wk-pangi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect width='28' height='14' fill='%236b1030'/%3E%3Crect width='28' height='1.6' fill='%23f4a62a'/%3E%3Cpath d='M0 10 7 3.5l7 6.5 7-6.5 7 6.5' fill='none' stroke='%23f4a62a' stroke-width='1.6'/%3E%3Ccircle cx='7' cy='9.2' r='1.3' fill='%23f4a62a'/%3E%3Ccircle cx='21' cy='9.2' r='1.3' fill='%23f4a62a'/%3E%3Crect y='12' width='28' height='2' fill='%23b40a2d'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cg fill='%23c47a0c'%3E%3Ccircle cx='4' cy='6' r='1.2'/%3E%3Ccircle cx='10' cy='6' r='1.2'/%3E%3Ccircle cx='38' cy='6' r='1.2'/%3E%3Ccircle cx='44' cy='6' r='1.2'/%3E%3Cellipse cx='24' cy='2.6' rx='1.6' ry='2.6'/%3E%3Cellipse cx='24' cy='9.4' rx='1.6' ry='2.6'/%3E%3Cellipse cx='20.6' cy='6' rx='2.6' ry='1.6'/%3E%3Cellipse cx='27.4' cy='6' rx='2.6' ry='1.6'/%3E%3C/g%3E%3Ccircle cx='24' cy='6' r='1.5' fill='%23b40a2d'/%3E%3Cpath d='M13 6h4M31 6h4' stroke='%23c47a0c' stroke-width='1.2' stroke-linecap='round' stroke-dasharray='1 1.6'/%3E%3C/svg%3E");
}
body:not(.neti)[data-wk-theme="sari"] {
  --wk-frame: inset 0 0 0 1px #efc98f, inset 0 0 0 7px var(--wk-kasaba), inset 0 0 0 8px #f3d29c;
  --wk-sheet-shadow: 0 30px 90px #4a082055;
  --wk-tile-ring: #f0cf9a;
  --wk-shadow: 0 6px 18px #6b10301a, 0 1px 0 #fff inset;
  --wk-shadow-up: 0 10px 22px #6b103026;
  --wk-ink-2: #6e4a3a;
  --wk-icon-ring: 0 3px 8px #6b103026;
  --wk-btn: linear-gradient(180deg, #86163d, var(--wk-forest));
  --wk-btn-hover: linear-gradient(180deg, #97204a, #7a1438);
  --wk-btn-edge: 0 8px 18px #6b103033, inset 0 -3px 0 var(--wk-forest-2), inset 0 1px 0 #ffffff1f;
  --wk-chosen: linear-gradient(135deg, #12858d, var(--wk-peacock));
  --wk-chosen-sub: #cdeceb;
  --wk-next-ring: 0 0 0 2px var(--wk-gold), 0 10px 26px #c47a0c38;
  --wk-done-bg: linear-gradient(135deg, #eaf6f5, #fff);
  --wk-stamp: var(--wk-peacock);
  --wk-track: #f7e1c4;
  --wk-handle: #d9b48e;
}
/* Sari at night: the same neon, in saffron and magenta */
body.neti[data-wk-theme="sari"] {
  --wk-band: linear-gradient(90deg, #ff9f1c, #ff4f81, #ffd166, #ff9f1c);
  --wk-band-glow: 0 0 14px #ff9f1c88;
  --wk-icon-fg: #ffb547;
  --wk-icon-bg: #ffb54714;
  --wk-icon-ring: 0 0 0 1.5px #ffb547aa, 0 0 12px #ffb54744;
  --wk-ribbon-bg: #ff9f1c;
  --wk-ribbon-ink: #2b1620;
  --wk-next-ring: 0 0 0 2px #ffb547, 0 0 22px #ffb54755;
  --wk-chapter-line: linear-gradient(90deg, #ff9f1caa, transparent) left center / 100% 2px no-repeat;
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #2a1638 0, #1a1230 60%, #120d26 100%);
}
/* the hero per theme: Sari swaps the korjaal for a marigold garland; the grietjebie stays */
/* the day panel and the mission card take the theme's paper */
body:not(.neti)[data-wk-theme="sari"] .journey { background: linear-gradient(180deg, #fff 0, var(--wk-kasaba) 220px); } /* day only: at night cards.css paints the panel dark (owner 17-10-2026: Sari by night had light text on cream) */
body[data-wk-theme="sari"] .mission-art { box-shadow: var(--wk-shadow), inset 0 0 0 2px #fff, inset 0 0 0 3px var(--wk-tile-ring); }
body:not(.neti)[data-wk-theme="sari"] .gps-note { background: #fff1e0; }

/* ---------- the theme button (next to day/night) and the choice sheet ---------- */
.wk-theme-btn .wk-theme-dot {
  display: block; width: 20px; height: 20px; border-radius: 50%; transform: rotate(-20deg);
  background: conic-gradient(var(--wk-faya) 0 33%, var(--wk-gold) 0 66%, var(--wk-forest) 0); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0002;
}
dialog#wk-theme {
  border: 0; padding: 0; width: min(440px, 100%); border-radius: 28px; background: var(--wk-paper); color: var(--wk-ink-1);
  box-shadow: var(--wk-sheet-shadow), var(--wk-frame); overflow: hidden;
}
dialog#wk-theme::backdrop { background: #05271c66; }
dialog#wk-theme::before { content: ''; display: block; height: var(--wk-band-h); background: var(--wk-band); }
dialog#wk-theme .wk-tb { padding: 18px 22px 22px; }
dialog#wk-theme .eyebrow { color: var(--wk-accent); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
dialog#wk-theme h2 { margin: 4px 0 6px; font-weight: 800; letter-spacing: -.04em; font-size: 1.35rem; }
dialog#wk-theme p { margin: 0 0 14px; font-size: .85rem; color: var(--wk-ink-2); }
dialog#wk-theme p.wk-tnote { display: flex; align-items: center; gap: 10px; }
.wk-tpair { flex: none; display: inline-flex; gap: 3px; padding: 5px 7px; border-radius: 12px; background: var(--wk-sun); color: var(--wk-gold-deep); box-shadow: inset 0 0 0 1px #c98a1240; } /* light by day, so the red faya lobi shows in every style */
body.neti .wk-tpair { background: var(--wk-icon-bg); color: var(--wk-icon-fg); box-shadow: var(--wk-icon-ring); }
.wk-tpair svg { width: 22px; height: 22px; }
.wk-tcard {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; width: 100%; text-align: left; margin: 0 0 12px; padding: 0 0 12px; border: 0;
  border-radius: 18px; overflow: hidden; background: var(--wk-tile); color: var(--wk-ink-1); box-shadow: var(--wk-shadow); cursor: pointer; font: inherit;
}
.wk-tcard .wk-tband { grid-column: 1 / -1; height: 14px; background: var(--wk-pangi); }
.wk-tcard[data-wk-theme="pangi"] .wk-tband { background: repeating-linear-gradient(90deg, #b40a2d 0 16px, #fff 16px 19px, #123f39 19px 33px, #fff 33px 36px, #f1b748 36px 50px, #fff 50px 53px, #1d2b28 53px 58px, #fff 58px 61px); }
.wk-tcard b { padding-left: 14px; font: 800 1.05rem Manrope, sans-serif; letter-spacing: -.02em; }
.wk-tcard small { grid-column: 1 / -1; padding: 0 14px; color: var(--wk-ink-2); font-size: .8rem; line-height: 1.4; }
.wk-tcard .wk-tdots { display: flex; gap: 4px; padding-right: 14px; align-items: center; }
.wk-tcard .wk-tdots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #0001; }
.wk-tcard[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--wk-gold), 0 10px 24px #0002; }
.wk-tcard[aria-pressed="true"] b::after { content: ' ✓'; color: var(--wk-gold-deep); }
dialog#wk-theme .primary { width: 100%; }
@media (max-width: 720px) {
  dialog#wk-theme { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    max-height: none; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog#wk-theme[open] { animation: wk-sheet .28s cubic-bezier(.2, .9, .3, 1); }
}
@media (prefers-reduced-motion: reduce) { dialog#wk-theme[open] { animation: none; } }
/* titles follow the theme's ink (forest in Pangi, sari red in Sari, white at night) */
dialog#modal h2, .journey-top h2, #mission h3, dialog#wk-theme h2 { color: var(--wk-ink-1); }

/* ---------- Batik: sogan brown, indigo and the gold of prada batik; the kawung band, truntum stars between chapters ---------- */
[data-wk-theme="batik"] {
  --wk-forest: #5a3418;    /* sogan, the warm brown of classic Javanese batik */
  --wk-forest-2: #3f230f;
  --wk-gold: #d9a441;      /* the gold of prada batik */
  --wk-gold-deep: #a8761f;
  --wk-kasaba: #fbf4e6;    /* mori, the cream cotton the batik is drawn on */
  --wk-sand: #f3e6cc;
  --wk-sun: #eedbb2;
  --wk-tembe: #2a1c10;
  --wk-indigo: #1f3a6b;    /* indigo, the blue of batik dye */
  --wk-pangi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect width='28' height='14' fill='%235a3418'/%3E%3Crect width='28' height='1.4' fill='%23d9a441'/%3E%3Cg fill='%23f3e2c0'%3E%3Cellipse cx='14' cy='3.9' rx='1.5' ry='2.3'/%3E%3Cellipse cx='14' cy='9.5' rx='1.5' ry='2.3'/%3E%3Cellipse cx='11.2' cy='6.7' rx='2.3' ry='1.5'/%3E%3Cellipse cx='16.8' cy='6.7' rx='2.3' ry='1.5'/%3E%3C/g%3E%3Ccircle cx='14' cy='6.7' r='.8' fill='%23d9a441'/%3E%3Ccircle cx='0' cy='6.7' r='1.2' fill='%23d9a441'/%3E%3Ccircle cx='28' cy='6.7' r='1.2' fill='%23d9a441'/%3E%3Crect y='12' width='28' height='2' fill='%23b40a2d'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cg fill='%23a8761f'%3E%3Cpath d='M6 3l.9 2.1L9 6l-2.1.9L6 9l-.9-2.1L3 6l2.1-.9Z'/%3E%3Cpath d='M42 3l.9 2.1L45 6l-2.1.9L42 9l-.9-2.1L39 6l2.1-.9Z'/%3E%3Ccircle cx='15' cy='6' r='1'/%3E%3Ccircle cx='33' cy='6' r='1'/%3E%3C/g%3E%3Cpath d='M24 1.5l1.3 3.2L28.5 6l-3.2 1.3L24 10.5l-1.3-3.2L19.5 6l3.2-1.3Z' fill='%23a8761f'/%3E%3Ccircle cx='24' cy='6' r='1.2' fill='%23b40a2d'/%3E%3C/svg%3E");
}
body:not(.neti)[data-wk-theme="batik"] {
  --wk-frame: inset 0 0 0 1px #e2c992, inset 0 0 0 7px var(--wk-kasaba), inset 0 0 0 8px #e9d3a0;
  --wk-sheet-shadow: 0 30px 90px #3f230f55;
  --wk-tile-ring: #e6cf9c;
  --wk-shadow: 0 6px 18px #5a34181a, 0 1px 0 #fff inset;
  --wk-shadow-up: 0 10px 22px #5a341826;
  --wk-ink-2: #6b5238;
  --wk-icon-ring: 0 3px 8px #5a341826;
  --wk-btn: linear-gradient(180deg, #6e4220, var(--wk-forest));
  --wk-btn-hover: linear-gradient(180deg, #7c4c26, #64391b);
  --wk-btn-edge: 0 8px 18px #5a341833, inset 0 -3px 0 var(--wk-forest-2), inset 0 1px 0 #ffffff1f;
  --wk-chosen: linear-gradient(135deg, #2a4f8f, var(--wk-indigo));
  --wk-chosen-sub: #d3ddf0;
  --wk-next-ring: 0 0 0 2px var(--wk-gold), 0 10px 26px #a8761f38;
  --wk-done-bg: linear-gradient(135deg, #e9eef7, #fff);
  --wk-stamp: var(--wk-indigo);
  --wk-track: #efdfbf;
  --wk-handle: #cdb489;
}
/* Batik at night: neon in indigo blue and prada gold */
body.neti[data-wk-theme="batik"] {
  --wk-band: linear-gradient(90deg, #5b8cff, #ffd166, #ff4f81, #5b8cff);
  --wk-band-glow: 0 0 14px #5b8cff88;
  --wk-icon-fg: #ffd166;
  --wk-icon-bg: #ffd16614;
  --wk-icon-ring: 0 0 0 1.5px #ffd166aa, 0 0 12px #ffd16644;
  --wk-ribbon-bg: #ffd166;
  --wk-ribbon-ink: #1d1405;
  --wk-next-ring: 0 0 0 2px #5b8cff, 0 0 22px #5b8cff55;
  --wk-chapter-line: linear-gradient(90deg, #5b8cffaa, transparent) left center / 100% 2px no-repeat;
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #1c2547 0, #131a36 60%, #0e1329 100%);
}
body:not(.neti)[data-wk-theme="batik"] .gps-note { background: #f8ecd6; }
.wk-tcard[data-wk-theme="batik"] .wk-tband { background: var(--wk-pangi); }

/* ---------- Lantaarn: lacquer red, gold and jade; the huiwen fret band, xiangyun clouds between chapters ---------- */
[data-wk-theme="lantaarn"] {
  --wk-forest: #7d1414;    /* lacquer red */
  --wk-forest-2: #5a0d0d;
  --wk-gold: #e0b04a;
  --wk-gold-deep: #b0821d;
  --wk-kasaba: #fdf6ea;    /* rice paper */
  --wk-sand: #f6e8cf;
  --wk-sun: #f2d9a6;
  --wk-tembe: #241812;
  --wk-jade: #2f7d6a;      /* jade */
  --wk-pangi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%237d1414'/%3E%3Crect width='14' height='1.2' fill='%23e0b04a'/%3E%3Cpath d='M-2 9.4h7.4V3h6.4v4.6H8.6V5.2' fill='none' stroke='%23e0b04a' stroke-width='1.3'/%3E%3Crect y='10.8' width='14' height='1' fill='%23e0b04a'/%3E%3Crect y='12' width='14' height='2' fill='%23b40a2d'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cg fill='none' stroke='%23b0821d' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M15 8.4c-1.6 0-2.4-1.6-1.4-2.6s2.6-.2 2.4 1.2M15 8.4h18M33 8.4c1.6 0 2.4-1.6 1.4-2.6s-2.6-.2-2.4 1.2M19 8.4c0-2.4 2-3.4 3.6-2.6.8-1.8 3.8-1.8 4.6 0 1.6-.8 3.6.2 3.6 2.6'/%3E%3C/g%3E%3Ccircle cx='4' cy='8' r='1' fill='%23b0821d'/%3E%3Ccircle cx='44' cy='8' r='1' fill='%23b0821d'/%3E%3Ccircle cx='24.8' cy='10.4' r='1.1' fill='%23b40a2d'/%3E%3C/svg%3E");
}
body:not(.neti)[data-wk-theme="lantaarn"] {
  --wk-frame: inset 0 0 0 1px #e8c98c, inset 0 0 0 7px var(--wk-kasaba), inset 0 0 0 8px #eed39a;
  --wk-sheet-shadow: 0 30px 90px #5a0d0d55;
  --wk-tile-ring: #ecd096;
  --wk-shadow: 0 6px 18px #7d14141a, 0 1px 0 #fff inset;
  --wk-shadow-up: 0 10px 22px #7d141426;
  --wk-ink-2: #6e4a3a;
  --wk-icon-ring: 0 3px 8px #7d141426;
  --wk-btn: linear-gradient(180deg, #951c1c, var(--wk-forest));
  --wk-btn-hover: linear-gradient(180deg, #a52222, #861717);
  --wk-btn-edge: 0 8px 18px #7d141433, inset 0 -3px 0 var(--wk-forest-2), inset 0 1px 0 #ffffff1f;
  --wk-chosen: linear-gradient(135deg, #3a917c, var(--wk-jade));
  --wk-chosen-sub: #d4ece5;
  --wk-next-ring: 0 0 0 2px var(--wk-gold), 0 10px 26px #b0821d38;
  --wk-done-bg: linear-gradient(135deg, #e8f4f0, #fff);
  --wk-stamp: var(--wk-jade);
  --wk-track: #f3dfbf;
  --wk-handle: #d6b285;
}
/* Lantaarn at night: red and gold neon, jade for the next stop; the lanterns glow */
body.neti[data-wk-theme="lantaarn"] {
  --wk-band: linear-gradient(90deg, #ff4d4d, #ffd166, #2ee6c5, #ff4d4d);
  --wk-band-glow: 0 0 14px #ff4d4d88;
  --wk-icon-fg: #ff7070;
  --wk-icon-bg: #ff707014;
  --wk-icon-ring: 0 0 0 1.5px #ff7070aa, 0 0 12px #ff707044;
  --wk-ribbon-bg: #ff4d4d;
  --wk-ribbon-ink: #fff;
  --wk-next-ring: 0 0 0 2px #2ee6c5, 0 0 22px #2ee6c555;
  --wk-chapter-line: linear-gradient(90deg, #ff4d4daa, transparent) left center / 100% 2px no-repeat;
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #2a1420 0, #1c0f18 60%, #140a12 100%);
}
body:not(.neti)[data-wk-theme="lantaarn"] .gps-note { background: #fbecd8; }

/* ---------- Mand: genipa blue-black, urucu orange, fibre cream and palm green; a woven band, a stepped line ---------- */
[data-wk-theme="mand"] {
  --wk-forest: #23313a;    /* genipa, the blue-black body paint */
  --wk-forest-2: #172128;
  --wk-gold: #e08a3c;      /* urucu (roucou), the orange-red body paint */
  --wk-gold-deep: #b5632a;
  --wk-kasaba: #faf3e3;    /* the cream of the plant fibre */
  --wk-sand: #f1e4c6;
  --wk-sun: #ecd3a6;
  --wk-tembe: #1e1a17;
  --wk-palm: #3f6b3a;      /* palm green */
  --wk-pangi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Crect width='16' height='14' fill='%2323313a'/%3E%3Crect width='16' height='1.3' fill='%23e9d6b0'/%3E%3Cg fill='none' stroke='%23e9d6b0' stroke-width='1.1'%3E%3Cpath d='M4 2.6l3 3.8-3 3.8-3-3.8Z'/%3E%3Cpath d='M12 2.6l3 3.8-3 3.8-3-3.8Z'/%3E%3C/g%3E%3Ccircle cx='4' cy='6.4' r='.9' fill='%23e08a3c'/%3E%3Ccircle cx='12' cy='6.4' r='.9' fill='%23e08a3c'/%3E%3Crect y='12' width='16' height='2' fill='%23b40a2d'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M9 8.5h3v-5h3v5h3v-5h3v5h3v-5h3v5h3v-5h3v5h3' fill='none' stroke='%23b5632a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='6' r='1' fill='%23b5632a'/%3E%3Ccircle cx='44' cy='6' r='1' fill='%23b5632a'/%3E%3Ccircle cx='25.5' cy='10.6' r='1.1' fill='%23b40a2d'/%3E%3C/svg%3E");
}
body:not(.neti)[data-wk-theme="mand"] {
  --wk-frame: inset 0 0 0 1px #e2cc9a, inset 0 0 0 7px var(--wk-kasaba), inset 0 0 0 8px #e9d5a8;
  --wk-sheet-shadow: 0 30px 90px #17212855;
  --wk-tile-ring: #e6d0a2;
  --wk-shadow: 0 6px 18px #23313a1a, 0 1px 0 #fff inset;
  --wk-shadow-up: 0 10px 22px #23313a26;
  --wk-ink-2: #5d5446;
  --wk-icon-ring: 0 3px 8px #23313a26;
  --wk-btn: linear-gradient(180deg, #31424d, var(--wk-forest));
  --wk-btn-hover: linear-gradient(180deg, #3a4e5a, #2a3a44);
  --wk-btn-edge: 0 8px 18px #23313a33, inset 0 -3px 0 var(--wk-forest-2), inset 0 1px 0 #ffffff1f;
  --wk-chosen: linear-gradient(135deg, #4f8048, var(--wk-palm));
  --wk-chosen-sub: #dcebd6;
  --wk-next-ring: 0 0 0 2px var(--wk-gold), 0 10px 26px #b5632a38;
  --wk-done-bg: linear-gradient(135deg, #eaf3e7, #fff);
  --wk-stamp: var(--wk-palm);
  --wk-track: #efe0bf;
  --wk-handle: #cdb689;
}
/* Mand at night: urucu-orange neon with the fireflies */
body.neti[data-wk-theme="mand"] {
  --wk-band: linear-gradient(90deg, #ff8a3c, #2ee6c5, #ffd166, #ff8a3c);
  --wk-band-glow: 0 0 14px #ff8a3c88;
  --wk-icon-fg: #ff9a4d;
  --wk-icon-bg: #ff9a4d14;
  --wk-icon-ring: 0 0 0 1.5px #ff9a4daa, 0 0 12px #ff9a4d44;
  --wk-ribbon-bg: #ff8a3c;
  --wk-ribbon-ink: #1e1a17;
  --wk-next-ring: 0 0 0 2px #2ee6c5, 0 0 22px #2ee6c555;
  --wk-chapter-line: linear-gradient(90deg, #ff8a3caa, transparent) left center / 100% 2px no-repeat;
  --wk-paper: radial-gradient(120% 60% at 50% 0%, #182a30 0, #101d22 60%, #0b1519 100%);
}
body:not(.neti)[data-wk-theme="mand"] .gps-note { background: #f5ead2; }
/* the choice sheet with the styles: never taller than the screen, the list scrolls and "Done" stays in view.
   The safer build for iPhones (owner 18-10-2026: on iOS 26 Safari the sheet collapsed into a thin bar, also centred):
   a plain block, no flex column and no vh/svh/dvh heights, which iOS Safari draws differently from other browsers;
   waka-style.js measures the visible height in pixels (--wk-sheet-h, innerHeight) when the sheet opens and on resize,
   and only the list scrolls. */
dialog#wk-theme[open] { display: block; max-height: none; }
dialog#wk-theme .wk-tb { display: block; max-height: calc(var(--wk-sheet-h, 560px) - var(--wk-band-h, 10px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding-bottom: 0; }
dialog#wk-theme .wk-tcard { margin-bottom: 10px; padding-bottom: 10px; }
dialog#wk-theme .wk-tcard .wk-tband { height: 11px; }
dialog#wk-theme #wk-theme-done { position: sticky; bottom: 0; margin: 4px 0 0; box-shadow: 0 -12px 16px var(--wk-kasaba), var(--wk-btn-edge); }
dialog#wk-theme .wk-tb::after { content: ''; display: block; height: 18px; }

/* ---------- Waka: the neutral style and the default; the quest look in the brand colours, no cultural motifs ---------- */
/* A calm gold line with a thin faya lobi line instead of a cultural band, a plain dotted line between chapters, the
   plain line icons (set in waka-style.js) and a hero with only the river, the palm, the sun or moon and the grietjebie. */
[data-wk-theme="waka"] {
  --wk-pangi: linear-gradient(180deg, #f1b748 0 68%, #b40a2d 68% 100%);
  --wk-tembe-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cg fill='%23c98a12'%3E%3Ccircle cx='6' cy='6' r='1.1'/%3E%3Ccircle cx='18' cy='6' r='1.1'/%3E%3Ccircle cx='30' cy='6' r='1.1'/%3E%3Ccircle cx='42' cy='6' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}
.wk-tcard[data-wk-theme="waka"] .wk-tband { background: linear-gradient(180deg, #f1b748 0 68%, #b40a2d 68% 100%); }
/* the invitation next to the style button (once, until the choice has been opened) */
.wk-theme-btn.wk-invite { animation: wk-invite 1.6s ease-in-out 4; }
@keyframes wk-invite { 50% { box-shadow: 0 0 0 6px #f1b74866; } }
.wk-theme-hint {
  position: fixed; z-index: 1200; max-width: 220px; padding: 9px 13px; border: 0; border-radius: 14px 4px 14px 14px; cursor: pointer;
  background: var(--wk-forest); color: #fff; font: 700 .82rem Manrope, sans-serif; text-align: left; box-shadow: 0 8px 20px #0003;
  animation: wk-pop .3s ease-out;
}
body.neti .wk-theme-hint { background: #2a2160; box-shadow: 0 0 0 1px #f5c45b66, 0 8px 20px #0006; }
@keyframes wk-pop { from { transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wk-theme-btn.wk-invite, .wk-theme-hint { animation: none; } }

/* behind every window: a dark veil without blur (owner 18-10-2026: on iPhones the blur flashed or stayed a moment
   after a window closed, when switching the language, the style or day and night) */
dialog::backdrop, dialog#modal::backdrop, dialog#wk-theme::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: #062a22a8; }


/* QA-18 (09-11-2026): the decorative animations rest 15 s after the last touch and while the app is in the background
   (waka-style.js sets html.wk-rest), and the banner behind an open window rests too (html.wk-modal): the phone no longer
   works all the time the map is open. Only decoration: loading signs and messages keep moving.
   QA-06 (10-11-2026): written so that a change of these classes only touches the decoration itself. The earlier
   html:has(#modal[open]) ... * and html.wk-rest .wk-hero * made the browser work out the style of all ±2,750 elements
   again: on every change inside an open window (each icon drawn) and on every rest and wake. Now the class on html
   reaches only .wk-hero, .sf-mini and .primary, and the banner's parts follow through an inherited variable. */
html.wk-rest .wk-hero, html.wk-modal .journey .wk-hero { --wk-play: paused; }
.wk-hero * { animation-play-state: var(--wk-play, running) !important; }
html.wk-rest .sf-mini, html.wk-modal .sf-mini, html.wk-rest .primary::after { animation-play-state: paused !important; }