:root { --ink:#101827; --paper:#f7f5f0; --card:#fffefa; --muted:#758093; --line:#e6e4df; --accent:#ff5f56; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:Outfit,system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
.game-shell { width:min(1120px,calc(100% - 40px)); margin:auto; padding:54px 0 32px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:34px; border-bottom:1px solid var(--line); }
.eyebrow,.label { font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.13em; color:var(--muted); margin:0 0 11px; }
h1 { font-size:clamp(42px,7vw,72px); letter-spacing:-.07em; line-height:.9; margin:0; font-weight:800; }
h1 span { color:var(--accent); }
.subtitle { margin:16px 0 0; font-size:17px; color:#596477; }
.new-game,.play-again { border:0; color:white; background:var(--ink); border-radius:8px; padding:12px 17px; font-weight:600; transition:transform .15s, background .15s; }
.new-game:hover,.play-again:hover { transform:translateY(-2px); background:#263449; }
.header-actions { display:flex; align-items:center; gap:9px; }.rule-button { border:1px solid #cfd4dc; color:#344155; background:transparent; border-radius:8px; padding:11px 13px; font-weight:600; }.rule-button:hover { background:#e9e8e4; }.turn-badge { min-width:70px; padding:7px 10px; border-radius:8px; background:#e7efff; text-align:center; }.turn-badge .label { display:block; margin:0 0 2px; font-size:9px; color:#58657a; }.turn-badge strong { font:700 14px/1 Outfit,sans-serif; }.turn-badge i { font-style:normal; color:#667389; font-weight:500; }
.game-layout { display:grid; grid-template-columns:260px 1fr; gap:42px; padding:34px 0; }
.info-panel { display:flex; flex-direction:column; gap:28px; }
.stat { background:#e7efff; border-radius:12px; padding:18px; }
.stat .label { display:block; margin-bottom:6px; color:#58657a; }
.stat strong { font:700 31px/1 Outfit,sans-serif; letter-spacing:-.04em; }.stat i { font-style:normal; font-size:15px; color:#667389; font-weight:500; }
.rule-card { border-left:2px solid var(--accent); padding:2px 0 2px 16px; }.rule-card h2 { margin:0 0 8px; font-size:16px; }.rule-card p { color:#637084; margin:0; line-height:1.45; font-size:14px; }.legend { padding:0; margin:14px 0 0; list-style:none; font-size:13px; color:#4d596c; display:grid; gap:8px; }.feedback-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:7px; }.exact { background:#283346; }.partial { background:#d7d8d5; border:1px solid #bdbfbd; }
.palette { display:flex; flex-wrap:wrap; gap:10px; }.color-button,.peg { border-radius:50%; background:var(--color); }.color-button { width:34px; height:34px; border:3px solid transparent; box-shadow:inset 0 0 0 1px #00000018; transition:transform .15s,outline .15s; }.color-button:hover { transform:scale(1.1); }.color-button.selected { outline:2px solid var(--ink); outline-offset:3px; }
.board-panel { background:var(--card); border:1px solid var(--line); box-shadow:0 14px 34px #18223a0a; border-radius:14px; overflow:hidden; }.code-header { height:59px; background:#1a2537; padding:0 26px; display:flex; align-items:center; justify-content:space-between; color:#cbd4df; font:500 10px "DM Mono",monospace; letter-spacing:.14em; }.secret-code { display:flex; gap:7px; }.secret-code .peg { width:17px; height:17px; border:2px solid #ffffff45; }.secret-code .hidden { background:#657083; }
.board { padding:10px 22px; }.row { min-height:52px; display:grid; grid-template-columns:34px 1fr 56px; align-items:center; gap:15px; border-bottom:1px solid #eeece7; }.row:last-child { border-bottom:0; }.row-number { font:500 11px "DM Mono",monospace; color:#98a0aa; }.guess { display:flex; gap:12px; }.peg-slot { width:30px; height:30px; border-radius:50%; border:2px solid #d9d9d4; background:#faf9f5; padding:0; transition:transform .15s,border-color .15s; }.peg-slot.active { cursor:pointer; }.peg-slot.active:hover { transform:scale(1.08); border-color:#a1a9b4; }.peg-slot.filled { border-color:transparent; background:var(--color); box-shadow:inset 0 -2px #00000020; }.feedback { width:43px; height:33px; padding:4px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; align-content:center; }.feedback .feedback-dot { width:10px; height:10px; margin:0; }.feedback .empty { background:#ecebe7; }.check { background:#e7efff; color:#183c78; border:0; font-size:12px; border-radius:5px; padding:7px; font-weight:700; }.check:disabled { visibility:hidden; }.statusbar { text-align:center; min-height:26px; color:#637084; font-size:14px; }.result-dialog { border:0; border-radius:16px; padding:36px; text-align:center; width:min(390px,calc(100% - 36px)); box-shadow:0 25px 80px #11182745; color:var(--ink); }.result-dialog::backdrop { background:#10182780; backdrop-filter:blur(3px); }.dialog-symbol { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; margin:0 auto 17px; background:#fff2d0; color:#d78500; font-size:26px; }.result-dialog h2 { margin:0; font-size:34px; letter-spacing:-.05em; }.result-dialog p:not(.eyebrow) { color:#647084; margin:10px 0 25px; }.play-again { width:100%; background:var(--accent); }.play-again:hover { background:#e64c45; }
@media (max-width:720px) { .game-shell { width:min(100% - 28px,600px); padding-top:28px; }.hero { align-items:flex-start; flex-direction:column; padding-bottom:25px; }.game-layout { grid-template-columns:1fr; gap:25px; }.info-panel { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.palette-wrap { grid-column:1/-1; }.board { padding:8px 13px; }.row { gap:10px; grid-template-columns:27px 1fr 50px; }.guess { gap:8px; }.peg-slot { width:29px; height:29px; } }

/* Feedback gebruikt de klassieke Mastermind-kleuren. */
.exact { background:#e54747; }
.partial { background:#f4c430; border-color:#d7a900; }

.setup-dialog { border:0; border-radius:16px; padding:36px; text-align:center; width:min(410px,calc(100% - 36px)); box-shadow:0 25px 80px #11182745; color:var(--ink); }
.setup-dialog::backdrop { background:#10182780; backdrop-filter:blur(3px); }
.setup-dialog h2 { margin:0; font-size:30px; letter-spacing:-.05em; }
.setup-intro { color:#647084; margin:10px 0 20px; }
.rule-options { display:grid; gap:10px; margin-bottom:22px; text-align:left; }
.rule-option { border:1px solid var(--line); border-radius:10px; padding:13px 14px 13px 42px; position:relative; cursor:pointer; transition:border-color .15s,background .15s; }
.rule-option:has(input:checked) { border-color:var(--accent); background:#fff3f1; }
.rule-option input { position:absolute; left:14px; top:17px; accent-color:var(--accent); }
.option-title,.option-text { display:block; }.option-title { font-weight:700; font-size:14px; }.option-text { color:#687489; font-size:12px; margin-top:3px; line-height:1.3; }
.rules-dialog { border:0; border-radius:16px; padding:34px; width:min(410px,calc(100% - 36px)); box-shadow:0 25px 80px #11182745; color:var(--ink); }.rules-dialog::backdrop { background:#10182780; backdrop-filter:blur(3px); }.rules-dialog h2 { margin:0 0 12px; font-size:30px; letter-spacing:-.05em; }.rules-dialog p:not(.eyebrow) { color:#566277; line-height:1.5; margin:0 0 15px; }.rules-dialog .legend { margin:18px 0 25px; }.rules-mode { padding:11px 13px; background:#fff3f1; border-radius:8px; border-left:3px solid var(--accent); font-weight:600; }

@media (max-width:720px) {
  .header-actions { width:100%; justify-content:space-between; }.new-game,.rule-button { padding:10px 12px; font-size:14px; }
  .game-shell { padding-bottom:112px; }
  .palette-wrap { position:fixed; z-index:10; left:12px; right:12px; bottom:12px; padding:11px 14px; border-radius:13px; background:#172235; box-shadow:0 10px 28px #1018274d; }
  .palette-wrap .label { color:#c5d0df; margin-bottom:8px; }
  .palette { justify-content:space-between; flex-wrap:nowrap; gap:8px; }
  .color-button { width:39px; height:39px; }
}