/* ============================================================
   Spectrum — opmaak
   Adepti-basis (navy/goud, Cinzel + Inter); kaartkaders met het
   accent van de academy: EW groen, Intel blauw, Drone oranje,
   VKS karmijn. Een game, dus altijd donker.
   ============================================================ */

:root {
  --navy-deep: #0a0f1c; --navy: #101728; --steel-dark: #141c30; --steel-light: #1f2a45;
  --gold: #d4af6a; --gold-bright: #f0d9a8; --gold-deep: #96702f;
  --cream: #f2e9d8; --muted: #8a93a8; --line: rgba(212,175,106,.22);
  --ok: #3ecf8e; --bad: #e0605f; --red: #d9465a;
  --acc: var(--gold);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; color: var(--cream); font: 400 15px/1.5 Inter, system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(62,207,142,.07), transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(212,175,106,.09), transparent 55%),
    var(--navy-deep);
  background-attachment: fixed;
}
a { color: inherit; }
body.met-veld {
  background:
    linear-gradient(180deg, rgba(7,11,20,.72) 0%, rgba(7,11,20,.5) 35%, rgba(7,11,20,.62) 70%, rgba(7,11,20,.86) 100%),
    url("../img/achtergrond.jpg") center 30% / cover no-repeat,
    var(--navy-deep);
  background-attachment: fixed;
}
/* hidden moet altijd winnen, ook van .btn { display: inline-flex } */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- kop ---------- */
.bar {
  display: flex; align-items: center; gap: 18px; padding: 14px 24px; max-width: 1240px; margin: 0 auto;
}
.brand { font: 600 18px/1 Cinzel, serif; letter-spacing: .12em; text-decoration: none; color: var(--gold-bright); display: flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--gold); font-size: 12px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { text-decoration: none; color: var(--muted); padding: 7px 12px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.nav a:hover { color: var(--cream); }
.nav a.on { color: var(--gold-bright); background: rgba(212,175,106,.12); }
.lang { margin-left: auto; }

.seg { display: inline-flex; border: 1px solid rgba(212,175,106,.35); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer; }
.seg button.on { background: rgba(212,175,106,.16); color: var(--gold-bright); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep);
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--gold-bright); border: 1px solid rgba(212,175,106,.45); }
.btn.ghost:hover { background: rgba(212,175,106,.1); }
.btn.small { padding: 8px 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn small { font-weight: 500; font-size: 11px; opacity: .8; }

.foot-note { text-align: center; color: var(--muted); font-size: 12px; padding: 40px 16px 28px; }
.foot-note a { color: var(--gold); text-decoration: none; }

/* ---------- start ---------- */
.home { max-width: 1240px; margin: 0 auto; padding: 24px 24px 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; min-height: calc(100vh - 170px); }
.hero .kicker { font: 600 11px/1 Inter; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero h1 {
  font: 700 clamp(48px, 8vw, 92px)/1 Cinzel, serif; letter-spacing: .06em; margin: 14px 0 12px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-size: 18px; color: #cfd4df; max-width: 440px; margin: 0 0 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stats { display: flex; gap: 28px; margin-top: 30px; }
.stats div { color: var(--muted); font-size: 14px; }
.stats b { font: 600 26px/1 Cinzel, serif; color: var(--gold-bright); }
.stats span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.fan { position: relative; height: 520px; overflow-x: clip; }  /* de waaier mag op een smal scherm niet buiten beeld steken */
.fan-card { position: absolute; left: 50%; top: 40px; }
.fan-card .card-wrap { transition: transform .4s; }
.fan-card.f0 { transform: translateX(-95%) rotate(-10deg) translateY(30px); }
.fan-card.f1 { transform: translateX(-50%); z-index: 2; }
.fan-card.f2 { transform: translateX(-5%) rotate(10deg) translateY(30px); }
.fan-card:hover { z-index: 3; }

/* ---------- codex ---------- */
.codex, .detail, .train { max-width: 1240px; margin: 0 auto; padding: 8px 24px 0; }
.codex-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 16px; }
.search {
  flex: 1; min-width: 200px; max-width: 360px; background: rgba(255,255,255,.04); color: var(--cream);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px;
}
.meters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.meter {
  flex: 1 1 180px; display: grid; gap: 6px; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.meter.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.meter.all { flex: 0 0 auto; align-content: center; padding: 10px 20px; --acc: var(--gold); }
.m-name { font-weight: 600; font-size: 13px; color: var(--cream); }
.m-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.m-num { font-size: 11.5px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 18px 14px; justify-items: center; }
.mini { display: block; width: 186px; height: 273px; text-decoration: none; transition: transform .2s; }
.mini:hover { transform: translateY(-4px); }
.mini .card-wrap { transform: scale(.62); transform-origin: top left; pointer-events: none; }
.leeg { color: var(--muted); grid-column: 1 / -1; }

/* ---------- detail ---------- */
.back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; margin: 4px 0 16px; }
.back-link:hover { color: var(--cream); }
.detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
.stage { perspective: 1400px; display: flex; flex-direction: column; align-items: center; }
.stage-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 300px; margin-top: 18px; }
.dossier { background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.d-kicker { font: 600 11px/1 Inter; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.dossier h2 { font: 600 28px/1.15 Cinzel, serif; margin: 10px 0 4px; color: var(--gold-bright); }
.d-sub { color: var(--muted); margin-bottom: 14px; }
.d-sum { font-size: 15px; line-height: 1.6; }
.dossier h4 { font: 600 12px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 22px 0 8px; }
.dossier dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.dossier dt { color: var(--muted); }
.dossier dd { margin: 0; }
.credit { font-size: 12px; color: var(--muted); margin-top: 20px; }
.credit a { color: var(--muted); }
.read { margin-top: 18px; }

/* ---------- training ---------- */
.train { display: flex; flex-direction: column; align-items: center; }
.train .intro { color: var(--muted); max-width: 560px; text-align: center; margin: 14px 0 22px; font-size: 14px; }

/* ============================================================
   DE KAART
   ============================================================ */
.card-wrap {
  --acc-dim: color-mix(in srgb, var(--acc) 35%, transparent);
  --acc-bg: color-mix(in srgb, var(--acc) 12%, transparent);
  width: 300px; height: 440px; position: relative; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1); cursor: pointer; flex: none;
}
.card-wrap.flipped { transform: rotateY(180deg); cursor: default; }
.tilt { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .15s ease-out; }
.face {
  position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; padding: 3px;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold) 30%, var(--gold-deep) 60%, var(--gold) 85%, var(--gold-bright));
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6), 0 0 40px -10px var(--acc-dim);
}
/* Bij het kantelen draait de helft van de kaart achter het vlak van de wrapper; die zou dan
   de muis opvangen en de uitleg bij termen blokkeren. Alleen het zichtbare vlak is raakbaar. */
.card-wrap { pointer-events: none; }
.card-wrap .front { pointer-events: auto; }
.back { transform: rotateY(180deg); pointer-events: none; }
.card-wrap.flipped .back { pointer-events: auto; }
.card-wrap.flipped .front { pointer-events: none; }
.mini .card-wrap .face, .handkaart .card-wrap .face, .mini-knop .card-wrap .face { pointer-events: none; }
.handkaart .card-wrap .front .kw { pointer-events: auto; }
.inner {
  position: relative; height: 100%; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, var(--acc-bg), transparent 60%),
              linear-gradient(180deg, var(--steel-light), var(--steel-dark) 45%, var(--navy));
}
.inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.card-wrap.tilting .inner::after { opacity: 1; }

.top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; flex: none; }
.cost { flex: none; width: 42px; height: 42px; position: relative; display: grid; place-items: center; }
.cost svg { position: absolute; inset: 0; }
.cost b { position: relative; font: 700 21px/1 Cinzel, serif; color: var(--navy-deep); }
.cost.hp b { color: #fff; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.title { min-width: 0; flex: 1; }
.title h2 { margin: 0; font: 700 19px/1.05 Cinzel, serif; letter-spacing: .05em; color: var(--cream); text-shadow: 0 1px 0 rgba(0,0,0,.6); overflow-wrap: anywhere; }
.title h2.long { font-size: 16px; }
.title h2.xlong { font-size: 14px; letter-spacing: .03em; }
.title h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title .sub { font: 500 10.5px/1.3 Inter; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* typelabel rechtsboven op de afbeelding: de kop houdt zo de volle breedte voor de naam */
.type {
  position: absolute; top: 7px; right: 8px; z-index: 1;
  font: 600 9px/1 Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--acc);
  border: 1px solid var(--acc-dim); background: rgba(5,10,16,.82); padding: 5px 7px 4px; border-radius: 999px;
}
.type-red { color: #ff9c9b; border-color: rgba(224,96,95,.5); }
.type-nieuw { color: var(--cream); border-style: dashed; border-color: rgba(242,233,216,.45); }
.text .noot-nieuw { font-size: 12.5px; color: var(--muted); font-style: italic; }

.art {
  position: relative; margin: 0 12px; height: 150px; flex: none; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(212,175,106,.45); box-shadow: inset 0 0 30px rgba(0,0,0,.7);
  background: radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--acc) 16%, #07100e), #070b14 70%);
}
.art svg { display: block; width: 100%; height: 100%; }
.art-photo { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.55) contrast(1.08) brightness(.85); }
.art-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,11,20,.85)), color-mix(in srgb, var(--acc) 14%, transparent); mix-blend-mode: normal; }
.sweep { transform-origin: 50px 150px; animation: sweep 4.5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.gate { animation: pulse 1.6s ease-in-out infinite; }
.blip { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.dipole { animation: drift 6s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-4px, 3px); } }
.glyph { filter: drop-shadow(0 0 6px currentColor); }
.glyph.sil { filter: drop-shadow(0 0 10px rgba(217,70,90,.6)); }
.academy {
  position: absolute; left: 8px; bottom: 7px; font: 600 9px/1 Inter; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); background: rgba(5,10,16,.82); padding: 4px 6px; border-radius: 4px; border: 1px solid var(--acc-dim);
}

.text { padding: 10px 15px 0; font-size: 12.8px; line-height: 1.42; flex: 1; min-height: 0; overflow: hidden; }
.text.dense { font-size: 12px; line-height: 1.36; }
.text.denser { font-size: 11.3px; line-height: 1.32; }
.text p { margin: 0 0 6px; }
.text .role { color: #cfd4df; font-style: italic; }
.plus { color: #cfd4df; }
.kw { color: var(--gold-bright); font-weight: 600; border-bottom: 1px dotted var(--gold-deep); cursor: help; }
.num { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--acc); font-weight: 500; }
.num.up { color: var(--gold-bright); }
.num.down { color: #9aa1b2; }
.weak { font-size: 11.3px; color: var(--muted); }
.weak b { color: #e69a6b; font-weight: 600; }
.traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip {
  font: 600 9.5px/1 Inter; letter-spacing: .06em; padding: 4px 6px; border-radius: 4px; border-bottom: 0;
  background: rgba(255,255,255,.06); color: #e6d2b0;
}
.tags { display: flex; gap: 4px; }
.tags .kw { font: 600 9.5px/1 Inter; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; background: var(--acc-bg); border: 0; color: var(--acc); }
.flavor { margin: 2px 15px 0; padding-top: 6px; border-top: 1px solid rgba(212,175,106,.2); font: italic 400 10.8px/1.4 Inter; color: #aeb5c6; flex: none; }

.foot { padding: 8px 12px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.fcs { display: flex; align-items: center; gap: 2px; font: 600 7.5px/1 Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.fcs span { padding: 4px 4px; border-radius: 3px; background: rgba(255,255,255,.05); color: var(--muted); }
.fcs span.from { background: rgba(224,96,95,.18); color: #ff9c9b; }
.fcs span.to, .fcs span.hit { background: var(--acc-bg); color: var(--acc); }
.fcs .arrow { display: inline-flex; font-style: normal; margin: 0 -1px; color: var(--acc); order: 0; }
.fcs.red span.start { background: rgba(240,217,168,.14); color: var(--gold-bright); }
.fcs.red span.skip { opacity: .45; }
.fcs.red span.eng { background: rgba(224,96,95,.2); color: #ff9c9b; }
.pips { display: flex; gap: 4px; align-items: center; }
.pip { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gold-deep); }
.pip.on { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 6px var(--gold); }
.pips.red .pip { width: 7px; height: 7px; border-color: #7a1f2c; }
.pips.red .pip.on { background: linear-gradient(135deg, #ffb3b3, #d9465a); box-shadow: 0 0 6px rgba(217,70,90,.8); }

.stamp {
  position: absolute; top: 72px; right: 18px; transform: rotate(-9deg); pointer-events: none;
  font: 700 13px/1 Cinzel, serif; letter-spacing: .14em; color: var(--bad); border: 2px solid var(--bad);
  padding: 5px 8px 4px; border-radius: 4px; opacity: 0; background: rgba(10,15,28,.6);
}
.stamp.ok { color: var(--ok); border-color: var(--ok); opacity: .9; }
.untrained .stamp { opacity: .9; }
.untrained .art { filter: grayscale(.85) brightness(.7); }
.untrained .face { background: linear-gradient(145deg, #7b8194, #4a5064 50%, #7b8194); }
.untrained .title h2 { color: #b9bfcc; }
.mastered .face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 50px -6px rgba(240,217,168,.55); }

/* nog niet verdiend: wel leesbaar, maar gedimd met een sluier */
.lock-veil { display: none; }
.locked .lock-veil {
  display: flex; justify-content: center; align-items: flex-start; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,15,28,.15), rgba(10,15,28,.5));
}
/* label midden op de afbeelding, zodat het nooit over de kaarttekst valt */
.locked .lock-veil span {
  margin-top: 118px; font: 600 10px/1 Inter; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright);
  background: rgba(10,15,28,.85); border: 1px solid var(--gold-deep); padding: 6px 10px; border-radius: 999px;
}
.locked .face { filter: saturate(.5); }

/* rode kaarten: karmijn kader */
.is-red .face { background: linear-gradient(145deg, #f3b8b8, #d9465a 32%, #6e1b27 62%, #b83a4b 86%, #f3b8b8); }
.is-red .inner { background: radial-gradient(120% 60% at 50% 0%, rgba(217,70,90,.14), transparent 60%), linear-gradient(180deg, #2a1d2c, #18121f 45%, #110d18); }
.is-red .art { border-color: rgba(217,70,90,.5); }

/* ---------- achterkant: kennispoort ---------- */
.gate-inner { padding: 16px 16px 14px; }
.gate-kicker { font: 600 10px/1 Inter; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.is-red .gate-kicker { color: #ff9c9b; }
.gate-inner h3 { font: 600 17px/1.2 Cinzel, serif; margin: 7px 0 4px; color: var(--gold-bright); }
.src { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.q { font-size: 13px; line-height: 1.4; font-weight: 500; margin-bottom: 9px; }
.opts { display: flex; flex-direction: column; gap: 5px; }
.opt {
  text-align: left; font-size: 11.5px; line-height: 1.35; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,106,.25); border-radius: 8px; padding: 6px 8px;
}
.opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(212,175,106,.08); }
.opt:disabled { cursor: default; }
.opt[hidden] { display: none; }
.opt.right { border-color: var(--ok); background: rgba(62,207,142,.14); }
.opt.wrong { border-color: var(--bad); background: rgba(224,96,95,.14); }
.fb { font-size: 11px; line-height: 1.4; margin-top: 8px; color: #cfd4df; overflow: auto; min-height: 0; }
.fb b { color: var(--gold-bright); }
.back-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; }
.back-foot a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc-dim); }
.linkbtn { background: none; border: 0; color: var(--muted); font-size: 11.5px; cursor: pointer; padding: 0; }
.linkbtn:hover { color: var(--cream); }

/* ---------- uitleg bij termen ---------- */
#tip {
  position: fixed; z-index: 50; width: 230px; padding: 9px 11px; border-radius: 8px; pointer-events: none;
  background: #060a14; border: 1px solid var(--gold-deep); color: var(--cream);
  font: 400 11.5px/1.45 Inter; box-shadow: 0 12px 24px rgba(0,0,0,.65);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; left: 0; top: 0;
}
#tip.show { opacity: 1; transform: none; }
#tip::after {
  content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px;
  background: #060a14; border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep); transform: rotate(45deg);
}
#tip.below::after { bottom: auto; top: -5px; transform: rotate(225deg); }

/* ---------- smal scherm ---------- */
@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; min-height: 0; }
  .fan { height: 480px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .stage { order: 0; }
}
@media (max-width: 560px) {
  .bar { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .nav { margin-left: 0; flex-wrap: wrap; gap: 2px; }
  .nav a { padding: 6px 9px; font-size: 13.5px; }
  .codex, .detail, .train, .home, .prestaties { padding-left: 16px; padding-right: 16px; }
  .fan { height: 420px; transform: scale(.82); transform-origin: top center; }
  .fan-card.f0 { transform: translateX(-80%) rotate(-10deg) translateY(30px); }
  .fan-card.f2 { transform: translateX(-20%) rotate(10deg) translateY(30px); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mini { width: 150px; height: 220px; }
  .mini .card-wrap { transform: scale(.5); }
  .dossier { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sweep, .gate, .blip, .dipole { animation: none; }
  .card-wrap { transition: none; }
}

/* ============================================================
   RUN: intro, kaart, gevecht, beloning, intel, debrief, einde
   ============================================================ */
.run-intro, .run, .gevecht, .beloning, .intel, .debrief, .einde { max-width: 1240px; margin: 0 auto; padding: 8px 24px 0; }
.run-intro, .einde { max-width: 720px; text-align: center; padding-top: 40px; }
.run-intro h1, .einde h1 { font: 700 clamp(36px, 6vw, 60px)/1.05 Cinzel, serif; color: var(--gold-bright); margin: 10px 0 14px; }
.kicker { font: 600 11px/1 Inter; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 17px; color: #cfd4df; }
.spelregels { text-align: left; max-width: 560px; margin: 22px auto 28px; padding-left: 18px; color: #cfd4df; font-size: 14.5px; line-height: 1.6; }
.spelregels b { color: var(--gold-bright); font-weight: 600; }
.hervat { margin: 22px auto 8px; padding: 16px 20px; border: 1px solid var(--gold-deep); border-radius: 14px; background: rgba(212,175,106,.07); }
.hervat p { color: #cfd4df; margin: 6px 0 12px; }
.nieuwe-run { font: 600 18px/1.2 Cinzel, serif; color: var(--cream); margin: 26px 0 12px; }
.niveaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; text-align: left; margin-top: 8px; }
.niveaus .keuze small { color: var(--gold); font-size: 12px; }
.niveaus .niveau-expert { border-color: rgba(224,96,95,.45); }
.niveaus .niveau-expert b { color: #ff9c9b; }
.rb-niveau { font: 600 10px/1 Inter; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(212,175,106,.12); color: var(--gold); }
.rb-niveau.niveau-expert { background: rgba(224,96,95,.15); color: #ff9c9b; }
.seg-label { align-self: center; padding: 0 10px 0 13px; font-size: 12px; color: var(--muted); }
.einde .stats { justify-content: center; margin: 26px 0; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.run-hint { color: var(--muted); font-size: 14px; max-width: 640px; }

.runbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.rb-akte { font: 600 15px/1 Cinzel, serif; color: var(--gold-bright); letter-spacing: .06em; }
.rb-hp, .sp-hp { position: relative; width: 180px; height: 16px; border-radius: 8px; background: rgba(224,96,95,.15); overflow: hidden; border: 1px solid rgba(224,96,95,.35); }
.rb-hp i, .sp-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b93a48, #e0605f); }
.rb-hp b, .sp-hp b { position: relative; display: block; text-align: center; font: 600 11px/16px Inter; color: #fff; text-shadow: 0 1px 2px #000; }
.rb-deck { background: rgba(212,175,106,.1); border: 1px solid var(--line); color: var(--gold-bright); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.runbar .linkbtn { margin-left: auto; }

/* kaart met knooppunten */
.map { position: relative; max-width: 560px; margin: 16px auto 8px; }
.map-lijnen { position: absolute; inset: 0; overflow: visible; }
.map-lijnen line { stroke: rgba(212,175,106,.22); stroke-width: 2; stroke-dasharray: 4 6; }
.map-lijnen line.actief { stroke: var(--gold); stroke-dasharray: none; }
.knoop {
  position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  display: grid; place-items: center; cursor: default; color: var(--muted);
  background: var(--steel-dark); border: 2px solid rgba(212,175,106,.3);
}
.knoop svg { width: 26px; height: 26px; }
.knoop.k-elite, .knoop.k-baas { color: #ff9c9b; border-color: rgba(224,96,95,.45); }
.knoop.k-intel { color: #7fb4ff; }
.knoop.k-debrief { color: var(--ok); }
.knoop.bezocht { background: rgba(212,175,106,.18); border-color: var(--gold); color: var(--gold-bright); }
.knoop.kies { cursor: pointer; border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(240,217,168,.12), 0 0 22px rgba(240,217,168,.35); animation: roep 1.8s ease-in-out infinite; }
.knoop.kies:hover { transform: scale(1.1); }
.knoop.k-baas { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@keyframes roep { 50% { box-shadow: 0 0 0 7px rgba(240,217,168,.06), 0 0 30px rgba(240,217,168,.5); } }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; color: var(--muted); font-size: 12px; margin-top: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda svg { width: 16px; height: 16px; color: var(--gold); }

/* gevecht */
.gevecht { padding-bottom: 20px; }
.g-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.g-kop h2 { font: 600 22px/1.1 Cinzel, serif; color: var(--gold-bright); margin: 0; }
.g-type { font: 600 10px/1 Inter; letter-spacing: .18em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(212,175,106,.12); color: var(--gold); }
.g-type.k-elite, .g-type.k-baas, .g-type.k-doel { background: rgba(224,96,95,.15); color: #ff9c9b; }
.g-beurt { margin-left: auto; color: var(--muted); font-size: 13px; }
.g-beurt b { color: #ff9c9b; font-weight: 600; }
.veld {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 110%, rgba(217,70,90,.14), transparent 60%),
              repeating-radial-gradient(circle at 50% 120%, rgba(217,70,90,.07) 0 1px, transparent 1px 70px), rgba(0,0,0,.18);
  border: 1px solid rgba(217,70,90,.2); min-height: 222px; align-items: flex-start;
}
.vijand {
  position: relative; width: 160px; padding: 6px 6px 8px; border-radius: 12px; text-align: left; cursor: default;
  background: linear-gradient(180deg, #2a1d2c, #151019); border: 1px solid rgba(217,70,90,.35);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.8); transition: transform .15s, box-shadow .15s, opacity .15s;
}
.vijand.doelbaar { cursor: crosshair; border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(240,217,168,.35), 0 0 24px rgba(240,217,168,.35); }
.vijand.doelbaar:hover { transform: translateY(-3px); }
.vijand.dim { opacity: .4; }
.v-kunst { height: 70px; border-radius: 8px; overflow: hidden; position: relative; background: #0a0710; }
.v-kunst svg, .v-kunst img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-kunst .art-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7,11,20,.8)); }
.v-naam { font: 600 12.5px/1.2 Cinzel, serif; color: var(--cream); margin: 6px 2px 4px; min-height: 30px; }
.v-hp { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.v-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a1f2c, #d9465a); transition: width .4s; }
.v-hp b { position: relative; display: block; text-align: center; font: 600 9.5px/12px Inter; color: #fff; }
.ketting { display: flex; align-items: center; gap: 3px; margin-top: 7px; }
.ketting i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); }
.ketting i.voorbij { background: rgba(240,217,168,.35); }
.ketting i.nu { background: var(--gold-bright); box-shadow: 0 0 6px var(--gold); }
.ketting i.eng.nu { background: var(--bad); }
.ketting span { font: 600 9px/1 Inter; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); margin-left: 4px; min-width: 38px; }
.v-int { margin-top: 6px; min-height: 18px; }
.int { font: 600 10px/1 Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-radius: 4px; background: rgba(255,255,255,.05); display: inline-block; }
.int.eng { color: #fff; background: #b93a48; animation: pulse 1.2s ease-in-out infinite; }
.int.sensor { color: #7fb4ff; }
.int.sensor.eng { color: #fff; }
.int.jam { color: #e69a6b; }
.int.stil { color: var(--ok); }
.v-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.v-chips .chip { font-size: 8.5px; padding: 3px 4px; letter-spacing: .02em; }
.chip.ok { background: rgba(62,207,142,.18); color: var(--ok); }
.chip.pid { background: rgba(230,154,107,.15); color: #e69a6b; border-bottom: 0; }
.zweef { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); font: 700 22px/1 Cinzel, serif; pointer-events: none; animation: zweef 1.1s ease-out forwards; text-shadow: 0 2px 6px #000; }
.zweef.rood { color: #ff7a79; }
@keyframes zweef { to { transform: translate(-50%, -40px); opacity: 0; } }

.g-log { min-height: 57px; margin: 4px auto; max-width: 720px; font-size: 12.5px; color: var(--muted); text-align: center; }
.g-log div { padding: 1px 0; }
.g-log .nieuw { color: var(--cream); }

.speler { border-top: 1px solid var(--line); padding-top: 10px; }
.sp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; }
.sp-schild { font: 600 13px/1 Inter; color: #7fb4ff; background: rgba(91,157,255,.12); border: 1px solid rgba(91,157,255,.35); padding: 5px 9px; border-radius: 999px; }
.sp-energie { display: flex; align-items: center; gap: 4px; }
.sp-energie i { width: 16px; height: 16px; transform: rotate(45deg); border: 1.5px solid var(--gold-deep); }
.sp-energie i.vol { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 8px var(--gold); }
.sp-energie b { font: 700 16px/1 Cinzel, serif; color: var(--gold-bright); margin-left: 6px; }
.sp-krachten { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-krachten .chip { cursor: help; border-bottom: 0; }
.sp-krachten .chip.rol { background: rgba(91,157,255,.14); color: #a8c8ff; }

.hand { display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-wrap: wrap; padding: 12px 0 2px; min-height: 250px; }
.handkaart { position: relative; width: 168px; height: 246px; padding: 0; background: none; border: 0; cursor: pointer; transition: transform .18s; text-align: left; flex: none; }
.mini-knop, .keus .stage { text-align: left; }
.handkaart .card-wrap { transform: scale(.56); transform-origin: top left; pointer-events: none; }
.handkaart:hover { transform: translateY(-10px); z-index: 2; }
.handkaart.gekozen { transform: translateY(-18px); z-index: 3; }
.handkaart.gekozen .face { box-shadow: 0 0 0 4px var(--gold-bright), 0 0 40px rgba(240,217,168,.6); }
.handkaart.kan-niet { cursor: not-allowed; filter: grayscale(.6) brightness(.7); }
.handkaart.kan-niet:hover { transform: none; }
.handkaart .prijs { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #06140e; font: 700 14px/26px Cinzel, serif; text-align: center; box-shadow: 0 0 10px var(--ok); }
.handkaart.status { cursor: default; }
.status-kaart {
  width: 168px; height: 246px; border-radius: 12px; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; text-align: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #1b1420 0 8px, #221826 8px 16px); border: 2px dashed rgba(224,96,95,.5); color: #ff9c9b;
}
.status-kaart b { font: 700 16px/1.1 Cinzel, serif; }
.status-kaart span { color: var(--muted); font-size: 11px; }
.status-kaart small { color: #cfd4df; font-size: 11px; line-height: 1.4; }
.sp-knoppen { display: flex; justify-content: center; align-items: center; gap: 12px; }
@media (min-width: 1100px) {
  .speler { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
  .speler .sp-stats { grid-column: 1 / -1; }
  .speler .hand { grid-column: 1; }
  .speler .sp-knoppen { grid-column: 2; flex-direction: column; align-self: center; }
}
/* lage schermen (laptop met schaalinstelling): handkaarten iets kleiner */
@media (max-height: 700px) and (min-width: 861px) {
  .hand { min-height: 226px; }
  .handkaart { width: 150px; height: 220px; }
  .handkaart .card-wrap { transform: scale(.5); }
  .bar { padding-top: 8px; padding-bottom: 8px; }
}
.stapel { color: var(--muted); font-size: 13px; }

.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(5,8,15,.78); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.briefing, .deck-over { max-width: 560px; width: 100%; background: linear-gradient(180deg, var(--steel-light), var(--navy)); border: 1px solid var(--gold-deep); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.deck-over { max-width: 980px; max-height: 88vh; overflow: auto; }
.briefing { max-height: 92vh; overflow: auto; }
.briefing h2 { font: 600 26px/1.15 Cinzel, serif; color: var(--gold-bright); margin: 8px 0 10px; }
.briefing p { color: #cfd4df; }
.b-contact { font-size: 14px; }
.b-contact b { color: var(--gold); font-weight: 600; }
.b-refs { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 18px; font-size: 13px; }
.b-refs a { color: var(--gold); }
/* begin van een nieuwe akte, boven de kaart */
.akte-intro { max-width: 720px; margin: 8px auto 18px; padding: 18px 22px; text-align: center; border: 1px solid var(--gold-deep); border-radius: 14px; background: linear-gradient(180deg, rgba(212,175,106,.08), transparent); }
.akte-intro h2 { font: 700 clamp(26px, 4vw, 38px)/1.1 Cinzel, serif; color: var(--gold-bright); margin: 6px 0 8px; }
.akte-intro p { color: #cfd4df; margin: 0 0 6px; }
.akte-intro .b-refs { align-items: center; margin: 8px 0 0; }
.herken { border-top: 1px solid var(--line); padding-top: 14px; margin: 4px 0 18px; }
.herken .hq { font-weight: 500; color: var(--cream); margin: 8px 0 10px; }
.herken .opt { font-size: 13px; padding: 8px 10px; }
.herken .hint { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.herken .fb { font-size: 13px; }

/* beloning, intel, debrief */
.beloning h2, .intel h2, .debrief h2 { font: 600 26px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 8px 0; }
.keus { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 22px 0; }
.keus .card-wrap.niet-gekozen { opacity: .35; filter: grayscale(.7); }
.intel { max-width: 720px; }
.intel .iq { font: 500 21px/1.35 Inter; color: var(--cream); }
.opts.groot .opt { font-size: 15px; padding: 12px 14px; }
.intel .fb { font-size: 14px; margin-top: 12px; }
.debrief-keus { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
.keuze { flex: 1 1 240px; text-align: left; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; display: grid; gap: 6px; }
.keuze:hover:not(:disabled) { border-color: var(--gold); background: rgba(212,175,106,.08); }
.keuze b { font: 600 18px/1 Cinzel, serif; color: var(--gold-bright); }
.keuze span { color: var(--muted); font-size: 14px; }
.keuze:disabled { opacity: .5; cursor: not-allowed; }
.deckgrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; }
.mini-knop { width: 150px; height: 220px; padding: 0; border: 0; background: none; cursor: pointer; }
.mini-knop .card-wrap { transform: scale(.5); transform-origin: top left; pointer-events: none; }
div.mini-knop { cursor: default; }

@media (max-width: 560px) {
  .run-intro, .run, .gevecht, .beloning, .intel, .debrief, .einde { padding-left: 12px; padding-right: 12px; }
  .vijand { width: calc(50% - 6px); }
  .handkaart { width: 120px; height: 176px; }
  .handkaart .card-wrap { transform: scale(.4); }
  /* op een telefoon: één rij die je horizontaal doorschuift */
  .hand { gap: 6px; min-height: 200px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 16px 4px 8px; scroll-snap-type: x proximity; }
  .handkaart { scroll-snap-align: start; }
  .handkaart:hover { transform: none; }
  .rb-hp, .sp-hp { width: 130px; }
  .g-beurt { margin-left: 0; width: 100%; }
}

/* ---------- startscherm: rol, niveau, escalatie, operatie van de week ---------- */
.week-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin: 18px 0; padding: 14px 18px; text-align: left; border-radius: 14px;
  border: 1px solid rgba(77,212,172,.5); background: linear-gradient(90deg, rgba(77,212,172,.14), rgba(77,212,172,.04));
  box-shadow: 0 0 30px -12px rgba(77,212,172,.5);
}
.week-teaser .kicker { color: #4dd4ac; }
.wt-tekst { display: grid; gap: 4px; flex: 1 1 320px; }
.wt-tekst b { color: var(--cream); font-weight: 600; }
.wt-tekst span { color: var(--muted); font-size: 13px; }
.wt-tekst .wt-record { color: var(--gold-bright); }
.wt-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.run-intro .hervat { margin-top: 8px; }
.stap { font: 600 12px/1 Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; text-align: left; }
.keuze.gekozen { border-color: var(--gold); background: rgba(212,175,106,.12); box-shadow: 0 0 0 1px var(--gold) inset; }
.rollen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; text-align: left; }
.rollen .keuze { border-left: 3px solid var(--acc); }
.rollen .keuze small { color: var(--acc); font-size: 12px; }
.escalaties { display: flex; flex-wrap: wrap; gap: 8px; }
.esc { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--cream); font: 500 13px/1 Inter; cursor: pointer; }
.esc:hover { border-color: var(--gold); }
.esc.gekozen { border-color: #e0605f; background: rgba(224,96,95,.15); color: #ffb3b3; }
.esc-uitleg { text-align: left; color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
.week { margin: 40px 0 10px; padding: 20px 22px; text-align: left; border: 1px solid rgba(77,212,172,.45); border-radius: 16px; background: linear-gradient(180deg, rgba(77,212,172,.08), transparent); }
.week .kicker { color: #4dd4ac; }
.week h2 { font: 600 22px/1.2 Cinzel, serif; color: var(--cream); margin: 8px 0; }
.week p { color: #cfd4df; }
.week-lijst { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 12px; }
.w-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.w-kop a { color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.w-melding { font-size: 13px; color: var(--muted); margin-top: 4px; }
.w-melding a, .w-bron a, .b-nieuws a { color: #4dd4ac; }
.chip.w-sterk { background: rgba(224,96,95,.18); color: #ffb3b3; }
.chip.w-zwak { background: rgba(77,212,172,.15); color: #8ee8cc; }
.w-record { color: var(--gold-bright) !important; }
.w-uitleg { font-size: 13px; color: var(--muted) !important; margin-bottom: 4px; }
.b-nieuws { font-size: 13.5px; border-left: 3px solid #4dd4ac; padding: 4px 0 4px 10px; }
.b-nieuws .chip { margin-left: 6px; }
.akte-intro .theater { color: var(--gold); font-style: italic; }
.rb-rol { background: rgba(91,157,255,.14); color: #a8c8ff; }
.rb-week { background: rgba(77,212,172,.15); color: #8ee8cc; }

/* ---------- missiescherm in drie stappen: missie → niveau → rol ---------- */
.run-intro.wizard { max-width: 960px; padding-top: 18px; }
.wiz-stappen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.wiz-stappen ol { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.wiz-stappen li > span, .wiz-stappen li > button {
  display: grid; gap: 2px; text-align: left; padding: 8px 14px; border-radius: 10px; min-width: 120px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); font: 600 11px/1.2 Inter; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.wiz-stappen li.nu > span { border-color: var(--gold); color: var(--gold-bright); background: rgba(212,175,106,.1); }
.wiz-stappen li.klaar > button { cursor: pointer; color: var(--muted); }
.wiz-stappen li.klaar > button:hover { border-color: var(--gold); }
.wiz-stappen li.klaar b { font: 500 13px/1.2 Inter; letter-spacing: 0; text-transform: none; color: var(--cream); }
.wiz-titel { font: 700 clamp(26px, 4vw, 38px)/1.1 Cinzel, serif; color: var(--gold-bright); margin: 10px 0 14px; }
.wiz-sub { color: var(--muted); margin: -6px 0 16px; }
.missies { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; text-align: left; }
.missie-kaart { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; border: 1px solid var(--gold-deep); background: linear-gradient(180deg, rgba(212,175,106,.08), rgba(7,11,20,.55)); }
.missie-kaart h2 { font: 600 21px/1.2 Cinzel, serif; color: var(--cream); margin: 2px 0 4px; }
.missie-kaart p { margin: 0; color: #cfd4df; }
.missie-kaart .mk-sub { color: var(--muted); font-size: 13.5px; }
.missie-kaart > .btn { align-self: flex-start; margin-top: 10px; }
/* keuzescherm: secties */
.m-sectie { margin: 22px 0 6px; text-align: left; }
.sectie-kop { font: 600 20px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sectie-kop small { font: 400 13.5px/1.3 Inter, sans-serif; color: var(--muted); margin-left: 6px; }
.m-sectie.start .oefen-kaart.groot { border-style: solid; border-color: rgba(127,212,255,.55); background: linear-gradient(180deg, rgba(127,212,255,.1), rgba(7,11,20,.55)); }
.theater-kop { font: 600 15px/1.3 Inter, sans-serif; color: var(--cream); margin: 14px 0 10px; }
.theater-kop span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.c-stappen { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 6px; color: #dfe4ee; }
.chip.m-soort { font-size: 11px; letter-spacing: .08em; padding: 2px 8px; }
.chip.m-soort.verkenning { border-color: rgba(127,212,255,.5); color: #bfe8ff; }
.chip.m-soort.dead { border-color: rgba(255,150,90,.5); color: #ffd3b8; }
.chip.m-soort.aanval { border-color: rgba(255,122,121,.5); color: #ffc9c8; }
.chip.m-soort.onderschep { border-color: rgba(212,175,106,.55); color: #f2e2bd; }
.week-kaart { border-color: rgba(77,212,172,.55); background: linear-gradient(180deg, rgba(77,212,172,.12), rgba(7,11,20,.55)); box-shadow: 0 0 30px -14px rgba(77,212,172,.6); }
.week-kaart .kicker { color: #4dd4ac; }
.week-kaart.uit { opacity: .7; box-shadow: none; }
.w-details { margin-top: 10px; }
.w-details summary, .uitleg summary { cursor: pointer; color: #4dd4ac; font-size: 13.5px; }
.uitleg { margin: 22px auto 0; max-width: 720px; text-align: left; }
.uitleg summary { color: var(--gold); }
.uitleg .spelregels { margin-top: 10px; }
@media (max-width: 560px) { .wiz-stappen li > span, .wiz-stappen li > button { min-width: 0; padding: 6px 9px; } }
.theaters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.theaters .esc { font-size: 12px; padding: 6px 10px; }
.theaters .esc.gekozen { border-color: var(--gold); background: rgba(212,175,106,.15); color: var(--gold-bright); }
.run-overzicht { text-align: left; }
.run-overzicht { max-width: 1100px; padding: 12px 18px; margin-bottom: 10px; }
.run-overzicht > p { font-size: 13.5px; margin: 4px 0 0; }
.ov-aktes { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ov-aktes li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7,11,20,.45); }
.ov-aktes b { font: 600 15px/1.3 Cinzel, serif; color: var(--gold-bright); }
.ov-nieuws { display: block; font-size: 13px; color: #8ee8cc; }
.ov-nieuws .chip { margin-left: 4px; }

/* ---------- prestaties ---------- */
.prestaties { max-width: 1100px; margin: 0 auto; padding: 18px 24px 30px; }
.prestaties h1 { font: 700 clamp(34px, 5vw, 52px)/1 Cinzel, serif; color: var(--gold-bright); margin: 6px 0 8px; }
.prestaties .lead { color: var(--muted); max-width: 720px; }
.pr-groep h2 { font: 600 20px/1.2 Cinzel, serif; color: var(--cream); margin: 26px 0 10px; }
.pr-groep h2 small { font: 500 13px/1 Inter; color: var(--muted); margin-left: 8px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pr-tegel { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); opacity: .78; }
.pr-tegel.behaald { opacity: 1; border-color: var(--gold-deep); background: linear-gradient(180deg, rgba(212,175,106,.12), rgba(7,11,20,.5)); }
.pr-medaille { flex: none; width: 38px; height: 38px; color: #5b6475; }
.pr-tegel.behaald .pr-medaille { color: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(240,217,168,.45)); }
.pr-medaille svg { width: 100%; height: 100%; }
.pr-tekst { display: grid; gap: 4px; align-content: start; }
.pr-tekst b { font: 600 15px/1.2 Cinzel, serif; color: var(--cream); }
.pr-tekst > span { font-size: 13px; color: var(--muted); }
.pr-tekst small { font-size: 11.5px; color: var(--muted); }
.pr-tekst .pr-datum { color: var(--gold); }
.pr-link { font-size: 12px; color: var(--gold); }
#prestatie-meldingen { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.prestatie-melding { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--cream);
  background: linear-gradient(180deg, #1c2233, #0d121d); border: 1px solid var(--gold); box-shadow: 0 16px 40px -10px rgba(0,0,0,.8), 0 0 24px -8px rgba(240,217,168,.5);
  animation: pm-in .35s ease-out; transition: opacity .4s, transform .4s; }
.prestatie-melding.weg { opacity: 0; transform: translateY(10px); }
.prestatie-melding .pm-medaille { flex: none; width: 36px; height: 36px; color: var(--gold-bright); }
.prestatie-melding > span:last-child { display: grid; gap: 2px; }
.prestatie-melding small { font: 600 10px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.prestatie-melding b { font: 600 15px/1.2 Cinzel, serif; }
.prestatie-melding span span { font-size: 12.5px; color: var(--muted); }
@keyframes pm-in { from { opacity: 0; transform: translateY(14px); } }
.home .stats a { color: inherit; text-decoration: none; }

/* ---------- aanpassing van de vijand en AAR ---------- */
.adaptatie { display: grid; gap: 4px; margin: 10px auto 0; max-width: 640px; padding: 10px 14px; border-radius: 10px; text-align: left;
  border: 1px solid rgba(224,96,95,.5); background: rgba(224,96,95,.1); }
.adaptatie b { color: #ffb3b3; }
.adaptatie span { color: #cfd4df; font-size: 13.5px; }
.adaptatie .b-refs { margin: 2px 0 0; align-items: flex-start; }
.aar { max-width: 900px; margin: 22px auto 6px; text-align: left; }
.aar h2 { font: 600 20px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 0 0 10px; text-align: center; }
.aar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.aar-deel { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7,11,20,.55); }
.aar-deel h3 { font: 600 12px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.aar-deel ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.aar-deel a { color: var(--gold-bright); }
.aar-deel b { color: #ff9c9b; }
.aar-deel p { margin: 8px 0 0; font-size: 13.5px; color: #cfd4df; }
.aar-tip { color: var(--muted) !important; }
.aar-fouten li { display: grid; gap: 2px; font-size: 13.5px; }
.aar-q { color: var(--cream); }
.aar-a { color: var(--ok); }
.aar-fouten a { font-size: 12.5px; color: var(--gold); }

/* ---------- uitrusting ---------- */
.uitr-keus { max-width: 980px; margin: 18px auto 0; text-align: center; }
.uitr-keus h3 { font: 600 18px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 0 0 4px; }
.uitr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; text-align: left; margin-top: 8px; }
.keuze.uitr { border-left: 3px solid #7fb4ff; }
.keuze.uitr b { font-size: 16px; }
.keuze.uitr.gekozen { border-color: var(--gold); background: rgba(212,175,106,.14); opacity: 1; }
.keuze.uitr.niet-gekozen { opacity: .4; }
.keuze.uitr:disabled { cursor: default; }
.uitr-lijst { display: grid; gap: 10px; margin: 12px 0 16px; max-height: 60vh; overflow: auto; text-align: left; }
.uitr-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.uitr-item b { font: 600 15px/1.2 Cinzel, serif; color: var(--gold-bright); }
.uitr-item span { font-size: 13.5px; color: #cfd4df; }
.uitr-item .b-refs { margin: 2px 0 0; }
.sp-krachten .chip.uitr { background: rgba(127,180,255,.1); color: #bcd6ff; }

/* ---------- dilemma ---------- */
.dilemma { max-width: 820px; margin: 0 auto; padding: 8px 24px 30px; text-align: center; }
.dilemma h2 { font: 700 clamp(26px, 4vw, 36px)/1.15 Cinzel, serif; color: var(--gold-bright); margin: 8px 0 10px; }
.dilemma .lead { color: #cfd4df; }
.dl-opties { display: grid; gap: 10px; margin: 16px 0; text-align: left; }
.keuze.dl-optie b { font: 600 16px/1.3 Inter; color: var(--cream); }
.keuze.dl-optie.gekozen { border-color: var(--gold); background: rgba(212,175,106,.12); }
.keuze.dl-optie.niet-gekozen { opacity: .55; }
.keuze.dl-optie:disabled { cursor: default; }
.dl-effect { font-size: 12.5px; color: var(--muted); }
.dl-uitkomst { text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(7,11,20,.6); }
.dl-uitkomst.goed { border-color: rgba(62,207,142,.55); }
.dl-uitkomst.fout { border-color: rgba(224,96,95,.55); }
.dl-gevolg { color: var(--cream); margin-top: 0; }
.dl-uitkomst.goed .dl-oordeel b { color: var(--ok); }
.dl-uitkomst.fout .dl-oordeel b { color: #ff9c9b; }
.dl-oordeel { color: #cfd4df; }
.dl-uitkomst .b-refs { align-items: flex-start; margin: 6px 0; }
.knoop.k-dilemma { color: #e6b86b; }

/* ---------- oefenmissie ---------- */
.coach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid #4dd4ac; background: linear-gradient(90deg, rgba(77,212,172,.16), rgba(7,11,20,.8)); box-shadow: 0 0 24px -10px rgba(77,212,172,.7); }
.coach p { flex: 1 1 320px; margin: 0; color: var(--cream); font-size: 14px; }
.coach-nr { font: 700 12px/1 Inter; color: #4dd4ac; letter-spacing: .08em; }
.coach-doel { outline: 2px solid #4dd4ac !important; outline-offset: 3px; border-radius: 12px; animation: coach-puls 1.6s ease-in-out infinite; }
@keyframes coach-puls { 50% { outline-color: rgba(77,212,172,.35); } }
.oefen-kaart { border-style: dashed; background: rgba(7,11,20,.5); }
.train-poort { display: grid; justify-items: center; gap: 12px; margin-top: 16px; }
.chip.omst { background: rgba(127,180,255,.12); color: #bcd6ff; font-size: 11.5px; padding: 4px 9px; }
.b-omst { font-size: 13.5px; border-left: 3px solid #7fb4ff; padding: 4px 0 4px 10px; }
.b-omst a { color: var(--gold); }

/* ---------- geluidsknop ---------- */
.geluid-knop { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.geluid-knop:hover { color: var(--cream); border-color: var(--gold); }
.geluid-knop.on { color: var(--gold-bright); border-color: var(--gold-deep); background: rgba(212,175,106,.12); }
.geluid-knop svg { width: 18px; height: 18px; }
.geluid-knop + .seg.lang { margin-left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- kennisprofiel ---------- */
.kennis { max-width: 1100px; margin: 0 auto; padding: 18px 24px 30px; }
.kennis h1 { font: 700 clamp(30px, 5vw, 46px)/1.05 Cinzel, serif; color: var(--gold-bright); margin: 6px 0 8px; }
.kennis .lead { color: var(--muted); max-width: 760px; }
.kh-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.kh-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.kh-legenda .kh-cel { width: 16px; height: 16px; font-size: 0; }
.kh-legenda b { color: var(--cream); }
.kh-ac { margin-top: 20px; }
.kh-ac h2 { font: 600 18px/1.2 Cinzel, serif; color: var(--acc); margin: 0 0 8px; }
.kh-ac h2 small { font: 500 12.5px/1 Inter; color: var(--muted); margin-left: 8px; }
.kh-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-cel { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; font: 600 13px/1 Inter; text-decoration: none;
  border: 1px solid var(--line); color: var(--cream); background: rgba(255,255,255,.04); }
a.kh-cel:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold); }
.kh-cel.sterk { background: rgba(62,207,142,.35); border-color: rgba(62,207,142,.7); }
.kh-cel.twijfel { background: rgba(230,184,107,.3); border-color: rgba(230,184,107,.7); }
.kh-cel.zwak { background: rgba(224,96,95,.35); border-color: rgba(224,96,95,.7); }
.kh-cel.leeg { color: var(--muted); }
.kh-cel.geen { opacity: .45; }
.kh-studie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(224,96,95,.5); background: rgba(224,96,95,.08); }
.kh-studie > div { display: grid; gap: 4px; flex: 1 1 320px; }
.kh-studie span { color: var(--muted); font-size: 13px; }
.kh-studie ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #cfd4df; }
.oefenen { max-width: 820px; }

/* ---------- MLCOA / MDCOA ---------- */
.chip.koers { font-size: 11px; padding: 4px 8px; letter-spacing: .08em; }
.chip.koers.mlcoa, .chip.koers.indicator { background: rgba(230,184,107,.15); color: #e6b86b; }
.chip.koers.mdcoa { background: rgba(224,96,95,.25); color: #ffb3b3; animation: pulse 1.2s ease-in-out infinite; }
.indicator-balk { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid #e6b86b; background: rgba(230,184,107,.12); color: var(--cream); font-size: 14px; }
.indicator-balk b { color: #e6b86b; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
.indicator-balk span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.b-koers { font-size: 13.5px; border-left: 3px solid #e6b86b; padding: 4px 0 4px 10px; }
.b-koers span { color: var(--muted); }
.b-koers a { color: var(--gold); }

/* ---------- loopbaan ---------- */
.loopbaan { margin: 16px 0 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--gold-deep); background: linear-gradient(180deg, rgba(212,175,106,.1), rgba(7,11,20,.5)); }
.lb-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.lb-kop b { font: 700 24px/1.1 Cinzel, serif; color: var(--gold-bright); }
.lb-kop span { color: var(--muted); font-size: 13px; }
.lb-ladder { list-style: none; padding: 0; margin: 12px 0 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.lb-ladder li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); opacity: .6; }
.lb-ladder li.bereikt { opacity: 1; border-color: var(--gold-deep); }
.lb-ladder b { font: 600 13px/1.2 Inter; color: var(--cream); }
.lb-ladder small { color: var(--muted); font-size: 11px; }
.lb-ladder span { color: var(--gold); font-size: 12px; }
.lb-uitleg { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.keuze.rol.op-slot { opacity: .5; cursor: not-allowed; }
.keuze.rol.op-slot small { color: var(--muted); }
.rang-stat b { font-size: 18px !important; }

/* ---------- animatie ---------- */
.vlieg { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; will-change: transform; }
.knal { position: fixed; z-index: 45; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff3c4 0%, #ffb347 35%, #e0605f 65%, transparent 70%); animation: knal .7s ease-out both; }
@keyframes knal { from { transform: scale(.3); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.sp-hp.geraakt { animation: geraakt .45s ease-out; }
@keyframes geraakt { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); box-shadow: 0 0 18px #e0605f; } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.ketting.stap { animation: stap .6s ease-out; }
@keyframes stap { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.vijand.teruggezet { animation: teruggezet .7s ease-out; }
@keyframes teruggezet { 0% { box-shadow: 0 0 0 3px #7fb4ff, 0 0 28px #7fb4ff; } 100% { box-shadow: none; } }
.vijand.binnen { animation: binnen .6s ease-out; }
@keyframes binnen { from { transform: translateY(-14px); opacity: 0; } }
.sp-schild.pulse-schild { animation: stap .6s ease-out; }
.g-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 4px 0 0; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .vlieg, .knal { display: none; } .sp-hp.geraakt, .ketting.stap, .vijand.teruggezet, .vijand.binnen { animation: none; } }

/* ---------- threat-inspecteur ---------- */
.inspecteur { display: flex; flex-wrap: wrap; gap: 20px; max-width: 760px; width: 100%; padding: 22px; border-radius: 16px; border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, var(--steel-light), var(--navy)); box-shadow: 0 30px 80px rgba(0,0,0,.7); max-height: 92vh; overflow: auto; }
.ins-kaart { flex: none; width: 210px; height: 308px; }
.ins-kaart .card-wrap { transform: scale(.7); transform-origin: top left; }
.ins-onbekend { width: 210px; height: 308px; border-radius: 14px; display: grid; place-items: center; font: 700 90px/1 Cinzel, serif; color: rgba(217,70,90,.6); border: 1px dashed rgba(217,70,90,.5); }
.ins-tekst { flex: 1 1 300px; text-align: left; }
.ins-tekst h2 { font: 600 24px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 4px 0 10px; }
.ins-tekst ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 7px; font-size: 14px; color: #cfd4df; }
.ins-tekst b { color: var(--cream); }
.vijand:not(:disabled) { cursor: pointer; }
.gevecht.kiest .vijand.doelbaar { cursor: crosshair; }

/* ---------- dilemma: zware variant en verdedigbare keuze ---------- */
.dl-zwaar { color: #e0a060; }
.dl-uitkomst.verdedigbaar { border-color: rgba(224,160,96,.55); }
.dl-uitkomst.verdedigbaar .dl-oordeel b { color: #e0a060; }
.dl-beter { color: var(--muted); font-size: 14px; margin: 4px 0 0; }


/* ---------- wapens en storing (js/animatie.js) ---------- */
.vlieg.sprite, .vlieg.rook, .vlieg.spoor-kogel, .vlieg.fakkel { width: 0; height: 0; }
.vlieg.sprite > svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); overflow: visible; }
.vlieg.golf > svg { filter: drop-shadow(0 0 4px currentColor); }
.vlieg.rook::after { content: ""; position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--k, rgba(230,230,235,.5)); animation: rook .9s ease-out forwards; }
@keyframes rook { from { transform: scale(.5); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.vlieg.spoor-kogel::after { content: ""; position: absolute; width: 14px; height: 2px; margin: -1px 0 0 -14px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffd76b); box-shadow: 0 0 6px #ffb347; }
.vlieg.fakkel::after { content: ""; position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #fff6d0; box-shadow: 0 0 10px 4px #ffb347; }
.vlieg.treffer { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffcf6b 40%, rgba(224,96,95,.6) 70%, transparent 72%); animation: treffer .45s ease-out forwards; }
@keyframes treffer { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.vlieg.bundel { height: 3px; margin-top: -1.5px; transform-origin: 0 50%; border-radius: 3px;
  background: linear-gradient(90deg, var(--k), #fff); box-shadow: 0 0 10px 2px var(--k); animation: bundel .55s ease-out forwards; }
@keyframes bundel { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }
.vlieg.jam-ring { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid var(--k); box-shadow: 0 0 8px var(--k); animation: jamring .85s ease-out forwards; }
@keyframes jamring { from { transform: scale(1); opacity: .9; } to { transform: scale(6); opacity: 0; } }
.vlieg.chaff { position: fixed; width: 3px; height: 3px; background: #e6ecf5; box-shadow: 0 0 3px #fff; animation: chaff 1.05s ease-out forwards; }
@keyframes chaff { 0% { transform: translate(0, 0); opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) rotate(200deg); opacity: 0; } }
.vijand.gestoord { animation: gestoord .75s steps(8) 1; }
@keyframes gestoord {
  0%, 100% { filter: none; transform: none; }
  20% { filter: hue-rotate(40deg) brightness(1.4) contrast(1.4); transform: translateX(-2px); box-shadow: 0 0 0 2px #6fd3ff, 0 0 18px #6fd3ff; }
  45% { filter: saturate(.3) brightness(1.2); transform: translateX(2px); }
  70% { filter: hue-rotate(-30deg) brightness(1.3); transform: translateX(-1px); box-shadow: 0 0 0 2px #6fd3ff; } }
.hand.gestoord-rood { animation: gestoordrood .75s steps(8) 1; }
@keyframes gestoordrood {
  0%, 100% { filter: none; transform: none; }
  25% { filter: hue-rotate(-40deg) brightness(1.3) contrast(1.3); transform: translateX(3px); }
  55% { filter: saturate(.4) brightness(1.2); transform: translateX(-3px); }
  80% { filter: hue-rotate(20deg); transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .vlieg, .knal { display: none; } .vijand.gestoord, .hand.gestoord-rood { animation: none; } }

/* ---------- onbekend spoor (APP-6 'unknown') ---------- */
.vijand.onbekend .v-kunst { background: radial-gradient(circle at 50% 40%, #1a1f2c, #0a0710 75%); }
.vijand.onbekend .v-kunst svg { height: 74%; margin-top: 1px; }
.v-spoor { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 600 10px/1.2 Inter; color: #f3f0c0; letter-spacing: .2px; text-shadow: 0 1px 2px #000; padding: 0 4px; }
.vijand.onbekend .v-naam { font-family: "JetBrains Mono", Inter, monospace; font-size: 11.5px; letter-spacing: .3px; color: #f3f0c0; }
.ins-onbekend { display: grid; place-items: center; border-style: solid; border-color: rgba(255,255,128,.35); }
.ins-onbekend svg { width: 150px; height: 120px; }

/* ---------- waarnemen en identificeren (niet-dodelijk) ---------- */
.vlieg.sensorlijn { height: 2px; margin-top: -1px; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, var(--k) 0 8px, transparent 8px 14px); background-size: 28px 2px;
  filter: drop-shadow(0 0 3px var(--k)); animation: sensorlijn .8s linear forwards; }
@keyframes sensorlijn { 0% { opacity: 0; background-position: 0 0; } 15% { opacity: .95; } 70% { opacity: .9; } 100% { opacity: 0; background-position: 56px 0; } }
.vlieg.vizier { position: fixed; animation: vizier 1.25s ease-out forwards; }
.vlieg.vizier i { position: absolute; width: 14px; height: 14px; border: 2px solid var(--k); filter: drop-shadow(0 0 3px var(--k)); }
.vlieg.vizier i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.vlieg.vizier i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vlieg.vizier i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.vlieg.vizier i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vlieg.vizier b { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 700 10px/1 "JetBrains Mono", monospace;
  color: #0a0f1c; background: var(--k); padding: 3px 6px; border-radius: 3px; letter-spacing: .5px; white-space: nowrap; }
@keyframes vizier { 0% { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.vlieg.wraklabel { position: fixed; transform: translate(-50%, -50%); font: 700 11px/1.2 "JetBrains Mono", monospace; letter-spacing: .4px;
  color: #0a0f1c; background: #ffff80; border: 1px solid #1b1b1b; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: wraklabel 2.35s ease-out forwards; }
@keyframes wraklabel { 0% { opacity: 0; transform: translate(-50%, -30%); } 12% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* ---------- zelfanimaties: manoeuvre, terrein, schild, lokdoel, plan, trekken ---------- */
.vlieg.schildbel { position: fixed; width: 100px; height: 100px; margin: -50px 0 0 -50px; animation: schildbel .95s ease-out forwards; }
@keyframes schildbel { 0% { transform: scale(.35); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.vlieg.rug { position: fixed; height: 60px; animation: rug 1.45s ease-out forwards; }
@keyframes rug { 0% { transform: translateY(60px); opacity: 0; } 30% { transform: translateY(0); opacity: .95; } 75% { opacity: .9; } 100% { opacity: 0; } }
.vlieg.sleep { position: fixed; width: 90px; height: 2px; transform-origin: 0 50%; transform: rotate(150deg);
  background: linear-gradient(90deg, rgba(223,230,242,.7), rgba(223,230,242,.2)); animation: sleep 1.45s ease-out forwards; }
.vlieg.sleep::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 10px; border-radius: 3px; background: #dfe6f2; box-shadow: 0 0 8px #6fd3ff; }
@keyframes sleep { 0% { width: 0; opacity: 0; } 30% { opacity: 1; } 60% { width: 90px; } 85% { opacity: 1; } 100% { width: 90px; opacity: 0; } }
.vlieg.planring { position: fixed; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  border: 2px solid var(--gold-bright); box-shadow: 0 0 14px var(--gold), inset 0 0 10px rgba(212,175,106,.5); animation: planring 1.05s ease-out forwards; }
@keyframes planring { 0% { transform: scale(.3) rotate(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.8) rotate(90deg); opacity: 0; } }
.vlieg.vonk::after { content: ""; position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 10px 3px var(--gold); }
.vlieg.trekkaart::after { content: ""; position: absolute; width: 26px; height: 36px; margin: -18px 0 0 -13px; border-radius: 4px;
  background: linear-gradient(135deg, #1d2a4a, #0e1526); border: 1px solid var(--gold-deep); box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.vlieg.plus { position: fixed; font: 700 16px/1 Inter; color: #6ff0a8; text-shadow: 0 0 6px #2fae6b; animation: plus .95s ease-out forwards; }
@keyframes plus { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }
.sp-hp.hersteld { animation: hersteld .7s ease-out; }
@keyframes hersteld { 0% { box-shadow: 0 0 0 0 rgba(111,240,168,.8); } 100% { box-shadow: 0 0 0 10px rgba(111,240,168,0); } }
.sp-energie.pulse-energie { animation: pulseEnergie .7s ease-out; }
@keyframes pulseEnergie { 0% { filter: brightness(2) drop-shadow(0 0 8px var(--gold)); } 100% { filter: none; } }
.hand.gereinigd { position: relative; }
.hand.gereinigd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(160,255,220,.35) 50%, transparent 70%);
  background-size: 250% 100%; animation: reinig .7s ease-out; }
@keyframes reinig { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.hand.gebuft { animation: gebuft .7s ease-out; }
@keyframes gebuft { 0% { filter: drop-shadow(0 0 0 var(--gold)); } 40% { filter: drop-shadow(0 0 10px var(--gold)); } 100% { filter: none; } }
.vijand.onderdrukt { animation: onderdrukt .8s ease-out; }
@keyframes onderdrukt { 0% { filter: grayscale(1) brightness(.6); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .sp-hp.hersteld, .sp-energie.pulse-energie, .hand.gereinigd::after, .hand.gebuft, .vijand.onderdrukt { animation: none; } }
.ins-dossier { margin: 4px 0 14px; padding: 14px 16px; }
.ins-dossier .d-sum { margin: 0; font-size: 14px; color: #cfd4df; }
.ins-dossier h4 { margin-top: 14px; }
.ins-dossier dl { font-size: 13px; }
.ins-dossier .read { margin-top: 12px; }
.vlieg.veeg { position: fixed; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid #7dffb2; box-shadow: 0 0 12px #7dffb2, inset 0 0 18px rgba(125,255,178,.25); animation: veeg 1.15s ease-out forwards; }
@keyframes veeg { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(18); opacity: 0; } }

/* ---------- kerncijfers en radarchip op de vijandkaart ---------- */
.v-stat { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 6px 3px; text-align: center; font: 600 10px/1.2 "JetBrains Mono", Inter, monospace;
  color: #eef1f6; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, transparent, rgba(7,11,20,.92) 55%); }
.v-chips .chip.radar { background: rgba(111,211,255,.14); color: #9fdcff; border-color: rgba(111,211,255,.4); }
.v-chips .chip.geenradar { background: rgba(255,255,255,.05); color: var(--muted); }

/* ---------- label voor lokale en ontwikkelversies ---------- */
.dev-label { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 60; pointer-events: none;
  font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: #0a0f1c; background: #ffb347;
  padding: 5px 10px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.5); opacity: .92; }


/* ---------- missies (v2): de gestileerde kaart ---------- */
.missie-scherm { max-width: 1480px; margin: 0 auto; padding: 0 16px 24px; }
.ms-grid { display: grid; gap: 18px; margin-top: 12px; }
@media (min-width: 960px) {
  .ms-grid { grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr); align-items: start; }
  .ms-paneel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
}
.ms-kaart { border: 1px solid rgba(212,175,106,.35); border-radius: 16px; overflow: hidden; background: #0b1322;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03); }
.mk-kaart { display: block; width: 100%; height: auto; }

/* ondergrond */
.mk-grid line { stroke: rgba(220,230,200,.09); stroke-width: 1; }
.mk-grid text { font: 600 13px/1 "JetBrains Mono", monospace; fill: rgba(170,190,220,.45); }
.mk-water { stroke: #6fb3e6; stroke-width: 2.5; stroke-opacity: .8; }
.mk-eiland { stroke: #6fb3e6; stroke-width: 2.5; stroke-opacity: .8; }
.mk-water-gloed { fill: none; stroke: #4f9bd6; stroke-width: 12; opacity: .18; filter: url(#mk-gloed); }
.mk-grens { fill: none; stroke: #c9b27a; stroke-width: 2.5; stroke-dasharray: 14 7 3 7; opacity: .65; }
.mk-land-naam { font: 700 30px/1 Cinzel, serif; letter-spacing: .35em; fill: rgba(233,217,192,.13); text-anchor: middle; }
.mk-plaats circle { fill: #cfd4df; opacity: .85; }
.mk-plaats .mk-stad { fill: rgba(255,214,120,.14); stroke: rgba(255,214,120,.45); stroke-width: 1.5; }
.mk-plaats text { font: 600 17px/1 Inter, sans-serif; fill: #d9dfe9; paint-order: stroke; stroke: #0b1322; stroke-width: 5px; }
.mk-plaats.groot circle:not(.mk-stad) { fill: var(--gold-bright); }
.mk-plaats.groot text { font: 700 23px/1 Cinzel, serif; fill: var(--gold-bright); }

/* dreiging */
.mk-eenheid .mk-ring { stroke: rgba(255,110,110,.5); stroke-width: 1.8; stroke-dasharray: 8 6; }
.mk-eenheid.radar .mk-ring { stroke: rgba(184,196,220,.35); stroke-dasharray: 2 7; }
.mk-eenheid.raakt .mk-ring { stroke: #ff7a79; stroke-width: 3; stroke-dasharray: none; }
.mk-eenheid.radar.raakt .mk-ring { stroke: #cdd6ea; stroke-dasharray: 5 6; }
.mk-sweep { animation: mkSweep 6s linear infinite; }
.mk-sweep path { fill: rgba(125,255,178,.16); }
@keyframes mkSweep { to { transform: rotate(360deg); } }
.mk-ruit { fill: #d9464f; stroke: #ffd0d0; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255,80,80,.55)); }
.mk-stelling.radar .mk-ruit { fill: #6b7486; stroke: #dfe6f2; filter: none; }
.mk-glyf { fill: none; stroke: #fff4f4; stroke-width: 2; }
.mk-glyf.vol { fill: #fff4f4; stroke: none; }
.mk-stelling text { font: 700 16px/1 Inter, sans-serif; fill: #ffc9c8; paint-order: stroke; stroke: #0b1322; stroke-width: 5px; }
.mk-stelling.radar text { fill: #cfd7e6; }
/* campagne: uitgeschakelde stellingen grijs en doorgekruist */
.mk-stelling.uit .mk-ruit { fill: #4a4f5a; stroke: #9aa3b2; filter: none; }
.mk-stelling.uit text { fill: #9aa3b2; text-decoration: line-through; }
.mk-richt { stroke: #ff7a79; stroke-width: 2.5; stroke-dasharray: 10 8; opacity: .8; }
.mk-punt.intel .mk-bol { stroke: #9fd8ff; stroke-dasharray: 4 3; }
.camp-blok.link16 .btn { margin-top: 8px; }
.mk-uitkruis { stroke: #7dffb2; stroke-width: 4; stroke-linecap: round; }

/* route */
.mk-verb { stroke: rgba(212,175,106,.35); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.mk-pad-gloed { fill: none; stroke: #ffd66b; stroke-width: 16; opacity: .35; filter: url(#mk-gloed); stroke-linejoin: round; }
.mk-pad { fill: none; stroke: #ffe08a; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.mk-gekozen { stroke: #7fd4ff; stroke-width: 7; stroke-dasharray: 18 10; stroke-linecap: round; animation: mkGekozen .9s linear infinite; filter: drop-shadow(0 0 6px rgba(127,212,255,.7)); }
.mk-gekozen.t-laag { stroke: #7dffb2; filter: drop-shadow(0 0 6px rgba(125,255,178,.7)); }
@keyframes mkGekozen { to { stroke-dashoffset: -28; } }
.mk-punt .mk-bol { fill: #202a3d; stroke: rgba(212,175,106,.7); stroke-width: 3; }
.mk-punt.kan { cursor: pointer; }
.mk-klik { fill: transparent; }
.mk-puls { fill: none; stroke: #7fd4ff; stroke-width: 3; opacity: .8; transform-box: fill-box; transform-origin: center; animation: mkPuls 1.8s ease-out infinite; }
@keyframes mkPuls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.mk-punt.kan .mk-bol { fill: #0e2a44; stroke: #7fd4ff; stroke-width: 4; filter: drop-shadow(0 0 8px rgba(127,212,255,.8)); }
.mk-punt.kan:hover .mk-bol, .mk-punt.kan:focus .mk-bol, .mk-punt.gekozen .mk-bol { fill: #7fd4ff; }
.mk-punt.kan:focus { outline: none; }
.mk-punt .mk-naam { font: 700 24px/1 Inter, sans-serif; fill: #f4f7fc; text-anchor: middle; paint-order: stroke; stroke: #0b1322; stroke-width: 7px; }
.mk-punt.kan .mk-naam { fill: #bfe8ff; }
.mk-punt.hier .mk-naam { fill: #ffe08a; }
.mk-doelring { fill: rgba(255,90,90,.08); stroke: #ff7a79; stroke-width: 4; }
.mk-doelring.buiten { fill: none; stroke-width: 2; opacity: .6; transform-box: fill-box; transform-origin: center; animation: mkPuls 2.2s ease-out infinite; }
.mk-kruis { stroke: #ff7a79; stroke-width: 4; stroke-linecap: round; }
.mk-punt.doel.uit .mk-doelring, .mk-punt.doel.uit .mk-kruis { stroke: #7dffb2; }
.mk-punt.doel.uit .mk-doelring { fill: rgba(125,255,178,.1); }
.mk-jij path { fill: #ffe08a; stroke: #3a2a05; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(255,214,107,.85)); }
.mk-jij-halo { fill: rgba(255,214,107,.10); stroke: rgba(255,214,107,.55); stroke-width: 2; }

/* kaartomlijsting */
.mk-schaal rect { fill: #e9d9c0; stroke: #e9d9c0; stroke-width: 1.5; }
.mk-schaal rect.leeg { fill: #0b1322; }
.mk-schaal text, .mk-noord text { font: 700 14px/1 "JetBrains Mono", monospace; fill: #e9d9c0; }
.mk-noord circle { fill: rgba(11,19,34,.7); stroke: rgba(233,217,192,.45); stroke-width: 1.5; }
.mk-noord path { fill: #e9d9c0; }
.ms-legenda { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); background: rgba(7,11,20,.6); }

/* paneel */
.ms-paneel { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: rgba(7,11,20,.7); backdrop-filter: blur(4px); }
.ms-paneel h2 { font: 600 24px/1.2 Cinzel, serif; color: var(--gold-bright); margin: 4px 0 6px; }
.ms-paneel h3 { font: 600 15px/1.3 Inter; color: var(--cream); margin: 14px 0 8px; }
.ms-opdracht { margin: 0 0 10px; color: #dfe4ee; }
.ms-status { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-alarm { letter-spacing: .1em; }
.ms-rustig { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(125,255,178,.08); border: 1px solid rgba(125,255,178,.3); color: #bff5d6; font-size: 14px; }
.ms-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-tactieken { display: grid; gap: 6px; margin: 8px 0 12px; }
.mk-tactiek { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-align: left; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--cream); cursor: pointer; }
.mk-tactiek b { font: 600 14px/1.2 Inter; }
.mk-tactiek small { color: var(--gold); font-size: 12px; align-self: center; }
.mk-tactiek span { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.mk-tactiek.gekozen { border-color: #7fd4ff; background: rgba(127,212,255,.1); }
.mk-tactiek:disabled { opacity: .45; cursor: not-allowed; }
.ms-voorspelling { padding: 10px 12px; border-radius: 10px; background: rgba(224,96,95,.06); border: 1px solid rgba(224,96,95,.25); }
.ms-voorspelling ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: #e6d8d8; }
.ms-voorspelling p { margin: 6px 0 0; font-size: 13.5px; }
.int.doel { color: #ffb3b2; }
@media (prefers-reduced-motion: reduce) { .mk-gekozen, .mk-puls, .mk-sweep, .mk-doelring.buiten { animation: none; } }
.chip.g-missie { background: rgba(127,212,255,.12); color: #bfe8ff; border-color: rgba(127,212,255,.4); }
.ms-opdracht-stuk { display: grid; gap: 3px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,214,107,.45); background: linear-gradient(135deg, rgba(255,214,107,.12), rgba(255,214,107,.03)); }
.ms-opdracht-stuk b { font: 700 16px/1.25 Inter; color: #ffe08a; letter-spacing: .01em; }
.ms-opdracht-stuk span { font-size: 13px; color: #e2dccb; }
.chip.ms-alarm.a-0 { color: #bff5d6; border-color: rgba(125,255,178,.35); }
.chip.ms-alarm.a-1 { color: #ffe08a; border-color: rgba(255,214,107,.45); }
.chip.ms-alarm.a-2 { color: #ffb37a; border-color: rgba(255,150,90,.55); background: rgba(255,150,90,.1); }
.chip.ms-alarm.a-3 { color: #ff9c9b; border-color: rgba(255,90,90,.7); background: rgba(255,90,90,.15); animation: mkAlarm 1.4s ease-in-out infinite; }
@keyframes mkAlarm { 50% { box-shadow: 0 0 10px rgba(255,90,90,.6); } }
/* campagne: wat er veranderde sinds de vorige missie */
.camp-blok { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: rgba(127,212,255,.06); border: 1px solid rgba(127,212,255,.3); }
.camp-blok h3 { margin: 0 0 6px; font: 600 15px/1.3 Inter, sans-serif; color: #bfe8ff; }
.camp-blok ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: #dfe4ee; }
.camp-voortgang { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; padding: 0; list-style: none; }
.camp-voortgang li { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.camp-voortgang li.klaar { border-color: rgba(125,255,178,.5); color: #bff5d6; }
.camp-voortgang li.nu { border-color: #7fd4ff; color: #bfe8ff; }
/* inlichtingencel: PIR-keuze */
main.intel.pir { max-width: 1040px; }
.pir-grid { display: grid; gap: 12px; margin: 16px 0; }
@media (min-width: 900px) { .pir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pir-optie { display: grid; gap: 8px; align-content: start; text-align: left; }
.pir-optie b { font: 600 17px/1.3 Cinzel, serif; color: var(--gold-bright); }
.pir-vraag { color: var(--cream); font-size: 15px; }
.pir-hoe { color: var(--muted); font-size: 13px; }
.pir-vol, .pir-deel { font-size: 13px; color: #dfe4ee; }
.pir-vol i, .pir-deel i { display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fd8ff; }
.camp-blok.pir-geen { background: rgba(255,150,90,.06); border-color: rgba(255,150,90,.35); }
/* opdracht per stuk route */
.ms-opdrachtmelding { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.ms-opdrachtmelding.goed { background: rgba(125,255,178,.08); border: 1px solid rgba(125,255,178,.35); color: #bff5d6; }
.ms-opdrachtmelding.mis { background: rgba(255,150,90,.08); border: 1px solid rgba(255,150,90,.35); color: #ffd3b8; }
.chip.g-missie.mislukt { border-color: rgba(255,150,90,.6); color: #ffd3b8; }
.mk-tactiek.neven { border-style: dashed; }
.g-heli { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(127,212,255,.4); background: rgba(127,212,255,.06); }
.g-heli b { color: #bfe8ff; font-size: 14px; }
.g-heli .rb-hp { min-width: 140px; flex: 0 1 200px; }
.g-heli small { color: var(--muted); font-size: 12.5px; }
.g-heli.neer { border-color: rgba(255,120,120,.5); background: rgba(255,90,90,.06); }
.ms-coach { margin: 10px 0; }
.ms-coach p { margin: 0; }
.ms-alarmmelding { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,150,90,.08); border: 1px solid rgba(255,150,90,.35); color: #ffd3b8; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .chip.ms-alarm.a-3 { animation: none; } }