@font-face { font-family: 'Nunito Sans'; src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
:root {
  --display-font: 'Nunito Sans', Arial, sans-serif;
  --ink: #faf6fc; --brand-purple: #751f9d; --blue: var(--brand-purple); --orange: #ff713c; --yellow: #ffdb51;
  --body: #100e13; --surface: #17141b; --rim: #322b38; --muted: #bcb3c3;
  --surface-raised: #211b27; --track: #302735; --accent-deep: #501269; --accent-edge: #b55de0;
  --edge: inset 0 1px 0 #ffffff0d, 0 2px 0 #08070a;
  font-family: 'Nunito Sans', Arial, sans-serif; background: var(--body);
}
body { background: var(--body); font-size: 15px; }
body { position: relative; isolation: isolate; min-height: 100vh; }
button, input, select { font-family: inherit; }
button { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
button:active:not(:disabled) { transform: translateY(2px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, summary:focus-visible, .avatar-swatches input:focus-visible, .avatar-details summary:focus-visible { outline: 3px solid #dca9f4; outline-offset: 4px; }
button, input, select, dialog, progress, .screen, .quiz-portret { border-image: none; }
.account::after, .tabs button::after, .primary::after, .game-stage::after, dialog::after,
.tools button::after, .icon-button::after, .text-button::after, .subtle::after,
.answers button::after, .quiz-portret::after, .screen::after, .podium-step::after,
.avatar-preview::after, .avatar-effects label::after, .avatar-swatches label::after,
.rank-podium::after, .community::after { content: none; display: none; }
.header, main { max-width: 720px; }
.header { display: grid; grid-template-columns: minmax(0,1fr) 112px; min-height: 80px; gap: 8px; padding: 14px 16px 18px; }
.brand { display: flex; align-items: center; min-width: 0; min-height: 44px; }
.brand img { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 906 / 178; object-fit: contain; filter: brightness(0) invert(1); }
.account { grid-column: 2; grid-row: 1; min-height: 44px; padding: 0; background: transparent; border-radius: 14px; font-size: 14px; font-weight: 800; gap: 7px; }
.account canvas { width: 35px; height: 41px; border-radius: 13px; background: var(--surface-raised); outline: 1px solid var(--rim); flex-shrink: 0; }
.account > svg { display: none; }
.account span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
main { padding: 0 16px calc(112px + env(safe-area-inset-bottom,0px)); }
.community { position: relative; display: block; padding: 13px 14px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--rim); border-radius: 18px; box-shadow: var(--edge); }
.community-heading { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 3px 9px; align-items: center; }
.community-heading > svg { grid-column: 1; grid-row: 1/3; width: 28px; height: 36px; color: var(--orange); transform: none; stroke-width: 2; }
.community-heading h2 { display: block; grid-column: 2; font-size: 14px; line-height: 1.35; font-weight: 800; max-width: none; }
.community-count { grid-column: 2; display: flex; align-items: baseline; gap: 4px; font-size: 14px; text-align: left; line-height: 1.3; color: var(--muted); }
#community-total, .community-count > span:last-child { color: var(--muted); font-size: inherit; display: inline; }
.community-meter { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 9px; }
.community progress { display: block; appearance: none; width: 100%; margin: 0; height: 14px; border: 1px solid #665171; border-radius: 9px; background: var(--track); overflow: hidden; }
.community progress::-webkit-progress-bar { background: var(--track); }
.community progress::-webkit-progress-value { background: var(--orange); border-radius: 9px; box-shadow: inset 0 1px 0 #ffffff77; transition: width .4s ease; }
.community progress::-moz-progress-bar { background: var(--orange); border-radius: 9px; }
#community-percent { min-width: 3ch; font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.community-bottom { margin-top: 4px; }
#community-status { font-size: 12px; font-weight: 600; color: var(--muted); }
.community[data-state="complete"] .community-bottom { position: static; width: auto; height: auto; clip-path: none; }
.community.points-added progress { animation: none; }
.game-layout { display: block; }
.game-stage { padding: 0; background: transparent; }
.stage-top { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0; margin: 0 0 14px; min-height: 48px; background: transparent; }
.game-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-width: 0; padding: 3px; background: var(--surface); border: 1px solid var(--rim); border-radius: 16px; box-shadow: var(--edge); }
.game-switch button { border-radius: 12px; min-height: 44px; padding: 5px 3px; font-size: 12px; font-weight: 800; line-height: 1.15; background: transparent; color: var(--muted); }
.game-switch button[aria-pressed="true"] { color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 #ffffffa0, 0 3px 0 var(--accent-deep); }
.game-switch button:not([aria-pressed="true"]):not(:disabled):hover { background: var(--surface-raised); color: white; }
.game-switch button:disabled { opacity: 1; color: #ad9db8; cursor: not-allowed; }
.tools { display: flex; gap: 7px; }
.tools button, .icon-button { width: 44px; height: 44px; border: 1px solid var(--rim); border-radius: 50%; color: var(--ink); background: var(--surface); box-shadow: var(--edge); }
.game-panel { min-width: 0; }
.screen { border: 4px solid var(--surface); border-radius: 24px; background: var(--body); box-shadow: 0 0 0 1px var(--rim); overflow: hidden; aspect-ratio: 4/3; }
.das-scherm { aspect-ratio: 16/9; }
.koer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 19px 0 10px; }
.koer-heading h2 { font-size: 24px; font-weight: 900; line-height: 1.15; margin: 3px 0 0; }
.koer-heading [data-koer-stage] { color: #a5b595; font-size: 10px; font-weight: 800; }
.koer-wave { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; font-size: 9px; font-weight: 800; color: #b4bead; }
.koer-wave strong { color: #edf3d9; font-size: 28px; line-height: 1; }
.screen.koer-scherm { aspect-ratio: 8/9; margin-top: 8px; border-width: 4px; border-color: #363e36; border-radius: 18px; box-shadow: 0 0 0 1px #687460, 0 4px 0 #0a120c; background: #929b92; }
.koer-wave-progress { display: flex; gap: 10px; align-items: center; margin: 8px 2px; }
.koer-wave-progress progress { flex: 1; min-width: 0; height: 5px; appearance: none; border: 0; border-radius: 3px; overflow: hidden; background: #30362e; }
.koer-wave-progress progress::-webkit-progress-bar { background: #30362e; }
.koer-wave-progress progress::-webkit-progress-value { background: #c4e675; }
.koer-wave-progress progress::-moz-progress-bar { background: #c4e675; }
.koer-wave-progress span { font-size: 10px; color: #b8c1b1; min-width: 13ch; text-align: right; font-variant-numeric: tabular-nums; }
.koer-briefing { display: grid; gap: 3px; margin: 8px 2px; padding: 8px 10px; border-left: 3px solid var(--accent-edge); background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1.35; }
.koer-briefing strong { color: var(--ink); font-size: 12px; }
.koer-briefing > span { font-variant-numeric: tabular-nums; }
.koer-briefing p { margin: 0; }
.koer-briefing [data-koer-brief-action] { color: #e9d5f3; font-weight: 700; }
.koer-shop { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 44px; gap: 7px; margin-top: 12px; }
.koer-shop button { --tool-color: #5ed7ff; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 120px; padding: 4px 3px 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--rim); border-top-color: #86728e; border-radius: 12px; box-shadow: inset 0 1px 0 #d6c0d625, 0 4px 0 #130c19; gap: 1px; }
.koer-shop [data-koer-tool="dweil"] { --tool-color: #ffe15a; }
.koer-shop [data-koer-tool="bezem"] { --tool-color: #ff7967; }
.koer-shop button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--recharge,0%); background: #140c1ca6; pointer-events: none; }
.koer-shop button[aria-pressed="true"] { background: #3c2949; border-color: var(--tool-color); box-shadow: inset 0 0 0 1px var(--tool-color), 0 4px 0 #150b20; }
.koer-shop button[data-available="false"] canvas { opacity: .5; }
.koer-shop button[data-available="false"] .koer-cost { color: #99a09c; }
.koer-shop button:disabled { opacity: .5; cursor: not-allowed; }
.koer-shop canvas { width: 48px; height: 55px; image-rendering: pixelated; flex: 0 0 55px; }
.koer-shop strong { font-size: 12px; line-height: 1.3; }
.koer-shop .koer-cost { font-size: 15px; font-weight: 900; color: var(--tool-color); line-height: 1.3; white-space: nowrap; }
.koer-shop .koer-cost span { font-size: 9px; font-weight: 700; }
.koer-shop .koer-wait { position: absolute; z-index: 1; top: 26px; font-size: 19px; font-weight: 900; text-shadow: 0 2px #111; }
.koer-shop .koer-remove { min-height: 120px; background: var(--surface); }
.koer-feedback { min-height: 28px; padding-top: 6px; }
.screen canvas { width: 100%; height: 100%; }
.screen-name { position: absolute; left: 14px; top: 13px; z-index: 1; font-size: 19px; font-weight: 900; line-height: 1.2; color: #fff; pointer-events: none; text-shadow: 0 2px 0 #0b1b27; }
.game-overlay { padding: 14px; justify-content: center; align-items: center; background: transparent; pointer-events: none; }
.game-overlay > strong { display: none; font-size: 27px; color: white; text-shadow: none; }
.game-overlay[data-result="true"] { background: #1a0e25cc; }
.game-overlay[data-result="true"] > strong { display: block; }
.scorebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 12px 0; margin: 8px 0 0; background: transparent; border: 0; border-radius: 0; gap: 0; }
.scorebar > span { flex-direction: row; align-items: center; justify-content: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--muted); min-width: 0; }
.scorebar > span:not([hidden]) + span { border-left: 1px solid var(--rim); }
.scorebar strong { font-family: inherit; font-size: 19px; line-height: 1.1; font-weight: 900; margin: 0; color: var(--ink); }
.scorebar > span:last-of-type strong, .scorebar [data-spring-score], .scorebar [data-das-score] { color: var(--yellow); }
.scorebar svg { width: 19px; height: 19px; fill: #ff624f; color: #ff624f; }
.scorebar.koer-scorebar { grid-template-columns: 1.25fr .7fr 1.1fr; margin: 0; padding: 8px 3px; background: var(--surface); border-color: var(--rim); border-radius: 10px; }
.koer-scorebar > span { gap: 5px; }
.koer-scorebar > span > span { font-size: 9px; }
.koer-scorebar [data-lucide="droplets"], .koer-scorebar .lucide-droplets { color: #73dcff; fill: none; }
.koer-scorebar [data-koer-soap] { color: #73dcff; }
@media (max-width: 699px) {
  body.koer-playing .header, body.koer-playing .community, body.koer-playing .scout-next, body.koer-playing .game-summary { display: none; }
  body.koer-playing main { padding-top: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)); }
  body.koer-playing .stage-top { margin-bottom: 7px; }
  body.koer-playing .koer-heading { margin: 4px 0 7px; }
  body.koer-playing .koer-heading h2 { font-size: 18px; margin: 0; }
  body.koer-playing [data-koer-stage] { display: none; }
  body.koer-playing .koer-wave { flex-direction: row; gap: 5px; }
  body.koer-playing .koer-wave strong { font-size: 21px; }
  body.koer-playing .koer-wave-progress { margin: 5px 2px; }
  body.koer-playing .koer-scherm { width: max(280px,min(100%,calc((100svh - 510px) * .888889))); max-width: 100%; margin-inline: auto; }
  body.koer-playing .koer-shop { margin-top: 9px; }
  body.koer-playing .koer-shop button { min-height: 108px; }
  body.koer-playing .koer-shop canvas { width: 43px; height: 49px; flex-basis: 49px; }
  body.koer-playing .koer-feedback { font-size: 11px; min-height: 22px; padding-top: 5px; }
}
[data-spel="das"] .scorebar { grid-template-columns: repeat(5,minmax(0,1fr)); }
[data-spel="das"] .scorebar > span { flex-direction: column; gap: 3px; font-size: 9px; }
[data-spel="das"] .scorebar strong { font-size: 17px; }
.meter { height: 3px; margin: 5px 6px 0; background: var(--track); border-radius: 4px; overflow: hidden; }
.meter i { background: var(--blue); }
.primary { width: 100%; min-height: 56px; border: 1px solid var(--accent-edge); border-radius: 18px; padding: 12px 18px; color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 var(--accent-deep); font-size: 17px; font-weight: 800; }
.primary:hover { color: #fff; background: #8e2abb; transform: none; }
.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 #ffffffa0, 0 2px 0 var(--accent-deep); }
.primary svg { width: 24px; height: 24px; }
/* RGB emphasis is added by navigation.css only for focus or a selected action. */
.game-launch.arcade-controls {
  position: relative;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px; width: 100%; margin: 14px 0 10px; padding: 0;
  align-items: stretch; border-radius: 0; background: transparent; box-shadow: none;
}
button.arcade-button {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; min-width: 44px; min-height: 52px; height: 52px;
  padding: 0 12px; border: 2px solid var(--rim); border-radius: 12px;
  color: #fff; background: var(--surface); box-shadow: var(--edge);
  font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; transition: transform .12s ease;
}
.arcade-button svg { width: 18px; height: 18px; stroke-width: 2; }
.arcade-button span { min-width: 0; overflow-wrap: anywhere; }
button.arcade-button:active:not(:disabled) { transform: translateY(1px); }
button.arcade-button:disabled { opacity: .45; cursor: default; }
button.arcade-button:focus-visible { outline: 2px solid #e4bcf6; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  button.arcade-button { transition: none; }
}
.feedback { padding: 8px 3px 0; color: var(--muted); font-size: 13px; }
.feedback:empty { display: none; }
.paused { inset: 0; padding: 16px; gap: 10px; border-radius: 24px; background: #100e13f5; }
.paused > svg { display: none; }
.paused h2 { font-size: 24px; }
.paused .primary { max-width: 240px; min-height: 44px; padding: 8px 14px; font-size: 16px; }
.paused .subtle { min-height: 36px; padding: 6px; font-size: 14px; }
.game-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 14px 0; margin: 14px 0 0; background: transparent; border: 0; border-top: 1px solid var(--rim); border-radius: 0; box-shadow: none; }
.record-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 14px; font-weight: 800; }
.record-summary strong { color: var(--ink); margin: 0; font-family: inherit; font-size: 20px; font-weight: 900; }
.game-summary .mode { font-size: 10px; color: var(--muted); font-weight: 600; }
#spelen[data-profile="active"] .record-summary { grid-column: 1/-1; }
#spelen[data-profile="active"] .mode { display: none; }
.save-feedback { margin: 0; color: var(--muted); font-size: 12px; }
.save-feedback:has(p:empty):not(:has(button:not([hidden]))) { display: none; }
.scout-next { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 10px 0; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--rim); border-radius: 0; box-shadow: none; text-align: left; }
.scout-next canvas { width: 38px; height: 45px; flex-shrink: 0; image-rendering: pixelated; }
.next-copy { min-width: 0; flex: 1; }
.next-copy > strong { font-size: 15px; font-weight: 900; display: block; margin-bottom: 5px; }
.next-track { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.next-track progress { appearance: none; height: 6px; width: 100%; min-width: 0; background: var(--track); border: 0; border-radius: 6px; overflow: hidden; }
.next-track progress::-webkit-progress-bar { background: var(--track); }
.next-track progress::-webkit-progress-value { background: var(--orange); border-radius: 6px; }
.next-track progress::-moz-progress-bar { background: var(--orange); }
#next-points { flex-shrink: 0; font-variant-numeric: tabular-nums; }
#next-lock { color: var(--muted); width: 22px; height: 22px; }
.tabs { position: fixed; z-index: 10; left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom,0px)); width: auto; max-width: 700px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; padding: 5px; background: var(--surface); border: 1px solid var(--rim); border-top-width: 2px; border-radius: 25px; box-shadow: inset 0 1px 0 #ffffff20, 0 5px 0 #100a15, 0 8px 18px #0c071066; }
.tabs button { flex-direction: column; gap: 4px; padding: 8px 3px; min-width: 0; min-height: 64px; background: transparent; border: 1px solid transparent; border-radius: 19px; color: var(--muted); font-size: 12px; font-weight: 800; }
.tabs button svg { width: 25px; height: 25px; }
.tabs button[aria-current], .tabs button[aria-current]:hover { background: var(--blue); color: white; border-color: var(--accent-edge); box-shadow: inset 0 1px 0 #ffffffa0, 0 3px 0 var(--accent-deep); }
.tabs button:not([aria-current]):hover { background: var(--surface-raised); color: white; }
.section-title { margin: 20px 0; }
.section-title h1 { font-size: 28px; font-weight: 800; }
.text-button, .subtle { padding: 10px 14px; border-radius: 12px; font-weight: 800; text-decoration: none; color: #dfb5f2; background: var(--surface); }
select, input:not([type="radio"]) { min-height: 48px; padding: 12px; border: 1px solid #665171; border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 16px; }
.rank-filter select { border-radius: 15px; }
.rank-empty { border: 1px solid var(--rim); border-radius: 20px; background: var(--surface); gap: 15px; padding: 16px; }
.rank-empty img { width: 85px; height: 85px; }
.rank-empty h2 { font-size: 21px; }
.rank-podium { gap: 10px; margin: 24px 0; }
.podium-step { border-radius: 12px 12px 6px 6px; border: 1px solid #ffffff44; box-shadow: var(--edge); }
.podium-step span { font-family: inherit; font-size: 26px; font-weight: 900; }
.podium-entry[data-place="1"] .podium-step { background: var(--yellow); }
.podium-entry[data-place="2"] .podium-step { background: #b485dd; }
.podium-entry[data-place="3"] .podium-step { background: var(--orange); }
.table-wrap { padding: 4px 10px; border: 1px solid var(--rim); border-radius: 18px; background: var(--surface); }
.table-wrap:has(table[hidden]) { display: none; }
th { font-size: 10px; color: var(--muted); border-color: #665171; }
td { border-color: var(--rim); }
td:first-child, td:last-child { font-family: inherit; font-size: 21px; font-weight: 900; }
.rank-person > span { font-size: 14px; }
tr.mine { background: #40234e; }
tr.mine td { border-color: #856096; }
.rank-you { color: #e3baf5; }
.rank-list-head h2 { font-size: 21px; }
.avatar-preview { background: var(--surface); padding: 16px; border: 1px solid var(--rim); border-radius: 22px; grid-template-columns: 80px minmax(0,1fr); }
.avatar-preview strong { font-size: 21px; }
#avatar-level { font-size: 13px; color: var(--muted); }
.avatar-effects { gap: 10px; }
.collection-progress { padding: 16px; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--rim); border-radius: 18px; }
.collection-progress > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.collection-progress strong { font-size: 17px; }
.collection-progress span, .collection-progress p { font-size: 12px; color: var(--muted); }
.collection-progress p { margin-top: 6px; }
#collection-progress { appearance: none; display: block; width: 100%; height: 8px; margin: 12px 0 8px; overflow: hidden; border: none; border-radius: 8px; background: var(--track); }
#collection-progress::-webkit-progress-bar { background: var(--track); }
#collection-progress::-webkit-progress-value { background: var(--accent-edge); border-radius: 8px; }
#collection-progress::-moz-progress-bar { background: var(--accent-edge); border-radius: 8px; }
.scout-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin-bottom: 14px; }
.scout-filters button { min-width: 0; min-height: 44px; padding: 8px 4px; border-radius: 12px; color: var(--muted); background: var(--surface); font-size: 12px; }
.scout-filters button[aria-pressed="true"] { color: white; background: var(--brand-purple); }
.avatar-effects label[hidden], #collection-progress[hidden] { display: none; }
.avatar-effects label { border: 1px solid var(--rim); border-radius: 16px; box-shadow: var(--edge); padding: 12px 5px; background: var(--surface); }
.avatar-effects label:has(input:checked) { border-color: var(--accent-edge); background: #40234e; }
.avatar-effects input { width: 16px; height: 16px; border-radius: 50%; background: var(--body); accent-color: var(--brand-purple); }
.avatar-effects input:checked { background: var(--blue); box-shadow: inset 0 0 0 3px var(--body); }
.avatar-effects span { font-size: 12px; }
.avatar-effects .unlock-level { color: var(--muted); font-size: 11px; }
.avatar-editor input:disabled { cursor: not-allowed; }
.avatar-swatches input { border-radius: 50%; border: 2px solid #ffffff99; box-shadow: inset 0 1px 0 #ffffff99, 0 3px 0 #160e1e; }
.avatar-details { padding-inline: 12px; border: 1px solid var(--rim); border-radius: 16px; background: var(--surface); }
.avatar-actions { gap: 12px; align-items: stretch; }
.avatar-actions .primary { width: 100%; min-height: 50px; font-size: 16px; border-radius: 14px; }
.avatar-actions .subtle { background: var(--surface); border: 1px solid var(--rim); }
dialog { border: 1px solid #756180; border-radius: 24px; background: var(--surface); box-shadow: inset 0 1px 0 #ffffff22, 0 20px 60px #0008; padding: 24px; }
dialog::backdrop { background: #120a1bd9; }
dialog h2 { font-size: 24px; }
dialog .primary { font-size: 18px; }
.quiz { min-height: 280px; background: var(--surface); border: 1px solid var(--rim); border-radius: 22px; padding: 18px; }
.quiz h3 { font-family: inherit; font-size: 23px; line-height: 1.25; }
.quiz .answers button { min-height: 48px; background: var(--blue); border: 1px solid var(--accent-edge); border-radius: 13px; color: #fff; box-shadow: var(--edge); font-size: 18px; }
.quiz .answers .correct { background: #1da36c; color: #fff; }
.quiz .answers .wrong { background: #d33745; color: #fff; }
.quiz-portret { background: var(--surface-raised); padding: 5px; border-radius: 19px; }
.quiz-photo { border-radius: 14px; }
.quiz-cover { margin: 16px auto 22px; }
@media (max-width:359px) {
  .header { grid-template-columns: minmax(0,1fr) 94px; }
  .account { font-size: 12px; }
  .account canvas { width: 29px; height: 34px; }
  main { padding-inline: 12px; }
  .community-heading h2 { font-size: 13px; }
  .game-switch button { font-size: 11px; }
  .tabs button { font-size: 11px; }
  .scorebar strong { font-size: 17px; }
}
@media (min-width:700px) {
  .header, main { padding-inline: 24px; }
  .community { padding: 16px 20px; }
  .community-heading h2 { font-size: 17px; }
  .community-count { font-size: 15px; }
  .game-switch button { font-size: 15px; min-height: 48px; }
  .screen-name { font-size: 24px; left: 20px; top: 20px; }
  .scorebar > span { font-size: 13px; }
  .scorebar strong { font-size: 24px; }
}
@media (min-width:1000px) {
  .header, main { max-width: 900px; }
  .avatar-editor { grid-template-columns: minmax(200px,.7fr) minmax(0,1.3fr); }
}
@media (prefers-reduced-motion:reduce) {
  button { transition: none; }
  .community progress::-webkit-progress-value { transition: none; }
}

/* Opening logo sits above navigation, and always releases the page. */
#station-intro { position: fixed; inset: 0; z-index: 1000; background: #07050b; animation: intro-fail-open 0s 5s forwards; }
#station-intro[hidden] { display: none; }
#station-intro > canvas { display: block; width: 100%; height: 100%; }
#station-intro .intro-skip { position: absolute; left: 50%; bottom: max(24px,env(safe-area-inset-bottom,0px)); transform: translateX(-50%); min-height: 44px; padding: 10px 22px; border: 1px solid #725181; border-radius: 24px; color: #e0cde9; background: #160d20; font-size: 13px; }
#station-intro .intro-skip:hover { background: #30203d; color: #fff; }
body.intro-running { overflow: hidden; }
@keyframes intro-fail-open { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { #station-intro { display: none; } }

/* Front-facing moulded cartridges; only the selected shell has an RGB edge. */
.stage-top:has(.cartridge-picker) { display: block; position: relative; padding-top: 48px; }
.stage-top:has(.cartridge-picker) > .tools { position: absolute; top: 0; right: 0; }
.game-switch.cartridge-picker {
  display: block; width: 100%; max-width: 440px; margin-inline: auto;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.cartridge-shelf { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.game-switch.cartridge-picker button,
.game-switch.cartridge-picker button:hover,
.game-switch.cartridge-picker button:not([aria-pressed="true"]):not(:disabled):hover,
.game-switch.cartridge-picker button[aria-pressed="true"] {
  position: relative; display: block; width: 100%; aspect-ratio: .72;
  min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; box-shadow: none; color: #fff;
  cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.game-switch.cartridge-picker button:active:not(:disabled) { transform: translateY(1px); }
.game-switch.cartridge-picker button:focus-visible { outline: 2px solid #e4bcf6; outline-offset: 4px; }
.cartridge-shell {
  --cartridge-shape: polygon(10% 0,90% 0,100% 8%,100% 24%,97% 24%,97% 28%,100% 28%,100% 32%,97% 32%,97% 36%,100% 36%,100% 40%,97% 40%,97% 44%,100% 44%,100% 48%,97% 48%,97% 52%,100% 52%,100% 100%,84% 100%,81% 94%,19% 94%,16% 100%,0 100%,0 52%,3% 52%,3% 48%,0 48%,0 44%,3% 44%,3% 40%,0 40%,0 36%,3% 36%,3% 32%,0 32%,0 28%,3% 28%,3% 24%,0 24%,0 8%);
  position: absolute; inset: 0 0 10%; display: block;
  clip-path: var(--cartridge-shape); background: #403847;
}
.cartridge-face {
  position: absolute; inset: 2px; display: block; clip-path: var(--cartridge-shape);
  background:
    radial-gradient(circle at 10% 87%,#09060d 0 1.5%,#a397b1 1.7% 2%,#17101e 2.2% 3%,transparent 3.2%),
    radial-gradient(circle at 90% 87%,#09060d 0 1.5%,#a397b1 1.7% 2%,#17101e 2.2% 3%,transparent 3.2%),
    radial-gradient(circle at 10% 23%,#09060d 0 1.5%,#a397b1 1.7% 2%,#17101e 2.2% 3%,transparent 3.2%),
    #211b27;
}
.cartridge-face::before {
  content: ''; position: absolute; top: 3%; left: 22%; right: 22%; height: 13%;
  border: 1px solid #141019; border-bottom-color: #706279; border-radius: 1px;
  background: repeating-linear-gradient(to bottom,#131018 0 2px,#463b50 2px 3px,#2b2533 3px 5px);
  box-shadow: inset 0 2px 3px #0007;
}
.cartridge-label {
  position: absolute; inset: 20% 7% 13%; display: grid;
  grid-template-rows: minmax(0,1fr) auto; gap: 0; padding: 2px;
  border: 1px solid #0a070e; border-radius: 5px; color: #fff; background: #141118;
  box-shadow: inset 0 2px 4px #0007,0 1px 0 #574c61;
  pointer-events: none;
}
.cartridge-label .cartridge-cover {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: contain; image-rendering: pixelated; border-radius: 2px;
}
.cartridge-caption { display: flex; flex-direction: column; justify-content: center; min-height: 24px; width: 100%; padding: 3px 1px; }
.cartridge-name { display: block; font-size: 12px; line-height: 16px; font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.cartridge-soon { display: block; font-size: 10px; line-height: 12px; font-weight: 700; color: #b3a0c3; text-align: center; }
.cartridge-contacts {
  position: absolute; left: 18%; right: 18%; bottom: 3%; height: 12%;
  border: 2px solid #204736; border-radius: 3px; background: #123426; box-shadow: 0 2px 2px #0007;
}
.cartridge-contacts::before {
  content: ''; position: absolute; inset: 2px 8% 2px;
  background: repeating-linear-gradient(90deg,#c4a464 0 7%,#a38349 7% 10%,transparent 10% 16.66%);
}
.game-switch.cartridge-picker button[aria-pressed="true"] .cartridge-shell {
  background: conic-gradient(from var(--nav-rgb-angle),#ff4d69,#ff9b22,#ffe850,#42e582,#38c9ff,#8664ff,#ec52dd,#ff4d69);
  animation: none;
}
.game-switch.cartridge-picker button:disabled { cursor: not-allowed; }
.game-switch.cartridge-picker button:disabled .cartridge-shell { background: #4b4056; }
.game-switch.cartridge-picker button:disabled .cartridge-face { background-color: #27212f; }
@media (min-width: 700px) {
  .cartridge-shelf { gap: 14px; }
  .cartridge-label { padding: 3px; }
  .cartridge-name { font-size: 14px; line-height: 18px; }
  .cartridge-soon { font-size: 11px; line-height: 14px; }
  .cartridge-caption { min-height: 30px; padding: 5px 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-switch.cartridge-picker button[aria-pressed="true"] .cartridge-shell { animation: none; }
}