/* Wallet-battle (js/battle.js): de pixel-overlay over de game-canvas en de chatkaart in Claude-stijl. */

/* ---------- Battle-overlay: vaste spelpalet, alle maten in wereldpixels (--u = canvas-breedte / 320) ---------- */
.battle{position:absolute;z-index:4;overflow:hidden;--s:2;--u:calc(var(--s) * 1px);--f:15px;--fk:12px;--b:2px;--inkt:#231f2b;--papier:#fffdf5;--schaduw:rgba(35,31,43,.35);--wk:#383ede;--wk-hover:#0c1195;font-family:"Pixelify Sans",var(--sans,system-ui),sans-serif;font-weight:500;font-size:var(--f);line-height:1.2;color:var(--inkt);user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.battle[data-wallet="bw"]{--wk:#aa418c;--wk-hover:#7a2e65}
.battle:focus{outline:none}
.battle:focus-visible{box-shadow:inset 0 0 0 3px var(--focus,#2C84DB)}
.battle canvas{display:block;image-rendering:pixelated}
.battle--sluitbaar{cursor:pointer}
.battle-scene{position:absolute;inset:0;overflow:hidden;background:#f5f1df}
.battle-veld{position:absolute;left:0;top:0}
.battle.veeg .battle-scene{animation:battle-onthul .35s steps(1,end)}
.battle-balken{display:none;position:absolute;inset:0;z-index:9;pointer-events:none}
.battle.veeg .battle-balken{display:block}
.battle-balken i{position:absolute;left:0;width:100%;height:33.4%;background:#000;transform:translateX(-101%);animation:battle-balk .35s cubic-bezier(.45,0,.55,1) both}
.battle-balken i:nth-child(1){top:0}
.battle-balken i:nth-child(2){top:33.3%;animation-name:battle-balk-r}
.battle-balken i:nth-child(3){top:66.6%}
.battle--pauze .battle-scene::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(35,31,43,.16);pointer-events:none}

/* tegenstander en partner (pixel-sprites in hele schermpixels, zie Overlay.zetSprite) */
.battle-opp,.battle-me{position:absolute;pointer-events:none}
.battle-plat,.battle-sprite{position:absolute}
.battle-sprite{z-index:1}
.battle-opp{opacity:0;transform:translateX(calc(var(--u) * 150));transition:left .3s ease,transform .3s ease-out,opacity .15s}
.battle-opp.in{opacity:1;transform:none}
.battle-opp.in .battle-sprite{animation:battle-adem 1.1s steps(1) infinite}
.battle-opp.raak .battle-sprite{animation:battle-raak .18s steps(2)}
.battle-opp.blij .battle-sprite{animation:battle-hop .45s steps(3) 2}
.battle-opp.weg{opacity:0;transform:translateX(calc(var(--u) * 160));transition:transform .7s steps(7),opacity .7s steps(7)}
.battle-me{opacity:0;transform:translateX(calc(var(--u) * -160));transition:transform .3s ease-out,opacity .15s}
.battle-me.in{opacity:1;transform:none}
.battle-me.spring .battle-sprite{animation:battle-spring .32s ease-out}
.battle-me.schud .battle-sprite{animation:battle-schud .25s steps(4) 3}
.battle-me.verslagen{opacity:.55;transform:translateY(calc(var(--u) * 10));filter:grayscale(.7);transition:transform .4s steps(4),opacity .4s,filter .4s}

/* infoboxen */
.battle-hud{position:absolute;z-index:2;background:var(--papier);border:var(--b) solid var(--inkt);border-radius:calc(var(--u) * 3);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw);padding:calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * 4);opacity:0;transition:opacity .2s}
.battle-hud.in{opacity:1}
.battle-hud.opp{left:calc(var(--u) * 8);top:calc(var(--u) * 8);width:calc(var(--u) * 150)}
.battle-hud.me{right:calc(var(--u) * 8);top:calc(var(--u) * 124);width:calc(var(--u) * 142)}
.battle[data-tel="ja"] .battle-hud.me,.battle--qr-hoog .battle-hud.me{opacity:0}
.battle-hud-rij{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 4);min-width:0}
.battle-hud-rij+.battle-hud-rij{margin-top:calc(var(--u) * 2.5)}
.battle-naam{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.battle-nv{flex:none;font-size:var(--fk)}
.battle-hud-sub{flex:0 1 auto;min-width:0;font-size:var(--fk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-kaartjes{flex:none;color:var(--wk);font-size:var(--fk);letter-spacing:.12em;line-height:1}
.battle-badge{flex:none;padding:0 calc(var(--u) * 3);border-radius:calc(var(--u) * 2);color:#fff;font-size:var(--fk);line-height:1.4}
.battle-meter{flex:1;display:flex;align-items:center;gap:calc(var(--u) * 3);min-width:0}
.battle-meter-lbl{flex:none;font-size:var(--fk);font-weight:600}
.battle-meter-balk{flex:1;min-width:0;height:max(6px,calc(var(--u) * 4.5));background:#d8d2c4;border:max(1px,calc(var(--b) * .5)) solid var(--inkt);border-radius:calc(var(--u) * 2);overflow:hidden}
.battle-meter-vul{display:block;height:100%;transition:width .22s steps(5),background-color .2s}

/* QR-kaart: altijd zwart op wit met stille zone; klik = groter */
.battle-qr{position:absolute;z-index:3;right:calc(var(--u) * 6);top:calc(var(--u) * 5);width:calc(var(--u) * 96);margin:0;padding:calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2);background:#fff;border:var(--b) solid var(--inkt);border-radius:calc(var(--u) * 3);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw);animation:battle-qr-in .3s ease-out}
.battle-qr-knop{position:relative;display:block;padding:0;border:0;background:#fff;line-height:0;cursor:zoom-in}
.battle-qr-knop:focus-visible{outline:2px solid var(--focus,#2C84DB);outline-offset:2px}
.battle-qr.laden .battle-qr-knop{width:calc(var(--u) * 74);height:calc(var(--u) * 74);background:repeating-linear-gradient(45deg,#f1efe6 0 6px,#fff 6px 12px)}
.battle-qr-tekst{font-size:var(--fk);line-height:1.15;text-align:center}
.battle-uri{display:block;max-width:100%;font:10px/1.3 var(--mono,ui-monospace,monospace);color:#5c5a54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all;-webkit-user-select:all;cursor:text}
.battle-qr-noot{margin:0;font-size:max(10px,calc(var(--fk) * .85));line-height:1.15;text-align:center;color:#7a2e65}
.battle-scanlijn{position:absolute;left:0;right:0;top:0;height:max(2px,calc(var(--u) * 1.5));background:var(--wk);box-shadow:0 0 calc(var(--u) * 3) var(--wk);opacity:0;pointer-events:none}
.battle-qr.scant .battle-scanlijn{animation:battle-scan .6s linear}
.battle--groot .battle-qr{z-index:7;right:auto;left:50%;top:calc(var(--u) * 4);width:auto;max-width:calc(100% - var(--u) * 8);transform:translateX(-50%);animation:none}
.battle--groot .battle-qr-tekst,.battle--groot .battle-uri{max-width:calc(var(--u) * 240)}
.battle--groot .battle-qr-knop{cursor:zoom-out}

/* grote kaart bij een uitgifte */
.battle-kaart{position:absolute;z-index:3;right:calc(var(--u) * 16);top:calc(var(--u) * 16);width:calc(var(--u) * 84);height:calc(var(--u) * 54);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--u) * 4) calc(var(--u) * 6);background:var(--k-bg,#2e37b2);color:var(--k-fg,#fff);border:var(--b) solid var(--inkt);border-radius:calc(var(--u) * 4);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw);animation:battle-qr-in .3s ease-out}
.battle-kaart-kort{font-weight:600;font-size:var(--f)}
.battle-kaart-label,.battle-kaart-hoofd,.battle-kaart-uitgever{font-size:var(--fk);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-kaart-uitgever{opacity:.85}

/* tekstvak met het 2×2-menu */
.battle-box{position:absolute;z-index:3;left:calc(var(--u) * 4);right:calc(var(--u) * 4);bottom:calc(var(--u) * 4);height:calc(var(--u) * 44);display:flex;align-items:stretch;background:var(--papier);border:var(--b) solid var(--inkt);border-radius:calc(var(--u) * 3);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw)}
.battle-zin{flex:1;min-width:0;margin:0;padding:calc(var(--u) * 5) calc(var(--u) * 8);font-size:var(--f);line-height:1.3;overflow:hidden}
.battle-zin-rest{visibility:hidden}
.battle-verder{position:absolute;right:calc(var(--u) * 7);bottom:calc(var(--u) * 3);font-size:var(--fk);animation:battle-knip 1s steps(1) infinite}
.battle-box.met-menu .battle-verder{display:none}
.battle-box.met-paneel .battle-zin{margin-right:calc(var(--u) * 150)}
.battle-box.met-paneel .battle-verder{display:none}
.battle-menu{flex:none;width:calc(var(--u) * 136);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:calc(var(--u) * 2) calc(var(--u) * 4);border-left:var(--b) solid var(--inkt)}
.battle-menu:has(> :only-child){grid-template-columns:1fr;grid-template-rows:1fr}
.battle-knop{position:relative;display:flex;align-items:center;min-width:0;margin:0;padding:0 calc(var(--u) * 2) 0 calc(var(--u) * 10);border:0;border-radius:calc(var(--u) * 2);background:none;color:var(--inkt);font:inherit;font-size:var(--f);font-weight:600;text-align:left;white-space:nowrap;cursor:pointer}
.battle-knop::before{content:"";position:absolute;left:calc(var(--u) * 2.5);top:50%;border-style:solid;border-width:calc(var(--u) * 3.5) 0 calc(var(--u) * 3.5) calc(var(--u) * 5);border-color:transparent transparent transparent var(--inkt);transform:translateY(-50%);opacity:0}
.battle-knop:focus::before{opacity:1}
:is(.battle-menu,.battle-paneel):not(:focus-within) .battle-knop:hover::before{opacity:1}
.battle-menu:not(:focus-within):not(:hover) .battle-knop:first-child::before{opacity:.4}
.battle-knop:focus{outline:none}
.battle-knop:focus-visible{background:#f1e9cf}

/* panelen: wallet kiezen, gegevens, stoppen */
.battle-paneel{position:absolute;z-index:4;right:calc(var(--u) * 4);bottom:calc(var(--u) * 4);width:calc(var(--u) * 150);display:flex;flex-direction:column;padding:calc(var(--u) * 3) calc(var(--u) * 3);background:var(--papier);border:var(--b) solid var(--inkt);border-radius:calc(var(--u) * 3);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw)}
.battle-paneel[data-soort="info"]{left:calc(var(--u) * 4);top:calc(var(--u) * 4);bottom:calc(var(--u) * 52);width:auto;padding:calc(var(--u) * 5) calc(var(--u) * 8);overflow:auto;user-select:text;-webkit-user-select:text}
.battle-paneel[data-soort="stopvraag"]{width:calc(var(--u) * 130)}
.battle-rij{flex-direction:column;align-items:flex-start;justify-content:center;min-height:calc(var(--u) * 15);padding-top:calc(var(--u) * 1.5);padding-bottom:calc(var(--u) * 1.5);line-height:1.15;white-space:normal}
.battle-rij-sub{font-size:var(--fk);font-weight:500;opacity:.78}
.battle-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:calc(var(--u) * 1.5) calc(var(--u) * 8);margin:0 0 calc(var(--u) * 3);font-size:var(--fk);line-height:1.25}
.battle-dl dt{font-weight:600}
.battle-dl dd{margin:0;overflow-wrap:anywhere}
.battle-paneel[data-soort="info"] .battle-rij{align-self:flex-start;min-height:0}

/* telefoon (NP Wallet blauw, Business Wallet magenta): echte app-teksten in de app-letter */
.battle-tel{position:absolute;z-index:6;right:calc(var(--u) * 10);top:calc(var(--u) * 4);bottom:calc(var(--u) * 52);width:calc(var(--u) * 150);display:flex;flex-direction:column;background:#fff;color:#152a62;border:max(2px,calc(var(--u) * 3)) solid #1d1d22;border-radius:calc(var(--u) * 9);box-shadow:calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--schaduw);font-family:var(--sans,system-ui),sans-serif;font-weight:400;overflow:hidden;user-select:text;-webkit-user-select:text;animation:battle-tel-in .2s ease-out}
.battle-tel-kop{flex:none;padding:calc(var(--u) * 3) calc(var(--u) * 6);background:var(--wk);color:#fff;font-weight:600;font-size:max(11px,calc(var(--u) * 6));text-align:center;letter-spacing:.01em}
.battle-tel-body{flex:1;min-height:0;overflow:auto;padding:calc(var(--u) * 4.5) calc(var(--u) * 7) calc(var(--u) * 3);display:flex;flex-direction:column;gap:calc(var(--u) * 2.6)}
.battle-tel-voet{flex:none;display:flex;gap:calc(var(--u) * 4);padding:calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 5);background:#fff}
.battle-tel-body:has(+ .battle-tel-voet:not([hidden])){padding-bottom:calc(var(--u) * 2)}
.battle-tel-titel{margin:0;font-weight:700;font-size:max(12px,calc(var(--u) * 6.8));line-height:1.22}
.battle-tel-tekst,.battle-tel-doel{margin:0;font-size:max(11px,calc(var(--u) * 5.6));line-height:1.35;color:#3f4a6b}
.battle-tel-lijst{display:grid;grid-template-columns:fit-content(46%) minmax(0,1fr);gap:calc(var(--u) * .6) calc(var(--u) * 5);margin:0;padding:calc(var(--u) * 2.5) calc(var(--u) * 4);border-radius:calc(var(--u) * 3);background:#f2f4fb;font-size:max(11px,calc(var(--u) * 5.6));line-height:1.25}
.battle-tel-lijst dt{color:#56617f;overflow-wrap:anywhere}
.battle-tel-lijst dd{margin:0;font-weight:600;overflow-wrap:break-word;min-width:0}
.battle-tel-knop{flex:1;min-height:max(32px,calc(var(--u) * 15));border:max(1px,calc(var(--u) * .7)) solid var(--wk);border-radius:calc(var(--u) * 4);background:#fff;color:var(--wk);font:600 max(12px,calc(var(--u) * 6.4))/1 var(--sans,system-ui),sans-serif;cursor:pointer}
.battle-tel-knop:hover{background:#f2f2fd}
.battle-tel-knop.primair{background:var(--wk);color:#fff}
.battle-tel-knop.primair:hover{background:var(--wk-hover);border-color:var(--wk-hover)}
.battle-tel-knop:focus{outline:none}
.battle-tel-knop:focus-visible{outline:2px solid var(--focus,#2C84DB);outline-offset:2px}
.battle-tel-pin{display:flex;justify-content:center;gap:calc(var(--u) * 4);margin:calc(var(--u) * 6) 0}
.battle-tel-pin i{width:max(9px,calc(var(--u) * 6));height:max(9px,calc(var(--u) * 6));border:max(2px,calc(var(--u) * .9)) solid var(--wk);border-radius:50%;animation:battle-pin .01s linear both;animation-delay:calc(var(--i) * 116ms)}
.battle-tel-vink{align-self:center;display:grid;place-items:center;width:max(40px,calc(var(--u) * 28));height:max(40px,calc(var(--u) * 28));margin-top:calc(var(--u) * 6);border-radius:50%;background:#3d8540;color:#fff}
.battle-tel-vink .battle-tel-svg{width:60%;height:60%;stroke-width:3}
.battle-tel-svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.battle-tel[data-wallet] .battle-tel-body:has(.battle-tel-vink),.battle-tel-body:has(.battle-tel-wacht){align-items:center;text-align:center}
.battle-tel-wacht{position:relative;display:grid;place-items:center;width:max(44px,calc(var(--u) * 30));height:max(44px,calc(var(--u) * 30));margin-top:calc(var(--u) * 8);color:var(--wk)}
.battle-tel-wacht .battle-tel-svg{width:70%;height:70%}
.battle-tel-wacht::after{content:"";position:absolute;inset:0;border:max(2px,calc(var(--u) * .9)) solid var(--wk);border-radius:50%;animation:battle-puls 1.4s ease-out infinite}
.battle-tel-link{flex:1;padding:calc(var(--u) * 2);border:0;background:none;color:var(--wk);font:inherit;font-size:max(11px,calc(var(--u) * 5.4));text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* effecten */
.battle-fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.battle-pakket{position:absolute;width:calc(var(--u) * 11);height:calc(var(--u) * 7.5);border:max(1px,calc(var(--b) * .6)) solid var(--inkt);border-radius:max(1px,calc(var(--u) * 1));box-shadow:inset 0 calc(var(--u) * 2) 0 rgba(255,255,255,.55)}
.battle-ster{position:absolute;width:calc(var(--u) * 8);height:calc(var(--u) * 8);background:#f6d36b;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:battle-ster .7s steps(5) both}

/* kleine overlays (telefoon, mobiel): telefoon en gegevens over het hele vlak */
.battle--klein .battle-tel{left:calc(var(--u) * 6);right:calc(var(--u) * 6);top:calc(var(--u) * 4);bottom:calc(var(--u) * 4);width:auto;border-radius:calc(var(--u) * 7)}
.battle--klein .battle-paneel[data-soort="info"]{bottom:calc(var(--u) * 4)}
.battle--klein .battle-box{left:calc(var(--u) * 2);right:calc(var(--u) * 2);bottom:calc(var(--u) * 2);height:calc(var(--u) * 50)}
.battle--klein .battle-zin{padding:calc(var(--u) * 3) calc(var(--u) * 5)}
.battle--klein .battle-menu{width:calc(var(--u) * 140);padding:calc(var(--u) * 1) calc(var(--u) * 2)}
.battle--klein .battle-uri{display:none}

@keyframes battle-onthul{0%{opacity:0}50%{opacity:1}}
@keyframes battle-balk{0%{transform:translateX(-101%)}45%,55%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes battle-balk-r{0%{transform:translateX(101%)}45%,55%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes battle-adem{50%{transform:translateY(var(--u))}}
@keyframes battle-raak{0%{transform:translateX(calc(var(--u) * 3))}50%{transform:translateX(calc(var(--u) * -3))}}
@keyframes battle-hop{50%{transform:translateY(calc(var(--u) * -6))}}
@keyframes battle-spring{0%{transform:translateY(calc(var(--u) * 10)) scale(.6)}60%{transform:translateY(calc(var(--u) * -6)) scale(1.05)}100%{transform:none}}
@keyframes battle-schud{25%{transform:rotate(-9deg) translateX(calc(var(--u) * -3))}75%{transform:rotate(9deg) translateX(calc(var(--u) * 3))}}
@keyframes battle-qr-in{from{opacity:0;transform:translate(calc(var(--u) * -40),calc(var(--u) * 30)) scale(.2)}}
@keyframes battle-scan{0%{top:3%;opacity:.95}100%{top:95%;opacity:.95}}
@keyframes battle-knip{50%{opacity:0}}
@keyframes battle-tel-in{from{opacity:0;transform:translateY(calc(var(--u) * 14))}}
@keyframes battle-pin{to{background:var(--wk)}}
@keyframes battle-puls{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes battle-ster{0%{transform:scale(0) rotate(0)}40%{transform:scale(1.3) rotate(45deg)}100%{transform:scale(0) rotate(90deg);opacity:0}}

/* ---------- Chatkaart (Claude-stijl, zoals de tool-blokken; licht en donker via eigen tokens) ---------- */
.wb-kaart{--wb-pil:#9a3f22;--wb-pil-bg:var(--accent-soft,#F6E4DC);--wb-pil-ok:#276b44;--wb-k:#383ede;--wb-k-hover:#0c1195;--wb-k-tekst:#383ede;--wb-ok:#3d8540;--wb-ok-tekst:#2f7a4f;--wb-fout:#ab0065;--wb-fout-tekst:#ab0065;--wb-vlak:var(--surface-2,#F5F4ED);--wb-qr-rand:rgba(31,30,29,.18);position:relative;font-family:var(--sans,system-ui),sans-serif;font-size:14px;line-height:1.4;color:var(--ink,#141413);background:var(--surface,#fff);border:1px solid var(--line,rgba(31,30,29,.15));border-radius:12px;overflow:hidden}
.wb-kaart[data-wallet="bw"]{--wb-k:#aa418c;--wb-k-hover:#7a2e65;--wb-k-tekst:#aa418c}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wb-kaart{--wb-pil:#f0a58a;--wb-pil-ok:#8fd3a8;--wb-k-tekst:#a9acff;--wb-ok-tekst:#7FC79A;--wb-fout-tekst:#f290c4;--wb-qr-rand:rgba(222,220,209,.25)}
  :root:not([data-theme="light"]) .wb-kaart[data-wallet="bw"]{--wb-k-tekst:#e79bd2}
}
:root[data-theme="dark"] .wb-kaart{--wb-pil:#f0a58a;--wb-pil-ok:#8fd3a8;--wb-k-tekst:#a9acff;--wb-ok-tekst:#7FC79A;--wb-fout-tekst:#f290c4;--wb-qr-rand:rgba(222,220,209,.25)}
:root[data-theme="dark"] .wb-kaart[data-wallet="bw"]{--wb-k-tekst:#e79bd2}
.wb-kaart .wb-kop{display:flex;align-items:center;gap:10px;padding:9px 12px}
.wb-kaart .wb-kop.klikbaar{cursor:pointer}
.wb-kaart .wb-kop.klikbaar:hover{background:var(--wb-vlak)}
.wb-kaart .wb-kop.klikbaar:focus-visible{outline:2px solid var(--focus,#2C84DB);outline-offset:-2px}
.wb-kaart .wb-icoon{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:var(--wb-k);color:#fff}
.wb-kaart .wb-svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-kaart .wb-koptekst{flex:1;min-width:0;display:flex;flex-direction:column}
.wb-kaart .wb-titel{font-weight:500;overflow-wrap:anywhere}
.wb-kaart .wb-sub{color:var(--muted,#73726C);font-size:13px;overflow-wrap:anywhere}
.wb-kaart .wb-pil{flex:none;padding:2px 9px;border-radius:999px;background:var(--wb-pil-bg);color:var(--wb-pil);font-size:12px;font-weight:500;white-space:nowrap}
.wb-kaart .wb-pil[data-toon="ok"]{background:var(--ok-bg,#E6F0E4);color:var(--wb-pil-ok)}
.wb-kaart .wb-pil[data-toon="fout"]{background:var(--danger-bg,#FBEAE5);color:var(--danger,#B4462E)}
.wb-kaart .wb-pil[data-toon="uit"]{background:var(--wb-vlak);color:var(--muted,#73726C)}
.wb-kaart .wb-chev{color:var(--muted,#73726C);transition:transform .2s}
.wb-kaart .wb-kop[aria-expanded="true"] .wb-chev{transform:rotate(180deg)}
.wb-kaart .wb-body{display:flex;flex-direction:column;gap:12px;padding:12px;border-top:1px solid var(--line,rgba(31,30,29,.15))}
.wb-kaart .wb-rij{display:flex;align-items:flex-start;gap:16px}
.wb-kaart .wb-qr{flex:none;max-width:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.wb-kaart .wb-qr-knop{position:relative;display:block;padding:0;border:1px solid var(--wb-qr-rand);border-radius:8px;background:#fff;line-height:0;overflow:hidden;cursor:zoom-in}
.wb-kaart .wb-qr-knop:focus-visible{outline:2px solid var(--focus,#2C84DB);outline-offset:2px}
.wb-kaart .wb-qr-knop canvas{display:block;image-rendering:pixelated}
.wb-kaart .wb-qr-laden{display:grid;place-items:center;width:100%;height:100%;min-height:132px;padding:10px;color:#73726C;font-size:12.5px;line-height:1.3;background:repeating-linear-gradient(45deg,#f4f3ee 0 7px,#fff 7px 14px)}
.wb-kaart .wb-qr.scant .wb-qr-knop::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--wb-k);box-shadow:0 0 6px var(--wb-k);animation:battle-scan .6s linear}
.wb-kaart .wb-qr-tekst{max-width:190px;font-size:12.5px;line-height:1.35;text-align:center;color:var(--ink-2,#3D3D3A)}
.wb-kaart .wb-uri-rij{display:flex;align-items:center;gap:2px;width:100%;max-width:190px}
.wb-kaart .wb-uri{flex:1;min-width:0;font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--muted,#73726C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all;-webkit-user-select:all}
.wb-kaart .wb-icoonknop{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--muted,#73726C);cursor:pointer}
.wb-kaart .wb-icoonknop:hover{background:var(--hover,#F0EEE6);color:var(--ink,#141413)}
.wb-kaart .wb-icoonknop .wb-svg{width:14px;height:14px}
.wb-kaart .wb-info{flex:1;min-width:0}
.wb-kaart .wb-label{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--muted,#73726C)}
.wb-kaart .wb-claims{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;padding:0;list-style:none}
.wb-kaart .wb-claims li{padding:1px 8px;border:1px solid var(--line,rgba(31,30,29,.15));border-radius:6px;background:var(--wb-vlak);font-size:12.5px;line-height:1.5}
.wb-kaart .wb-doel{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2,#3D3D3A)}
.wb-kaart .wb-doel-lbl{font-weight:500;color:var(--muted,#73726C)}
.wb-kaart .wb-telwacht{position:relative;flex:none;display:grid;place-items:center;width:96px;height:96px;margin:10px 18px;color:var(--wb-k-tekst)}
.wb-kaart .wb-telwacht-svg{width:52px;height:52px;stroke-width:1.6}
.wb-kaart .wb-telwacht::after{content:"";position:absolute;inset:6px;border:2px solid var(--wb-k-tekst);border-radius:50%;animation:battle-puls 1.4s ease-out infinite}
.wb-kaart .wb-acties{margin:0}
.wb-kaart .wb-acties:empty{display:none}
.wb-kaart .wb-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wb-kaart .wb-knop{height:32px;padding:0 12px;border:1px solid var(--line-strong,rgba(31,30,29,.3));border-radius:8px;background:var(--surface,#fff);color:var(--ink,#141413);font:500 14px/1 var(--sans,system-ui),sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s}
.wb-kaart .wb-knop:hover{background:var(--hover,#F0EEE6)}
.wb-kaart .wb-knop.primair{background:var(--wb-k);border-color:var(--wb-k);color:#fff}
.wb-kaart .wb-knop.primair:hover{background:var(--wb-k-hover);border-color:var(--wb-k-hover)}
.wb-kaart .wb-knop.gevaar{background:var(--wb-fout);border-color:var(--wb-fout);color:#fff}
.wb-kaart .wb-knop.gevaar:hover{background:#86004f;border-color:#86004f}
.wb-kaart .wb-knop.stil{border-color:transparent;background:none;color:var(--muted,#73726C)}
.wb-kaart .wb-knop.stil:hover{background:var(--hover,#F0EEE6);color:var(--ink,#141413)}
.wb-kaart .wb-knop:focus-visible,.wb-kaart .wb-link:focus-visible{outline:2px solid var(--focus,#2C84DB);outline-offset:2px}
.wb-kaart .wb-link{padding:0;border:0;background:none;color:var(--wb-k-tekst);font:inherit;font-size:13px;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wb-kaart .wb-kies-lbl{font-size:13.5px;color:var(--ink-2,#3D3D3A)}
.wb-kaart .wb-toestemming{padding:12px 14px;border:1px solid var(--line,rgba(31,30,29,.15));border-left:3px solid var(--wb-k);border-radius:10px;background:var(--wb-vlak)}
.wb-kaart .wb-vraag{margin:0 0 8px;font-weight:500}
.wb-kaart .wb-waarden{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:3px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.4}
.wb-kaart .wb-waarden dt{color:var(--muted,#73726C)}
.wb-kaart .wb-waarden dd{margin:0;overflow-wrap:anywhere}
.wb-kaart .wb-pin{display:flex;gap:8px;margin:2px 0 4px}
.wb-kaart .wb-pin i{width:12px;height:12px;border:2px solid var(--wb-k-tekst);border-radius:50%;animation:wb-pin .01s linear both;animation-delay:calc(var(--i) * 116ms)}
.wb-kaart .wb-gelukt{display:flex;align-items:center;gap:7px;margin:0;color:var(--wb-ok-tekst)}
.wb-kaart .wb-gelukt strong{font-weight:600}
.wb-kaart .wb-gelukt .wb-svg{width:18px;height:18px;stroke-width:2.6}
.wb-kaart .wb-bezig,.wb-kaart .wb-instructie{margin:0;color:var(--muted,#73726C);font-size:13.5px}
.wb-kaart .wb-instructie{margin-bottom:8px;color:var(--ink,#141413);font-weight:500}
.wb-kaart li+li{margin-top:0}
.wb-kaart .wb-regels{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.4}
.wb-kaart .wb-regels:empty{display:none}
.wb-kaart .wb-regel{display:flex;align-items:center;gap:8px;color:var(--ink-2,#3D3D3A);overflow-wrap:anywhere}
.wb-kaart .wb-regel .wb-svg{width:14px;height:14px}
.wb-kaart .wb-regel.ok .wb-svg{color:var(--wb-ok-tekst)}
.wb-kaart .wb-regel.fout{color:var(--wb-fout-tekst)}
.wb-kaart .wb-draai{flex:none;width:12px;height:12px;margin:0 1px;border:2px solid var(--line-strong,rgba(31,30,29,.3));border-top-color:var(--wb-k-tekst);border-radius:50%;animation:wb-draai .8s linear infinite}
.wb-kaart .wb-punt{flex:none;width:6px;height:6px;margin:0 4px;border-radius:50%;background:var(--muted,#73726C)}
.wb-kaart .wb-noot{margin:0;padding:6px 10px;border-radius:8px;background:var(--wb-vlak);color:var(--ink-2,#3D3D3A);font-size:12.5px;line-height:1.45}
.wb-kaart .wb-slot{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line,rgba(31,30,29,.15));font-size:13.5px;line-height:1.4}
.wb-kaart .wb-slot-icoon{flex:none;width:32px;height:32px}
.wb-kaart .wb-slot-icoon canvas{display:block;width:32px;height:32px;image-rendering:auto}
.wb-kaart .wb-slot-kaart{flex:none;width:28px;height:20px;display:grid;place-items:center;border-radius:5px;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.wb-kaart .wb-slot-kaart .wb-svg{width:14px;height:14px}
.wb-kaart .wb-slot-kol{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wb-kaart .wb-slot-tekst{overflow-wrap:anywhere}
.wb-kaart .wb-strip{font-family:"Pixelify Sans",var(--sans,system-ui),sans-serif;font-size:12.5px;line-height:1.35;color:var(--muted,#73726C)}
.wb-kaart .wb-slot[data-uitkomst="gewonnen"] .wb-strip,.wb-kaart .wb-slot[data-uitkomst="gevangen"] .wb-strip{color:var(--wb-ok-tekst)}
.wb-kaart .wb-detail{padding:10px 12px 4px;border-top:1px solid var(--line,rgba(31,30,29,.15));background:var(--code-bg,#F5F4ED)}
.wb-kaart .wb-meta{font-size:12.5px}
.wb-kaart .wb-live{padding:8px 12px 12px;border-top:1px dashed var(--line,rgba(31,30,29,.15))}
.wb-kaart .wb-live .wb-qr{align-items:flex-start;margin-top:8px}
.wb-kaart .wb-live .wb-uri{max-width:220px}
.wb-kaart .wb-mini{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 10px;max-width:320px;padding:12px 14px;border-radius:12px;background:var(--k-bg,#2e37b2);color:var(--k-fg,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.wb-kaart .wb-mini-label{font-weight:600}
.wb-kaart .wb-mini-type{padding:1px 7px;border-radius:6px;background:color-mix(in srgb,var(--k-fg,#fff) 16%,transparent);font-size:11.5px;font-weight:600;letter-spacing:.03em;align-self:start}
.wb-kaart .wb-mini-hoofd,.wb-kaart .wb-mini-uitgever{grid-column:1 / -1;font-size:12.5px;opacity:.9}
.wb-kaart[data-soort="uitgifte"] .wb-vraag{margin:0}
.wb-kaart .wb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes wb-pin{to{background:var(--wb-k-tekst)}}
@keyframes wb-draai{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .wb-kaart .wb-rij{flex-direction:column;align-items:stretch;gap:12px}
  .wb-kaart .wb-qr{align-self:center}
  .wb-kaart .wb-telwacht{align-self:center}
}

/* ---------- Toegankelijkheid: minder beweging, meer contrast ---------- */
.battle--kort,.battle--kort *{animation:none !important;transition:none !important}
.battle--kort .battle-tel-pin i{background:var(--wk)}
@media (prefers-reduced-motion:reduce){
  .battle,.battle *,.wb-kaart *{animation:none !important;transition:none !important}
  .battle-tel-pin i{background:var(--wk)}
  .wb-pin i{background:var(--wb-k-tekst)}
  .wb-draai{border-top-color:var(--line-strong,rgba(31,30,29,.3));border-color:var(--wb-k-tekst)}
}
@media (prefers-contrast:more){
  .battle-hud,.battle-box,.battle-paneel,.battle-qr{border-width:max(2px,calc(var(--b) + 1px))}
  .wb-kaart,.wb-knop{border-color:var(--ink,#141413)}
}