/* =========================================================
   HET LAATSTE LEVEN v2  -  pixel-tabloid voor CreatorSMP
   A4, 2 pagina's, gerenderd met headless Chrome
   ========================================================= */
@font-face { font-family:"PressStart"; src:url(fonts/PressStart2P-Regular.ttf); }
@font-face { font-family:"VT323"; src:url(fonts/VT323-Regular.ttf); }
@font-face { font-family:"Pixelify"; src:url(fonts/PixelifySans-VariableFont_wght.ttf); font-weight:400 700; }
@font-face { font-family:"Lilita"; src:url(fonts/LilitaOne-Regular.ttf); }
@font-face { font-family:"Nunito"; src:url(fonts/Nunito-VariableFont_wght.ttf); font-weight:200 1000; }
@font-face { font-family:"Nunito"; src:url(fonts/Nunito-Italic-VariableFont_wght.ttf); font-weight:200 1000; font-style:italic; }

@page { size:A4; margin:0; }
:root {
  --ink:#111; --paper:#fff8e1; --noord:#2b5cd8; --noord-d:#173a96; --zuid:#e0312b; --zuid-d:#9c1b16;
  --gold:#ffd83d; --grass:#5d9b32; --sky:#7cc8ff; --purple:#9146ff; --pink:#ff3d8b;
}
* { box-sizing:border-box; }
html, body { margin:0; background:#555; }
@media print { html, body { background:var(--paper); } }
body { font-family:"Nunito",sans-serif; font-size:8.8pt; line-height:1.36; color:var(--ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
img, .tile, .hearts i { image-rendering:pixelated; }
p { margin:0 0 .5em; }
b, strong { font-weight:850; }

/* ---------- Pagina ---------- */
.page { width:210mm; height:297mm; position:relative; overflow:hidden; break-after:page; display:flex; flex-direction:column;
  padding:0 7mm 9mm; background:var(--paper);
  background-image: radial-gradient(rgba(0,0,0,.07) .5px, transparent .6px); background-size:2.2mm 2.2mm; }
.page:last-child { break-after:auto; }
.page-foot { position:absolute; left:0; right:0; bottom:0; height:6.5mm; background:url(assets/tiles/dirt.png) 0 0/6.5mm; display:flex;
  align-items:center; justify-content:space-between; padding:0 7mm; color:#fff; font:6pt/1 "PressStart"; text-shadow:1px 1px 0 #000; }
.page-foot::before { content:""; position:absolute; left:0; right:0; top:-2.4mm; height:2.4mm; background:url(assets/tiles/grass_top.png) 0 0/2.4mm; }
.overflow-warning { position:absolute; top:2mm; right:2mm; background:#d00; color:#fff; font:10pt "PressStart"; padding:2mm; z-index:99; }

/* ---------- Masthead ---------- */
.mast { margin:0 -7mm; position:relative; }
.mast-grass { height:5mm; background:url(assets/tiles/grass_side.png) 0 0/10mm; }
.mast-body { background:url(assets/tiles/dirt.png) 0 0/10mm; display:grid; grid-template-columns:36mm 1fr 36mm; align-items:center; gap:3mm; padding:1.6mm 7mm 2mm; }
.logo { text-align:center; color:#fff; line-height:1; }
.logo .small { display:block; font:13pt/1 "PressStart"; letter-spacing:.06em; text-shadow:2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.logo .big { display:inline-block; font:38pt/1 "PressStart"; color:var(--gold); margin-top:1.6mm;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #a86f00, 5px 5px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.logo .big img { height:9mm; vertical-align:top; margin-left:2mm; filter:drop-shadow(2px 2px 0 #000); }
.badge { background:#111; color:#fff; border:2px solid #fff; outline:2px solid #111; padding:1.6mm 2mm; text-align:center; font:6pt/1.5 "PressStart"; }
.badge b { display:block; font:400 15pt/1 "VT323"; color:var(--gold); letter-spacing:.03em; margin-top:.4mm; }
.badge.right { transform:rotate(2deg); } .badge.left { transform:rotate(-2deg); }
.tagline { background:#111; color:#fff; text-align:center; font:13pt/1 "VT323"; padding:1mm 0 .8mm; letter-spacing:.04em; }
.tagline span { color:var(--gold); }

/* Ticker */
.ticker { margin:0 -7mm; background:var(--gold); border-bottom:2.5px solid #111; display:flex; align-items:center; overflow:hidden; white-space:nowrap; height:7.5mm; }
.ticker .tk-label { background:var(--zuid); color:#fff; font:7pt/1 "PressStart"; padding:2.4mm 3mm 2.4mm 7mm; margin-right:2mm; height:100%; display:flex; align-items:center; }
.ticker .tk-items { font:10.5pt/1 "Lilita"; letter-spacing:.03em; text-transform:uppercase; }
.ticker .tk-items i { display:inline-block; width:2.2mm; height:2.2mm; background:var(--zuid); margin:0 2.6mm .4mm; vertical-align:middle; }

/* ---------- Hero / cover ---------- */
.hero { position:relative; margin:3mm 0 0; height:73mm; border:3px solid #111; box-shadow:4px 4px 0 #111; overflow:hidden;
  background:linear-gradient(#58b4f5 0%, #8fd3ff 55%, #c9ecff 100%); }
.hero .cloud { position:absolute; background:#fff; box-shadow: 0 0 0 0 #fff; opacity:.95; }
.hero .cloud::before { content:""; position:absolute; background:#fff; left:25%; top:-50%; width:50%; height:50%; }
.hero-text { position:absolute; left:4mm; top:3.5mm; width:79mm; z-index:3; }
.sticker { display:inline-block; background:var(--zuid); color:#fff; font:7pt/1 "PressStart"; padding:1.8mm 2.4mm; border:2px solid #111; box-shadow:2px 2px 0 #111; transform:rotate(-2deg); }
.hero h1 { font:400 25pt/1 "Lilita"; margin:2.2mm 0 2mm; color:#fff; text-transform:uppercase; letter-spacing:.01em;
  -webkit-text-stroke:2.4px #111; paint-order:stroke fill; text-shadow:3px 3px 0 #111; }
.hero h1 em { font-style:normal; color:var(--gold); }
.hero .deck { font:800 9.2pt/1.28 "Nunito"; background:#fff; border:2px solid #111; padding:1.8mm 2.4mm; box-shadow:3px 3px 0 #111; margin:0; }
.scene { position:absolute; right:3mm; bottom:9mm; width:110mm; height:58mm; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; }
.side-team { display:flex; align-items:flex-end; gap:.8mm; position:relative; }
.fig { display:flex; flex-direction:column; align-items:center; width:14.5mm; }
.side-team .fig:nth-of-type(2) .nametag { margin-bottom:5.5mm; }
.fig img { width:12.5mm; height:25mm; display:block; filter:drop-shadow(1.2px 1.2px 0 rgba(0,0,0,.35)); }
.nametag { background:rgba(0,0,0,.62); color:#fff; font:10pt/1 "VT323"; padding:.5mm 1.2mm .3mm; margin-bottom:1.2mm; white-space:nowrap; }
.wall { width:14mm; margin:0 2.5mm; height:58mm; background:url(assets/tiles/stonebrick.png) 0 0/6mm; border:2px solid #333; border-bottom:0; position:relative;
  box-shadow: inset -2mm 0 0 rgba(0,0,0,.18); }
.wall span { position:absolute; top:22mm; left:50%; transform:translateX(-50%) rotate(-90deg); white-space:nowrap; font:7pt "PressStart"; color:#fff; text-shadow:1px 1px 0 #000; }
.flag { position:absolute; bottom:-7.6mm; left:50% !important; right:auto !important; transform:translateX(-50%); z-index:5; font:8pt/1 "PressStart"; color:#fff; padding:1.6mm 2mm; border:2px solid #111; box-shadow:2px 2px 0 #111; white-space:nowrap; }
.flag.Noord { background:var(--noord); left:0; } .flag.Zuid { background:var(--zuid); right:0; }
.ground { position:absolute; left:0; right:0; bottom:0; height:9mm; z-index:1; background:url(assets/tiles/grass_side.png) 0 0/4.5mm repeat-x, url(assets/tiles/dirt.png) 0 4.5mm/4.5mm; }
.burst { position:absolute; z-index:4; width:27mm; height:27mm; display:flex; align-items:center; justify-content:center; text-align:center;
  clip-path:polygon(50% 0%,61% 12%,75% 4%,78% 20%,95% 18%,88% 33%,100% 45%,88% 56%,96% 72%,79% 75%,76% 93%,62% 86%,50% 100%,38% 86%,24% 93%,21% 75%,4% 72%,12% 56%,0% 45%,12% 33%,5% 18%,22% 20%,25% 4%,39% 12%);
  font:7pt/1.35 "PressStart"; }
.burst.red { background:var(--zuid); color:#fff; } .burst.yellow { background:var(--gold); color:#111; } .burst.pink { background:var(--pink); color:#fff; }
.tape { position:absolute; z-index:4; background:var(--gold); color:#111; font:7pt/1 "PressStart"; padding:1.8mm 4mm; border:2px solid #111; }
.cover-credit { position:absolute; left:4mm; bottom:1.6mm; z-index:3; font:9pt/1 "VT323"; color:#fff; text-shadow:1px 1px 0 #000; }

/* ---------- Voorpagina onder ---------- */
.front { display:grid; grid-template-columns:1fr 60mm; gap:4mm; margin-top:3.5mm; align-items:start; }
.card { background:#fff; border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; padding:3mm; }
.lead .byline { font:6pt/1 "PressStart"; color:#fff; background:#111; display:inline-block; padding:1.2mm 1.8mm; margin-bottom:2mm; }
.lead .body { column-count:2; column-gap:4.5mm; font-size:9pt; }
.lead .body p:first-child::first-letter { float:left; font:30pt/0.85 "Lilita"; color:var(--zuid); margin:.4mm 1.4mm 0 0; text-shadow:1.5px 1.5px 0 #111; }
.pullquote { break-inside:avoid; background:var(--gold); border:2px solid #111; padding:2mm 2.4mm; margin:1mm 0 2.4mm; font:400 12pt/1.15 "Lilita"; transform:rotate(-1deg); }
.pullquote small { display:block; font:5.5pt/1.3 "PressStart"; margin-top:1.2mm; }

/* HUD scorebord */
.hud { background:url(assets/tiles/obsidian.png) 0 0/6mm; border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; color:#fff; padding:2.4mm; }
.hud h3, .sec-title { font:7pt/1.2 "PressStart"; margin:0 0 2mm; letter-spacing:.02em; }
.hud h3 { color:var(--gold); text-shadow:1px 1px 0 #000; display:flex; justify-content:space-between; }
.hud .team { background:rgba(0,0,0,.45); border:1.5px solid rgba(255,255,255,.25); padding:1.6mm 1.8mm 1.8mm; margin-bottom:1.8mm; }
.hud .team:last-of-type { margin-bottom:1.2mm; }
.hud .row { display:flex; align-items:baseline; justify-content:space-between; }
.hud .tname { font:7pt/1 "PressStart"; padding:1mm 1.4mm; }
.hud .Noord .tname { background:var(--noord); } .hud .Zuid .tname { background:var(--zuid); }
.hud .num { font:24pt/0.8 "VT323"; }
.hud .num small { font-size:11pt; color:#bbb; }
.hearts { display:grid; grid-template-columns:repeat(15, 1fr); gap:.35mm; margin-top:1.4mm; }
.hearts i { display:block; aspect-ratio:1; background:url(assets/tiles/heart.png) center/contain no-repeat; }
.hearts i.dead { background-image:url(assets/tiles/heart_empty.png); }
.hud .note { font:10.5pt/1.1 "VT323"; color:#ddd; margin:0; text-align:center; }

/* Dodenlijst */
.gameover { margin-top:3.5mm; border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; text-align:center; color:#fff; padding:3mm 2.4mm 2.6mm;
  background:linear-gradient(rgba(150,0,0,.85), rgba(60,0,0,.95)), url(assets/tiles/deepslate.png) 0 0/6mm; }
.gameover .sec-title { color:#ffd0d0; }
.gameover h4 { font:13pt/1.1 "PressStart"; margin:1mm 0 2mm; text-shadow:2px 2px 0 #3a0000; }
.gameover p { font:12pt/1.1 "VT323"; margin:0 0 2mm; }
.gameover p span { color:var(--gold); }
.mcbutton { display:block; background:#7a7a7a; border:2px solid #111; box-shadow:inset 1.5px 1.5px 0 #aaa, inset -1.5px -1.5px 0 #555; font:11pt/1 "VT323"; padding:1.4mm 1mm 1.2mm; color:#e8e8e8; text-shadow:1px 1px 0 #333; }
.tombs { display:grid; grid-template-columns:1fr; gap:1.4mm; text-align:left; }
.tombstone { display:grid; grid-template-columns:8mm 1fr; gap:1.6mm; align-items:center; background:url(assets/tiles/stone.png) 0 0/5mm; color:#111;
  border:2px solid #111; padding:1.2mm 1.6mm; border-radius:3mm 3mm 0 0; }
.tombstone img { width:8mm; height:8mm; border:1px solid #111; }
.tombstone b { font:7pt/1.2 "PressStart"; display:block; color:#fff; text-shadow:1px 1px 0 #000; }
.tombstone span { font:11pt/1.05 "VT323"; color:#111; background:rgba(255,255,255,.75); padding:0 1mm; }
.tombstone .tag { color:#fff; padding:0 1mm; font-size:10pt; }
.tag.Noord { background:var(--noord); } .tag.Zuid { background:var(--zuid); }

/* Onderstrook voorpagina */
.front-bottom { display:grid; grid-template-columns:1.25fr 1fr; gap:4mm; margin-top:3.5mm; flex:1 1 auto; min-height:0; align-items:start; }
.front-bottom.has-articles { grid-template-columns:1.25fr 1fr 1fr; }
.chat { background:rgba(20,20,20,.88); border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; padding:2.4mm 2.6mm; color:#fff; }
.chat .sec-title { color:#aaa; display:flex; justify-content:space-between; }
.chat .msg { font:11.6pt/1.05 "VT323"; margin:0 0 1.2mm; }
.chat .msg:last-child { margin-bottom:0; }
.chat .msg b { font-weight:400; color:var(--gold); }
.chat .msg .who { color:#7cff7c; }
.chat .input { margin-top:1.2mm; border-top:1.5px solid #555; padding-top:1mm; font:11pt/1 "VT323"; color:#888; }

.hotnot { display:grid; grid-template-columns:1fr 1fr; border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; background:#fff; }
.hotnot > div { padding:2.2mm 2.4mm; }
.hotnot .hot { background:#ffe3ec; border-right:2px solid #111; }
.hotnot .not { background:#e3ecff; }
.hotnot h3 { font:400 15pt/1 "Lilita"; margin:0 0 1.6mm; text-transform:uppercase; }
.hotnot .hot h3 { color:var(--pink); } .hotnot .not h3 { color:var(--noord); }
.hotnot h3 img { height:4mm; vertical-align:-0.4mm; margin-right:1mm; }
.hotnot .item { margin-bottom:1.8mm; font-size:8.4pt; line-height:1.28; }
.hotnot .item:last-child { margin-bottom:0; }
.hotnot .item b { display:block; font:400 10pt/1.1 "Lilita"; }
.hotnot .ttl { grid-column:1/-1; background:#111; color:#fff; font:7pt/1 "PressStart"; padding:1.4mm 2.4mm; }

/* ---------- Pagina 2 ---------- */
.minimast { margin:0 -7mm; background:url(assets/tiles/dirt.png) 0 0/8mm; display:flex; align-items:center; justify-content:space-between; padding:2mm 7mm; position:relative; }
.minimast::before { content:""; position:absolute; left:0; right:0; top:0; height:3mm; background:url(assets/tiles/grass_side.png) 0 0/6mm; }
.minimast .mlogo { font:11pt/1 "PressStart"; color:#fff; text-shadow:2px 2px 0 #000; margin-top:2mm; }
.minimast .mlogo span { color:var(--gold); }
.minimast .msec { font:400 16pt/1 "Lilita"; color:#111; background:var(--gold); padding:1.2mm 3mm 1mm; border:2px solid #111; box-shadow:2px 2px 0 #111; margin-top:2mm; transform:rotate(1deg); text-transform:uppercase; }
.minimast .mdate { font:12pt/1 "VT323"; color:#fff; text-shadow:1px 1px 0 #000; margin-top:2mm; }

.teams { display:grid; grid-template-columns:1fr 1fr; gap:4mm; margin-top:3.5mm; }
.teampanel { border:2.5px solid #111; box-shadow:3.5px 3.5px 0 #111; color:#fff; padding:0 0 2mm; }
.teampanel.Noord { background:linear-gradient(rgba(23,58,150,.86), rgba(23,58,150,.92)), url(assets/tiles/lapis.png) 0 0/6mm; }
.teampanel.Zuid { background:linear-gradient(rgba(156,27,22,.86), rgba(156,27,22,.92)), url(assets/tiles/redstone.png) 0 0/6mm; }
.teampanel h3 { margin:0; font:10pt/1 "PressStart"; padding:2mm 2.6mm 1.6mm; background:rgba(0,0,0,.35); display:flex; justify-content:space-between; align-items:center; text-shadow:2px 2px 0 #000; }
.teampanel h3 small { font:12pt/1 "VT323"; text-shadow:none; color:#ffe; }
.teampanel .intro { font-size:8pt; line-height:1.28; margin:1.4mm 2.6mm 1.4mm; }
.teampanel .intro b { color:var(--gold); }
.heads { display:grid; grid-template-columns:repeat(9,1fr); gap:.6mm .5mm; padding:0 1.6mm; }
.head { text-align:center; min-width:0; }
.head img { width:6.2mm; height:6.2mm; display:block; margin:0 auto .3mm; border:1.2px solid #111; background:#222; }
.head.star img { outline:1.6px solid var(--gold); border-color:var(--gold); }
.head span { display:block; font:7.4pt/.84 "VT323"; overflow-wrap:anywhere; color:#fff; height:1.7em; overflow:hidden; }
.head.star span { color:var(--gold); }
.head.debut span::after { content:"*"; color:#7cff7c; }
.roster-note { font:10pt/1.15 "VT323"; margin:1.2mm 0 0; color:#333; }
.roster-note b { font-weight:400; color:var(--zuid); }

/* Hotbar met cijfers */
.hotbar-wrap { margin-top:1.6mm; display:flex; align-items:center; justify-content:center; gap:3mm; }
.hotbar-title { font:6.5pt/1.5 "PressStart"; width:24mm; text-align:right; }
.hotbar { display:flex; background:#3c3c3c; border:2.5px solid #111; padding:.8mm; gap:.8mm; box-shadow:3px 3px 0 #111; }
.slot { width:25mm; background:#8b8b8b; box-shadow:inset 1.5px 1.5px 0 #373737, inset -1.5px -1.5px 0 #fff; text-align:center; padding:1.1mm .6mm 1mm; }
.slot:first-child { outline:2px solid #fff; outline-offset:-1px; }
.slot b { display:block; font:400 17pt/0.85 "VT323"; color:#fff; text-shadow:2px 2px 0 #3f3f3f; font-weight:400; }
.slot span { display:block; font:9.6pt/1 "VT323"; color:#111; margin-top:.6mm; }

/* Binnenpagina kolommen */
.inside { display:grid; grid-template-columns:repeat(3,1fr); gap:4mm; margin-top:3mm; flex:1 1 auto; min-height:0; align-items:start; }
.inside .col { min-width:0; }
.art { break-inside:avoid; margin:0 0 3mm; background:#fff; border:2.5px solid #111; box-shadow:3px 3px 0 #111; padding:2.2mm 2.4mm; }
.art .kicker { display:inline-block; font:5.8pt/1 "PressStart"; color:#fff; background:#111; padding:1mm 1.4mm; margin-bottom:1.6mm; }
.art h2 { font:400 13pt/1.02 "Lilita"; margin:0 0 1.4mm; text-transform:uppercase; }
.art .deck2 { font-weight:800; font-size:8.8pt; margin:0 0 1.4mm; }
.art ul { margin:0; padding-left:3.8mm; } .art li { margin-bottom:.8mm; }
.art img.pic { width:24mm; float:right; border:2px solid #111; margin:.6mm 0 1mm 2mm; }
.art.theme-grass { background:linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)), url(assets/tiles/grass_top.png) 0 0/4mm; border-top:4mm solid #5d9b32; }
.art.theme-gold { background:#fff4c2; }
.art.theme-dark { background:#1f1f1f; color:#fff; } .art.theme-dark .kicker { background:var(--gold); color:#111; }
.art.theme-stone { background:linear-gradient(rgba(240,240,240,.9), rgba(240,240,240,.9)), url(assets/tiles/stone.png) 0 0/5mm; }
.url { font:10pt/1.1 "VT323"; word-break:break-all; color:#333; }
.theme-dark .url { color:#bbb; }

/* Advancement-toasts (regels) */
.toast { display:grid; grid-template-columns:5mm 1fr; gap:1.8mm; align-items:center; background:#212121; color:#fff; border:2px solid #555; outline:1.5px solid #111;
  padding:.7mm 1.6mm; margin:0 0 .9mm; }
.toast:last-child { margin-bottom:0; }
.toast img { width:5mm; height:5mm; }
.toast b { font:400 11.5pt/.95 "VT323"; color:var(--gold); margin-right:1mm; }
.toast span { font-size:8pt; line-height:1.22; }

/* Questlog (tijdlijn) */
.quest { list-style:none; padding:0 !important; margin:0; position:relative; }
.quest::before { content:""; position:absolute; left:1.3mm; top:1mm; bottom:1mm; width:1.2mm; background:#7cd63a; border:1px solid #111; }
.quest li { display:grid; grid-template-columns:14mm 1fr; position:relative; padding-left:5.6mm; margin-bottom:1mm !important; font-size:8.2pt; line-height:1.2; }
.quest li::before { content:""; position:absolute; left:.4mm; top:.8mm; width:2.6mm; height:2.6mm; background:var(--gold); border:1.5px solid #111; }
.quest li.done::before { background:#7cd63a; } .quest li.now::before { background:var(--zuid); }
.quest li b { font:400 11pt/1.05 "VT323"; color:var(--noord-d); }

/* Figuren (hall of fame / MVP) */
.figs { display:flex; justify-content:space-around; align-items:flex-end; margin:1mm 0 2mm; background:linear-gradient(#8fd3ff, #c9ecff); border:2px solid #111; padding-top:2mm; }
.figs .f { text-align:center; display:flex; flex-direction:column; align-items:center; }
.figs .f img.body { width:9mm; height:18mm; }
.figs .f .ped { width:20mm; background:url(assets/tiles/gold.png) 0 0/4mm; border-top:2px solid #111; padding:1mm 0 .8mm; font:5.5pt/1.35 "PressStart"; color:#111; }
.figs .f .ped img { height:3.6mm; display:block; margin:0 auto .4mm; }
.figs .nametag { margin-bottom:.8mm; }

/* Clip-kaart (stream-look) */
.clipcard { break-inside:avoid; margin:0 0 3mm; background:#18181b; color:#efeff1; border:2.5px solid #111; box-shadow:3px 3px 0 var(--purple); }
.clipcard .thumb { align-items:flex-start !important; padding-top:2mm; position:relative; height:17mm; background:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)), url(assets/tiles/stonebrick.png) 0 0/5mm; display:flex; align-items:center; justify-content:center; border-bottom:2px solid var(--purple); }
.clipcard .thumb .pbtn { width:11mm; height:7.5mm; background:var(--zuid); border-radius:2.4mm; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 0 #000; }
.clipcard .thumb .pbtn img { height:4.2mm; margin-left:1mm; }
.clipcard .thumb .lbl { position:absolute; left:2mm; bottom:2mm; background:var(--purple); color:#fff; font:5.8pt/1 "PressStart"; padding:1mm 1.4mm; }
.clipcard .thumb .lbl2 { position:absolute; right:2mm; bottom:2mm; background:rgba(0,0,0,.8); color:#fff; font:10pt/1 "VT323"; padding:.4mm 1.2mm; }
.clipcard .info { padding:2.2mm 2.6mm 2.6mm; }
.clipcard h4 { margin:0 0 .6mm; font:400 13pt/1.05 "Lilita"; }
.clipcard .meta { font:10pt/1.1 "VT323"; color:#bf94ff; margin:0 0 1.2mm; }
.clipcard p { font-size:8.4pt; }
.clipcard .url { color:#adadb8; }

/* Bronnen */
.sources { font-size:7pt; line-height:1.25; }
.sources ol { margin:0; padding-left:4mm; } .sources li { margin-bottom:.7mm; word-break:break-all; } .sources li span { word-break:normal; font-weight:800; }
.colophon { font:9.5pt/1.1 "VT323"; color:#444; text-align:center; margin-top:1mm; }
.srcstrip { border-top:2.5px solid #111; padding-top:1.2mm; font-size:6.6pt; line-height:1.3; color:#222; }
.srcstrip b { font:6pt "PressStart"; margin-right:1.4mm; }
.srcstrip span { white-space:nowrap; } .srcstrip span + span::before { content:" \00b7  "; color:var(--zuid); font-weight:900; white-space:normal; }

/* =========================================================
   v3: extra binnenpagina's (pages[]) en nieuwe blokken
   ========================================================= */
.inside.cols-2 { grid-template-columns:repeat(2,1fr); }
.banner { margin-top:3mm; }
.banner .art { margin:0; }
.art.wide { column-count:2; column-gap:4.5mm; }
.art.wide > .kicker, .art.wide > h2, .art.wide > .deck2, .art.wide > .versus, .art.wide > .figs { column-span:all; }
.art.wide h2 { font-size:17pt; }
.theme-dark .deck2 { color:var(--gold); }

/* Versus-kaart: vete, alliantie, romance */
.versus { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; margin:1mm 0 2mm; border:2px solid #111; padding:2mm 1mm 1.4mm;
  background:linear-gradient(#8fd3ff, #c9ecff); break-inside:avoid; }
.versus.love { background:linear-gradient(#ffc2d9, #ffe3ec); }
.versus.feud { background:linear-gradient(#ff9a8a, #ffd9cf); }
.versus.alliance { background:linear-gradient(#b8f08c, #e6ffd1); }
.versus.mystery { background:linear-gradient(#2a2340, #4a3d6e); }
.versus .vf { display:flex; flex-direction:column; align-items:center; }
.versus .vf img { width:10mm; height:20mm; filter:drop-shadow(1.2px 1.2px 0 rgba(0,0,0,.35)); }
.versus .vf .tag { font:9pt/1 "VT323"; color:#fff; padding:.3mm 1.2mm; margin-top:.6mm; }
.versus .vs { font:400 15pt/1 "Lilita"; color:#fff; -webkit-text-stroke:1.6px #111; paint-order:stroke fill; text-shadow:2px 2px 0 #111;
  align-self:center; padding:0 1.5mm; text-align:center; }
.versus.love .vs { color:var(--pink); } .versus.feud .vs { color:var(--zuid); } .versus.alliance .vs { color:#7cd63a; } .versus.mystery .vs { color:#ff3b3b; }

/* Rijtje hoofden */
.headrow { display:flex; flex-wrap:wrap; gap:1mm 1.2mm; margin:1mm 0 1.6mm; }
.headrow .hr { width:12mm; text-align:center; }
.headrow .hr img { width:7mm; height:7mm; display:block; margin:0 auto .3mm; border:1.2px solid #111; }
.headrow .hr span { display:block; font:8.4pt/.85 "VT323"; overflow-wrap:anywhere; }

/* Chatlog in een artikel */
.chatlog { background:rgba(20,20,20,.9); border:2px solid #111; padding:1.6mm 2mm; margin:1mm 0 1.6mm; break-inside:avoid; }
.chatlog .msg { font:10.8pt/1.02 "VT323"; color:#fff; margin:0 0 .6mm; }
.chatlog .msg .who { color:#7cff7c; }
.chatlog .msg.sys { color:var(--gold); }

/* Artikel-links (clips) */
.art .url { margin-top:.6mm; }
.art .url i { font-style:normal; color:var(--purple); }
.theme-dark .url i { color:#bf94ff; }
.art .pullquote { margin:1.6mm 0 1.6mm; }

/* Teampanelen: doden grijs met kruis */
.head.dead img { filter:grayscale(1) brightness(.6); border-color:#000; }
.head.dead span { text-decoration:line-through; color:#ffb3b3; }

/* ---- Links (v4): alles is klikbaar in de PDF, maar de opmaak blijft rustig ---- */
a { color:inherit; text-decoration:none; }
a.plink { color:inherit; }
.art p a.plink, .art li a.plink, .lead .body a.plink, .intro a.plink, .chat .msg a.plink, .hotnot a.plink, .toast a.plink {
  text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:1.5px; }
.url a, .srcstrip a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:1.5px; }
.clipcard h4 a { color:inherit; }
.clipcard .url a.cliplink { color:#bf94ff; }
.quest li a { text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:1.5px; }
p a:not(.plink), li a:not(.plink), .toast span a, .roster-note a, .colophon a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:1.5px; }
