/* Copyright (c) 2026 Legacy Technology N.V. All rights reserved. See LICENSE. */
/* Collectable cards (dist/cards.js). Sizes inside a card use container units (cqw), so a card scales with its width. */
.wcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; border-radius: 7% / 5.6%; overflow: visible; color: #fff; font-family: inherit; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; text-align: left; isolation: isolate; }
.wcard.t-bronze { background: linear-gradient(165deg, #3a2a1c, #1a120c); border: 2px solid #b07a47; }
.wcard.t-silver { background: linear-gradient(165deg, #2c3f44, #0e1a1d); border: 2px solid #c3d0ce; }
.wcard.t-gold, .wcard.t-foil { background: radial-gradient(120% 90% at 50% 20%, #1d6b62, #0a2a2c 70%); border: 2px solid #f1b748; box-shadow: 0 0 18px #f1b74840; }
.wcard.locked { background: #e9f1ed; border: 2px dashed #b9cfc6; color: #58736f; box-shadow: none; }
.wc-bg { position: absolute; inset: 0; border-radius: 6.6% / 5.3%; background-size: cover; background-position: center; z-index: -1; }
.wc-bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #07171a99 0%, #07171a00 30%, #07171a00 48%, #07171aee 100%); }
.wc-top { display: flex; justify-content: space-between; padding: 5.5cqw 5.5cqw 0; font-size: 4.2cqw; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.wc-art { position: absolute; z-index: 1; pointer-events: none; }
.wc-art .token { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; filter: drop-shadow(0 4cqw 3cqw #0009); }
/* 24-10-2026 (owner: every card well centred and organised): the figure has its own field between the top row and the
   name. With the card scale (1.15, from the foot) the tallest figure stays under the top row and every foot lands just
   above a two-line name; checked for every card with tools/preview-cards.js */
.r-iconic .wc-art { left: 50%; top: 17.7cqw; width: 77cqw; height: 77cqw; transform: translateX(-50%); }
.r-common .wc-art { right: 5cqw; top: 14cqw; width: 28cqw; height: 28cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1d6b62, #07171a 75%); border: .8cqw solid #f1b748; box-shadow: 0 0 0 1.2cqw #07171acc, 0 2cqw 3cqw #0008; overflow: hidden; }
.r-common .wc-art .token { inset: 6cqw 3cqw 0 3cqw; width: auto; height: auto; filter: none; }
/* no editor photo on this phone yet (it is fetched in the background): the figure carries the card */
.wcard.nophoto .wc-art { left: 50%; top: 26cqw; right: auto; width: 64cqw; height: 64cqw; transform: translateX(-50%); background: none; border: 0; box-shadow: none; overflow: visible; }
.wcard.nophoto .wc-art .token { inset: 0; filter: drop-shadow(0 4cqw 3cqw #0009); }
.locked .wc-art { filter: grayscale(1) brightness(0) opacity(.18); }
.locked.r-common .wc-art { position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); width: 40cqw; height: 40cqw; background: none; border: 0; box-shadow: none; overflow: visible; }
.locked.r-common .wc-art .token { inset: 0; }
.r-iconic.locked .wc-art { top: 22cqw; width: 70cqw; height: 70cqw; }
.wc-info { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 2; display: grid; gap: .6cqw; padding: 3cqw 4cqw; border-radius: 4cqw; background: #07171acc; }
.wc-info strong { font-size: 7cqw; line-height: 1.05; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
/* a long name gets a smaller letter (cards.js cardHTML), so it never takes more than three lines or reaches the figure */
.wc-info strong.l { font-size: 6cqw; } .wc-info strong.xl { font-size: 5.2cqw; } .wc-info strong.xxl { font-size: 4.5cqw; letter-spacing: .02em; }
.wc-info span { font-size: 4.2cqw; color: #ffffffb8; }
.wc-credit { font-style: normal; font-size: 3.1cqw; letter-spacing: .02em; color: #ffffff90; }
.locked .wc-info { background: none; }
.locked .wc-info strong, .locked .wc-info span { color: #58736f; }
.wc-tier { position: absolute; top: -2.5cqw; right: -2.5cqw; z-index: 4; padding: 1.2cqw 4cqw; border-radius: 99px; font-size: 3.6cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.t-bronze .wc-tier { background: #b07a47; color: #1a120c; } .t-silver .wc-tier { background: #c3d0ce; color: #0e1a1d; }
.t-gold .wc-tier, .t-foil .wc-tier { background: #f1b748; color: #1a1205; }
.wc-flag { position: absolute; top: -2.5cqw; left: -2.5cqw; z-index: 4; padding: 1.2cqw 4cqw; border-radius: 99px; background: #35e0c8; color: #04201c; font-size: 3.6cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wc-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; display: none; }
.t-foil .wc-shine { display: block; background: radial-gradient(circle at var(--mx) var(--my), #ffffff66, transparent 42%), linear-gradient(115deg, #ff6bd633 10%, #ffe36b33 30%, #6bffd933 50%, #6bb8ff33 70%, #ff6bd633 90%); mix-blend-mode: color-dodge; }
.t-gold .wc-shine, .t-silver .wc-shine, .t-bronze .wc-shine { display: block; background: radial-gradient(circle at var(--mx) var(--my), #ffffff2a, transparent 45%); mix-blend-mode: soft-light; }
.locked .wc-shine { display: none; }

/* Collection */
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; margin: 14px 0; }
/* 07-11-2026 (owner, screen recording of the Android app): in the grid every gold and silver card ran three endless
   animations (the moving frame repaints the whole card each frame), so Android's WebView skipped tiles and cards flashed
   light. In the grids every card of every kind (bronze, silver, gold, editions, pioneer, gift, neon) stands still; the
   moving light stays on the big card (.wc-big) and the live Gold Ticket. (No contain: paint: it cut off the GOLD label.) */
.wc-grid *, .wc-grid *::before, .wc-grid *::after, .neon-grid *, .neon-grid *::before, .neon-grid *::after { animation: none !important; }
.wc-cell { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 100%; font: inherit; }
div.wc-cell { cursor: default; }
.wc-cell:focus-visible { outline: 3px solid #f1b748; outline-offset: 4px; border-radius: 12px; }
.wc-big { max-width: 300px; margin: 8px auto 14px; }
/* the two buttons side by side, so the whole card fits on a phone (owner 18-10-2026) */
.wc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.wc-acts > button { margin: 0; width: 100%; min-height: 48px; padding-left: 10px; padding-right: 10px; font-size: .9rem; line-height: 1.2; }
.wc-meta { text-align: center; margin: 0 0 12px; }
.wc-wait { margin: 6px 0; }

/* Pack: brown (free walk) or gold (walk with a pass); torn open, the cards fan out */
.pack-stage { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0; }
.pack-zone { position: relative; width: 100%; height: 250px; transition: height .4s ease; }
.pack-btn { position: absolute; left: calc(50% - 75px); top: 14px; width: 150px; height: 214px; border: 0; padding: 0; background: none; cursor: pointer; z-index: 5; animation: pack-bob 2.4s ease-in-out infinite; transition: transform .6s ease, opacity .45s ease .25s; }
.pack-body { position: absolute; inset: 22px 0 0 0; border-radius: 8px 8px 12px 12px; display: grid; place-items: center; font-weight: 900; font-size: 1.7rem; line-height: .95; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #1a1205; }
.pack-flap { position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 8px 8px 0 0; transform-origin: top center; transition: transform .45s ease; }
.pack-btn.paid .pack-body { background: linear-gradient(160deg, #ffe08a, #d89c2a 55%, #fff1b8); box-shadow: 0 0 28px #f1b74866; }
.pack-btn.paid .pack-flap { background: #e0a935 repeating-linear-gradient(90deg, #00000026 0 3px, transparent 3px 7px); }
.pack-btn.free .pack-body { background: linear-gradient(160deg, #d9ac7c, #96683c); box-shadow: 0 0 16px #96683c55; }
.pack-btn.free .pack-flap { background: #b98852 repeating-linear-gradient(90deg, #00000026 0 3px, transparent 3px 7px); }
@keyframes pack-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } }
.pack-zone.open .pack-btn { animation: none; opacity: 0; pointer-events: none; transform: translateY(46px) scale(.9); }
.pack-zone.open .pack-flap { transform: rotateX(-110deg); }
.fan { position: absolute; left: 50%; top: 20px; width: 0; height: 0; }
.wc-fan { position: absolute; left: calc(var(--cw) / -2); top: 0; width: var(--cw); opacity: 0; transform: translateY(70px) scale(.6); transition: transform .8s cubic-bezier(.2, .9, .2, 1.1), opacity .4s ease; transition-delay: calc(var(--i) * 110ms + 250ms); cursor: pointer; }
.pack-zone.open .wc-fan { opacity: 1; transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)); }
.pack-zone.open .wc-fan.focus { z-index: 20; transform: translate(0, 8px) scale(1.5) rotate(0deg); transition-delay: 0s; }

/* Offer on the start and finish screens, and the teaser in the "well found" window */
.pack-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; margin: 0 0 14px; border-radius: 16px; background: linear-gradient(135deg, #fff7df, #fbe9bd); border: 1px solid #e3b24a; }
.pack-offer b { color: #123f39; }
.pack-offer p { margin: 2px 0 0; }
.pack-offer button { grid-column: 1 / -1; }
.pack-offer-art { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #f1b748; color: #123f39; }
.card-teaser { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; background: #fff7df; border: 1px solid #e3b24a; color: #8a5d12; font-size: .88rem; }
.card-teaser svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pack-btn { animation: none; } .wc-fan, .pack-btn, .pack-flap, .pack-zone { transition-duration: .01s; transition-delay: 0s; } .wcard { transition: none; } }
/* The note on a free card: silver surprise, or what a pass brings. */
.wc-upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: #fff5d9; border: 1px solid #f1d48a; }
.wc-upsell > svg.lucide { color: #ad781e; width: 20px; height: 20px; flex-shrink: 0; } .wc-upsell p { flex: 1; min-width: 180px; margin: 0; } .wc-upsell .secondary { margin-top: 0; }

/* ===== Card finish (04-10-2026): metal frames; bronze clean and neat, gold next level ===== */
.wcard.t-bronze, .wcard.t-silver, .wcard.t-gold { border: 5px solid transparent; box-shadow: 0 6px 14px #0006; }
.wc-big .wcard.t-bronze, .wc-big .wcard.t-silver, .wc-big .wcard.t-gold { border-width: 9px; }
.wcard.t-bronze { background: linear-gradient(165deg, #3a2a1c, #160f09) padding-box, linear-gradient(135deg, #5e3518, #d99c5f 22%, #8a5428 45%, #f0bd86 62%, #7a4520 82%, #c98a52) border-box; }
.wcard.t-silver { background: radial-gradient(90% 70% at 50% 38%, #3d5a60, #0e1a1d 75%) padding-box, linear-gradient(135deg, #7d8c8f, #f4f8f8 22%, #9aa8aa 45%, #ffffff 62%, #8a9799 82%, #dfe7e7) border-box; }
.wcard.t-gold { background: radial-gradient(85% 65% at 50% 36%, #2a8a7a, #0b3b37 55%, #061a1a 100%) padding-box, linear-gradient(120deg, #8a5a12, #ffe08a 18%, #c98f1e 34%, #fff3c4 50%, #b8801a 66%, #ffd76a 82%, #7a4e0e) border-box; background-size: 100% 100%, 300% 300%; animation: wc-goldframe 6s linear infinite; box-shadow: 0 0 0 1px #fff3c488, 0 0 18px #f1b74870, 0 8px 18px #0008; }
@keyframes wc-goldframe { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }
/* fine inner line inside every metal frame */
.wcard.t-bronze::after, .wcard.t-silver::after, .wcard.t-gold::after { content: ""; position: absolute; inset: 1.4cqw; border-radius: 5.4% / 4.3%; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 .35cqw #e8b07a66; }
.wcard.t-silver::after { box-shadow: inset 0 0 0 .35cqw #ffffff55; }
.wcard.t-gold::after { box-shadow: inset 0 0 0 .45cqw #ffe08aaa, inset 0 0 0 1.2cqw #00000033;
  background:
    radial-gradient(circle at 3.2cqw 3.2cqw, #ffe08a 0 .9cqw, transparent 1cqw), radial-gradient(circle at calc(100% - 3.2cqw) 3.2cqw, #ffe08a 0 .9cqw, transparent 1cqw),
    radial-gradient(circle at 3.2cqw calc(100% - 3.2cqw), #ffe08a 0 .9cqw, transparent 1cqw), radial-gradient(circle at calc(100% - 3.2cqw) calc(100% - 3.2cqw), #ffe08a 0 .9cqw, transparent 1cqw); }
/* gold: slowly turning light rays and sparkles behind the figure */
.wcard.t-gold::before { content: ""; position: absolute; inset: 0; border-radius: 5.6% / 4.5%; pointer-events: none; z-index: 0; overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, #fff7d6 0 .5cqw, transparent .7cqw), radial-gradient(circle at 82% 16%, #fff7d6 0 .4cqw, transparent .6cqw),
    radial-gradient(circle at 12% 58%, #ffe08acc 0 .35cqw, transparent .55cqw), radial-gradient(circle at 88% 52%, #ffe08acc 0 .45cqw, transparent .65cqw),
    radial-gradient(circle at 70% 70%, #fff7d6aa 0 .3cqw, transparent .5cqw), radial-gradient(circle at 30% 8%, #ffe08a99 0 .3cqw, transparent .5cqw),
    repeating-conic-gradient(from 0deg at 50% 38%, #ffe08a26 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(70% 55% at 50% 38%, #000 30%, transparent 75%); mask: radial-gradient(70% 55% at 50% 38%, #000 30%, transparent 75%);
  transform-origin: 50% 38%; animation: wc-rays 40s linear infinite; }
@keyframes wc-rays { to { transform: rotate(360deg); } }
.t-gold .wc-art .token { filter: drop-shadow(0 0 3cqw #ffe08a66) drop-shadow(0 4cqw 3cqw #000a); }
.t-silver .wc-art .token { filter: drop-shadow(0 0 2.5cqw #ffffff40) drop-shadow(0 4cqw 3cqw #000a); }
/* gold: a holographic light sweep that follows the finger, plus a slow automatic sweep */
.t-gold .wc-shine { display: block; overflow: hidden; background: radial-gradient(circle at var(--mx) var(--my), #fff8dd55, transparent 40%), linear-gradient(115deg, transparent 30%, #fff3c455 45%, #ffe08a33 50%, transparent 62%); background-size: 100% 100%, 260% 100%; mix-blend-mode: overlay; animation: wc-sweep 4.5s ease-in-out infinite; }
@keyframes wc-sweep { 0% { background-position: 0 0, 120% 0; } 60%, 100% { background-position: 0 0, -120% 0; } }
.t-gold .wc-info { background: linear-gradient(180deg, #061a1acc, #061a1af2); box-shadow: inset 0 0 0 .3cqw #ffe08a66; }
.t-gold .wc-info strong { background: linear-gradient(180deg, #fff6cf, #ffd76a 45%, #c98f1e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .3cqw 0 #0008); }
.t-gold .wc-top { color: #ffe08a; opacity: 1; }
.t-gold .wc-tier { background: linear-gradient(135deg, #8a5a12, #ffe08a 35%, #fff3c4 50%, #c98f1e 80%); color: #2a1a02; box-shadow: 0 0 3cqw #f1b748aa, inset 0 0 0 .3cqw #fff3c4; }
.t-gold .wc-tier::before { content: "\2605\00a0"; }
.t-silver .wc-tier { background: linear-gradient(135deg, #8a9799, #ffffff 45%, #b8c4c6); box-shadow: inset 0 0 0 .3cqw #fff; }
.t-bronze .wc-tier { background: linear-gradient(135deg, #7a4520, #f0bd86 45%, #a86a36); box-shadow: inset 0 0 0 .3cqw #f6cfa4; }
/* bronze: a neat bronze ring around the figure stamp */
.t-bronze.r-common .wc-art { border-color: #e0a56a; box-shadow: 0 0 0 .6cqw #3a2a1c, 0 0 0 1.2cqw #b07a47aa, 0 2cqw 3cqw #0009; background: radial-gradient(circle at 35% 30%, #3d5a60, #0e1a1d 75%); }
@media (prefers-reduced-motion: reduce) { .wcard.t-gold, .wcard.t-gold::before, .t-gold .wc-shine { animation: none; } }
/* ===== Silver surprise card (04-10-2026): festive, but a step below gold ===== */
/* confetti in green, white, red and yellow, icy sparkles and fine silver rays, drifting slowly behind the figure */
.wcard.t-silver::before { content: ""; position: absolute; inset: 0; border-radius: 5.6% / 4.5%; pointer-events: none; z-index: 0; overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, #2f9e5b 0 1cqw, transparent 1.2cqw), radial-gradient(circle at 86% 26%, #d4343c 0 .9cqw, transparent 1.1cqw),
    radial-gradient(circle at 9% 44%, #f6c744 0 .8cqw, transparent 1cqw), radial-gradient(circle at 92% 50%, #ffffff 0 .8cqw, transparent 1cqw),
    radial-gradient(circle at 22% 66%, #d4343c 0 .7cqw, transparent .9cqw), radial-gradient(circle at 80% 70%, #2f9e5b 0 .8cqw, transparent 1cqw),
    radial-gradient(circle at 30% 12%, #f6c744 0 .7cqw, transparent .9cqw), radial-gradient(circle at 68% 10%, #ffffff 0 .6cqw, transparent .8cqw),
    radial-gradient(circle at 20% 34%, #eef8ff 0 .45cqw, transparent .65cqw), radial-gradient(circle at 78% 38%, #eef8ff 0 .5cqw, transparent .7cqw),
    repeating-conic-gradient(from 0deg at 50% 38%, #ffffff1f 0 4deg, transparent 4deg 22.5deg);
  -webkit-mask: radial-gradient(75% 60% at 50% 40%, #000 35%, transparent 80%); mask: radial-gradient(75% 60% at 50% 40%, #000 35%, transparent 80%);
  transform-origin: 50% 38%; animation: wc-rays 60s linear infinite; }
.t-silver .wc-art .token { filter: drop-shadow(0 0 3cqw #cfeaff66) drop-shadow(0 4cqw 3cqw #000a); }
/* a holographic rainbow sweep over the card */
.t-silver .wc-shine { display: block; overflow: hidden; background: radial-gradient(circle at var(--mx) var(--my), #ffffff40, transparent 40%), linear-gradient(115deg, transparent 28%, #7fd3ff40 38%, #c7a8ff40 46%, #ffd1e840 54%, #a8ffd640 62%, transparent 72%); background-size: 100% 100%, 260% 100%; mix-blend-mode: overlay; animation: wc-sweep 5.5s ease-in-out infinite; }
.t-silver .wc-info { box-shadow: inset 0 0 0 .3cqw #e6f2f566; }
.t-silver .wc-info strong { background: linear-gradient(180deg, #ffffff, #e3ecef 55%, #a9bcc2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .3cqw 0 #0008); }
.t-silver .wc-tier { box-shadow: 0 0 3cqw #cfeaffaa, inset 0 0 0 .3cqw #fff; }
.t-silver .wc-tier::before { content: "\2726\00a0"; }
/* the surprise label, top centre */
.wc-surprise { position: absolute; left: 50%; top: -2.8cqw; transform: translateX(-50%); z-index: 4; white-space: nowrap; padding: 1cqw 3.6cqw; border-radius: 99px; font-size: 3.4cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0e1a1d; background: linear-gradient(135deg, #8a9799, #ffffff 45%, #b8c4c6); box-shadow: 0 0 3cqw #cfeaffaa, inset 0 0 0 .3cqw #fff; }
.wc-surprise::before, .wc-surprise::after { content: "\2726"; } .wc-surprise::before { margin-right: 1.4cqw; } .wc-surprise::after { margin-left: 1.4cqw; }
@media (prefers-reduced-motion: reduce) { .wcard.t-silver::before, .t-silver .wc-shine { animation: none; } }
/* ===== Gold 3D relic (04-10-2026): the card tilts in 3D, the figure floats above it, the badge even higher ===== */
.wcard.t-gold { isolation: auto; transform-style: preserve-3d; }
.wcard.t-gold.r-iconic .wc-art, .wcard.t-gold.nophoto .wc-art { transform: translateX(-50%) translateZ(16cqw); }
.t-gold .wc-info { transform: translateZ(6cqw); }
.t-gold .wc-top { transform: translateZ(3cqw); }
.t-gold .wc-tier { transform: translateZ(20cqw); }
.t-gold .wc-shine { transform: translateZ(6cqw); }
.wc-big .wcard.t-gold.tilt { touch-action: none; transition: transform .25s ease-out; }
/* shadows that move against the tilt: the card lifts off the page, the figure floats above the card */
.wc-big .wcard.t-gold.tilt { box-shadow: 0 0 0 1px #fff3c488, 0 0 18px #f1b74870, calc(sin(var(--ry)) * -40px) calc(sin(var(--rx)) * 40px + 18px) 28px #000a; }
.wc-big .t-gold .wc-art .token { filter: drop-shadow(0 0 3cqw #ffe08a66) drop-shadow(calc(sin(var(--ry)) * -7cqw) calc(sin(var(--rx)) * 7cqw + 4cqw) 2.5cqw #000b); }
/* ===== Special editions, version 2 (14-10-2026, owner: "structured, neat, fitting, non disturbing, yet complementary").
   One system for every theme, in three fixed places that never cover the monument, its photo or its name: the Waka
   ribbon on the top edge (the same pill for every edition, with the theme's emblem and a ring in its colour), small
   motifs along the left and the right edge (assets/editions/<theme>.svg, tools/build-edition-decor.py), and a slim band
   on the name panel. Kerst: the hat sits on the tier badge. Plechtig stays calm (no motifs, no emblem).
   The saved image (cards.js cardBlob) draws the same. */
.wc-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 6.6% / 5.3%; background: center / 100% 100% no-repeat; }
.ed-srefidensi .wc-decor { background-image: url(assets/editions/srefidensi.svg); }
.ed-feestelijk .wc-decor { background-image: url(assets/editions/feestelijk.svg); }
.ed-halloween .wc-decor { background-image: url(assets/editions/halloween.svg); }
.ed-kerst .wc-decor { background-image: url(assets/editions/kerst.svg); }
.ed-pasen .wc-decor { background-image: url(assets/editions/pasen.svg); }
.ed-phagwa .wc-decor { background-image: url(assets/editions/phagwa.svg); }
.ed-ketikoti .wc-decor { background-image: url(assets/editions/ketikoti.svg); }
.ed-oudjaar .wc-decor { background-image: url(assets/editions/oudjaar.svg); }
.ed { --ed: #f1b748; }
.ed-srefidensi { --ed: #ecc81d; }
.ed-feestelijk { --ed: #f1b748; }
.ed-plechtig { --ed: #efe9dc; }
.ed-halloween { --ed: #ff8a1f; }
.ed-kerst { --ed: #e5484d; }
.ed-pasen { --ed: #f9a8d4; }
.ed-phagwa { --ed: #ffd400; }
.ed-ketikoti { --ed: #f6c744; }
.ed-oudjaar { --ed: #ffd76a; }
.wc-ed { position: absolute; left: 50%; top: -2.9cqw; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 1.4cqw; max-width: 46%; padding: .9cqw 3.4cqw .9cqw 2.6cqw;
  border-radius: 99px; border: .55cqw solid var(--ed); background: #0b2422; color: #fff; font-size: 3.3cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1cqw 2.4cqw #000a; }
.wc-ed b { font: inherit; overflow: hidden; text-overflow: ellipsis; }
/* bug check 15-10-2026: the ribbon stays clear of the tier badge in the upper right corner (at most 46 % wide); a longer
   text (up to the 26 characters of the editions page) gets a smaller letter (cards.js and edities.js set .l / .xl) */
.wc-ed.l { font-size: 2.6cqw; letter-spacing: .05em; } .wc-ed.xl { font-size: 2.15cqw; letter-spacing: .02em; gap: 1cqw; padding-right: 2.6cqw; }
.wc-ed.l .wc-em { width: 3.6cqw; height: 3.6cqw; } .wc-ed.xl .wc-em { width: 3.2cqw; height: 3.2cqw; }
.wc-em { flex: none; width: 4.2cqw; height: 4.2cqw; background: center / contain no-repeat; }
.ed-plechtig .wc-ed { padding-left: 3.4cqw; }
.ed-srefidensi .wc-em { background-image: url(assets/editions/emblem-srefidensi.svg); }
.ed-feestelijk .wc-em { background-image: url(assets/editions/emblem-feestelijk.svg); }
.ed-halloween .wc-em { background-image: url(assets/editions/emblem-halloween.svg); }
.ed-kerst .wc-em { background-image: url(assets/editions/emblem-kerst.svg); }
.ed-pasen .wc-em { background-image: url(assets/editions/emblem-pasen.svg); }
.ed-phagwa .wc-em { background-image: url(assets/editions/emblem-phagwa.svg); }
.ed-ketikoti .wc-em { background-image: url(assets/editions/emblem-ketikoti.svg); }
.ed-oudjaar .wc-em { background-image: url(assets/editions/emblem-oudjaar.svg); }
.ed-phagwa .wc-ed { border-color: transparent; background: linear-gradient(#0b2422, #0b2422) padding-box, linear-gradient(90deg, #ff2e93, #ff7a00, #ffd400, #24c35a, #1e9bff, #a24bff) border-box; }
/* the band on the name panel: slim, in the theme's pattern; a fine ivory line for Plechtig */
.ed .wc-info::before { content: ""; position: absolute; left: 5cqw; right: 30%; top: -.7cqw; height: 1.4cqw; border-radius: .7cqw; background: var(--ed); box-shadow: 0 .3cqw .8cqw #0006; }
.ed-plechtig .wc-info::before { top: -.2cqw; height: .4cqw; background: #efe9dccc; box-shadow: none; }
.ed-srefidensi .wc-info::before { background: radial-gradient(circle at 50% 50%, #ecc81d 0 .45cqw, transparent .55cqw), linear-gradient(#377e3f 0 20%, #fff 20% 30%, #b40a2d 30% 70%, #fff 70% 80%, #377e3f 80%); }
.ed-feestelijk .wc-info::before { background: linear-gradient(90deg, #8a5a12, #ffe08a 35%, #fff3c4 50%, #c98f1e 80%); }
.ed-halloween .wc-info::before { background: linear-gradient(90deg, #ff8a1f, #ff8a1f 55%, #7b2cbf); }
.ed-kerst .wc-info::before { background: repeating-linear-gradient(45deg, #e5484d 0 1cqw, #ffffff 1cqw 2cqw); }
.ed-pasen .wc-info::before { background: linear-gradient(90deg, #f9a8d4, #bfdbfe, #fde68a, #bbf7d0, #c4b5fd); }
.ed-phagwa .wc-info::before { background: linear-gradient(90deg, #ff2e93, #ff7a00, #ffd400, #24c35a, #1e9bff, #a24bff); }
.ed-ketikoti .wc-info::before { background: repeating-linear-gradient(90deg, transparent 0 .6cqw, #f6c744cc .6cqw 1.2cqw, transparent 1.2cqw 2cqw, #1f7a3acc 2cqw 2.4cqw, transparent 2.4cqw 3.2cqw), repeating-linear-gradient(0deg, transparent 0 .35cqw, #f6c74499 .35cqw .7cqw, transparent .7cqw 1.4cqw), #b3122e; }
.ed-oudjaar .wc-info::before { background: linear-gradient(90deg, #8a5a12, #ffe08a 35%, #fff3c4 50%, #ffe08a 65%, #8a5a12); }
/* Kerst: the Christmas hat sits on the tier badge */
.ed-kerst .wc-tier::after { content: ""; position: absolute; left: -3cqw; top: -4.8cqw; width: 9cqw; height: 6.75cqw; background: url(assets/editions/hat-kerst.svg) center / contain no-repeat; transform: rotate(-16deg); pointer-events: none; }
.ed-plechtig .wc-art .token { filter: drop-shadow(0 4cqw 3cqw #000a) saturate(.85); }
.ed-ketikoti .wc-art .token { filter: drop-shadow(0 0 3cqw #f6c74455) drop-shadow(0 4cqw 3cqw #000a); }
.ed.t-silver .wc-surprise { display: none; }
.t-gold.ed .wc-ed { transform: translateX(-50%) translateZ(20cqw); }
.wc-ed-head { margin: 18px 0 4px; font-size: 1rem; }
.wc-ed-name { margin: 6px 0 0; }
/* ===== Support your locals (04-10-2026): Neon Warung signs and the Gold Ticket ===== */
.neon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.neon-cell { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
/* a dark brick wall with a glowing tube sign in the partner's colour */
.neon, .neon-wall { --neon: #ff4f81; }
.neon-cell .neon, .neon-wall { border-radius: 14px; background:
  repeating-linear-gradient(0deg, transparent 0 17px, #00000055 17px 19px),
  repeating-linear-gradient(90deg, transparent 0 38px, #00000044 38px 40px),
  radial-gradient(circle at 50% 45%, #3a2622, #120c0b 75%); }
.neon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; min-height: 120px; text-align: center; }
.neon svg.lucide { width: 34px; height: 34px; color: var(--neon); filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 10px var(--neon)); stroke-width: 2.2; }
.neon span { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1.1; color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 6px var(--neon), 0 0 14px var(--neon), 0 0 28px var(--neon); padding: 6px 10px; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--neon), 0 0 12px var(--neon), inset 0 0 10px color-mix(in srgb, var(--neon) 50%, transparent); animation: neon-hum 5s infinite; }
.neon-wall { padding: 30px 14px; margin: 4px 0 10px; }
.neon-wall .neon { min-height: 200px; }
.neon-wall .neon svg.lucide { width: 56px; height: 56px; }
.neon-wall .neon span { font-size: 1.6rem; padding: 10px 16px; }
@keyframes neon-hum { 0%, 18%, 22%, 60%, 100% { opacity: 1; } 20% { opacity: .55; } 61% { opacity: .8; } }
/* the list of Gold Tickets */
.ticket-list { display: grid; gap: 8px; margin: 8px 0 4px; }
.ticket-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px solid #f1d48a; background: linear-gradient(120deg, #fff6d6, #ffe7a3); color: #4a3405; }
.ticket-row svg.lucide { color: #ad781e; flex-shrink: 0; }
.ticket-row span { flex: 1; display: grid; } .ticket-row small { color: #6b5320; }
.ticket-row em { font-style: normal; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.ticket-row.used, .ticket-row.expired { background: #f2f4f3; border-color: #dfe5e2; color: #66746f; filter: grayscale(.6); }
/* the live Gold Ticket */
.gticket { position: relative; overflow: hidden; margin: 6px 0 12px; padding: 22px 22px 18px; border-radius: 18px; color: #3b2a05; text-align: center;
  background: linear-gradient(115deg, #b8801a, #ffe08a 22%, #fff6cf 38%, #f1b748 55%, #ffd76a 72%, #c98f1e); background-size: 260% 100%; animation: gt-shine 3.2s linear infinite;
  box-shadow: 0 10px 26px #7a4e0e55, inset 0 0 0 3px #fff3c4;
  -webkit-mask: radial-gradient(circle 13px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 13px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
@keyframes gt-shine { to { background-position: -260% 0; } }
.gt-head { font-size: .68rem; font-weight: 800; letter-spacing: .2em; opacity: .8; }
.gt-name { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; margin: 8px 0 4px; }
.gt-text { font-size: 1rem; font-weight: 600; }
.gt-no { margin: 14px auto 6px; display: inline-block; padding: 6px 14px; border: 2px dashed #7a4e0e; border-radius: 10px; font: 800 1.25rem/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.gt-clock { font: 700 .95rem ui-monospace, monospace; }
.gt-valid { font-size: .78rem; margin-top: 6px; opacity: .85; }
.gticket.used, .gticket.expired { animation: none; filter: grayscale(.75); }
/* a Gold Ticket on lock until the walk is finished (09-10-2026) */
.gticket.sealed { animation: none; filter: grayscale(.55) brightness(.92); }
.gt-sealed, p.gt-note.gt-sealed { display: flex; gap: 8px; align-items: flex-start; background: #fff4d9; color: #6b4a0e; border-radius: 12px; padding: 10px 12px; text-align: left; }
.gt-sealed svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ticket-row.sealed { opacity: .8; }
.gt-stamp { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 6px 18px; border: 4px solid #b43d3d; border-radius: 10px;
  color: #b43d3d; font: 900 1.6rem 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; background: #fff8; }
.gt-confirm { background: #fff8e6; border: 1px solid #f1dfae; border-radius: 12px; padding: 12px; margin: 8px 0; }
.gt-confirm p { margin: 0 0 8px; font-size: .9rem; }
.local-teaser + .primary.gold { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .neon span, .gticket { animation: none; } }
/* ===== Waka Pioneer set (beta test 2026, until 11 October): the approved mock-up, in container units ===== */
.pcard { --holo: linear-gradient(115deg, #7fd3ff, #c7a8ff 20%, #ffd1e8 40%, #fff3a8 55%, #a8ffd6 72%, #7fd3ff); --glow: #c7a8ff88;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; border-radius: 7% / 5.6%; padding: 2.3cqw;
  background: var(--holo); background-size: 300% 300%; animation: pc-frame 7s linear infinite; color: #fff; text-align: left;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease-out; box-shadow: 0 2cqw 4cqw #0009, 0 0 4cqw #c7a8ff40; }
.pcard.p2 { --holo: linear-gradient(115deg, #7fffd4, #a8ffd6 20%, #e6fff4 40%, #7fd3ff 60%, #b4f0ff 80%, #7fffd4); --glow: #7fffd488; }
.pcard.p3 { --holo: linear-gradient(115deg, #ff9ec4, #ffd1e8 20%, #fff3a8 40%, #ffb3a8 60%, #ffd76a 80%, #ff9ec4); --glow: #ff9ec488; }
@keyframes pc-frame { to { background-position: 300% 0; } }
.pc-face { position: relative; height: 100%; border-radius: 5.4% / 4.4%; overflow: hidden; background: radial-gradient(120% 80% at 50% 25%, #26303a, #0d1115 60%, #050607); box-shadow: inset 0 0 0 .3cqw #ffffff30; }
.pc-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.pc-holo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, #7fd3ff38 35%, #c7a8ff38 45%, #ffd1e838 55%, #a8ffd638 65%, transparent 80%); background-size: 260% 100%; mix-blend-mode: screen; animation: pc-sweep 5s ease-in-out infinite; }
@keyframes pc-sweep { 0% { background-position: 120% 0; } 70%, 100% { background-position: -120% 0; } }
.pc-top { position: absolute; top: 5.5cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; font: 800 2.4cqw 'Manrope', sans-serif; letter-spacing: .2em; color: #e8eef2cc; }
.pc-ribbon { position: absolute; top: -4cqw; left: 50%; transform: translateX(-50%) translateZ(14cqw); z-index: 3; padding: 1.8cqw 5cqw; border-radius: 99px; white-space: nowrap;
  font: 800 3cqw 'Manrope', sans-serif; letter-spacing: .14em; color: #111; background: var(--holo); box-shadow: 0 0 0 1cqw #0d1115, 0 2cqw 4cqw #0009; }
.pc-hero { position: absolute; left: 50%; top: 29%; width: 80%; height: 54%; transform: translate(-50%, -50%) translateZ(12cqw); }
.pc-hero .token { position: absolute; inset: 0; width: 100%; height: 100%; scale: 1; transform: none; filter: drop-shadow(0 0 5cqw var(--glow)) drop-shadow(0 5cqw 4cqw #000c); }
/* Mama Sranan (2/3) is a tall figure: a little lower and smaller, so it stays clear of the top row (field test 11-10-2026) */
.pcard.p2 .pc-hero { top: 32.5%; height: 45%; } .pcard.p2 .pc-hero .token { scale: 1; }
.pc-title { position: absolute; top: 55%; left: 0; right: 0; text-align: center; font: 800 6.6cqw 'Manrope', sans-serif; letter-spacing: .12em;
  background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-sub { position: absolute; top: calc(55% + 9cqw); left: 0; right: 0; text-align: center; font-size: 3cqw; letter-spacing: .12em; color: #cfd8de; text-transform: uppercase; }
.pc-panel { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; padding: 3cqw 4cqw; border-radius: 4.5cqw; background: #000000a8; box-shadow: inset 0 0 0 .3cqw #ffffff26;
  display: grid; grid-template-columns: 1fr auto; gap: .6cqw 3cqw; align-items: end; transform: translateZ(6cqw); }
.pc-no { font: 800 10cqw/1 ui-monospace, 'Courier New', monospace; letter-spacing: .04em; background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-no small { font-size: 4.6cqw; -webkit-text-fill-color: #cfd8de; }
.pc-who { font-size: 3.6cqw; font-weight: 700; }
.pc-meta { font-size: 2.8cqw; color: #b9c4ca; }
.pc-site { display: flex; align-items: center; gap: 2cqw; font: 800 3.2cqw 'Manrope', sans-serif; color: #e8eef2; margin-top: 1cqw; }
.pc-site img { width: 5.6cqw; height: 5.6cqw; border-radius: 1.5cqw; }
.pc-qr { grid-row: 1 / span 4; grid-column: 2; background: #fff; border-radius: 2.5cqw; padding: 1.6cqw; text-align: center; font: 800 1.9cqw 'Manrope', sans-serif; color: #0d2a2c; text-transform: uppercase; }
.pc-qr img { width: 16cqw; height: 16cqw; image-rendering: pixelated; display: block; }
.pcard .wc-shine { display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), #ffffff40, transparent 42%); mix-blend-mode: soft-light; transform: translateZ(8cqw); }
/* not earned yet: dark, the monument as a silhouette, and how to earn it */
.pcard.locked { background: #3a4a48; animation: none; box-shadow: none; }
.pcard.locked .pc-face { background: #1b2626; }
.pcard.locked .pc-hero .token { filter: grayscale(1) brightness(0) opacity(.35); }
.pc-lock { position: absolute; left: 0; right: 0; bottom: 8cqw; text-align: center; display: grid; gap: 2cqw; padding: 0 6cqw; color: #cfd8de; font-size: 4cqw; }
.pc-lock b { font: 800 7cqw 'Manrope', sans-serif; color: #fff; }
.pioneer-offer .pack-offer-art { background: linear-gradient(135deg, #7fd3ff, #c7a8ff, #ffd1e8); color: #111; }
@media (prefers-reduced-motion: reduce) { .pcard, .pc-holo { animation: none; } }
/* ===== Variants (04-10-2026): bronze stays next to gold; switch between the variants you own ===== */
.wc-variants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.wc-variant { border: 1px solid var(--line, #dbe7e2); background: #fff; border-radius: 99px; padding: 5px 12px; font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.wc-variant.t-bronze { color: #8a5428; } .wc-variant.t-silver { color: #5d6b6d; } .wc-variant.t-gold { color: #946111; }
.wc-variant.on.t-bronze { background: linear-gradient(135deg, #7a4520, #f0bd86 45%, #a86a36); color: #1a120c; border-color: transparent; }
.wc-variant.on.t-silver { background: linear-gradient(135deg, #8a9799, #ffffff 45%, #b8c4c6); color: #0e1a1d; border-color: transparent; }
.wc-variant.on.t-gold { background: linear-gradient(135deg, #8a5a12, #ffe08a 35%, #fff3c4 50%, #c98f1e 80%); color: #2a1a02; border-color: transparent; }
/* ===== Push notifications (04-10-2026): the block at the top of the news panel ===== */
.push-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 14px; padding: 12px 14px; border-radius: 14px; background: #eef6f2; border: 1px solid #d6e8df; }
.push-box > svg.lucide { color: #2b755b; flex-shrink: 0; } .push-box p { flex: 1; min-width: 180px; margin: 0; } .push-box button { width: auto; margin-top: 0; min-height: 40px; }
/* Gold Ticket checked by the server (04-10-2026) */
.gt-check { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 4px; font-weight: 700; font-size: .9rem; color: #7a6a3a; }
.gt-check.ok { color: #2b755b; } .gt-check svg.lucide { width: 18px; height: 18px; } .gt-check:not(.ok) svg.lucide { animation: gt-spin 1.2s linear infinite; }
@keyframes gt-spin { to { transform: rotate(360deg); } } .gt-note { color: #b4432f; text-align: center; }
.gt-scan { display: grid; justify-items: center; gap: 6px; margin: 6px 0 12px; text-align: center; }
.gt-qr { width: 210px; max-width: 70vw; aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 4px 14px #b8862a33; display: grid; place-items: center; } .gt-qr svg { width: 100%; height: 100%; }
/* ===== Competition mode (wedstrijd.js, 04-10-2026) ===== */
.comp-bar { position: fixed; z-index: 900; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 66px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 8px 14px; border-radius: 999px; border: 0; background: #123f39; color: #fff; font: 700 .9rem/1.2 inherit; box-shadow: 0 6px 18px #0004; cursor: pointer; white-space: nowrap; overflow: hidden; }
.comp-bar span { font-weight: 600; opacity: .92; } .comp-bar .comp-time { color: #f1b748; font-variant-numeric: tabular-nums; font-weight: 800; opacity: 1; }
.comp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; vertical-align: -1px; margin-right: 4px; box-shadow: 0 0 0 2px #ffffff55; }
.comp-team { font-size: 1.05rem; } .comp-h { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #58736f; margin: 16px 0 6px; }
.comp-row { display: grid; grid-template-columns: 1.6rem auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.comp-row.small { grid-template-columns: 1.6rem 1fr auto; padding: 5px 10px; font-size: .92rem; } .comp-row:nth-child(even) { background: #f2f7f4; }
.comp-row.mine { background: #fff4d9 !important; } .comp-rank { font-weight: 800; color: #58736f; text-align: right; } .comp-row b { font-variant-numeric: tabular-nums; }
.comp-name small { display: block; color: #58736f; font-weight: 400; font-size: .8rem; } .comp-name > small:first-of-type:not(:last-child) { display: inline; margin-left: 4px; }

/* Competition phase 2 (wedstrijd.js): the team tasks in the competition window, the team card and badge cards in the
   collection (cards.js compHTML), and the window to start a friends competition. */
.comp-bar .comp-tt { color: #f1b748; }
.tt-card { border: 1px solid #dbe7e2; border-radius: 14px; padding: 10px 12px; margin: 8px 0; background: #fbfdfc; }
.tt-card.done { background: #eef8f1; border-color: #bfe1cb; }
.tt-card p { margin: 6px 0; }
.tt-top { display: flex; align-items: center; gap: 8px; } .tt-top svg { width: 18px; height: 18px; color: #2b755b; flex-shrink: 0; }
.tt-top span { margin-left: auto; font-weight: 800; color: #946111; font-variant-numeric: tabular-nums; }
.tt-done { display: flex; align-items: center; gap: 6px; color: #2b755b; font-weight: 700; } .tt-done svg { width: 18px; height: 18px; }
.tt-letters { font: 800 1.35rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: #123f39; text-align: center; background: #fff; border: 1px dashed #c9dbd3; border-radius: 10px; padding: 6px; }
.tt-guess { display: flex; gap: 8px; margin-top: 8px; } .tt-guess input { flex: 1; min-width: 0; text-transform: uppercase; } .tt-guess button { flex: none; width: auto; margin: 0; }
.tt-word { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 2px; color: #123f39; } .tt-word svg { width: 18px; height: 18px; color: #2e8b57; }
.comp-winner { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff6dc; border: 1px solid #f1b748; color: #123f39; text-align: center; }
.tt-card input[type=text] { margin: 6px 0; }
.tt-clues { margin: 6px 0; padding-left: 1.3rem; } .tt-clues li { margin: 3px 0; }
.tt-options .option { margin: 6px 0; }
.tt-file { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.comp-row .secondary.small { width: auto; margin: 0; padding: 6px 10px; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; } .comp-row .secondary.small svg { width: 15px; height: 15px; }
.comp-row:has(button.small) { grid-template-columns: auto 1fr auto auto; }
.fr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
label.check { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-weight: 600; } label.check small { font-weight: 400; color: #58736f; } label.check input { width: auto; margin: 0; }
.comp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 8px 0 14px; }
/* The team card: the tier of the team's place, like the monument cards (gold, silver, bronze; from 4th the team colour). */
.tcard { --team: #2b755b; --rim: var(--team); position: relative; aspect-ratio: 4 / 5; container-type: inline-size; border-radius: 7% / 5.6%; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--team) 55%, #0d2f2c), #071614 72%); border: 2px solid var(--rim); box-shadow: 0 6px 16px #0003; }
.tcard.t-gold { --rim: #f1b748; box-shadow: 0 0 18px #f1b74855, 0 6px 16px #0003; } .tcard.t-silver { --rim: #c3d0ce; } .tcard.t-bronze { --rim: #b07a47; }
.tcard.t-gold::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(115deg, transparent 35%, #fff3c433 45%, #ffffff55 50%, #fff3c433 55%, transparent 65%); background-size: 250% 100%; animation: tc-shine 4.5s ease-in-out infinite; }
@keyframes tc-shine { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .tcard.t-gold::after { animation: none; background-position: 50% 0; } }
.tc-pill { position: absolute; top: 4cqw; right: 4cqw; z-index: 3; padding: 1.4cqw 3.6cqw; border-radius: 99px; font-size: 4cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1a1205; }
.t-gold .tc-pill { background: linear-gradient(135deg, #8a5a12, #ffe08a 35%, #fff3c4 50%, #c98f1e 80%); } .t-gold .tc-pill::before { content: "\2605\00a0"; }
.t-silver .tc-pill { background: linear-gradient(135deg, #8a9799, #ffffff 45%, #b8c4c6); } .t-silver .tc-pill::before { content: "\2726\00a0"; }
.t-bronze .tc-pill { background: linear-gradient(135deg, #7a4520, #f0bd86 45%, #a86a36); } .t-team .tc-pill { background: var(--team); color: #fff; }
.tc-band { position: absolute; top: 5cqw; left: 5.5cqw; right: 40cqw; display: grid; font-size: 4.2cqw; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.tc-band span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-art { position: absolute; left: 50%; top: 31%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1; }
.tc-art .token { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; filter: drop-shadow(0 4cqw 3cqw #0009); }
.tc-prize { position: absolute; left: 50%; top: 47%; z-index: 3; transform: translate(-50%, -50%) rotate(-3deg); background: #f1b748; color: #1a1205; font-size: 4cqw; font-weight: 800; line-height: 1;
  padding: 1.8cqw 3.4cqw; border-radius: 1.6cqw; white-space: nowrap; display: flex; gap: 1.4cqw; align-items: center; box-shadow: 0 1.5cqw 3cqw #0007; }
.tc-prize svg { width: 4.6cqw; height: 4.6cqw; }
.tc-info { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 2; padding: 3cqw 3.4cqw 3cqw 4.2cqw; border-radius: 4cqw; background: #07171ad9; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.6cqw; align-items: end; }
.tc-main { display: grid; gap: .8cqw; min-width: 0; }
/* the logo with the site, and the QR code to the app, as on the Pioneer cards */
.cc-site { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.6cqw; font-weight: 800; color: #e8eef2; margin-top: .6cqw; white-space: nowrap; }
.cc-site img { width: 4.8cqw; height: 4.8cqw; border-radius: 1.3cqw; }
.cc-qr { background: #fff; border-radius: 2.4cqw; padding: 1.5cqw; text-align: center; font-size: 2.3cqw; font-weight: 800; color: #0d2a2c; text-transform: uppercase; line-height: 1.2; }
.cc-qr img { width: 15cqw; height: 15cqw; image-rendering: pixelated; display: block; margin-bottom: .6cqw; }
.tc-rank { display: flex; align-items: baseline; gap: 1cqw; min-width: 0; }
.tc-rank b { font-size: 13cqw; font-weight: 900; line-height: .9; } .tc-rank small { font-size: 5.4cqw; font-weight: 700; opacity: .7; }
.tc-team { margin-left: auto; display: inline-flex; align-items: center; gap: 1.6cqw; font-size: 6.4cqw; font-weight: 800; text-transform: uppercase; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 24-10-2026: the name in its own box, so a long team name ends in "…" instead of running off the card; longer names a
   smaller letter first */
.tc-team > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-team.mid { font-size: 5.4cqw; } .tc-team.long { font-size: 4.6cqw; }
.tc-team i { flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--team); box-shadow: 0 0 0 .7cqw #ffffff55; }
.tc-ev { font-size: 4.8cqw; opacity: .8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc-stats { display: flex; gap: 0 2.6cqw; flex-wrap: wrap; font-size: 4.6cqw; color: #ffe08a; font-weight: 700; }
.tc-me { font-size: 4.6cqw; opacity: .75; }
/* A badge: a round medal on a dark tile; the rim shows how hard it is to earn. */
.bmedal { --rim1: #c0473e; --rim2: #ff9b8f; aspect-ratio: 4 / 5; container-type: inline-size; border-radius: 7% / 5.6%; background: radial-gradient(120% 80% at 50% 25%, #134a44, #0b2624 75%); color: #e9f3ef;
  padding: 8cqw 6cqw 6cqw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6cqw; box-shadow: 0 6px 16px #0003; }
.bmedal.r-gold { --rim1: #8a5a12; --rim2: #ffe08a; } .bmedal.r-silver { --rim1: #7e8c8e; --rim2: #ffffff; }
.bm-coin { position: relative; width: 52cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none; margin-bottom: 2cqw;
  background: conic-gradient(from 200deg, var(--rim1), var(--rim2), var(--rim1), var(--rim2), var(--rim1)); box-shadow: 0 3cqw 6cqw #0007; }
.bm-coin::before { content: ""; position: absolute; inset: 4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #1f6d63, #0a2a28 75%); box-shadow: inset 0 1cqw 3cqw #0008; }
.bm-coin svg { position: relative; width: 22cqw; height: 22cqw; color: var(--rim2); } .r-coral .bm-coin svg { color: #ffd2cc; }
.bmedal b { font-size: 8cqw; line-height: 1.1; font-weight: 800; } .bmedal small { font-size: 6cqw; line-height: 1.25; opacity: .85; }
.bmedal em { font-style: normal; font-size: 5cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f1b748; }
.bm-foot { margin-top: auto; width: 100%; display: flex; align-items: end; justify-content: space-between; gap: 2cqw; text-align: left; }
.bm-foot > div:first-child { min-width: 0; display: grid; }
.bm-foot span { font-size: 4.4cqw; opacity: .6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bmedal .cc-site { font-size: 4.2cqw; } .bmedal .cc-site img { width: 5.4cqw; height: 5.4cqw; }
.bmedal .cc-qr { font-size: 2.6cqw; padding: 1.6cqw; } .bmedal .cc-qr img { width: 15cqw; height: 15cqw; }
.fr-grid select { width: 100%; padding: 10px 12px; border: 1px solid #dbe7e2; border-radius: 12px; background: #fff; color: #123f39; font: inherit; }
/* every choice list in a window looks like the other fields (staging test 26-10-2026: the days of a tour and the occasion were the small browser list) */
#modal-body select { width: 100%; padding: 10px 12px; border: 1px solid #dbe7e2; border-radius: 12px; background: #fff; color: #123f39; font: inherit; margin-top: 6px; }
#fr-word::placeholder { font-size: .85rem; }

/* ---------- Waka: a partner's offer as a token on the map (game.js, 05-10-2026) ---------- */
.waka-btn { background: none; border: 0; padding: 0; display: block; }
.waka-token { --wc: #d49a2b; --wi: #fff; position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 52px; }
.waka-coin { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--wi);
  background: radial-gradient(circle at 34% 28%, #ffffff70, transparent 46%), var(--wc);
  box-shadow: inset 0 0 0 2px #ffffffcc, 0 0 0 3px var(--wc), 0 4px 10px #0b2a2266; }
.waka-coin svg.lucide { width: 21px; height: 21px; stroke-width: 2.2; }
.waka-coin::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--wc); animation: wakaPulse 2.2s ease-out infinite; pointer-events: none; }
.waka-tag { font: 800 8.5px/1 'Manrope', sans-serif; letter-spacing: .16em; padding: 3px 6px 3px 7px; border-radius: 9px; background: #103b32; color: #f1b748; box-shadow: 0 0 0 1.5px var(--wc); }
.waka-token.preview .waka-coin::before { animation-duration: 1.2s; }
.waka-token.here .waka-coin::before { animation: none; border-color: #fff; inset: -6px; box-shadow: 0 0 0 3px var(--wc), 0 0 14px var(--wc); }
@keyframes wakaPulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.65); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .waka-coin::before { animation: none; opacity: .5; } }
.waka-ask { position: fixed; z-index: 2500; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); width: min(380px, calc(100vw - 32px));
  background: #fff; color: var(--ink); border-radius: 18px; padding: 14px 16px 10px; box-shadow: 0 14px 44px #05271c66; }
.waka-ask-head, .waka-show-head { display: flex; align-items: center; gap: 12px; }
.waka-ask-head .news-label { margin: 0 0 2px; }
.waka-ask p.small-text { margin: 10px 0 8px; }
.waka-show-head h2 { margin: 0; }
.waka-show-head p { margin: 2px 0 0; }
.waka-sub { font-size: 1rem; margin: 14px 0 6px; }
.waka-prices { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 10px; }
.waka-prices td { padding: 7px 2px; border-bottom: 1px dashed var(--line); }
.waka-prices td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
dialog .small-text svg.lucide { width: 15px; height: 15px; vertical-align: -3px; }

.waka-neon-hint { color: #8a5d12; margin: 4px 0 8px; }

/* ---------- Waka Neti: the night mode (game.js, 05-10-2026) ---------- */
body:not(.neti) #neti-panel, body:not(.neti) #neti-top { display: none; }
body.neti .journey > :not(#neti-panel) { display: none; }
body.neti .map-top > div:not(#neti-top) { display: none; }
body.neti #map-legend, body.neti #mode-banner { display: none !important; }
/* point 7 (07-10-2026): the walk pill at night, in the night colours */
body.neti .walk-left:not([hidden]) { background: #1d2347; color: #eef0ff; box-shadow: 0 0 0 1px #3a3f78, 0 6px 20px #0006; } body.neti .walk-left svg { color: #f1b748; }
body.neti #map, body.neti .map-section { background: #10142a; }
body.neti .street-label span { color: #8f9bc7; text-shadow: 0 0 3px #10142a, 0 0 3px #10142a; }
body.neti .map-top > div { background: #161b38ec; border-color: #2b3258; color: #eef0ff; }
body.neti .map-top .eyebrow { color: #f1b748; }
body.neti .map-sub { color: #b8c0e8; }
.neti-sub { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .75rem; color: #b8c0e8; }
.neti-sub svg.lucide { width: 14px; height: 14px; color: #f1b748; }
body.neti .journey { background: #12162e; color: #eef0ff; border-color: #2b3258; }
.neti-panel h2 { margin: 6px 0 8px; }
.neti-panel .eyebrow { color: #f1b748; }
.neti-panel .muted { color: #9aa3cf; }
.neti-panel .status-note { background: #262c52; color: #f3e6c4; }
.neti-panel .secondary { background: #1d2347; color: #eef0ff; border-color: #2f3766; }
.neti-btn { color: #3b2f8f; }
body.neti .neti-btn { background: #f1b748; color: #10142a; border-color: #f1b748; }
.neti-btn.locked { opacity: .45; }
body.neti .round { background: #1d2347; border-color: #2f3766; color: #eef0ff; }
body.neti .leaflet-control-attribution { background: #10142ad0 !important; color: #8f9bc7; }
body.neti .leaflet-control-attribution a { color: #b8c0e8 !important; }

/* Divali on the night map (parts/night.js, festLayer): the giant diya on the Onafhankelijkheidsplein seen from above,
   its flame flickering in a warm glow; --diya-s follows the zoom */
.diya-top { position: absolute; left: 0; top: 0; width: 150px; height: 150px; transform: translate(-50%, -50%) scale(var(--diya-s, 1)); pointer-events: auto; cursor: pointer; }
.dt-name small { display: block; margin-top: 3px; font: 700 11px/1 'Manrope', sans-serif; text-align: center; color: #fff4d6; }
.diya-top svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px #000a); }
.dt-glow { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle at 62% 50%, #ffb34788 0, #ff7a1a40 28%, #ff5a1a14 52%, transparent 70%); animation: dt-glow 2.4s ease-in-out infinite; }
.dt-flame { transform-box: fill-box; transform-origin: 50% 50%; animation: dt-flick 1.1s ease-in-out infinite; }
.dt-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font: 800 15px/1 'Manrope', sans-serif; color: #ffe39a; text-shadow: 0 0 3px #f1b748, 0 0 12px #ff9a2e; }
@keyframes dt-flick { 0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; } 20% { transform: scale(1.12) translate(1px, -1px); } 45% { transform: scale(.9) translate(-1px, 1px); opacity: .85; } 70% { transform: scale(1.06) translate(1px, 1px); } }
@keyframes dt-glow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.dt-mini { position: absolute; left: 0; top: 0; width: 18px; height: 18px; transform: translate(-50%, -50%) scale(var(--diya-s, 1)); pointer-events: none; }
.dt-mini i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fffbe6 0 18%, #ffd166 30%, #ff9a2e88 55%, transparent 72%);
  animation: dt-twinkle 1.3s ease-in-out infinite; animation-delay: var(--k, 0s); }
@keyframes dt-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .65; transform: scale(.82); } 70% { opacity: .95; transform: scale(1.12); } }
/* Srefidensi on the map (parts/srefidensi.js): children forming the flag, a star and 51 on the Onafhankelijkheidsplein, gold stars along the square; --sref-s follows the zoom */
.sref-flag { position: absolute; left: 0; top: 0; width: 200px; transform: translate(-50%, -50%) scale(var(--sref-s, 1)); pointer-events: auto; cursor: pointer; }
.sref-flag canvas { display: block; width: 200px; height: 150px; }
.sf-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) scale(calc(1 / var(--sref-s, 1))); transform-origin: 50% 0; margin-top: 4px; white-space: nowrap; font: 800 15px/1 'Manrope', sans-serif; color: #123f39; text-align: center; text-shadow: 0 0 3px #fff, 0 0 7px #fff; }
.sf-name small { display: block; margin-top: 3px; font: 700 11px/1 'Manrope', sans-serif; }
body.neti .sf-name { color: #ffe39a; text-shadow: 0 0 3px #000, 0 0 7px #000; }
.sf-mini { position: absolute; left: 0; top: 0; width: 15px; height: 15px; transform: translate(-50%, -50%) scale(var(--sref-m, 1)); pointer-events: none; animation: sf-star 1.6s ease-in-out infinite; animation-delay: var(--k, 0s); }
.sf-mini svg { display: block; width: 100%; height: 100%; }
.sref-big { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; margin: 0 auto 10px; border-radius: 14px; background: #cde2c7; }
body.neti .sref-big { background: #132a20; }
.sref-pill { position: absolute; z-index: 800; left: 12px; top: 150px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 92px); padding: 9px 14px; border: 1.5px solid #ecc81d; border-radius: 999px; background: #123f39; color: #fff; font: 800 13px/1.2 'Manrope', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 3px 10px #0005; }
.sref-pill span { color: #ecc81d; font-size: 15px; }
.sref-fire { position: absolute; left: 0; top: 0; width: 340px; height: 320px; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes sf-star { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sf-mini { animation: none; } }
/* the fireflies over the night map until Divali is over: each its own colour, path and blink */
.fest-flies { position: absolute; inset: 0; z-index: 450; pointer-events: none; overflow: hidden; }
.fest-flies i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 2px var(--c), 0 0 14px 5px var(--c);
  animation: ff-fly var(--t) ease-in-out var(--o) infinite alternate, ff-blink var(--b) ease-in-out var(--o) infinite; }
@keyframes ff-fly { 0% { transform: translate(0, 0); } 33% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * -.4)); } 66% { transform: translate(calc(var(--dx) * -.3), var(--dy)); } 100% { transform: translate(var(--dx), calc(var(--dy) * .3)); } }
@keyframes ff-blink { 0%, 100% { opacity: .15; } 45%, 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dt-flame, .dt-glow, .dt-mini i, .fest-flies i { animation: none; } }

/* what makes a business special (owner 06-11-2026): its own short text in its window, by day and at night */
.biz-desc { margin: 10px 0; font-size: .95rem; line-height: 1.5; white-space: pre-line; }
body.neti dialog .biz-desc { color: #dfe3ff; }

/* Waka Neti: the businesses as neon signs on the map and in the list (C3) */
.neti-marker { overflow: visible; }
.neti-sign-btn, .neti-cluster { background: none; border: 0; padding: 0; transform: translate(-50%, -50%); display: block; cursor: pointer; }
.neti-sign { --neon: #ff4f81; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 10px; white-space: nowrap;
  background: #0b0e1fe6; box-shadow: 0 0 0 1.5px var(--neon), 0 0 10px var(--neon), inset 0 0 8px #0008; }
.neti-sign svg.lucide { width: 17px; height: 17px; color: var(--neon); filter: drop-shadow(0 0 3px var(--neon)); stroke-width: 2.3; }
.neti-sign > span { font: 800 11.5px/1.1 'Manrope', sans-serif; color: #fff; text-shadow: 0 0 2px #fff, 0 0 6px var(--neon); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.neti-sign b { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f1b748; color: #10142a; font: 800 10px/18px 'Manrope', sans-serif; text-align: center; }
.neti-sign.closed { opacity: .55; box-shadow: 0 0 0 1.5px var(--neon); }
.neti-sign.going { animation: netiGlow 1.6s ease-in-out infinite; }
@keyframes netiGlow { 50% { box-shadow: 0 0 0 2.5px var(--neon), 0 0 22px var(--neon), inset 0 0 8px #0008; } }
@media (prefers-reduced-motion: reduce) { .neti-sign.going { animation: none; } }
.neti-sign.mini { padding: 6px; border-radius: 9px; }
.neti-sign.mini > span { display: none; }
.neti-cluster { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 16px; background: #0b0e1fe6; box-shadow: 0 0 0 1.5px #f1b748, 0 0 12px #f1b74888; }
.neti-cluster i { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.neti-cluster b { color: #fff; font: 800 12px/1 'Manrope', sans-serif; margin-left: 4px; }
.neti-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.neti-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 16px; background: #1d2347; color: #dfe3ff; border: 1px solid #2f3766; font-size: .76rem; font-weight: 700; }
.neti-chip svg.lucide { width: 14px; height: 14px; }
.neti-chip.on { background: #f1b748; color: #10142a; border-color: #f1b748; }
.neti-list { display: grid; gap: 6px; margin: 4px 0 12px; }
.neti-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 12px; background: #181d3d; color: #eef0ff; border: 1px solid #262d58; text-align: left; }
.neti-row.closed { opacity: .65; }
.neti-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.neti-row-text b { font-size: .9rem; }
.neti-row-text small { font-size: .72rem; color: #a9b1dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neti-row-text .neti-acts { color: #f1d38a; }
.neti-row-text .neti-18 { align-self: flex-start; }
.neti-18 { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #c0392b; color: #fff; font: 800 .65rem/1.4 'Manrope', sans-serif; vertical-align: 2px; }
.neti-now { color: #2ecc71; }
.neti-going { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; margin: 8px 0; border-radius: 12px; background: #2a2350; color: #f3e6c4; font-size: .82rem; }
.neti-going .text-button { color: #f1b748; padding: 0; }
.neti-act .partner-offer { flex-wrap: wrap; }

/* Waka Neti: 18+, safety (C4) */
.neti-adult-note { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin: 2px 0; border-radius: 12px; background: #2a1830; color: #f3d6e0; border: 1px dashed #7a3a55; font-size: .78rem; text-align: left; }
.neti-adult-note svg.lucide { width: 16px; height: 16px; flex-shrink: 0; color: #ff8fb1; }
.neti-adult-note span { flex: 1; }
.neti-adult-note b { color: #f1b748; white-space: nowrap; }
.neti-safe { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; margin: 8px 0; border-radius: 10px; background: #eef4ff; color: #233056; font-size: .8rem; line-height: 1.45; }
.neti-safe svg.lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.neti-safe.far { background: #fff3e0; color: #6a4410; }

/* Waka Neti: the transition, the sunset suggestion and the dark windows (C5) */
body.neti-enter #map { animation: netiDusk 1.1s ease-out; }
body.neti-leave #map { animation: netiDawn 1.1s ease-out; }
@keyframes netiDusk { 0% { filter: brightness(1.7) saturate(.4) hue-rotate(-25deg); } 60% { filter: brightness(.75) saturate(1.2); } 100% { filter: none; } }
@keyframes netiDawn { 0% { filter: brightness(.35) sepia(.6); } 50% { filter: brightness(1.25) sepia(.35) saturate(1.3); } 100% { filter: none; } }
body.neti-enter .neti-sign-btn, body.neti-enter .neti-cluster { animation: netiPop .45s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(.35s + var(--i, 0) * 90ms); }
@keyframes netiPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { body.neti-enter #map, body.neti-leave #map, body.neti-enter .neti-sign-btn, body.neti-enter .neti-cluster { animation: none; } }
.neti-suggest { background: #12162e; color: #eef0ff; box-shadow: 0 14px 44px #05061acc, 0 0 0 1.5px #f1b74866; }
.neti-suggest .news-label { color: #f1b748; }
.neti-suggest .text-button { color: #b8c0e8; }
.neti-suggest .primary { background: #f1b748; color: #10142a; }
.neti-moon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3b4580, #161b38); color: #f1b748; box-shadow: 0 0 14px #f1b74855; flex-shrink: 0; }
.neti-moon svg.lucide { width: 22px; height: 22px; }
body.neti dialog { background: #12162e; color: #eef0ff; box-shadow: 0 30px 100px #000a, 0 0 0 1px #2b3258; }
body.neti dialog::backdrop { background: #05061ab3; }
body.neti dialog .eyebrow, body.neti dialog .modal-head .eyebrow { color: #f1b748; }
body.neti dialog .muted, body.neti dialog .small-text.muted { color: #a9b1dc; }
body.neti dialog .partner-box { background: #1b2045; border-color: #2f3766; }
body.neti dialog .partner-offer { color: #f1d38a; }
body.neti dialog .waka-prices td { border-color: #2f3766; }
body.neti dialog .primary { background: #f1b748; color: #10142a; }
body.neti dialog .secondary, body.neti dialog .link-button { background: #1d2347; color: #eef0ff; border-color: #2f3766; }
body.neti dialog .text-button { color: #b8c0e8; }
body.neti dialog .round.small { background: #1d2347; color: #eef0ff; }
body.neti dialog .neti-safe { background: #1b2550; color: #dfe6ff; }
body.neti dialog .neti-safe.far { background: #3a2a12; color: #f6dfb2; }
body.neti dialog .waka-neon-hint { color: #f1d38a; }
body.neti dialog .achievement .big-icon { background: #2a2350; color: #f1b748; }
body.neti .tour-bubble { background: #12162e; color: #eef0ff; }

/* The name stays Waka Quest: in the night the logo in the top bar turns neon (05-10-2026) */
.brand-neon { display: none; }
body.neti .topbar { background: #0b0e1f; border-color: #232a4c; }
body.neti .brand > :not(.brand-neon) { display: none; }
body.neti .brand-neon { display: flex; flex-direction: column; gap: 3px; }
.brand-neon img { height: 44px; width: auto; display: block; margin: -4px 0 -4px -6px; }
.brand-neon small { font: 600 .55rem/1 'Manrope', sans-serif; letter-spacing: .19em; color: #8f9bc7; margin-left: 2px; }
body.neti-enter .brand-neon img { animation: netiFlicker 1.3s linear both; }
@keyframes netiFlicker { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .15; } 20% { opacity: 1; } 26% { opacity: .35; } 34%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.neti-enter .brand-neon img { animation: none; } }
body.neti .nav { color: #a9b1dc; } body.neti .nav.active { background: #1d2347; color: #fff; }
body.neti .score-pill { background: #1d2347; color: #f1d38a; } body.neti .score-pill svg { color: #f1b748; }
body.neti .pass-pill { background: #1b2a3c; color: #bfe0cc; border-color: #2f4766; }
@media (max-width: 760px) { .brand-neon img { height: 28px; margin: -2px 0 -2px -4px; } .brand-neon small { font-size: .42rem; letter-spacing: .14em; } } /* as wide as the day logo (± 130 px) */


/* The night reward (C8): neon animals of Suriname and the firefly jar in My cards; the animal on the arrival screen */
.na-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.na-cell { --neon: #ff4f81; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #241a3a, #0f0b1c 75%); }
.na-cell .night-animal { width: 56px; height: 56px; color: var(--neon); }
.na-cell.have .night-animal, .na-cell.gold .night-animal { filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 9px var(--neon)); }
.na-cell.missing .night-animal { color: #3d3a5c; filter: none; }
.na-cell span { font: 800 .72rem/1.1 'Manrope', sans-serif; color: #fff; text-shadow: 0 0 6px var(--neon); }
.na-cell.missing span { color: #8a86a8; text-shadow: none; font-weight: 600; }
.na-cell b { position: absolute; top: 6px; right: 6px; font: 800 .58rem/1 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #10142a; background: #f1b748; padding: 3px 6px; border-radius: 6px; }
.na-cell.gold { box-shadow: 0 0 0 1.5px #f1b748, 0 0 14px #f1b74866; }
.na-jar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 12px; border-radius: 14px; background: #12162e; color: #dfe3ff; font-size: .8rem; }
.na-jar b { color: #f1b748; }
.na-flies { position: relative; width: 52px; height: 62px; flex-shrink: 0; border: 2px solid #8f9bc7aa; border-top-width: 5px; border-radius: 10px 10px 16px 16px; background: #0b0e1f; overflow: hidden; }
.na-flies i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff 20%, #f1e27a 60%); box-shadow: 0 0 6px 2px #f1e27aaa;
  animation: netiFly 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -0.35s); }
@keyframes netiFly { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, -4px); } 50% { transform: translate(-1px, -1px); } 75% { transform: translate(-2px, -5px); } }
.neon.neon-animal .night-animal { width: 74px; height: 74px; color: var(--neon); filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 12px var(--neon)); }
.neon.neon-animal.gold { box-shadow: 0 0 0 2px #f1b748, 0 0 20px #f1b74888; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .na-flies i { animation: none; } }

/* C9: a message's time window in the bell */
.news-daily { margin: 2px 0 4px; color: #4e6b62; } .news-daily .neti-now { color: #1e8f5a; }

/* C10: the price tag by day, the glowing coin on the neon sign at night */
.waka-btn { transform: translate(-50%, -50%); }
.day-tag { --c: #e2574c; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 19px; white-space: nowrap;
  background: #fff; border: 2px solid var(--c); border-radius: 6px 14px 14px 6px; color: var(--c); box-shadow: 0 3px 6px #153d2933; transform: rotate(-6deg); }
.day-tag .hole { position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #e9f2ed; border: 1.5px solid var(--c); }
.day-tag svg.lucide { width: 17px; height: 17px; stroke-width: 2.3; }
.day-tag b { color: #123f39; font: 800 12px/1.1 'Manrope', sans-serif; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.day-tag .ribbon { position: absolute; right: -6px; top: -9px; font: 800 8px/1 'Manrope', sans-serif; letter-spacing: 1.5px; padding: 3px 5px; border-radius: 4px; background: #f1b748; color: #123f39; }
.day-tag.preview { animation: dayTagIn .5s cubic-bezier(.2,1.6,.4,1) both; }
.day-tag.here { background: #eaf7ee; } .day-tag.here::after { content: '✓'; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #1e8f5a; color: #fff; font: 800 11px/18px 'Manrope', sans-serif; text-align: center; }
@keyframes dayTagIn { 0% { opacity: 0; transform: rotate(-6deg) translateY(-12px) scale(.7); } 100% { opacity: 1; transform: rotate(-6deg); } }
.waka-ask-head .day-tag, .waka-show-head .day-tag { transform: rotate(-4deg); flex-shrink: 0; }
.night-coin { position: absolute; top: -12px; left: -12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--wi);
  background: radial-gradient(circle at 34% 28%, #ffffff70, transparent 46%), var(--wc); box-shadow: inset 0 0 0 1.5px #ffffffcc, 0 0 0 2px var(--wc), 0 0 10px var(--wc); }
.night-coin svg.lucide { width: 14px; height: 14px; stroke-width: 2.4; } .night-coin b { font: 800 11px/1 'Manrope', sans-serif; }
.night-coin.now::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--wc); animation: wakaPulse 1.8s ease-out infinite; }
.neti-sign.closed .night-coin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .night-coin.now::before, .day-tag.preview { animation: none; } }

.neti-sign .night-coin b { position: static; min-width: 0; height: auto; padding: 0; background: none; color: inherit; font: 800 11px/1 "Manrope", sans-serif; }
/* a closed business: the sign dims, its coin stays clear (C10) */
.neti-sign.closed { opacity: 1; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--neon) 55%, transparent); }
.neti-sign.closed > :not(.night-coin) { opacity: .5; }
.neti-sign .night-coin svg.lucide { width: 14px; height: 14px; color: var(--wi); filter: none; stroke-width: 2.4; }


/* C10 (owner, 06-10-2026): a business with an action gets its glowing coin (its own pictogram), larger, above the name sign */
.neti-sign .night-coin { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 40px; height: 40px;
  background: radial-gradient(circle at 34% 28%, #ffffff70, transparent 46%), var(--wc); box-shadow: inset 0 0 0 2px #ffffffcc, 0 0 0 3px var(--wc), 0 0 16px var(--wc); }
.neti-sign .night-coin svg.lucide { width: 21px; height: 21px; color: var(--wi); filter: none; stroke-width: 2.2; }
.neti-sign .night-coin b { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f1b748; color: #10142a; font: 800 10px/18px 'Manrope', sans-serif; text-align: center; }
.neti-sign .night-coin.now::before { display: block; inset: -4px; border-width: 3px; }

/* C12: featured (a bigger, brighter sign with its label) and the event boost ("Today") at night */
.neti-sign.top { transform: scale(1.18); box-shadow: 0 0 0 2px var(--neon), 0 0 18px var(--neon), inset 0 0 8px #0008; }
.neti-sign.top > span { font-size: 12.5px; }
.neti-top-tag, .neti-today-tag { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 4px); font: 800 8.5px/1 'Manrope', sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.neti-top-tag { background: #f1b748; color: #10142a; }
.neti-today-tag { background: #ff4f81; color: #fff; }
.neti-sign.top.boost .neti-today-tag { top: calc(100% + 20px); }
.neti-sign.boost .night-coin { box-shadow: inset 0 0 0 2px #ffffffcc, 0 0 0 3px #f1b748, 0 0 20px #f1b748; }
.neti-feat, .neti-boost { display: inline-block; padding: 1px 6px; border-radius: 6px; font: 800 .62rem/1.4 'Manrope', sans-serif; vertical-align: 2px; letter-spacing: .04em; }
.neti-feat { background: #f1b748; color: #10142a; } .neti-boost { background: #ff4f81; color: #fff; }
.neti-row-text .neti-feat, .neti-row-text .neti-boost { align-self: flex-start; }
.neti-sign.closed > .neti-top-tag, .neti-sign.closed > .neti-today-tag { opacity: 1; }

/* C13: the actions beyond the first 3 under "more" */
.neti-more { margin: 4px 0 8px; } .neti-more summary { cursor: pointer; font-weight: 800; font-size: .85rem; color: #f1b748; padding: 6px 0; list-style: none; }
.neti-more summary::-webkit-details-marker { display: none; } .neti-more summary::before { content: '+ '; } .neti-more[open] summary::before { content: '– '; }
body:not(.neti) .neti-more summary { color: #946111; }

/* C14: the account screen at night, dark and readable; the group's monument plan belongs to the day */
body.neti dialog h3 { color: #f1d38a; }
body.neti dialog .route-row { background: transparent; color: #eef0ff; border-color: #2b3258; }
body.neti dialog .route-row small { color: #a9b1dc; }
body.neti dialog .route-n { background: #1d2347; color: #f1b748; }
body.neti dialog input[type=text], body.neti dialog input[type=tel], body.neti dialog input[type=email], body.neti dialog textarea { background: #0b0e1f; color: #eef0ff; border-color: #2f3766; }
body.neti dialog input::placeholder { color: #6f78a8; }
body.neti dialog .field-label { color: #dfe3ff; }
body.neti dialog .group-card { background: #181d3d; border-color: #2b3258; color: #eef0ff; }
body.neti dialog .group-card .tag, body.neti dialog .tag { background: #2a2350; color: #f3e6c4; }
body.neti dialog .day-row { border-color: #2b3258; }
body.neti dialog .status-note { background: #262c52; color: #f3e6c4; }
body.neti dialog #group-propose-next, body.neti dialog #group-propose-pick, body.neti dialog #group-use, body.neti dialog #group-clear-plan { display: none; }

/* C15: the guest list on an event (bell and night card) and the guest-list ticket */
.gl-box { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: #fff7df; border: 1px solid #f0dfad; }
.gl-head { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: .86rem; }
.gl-head svg.lucide { width: 17px; height: 17px; color: #ad781e; }
.gl-left { margin-left: auto; font-size: .72rem; font-weight: 700; color: #1f5c4a; background: #e3f3e8; border-radius: 20px; padding: 2px 8px; }
.gl-left:empty { display: none; } .gl-left.full { background: #fde3dc; color: #8a2f1a; }
.gl-perk { font-weight: 700; color: #735414; margin: 4px 0; }
.gl-box .gl-btn { margin-top: 8px; }
.gl-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .gl-seats button { margin: 0; }
.gticket.entry { background: linear-gradient(135deg, #2a1b5c, #7b3fa0 55%, #f1b748); color: #fff; }
.gticket.entry .gt-head, .gticket.entry .gt-text, .gticket.entry .gt-valid { color: #fff; }
.gt-sub { font-size: .82rem; font-weight: 700; opacity: .9; margin: 2px 0 6px; }
.gticket.soon { filter: none; }
.ticket-row.entry svg.lucide { color: #7b3fa0; }
.danger-text { color: #a5321b; }
body.neti .gl-box { background: #1d2347; border-color: #3a3f78; color: #eef0ff; }
body.neti .gl-perk { color: #f1d38a; } body.neti .gl-head svg.lucide { color: #f1b748; }
.news-item.unread .gl-box b::after { content: none; }
#gt-cancel { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 8px; } #gt-cancel svg.lucide { width: 15px; height: 15px; }
/* night rules (07-10-2026): the rule cards and tips dark and readable at night */
body.neti .rule { background: #1d2347; } body.neti .rule p { color: #eef0ff; } body.neti .rule > svg.lucide { color: #f1b748; }
body.neti .rules-tip { background: #262c52; color: #f3e6c4; }
/* the introduction at night (07-10-2026): a dark icon panel with a gold icon, gold dots */
body.neti .errand-art.intro-art { background: linear-gradient(135deg, #1d2347, #2a1b5c); color: #f1b748; } body.neti .intro-dots span { background: #2f3766; } body.neti .intro-dots span.on { background: #f1b748; }
/* 07-10-2026: the score pill shows fireflies at night */
.score-pill .night-word { display: none; } body.neti .score-pill .night-word { display: inline; } body.neti .score-pill .day-word { display: none; }
/* the notifications box under the bell at night (07-10-2026) */
body.neti .push-box { background: #1d2347; color: #eef0ff; border-color: #2f3766; } body.neti .push-box svg.lucide { color: #f1b748; }
/* C16 (07-10-2026): Mijn avond, Jouw avond and the night passport */
.neti-sign-btn { position: relative; }
.neti-plan-n { position: absolute; left: -8px; top: -8px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #f1b748; color: #1b1036; font: 800 .75rem/22px 'Manrope', sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0b0e1f, 0 0 10px #f1b74899; }
.neti-avond-pill { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #3a3f78; background: #1d2347; color: #f1d38a; font-weight: 700; text-align: left; }
.neti-avond-pill span { flex: 1; } .neti-avond-pill svg.lucide { color: #f1b748; }
.avond-h3 { font-size: 1rem; margin: 14px 0 6px; }
.avond-list { display: grid; gap: 8px; margin: 12px 0 14px; }
.avond-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f3f8f5; }
.avond-row .route-n { flex-shrink: 0; }
.avond-row.cur { box-shadow: inset 0 0 0 2px #f1b748; } .avond-row.done { opacity: .6; }
.avond-name { flex: 1; text-align: left; background: none; padding: 2px 0; color: inherit; }
.avond-name b { display: block; } .avond-name small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.avond-taxi { color: #b3761a; font-weight: 700; }
.avond-done { display: grid; justify-items: center; gap: 4px; margin: 12px 0; padding: 12px; border-radius: 14px; background: #2a1b5c; color: #fff; }
.avond-done svg.lucide { width: 30px; height: 30px; color: #f1b748; } .avond-done span { font-size: .85rem; opacity: .9; }
.avond-next { color: #1f5c4a; font-weight: 700; } .avond-next svg.lucide { width: 16px; height: 16px; vertical-align: -3px; }
.night-stamp svg:not(.lucide) { width: 34px; height: 34px; }
.night-stamp.gold { border-color: #f1b748; }
body.neti .avond-row { background: #1d2347; color: #eef0ff; } body.neti .avond-name small { color: #a9b1dc; }
body.neti .avond-next { color: #7fe3c6; }
body.neti .passport-stat { background: #1d2347; } body.neti .passport-stat strong { color: #f1d38a; } body.neti .passport-stat span { color: #a9b1dc; }
body.neti .stamp { border-color: #2f3766; color: #6f78a8; }
body.neti .stamp.earned { border-color: #7fe3c6; background: #18213f; color: #eef0ff; }
body.neti .stamp.gold { border-color: #f1b748; background: #2a2350; color: #f3e6c4; }
body.neti .stamp.walker.earned svg.lucide { color: #f1b748; }
/* C17 (08-10-2026): the timeline of Mijn avond */
.avond-when { font-weight: 700; color: var(--ink); } .avond-notes { display: block; margin-top: 3px; }
.avond-warn { color: #b3461a; font-weight: 700; }
body.neti .avond-when { color: #f1d38a; } body.neti .avond-warn { color: #ff9a76; }
/* day button check (08-10-2026): on a phone the competition bar sits at the bottom, so it never covers the map buttons */
@media (max-width: 760px) { .comp-bar { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); } body:has(.comp-bar) { padding-bottom: 64px; } }
/* Samen op stap (C23b): the shared evening in Jouw avond, the code and who walks along */
.samen-card:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:#e3f3e8;color:#123f39;border-radius:14px;padding:12px 14px;margin:0 0 14px}.samen-card>svg.lucide{width:22px;height:22px;flex-shrink:0}.samen-card>div{flex:1;min-width:150px}.samen-card b{display:block}.samen-card small{display:block;font-size:.78rem;opacity:.85}.samen-card .secondary{width:auto;margin:0;min-height:38px;padding:8px 12px;font-size:.8rem}.samen-card .text-button{margin:0}
.samen-code{font-family:'Baloo 2',sans-serif;font-size:2.4rem;font-weight:800;letter-spacing:.18em;text-align:center;background:#fff4d9;border-radius:14px;padding:10px;margin:8px 0}
.samen-who{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.samen-name{display:inline-flex;align-items:center;gap:5px;background:#e3f3e8;border-radius:999px;padding:5px 11px;font-size:.82rem}.samen-name svg.lucide{width:14px;height:14px}
.check-row{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;margin:10px 0}.check-row input{margin-top:3px;width:auto}

body.neti dialog .samen-card{background:#1d2347;color:#eef0ff}body.neti dialog .samen-code{background:#1d2347;color:#f1b748}body.neti dialog .samen-name{background:#1d2347;color:#eef0ff}

/* N17 (08-10-2026): the search box, the tags of a business and "no result" in the night list */
.neti-search { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.neti-search svg { width: 18px; height: 18px; opacity: .7; flex: none; }
.neti-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 0; outline: none; }
.neti-search:focus-within { border-color: var(--neon-pink, #ff4f81); }
.neti-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.neti-tags span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: rgba(63, 214, 232, .14); color: #9feaf4; }
/* the same tags on a partner's sheet by day (18-10-2026: a hotel's facilities), in the colours of the partner box */
.partner-box .neti-tags { margin: 8px 0 2px; }
.partner-box .neti-tags span { background: #fff; color: #735414; border: 1px solid #f0dfad; }
.neti-search-none { font-size: .9rem; padding: 8px 10px; border-radius: 10px; background: rgba(241, 183, 72, .12); color: #f6d58e; margin: 0 0 8px; }
#neti-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
#neti-chips::-webkit-scrollbar { display: none; }
#neti-chips .neti-chip { flex: none; }
/* Phones (09-10-2026): the top bar has no room for the score pill, and at night the panel shows only the night list
   (so not #status-mini): the fireflies sit at the top of the night panel */
.neti-flies { display: none; }
@media (max-width: 760px) {
  .neti-flies { display: inline-flex; float: right; align-items: center; gap: 5px; margin: -2px 0 0 8px; border-radius: 30px; padding: 5px 10px; font-size: .78rem; font-weight: 700; background: #1d2347; color: #f1d38a; white-space: nowrap; }
  .neti-flies svg.lucide { width: 15px; height: 15px; color: #f1b748; }
}
/* Reserveren at night (reserve.js, 10-10-2026): the cards and the form in the dark window, as the other night sheets */
body.neti dialog .resv-card { background: #1b2045; border-color: #2f3766; color: #eef0ff; }
body.neti dialog .resv-card.s-confirmed { background: #15324a; border-color: #2f7a5a; }
body.neti dialog .resv-card.s-requested { border-color: #f1b748; }
body.neti dialog .resv-card .news-label { color: #f1d38a; }
body.neti dialog .resv-card b, body.neti dialog .resv-card .small-text { color: #eef0ff; }
body.neti dialog .resv-card .small-text.muted { color: #a9b1dc; }
body.neti dialog input, body.neti dialog select, body.neti #modal-body select, body.neti dialog textarea { background: #0b0e1f; color: #eef0ff; border-color: #2f3766; color-scheme: dark; }
body.neti dialog .resv-diet { color: #dfe6ff; }
body.neti dialog .resv-remember { color: #dfe6ff; } body.neti dialog .rv-progress span { background: rgba(255,255,255,.18); } body.neti dialog .rv-progress span.on { background: #f1b748; }
body.neti dialog .rv-step input[type=date] { background: #0b0e1f; color: #eef0ff; border-color: #2f3766; }
/* the upfront payment at night (phase 1b) */
body.neti dialog .resv-pay { background: #2a2346; border-color: #4a3f73; color: #eef0ff; }
body.neti dialog .resv-how { background: #0b0e1f; border-color: #4a3f73; color: #eef0ff; }
/* a reserved table in Jouw avond at night (phase 5.2) */
body.neti .avond-fixed { background: #15324a; color: #9fe0bf; }
/* the restaurant's rules at night */
body.neti dialog .resv-policy { background: #1b2045; border-color: #2f3766; color: #eef0ff; }

/* 10-10-2026: on a card every figure has the same size inside the frame (a map scale such as the wide palace 1.45 would push it over the frame) */
.wcard .wc-art .token { scale: 1.15; }

/* bronze (10-10-2026): the soft copy of the photo behind, the whole photo sharp on top (no cropping or blowing up) */
.wc-bg-soft { filter: blur(3.2cqw) brightness(.55) saturate(1.1); transform: scale(1.06); clip-path: inset(3% round 6.6% / 5.3%); }
.wc-bg-soft::after { display: none; }
.wc-bg-photo { background-size: contain; background-repeat: no-repeat; background-position: 50% 40%; }

/* The competition cards can be tapped to share them (11-10-2026) */
.cc-tap { all: unset; display: block; cursor: pointer; border-radius: 16px; } .cc-tap:focus-visible { outline: 3px solid #f1b748; outline-offset: 3px; }
.cc-big { display: flex; justify-content: center; } .cc-big > * { max-width: 340px; width: 100%; }

/* round 1 (11-10-2026): the changing code under the QR code */
.gt-code { margin: 6px 0 0; font: 800 1.05rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: #123f39; text-align: center; } .gt-code:empty { display: none; }
/* A paused competition (owner, 12-10-2026): a bar at the top for every player it concerns; the maker's calls for help. */
.comp-pause-bar { position: fixed; z-index: 1001; left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 8px); display: flex; gap: 10px; align-items: center; background: #a5321b; color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 24px #0005; font-size: .92rem; }
.comp-pause-bar b { display: block; }
.comp-help-list { border: 1px solid #f1c7bd; background: #fff6f3; border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.comp-help-row { padding: 6px 0; border-top: 1px solid #f6ded7; } .comp-help-row:first-of-type { border-top: 0; }
/* Friends competition (owner, 12-10-2026): "Zelf invullen", the treasure mode, the monuments to adjust; "Zo werkt het". */
.fr-own { margin: 2px 0 8px 26px; } .fr-own > summary { cursor: pointer; font-size: .85rem; color: var(--muted, #5d6f69); }
.fr-own input, .fr-own select { margin-top: 4px; } .fr-adj { margin: 6px 0; }
.tt-how { margin-top: 6px; } .tt-how > summary { cursor: pointer; font-size: .82rem; color: var(--muted, #5d6f69); }
/* "Word nachtpartner" (owner 18-10-2026): businesses apply for the night map (doe-mee.html), always in the night panel */
.neti-join { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 11px 13px; border-radius: 14px; text-decoration: none; color: #e9e6ff; font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, #2a1b5c, #3a1640); box-shadow: inset 0 0 0 1.5px #ff4fa366; }
.neti-join b { color: #ff8fc8; } .neti-join span { flex: 1; } .neti-join svg { flex: none; width: 18px; height: 18px; color: #ff6bb5; }
.neti-join:focus-visible { outline: 2px solid #2ee6c5; outline-offset: 2px; }

/* ---------- Shoppen & eten and Jouw dag (19-10-2026, parts/shop.js): the day businesses, in the day colours ---------- */
body:not(.shop) #shop-panel, body:not(.shop) #shop-top { display: none; }
body.shop .journey > :not(#shop-panel) { display: none; }
body.shop .map-top > div:not(#shop-top) { display: none; }
body.shop #map-legend, body.shop #mode-banner { display: none !important; }
body.neti .shop-toggle { display: none; }
/* the switch: one round button at the top of the map buttons, the shopping bag or the monument (19-10-2026) */
.round.shop-toggle { position: absolute; z-index: 500; right: 22px; top: 104px; background: #f1b748; border-color: #f1b748; color: #123f39; }
@media (max-width: 760px) { .round.shop-toggle { right: 13px; top: 80px; } }
.round.shop-toggle.on { background: #123f39; border-color: #123f39; color: #fff; }
.shop-sub { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .75rem; color: var(--muted); }
.shop-sub svg.lucide { width: 14px; height: 14px; color: #d49a2b; }
.shop-panel h2 { margin: 6px 0 8px; }
.shop-panel .eyebrow { color: #b07a12; }
.shop-search { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.shop-search svg { width: 18px; height: 18px; opacity: .6; flex: none; }
.shop-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 0; outline: none; }
.shop-search:focus-within { border-color: var(--ink); }
.shop-search-none { font-size: .9rem; padding: 8px 10px; border-radius: 10px; background: #fdf3dc; color: #7a5410; margin: 0 0 8px; }
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.shop-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 16px; background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: .76rem; font-weight: 700; }
.shop-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.shop-list { display: grid; gap: 6px; margin: 4px 0 12px; }
.shop-row { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); text-align: left; }
.shop-row.closed { opacity: .65; }
.shop-dot { --c: #d49a2b; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c); color: #fff; }
.shop-dot svg.lucide { width: 19px; height: 19px; }
.shop-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-row-text b { font-size: .9rem; }
.shop-row-text small { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-row-text .shop-acts { color: #9a6a0c; font-weight: 700; }
.shop-feat, .shop-pass { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font: 800 .62rem/1 'Manrope', sans-serif; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; }
.shop-feat { background: #f1b748; color: #123f39; }
.shop-pass { background: #e7f3ec; color: #123f39; }
.shop-pass .waki-pass { width: 22px; height: 14px; }
.shop-plan-n { position: absolute; z-index: 2; left: -8px; top: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #d49a2b; color: #fff; font: 800 11px/1 'Manrope', sans-serif; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.shop-btn { position: relative; }
.shop-btn .shop-plan-n { left: -12px; top: -14px; }
/* the icon of a business on the map (owner 19-10-2026: "icons, not like a ticket"): a round pin in its colour, its
   point on the place; the number of offers, mini Waki at a pass seller, the name only when zoomed in */
.shop-btn.waka-btn { transform: translate(-50%, -100%); }
.shop-pin { --c: #d49a2b; --ci: #fff; position: relative; display: block; width: 40px; height: 47px; }
.shop-pin-dot { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: var(--ci); border: 2.5px solid #fff; box-shadow: 0 4px 12px #0c3a2d40; }
.shop-pin-dot::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: var(--c); border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); border-radius: 0 0 3px 0; z-index: -1; }
.shop-pin-dot svg.lucide { width: 20px; height: 20px; stroke-width: 2.3; }
.shop-pin-dot svg.lucide-toucan, .shop-pin.big .shop-pin-dot svg.lucide.lucide-toucan, .shop-dot svg.lucide-toucan,
.shop-pin-dot svg.lucide-torarica, .shop-pin.big .shop-pin-dot svg.lucide.lucide-torarica, .shop-dot svg.lucide-torarica,
.shop-pin-dot svg.lucide-royal-torarica, .shop-pin.big .shop-pin-dot svg.lucide.lucide-royal-torarica, .shop-dot svg.lucide-royal-torarica,
.shop-pin-dot svg.lucide-eco-torarica, .shop-pin.big .shop-pin-dot svg.lucide.lucide-eco-torarica, .shop-dot svg.lucide-eco-torarica,
.shop-pin-dot svg.lucide-alexia, .shop-pin.big .shop-pin-dot svg.lucide.lucide-alexia, .shop-dot svg.lucide-alexia,
.shop-pin-dot svg.lucide-jasmine, .shop-pin.big .shop-pin-dot svg.lucide.lucide-jasmine, .shop-dot svg.lucide-jasmine,
.shop-pin-dot svg.lucide-premstage, .shop-pin.big .shop-pin-dot svg.lucide.lucide-premstage, .shop-dot svg.lucide-premstage,
.shop-pin-dot svg.lucide-ticcc, .shop-pin.big .shop-pin-dot svg.lucide.lucide-ticcc, .shop-dot svg.lucide-ticcc,
.shop-pin-dot svg.lucide-hgarden, .shop-pin.big .shop-pin-dot svg.lucide.lucide-hgarden, .shop-dot svg.lucide-hgarden,
.shop-pin-dot svg.lucide-garmel, .shop-pin.big .shop-pin-dot svg.lucide.lucide-garmel, .shop-dot svg.lucide-garmel { width: 100%; height: 100%; } /* Toucan Travel & Airport Service: their logo fills the whole circle (owner 29-10-2026) */
.waka-coin svg.lucide-toucan, .night-coin svg.lucide-toucan, .waka-coin svg.lucide-torarica, .night-coin svg.lucide-torarica, .waka-coin svg.lucide-royal-torarica, .night-coin svg.lucide-royal-torarica, .waka-coin svg.lucide-eco-torarica, .night-coin svg.lucide-eco-torarica, .waka-coin svg.lucide-alexia, .night-coin svg.lucide-alexia, .waka-coin svg.lucide-jasmine, .night-coin svg.lucide-jasmine, .waka-coin svg.lucide-premstage, .night-coin svg.lucide-premstage, .waka-coin svg.lucide-ticcc, .night-coin svg.lucide-ticcc, .waka-coin svg.lucide-hgarden, .night-coin svg.lucide-hgarden, .waka-coin svg.lucide-garmel, .night-coin svg.lucide-garmel { width: calc(100% - 4px); height: calc(100% - 4px); } /* inside the white inner ring of the coin */
.shop-pin .shop-n { position: absolute; right: -7px; top: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: #123f39; color: #fff; font: 800 10.5px/1 'Manrope', sans-serif; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.shop-pin .shop-waki { position: absolute; left: -14px; bottom: 2px; padding: 2px 3px; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px #0003; }
.shop-pin .shop-waki .waki-pass { width: 24px; height: 15px; display: block; }
.shop-pin-name { display: none; position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; border-radius: 8px; background: #fffffff0; color: #123f39; font: 800 11px/1.15 'Manrope', sans-serif; box-shadow: 0 2px 6px #0c3a2d2e; }
.shop-pin.named .shop-pin-name { display: block; }
.shop-pin.closed .shop-pin-dot { filter: saturate(.35); opacity: .8; }
.shop-pin.going .shop-pin-dot { box-shadow: 0 0 0 4px #f1b748, 0 4px 14px #0c3a2d55; }
.shop-pin.big { width: 54px; height: 62px; flex: none; }
.shop-pin.big .shop-pin-dot { width: 54px; height: 54px; }
.shop-pin.big .shop-pin-dot svg.lucide { width: 26px; height: 26px; }
.shop-pin.big .shop-pin-name { display: none; }
.shop-btn .shop-plan-n { left: -10px; top: -8px; }
.shop-cluster { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 16px; background: #fff; border: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--ink), 0 4px 14px #0003; cursor: pointer; }
.shop-cluster i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.shop-cluster b { color: var(--ink); font: 800 12px/1 'Manrope', sans-serif; margin-left: 4px; }
body.shop-enter .shop-btn .shop-pin { animation: shopPinIn .45s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes shopPinIn { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.shop-enter .shop-btn .shop-pin { animation: none; } }
.shop-going { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; margin: 8px 0; border-radius: 12px; background: #fdf3dc; color: #5c3f08; font-size: .82rem; }
.shop-going .text-button { padding: 0; }
.shop-dag-pill { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #ecd9a8; background: #fdf6e6; color: #5c3f08; font-weight: 700; text-align: left; }
.shop-dag-pill span { flex: 1; } .shop-dag-pill svg.lucide { color: #d49a2b; }
.shop-join { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 11px 13px; border-radius: 14px; text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 700; background: #fff; border: 1px dashed #c9dbd3; }
.shop-join span { flex: 1; } .shop-join svg { flex: none; width: 18px; height: 18px; color: #d49a2b; }
.shop-tags span { background: var(--mint); color: var(--ink); }
/* Waki with a pass in its beak: "here you can buy a Waka Quest pass" */
.waki-badge { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff7df, #e9f5ee); border: 1.5px solid #f1b748; color: #123f39; }
.waki-badge .waki-pass { flex: none; width: 58px; height: 37px; }
.waki-badge span { display: flex; flex-direction: column; gap: 2px; }
.waki-badge b { font-size: .88rem; } .waki-badge small { font-size: .74rem; color: #3f5f58; }
body.neti dialog .waki-badge { background: linear-gradient(135deg, #2a2350, #1b2045); border-color: #f1b748; color: #f3e6c4; }
body.neti dialog .waki-badge small { color: #c9cff0; }
/* Made in Suriname (owner 07-11-2026): the seal on a maker's pin and card, its photo, its products (parts/shop.js) */
.shop-pin .shop-mis { position: absolute; z-index: 3; right: -19px; top: -19px; width: 30px; height: 30px; filter: drop-shadow(0 1px 3px #0006); } /* in front of the pin and just outside its circle, so the pin and the seal are both seen whole (owner 08-11-2026) */
.shop-pin .shop-mis .mis-seal, .shop-mis-row .mis-seal { width: 100%; height: 100%; display: block; }
.shop-mis-row { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.shop-pin.big .shop-mis { display: none; }
.mis-badge { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 9px 12px; border-radius: 14px; background: #fff4d6; border: 1.5px solid #f1d58a; color: #3b2f0c; }
.mis-badge .mis-seal { flex: none; width: 46px; height: 46px; }
.mis-badge span { display: flex; flex-direction: column; gap: 2px; } .mis-badge b { font-size: .88rem; } .mis-badge small { font-size: .74rem; color: #6b5a2a; }
.mis-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 10px; padding: 9px 12px; border-radius: 14px; border: 1.5px solid #f1d58a; background: #fff4d6; color: #3b2f0c; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.mis-entry .mis-seal { width: 34px; height: 34px; flex: none; } .mis-entry span { flex: 1; } .mis-entry svg.lucide { color: #b8901f; }
/* a photo is framed as Beheer set it: a fixed box, the photo covers it from the chosen point, never stretched */
.mis-hero, .mis-ph, .mis-big { display: block; position: relative; overflow: hidden; background: #efe9dc; }
.mis-hero img, .mis-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mis-hero { height: 280px; border-radius: 14px; margin: 8px 0; } /* twice as high (owner 07-11-2026: show more of the photo) */
.mis-h { font-size: .95rem; margin: 12px 0 6px; }
.mis-products { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.mis-prod { flex: 0 0 104px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; } /* the photos always on one line, also when a name takes two lines (07-11-2026) */
.mis-prod .mis-ph { width: 104px; height: 104px; border-radius: 12px; }
.mis-prod b { display: block; font-size: .8rem; line-height: 1.25; margin-top: 5px; } .mis-prod small { color: var(--green, #1f6b45); font-weight: 800; font-size: .78rem; }
/* the big view of a product: the whole photo, never cut off; a tall photo is at most 60% of the screen high, centred */
.mis-big { border-radius: 14px; margin-bottom: 10px; }
.mis-big img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; margin: 0 auto; }
.mis-price { color: var(--green, #1f6b45); font-weight: 800; margin: -4px 0 6px; }
.mis-note { margin-top: 6px; }
body.neti dialog .mis-badge, body.neti .mis-entry { background: linear-gradient(135deg, #2a2350, #1b2045); border-color: #f1d58a; color: #f3e6c4; }
body.neti dialog .mis-badge small { color: #c9cff0; }
/* the one line in the bell by day */
.news-shop-line { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ecd9a8; background: #fdf6e6; color: #123f39; text-align: left; }
.news-shop-line > svg.lucide:first-child { color: #d49a2b; width: 22px; height: 22px; flex: none; }
.news-shop-line span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.news-shop-line small { color: #7a5410; font-weight: 700; font-size: .78rem; }
/* two text links side by side in a window (Jouw dag: the code and 'Leeg Jouw dag' ran together; handbook check 20-10-2026) */
dialog button.text-button + button.text-button { margin-left: 18px; } /* buttons only: the website · mail links (a) keep their dot spacing (bug scan 20-10-2026) */

/* ---------- A personal card as a gift (owner 24-10-2026, cards.js showGift) ----------
   A dark stage with gold rays; the card's two faces are images that turn all the way round under a finger. */
.g3d { position: relative; display: grid; place-items: center; padding: 26px 0 22px; margin: 4px 0 10px; border-radius: 20px; overflow: hidden; perspective: 1400px;
  background: radial-gradient(circle at 50% 42%, #23806f, #0b3b37 55%, #061a1a 100%); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.g3d.drag { cursor: grabbing; }
.g3-rays { position: absolute; left: 50%; top: 46%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffe08a1f 0 7deg, transparent 7deg 14deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 58%); mask: radial-gradient(circle, #000 12%, transparent 58%);
  animation: g3-spin 40s linear infinite; }
.g3d.intro .g3-rays { animation-duration: 14s; }
@keyframes g3-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.g3-card { position: relative; width: min(72vw, 300px); aspect-ratio: 63 / 88; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; }
.g3-face { position: absolute; inset: 0; border-radius: 4.8% / 3.4%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 44px #000a, 0 0 0 1px #ffe08a66, 0 0 46px #ffe08a33; transform: translateZ(.5px); }
.g3-back { transform: rotateY(180deg) translateZ(.5px); }
.g3-face img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.g3-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 28%, #ffffff8c 46%, #ffe08a66 52%, transparent 72%); background-size: 260% 100%; background-position: var(--sh, 50%) 0; }
.g3-spark { position: absolute; top: -8%; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: linear-gradient(#fff3c4, #d39a24); opacity: 0; pointer-events: none;
  transform: scale(var(--s)); animation: g3-fall 3.4s var(--d) ease-in 2 forwards; }
.g3-spark:nth-child(3n) { background: linear-gradient(#ffd76a, #b8801a); border-radius: 50%; width: 8px; height: 8px; }
@keyframes g3-fall { 0% { opacity: 0; transform: translateY(0) rotate(0) scale(var(--s)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px) rotate(540deg) scale(var(--s)); } }
.g3-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; }
.g3-hint svg { width: 16px; height: 16px; }
.g3-hello { text-align: center; margin: 6px 0 4px; }
.g3-thumb { width: 100%; aspect-ratio: 63 / 88; border-radius: 9px; overflow: hidden; box-shadow: 0 6px 16px #0004, 0 0 0 1px #ffe08a88; }
.g3-thumb img { width: 100%; height: 100%; display: block; }
/* waiting for the sign-in, and opening: a gold gift box that glows */
.g3d.wait { padding: 34px 0; cursor: default; }
.g3-box { position: relative; width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; color: #3a2506;
  background: linear-gradient(145deg, #fff3c4, #ffd76a 45%, #c98f1e); box-shadow: 0 10px 30px #000a, 0 0 40px #ffe08a66; animation: g3-pulse 1.8s ease-in-out infinite; }
.g3-box svg { width: 48px; height: 48px; }
.g3-box.open { animation-duration: .7s; }
@keyframes g3-pulse { 50% { transform: scale(1.07) rotate(-3deg); box-shadow: 0 10px 30px #000a, 0 0 70px #ffe08aaa; } }
@media (prefers-reduced-motion: reduce) { .g3-rays, .g3-box, .g3-spark { animation: none; } .g3-spark { display: none; } }
/* the song button asks for a tap when the phone did not let the music start by itself */
.g3-call { animation: g3-call 1.1s ease-in-out infinite; }
@keyframes g3-call { 50% { transform: scale(1.04); box-shadow: 0 0 0 6px #ffd76a55; } }
/* the closed gift box: tap to open (the lid flies off, a flash of light), then the card */
.g3d.wrapped { cursor: pointer; padding: 46px 0 40px; }
.g3-present { position: relative; width: 150px; height: 150px; animation: g3-wobble 2.2s ease-in-out infinite; }
.g3-body { position: absolute; left: 12px; right: 12px; bottom: 0; height: 96px; border-radius: 10px;
  background: linear-gradient(90deg, transparent 43%, #fff3c4 43% 57%, transparent 57%), linear-gradient(160deg, #23806f, #0b3b37);
  box-shadow: inset 0 0 0 3px #ffd76a, 0 14px 30px #000a; }
.g3-lid { position: absolute; left: 0; right: 0; top: 34px; height: 30px; border-radius: 8px; z-index: 2;
  background: linear-gradient(90deg, transparent 43%, #fff3c4 43% 57%, transparent 57%), linear-gradient(160deg, #2c9580, #0f4a44);
  box-shadow: inset 0 0 0 3px #ffd76a, 0 6px 12px #0007; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .55s; }
.g3-bow { position: absolute; left: 50%; top: 2px; width: 74px; height: 38px; transform: translateX(-50%); z-index: 3; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .55s;
  background: radial-gradient(ellipse 34% 48% at 28% 60%, #ffd76a 70%, transparent 72%), radial-gradient(ellipse 34% 48% at 72% 60%, #ffd76a 70%, transparent 72%), radial-gradient(circle at 50% 78%, #fff3c4 14%, transparent 16%); }
@keyframes g3-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg) scale(1.03); } 82% { transform: rotate(5deg) scale(1.03); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
.g3d.wrapped::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fffbe8, #ffe08a 30%, transparent 62%); opacity: 0; pointer-events: none; }
.g3d.opening .g3-present { animation: g3-shake .35s ease-in-out 2; }
.g3d.opening .g3-lid { transform: translate(-30px, -120px) rotate(-28deg); opacity: 0; transition-delay: .5s; }
.g3d.opening .g3-bow { transform: translate(-30%, -150px) rotate(-40deg); opacity: 0; transition-delay: .5s; }
.g3d.opening::after { animation: g3-flash .5s .6s ease-out forwards; }
@keyframes g3-shake { 25% { transform: rotate(-7deg) scale(1.05); } 75% { transform: rotate(7deg) scale(1.05); } }
@keyframes g3-flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .g3-present { animation: none; } }

/* Mijn reis (reis.js, owner 26-10-2026): the trip per day */
.reis-pill { margin-top: 0; }
.reis-days { display: grid; gap: 12px; margin: 12px 0 14px; }
.reis-day { padding: 10px 12px; border-radius: 14px; background: #f3f8f5; border: 1px solid #dfece5; }
.reis-day.today { box-shadow: inset 0 0 0 2px #f1b748; } .reis-day.past { opacity: .6; }
.reis-day-h { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.reis-day-h span { color: #5d6f69; font-size: .9rem; } .reis-day-h em { font-style: normal; font-size: .8rem; font-weight: 700; color: #8a5a00; background: #fdf0cf; border-radius: 99px; padding: 1px 8px; }
.reis-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #e3eee8; }
.reis-row:first-of-type { border-top: 0; }
.reis-row .route-n { flex-shrink: 0; }
.reis-row-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.reis-row-text small { color: #5d6f69; } .reis-row-text .secondary { margin: 4px 0 0; width: auto; justify-self: start; padding: 6px 12px; font-size: .9rem; }
.reis-edit { display: flex; gap: 4px; flex-shrink: 0; }
.reis-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } #modal-body .reis-pick select { width: auto; max-width: 100%; padding: 4px 8px; font-size: .9rem; margin-top: 0; }
.reis-status { font-weight: 700; color: #17352c; } .reis-status.s-confirmed, .reis-status.s-paid { color: #1d7a45; } .reis-status.s-requested, .reis-status.s-proposed { color: #8a5a00; }
.reis-pass { padding: 10px 12px; border-radius: 12px; border: 1px solid #ecd9a8; background: #fdf6e6; margin: 10px 0; }
.reis-day .text-button { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 4px; }
body.neti dialog .reis-day { background: #1d2347; border-color: #2f3766; color: #eef0ff; } body.neti dialog .reis-row { border-color: #2f3766; } body.neti dialog .reis-row-text small, body.neti dialog .reis-day-h span { color: #a9b1dc; } body.neti dialog .reis-status { color: #eef0ff; } body.neti dialog .reis-pass { background: #1b2045; border-color: #2f3766; color: #eef0ff; }
/* the call and e-mail buttons of a transport business or tour operator (owner 26-10-2026): a button, never an underlined link */
a.call-btn, a.call-btn:hover { text-decoration: none; }
/* A monument that does not fit as a figure at this zoom (owner 26-10-2026, practical.js spreadMarkers): a small dot with
   its route number, at its own place; only the dot can be tapped (zooms in), so it never covers a figure */
.marker-button .dot { display: none; }
.object-marker.as-dot .marker-button { pointer-events: none; filter: none; }
.object-marker.as-dot .marker-button .token, .object-marker.as-dot .marker-button:before { display: none; }
.object-marker.as-dot .marker-button .seq, .object-marker.as-dot .marker-button .dot { pointer-events: auto; cursor: pointer; }
.object-marker.as-dot .marker-button .seq { transform: translateX(-50%) scale(.85); box-shadow: 0 1px 3px #0002; }
.object-marker.as-dot .marker-button .dot { display: block; position: absolute; left: 50%; bottom: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #418a78; border: 2px solid #fff; box-shadow: 0 1px 3px #0003; }
.object-marker.as-dot .marker-button .seq + .dot { display: none; }
.map-more { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 800; display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; padding: 7px 13px; border-radius: 99px; border: 1px solid #dbe7e2; background: #fffdf8ee; color: #123f39; font-size: .82rem; font-weight: 700; line-height: 1.1; box-shadow: 0 3px 10px #0002; white-space: nowrap; }
.map-more svg.lucide { width: 15px; height: 15px; color: #418a78; }
body.neti .map-more, body.shop .map-more { display: none; }
/* shop and night map when busy (owner 26-10-2026): the businesses without room for their pin as a small dot, and their own pill */
.biz-dot { position: relative; display: block; width: 14px; height: 14px; min-width: 0; min-height: 0; padding: 0; margin: 0; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 1px 4px #0c3a2d55; transform: translate(-50%, -50%); cursor: pointer; }
.biz-dot::before { content: ''; position: absolute; inset: -12px; }
.biz-dot.nt { border-color: #0b0e1f; box-shadow: 0 0 0 1.5px var(--c), 0 0 9px var(--c); }
/* the businesses pill only in the shop and night map: it stays in the page after leaving them (bug v648, 27-10-2026) */
.map-more.biz-more { display: none; }
body.neti .map-more.biz-more, body.shop .map-more.biz-more { display: inline-flex; }
body.neti .map-more.biz-more { background: #0b0e1fee; border-color: #f1b74866; color: #fff; }
body.neti .map-more.biz-more svg.lucide { color: #f1b748; }
/* The day map in the colours of the chosen style (owner 27-10-2026): the land, the outline of Suriname, the place names,
   the zoom-in pill, the route and the footprints; water, parks and streets stay as they are, so the map reads the same in
   every style. Waka keeps the colours it always had. The night map stays neon in every style. basemap.js and
   practical.js read these from body. */
body { --map-land: #e9f2ed; --map-line: #2d6b57; --map-label: #466d5c; --map-label2: #66877a; --map-veil: #ffffff;
  --map-active: #d49a2b; --map-done: #257659; --map-planned: #418a78; --map-foot: #2c7b68; --map-foot-active: #ca8b1b; --map-pill: #123f39; }
body[data-wk-theme]:not([data-wk-theme="waka"]) { --map-pill: var(--map-line); }
body[data-wk-theme="pangi"] { --map-land: #eeebda; --map-line: #b40a2d; --map-label: #7a1020; --map-label2: #8f3a40; --map-veil: #fdf3dc;
  --map-active: #c98a12; --map-done: #b40a2d; --map-planned: #123f39; --map-foot: #b40a2d; --map-foot-active: #c98a12; }
body[data-wk-theme="sari"] { --map-land: #f3e2da; --map-line: #6b1030; --map-label: #6b1030; --map-label2: #8a4a5c; --map-veil: #fdecd6;
  --map-active: #c47a0c; --map-done: #6b1030; --map-planned: #0e6b73; --map-foot: #6b1030; --map-foot-active: #c47a0c; }
body[data-wk-theme="batik"] { --map-land: #ece1cc; --map-line: #5a3418; --map-label: #5a3418; --map-label2: #7a5a3e; --map-veil: #f3e6cc;
  --map-active: #a8761f; --map-done: #5a3418; --map-planned: #1f3a6b; --map-foot: #5a3418; --map-foot-active: #a8761f; }
body[data-wk-theme="lantaarn"] { --map-land: #f0e2d2; --map-line: #7d1414; --map-label: #7d1414; --map-label2: #8f4a3e; --map-veil: #f6e8cf;
  --map-active: #b0821d; --map-done: #7d1414; --map-planned: #2f7d6a; --map-foot: #7d1414; --map-foot-active: #b0821d; }
body[data-wk-theme="mand"] { --map-land: #e5e6dc; --map-line: #23313a; --map-label: #23313a; --map-label2: #4c5a60; --map-veil: #f1e4c6;
  --map-active: #b5632a; --map-done: #23313a; --map-planned: #3f6b3a; --map-foot: #23313a; --map-foot-active: #b5632a; }
body:not(.neti) #map, body:not(.neti) .map-section { background: var(--map-land); }
body .map-label { color: var(--map-label2); } body .map-label.major { color: var(--map-label); }
body .footprint span { color: var(--map-foot); } body .footprint.active span { color: var(--map-foot-active); }
body:not(.neti) .map-more:not(.biz-more) { color: var(--map-pill, var(--map-line)); } body:not(.neti) .map-more:not(.biz-more) svg.lucide { color: var(--map-planned); }
body .legend-line { border-top-color: var(--map-planned); } body .legend-dot { background: var(--map-active); }
/* cultural places on the day map (basemap.js, staging): a small round badge with the symbol of the faith or the kind,
   below the game's figures; the name next to it from zoom 16 */
.cult-pin { display: inline-flex; align-items: center; gap: 4px; padding: 0; margin: 0; background: none; border: 0; transform: translate(-11px, -11px); cursor: pointer; min-width: 0; min-height: 0; }
.cult-pin > b, .cult-pin > svg.lucide { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--t); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px #0c3a2d55; box-sizing: border-box; }
.cult-pin > b { font: 700 12px/1 'Noto Sans', 'Segoe UI Symbol', 'Nirmala UI', 'Microsoft YaHei', sans-serif; }
.cult-pin > svg.lucide { padding: 3px; stroke-width: 2.2; }
.cult-pin > span { font: 700 10.5px/1.15 'Manrope', sans-serif; color: var(--map-label, #466d5c); background: #fffffff0; padding: 2px 6px; border-radius: 7px; box-shadow: 0 1px 4px #0c3a2d26; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* "Nog geen code?" with Waki next to it (owner 28-10-2026) */
.pass-nocode { display: flex; align-items: flex-start; gap: 8px; }
.pass-nocode .waki-pass { flex: none; width: 40px; height: 25px; margin-top: 1px; }

/* Reviews at partner businesses (owner 12-11-2026, parts/reviews.js): the box on a card and the form. The theme colours
   come from waka-style.css (--wk-forest, --wk-gold); by night (body.neti) the box is dark like the rest of the card. */
.rv-box { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3d7bd; }
.rv-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 1rem; color: var(--wk-forest, #123f39); }
.rv-title svg { width: 18px; height: 18px; color: #e0a020; }
.rv-score { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.rv-score b { font-size: 1.15rem; color: var(--wk-forest, #123f39); }
.rv-stars { color: #e0a020; letter-spacing: 1px; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rv-tags span { padding: 3px 10px; border-radius: 99px; background: #eef6f2; color: #123f39; font-size: .85rem; }
.rv-item { padding: 8px 0; border-top: 1px dashed #e3d7bd; }
.rv-who { margin: 0; font-size: .9rem; font-weight: 700; }
.rv-text { margin: 4px 0 0; font-size: .95rem; }
.rv-reply { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--wk-gold, #f1b748); background: #fffaf0; font-size: .9rem; }
.rv-report { font-size: .8rem; padding: 4px 0; min-height: 0; }
.rv-all { display: block; font-weight: 700; padding: 8px 0; min-height: 0; }
.rv-date { font-size: .78rem; font-weight: 400; margin-left: 4px; }
.rv-all-list .rv-item:first-of-type { border-top: 0; }
#rv-all-more:not([hidden]) { width: 100%; margin-top: 8px; }
.rv-go { width: 100%; margin-top: 8px; }
.rv-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; text-align: center; }
.rv-wait svg { width: 34px; height: 34px; color: var(--wk-forest, #123f39); animation: rv-pulse 1.4s ease-in-out infinite; }
@keyframes rv-pulse { 50% { opacity: .35; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .rv-wait svg { animation: none; } }
.rv-form h2 { margin: 0 0 8px; font-size: 1.15rem; }
.rv-pick { display: flex; gap: 6px; margin: 4px 0 12px; }
.rv-star { flex: 1; min-height: 48px; font-size: 1.8rem; line-height: 1; border-radius: 12px; border: 1.5px solid #e3d7bd; background: #fff; color: #d9cfbd; cursor: pointer; }
.rv-star.on { color: #e0a020; border-color: #e0a020; background: #fff7df; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.rv-chip { min-height: 40px; padding: 6px 12px; border-radius: 99px; border: 1.5px solid #cfe0da; background: #fff; color: #123f39; font: inherit; font-size: .9rem; cursor: pointer; }
.rv-chip.on { background: var(--wk-forest, #123f39); border-color: var(--wk-forest, #123f39); color: #fff; }
.rv-form textarea, .rv-form select { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid #cfe0da; }
.rv-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-weight: 600; }
.rv-check input { width: 22px; height: 22px; }
body.neti dialog .rv-box { background: #1b2045; border-color: #3a3f6e; color: #f3e6c4; }
body.neti dialog .rv-title, body.neti dialog .rv-score b { color: #f3e6c4; }
body.neti dialog .rv-tags span { background: #2a2350; color: #f3e6c4; }
body.neti dialog .rv-reply { background: #2a2350; }