/* StreetMafia Design V2026 - bridge for pages that are not migrated yet (Fase B).
   style.css stays loaded and keeps its #pagina .content rules; this file only
   undoes fixed widths and light colours so old content is usable in the new shell. */
#pagina { width: auto; }
#pagina .content { width: auto; margin: 0; padding: 0; background: none; line-height: 1.5; font-size: 14px; color: var(--sm-text); }
#pagina .content a { color: var(--sm-link); }
#pagina .content a:hover { color: var(--sm-text); }
#pagina .content .sm-ui a { color: inherit; }
#pagina .content .sm-ui a:hover { color: inherit; }
#pagina .content .sm-ui a.sm-more-link, #pagina .content .sm-ui a.sm-more-link:hover { color: var(--sm-link); }
#pagina .content .sm-ui a.sm-btn--primary, #pagina .content .sm-ui a.sm-btn--primary:hover { color: var(--sm-on-accent); }

/* Sub navigation tabs */
#pagina .content ul.menu-content { float: none; display: flex; gap: 4px; margin: 0 0 var(--sm-gap); padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; }
#pagina .content ul.menu-content li { float: none; flex: none; border: 0; background: none; }
#pagina .content ul.menu-content li:hover { border: 0; }
#pagina .content ul.menu-content li a { float: none; display: flex; align-items: center; height: auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); background: var(--sm-surface); color: var(--sm-text); font: 400 14px/1.2 var(--sm-font); white-space: nowrap; }
#pagina .content ul.menu-content li a:hover { border-color: var(--sm-muted); color: var(--sm-text); }
#pagina .content ul.menu-content li.active { background: none; border: 0; }
#pagina .content ul.menu-content li.active a, #pagina .content ul.menu-content li.active a:hover { border-color: var(--sm-accent); background: var(--sm-accent); color: var(--sm-on-accent); }
#pagina .content ul.menu-content li .credit { display: none; }

/* Content frame */
#pagina .content .txt, #pagina .content .txt-noborder { float: none; width: auto; margin: 0; padding: 0; border: 0; background: none; }
#pagina .content .txt::after { content: ""; display: block; clear: both; }
#pagina .content .ContentM, #pagina .content .ContentLeft, #pagina .content .ContentRight { min-width: 0; margin: 0 0 var(--sm-gap); padding: 20px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius); background: var(--sm-surface); overflow-x: auto; }
#pagina .content .ContentLeft { float: left; clear: left; width: calc(50% - var(--sm-gap) / 2); }
#pagina .content .ContentRight { float: right; width: calc(50% - var(--sm-gap) / 2); }
#pagina .content .ContentM h1, #pagina .content .ContentLeft h1, #pagina .content .ContentRight h1, #pagina .content .txt h1, #pagina .content .txt h2, #pagina .content .txt-noborder h1, #pagina .content .txt-noborder h2 { margin: 0 0 14px; padding: 0; background: none; color: var(--sm-text); font: 600 24px/1.2 var(--sm-font-display); text-shadow: none; }
.sm-body h2, .sm-body h3, .sm-body h4 { background: none; }

/* Tables */
#pagina .content table { max-width: 100%; color: inherit; border-collapse: collapse; }
#pagina .content td, #pagina .content th { padding: 4px 6px; }
#pagina .content .TBclass:hover, #pagina .content tr:hover > td[bgcolor] { background: var(--sm-surface-2); }
#pagina .content td[bgcolor], #pagina .content tr[bgcolor], #pagina .content table[bgcolor] { background: var(--sm-surface-2) !important; }
#pagina .content img:not(.sm-ui *) { max-width: 100%; height: auto; }
#pagina .content .icon img, #pagina .content td img[src*="icons/"] { height: auto; }

/* Forms */
#pagina .content form .input-text { float: left; width: 36%; height: auto; min-height: 44px; padding-top: 8px; }
#pagina .content form .input-value { float: left; width: 64%; height: auto; min-height: 44px; }
#pagina .content input.text, #pagina .content textarea, #pagina .content select, #leden-zoeken form input.zoekveld { border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); background: var(--sm-surface-2); color: var(--sm-text); font: 400 14px/1.3 var(--sm-font); padding: 8px 12px; }
#pagina .content input.text.groot { width: 100%; }
#pagina .content .loginbox::after { content: ""; display: block; clear: both; }
.sm-body .button, .sm-body input[type="submit"], .sm-body input[type="button"], .sm-body button.button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--sm-accent); border-radius: var(--sm-radius-s); background: var(--sm-accent); color: var(--sm-on-accent); font: 600 15px/1.2 var(--sm-font-display); cursor: pointer; text-shadow: none; box-shadow: none; margin-bottom: 0; }
.sm-body .button:hover, .sm-body input[type="submit"]:hover, .sm-body input[type="button"]:hover { background: var(--sm-accent-hover); }
.sm-body .button a, .sm-body span.button a { color: var(--sm-on-accent); }

/* Messages */
.sm-body .meldingen .info, .sm-body .meldingen .success, .sm-body .meldingen .warning, .sm-body .meldingen .error, .sm-body .meldingen .validation { padding: 12px 16px 12px 46px; border: 1px solid var(--sm-border); border-left-width: 4px; border-radius: var(--sm-radius-s); background-color: var(--sm-surface-2); color: var(--sm-text); }
.sm-body .meldingen .info { border-left-color: #3b9ae1; background-image: url('../afbeeldingen/icons/Info.png'); }
.sm-body .meldingen .success { border-left-color: var(--sm-ok); background-image: url('../afbeeldingen/icons/ValidGreen.png'); }
.sm-body .meldingen .warning { border-left-color: var(--sm-warn); background-image: url('../afbeeldingen/icons/Attention.png'); }
.sm-body .meldingen .error, .sm-body .meldingen .validation { border-left-color: var(--sm-accent); background-image: url('../afbeeldingen/icons/Cancel.png'); }
.sm-body .meldingen span { color: var(--sm-muted); }

/* Other light surfaces */
#pagina .content blockquote { border-color: var(--sm-border); background: var(--sm-surface-2); color: var(--sm-text); }
#pagina .content .winkelitem { background: var(--sm-surface-2); border-color: var(--sm-border); color: var(--sm-text); }
#pagina .content .wapenwinkelBG { border-color: var(--sm-border); }
#pagina .content .wapenwinkelBG:hover { background: var(--sm-surface-2); border-color: var(--sm-accent); }
#pagina .content .forum-topic, #pagina .content .main, #pagina .content .chatBox, #pagina .content #inkomsten-doel { width: auto; max-width: 100%; }
#pagina .content .forum-bericht-start, #pagina .content .forum-bericht-react { width: auto; float: none; overflow: hidden; border-color: var(--sm-border); background: var(--sm-surface-2); box-shadow: none; }
#pagina .content #newMessageContent { background: var(--sm-surface-2); color: var(--sm-text); }
#pagina .content [style*="rgb(236, 236, 236)"] { border-color: var(--sm-border) !important; background: var(--sm-surface-2) !important; }
.jcarousel-skin-award .jcarousel-container-horizontal, .jcarousel-skin-award .jcarousel-clip-horizontal { width: auto; max-width: 100%; }
#pagina .content .jcarousel-skin-award li { color: var(--sm-text); }
.sm-screens { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.sm-screens__title { display: flex; align-items: center; gap: 10px; font: 600 22px/1.2 var(--sm-font-display) !important; color: var(--sm-text); }
.sm-screens__title .sm-icon { width: 26px; height: 26px; color: var(--sm-muted); }
.sm-screens__grid { display: grid; gap: 14px; }
.sm-screens__item { display: block; overflow: hidden; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); transition: border-color .2s, box-shadow .2s; }
.sm-screens__item:hover, .sm-screens__item:focus-visible { border-color: var(--sm-accent); box-shadow: 0 0 16px rgba(227, 29, 43, .3); }
.sm-screens__item img { display: block; width: 100%; height: auto; transition: transform .3s; }
.sm-screens__item:hover img { transform: scale(1.03); }
.sm-screens__more { width: 100%; }
@media (max-width: 999.98px) { .sm-screens { display: none; } }

/* Narrow main column: boxes stack, wide content scrolls inside its own box */
@container (max-width: 700px) {
	#pagina .content .ContentLeft, #pagina .content .ContentRight { float: none; width: auto; }
	#pagina .content .ContentM, #pagina .content .ContentLeft, #pagina .content .ContentRight { padding: 16px; }
	#pagina .content form .input-text { float: none; width: auto; min-height: 0; padding-top: 4px; }
	#pagina .content form .input-value { float: none; width: auto; }
	#pagina .content .forum-user { float: none; width: auto; }
	#pagina .content .drugs-tekst { height: auto; }
}

/* ---- Fase B, golf 0: shared building blocks for every legacy page ---- */

/* Tabs: swipeable without a grey scrollbar; the active tab is scrolled into view by sm-shell.js. */
#pagina .content ul.menu-content { scrollbar-width: none; }
#pagina .content ul.menu-content::-webkit-scrollbar { display: none; }
#pagina .content ul.menu-content.sm-tabs--more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }

/* Colours hard-coded in old pages, mapped to tokens so they stay readable in both themes. */
#pagina .content font[color="red" i], #pagina .content font[color="#ff0000" i] { color: var(--sm-danger-text); }
#pagina .content font[color="green" i], #pagina .content font[color="#23810a" i] { color: var(--sm-ok); }
#pagina .content font[color="blue" i] { color: var(--sm-info-text); }
#pagina .content font[color="grey" i], #pagina .content font[style*="#505050"], #pagina .content [style*="color: #444444"] { color: var(--sm-muted) !important; }
#pagina .content font[style*="#820500"] { color: inherit !important; }
#pagina .content [bgcolor="#d5d5d5" i], #pagina .content [style*="#d5d5d5"], #pagina .content [style*="#c7c7c7"] { background: var(--sm-surface-2) !important; color: var(--sm-text) !important; }
#pagina .content small { font-size: 12px; }

/* The small action block next to a heading was fixed at 110px, too narrow for its button. */
#pagina .content span.left { width: auto; }

/* Table rows */
#pagina .content table tr.top > td, #pagina .content table tr.TBbegin > td { color: var(--sm-muted); font-weight: 600; border-bottom: 1px solid var(--sm-border); }
#pagina .content table tr.TBclass > td, #pagina .content table tr.TBeigen > td { border-bottom: 1px solid var(--sm-border); }
#pagina .content table tr.TBeigen > td { background: var(--sm-surface-2); }

/* Tables that do not fit become cards; sm-shell.js sets .sm-stack and the labels. */
#pagina .content table.sm-stack { display: block; clear: both; width: 100% !important; }
#pagina .content table.sm-stack > tbody { display: block; }
#pagina .content table.sm-stack tr { display: block; height: auto !important; padding: 8px 0; border-bottom: 1px solid var(--sm-border); }
#pagina .content table.sm-stack tr::after { content: ""; display: block; clear: both; }
#pagina .content table.sm-stack tr.sm-stack__head { display: none; }
#pagina .content table.sm-stack td, #pagina .content table.sm-stack th { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; width: auto !important; height: auto !important; padding: 3px 0; border: 0; text-align: right !important; overflow-wrap: anywhere; }
#pagina .content table.sm-stack td[data-sm-label]::before { content: attr(data-sm-label); color: var(--sm-muted); text-align: left; }
#pagina .content table.sm-stack td.sm-stack__icon { display: block; float: left; padding: 3px 8px 0 0; }
#pagina .content table.sm-stack td:empty { display: none; }

/* Tables without a header row (forms, shop items): the cells wrap instead of scrolling. */
#pagina .content table.sm-flow { display: block; clear: both; width: 100% !important; }
#pagina .content table.sm-flow > tbody { display: block; }
#pagina .content table.sm-flow tr { display: flex; height: auto !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; }
#pagina .content table.sm-flow td, #pagina .content table.sm-flow th { display: block; width: auto !important; max-width: 100%; height: auto !important; padding: 2px 0; }
#pagina .content table.sm-flow td img, #pagina .content table.sm-flow td input, #pagina .content table.sm-flow td select { max-width: 100%; }

/* Buttons keep the meaning of their old colour. */
.sm-body .button.black, .sm-body input.button.black { border-color: var(--sm-border); background: var(--sm-surface-2); color: var(--sm-text); }
.sm-body .button.black:hover, .sm-body input.button.black:hover { border-color: var(--sm-muted); background: var(--sm-surface-2); }
.sm-body .button.gold, .sm-body input.button.gold { border-color: #f5b40a; background: #f5b40a; color: #17171b; }
.sm-body .button.gold:hover, .sm-body input.button.gold:hover { background: #ffc733; }
.sm-body .button.blue, .sm-body input.button.blue { border-color: #1f6fc4; background: #1f6fc4; color: #fff; }
.sm-body .button.blue:hover, .sm-body input.button.blue:hover { background: #2b82dd; }
.sm-body .button.green, .sm-body input.button.green { border-color: #15803d; background: #15803d; color: #fff; }
.sm-body .button.green:hover, .sm-body input.button.green:hover { background: #1a9a4a; }
.sm-body .button span { background: none; }

/* Search box of the member lists: the icon button is not a normal submit button. */
.sm-body #leden-zoeken form input.zoekbutton { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: url(../afbeeldingen/icons/magnifier.png) no-repeat center; top: 0; right: 0; }
.sm-body #leden-zoeken form { width: 200px; max-width: 100%; height: auto; margin: 0 0 8px 12px; }
.sm-body #leden-zoeken form input.zoekveld { width: 100%; height: 40px; padding-right: 32px; background: var(--sm-surface-2); border-color: var(--sm-border); color: var(--sm-text); }

/* Pagination */
#pagina .content .pagination a, #pagina .content .pagination span { border-color: var(--sm-border); background: var(--sm-surface-2); color: var(--sm-text); box-shadow: none; text-shadow: none; }
#pagina .content .pagination a.number.current { border-color: var(--sm-accent); background: var(--sm-accent); color: var(--sm-on-accent); }

/* Touch: controls in tables, lists and pagination get a real target; links in running text stay inline. */
@media (max-width: 767.98px), (pointer: coarse) {
	#pagina .content td a, #pagina .content li > a, #pagina .content .pagination a { display: inline-block; padding-block: 7px; }
	#pagina .content input[type="image"]:not([name="captcha"]), #pagina .content input[type="file"] { min-height: 44px; padding: 10px; }
	#pagina .content input[type="checkbox"], #pagina .content input[type="radio"] { width: 24px; height: 24px; vertical-align: middle; }
	#pagina .content input.text, #pagina .content select, #pagina .content input[type="text"], #pagina .content input[type="password"], #pagina .content input[type="email"], #pagina .content input[type="number"] { min-height: 44px; font-size: 16px; }
	.sm-body .button, .sm-body input[type="submit"], .sm-body input[type="button"] { min-height: 44px; }
	#pagina .content td input[type="text"], #pagina .content td input[type="password"], #pagina .content td input[type="email"], #pagina .content td input[type="number"], #pagina .content td input.text, #pagina .content td select { width: 100%; min-width: 140px; }
	#pagina .content textarea { width: 100% !important; }
}

/* CKEditor: its toolbar has no dark skin; inverting keeps the icons legible. The text area uses v2026-editor.css. */
:root:not([data-theme="light"]) .cke_top, :root:not([data-theme="light"]) .cke_bottom, :root:not([data-theme="light"]) .cke_dialog, :root:not([data-theme="light"]) .cke_panel { filter: invert(.92) hue-rotate(180deg); }
.sm-body .cke_chrome { max-width: 100%; border-color: var(--sm-border); box-shadow: none; }
.sm-body .cke_inner, .sm-body .cke_wysiwyg_frame, .sm-body .cke_contents { background: var(--sm-surface-2) !important; }

/* Bot check: onlinecheck.php compares the clicked pixel coordinates, so this image must never be scaled or padded. */
#pagina .content input[name="captcha"] { padding: 0; min-height: 0; max-width: none; width: auto; height: auto; }

/* ---- Fase B, golf 1: core loop (crimes, car theft, robberies) ---- */

/* Choice cards: the whole card selects its radio (sm-shell.js); the radio stays the real form field. */
#pagina .content .sm-choice { float: left; width: calc(50% - 8px); margin: 0 0 16px; padding: 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); background: var(--sm-surface-2); }
#pagina .content .sm-choice--right { float: right; }
#pagina .content .sm-choice:has(input[type="radio"]) { cursor: pointer; }
#pagina .content .sm-choice:has(input[type="radio"]):hover { border-color: var(--sm-muted); }
#pagina .content .sm-choice:has(input:checked) { border-color: var(--sm-accent); box-shadow: inset 0 0 0 1px var(--sm-accent); }
#pagina .content .sm-choice::after { content: ""; display: block; clear: both; }
#pagina .content .sm-choice > div { padding: 0 !important; }
#pagina .content .sm-choice .titel { display: block; margin-bottom: 8px; font: 600 18px/1.2 var(--sm-font-display); }
#pagina .content .sm-choice br:first-of-type { display: none; }
#pagina .content .sm-choice .drugs-img { float: left; width: auto; height: auto; margin: 0 12px 0 0; }
#pagina .content .sm-choice .drugs-img table { width: auto; }
#pagina .content .sm-choice .drugs-img td { padding: 0 6px 0 0; }
#pagina .content .sm-choice .drugs-img .img, #pagina .content .sm-choice .drugs-img .img:hover { display: block; width: 84px; height: 84px; padding: 0; border: 1px solid var(--sm-border); border-radius: 8px; object-fit: cover; }
#pagina .content .sm-choice .drugs-tekst { float: none; width: auto; height: auto; overflow: hidden; }
#pagina .content .sm-choice .drugs-tekst td { padding: 1px 4px; }
#pagina .content .sm-choice .drugs-tekst td:last-child { text-align: right; }

/* Action button and result: visible while choosing on a phone. */
#pagina .content span:has(> #pleeg), #pagina .content span:has(> #steel) { display: block; margin: 12px 0; text-align: center; }
#pagina .content #pleeg, #pagina .content #steel { min-width: 240px; min-height: 48px; font-size: 18px; }
#bericht:not(:empty) { position: sticky; top: calc(var(--sm-topbar-h) + 8px); z-index: 20; margin-bottom: 12px; }
#bericht .meldingen > div { margin: 0; box-shadow: var(--sm-shadow); }

/* Bank robbery and other images with fixed sizes */
#pagina .content img[style*="width: 200px"], #pagina .content img[style*="width: 150px"] { max-width: 100%; height: auto !important; }

/* Text inputs never exceed their box (the bot check image is excluded by its type). */
#pagina .content input[type="text"], #pagina .content input[type="password"], #pagina .content input[type="email"], #pagina .content input:not([type]) { max-width: 100%; }

@container (max-width: 680px) {
	#pagina .content .sm-choice, #pagina .content .sm-choice--right { float: none; width: auto; }
	#pagina .content table[style*="float: left"], #pagina .content table[style*="float: right"] { float: none !important; width: 100% !important; }
}
@media (max-width: 767.98px) {
	#pagina .content span:has(> #pleeg), #pagina .content span:has(> #steel) { position: sticky; bottom: calc(var(--sm-bottomnav-h) + env(safe-area-inset-bottom) + 8px); z-index: 20; }
	#pagina .content #pleeg, #pagina .content #steel { width: 100%; box-shadow: var(--sm-shadow); }
}

#pagina .content .sm-choice .drugs-tekst td:last-child { white-space: nowrap; }
#pagina .content table.sm-stack td.sm-stack__blank { display: none; }
#pagina .content table.sm-stack td.sm-stack__icon a { min-height: 0; padding-block: 0; }

/* Popups (level up, secret mission, hidden boxes) */
#cboxOverlay { background: #000; }
.sm-body #cboxContent, .sm-body #cboxLoadedContent { background: var(--sm-surface); color: var(--sm-text); }
.sm-body #cboxContent { border-radius: var(--sm-radius-s); }
.sm-body #cboxLoadedContent > div { max-width: 100%; }
.sm-body #cboxLoadedContent img { max-width: 100%; height: auto; }
.sm-body #cboxTitle, .sm-body #cboxCurrent { color: var(--sm-muted); }

/* Sticky button and result need a box that is no scroll container. */
#pagina .content .ContentM:has(.sm-choice) { overflow: visible; }

/* ---- Fase B, golf 2: economy (bank, shop, storage, airport, auction, buildings) ---- */

/* Shop items: the old layout table becomes a grid without moving any form or field. */
#pagina .content table:has(> tbody > tr > td.wapenwinkelBG) { display: block; width: 100% !important; }
#pagina .content table:has(> tbody > tr > td.wapenwinkelBG) > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
#pagina .content table:has(> tbody > tr > td.wapenwinkelBG) > tbody > tr { display: contents; }
#pagina .content td.wapenwinkelBG, #pagina .content td.wapenwinkelBG:hover { display: block; width: auto !important; padding: 0; border: 0; background: none; }
#pagina .content .winkelitem { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); text-align: center; }
#pagina .content .winkelitem:hover { border-color: var(--sm-muted); }
#pagina .content .winkelitem > br { display: none; }
#pagina .content .winkelitem > b { font: 600 18px/1.2 var(--sm-font-display); }
#pagina .content .winkelitem > img { width: auto !important; height: auto !important; max-height: 120px; margin: 10px 0; border-radius: 8px; object-fit: contain; }
#pagina .content .winkelitem > i { margin: auto 0; color: var(--sm-muted); }
#pagina .content .winkelitem > table { width: 100%; margin-top: auto; }
#pagina .content .winkelitem table td:last-child:not([colspan]) { text-align: right; font-weight: 600; }
#pagina .content .winkelitem form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
#pagina .content .winkelitem input.text { flex: 1 1 72px; width: 72px !important; min-width: 0; margin: 0 !important; }

/* Storage: same card, the two columns stack in a narrow main column. */
#pagina .content .sm-item { float: left; clear: left; width: calc(50% - 8px); margin: 0 0 16px; padding: 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); background: var(--sm-surface-2); }
#pagina .content .sm-item--right { float: right; clear: right; }
#pagina .content .sm-item img.drugsLab, #pagina .content .sm-item img.drugsLab:hover { display: block; width: 84px; height: 84px; padding: 0; border: 1px solid var(--sm-border); border-radius: 8px; object-fit: cover; }
#pagina .content .sm-item form { display: flex; flex-wrap: wrap; gap: 6px; }
#pagina .content .sm-item input.text { flex: 1 1 72px; width: 72px !important; min-width: 0; margin: 0 !important; }

/* Amounts and old inline colours */
#pagina .content td { font-variant-numeric: tabular-nums; }
#pagina .content span[style*="color: green"] { color: var(--sm-ok) !important; }
#pagina .content span[style*="color: red"] { color: var(--sm-danger-text) !important; }
#pagina .content input[style*="width: 75%"], #pagina .content select[style*="width: 79%"] { width: 100% !important; }
#pagina .content table.sm-flow td:empty { display: none; }

/* Actions below a list keep their spacing and wrap on a phone. */
#pagina .content form > div[style*="text-align:right"] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* A select-all box in a header row stays available when the table becomes cards. */
#pagina .content table.sm-stack tr.sm-stack__head:has(input[type="checkbox"]) { display: block; }
#pagina .content table.sm-stack tr.sm-stack__head:has(input[type="checkbox"]) > :not(:has(input[type="checkbox"])) { display: none; }
#pagina .content table.sm-stack tr.sm-stack__head td:has(input[type="checkbox"]) { justify-content: flex-start; align-items: center; color: var(--sm-muted); }
#pagina .content table.sm-stack tr.sm-stack__head td:has(input[type="checkbox"])::after { content: "Alles selecteren"; }

/* Pick lists: the whole row selects its radio (sm-shell.js); the radio stays the real form field. */
#pagina .content table.sm-pick tr:has(input[type="radio"]) { cursor: pointer; }
#pagina .content table.sm-pick tr:has(input[type="radio"]) > td { border-top: 1px solid var(--sm-border); }
#pagina .content table.sm-pick tr:has(input[type="radio"]:hover) > td, #pagina .content table.sm-pick tr:has(input[type="radio"]):hover > td { background: var(--sm-surface-2); }
#pagina .content table.sm-pick tr:has(input:checked) > td { background: var(--sm-surface-2); box-shadow: inset 0 1px 0 var(--sm-accent), inset 0 -1px 0 var(--sm-accent); }

/* Time slider of protection and hiding: a handle that can be hit on a touch screen. */
#pagina .content #slider { margin: 12px 8px; }
#pagina .content #titel font { color: var(--sm-text); }
@media (pointer: coarse) {
	#pagina .content #slider { height: 12px; }
	#pagina .content #slider .ui-slider-handle { top: -12px; width: 32px; height: 32px; margin-left: -16px; }
}

@container (max-width: 680px) {
	#pagina .content .sm-item, #pagina .content .sm-item--right { float: none; width: auto; }
}
#pagina .content .winkelitem table td { padding-inline: 3px; }
#pagina .content .winkelitem table td:last-child:not([colspan]) strong { white-space: nowrap; }
.sm-body .button.cyan, .sm-body input.button.cyan { border-color: #1f6fc4; background: #1f6fc4; color: #fff; }
.sm-body .button.cyan:hover, .sm-body input.button.cyan:hover { background: #2b82dd; }
.sm-body .button.orange, .sm-body input.button.orange { border-color: #f5b40a; background: #f5b40a; color: #17171b; }
.sm-body .button.orange:hover, .sm-body input.button.orange:hover { background: #ffc733; }

/* Lists keep their values on one line; if that does not fit, sm-shell.js turns them into cards. */
#pagina .content table.sm-list:not(.sm-stack) td { white-space: nowrap; }

@container (max-width: 680px) {
	/* A form in a table cell: field on its own line, buttons share the next one. */
	#pagina .content td > form:has(> input.text) { display: flex; flex-wrap: wrap; gap: 8px; }
	#pagina .content td > form:has(> input.text) > input.text { flex: 1 1 100%; }
	#pagina .content td > form:has(> input.text) > input[type="submit"] { flex: 1 1 auto; }
	#pagina .content tr:has(> td:empty + td > form) { display: flex; }
	#pagina .content tr:has(> td:empty + td > form) > td:empty { display: none; }
	#pagina .content tr:has(> td:empty + td > form) > td { flex: 1 1 auto; }
	/* Storage cards with forms: image and stock on one line, then field next to button. */
	#pagina .content .sm-item:has(form) table, #pagina .content .sm-item:has(form) tbody { display: block; }
	#pagina .content .sm-item:has(form) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 3px 0; }
	#pagina .content .sm-item:has(form) td { display: block; padding: 0; }
	#pagina .content .sm-item:has(form) td[rowspan] { width: auto !important; height: auto !important; }
	#pagina .content .sm-item:has(form) td:has(> form) { flex: 1 1 170px; }
	#pagina .content .sm-item:has(form) form { flex-wrap: nowrap; }
	#pagina .content .sm-item:has(form) input[type="submit"] { flex: none; }
}

/* Key and value rows that had to wrap keep their value on the right. */
#pagina .content table.sm-flow tr > td:nth-child(3):last-child:not(:has(form)) { margin-left: auto; }

/* Item cards keep the field next to the button at every width. */
#pagina .content .sm-item:has(form) td > form > input.text, #pagina .content .winkelitem td > form > input.text { flex: 1 1 72px; }
#pagina .content .sm-item:has(form) td > form > input[type="submit"], #pagina .content .winkelitem td > form > input[type="submit"] { flex: none; }

/* Icon-only actions in a card (attack, remove) get a real touch target. */
#pagina .content table.sm-stack td.sm-stack__icon a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }

/* ---- Fase B, golf 3: casino ---- */

/* Rock paper scissors: three real choices that fit a phone. */
#pagina .content .img-casino img { box-sizing: border-box; width: 100%; max-width: 132px; height: auto; padding: 8px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); background: var(--sm-surface-2); cursor: pointer; }
#pagina .content .img-casino img:hover { padding: 8px; border: 1px solid var(--sm-accent); border-radius: var(--sm-radius-s); }
#pagina .content [role="button"]:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
#pagina .content td:has(> .img-casino) { padding: 4px; }

/* Guess the number: the amounts fill in the stake. */
#pagina .content .sm-pick-value { display: inline-block; padding-block: 4px; color: var(--sm-link); cursor: pointer; }
#pagina .content img[src*="arrow-090"] { cursor: pointer; }
#pagina .content input#inzet { width: 160px; min-width: 0; }
#pagina .content select#nummer { min-width: 96px; }

/* Higher or lower: the game next to its prize list, the game first on a phone. */
#pagina .content table.sm-hogerlager { display: block; }
#pagina .content table.sm-hogerlager > tbody { display: block; }
#pagina .content table.sm-hogerlager > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sm-gap); }
#pagina .content table.sm-hogerlager > tbody > tr > td { display: block; flex: 1 1 260px; width: auto !important; padding: 0; }
#pagina .content table.sm-hogerlager table { width: 100% !important; }
#pagina .content table.sm-hogerlager .juist_hoger { color: var(--sm-muted); border-bottom: 1px solid var(--sm-border); }
#pagina .content #ronde, #pagina .content #getal { font: 600 36px/1.1 var(--sm-font-display) !important; }
#pagina .content #getal[style*="color: green"], #pagina .content td[id^="ronde_"][style*="color: green"] { color: var(--sm-ok) !important; }
#pagina .content #getal[style*="color: red"], #pagina .content td[id^="ronde_"][style*="color: red"], #pagina .content span[style*="color:red"] { color: var(--sm-danger-text) !important; }
#pagina .content #winprijs input { margin: 6px 4px; min-width: 96px; }
@container (max-width: 680px) {
	#pagina .content table.sm-hogerlager > tbody > tr { flex-direction: column-reverse; align-items: stretch; }
	#pagina .content table.sm-hogerlager > tbody > tr > td { flex: none; }
}

/* Wheel of fortune: the result stands out and is announced. */
#pagina .content #gewonnen_prijs:not(:empty) { padding: 12px 16px; border: 1px solid var(--sm-border); border-left: 4px solid var(--sm-ok); border-radius: var(--sm-radius-s); background: var(--sm-surface-2); font: 600 20px/1.3 var(--sm-font-display); }
#pagina .content .sm-item form:has(input[name="submit"]) { justify-content: center; }
#pagina .content input[value="Draai"] { min-width: 200px; min-height: 48px; font-size: 18px; }

/* ---- Fase B, golf 4: messages, forum, chat, family, organized crime, profile ---- */

/* Lists keep their values on one line in a narrow column; wide columns may wrap long titles. */
#pagina .content table.sm-list:not(.sm-stack) td { white-space: normal; }
@container (max-width: 680px) {
	#pagina .content table.sm-list:not(.sm-stack) td { white-space: nowrap; }
}

/* Forum posts: avatar, message and moderator tools side by side, without the old fixed heights. */
#pagina .content .forum-topic { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; gap: 12px; width: auto; height: auto; margin: 0 0 12px; padding: 0; }
#pagina .content .forum-topic > * { grid-row: 1; }
#pagina .content .forum-user { float: none; width: auto; margin: 0; }
#pagina .content .forum-user br { display: none; }
#pagina .content img.forumavatar, #pagina .content img.forumavatar:hover { box-sizing: border-box; display: block; width: 96px; height: 96px; padding: 0; border: 1px solid var(--sm-border); border-radius: 8px; object-fit: cover; }
#pagina .content .forum-bericht-start, #pagina .content .forum-bericht-react { box-sizing: border-box; float: none; width: auto; min-width: 0; min-height: 96px; padding: 12px 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); overflow-wrap: anywhere; }
#pagina .content .forum-bericht-start .clear, #pagina .content .forum-bericht-react .clear { margin-bottom: 6px; }
#pagina .content .forum-bericht-react .left, #pagina .content .forum-bericht-react .right { height: auto; }
#pagina .content .forum-topic .admin { border-color: var(--sm-info-text); }
#pagina .content .forum-topic .forum-admin { float: none; display: flex; flex-direction: column; gap: 4px; width: auto; padding: 4px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-s); }
#pagina .content .forum-topic .forum-admin:hover { background: var(--sm-surface-2); }
#pagina .content .forum-topic .forum-admin a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0; }
#pagina .content .forum-topic .forum-admin img { padding: 0; }
@container (max-width: 680px) {
	#pagina .content .forum-topic { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
	#pagina .content img.forumavatar, #pagina .content img.forumavatar:hover { width: 44px; height: 44px; }
	#pagina .content .forum-bericht-start, #pagina .content .forum-bericht-react { min-height: 0; }
	#pagina .content .forum-topic .forum-admin { grid-row: 2; grid-column: 2; flex-direction: row; justify-self: start; }
}

/* Chat */
#pagina .content .chatBox { float: none; width: auto; }
#pagina .content .chatBox .main { float: none; width: auto; padding: 0; overflow-wrap: anywhere; }
#pagina .content .chatBox .main td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--sm-border); vertical-align: top; }
#pagina .content .chatBox .main td em { color: var(--sm-muted); font-style: normal; font-size: 12px; }
#pagina .content .chatBox .messageBox { padding: 0; }
#pagina .content .chatBox .newMessage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#pagina .content .chatBox .newMessage > div { float: none !important; }
#pagina .content .chatBox .newMessage > div[style*="85%"] { flex: 1 1 220px; width: auto !important; min-width: 0; }
#pagina .content .chatBox #newMessageContent { width: 100%; }
#pagina .content .chatBox table[style*="float"] { float: none !important; width: auto !important; }
#pagina .content #smilebar a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0; }
#pagina .content #smilebar td { height: auto !important; padding: 0; }
@media (max-width: 767.98px), (pointer: coarse) {
	#pagina .content #smilebar a { min-width: 36px; min-height: 36px; }
	#pagina .content .chatBox table[style*="float"], #pagina .content .chatBox table[style*="float"] > tbody { display: block; }
	#pagina .content #smilebar { display: flex; flex-wrap: wrap; }
}

/* Links in the heading row of a forum page wrap with their button. */
#pagina .content span.right, #pagina .content span.left { max-width: 100%; }