[data-spel="koer"] { max-width: 560px; margin-inline: auto; }
[data-spel="koer"] * { letter-spacing: 0; }
.koer-heading { margin: 12px 0 8px; }
.koer-heading h2 { font-size: 20px; }
.koer-heading [data-koer-stage], .koer-wave { color: var(--muted); }
.koer-wave strong { color: var(--ink); font-size: 24px; }
.screen.koer-scherm { aspect-ratio: 4/5; width: 100%; max-width: 460px; margin: 8px auto 0; border: 2px solid #514457; border-radius: 16px; background: #99a0a0; box-shadow: inset 0 1px #ffffff26, 0 4px #08060c; overflow: hidden; isolation: isolate; }
#koer-canvas { display: block; image-rendering: auto; touch-action: none; }
#koer-canvas:focus-visible { outline: 3px solid #50def4; outline-offset: -4px; }
.koer-wave-progress progress, .koer-wave-progress progress::-webkit-progress-bar { background: #302735; }
.koer-wave-progress progress::-webkit-progress-value { background: #27d4e9; }
.koer-wave-progress progress::-moz-progress-bar { background: #27d4e9; }
.koer-wave-progress span { color: var(--muted); font-size: 11px; }
.koer-scorebar [data-koer-soap] { color: #27d4e9; }
.koer-shop { margin: 10px 0 0; grid-template-columns: repeat(3,minmax(0,1fr)) 44px; gap: 6px; }
.koer-shop button, body.koer-playing .koer-shop button { min-height: 92px; padding: 3px 3px 6px; border-radius: 10px; background: #17141b; }
.koer-shop button[aria-pressed="true"] { background: #211b27; border-color: var(--tool-color); }
.koer-shop canvas, body.koer-playing .koer-shop canvas { width: 48px; height: 48px; flex-basis: 48px; image-rendering: auto; border-radius: 5px; }
.koer-shop .koer-cost { font-size: 10px; font-weight: 700; }
.koer-cost b { font-size: 14px; }
.koer-shop .koer-remove { min-height: 92px; }
.koer-shop .koer-wait { top: 16px; }
.koer-feedback { min-height: 20px; font-size: 12px; margin: 0; }
.koer-owned { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10px; color: #c9b7d3; }
.koer-owned:empty { display: none; }
.koer-owned > span { border-bottom: 1px solid #665273; line-height: 1.6; }
.koer-loading, .koer-upgrades { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: #100e13ef; }
.koer-loading { align-items: center; gap: 16px; color: var(--ink); }
.koer-loading button { background: #302337; border: 1px solid #9475a4; color: #fff; border-radius: 8px; min-height: 44px; padding: 8px 14px; }
.koer-upgrades { overflow-y: auto; overscroll-behavior: contain; gap: 14px; justify-content: safe center; }
body.koer-upgrading .koer-upgrades { position: fixed; top: max(12px,env(safe-area-inset-top)); bottom: calc(88px + env(safe-area-inset-bottom)); left: 0; right: 0; width: min(100%,500px); margin-inline: auto; box-sizing: border-box; z-index: 60; padding: 22px 18px; background: #120c19; border-radius: 0; }
.koer-upgrades h3 { font-size: 20px; color: #fff; margin: 0; }
[data-koer-choices] { display: grid; gap: 14px; }
[data-koer-choices] button { --card-accent: #f3bc32; --card-seam: #b8a58b; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(64px,32%) minmax(0,1fr); align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 126px; padding: 12px 15px 19px 8px; color: #fff; background: #211b27; border: 3px solid #594863; border-radius: 20px 20px 11px 11px; box-shadow: inset 0 2px #ffffff5c, inset 0 -7px #00000045, 0 5px #07040b; }
[data-koer-choices] button::before { content: ''; position: absolute; top: 8px; left: 13px; right: 13px; height: 3px; border-top: 1px solid #fff3; border-bottom: 1px solid #0004; pointer-events: none; }
[data-koer-choices] button::after { content: ''; position: absolute; bottom: 6px; right: 16px; width: 52px; height: 5px; background: repeating-linear-gradient(90deg,#08060c80 0 3px,#ffffff25 3px 4px,transparent 4px 8px); pointer-events: none; }
[data-koer-choices] button[data-rarity="Waardeloos"] { border-color: #8b8173; background: linear-gradient(163deg,transparent 15%,#fff1 15% 15.6%,transparent 15.6% 82%,#0003 82% 83%,transparent 83%), repeating-linear-gradient(111deg,transparent 0 41px,#fff1 42px,transparent 43px 80px) #423d37; }
[data-koer-choices] button[data-rarity="Neutraal"] { --card-accent: #2ad5ee; --card-seam: #ac70bf; border-color: #725187; border-inline-color: #28c9e7; background: linear-gradient(#ffffff09,transparent 45%) #382344; }
[data-koer-choices] button[data-rarity="INSANE"] { --card-accent: #ef72ff; --card-seam: #ba5bec; border-color: transparent; background: linear-gradient(#1d1129,#180f21) padding-box, conic-gradient(from var(--koer-rgb-angle),#fa315d,#ffbd19,#68ed6b,#1cdbeb,#806bff,#ef42ff,#fa315d) border-box; box-shadow: inset 0 2px #ffffff5c, inset 0 -7px #00000045, 0 0 14px #b256dc50, 0 5px #07040b; animation: koer-rgb-edge 9s linear infinite; }
[data-koer-choices] button:hover { border-top-color: #fff; }
[data-koer-choices] button:active { transform: translateY(2px); box-shadow: inset 0 2px #0006, 0 1px #07040b; }
[data-koer-choices] button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
[data-koer-choices] .koer-card-art { display: block; position: relative; align-self: stretch; min-width: 0; border-right: 1px solid var(--card-seam); box-shadow: 1px 0 #0008; padding-right: 6px; }
[data-koer-choices] canvas { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1; margin-block: 7px; image-rendering: auto; filter: drop-shadow(0 5px 2px #0006); }
[data-koer-choices] [data-rarity="INSANE"] canvas { filter: drop-shadow(0 0 5px #29d2f77a) drop-shadow(0 5px 2px #0009); }
[data-koer-choices] .koer-card-copy { display: block; min-width: 0; }
[data-koer-choices] strong { display: block; font-size: 16px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
[data-koer-choices] .koer-card-effect { display: block; font-size: 12px; color: #e5dce9; line-height: 1.45; margin-top: 6px; overflow-wrap: anywhere; }
[data-koer-choices] .koer-card-effect b { color: var(--card-accent); font-size: 15px; font-weight: 900; }
[data-koer-choices] .koer-rarity { display: table; max-width: 100%; margin: 0 0 8px; padding: 4px 9px; border: 1px solid #0007; border-radius: 6px; font-size: 11px; font-weight: 900; line-height: 1.2; color: #fff; background: #514154; box-shadow: inset 0 1px #ffffff70, inset 0 -2px #0002, 0 2px #0005; }
[data-koer-choices] [data-rarity="Waardeloos"] .koer-rarity { background: #e5af29; color: #231b0d; }
[data-koer-choices] [data-rarity="Neutraal"] .koer-rarity { background: #23c7e2; color: #0b2231; }
[data-koer-choices] [data-rarity="INSANE"] .koer-rarity { background: linear-gradient(100deg,#22d8ef,#bca0ff 50%,#f65cd9); color: #250a2d; }
.koer-owned [data-rarity="INSANE"], .koer-free { color: #f78bf0; }
@property --koer-rgb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes koer-rgb-edge { to { --koer-rgb-angle: 360deg; } }
.koer-scherm .game-overlay { display: flex; flex-direction: column; gap: 8px; color: #eee; }
.koer-scherm #paused { z-index: 4; }
.koer-upgrades[hidden], .koer-loading[hidden], .koer-scherm .game-overlay[hidden] { display: none; }
@media (max-width: 699px) {
  body.koer-playing .header { display: contents; }
  body.koer-playing .brand, body.koer-playing #account { display: none; }
  body.koer-playing .stage-top { display: none; }
  body.koer-playing .koer-scherm { width: min(100%,max(256px,calc((100svh - 370px) * .8))); margin-inline: auto; }
  body.koer-playing .koer-heading h2 { font-size: 18px; }
  body.koer-playing .koer-feedback { min-height: 20px; }
  body.koer-playing .koer-owned { max-height: 38px; overflow-y: auto; }
  body.koer-playing .koer-shop { margin-top: 8px; }
}
@media (max-width: 350px) {
  .koer-upgrades { padding: 12px; gap: 8px; }
  [data-koer-choices] { gap: 7px; }
  [data-koer-choices] button { padding: 12px 10px 17px 5px; gap: 9px; min-height: 114px; grid-template-columns: minmax(58px,31%) minmax(0,1fr); }
  [data-koer-choices] strong { font-size: 14px; }
  [data-koer-choices] .koer-card-effect { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { [data-spel="koer"] * { animation: none !important; transition: none !important; } }