/* Lord of the Lands: pagina's van de groep misdaad, eenvoudig en compact. @author Ferhat Remory */

/* ==========================================================================
   Bouwstenen (zoals .rij, .feiten, .verslag en .kost in spel.css), met het voorvoegsel md- zodat ze niet botsen met de andere groepen.
   Elke pagina van deze groep draagt de klasse .md op haar buitenste blok; overschrijvingen van oude klassen hangen daaronder.
   ========================================================================== */

.md { --md-zacht: color-mix(in oklab, var(--color-ink) 4%, transparent); color: var(--color-ink); font-variant-numeric: lining-nums; }
.md > * + * { margin-top: 6px; }
.md .tabular, .md-getal { font-variant-numeric: lining-nums tabular-nums; }

/* Kapitaaltjes, inleiding en kleine uitleg. */
.md-kap { display: block; font: 600 9.5px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.md-motto { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; padding: 0 16px; font: italic 500 14.5px/1.3 var(--font-kop); color: var(--color-muted); text-align: center; }
.md-motto::before, .md-motto::after { content: ""; flex: 1; min-width: 16px; height: 1px; background: var(--color-line); }
.md-motto span { max-width: 34rem; }
.md-noot { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.45; color: var(--color-muted); }
.md-noot .icon { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--color-faint); }
.md-tekst { font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.md-leeg { padding: 14px 0; text-align: center; font: italic 500 15px/1.3 var(--font-kop); color: var(--color-muted); }
.md-sectie { padding: 8px 16px 14px; }
.md-sectie > * + * { margin-top: 10px; }
.md-goud { color: var(--color-brass); }
.md-geld { color: var(--color-money); }
.md-rood { color: var(--color-danger); }

/* Feiten: vakjes met een haarlijn, label in kapitaaltjes en waarde in EB Garamond. */
.md-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border: 1px solid var(--color-line); border-radius: var(--radius-ui); overflow: hidden; }
.md-feiten > * { min-width: 0; padding: 7px 11px 8px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin: 0 -1px -1px 0; }
.md-feit > span:first-child { display: flex; align-items: center; gap: 5px; font: 600 9px/1.1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.md-feit > span:first-child .icon { width: 12px; height: 12px; color: var(--color-faint); }
.md-feit b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin-top: 4px; overflow-wrap: anywhere; font: 600 17px/1.1 var(--font-kop); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.md-feit b small { font: 500 11px var(--font-sans); color: var(--color-faint); }
.md-feit .md-voort { margin-top: 6px; }
a.md-feit { color: var(--color-ink); transition: background-color .15s; }
a.md-feit:hover { background: var(--md-zacht); }
.md-in { margin-left: 16px; margin-right: 16px; }

/* Rijen: klein icoon links, naam in EB Garamond, korte regel, rechts de waarde of de knop. */
.md-rijen { display: grid; list-style: none; }
.md-rij { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); text-align: left; }
.md-rijen > :last-child > .md-rij, .md-rijen > .md-rij:last-child { border-bottom: 0; }
.md-rij.zonder-beeld { grid-template-columns: minmax(0, 1fr) auto; }
.md-rij.met-vink { grid-template-columns: 16px minmax(0, 1fr) auto; }
.md-ico { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-ui); color: var(--color-muted); background: var(--color-card); }
.md-ico .icon { width: 17px; height: 17px; }
.md-ico img { width: 100%; height: 100%; object-fit: cover; }
.md-rij-tekst { min-width: 0; }
.md-rij-tekst b { display: block; font: 600 15.5px/1.15 var(--font-kop); color: var(--color-ink); }
.md-rij-tekst small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--color-muted); }
.md-rij-eind { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; font: 600 14px/1 var(--font-kop); font-variant-numeric: lining-nums tabular-nums; }
.md-rij.dicht { opacity: .55; cursor: not-allowed; }
.md-rij.dicht .md-ico { filter: grayscale(1); }
.md-rij.ik { box-shadow: inset 3px 0 0 var(--color-danger); background: color-mix(in oklab, var(--color-danger) 6%, transparent); padding-left: 10px; }

/* Kost en buit: een bedrag in EB Garamond, salie voor zilver. */
.md-kost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font: 600 12.5px/1 var(--font-kop); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
.md-kost .md-geld, .md-kost .icon { color: var(--color-money); }
.md-kost .icon { width: 13px; height: 13px; }

/* Kans als dunne lijn met het getal ernaast. */
.md-kans { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font-kop); color: var(--color-muted); }
.md-voort { display: block; width: 56px; height: 3px; overflow: hidden; background: var(--color-card-deep); }
.md-voort > i { display: block; height: 100%; background: var(--color-ink); transition: width .4s; }
.md-voort.goed > i { background: var(--color-success); }
.md-voort.matig > i { background: var(--color-brass); }
.md-voort.slecht > i { background: var(--color-danger); }
.md-voort.breed { width: 100%; }

/* Keuze als rij: een verborgen radio, de gekozen rij krijgt een karmijnrode streep en een gevuld bolletje. */
.md-keus { cursor: pointer; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background-color .15s; }
.md-keus:hover { background: var(--md-zacht); }
.md-keus:has(input:checked) { background: color-mix(in oklab, var(--color-accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--color-accent); }
.md-keus:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.md-vink { display: block; flex: none; width: 16px; height: 16px; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-card); }
.md-keus:has(input:checked) .md-vink { background: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-card); }
.md-keus.dicht:hover { background: none; }
.md-vink-slot { display: grid; place-items: center; width: 16px; height: 16px; color: var(--color-muted); }
.md-vink-slot .icon { width: 13px; height: 13px; }

/* Tag: kapitaaltjes in een haarlijn. */
.md-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; font: 700 8.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; border-radius: var(--radius-ui); color: var(--color-muted); }
.md-tag .icon { width: 11px; height: 11px; }
.md-tag.rood { color: var(--color-danger); }
.md-tag.groen { color: var(--color-success); }
.md-tag.goud { color: var(--color-brass); }
.md-tag.violet { color: var(--color-news); }
.md-tag.vol { color: var(--color-card); background: var(--color-ink); border-color: var(--color-ink); }

/* Knoppen onder een formulier, en kleine knoppen in een rij. */
.md-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md .btn-klein { min-height: 26px; padding: 0 9px; font-size: 9px; }
.md-velden { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }

/* Wachttijd: de aftelling in EB Garamond, met een zin ernaast. */
.md-wacht { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.md-wacht > .icon { flex: none; width: 20px; height: 20px; color: var(--color-brass); }
.md-wacht b { display: block; font: 600 22px/1 var(--font-kop); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.md-wacht p { margin-top: 3px; font-size: 12px; color: var(--color-muted); }

/* Verslag van een uitslag: een kader met haarlijn, de stand in kapitaaltjes, de buit in EB Garamond. */
.md-verslag { margin: 0 16px; padding: 10px 14px 11px; border: 1px solid var(--color-line); border-left: 3px solid var(--md-kleur, var(--color-ink)); border-radius: var(--radius-ui); background: color-mix(in oklab, var(--md-kleur, var(--color-ink)) 4%, transparent); }
.md-verslag.gelukt { --md-kleur: var(--color-success); }
.md-verslag.ontsnapt { --md-kleur: var(--color-brass); }
.md-verslag.gepakt { --md-kleur: var(--color-danger); }
.md-verslag-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.md-verslag-kop .md-kap { color: var(--md-kleur, var(--color-accent)); }
.md-verslag h2, .md-verslag-titel { font: 600 17px/1.2 var(--font-kop); color: var(--color-ink); }
.md-verslag-buit { margin-top: 4px; font: 600 22px/1 var(--font-kop); color: var(--color-money); font-variant-numeric: lining-nums tabular-nums; }
.md-verslag p { font-size: 12.5px; line-height: 1.45; color: var(--color-muted); }
.md-verslag > * + * { margin-top: 4px; }
.md-verslag .md-kost { margin-top: 6px; }

/* Een lichte strook (melding, uitleg) zonder donker vlak. */
.md-strook { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--color-line); border-left: 3px solid var(--md-kleur, var(--color-ink)); border-radius: var(--radius-ui); font-size: 12.5px; line-height: 1.4; color: var(--color-ink); background: color-mix(in oklab, var(--md-kleur, var(--color-ink)) 5%, transparent); }
.md-strook > .icon { flex: none; width: 15px; height: 15px; color: var(--md-kleur, var(--color-muted)); }
.md-strook.goud { --md-kleur: var(--color-brass); }
.md-strook.rood { --md-kleur: var(--color-danger); }

/* ==========================================================================
   Gedeelde onderdelen op deze pagina's licht en zonder foto.
   ========================================================================== */

/* Geen sfeerfoto's achter rijen (onder meer de eigenaarsstrook). */
.md .photo-row-bg, .md .photo-row-shade { display: none; }
.md .photo-row { background: transparent; }
.md .money-chip { padding: 0; border: 0; background: none; backdrop-filter: none; font: 600 12.5px/1 var(--font-kop); }

/* De eigenaarsstrook (van de groep bezit) op dezelfde kantlijn als de secties. */
.md > .bz-eigenaar, .md > .photo-row { margin-left: 16px; margin-right: 16px; }

/* Personage: compact, zonder portretkader. */
.md .persona-strip { padding: 6px 16px 8px; border-bottom: 0; }
.md .persona-strip .don-says { padding: 7px 11px; font-size: 14px; }

/* Wachttijd overslaan: een haarlijn, geen verloop. */
.md .skip-strip { margin: 0 16px; padding: 8px 0; background: none; border-radius: 0; }

/* Meldingen licht. */
.md .alert { color: var(--color-ink); }
.md .alert-error { border-color: color-mix(in oklab, var(--color-danger) 40%, transparent); background: color-mix(in oklab, var(--color-danger) 7%, transparent); color: var(--color-ink); }
.md .alert-success { border-color: color-mix(in oklab, var(--color-success) 40%, transparent); background: color-mix(in oklab, var(--color-success) 7%, transparent); color: var(--color-ink); }
.md .text-white { color: var(--color-ink); }
.md .stamp { mask-image: none; }

/* Lege staat met de Heraut: kleiner. */
.md .don-empty { padding-top: 12px; padding-bottom: 14px; }

/* ==========================================================================
   Pagina's
   ========================================================================== */

/* Spionage: de brief als perkament met een haarlijn; woorden als kleine knoppen. */
.md .terminal { margin: 8px 16px 0; padding: 10px 14px; border-radius: var(--radius-ui); font-size: 15px; line-height: 1.45; }
.md .terminal p { color: var(--color-muted); }
.md .term-hi { color: var(--color-ink) !important; font-weight: 600; }
.md .term-warn { color: var(--color-brass); }
.md .term-bad { color: var(--color-danger); }
.md .term-cursor { color: var(--color-ink); animation: none; }
.md .term-word { padding: 5px 6px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); color: var(--color-ink); font: 600 15px/1.1 var(--font-kop); letter-spacing: .02em; }
.md .term-word:hover:not(:disabled), .md .term-word:focus-visible { background: var(--color-ink); color: var(--color-card); outline: none; }
.md .term-word:disabled { color: var(--color-faint); background: transparent; text-decoration: line-through; }
.md .term-pip { width: 8px; height: 8px; border-radius: 1px; background: var(--color-ink); }
.md .term-pip.is-used { background: var(--color-line); opacity: 1; }

/* Schatkisten kraken: de schijf in inkt op velijn, de code als vakjes met een haarlijn. */
.md .safe-grid { padding: 12px 16px; gap: 14px; }
.md .safe-dial { width: 11rem; filter: none; }
.md .safe-dial text { font-family: var(--font-kop); font-weight: 600; }
.md .safe-slot { width: 2.4rem; height: 2.8rem; background: var(--color-card); font: 600 20px/1 var(--font-kop); color: var(--color-faint); }
.md .safe-slot.is-found { border-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 8%, transparent); color: var(--color-success); }
.md .safe-slot.is-now { border-color: var(--color-ink); background: transparent; color: var(--color-ink); }
.md .bank-range { accent-color: var(--color-ink); }
@media (max-width: 767px) { .md .safe-dial { width: 9.5rem; } }

/* Karweien: per opdrachtgever een blok zonder foto; de aanpakken als omlijnde knoppen. */
.md-klus { padding: 10px 16px 12px; border-bottom: 1px solid var(--color-line); }
.md-klus:last-child { border-bottom: 0; }
.md-klus-kop { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.md-klus-kop .md-kap { color: var(--color-accent); }
.md-klus-kop h2 { margin-top: 3px; font: 600 16px/1.15 var(--font-kop); }
.md-klus-kop p { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.md-klus-respect { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--color-muted); }
.md-klus-respect .md-voort { flex: 1; }
.md-klus-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; margin-top: 8px; }
.md .klus-choice { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 10px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); color: var(--color-ink); font-size: 11.5px; text-align: left; backdrop-filter: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.md .klus-choice:hover:not(:disabled) { border-color: var(--color-ink); background: var(--md-zacht); }
.md .klus-choice .icon { width: 15px; height: 15px; margin-top: 1px; color: var(--color-accent); }
.md .klus-choice b { font: 600 14.5px/1.15 var(--font-kop); }

/* Smokkel: de ransel als rijen; aantallen met kleine omlijnde knoppen. */
.md .crate { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0; background: none; }
.md .crate:last-child { border-bottom: 0; }
.md .crate.is-filled { border-color: var(--color-line); box-shadow: inset 3px 0 0 var(--color-brass); padding-left: 8px; }
.md .crate-icon { width: 34px; height: 34px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); }
.md .crate-icon img { filter: none; padding: 3px; }
.md .crate-icon .icon { width: 17px; height: 17px; color: var(--color-muted); }
.md .crate-controls { grid-column: 2; gap: 4px; }
.md .crate-controls .btn { min-height: 26px; padding: 0 8px; border: 1px solid var(--color-line); font-size: 9px; color: var(--color-ink); }
.md .crate-controls .btn:hover { border-color: var(--color-ink); background: transparent; }
.md .crate-controls .field { flex: none; width: 4.5rem; min-height: 26px; padding: 2px 6px; font: 600 14px/1 var(--font-kop); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 720px) {
  .md .crate { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .md .crate-controls { grid-column: auto; }
}

/* Taveerne: geen neon en geen donkere ramen; de bezetting als dunne lijn. */
.md .rld-window { height: 8px; border: 0; border-radius: 1px; background: var(--color-card-deep); box-shadow: none; animation: none; }
.md .rld-window.is-lit { background: var(--color-accent); box-shadow: none; animation: none; }

/* Wedren: de baan in velijn, de finish als dambord in inkt. */
.md .race-track { margin: 0 16px; padding: 8px 0; background: none; }
.md .race-lane { height: 40px; background-color: var(--color-card); background-image: linear-gradient(90deg, transparent 0 20px, var(--color-line) 20px 50px, transparent 50px); }
.md .race-car img { width: 34px; height: 34px; border-radius: var(--radius-ui); border: 1px solid var(--color-line); }
.md .race-finish { background: repeating-conic-gradient(var(--color-ink) 0 25%, var(--color-card) 0 50%) 0 0 / 6px 6px; }
.md-plaats { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-ink); border-radius: var(--radius-ui); font: 600 14px/1 var(--font-kop); }
.md-plaats.eerste { background: var(--color-ink); color: var(--color-card); }

/* Aanslagen: het verslag van de schout als twee kolommen met een lijn ertussen. */
.md-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; }
.md-duel-kant { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.md-duel-kant img { width: 38px; height: 38px; object-fit: cover; border: 1px solid var(--color-line); border-radius: var(--radius-ui); }
.md-duel-kant.dood img { filter: grayscale(1); opacity: .7; }
.md-duel-kant b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.15 var(--font-kop); color: var(--color-ink); }
.md-duel-kant small { display: block; font-size: 11px; color: var(--color-muted); }
.md-duel-kant .bar { margin-top: 4px; }
.md-duel-vs { font: italic 600 14px/1 var(--font-kop); color: var(--color-faint); }
.md .hp-drain { max-width: none; }

/* Wapenervaring: de schietbaan licht, met dunne banen in plaats van een foto. */
.md .range-stage { aspect-ratio: auto; height: 15rem; max-height: none; margin: 8px 16px 0; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card-deep) repeating-linear-gradient(90deg, transparent 0 calc(18% - 1px), var(--color-line) calc(18% - 1px) 18%); }
.md .range-stage > img { display: none; }
.md .range-target { filter: none; }
.md .range-target rect { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 1.5; }
.md .range-target path { fill: var(--color-ink); }
.md .range-hole { background: radial-gradient(circle, var(--color-ink) 35%, color-mix(in oklab, var(--color-accent) 60%, transparent) 45%, transparent 70%); }
.md .range-stage .glass { max-width: 22rem; padding: 12px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); box-shadow: inset 0 0 0 3px var(--color-card), inset 0 0 0 4px var(--color-line); backdrop-filter: none; }
.md .range-stage .glass .text-\[17px\], .md .range-stage .glass .text-\[22px\] { font-family: var(--font-kop); }
.md .range-stage .badge { background: var(--color-card); color: var(--color-ink); border-color: var(--color-line); backdrop-filter: none; }
.md .range-stage [data-range-overlay].md-dicht { background: color-mix(in oklab, var(--color-card-deep) 70%, transparent); }
.md .range-field { inset-inline: 4%; top: 22%; height: 62%; }
.md-wapen-voort { width: 64px; }

/* Kerker: rijen met een klein portret achter dunne tralies in inkt. */
.md .jail-row { padding: 8px 16px; gap: 6px 10px; border-bottom: 1px solid var(--color-line); }
.md .jail-row.is-self { background: color-mix(in oklab, var(--color-danger) 6%, transparent); box-shadow: inset 3px 0 0 var(--color-danger); }
.md .jail-mug { width: 30px; height: 36px; border-color: var(--color-line); }
.md .jail-mug .cell-bars { background: repeating-linear-gradient(90deg, transparent 0 6px, rgb(29 27 24 / .55) 6px 7px); }
.md .jail-row b, .md .jail-row a { font-family: var(--font-kop); font-size: 15px; font-weight: 600; }
.md .jail-time { font: 600 15px/1 var(--font-kop) !important; color: var(--color-danger); }
.md .jail-actions .btn { min-height: 26px; padding: 0 9px; font-size: 9px; }
.md .escape-bars { display: none; }

/* Gasthuis: het register als kader met haarlijn, de hartslag in inkt. */
.md .dossier { margin: 8px 16px 0; padding: 10px 14px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: none; color: var(--color-ink); box-shadow: none; }
.md .dossier-clip { display: none; }
.md .dossier-stamp { transform: none; border-width: 1px; border-radius: var(--radius-ui); font: 700 8.5px/1 var(--font-sans); letter-spacing: .12em; padding: 4px 6px; opacity: 1; }
.md .dossier-bar { height: 3px; border-radius: 0; background: var(--color-card-deep); }
.md .dossier-bar > span { border-radius: 0; }
.md .dossier svg { max-height: 54px; }

/* Oefenveld: tabellen iets kleiner. */
.md .admin-table td, .md .table td { font-size: 12.5px; }

/* Reizen: de kaart licht, met inkten stippen en een karmijnrode route. */
.md-kaart { margin: 8px 16px 0; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); overflow: hidden; }
.md-kaart svg { max-height: 15rem; }
.md-bestemmingen { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; }
.md-bestemmingen .choice { min-height: 0; padding: 5px 8px; font: 600 14px/1.1 var(--font-kop); }
.md .map-dot:hover .map-pin, .md .map-dot.is-target .map-pin { fill: var(--color-accent); stroke: var(--color-card); }
.md .map-dot.is-target text { fill: var(--color-accent); }
.md .travel-overlay { position: static; max-width: none; padding: 10px 16px; border: 0; border-top: 1px solid var(--color-line); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; align-items: center; }
.md .travel-overlay-don { display: none; }
.md .travel-stage { margin: 8px 16px 0; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); overflow: hidden; }
.md .travel-stage > svg { max-height: 15rem; }

/* Gesneuveld: een eenvoudig blad. */
.md-graf { max-width: 26rem; margin: 0 auto; padding: 22px 20px 20px; text-align: center; color: var(--color-ink); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-ui); box-shadow: inset 0 0 0 4px var(--color-card), inset 0 0 0 5px var(--color-line), 0 24px 60px rgb(0 0 0 / .35); }
.md-graf h1 { font: 700 24px/1.1 var(--font-kop); }
.md-graf .md-kruis { display: grid; place-items: center; width: 46px; height: 58px; margin: 0 auto 10px; border: 1px solid var(--color-line); border-radius: 999px 999px 3px 3px; color: var(--color-muted); }

@media (max-width: 640px) {
  .md-motto { font-size: 14px; }
  .md-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-rij { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; }
  .md-rij.zonder-beeld { grid-template-columns: minmax(0, 1fr) auto; }
.md-rij.met-vink { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .md-ico { width: 30px; height: 30px; }
  .md-rij.stapel { grid-template-columns: 30px minmax(0, 1fr); }
  .md-rij.stapel .md-rij-eind, .md-rij.met-vink .md-rij-eind { grid-column: 2; justify-content: flex-start; }
  .md-rij.met-vink { grid-template-columns: 16px minmax(0, 1fr); row-gap: 5px; }
  .md-rij.met-vink .md-vink { align-self: start; margin-top: 2px; }
  .md-duel { grid-template-columns: minmax(0, 1fr); }
  .md-duel-vs { display: none; }
  .md .range-stage { height: 13rem; }
}
.md-schijf-getal { width: 2rem; text-align: right; font: 600 22px/1 var(--font-kop); }
.md-klus-respect { flex-wrap: wrap; }
.md-klus-respect .md-voort { min-width: 80px; }
.md-smokkel-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-ink); }
.md-smokkel-voet .md-verslag-buit { margin-top: 3px; }
.md-feit b.md-geld { color: var(--color-money); }
.md-feit b.md-goud { color: var(--color-brass); }
.md-wacht p b { display: inline; font: 600 13px/1.4 var(--font-sans); }
.md-wacht > p { margin-top: 0; font-size: 13px; }
.md-veld-klein { width: 5.5rem !important; min-height: 26px; padding: 2px 6px; font: 600 14px/1 var(--font-kop); }
.md-veld-keus { width: 9.5rem !important; min-height: 26px; padding: 2px 6px; font-size: 12.5px; }
@media (max-width: 640px) {
  .md-rij.zonder-beeld.stapel { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .md-rij.zonder-beeld.stapel .md-rij-eind { grid-column: 1; justify-content: flex-start; }
}

/* Aanslagen, premielijst en wapenervaring: tabbladen met de inhoud eronder. */
.md-tabinhoud { padding-top: 2px; }
.md-tabinhoud > * + * { margin-top: 6px; }
.md-tabinhoud > .md-verslag { margin-top: 10px; }
.md-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--color-muted); }
.md-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.md-stats .icon { width: 13px; height: 13px; color: var(--color-faint); }
.md-stats b { font: 600 14px/1 var(--font-kop); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.md-duel-kant small b { display: inline; font: inherit; font-weight: 700; color: inherit; }
.md-tag.hidden { display: none; }
.md-tag.vol-licht { background: var(--color-card); border-color: var(--color-line); color: var(--color-ink); }
.md-tag.vol-licht b { font: 600 12px/1 var(--font-kop); letter-spacing: 0; }
.md-tag.vol-licht .icon { color: var(--color-accent); }
.md-rij.dicht-zacht .md-rij-tekst b { color: var(--color-muted); }
.md-ico.md-geld { color: var(--color-money); border-color: color-mix(in oklab, var(--color-money) 40%, transparent); }
@media (min-width: 900px) {
  .md-rijen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .md-rijen-2 > .md-rij:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.md-velden.boven { align-items: start; }
.md .range-stage [data-range-overlay] { padding-top: 40px; }
@media (max-width: 640px) { .md .range-stage { height: 17.5rem; } .md .range-stage .glass { padding: 10px 12px; } }
.md-sectie .md-wacht { padding: 0; }
.md .travel-overlay { flex-wrap: wrap; gap: 8px 14px; }
.md-rand-boven { border-top: 1px solid var(--color-line); }
.md-geen-wrap { flex-wrap: nowrap; }
.md-rij-tekst b > .icon:first-child { display: inline-block; margin-right: 5px; vertical-align: -2px; }
.md-kaart { align-self: start; }
@media (min-width: 1280px) { .md-kaart svg { max-height: 22rem; } }
@media (max-width: 640px) { .md .travel-overlay > div { flex-basis: 100%; } }