/**
 * Kraai: huisstijl, spel op gsm en desktop, laadscherm, tutorial en landing.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

@import url(fonts.css);

:root{
  --bg:#0b0d11; --bg2:#12151b; --panel:#171b23; --panel2:#1c212b; --line:#262c38;
  --fg:#ececea; --muted:#9aa1ae; --dim:#848c9b;
  --tape:#f0c330; --tape-ink:#0b0d11; --sheen:#2b3a5c;
  --stamp:#d8352e; --ok:#3fc27a; --warn:#f08a2c; --violet:#a98bff;
  --paper:#efeadd; --ink:#171512;
  --display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --gut:max(16px,var(--sal));
  --gutr:max(16px,var(--sar));
  --stripes:repeating-linear-gradient(135deg,var(--tape) 0 14px,var(--bg) 14px 22px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.4}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1;letter-spacing:.02em;text-transform:uppercase}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--tape)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--tape);outline-offset:2px}
input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:12px;width:100%;border-radius:0}
input:focus{border-color:var(--tape);outline:none}
label{display:grid;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Logo met weggelakte i */
.logo{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;display:inline-flex;align-items:baseline;white-space:nowrap;color:var(--fg)}
.logo .i{display:inline-block;width:.2em;height:.72em;background:var(--tape);margin-left:.05em;transform-origin:left center}
.logo .tld{color:var(--tape);font-size:.42em;letter-spacing:.06em;margin-left:.1em}
.logo.anim .i{animation:redact .7s cubic-bezier(.7,0,.2,1) .2s both}
@keyframes redact{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Bouwstenen */
.card{border:1px solid var(--line);background:var(--panel);padding:12px;display:grid;gap:8px;min-width:0;align-content:start}
.card.hot{border-color:var(--tape)}
.card.vio{border-color:var(--violet)}
.card.bad{border-color:var(--stamp)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kv span{color:var(--muted);font-size:12px}
.kv b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.hint{font-size:13px;color:var(--muted)}
.hint b{color:var(--fg);font-weight:600}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.y{border-color:var(--tape);color:var(--tape)}
.chip.r{border-color:var(--stamp);color:var(--stamp)}
.chip.g{border-color:var(--ok);color:var(--ok)}
.chip.o{border-color:var(--warn);color:var(--warn)}
.chip.v{border-color:var(--violet);color:var(--violet)}
.btn{display:block;background:var(--tape);color:var(--tape-ink);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:14px 12px;text-align:center;font-size:18px;width:100%;text-decoration:none}
.btn small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:none;opacity:.75;margin-top:2px}
.btn.sec{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ok{background:var(--ok);color:#06210f}
.btn.vio{background:var(--violet);color:#120b26}
.btn.danger{background:var(--stamp);color:#fff}
.btn.dis,.btn:disabled{opacity:.35;pointer-events:none}
.btn.sm{padding:9px 10px;font-size:15px}
.btn:active{transform:translateY(1px)}
.link{font-family:var(--mono);font-size:13px;padding:10px 4px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;justify-self:center}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.bar{height:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--tape);transition:width .35s ease-out}
.bar.v i{background:var(--violet)}
.stamp{display:inline-block;border:3px solid var(--stamp);color:var(--stamp);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;transform:rotate(-4deg);font-size:18px;justify-self:start}
.stamp.y{border-color:var(--tape);color:var(--tape)}
.stamp.v{border-color:var(--violet);color:var(--violet)}
.stamp.g{border-color:var(--ok);color:var(--ok)}
.stamp.slam{animation:slam .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{from{transform:scale(2.2) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-4deg);opacity:1}}
.tape{height:10px;background:var(--stripes)}
.speech{position:relative;background:var(--fg);color:var(--bg);padding:10px 12px;font-weight:600;font-size:14px;line-height:1.35}
.speech::after{content:"";position:absolute;left:22px;bottom:-10px;border:10px solid transparent;border-top-color:var(--fg);border-bottom:0}
.graai{display:block;width:100%;height:auto;aspect-ratio:1/1}

/* Laadscherm */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:24px;transition:opacity .25s ease-out}
#loader.out{opacity:0;pointer-events:none}
#loader::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:var(--stripes)}
#loader .box{display:grid;justify-items:center;gap:14px;text-align:center;width:min(320px,100%)}
#loader .pic{width:150px;background:var(--tape);padding:10px}
#loader .pic img{animation:bob 1.6s ease-in-out infinite}
#loader .logo{font-size:44px}
#loader .load{width:100%;height:10px;background:var(--line);overflow:hidden;position:relative}
#loader .load i{position:absolute;inset:0;width:200%;background:repeating-linear-gradient(135deg,var(--tape) 0 10px,var(--bg) 10px 14px);animation:crawl 1s linear infinite}
#loader .tip{font-size:14px;color:var(--muted);max-width:30ch;min-height:2.8em}
#loader .st{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tape)}
#loader.err .st{color:var(--stamp)}
@keyframes crawl{to{transform:translateX(-28px)}}
@keyframes bob{50%{transform:translateY(-5px) rotate(-1.5deg)}}

/* Spelindeling: gsm eerst */
body.game{height:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
html:has(body.game){height:100%}
#app{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"top" "mission" "main" "tabs"}
#app.hot{animation:hot 1.6s ease-in-out infinite}
@keyframes hot{50%{box-shadow:inset 0 0 0 3px rgba(216,53,46,.55),inset 0 0 40px rgba(216,53,46,.25)}}
.side,.rail{display:none}

.top{grid-area:top;padding:calc(var(--sat) + 10px) var(--gutr) 10px var(--gut);background:var(--bg2);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center}
.top .me{width:38px;height:38px;background:var(--tape);display:block;overflow:hidden}
.top .me img{width:100%;height:100%;display:block;object-fit:cover}
.who{display:grid;line-height:1.15;min-width:0}
.who b{font-family:var(--display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:8px;align-items:center;min-width:0}
.who b .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who b em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--violet);color:var(--violet);padding:1px 5px;flex:none}
.who b.legend .nm{color:var(--tape)}
.who span{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;border:1px solid var(--line);padding:4px 8px;min-height:44px;line-height:1}
.idx span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;grid-column:1;grid-row:1}
.idx small{font-family:var(--mono);font-size:10px;color:var(--fg);letter-spacing:.04em;grid-column:1;grid-row:2}
.idx b{font-family:var(--display);font-size:28px;color:var(--tape);grid-column:2;grid-row:1/3}
.help{min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}

.mission{grid-area:mission;background:var(--bg2);border-bottom:1px solid var(--line);padding:2px var(--gutr) 10px var(--gut);display:grid;gap:6px;width:100%;text-align:left}
.mission .m1{display:flex;justify-content:space-between;gap:10px;align-items:center}
.mission small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tape);white-space:nowrap}
.mission .rw{font-family:var(--mono);font-size:11px;color:var(--fg);white-space:nowrap;border:1px solid var(--line);padding:1px 6px}
.mission .mt{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission .m2{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.mission .mn{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.mission .go{font-family:var(--display);font-size:22px;color:var(--tape);line-height:.6}
.mission.ready{background:linear-gradient(180deg,var(--bg2),#2a2510)}
.mission.ready .mn{color:var(--tape)}

#main{grid-area:main;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.screen{display:none;padding:14px var(--gutr) 28px var(--gut);gap:12px;grid-auto-rows:max-content;grid-template-columns:minmax(0,1fr)}
.screen.on{display:grid}
.ttl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ttl h2{font-size:30px;font-weight:800}
.ttl span{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* Graai-kaart in het scherm (gsm) */
.tipcard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.tipcard .pic{background:var(--tape);aspect-ratio:1/1}
.tipcard .speech::after{left:-10px;top:14px;bottom:auto;border:10px solid transparent;border-right-color:var(--fg);border-left:0}

/* Nacht */
.pips{display:flex;gap:4px}
.pips i{flex:1;height:10px;background:var(--line)}
.pips i.on{background:var(--tape)}
.how{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 10px;align-items:start}
.how b.n{font-family:var(--display);font-size:22px;color:var(--tape);line-height:1}
.how p{font-size:14px;color:var(--muted)}
.how p strong{color:var(--fg);font-weight:600}
.hud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.hud .card{gap:2px;padding:10px 12px}
.hud small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hud .v{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.heat .track{height:14px;background:linear-gradient(90deg,#1e3a2a 0%,#3a3315 45%,#3d1f12 70%,#3f1210 100%);position:relative;overflow:hidden}
.heat .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ok),var(--tape) 45%,var(--warn) 70%,var(--stamp));transition:width .4s ease-out}
.crimes{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.crime{border:1px solid var(--line);background:var(--panel);padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;transition:transform .1s,border-color .15s;position:relative}
.crime:active{transform:scale(.985)}
.crime .nm{font-weight:600;font-size:16px}
.crime .wh{font-size:12px;color:var(--muted);grid-column:1}
.crime .gain{grid-row:1/3;grid-column:2;text-align:right;display:grid;gap:2px}
.crime .gain b{font-family:var(--display);font-size:26px;font-weight:800;color:var(--tape);line-height:1;font-variant-numeric:tabular-nums}
.crime .gain span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.crime .meta{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.crime .key{display:none}
.crime.busy{border-color:var(--tape);animation:pulse .45s ease-in-out infinite alternate}
.crimes.locked .crime:not(.busy){opacity:.5;pointer-events:none}
@keyframes pulse{from{background:var(--panel)}to{background:#2a2510}}
.bankbtn{position:sticky;bottom:0;padding-top:6px;background:linear-gradient(180deg,transparent,var(--bg) 30%)}

/* Crew */
.seg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));padding:4px var(--gutr) 2px var(--gut)}
.seg::-webkit-scrollbar{display:none}
.seg button{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 14px;min-height:44px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;position:relative}
.seg button.on{border-color:var(--tape);color:var(--tape)}
.seg button i{position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--tape)}
.ups{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.up{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.up .nm{font-weight:600;font-size:16px}
.up .lv{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.up .fl{grid-column:1/-1;font-size:12px;color:var(--muted)}
.up .ef{grid-column:1/-1;font-family:var(--mono);font-size:12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.up .ef b{color:var(--fg);font-weight:600}
.up .ef .to{color:var(--ok)}
.up .pp{grid-column:1/-1;display:flex;gap:3px}
.up .pp i{flex:1;height:5px;background:var(--line)}
.up .pp i.on{background:var(--tape)}
.up .btn{grid-column:1/-1;margin-top:4px}
.bonus{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13px}
.bonus span{color:var(--muted)}
.bonus b{font-family:var(--mono);font-size:12px;text-align:right}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}
.chev{display:inline-block;transition:transform .2s}

/* Lijst en garage */
.lb{display:grid;gap:6px}
.lb .lr{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);font-size:14px;background:var(--panel);width:100%}
.lb button.lr:hover{border-color:var(--dim)}
.lb .lr.me{border-color:var(--tape);background:#1d1a0f}
.lb .lr.gap{border-style:dashed;background:transparent;justify-content:center;grid-template-columns:1fr;text-align:center;color:var(--dim);padding:2px}
.lb .n{font-family:var(--display);font-size:20px;color:var(--tape);font-weight:800}
.lb .s{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.lb .d{display:flex;gap:6px;align-items:center;min-width:0}
.lb .d b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prize{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.prize div{border:1px solid var(--line);padding:8px 4px;display:grid;gap:2px}
.prize b{font-family:var(--display);font-size:24px;font-weight:800}
.prize small{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.prize div:first-child{border-color:var(--tape)}
.prize div:first-child b{color:var(--tape)}
.potbig{font-family:var(--display);font-size:44px;font-weight:800;color:var(--tape);line-height:.9}
.car{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center}
.car i{height:28px;border:1.5px solid var(--muted);border-radius:6px 6px 2px 2px;display:block;position:relative;margin-top:6px}
.car i::after{content:"";position:absolute;left:6px;right:6px;top:-7px;height:8px;border:1.5px solid var(--muted);border-bottom:0;border-radius:6px 6px 0 0}
.car.gold i,.car.gold i::after{border-color:var(--tape)}
.car b{font-weight:600;display:block}
.car span{font-size:12px;color:var(--muted);font-family:var(--mono)}
.car .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:14px}
.ranks{display:grid;gap:4px}
.ranks div{display:grid;grid-template-columns:minmax(0,1fr) auto;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.ranks div.on{color:var(--fg)}
.ranks div.on b{color:var(--tape)}
.ranks b{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.ranks span{font-family:var(--mono);font-size:12px}
.ranks small{grid-column:1/-1;font-size:12px}

/* Fixer */
.pnum{font-family:var(--display);font-size:64px;font-weight:800;color:var(--violet);line-height:.9;font-variant-numeric:tabular-nums}
.pnum small{font-size:22px;color:var(--muted)}
.ptrack{display:grid;gap:4px;max-height:360px;overflow-y:auto;padding-right:4px}
.ptrack div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 8px;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.ptrack div b{font-family:var(--display);font-size:18px;font-weight:800;color:var(--dim)}
.ptrack div.done{color:var(--fg);border-color:#3a3160}
.ptrack div.done b{color:var(--violet)}
.ptrack div.next{border-color:var(--violet);background:#1a1530;color:var(--fg)}
.ptrack div.next b{color:var(--violet)}
.ptrack div.mile{border-style:dashed}
.ptrack div.mile.done,.ptrack div.mile.next{border-style:solid}
.ptrack em{font-style:normal;color:var(--tape)}
.ptrack small{display:block;font-family:var(--mono);font-size:10px;color:var(--dim)}
.alibi-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.alibi-row .nm{font-weight:600;font-size:16px}
.alibi-row .lv{font-family:var(--mono);font-size:11px;color:var(--muted)}
.alibi-row .fl{grid-column:1/-1;font-size:12px;color:var(--muted)}
.alibi-row .btn{grid-column:1/-1}

/* Dossier en profiel */
.dos{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}
.dos .pic{background:var(--tape);aspect-ratio:1/1}
.dos h3{font-size:30px;font-weight:800}
.dosnr{font-family:var(--mono);font-size:12px;color:var(--tape);letter-spacing:.08em}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.podium div{border:1px solid var(--line);padding:10px 4px;display:grid;gap:2px}
.podium b{font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.podium small{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.podium .p1 b{color:var(--tape)}
.hist{display:grid;gap:6px}
.hist > div:not(.card){display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);background:var(--panel)}
.hist .pl{font-family:var(--display);font-size:22px;font-weight:800;color:var(--muted)}
.hist .pl.top{color:var(--tape)}
.hist span{font-size:13px}
.hist small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted)}
.hist b{font-family:var(--mono);font-size:12px;text-align:right;font-weight:600}
.form{display:grid;gap:10px}
.err{color:var(--stamp);font-size:13px}

/* Onderbalk */
.tab{grid-area:tabs;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);background:var(--bg2);padding:8px max(6px,var(--sar)) calc(var(--sab) + 10px) max(6px,var(--sal))}
.tab button,.side nav button{display:grid;justify-items:center;gap:3px;font-family:var(--mono);font-size:11px;min-height:48px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 0;position:relative;text-align:center}
.tab button.on,.side nav button.on{color:var(--tape)}
.tab svg,.side nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dot{position:absolute;top:2px;right:22%;width:8px;height:8px;border-radius:50%;background:var(--stamp)}
.dot.v{background:var(--violet)}

/* Meldingen en vellen */
#toasts{position:fixed;left:var(--gut);right:var(--gutr);top:calc(var(--sat) + 104px);display:grid;gap:6px;z-index:70;pointer-events:none;justify-items:center}
.toast{background:var(--tape);color:var(--tape-ink);font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:in .2s ease-out;width:100%;max-width:440px}
.toast.bad{background:var(--stamp);color:#fff}
.toast.ok{background:var(--ok);color:#06210f}
.toast.vio{background:var(--violet);color:#120b26}
@keyframes in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:flex-end;justify-content:center;z-index:60}
#modal.on{display:flex}
#modal .sheet{width:100%;background:var(--bg2);border-top:3px solid var(--tape);padding:18px var(--gutr) calc(var(--sab) + 20px) var(--gut);display:grid;gap:12px;max-height:92%;overflow-y:auto;animation:up .25s ease-out;position:relative;grid-template-columns:minmax(0,1fr)}
#modal .sheet.bad{border-top-color:var(--stamp)}
#modal .sheet.vio{border-top-color:var(--violet)}
#modal .sheet.ok{border-top-color:var(--ok)}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
#modal h3{font-size:30px;font-weight:800}
#modal .big{font-family:var(--display);font-size:56px;font-weight:800;color:var(--tape);line-height:.95;font-variant-numeric:tabular-nums}
#modal .big.red{color:var(--stamp)}
#modal .big.vio{color:var(--violet)}
#modal .big.ok{color:var(--ok)}
.shead{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;align-items:end}
.shead .pic{aspect-ratio:1/1;background:var(--tape)}
.shead .pic.red{background:#3a1715}.shead .pic.vio{background:#231b3d}.shead .pic.green{background:#16301f}.shead .pic.blue{background:#1d2a3f}.shead .pic.dark{background:#22262f}
.shead > div{display:grid;gap:10px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cols .card{gap:4px;font-size:13px}
.cols ul{margin:0;padding-left:16px;color:var(--muted);display:grid;gap:2px}
.slide-dots{display:flex;gap:6px;justify-content:center}
.slide-dots i{width:8px;height:8px;background:var(--line)}
.slide-dots i.on{background:var(--tape)}

/* Tutorial */
#coach{position:fixed;inset:0;z-index:55;pointer-events:none}
#coach .ring{position:fixed;border:2px solid var(--tape);box-shadow:0 0 0 9999px rgba(5,6,9,.72);transition:all .25s ease-out}
#coach.free .ring{box-shadow:none;border:0}
#coach .bubble{position:fixed;left:var(--gut);right:var(--gutr);pointer-events:auto;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;max-width:440px;margin:0 auto;transition:top .25s ease-out}
#coach .bubble .pic{background:var(--tape);aspect-ratio:1/1}
#coach .bubble .txt{background:var(--fg);color:var(--bg);padding:10px 12px;display:grid;gap:8px;font-size:14px;line-height:1.35;font-weight:500}
#coach .bubble .txt b{font-weight:700}
#coach .bubble .acts{display:flex;gap:10px;justify-content:space-between;align-items:center}
#coach .bubble .acts button.go{min-height:40px;background:var(--bg);color:var(--tape);font-family:var(--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;font-size:15px}
#coach .bubble .acts button.skip{font-family:var(--mono);font-size:12px;padding:8px 0;color:#5a5547;text-decoration:underline}
#coach .stepnr{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5a5547}

@media(prefers-reduced-motion:reduce){.toast,.bar i,.heat .fill,.crime.busy,#modal .sheet,.stamp.slam,#app.hot,#loader .pic img,#loader .load i,.logo.anim .i{animation:none;transition:none}}

/* Tablet: twee kolommen klussen en upgrades */
@media(min-width:640px){
  .crimes,.ups{grid-template-columns:repeat(2,minmax(0,1fr))}
  #modal{align-items:center;padding:24px}
  #modal .sheet{max-width:500px;border:1px solid var(--line);border-top:3px solid var(--tape);padding:22px;max-height:88vh}
}

/* Desktop: zijbalk links, spel in het midden */
@media(min-width:960px){
  #app{grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"side top" "side mission" "side main"}
  .tab{display:none}
  .side{grid-area:side;display:flex;flex-direction:column;gap:18px;background:var(--bg2);border-right:1px solid var(--line);padding:0 0 18px;overflow-y:auto;position:relative}
  .side::before{content:"";height:10px;background:var(--stripes);flex:none}
  .side .brand{padding:6px 20px 0}
  .side .brand .logo{font-size:44px}
  .side .brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
  .side nav{display:grid;gap:2px;padding:0 10px}
  .side nav button{grid-template-columns:24px minmax(0,1fr) auto;justify-items:start;align-items:center;gap:12px;padding:10px 12px;font-size:12px;letter-spacing:.1em;border-left:3px solid transparent;width:100%}
  .side nav button:hover{background:var(--panel);color:var(--fg)}
  .side nav button.on{background:var(--panel);border-left-color:var(--tape)}
  .side nav button kbd{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line);padding:0 5px}
  .side nav .dot{position:static;justify-self:end}
  .side .idxbox{margin:0 20px;border:1px solid var(--line);padding:12px;display:grid;gap:4px}
  .side .idxbox b{font-family:var(--display);font-size:40px;color:var(--tape);font-weight:800;line-height:.9}
  .side .idxbox span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
  .side .season{margin:auto 20px 0;display:grid;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .side .season b{font-family:var(--display);font-size:20px;color:var(--fg);letter-spacing:.04em;text-transform:uppercase}
  .top{padding:14px 28px;border-bottom:0}
  .top .help{width:auto;padding:0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .mission{padding:0 28px 12px}
  .screen{padding:22px 28px 40px;max-width:860px;width:100%;margin:0 auto}
  .ttl h2{font-size:40px}
  .crime .key{display:block;position:absolute;left:-1px;top:-1px;font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line);background:var(--bg);padding:0 5px;line-height:16px}
  .crime{padding-top:16px}
  #toasts{left:240px;top:120px}
  #coach .bubble{max-width:460px}
}

/* Breed scherm: Graai en de stand rechts */
@media(min-width:1320px){
  #app{grid-template-columns:240px minmax(0,1fr) 340px;grid-template-areas:"side top rail" "side mission rail" "side main rail"}
  .rail{grid-area:rail;display:flex;flex-direction:column;gap:14px;background:var(--bg2);border-left:1px solid var(--line);padding:20px;overflow-y:auto}
  .rail .graaibox{background:var(--tape);position:relative;display:grid;padding:16px 16px 0;gap:0}
  .rail .graaibox .speech{margin-bottom:14px}
  .rail .graaibox img{width:78%;justify-self:center;animation:bob 3.2s ease-in-out infinite}
  .rail .graaibox .stamp{position:absolute;left:12px;bottom:14px;background:var(--tape);font-size:15px}
  .rail .graaibox.red{background:#3a1715}.rail .graaibox.red .stamp{background:#3a1715}
  .rail .graaibox.vio{background:#231b3d}.rail .graaibox.vio .stamp{background:#231b3d}
  .rail .graaibox.green{background:#16301f}.rail .graaibox.green .stamp{background:#16301f}
  .rail .graaibox.blue{background:#1d2a3f}.rail .graaibox.blue .stamp{background:#1d2a3f}
  .rail .graaibox.dark{background:#22262f}.rail .graaibox.dark .stamp{background:#22262f}
  .rail .mini{display:grid;gap:4px}
  .rail .mini div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}
  .rail .mini div.me b{color:var(--tape)}
  .rail .mini .n{font-family:var(--display);font-weight:800;color:var(--tape)}
  .rail .mini .s{font-family:var(--mono);font-size:12px;color:var(--muted)}
  .rail .mini b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail .keys{font-family:var(--mono);font-size:11px;color:var(--dim);display:grid;gap:4px}
  .rail .keys kbd{font-family:var(--mono);border:1px solid var(--line);padding:0 5px;color:var(--muted)}
  #toasts{right:340px}
  .tipcardwrap,.runtip{display:none}
}

/* Landing en losse pagina's */
body.site{min-height:100vh;display:flex;flex-direction:column}
body.site > main{flex:1 0 auto}
.site-top{position:relative}
.site-top .tape{height:12px}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutr) 0 var(--gut);width:100%}
.hero{display:grid;gap:28px;padding-block:40px 56px;grid-template-columns:minmax(0,1fr)}
.hero .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hero .logo{font-size:clamp(72px,17vw,200px)}
.hero-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.tagline{font-family:var(--display);font-size:clamp(40px,7vw,68px);text-transform:uppercase;font-weight:800;line-height:.92}
.tagline em{font-style:normal;color:var(--tape)}
.lede{color:var(--muted);font-size:18px;max-width:52ch}
.hero .bird{background:var(--tape);position:relative}
.hero .bird .stamp{position:absolute;right:14px;top:14px;background:var(--tape)}
.hero .bird img{animation:bob 3.2s ease-in-out infinite}
.cta{display:grid;gap:10px;max-width:420px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.facts .card b{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em}
.site-foot{border-top:1px solid var(--line);padding:20px var(--gutr) calc(20px + var(--sab)) var(--gut);font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;display:grid;gap:6px}
.panel-page{max-width:560px;margin:0 auto;padding:40px var(--gutr) 40px var(--gut);display:grid;gap:16px;width:100%}
@media(max-width:760px){
  .hero-main{grid-template-columns:minmax(0,1fr)}
  .hero .bird{max-width:260px;justify-self:end;margin-top:-10px}
  .facts{grid-template-columns:minmax(0,1fr)}
}

/* Stripe Checkout in een venster */
.pay{background:#fff;min-height:420px;margin:0 calc(-1 * var(--gut))}
@media(min-width:640px){.pay{margin:0}}

/* Beheer */
.adm .adm-wrap{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.adm-side{background:var(--bg2);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.adm-side nav{display:flex;overflow-x:auto;gap:2px;padding:10px 12px;scrollbar-width:none}
.adm-side nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 10px;white-space:nowrap;border-left:3px solid transparent}
.adm-side nav a.on,.adm-side nav a:hover{color:var(--tape);background:var(--panel)}
.adm-side nav a.on{border-left-color:var(--tape)}
.adm-me{display:none;font-size:12px;color:var(--muted);padding:0 18px 18px;margin-top:auto}
.adm-main{padding:20px var(--gutr) 48px var(--gut);display:grid;gap:14px;align-content:start;min-width:0}
.adm-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.adm-head h1{font-size:40px;font-weight:800}
.adm-flash{background:var(--tape);color:var(--tape-ink);padding:10px 14px;font-weight:600}
.adm-grid2,.adm-grid3,.adm-grid4{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.adm .stat{display:grid;gap:2px}
label .hint{text-transform:none;letter-spacing:0;font-family:var(--body)}
.adm .stat b{font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.adm-t{width:100%;border-collapse:collapse;font-size:13px}
.adm-t th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-t td{padding:7px 10px;border-bottom:1px dashed var(--line);vertical-align:middle}
.adm-t.big td{white-space:nowrap}
.adm-t td.r,.adm-t th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.adm-t .dim,.adm .dim{color:var(--muted)}
.adm-t a{color:var(--fg)}
.adm-t tr.banned td{opacity:.55}
.adm-t tr[data-href]{cursor:pointer}
.adm-t tr[data-href]:hover td{background:var(--panel2)}
.adm-t .chip{margin-right:4px}
.adm-health{display:grid;gap:6px}
.adm-health div{display:grid;grid-template-columns:64px 140px minmax(0,1fr);gap:10px;align-items:center;font-size:13px}
.adm-health span:last-child{color:var(--muted)}
.adm-filter{display:flex;gap:8px;flex-wrap:wrap}
.adm-filter input{flex:1 1 240px;width:auto}
.adm-filter .btn{width:auto}
.adm select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:10px;border-radius:0}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.adm form.inline .btn{width:auto}
.adm form.inline input{padding:8px}
.adm-chips{display:flex;gap:6px;flex-wrap:wrap}
.adm-chips a{text-decoration:none}
.adm-check{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:14px;color:var(--fg)}
.adm-check input{width:auto}
.adm-pages{display:flex;gap:4px;flex-wrap:wrap}
.adm-pages a{font-family:var(--mono);font-size:12px;border:1px solid var(--line);padding:4px 9px;color:var(--muted);text-decoration:none}
.adm-pages a.on{border-color:var(--tape);color:var(--tape)}
.adm-pre{white-space:pre-wrap;font-family:var(--mono);font-size:12px;color:var(--muted);margin:0}
.adm code{font-family:var(--mono);color:var(--tape)}
.adm-live{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.adm-cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.adm-tally{font-size:13px;color:var(--muted);margin:0}
.adm-tally b{color:var(--fg);font-family:var(--mono);font-weight:600}
.adm-feed{display:grid;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;margin:0 -12px;padding:0 12px}
.adm-feed > p{margin:0}
.ev{display:grid;gap:3px;padding:9px 0;border-bottom:1px dashed var(--line)}
.ev:last-child{border-bottom:0}
.ev-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.ev-h a{color:var(--fg);font-weight:600;overflow-wrap:anywhere}
.ev-t{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ev p{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ev.fresh{animation:evIn 3s ease-out}
@keyframes evIn{from{background:rgba(240,195,48,.16)}to{background:transparent}}
.adm-online{display:flex;flex-wrap:wrap;gap:6px}
.adm-online a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:5px 9px;color:var(--fg);text-decoration:none;font-size:13px;min-width:0;max-width:100%}
.adm-online a:hover{border-color:var(--tape)}
.adm-online small{font-family:var(--mono);color:var(--muted);font-size:11px}
.adm-dot{width:8px;height:8px;flex:none;background:var(--ok);border-radius:50%}
.adm-livebtn{position:fixed;right:12px;bottom:12px;z-index:20;display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:8px 12px;cursor:pointer}
.adm-livebtn .adm-dot{animation:admPulse 2s infinite}
.adm-livebtn.off .adm-dot{background:var(--muted);animation:none}
.adm-livebtn:hover{border-color:var(--tape);color:var(--fg)}
@keyframes admPulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.adm-livebtn .adm-dot,.ev.fresh{animation:none}}
/* Beheer op gsm: kop bovenaan, onderbalk, lijsten als kaarten. */
.adm-top,.adm-tabs{display:none}
.adm-sheet[hidden]{display:none}
.adm-search{display:flex;gap:8px}
.adm-search input{flex:1 1 auto;min-width:0}
.adm-search .btn{width:auto}
.adm-chiprow{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));padding:0 var(--gutr) 2px var(--gut)}
.adm-chiprow::-webkit-scrollbar{display:none}
.adm-chiprow .chip{text-decoration:none;padding:6px 10px;flex:none}
.adm-chiprow .label{flex:none;margin-right:2px}
.card.flush{padding:0;overflow-x:auto}
.adm-more summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 0}
.adm-more[open] summary{margin-bottom:6px}
.adm-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.adm-banner span{color:var(--muted);flex:1 1 200px}
.adm-acts{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.adm-act{display:flex;gap:8px;align-items:flex-end;margin:0}
.adm-act label{flex:1 1 auto;min-width:0}
.adm-act input{padding:10px}
.adm-act .btn{width:auto;flex:none}
.adm-danger{border-color:rgba(216,53,46,.45)}
.adm-danger summary{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:28px}
.adm-danger summary .label{color:var(--stamp)}
.adm-danger summary::after{content:'▾';color:var(--stamp);margin-left:auto}
.adm-danger[open] summary::after{content:'▴'}
@media(min-width:760px){.adm-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:999px){
  .adm .adm-side{display:none}
  .adm .adm-wrap{align-content:start}
  .adm-top{display:block;position:sticky;top:0;z-index:15;background:var(--bg);padding-top:var(--sat);border-bottom:1px solid var(--line)}
  .adm-topbar{display:flex;align-items:center;gap:10px;height:50px;padding:0 var(--gutr) 0 var(--gut)}
  .adm-topbar .logo{font-size:26px;text-decoration:none}
  .adm-livebtn{top:calc(var(--sat) + 19px);bottom:auto;right:max(10px,var(--sar));padding:6px 10px;border-color:transparent;background:transparent}
  .adm-main{padding:16px var(--gutr) calc(84px + var(--sab)) var(--gut);gap:12px}
  .adm-head h1{font-size:34px}
  .adm-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg2);border-top:1px solid var(--line);padding:0 var(--sar) var(--sab) var(--sal)}
  .adm-tabs a,.adm-tabs button{display:grid;justify-items:center;gap:3px;padding:9px 2px 8px;min-height:56px;color:var(--muted);text-decoration:none;background:none;border:0;border-top:2px solid transparent;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  .adm-tabs svg{width:22px;height:22px}
  .adm-tabs .on{color:var(--tape);border-top-color:var(--tape)}
  .adm-sheet{position:fixed;inset:0;z-index:40}
  .adm-sheet-bg{position:absolute;inset:0;background:rgba(5,6,8,.6)}
  .adm-sheet-box{position:absolute;left:0;right:0;bottom:0;background:var(--bg2);border-top:2px solid var(--tape);padding:10px 0 calc(66px + var(--sab));display:grid}
  .adm-sheet-box a{padding:15px var(--gutr) 15px var(--gut);color:var(--fg);text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
  .adm-sheet-box a.on{color:var(--tape)}
  .adm-me-m{padding:12px var(--gutr) 0 var(--gut);margin:0;font-size:13px;color:var(--muted)}
  /* Volgorde van het overzicht op gsm: pot, wie speelt, tellers, feed, de rest. */
  .adm-grid3.ov,.adm-live{display:contents}
  .o-unpaid{order:-9}.o-pot{order:-8}.o-online{order:-7}.o-counts{order:-6}.o-feed{order:-5}.o-health{order:-4}.o-money{order:-3}.o-game{order:-2}
  .s-overzicht > .adm-head{order:-10}.s-overzicht > .adm-flash{order:-11}
  .adm-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .adm .stat{padding:10px 12px}
  .adm .stat b{font-size:24px}
  .o-counts .stat{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:9px 10px}
  .o-counts .stat .label{font-size:10px;letter-spacing:.06em}
  .o-counts .stat b{font-size:20px}
  .adm-health div{grid-template-columns:auto minmax(0,1fr);gap:2px 8px}
  .adm-health div > span:last-child{grid-column:1 / -1}
  .adm-filter select{flex:1 1 140px;min-width:0}
  /* Lijsten: elke rij wordt een kaartje met titel bovenaan en gelabelde waarden. */
  .adm-t.stack,.adm-t.stack tbody{display:block}
  .adm-t.stack tr:first-child:has(th){display:none}
  .adm-t.stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px;border-bottom:1px solid var(--line)}
  .card:not(.flush) > .adm-t.stack tr{padding:12px 0}
  .adm-t.stack tr:last-child{border-bottom:0}
  .adm-t.stack tr[data-href]{cursor:pointer}
  .adm-t.stack tr[data-href]:active{background:var(--panel2)}
  .adm-t.stack td{display:block;padding:0;border:0;white-space:normal;text-align:left;min-width:0;overflow-wrap:anywhere}
  .adm-t.stack tr::before{content:'';order:-1;flex-basis:100%;height:0}
  .adm-t.stack td.t{order:-3;font-size:16px;font-weight:600}
  .adm-t.stack td.end{order:-2;margin-left:auto;font-size:12px}
  .adm-t.stack td[data-l]{order:1}
  .adm-t.stack td.last{order:2}
  .adm-t.stack td.full{flex-basis:100%}
  .adm-t.stack td.m-hide{display:none}
  .adm-t.stack td:empty{display:none}
  .adm-t.stack td[data-l]::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
  .adm-t.stack td.r{font-size:14px}
  .adm form.inline{flex-wrap:wrap}
}
@media(min-width:760px){
  .adm-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .adm-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .adm-live{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .adm-feed{max-height:560px}
}
@media(min-width:1000px){
  .adm .adm-wrap{grid-template-columns:220px minmax(0,1fr)}
  .adm-side{border-bottom:0;border-right:1px solid var(--line);position:sticky;top:0;height:100vh}
  .adm-side nav{flex-direction:column;padding:16px 10px}
  .adm-me{display:block}
  .adm-main{padding:28px 32px 60px}
}

/* Spanning in de nacht */
#fx{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(11,13,17,.25),rgba(11,13,17,.75))}
#fx .stamp{justify-self:center;font-size:clamp(28px,10vw,110px);border-width:clamp(4px,1vw,8px);padding:.08em .35em;background:rgba(11,13,17,.6);opacity:0;white-space:nowrap;max-width:94vw}
#fx .stamp.slam{animation:bigslam .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes bigslam{from{transform:scale(2.6) rotate(-14deg);opacity:0}60%{opacity:1}to{transform:scale(1) rotate(-6deg);opacity:1}}
#app.shake{animation:shake .32s ease-out}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
.heat.flash{animation:flash .6s ease-out}
.heat.cool{animation:cool .6s ease-out}
@keyframes flash{0%{border-color:var(--warn);box-shadow:0 0 0 2px rgba(240,138,44,.45)}100%{border-color:var(--line);box-shadow:none}}
@keyframes cool{0%{border-color:var(--ok);box-shadow:0 0 0 2px rgba(63,194,122,.4)}100%{border-color:var(--line);box-shadow:none}}
.crime.enter{animation:deal .32s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes deal{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.runtip{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center}
.runtip .pic{background:var(--tape);aspect-ratio:1/1}
.runtip.red .pic{background:#3a1715}.runtip.dark .pic{background:#22262f}.runtip.vio .pic{background:#231b3d}
.runtip p{background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;padding:8px 10px;position:relative}
.runtip p::before{content:"";position:absolute;left:-8px;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:var(--fg);border-left:0}

/* Minder lezen */
.duo{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.duo > div{display:grid;gap:12px;align-content:start;min-width:0}
.last{display:grid;gap:2px}
.last b{font-family:var(--display);font-size:34px;font-weight:800;line-height:1}
.last b.ok{color:var(--ok)}.last b.bad{color:var(--stamp)}
.last span{font-size:13px;color:var(--muted)}

/* Crew */
.card.rec{border-color:var(--tape);background:linear-gradient(180deg,#1d1a0f,var(--panel) 60%)}
.card.compact{padding:10px}
.card.compact .up .nm{font-size:15px}
.up .ex{grid-column:1/-1;font-family:var(--mono);font-size:12px;color:var(--tape)}

/* Lijst */
.mv{font-style:normal;font-family:var(--mono);font-size:10px;margin-left:4px;vertical-align:middle;letter-spacing:0}
.mv.up{color:var(--ok)}.mv.dn{color:var(--stamp)}.mv.nw{color:var(--violet)}
.lb .n{display:flex;align-items:baseline;flex-wrap:wrap}
.lb .lr{grid-template-columns:40px minmax(0,1fr) auto}
.lb .lr .n{flex-direction:column;align-items:flex-start;line-height:1}
.lb .lr .mv{margin:2px 0 0}
.lb .lr.hunt{border-color:var(--stamp);background:#211312}
.rail .mini div.hunt b{color:var(--stamp)}

/* Instellingen */
.toggle{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;text-transform:none;letter-spacing:0;font-family:var(--body);color:var(--fg);padding:8px 0;border-bottom:1px dashed var(--line);cursor:pointer;min-height:44px}
.toggle span{display:grid;gap:2px}
.toggle b{font-weight:600;font-size:15px}
.toggle small{font-size:12px;color:var(--muted)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle i{width:48px;height:26px;background:var(--line);position:relative;transition:background .15s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:var(--muted);transition:transform .15s,background .15s}
.toggle input:checked + i{background:#3a3315}
.toggle input:checked + i::after{transform:translateX(22px);background:var(--tape)}
.toggle input:focus-visible + i{outline:2px solid var(--tape);outline-offset:2px}

@media(min-width:960px){
  .duo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
@media(prefers-reduced-motion:reduce){#fx .stamp.slam,#app.shake,.heat.flash,.heat.cool,.crime.enter{animation:none}#fx .stamp{opacity:1}}

/* Landing: banden, live, schermen, Graai, vragen */
.band{padding-block:48px}
.band.alt{background:var(--bg2);border-block:1px solid var(--line)}
.h2{font-size:clamp(36px,6vw,56px);font-weight:800}
.live{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.live .card{gap:12px}
.shots{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.shot{margin:0;display:grid;gap:12px;align-content:start}
.shot .dev{background:var(--bg);border:3px solid #000;outline:1px solid var(--line);padding:14px;display:grid;gap:8px;min-height:230px;align-content:start;pointer-events:none}
.shot .dev .crime{padding:10px}
.shot figcaption{display:grid;gap:4px}
.shot figcaption b{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:.03em}
.shot figcaption span{color:var(--muted);font-size:15px}
.faces{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));padding-inline:var(--gut) var(--gutr)}
.faces::-webkit-scrollbar{display:none}
.faces figure{margin:0;flex:0 0 132px;display:grid;gap:6px}
.faces .pic{background:var(--tape);aspect-ratio:1/1}
.faces .pic.red{background:#3a1715}.faces .pic.vio{background:#231b3d}.faces .pic.green{background:#16301f}.faces .pic.blue{background:#1d2a3f}.faces .pic.dark{background:#22262f}
.faces figcaption{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.faq{display:grid;gap:8px;max-width:820px}
.faq details{border:1px solid var(--line);background:var(--panel)}
.faq summary{padding:14px 16px;font-weight:600;font-size:16px;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--tape)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 16px 16px;color:var(--muted)}
.site-foot nav{display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap}
.site-foot nav a{color:var(--fg);text-decoration:none;padding:6px 2px}
.site-foot nav a:hover{color:var(--tape)}
.legal h1{font-size:clamp(40px,8vw,60px)}
.legal h2{font-family:var(--display);font-size:24px;letter-spacing:.03em;margin-top:8px}
.legal p,.legal li{color:#c9ccd2;font-size:16px;line-height:1.6}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.legal mark{background:var(--warn);color:var(--bg);padding:0 4px}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap}
.legal-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:8px 12px}
.legal-nav a.on{border-color:var(--tape);color:var(--tape)}
@media(min-width:760px){
  .live{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faces{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible;margin:0;padding:0}
}

/* Onderduikknop met Graai, bevestiging, wachtende prijs */
.btn.withpic{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;padding-block:8px}
.btn.withpic .pic{width:56px;height:56px;background:#16301f;display:block}
.btn.withpic .pic img{display:block}
.btn.withpic > span:last-child{grid-column:2}
.check{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px;color:var(--fg);min-height:44px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--tape)}
.card.claim{border-color:var(--tape);background:linear-gradient(180deg,#2a2510,var(--panel) 70%)}

/* Graai krijgt in elk kader dezelfde ademruimte */
.pic > img.graai{box-sizing:border-box;padding:7%}
@media(min-width:960px){.card.rec .ups{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.hero .bird img{box-sizing:border-box;padding:8%}
.legal .lede{max-width:none}

/* Passkeys in Instellingen */
.pk{display:grid;gap:8px;padding-top:12px}
.pk > b{font-weight:600;font-size:15px}
.pkrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.pkrow span{display:grid;gap:2px;min-width:0}
.pkrow small{font-size:12px;color:var(--muted)}
.pkrow .btn{width:auto}

/* Het Nest */
#s-nest{padding:0;height:100%;max-width:none}
#s-nest.on{display:block}
.nest{height:100%;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.nlist{overflow-y:auto;padding:14px var(--gutr) 20px var(--gut);display:flex;flex-direction:column;gap:12px;min-height:0}
.nroom{display:none;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;position:relative;background:var(--bg)}
.nest.in-room .nlist{display:none}
.nest.in-room .nroom{display:grid}
.nlhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nlhead h2{font-size:30px;font-weight:800}
.nonline{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--fg);border:1px solid var(--line);padding:0 12px;min-height:40px}
.odot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex:none}
.odot.off{background:var(--dim)}
.nban{border:1px solid var(--warn);background:#2a1d10;padding:10px 12px;font-size:14px;color:var(--fg)}
.nban .link{padding:0 0 0 4px}
.nwho,.mlist{display:grid;gap:2px;border:1px solid var(--line);background:var(--panel);padding:6px 10px;max-height:260px;overflow-y:auto}
.wrow{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 0;border-bottom:1px dashed var(--line);width:100%;text-align:left}
.wrow:last-child{border-bottom:0}
.wrow b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .btn{width:auto}
.rlist{display:grid;gap:6px}
.rrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);background:var(--panel);width:100%;text-align:left;min-height:64px}
.rrow.on{border-color:var(--tape)}
.rrow.new b{color:var(--tape)}
.ric{width:44px;height:44px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:22px;position:relative}
.ric.pub{background:var(--tape);color:var(--tape-ink);border-color:var(--tape)}
.ric svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.ric .odot{position:absolute;right:-3px;bottom:-3px;border:2px solid var(--panel);width:12px;height:12px}
.rtxt{display:grid;gap:2px;min-width:0}
.rtxt b{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtxt small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubadge{background:var(--stamp);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.nhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px var(--gutr) 8px var(--gut);border-bottom:1px solid var(--line);background:var(--bg2)}
.nhead .btn{width:auto}
.nback{width:44px;height:44px;font-family:var(--display);font-size:34px;line-height:1;color:var(--fg);display:grid;place-items:center}
.ntitle{display:grid;min-width:0}
.ntitle b{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntitle small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.nmsgs{overflow-y:auto;padding:12px var(--gutr) 12px var(--gut);display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.nolder{align-self:center}
.nload{text-align:center;padding:20px}
.msg{max-width:85%;align-self:flex-start;background:var(--panel);border:1px solid var(--line);padding:8px 10px;display:grid;gap:4px}
.msg.mine{align-self:flex-end;border-color:#4d4214;background:#1d1a0f}
.msg .mh{display:flex;align-items:center;gap:8px;font-size:12px}
.msg .mh b,.mname{font-weight:600;color:var(--tape);font-size:13px}
.msg.mine .mh b{color:var(--fg)}
.msg time{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
.mmore{width:32px;height:28px;margin:-6px -6px -6px 0;color:var(--muted);font-size:18px;line-height:1}
.msg p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.4}
.msg .mdel{font-style:italic;color:var(--muted);font-size:13px}
.msg.sys{align-self:center;max-width:100%;background:none;border:0;font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;padding:2px}
.nempty{margin:auto;display:grid;justify-items:center;gap:10px;text-align:center;color:var(--muted);max-width:30ch}
.nempty img{width:96px;background:var(--tape)}
.npill{position:absolute;left:50%;transform:translateX(-50%);bottom:76px;background:var(--tape);color:var(--tape-ink);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;font-size:14px}
.ncomp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px var(--gutr) 10px var(--gut);border-top:1px solid var(--line);background:var(--bg2)}
.ncomp textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:10px;resize:none;min-height:44px;max-height:120px;border-radius:0}
.ncomp textarea:focus{border-color:var(--tape);outline:none}
.ncomp .btn{width:auto;min-width:72px}
.ncomp .nban{grid-column:1/-1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips .chip{min-height:36px;padding:0 10px;display:inline-flex;align-items:center;font-size:12px;color:var(--fg)}
.quote{margin:0;border-left:3px solid var(--line);padding:6px 10px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:0;width:100%}
@media(min-width:960px){
  #s-nest{padding:0}
  .nest{grid-template-columns:300px minmax(0,1fr)}
  .nest .nlist,.nest.in-room .nlist{display:flex;border-right:1px solid var(--line)}
  .nest .nroom,.nest.in-room .nroom{display:grid}
  .nback{display:none}
  .nhead{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:959px){
  .idx{grid-template-columns:auto;justify-items:center;row-gap:1px;padding:4px 8px}
  .idx span{grid-column:1;grid-row:1;font-size:9px}
  .idx b{grid-column:1;grid-row:2;font-size:24px}
  .idx small{display:none}
}
.nhint{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;color:var(--muted);font-size:14px;margin-top:8px}
.nhint img{background:var(--tape)}
.adm .card{align-content:start}
@media(max-width:380px){
  .who span{white-space:normal}
  .help{padding:0 8px;letter-spacing:.06em}
  .top{gap:8px}
}
.lb .d{flex-wrap:wrap;row-gap:4px}

/* Het Nest op gsm: zwevende knop en volledig scherm */
.fab{position:fixed;right:var(--gutr);bottom:calc(var(--sab) + 82px);width:56px;height:56px;background:var(--tape);color:var(--tape-ink);display:grid;place-items:center;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fab .ubadge{position:absolute;top:-7px;right:-7px;border:2px solid var(--bg)}
.fab:active{transform:scale(.96)}
.nclose{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;color:var(--fg);flex:none}
@media(max-width:959px){
  .screen{padding-bottom:92px}
  #s-nest{padding-bottom:0}
  #app.nest-open{grid-template-rows:minmax(0,1fr);grid-template-areas:"main"}
  #app.nest-open .top,#app.nest-open .mission,#app.nest-open .tab{display:none}
  #app.nest-open #s-nest{animation:nestin .22s ease-out}
  #app.nest-open .nlist{padding-top:calc(var(--sat) + 12px)}
  #app.nest-open .nhead{padding-top:calc(var(--sat) + 8px)}
  .nlhead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
}
@keyframes nestin{from{transform:translateY(24px)}to{transform:none}}
@media(min-width:960px){.fab,.nclose{display:none}}
@media(prefers-reduced-motion:reduce){#app.nest-open #s-nest{animation:none}}

/* Geen verbinding */
#netbar{position:fixed;left:0;right:0;top:0;z-index:95;background:var(--stamp);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(var(--sat) + 8px) var(--gutr) 8px var(--gut);font-weight:600;font-size:14px}
#netbar button{border:1px solid rgba(255,255,255,.6);color:#fff;padding:0 10px;min-height:36px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none}