* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   Theme variables — classic (default)
   ============================================ */
:root {
    /* Page */
    --page-bg: #1a1a2e;
    --page-text: #e0d6c8;
    --accent: #c4a87a;
    --accent-glow: rgba(196, 168, 122, 0.4);

    /* Board */
    --board-bg: #5c3a1e;
    --board-rim: #3d2510;
    --board-light: #7a5230;
    --slot-bg: #2a1a0a;
    --slot-rim: #1a0f05;
    --feedback-bg: #3d2510;
    --feedback-slot-light: #1f1208;
    --feedback-slot-dark: #140c04;

    /* Row */
    --row-bg: rgba(0,0,0,0.12);
    --row-active-bg: rgba(255,255,255,0.06);
    --row-active-border: rgba(196, 168, 122, 0.3);
    --row-number-color: rgba(196, 168, 122, 0.4);

    /* Sizing */
    --peg-size: clamp(40px, 10vw, 56px);
    --feedback-peg-size: clamp(17px, 3vw, 16px);
    --row-gap: clamp(5px, 1.2vw, 10px);

    /* Peg colors */
    --peg-red-light: #ff6b6b;    --peg-red-dark: #c0392b;    --peg-red-glow: rgba(192,57,43,0.5);
    --peg-blue-light: #74b9ff;   --peg-blue-dark: #2980b9;   --peg-blue-glow: rgba(41,128,185,0.5);
    --peg-yellow-light: #ffeaa7; --peg-yellow-dark: #f1c40f; --peg-yellow-glow: rgba(241,196,15,0.5);
    --peg-green-light: #55efc4;  --peg-green-dark: #27ae60;  --peg-green-glow: rgba(39,174,96,0.5);
    --peg-orange-light: #fab1a0; --peg-orange-dark: #e17055; --peg-orange-glow: rgba(225,112,85,0.5);
    --peg-purple-light: #a29bfe; --peg-purple-dark: #6c5ce7; --peg-purple-glow: rgba(108,92,231,0.5);

    /* Buttons */
    --btn-confirm-from: #c4a87a;
    --btn-confirm-to: #a0845c;
    --btn-confirm-text: #1a1a2e;
    --btn-clear-bg: rgba(255,255,255,0.08);
    --btn-clear-text: #c4a87a;

    /* Toggle */
    --toggle-track: rgba(255,255,255,0.12);
    --toggle-track-active: #c4a87a;
    --toggle-label: rgba(196, 168, 122, 0.6);
}

/* ============================================
   Theme variables — slechtziend (accessible)
   Hogere contrasten, meer verzadigde kleuren,
   lichtere achtergrond, grotere elementen
   ============================================ */
[data-theme="accessible"] {
    /* Page — veel lichter */
    --page-bg: #e8e0d4;
    --page-text: #2c2416;
    --accent: #5a3e1b;
    --accent-glow: rgba(90, 62, 27, 0.35);

    /* Board — warm licht hout */
    --board-bg: #b8956a;
    --board-rim: #8c6d47;
    --board-light: #d4b48f;
    --slot-bg: #5a422a;
    --slot-rim: #3d2c1a;
    --feedback-bg: #8c6d47;
    --feedback-slot-light: #5a422a;
    --feedback-slot-dark: #3d2c1a;

    /* Row */
    --row-bg: rgba(0,0,0,0.08);
    --row-active-bg: rgba(255,255,255,0.25);
    --row-active-border: rgba(90, 62, 27, 0.5);
    --row-number-color: rgba(60, 40, 15, 0.6);

    /* Sizing — iets groter */
    --peg-size: clamp(40px, 10vw, 56px);
    --feedback-peg-size: clamp(17px, 3vw, 16px);
    --row-gap: clamp(5px, 1.2vw, 10px);

    /* Peg colors — maximaal onderscheidbaar:
       fel rood, diepblauw, heldergeel, felgroen, hotpink, wit */
    --peg-red-light: #ff3333;
    --peg-red-dark: #cc0000;
    --peg-red-glow: rgba(204,0,0,0.6);
    --peg-blue-light: #3377ff;
    --peg-blue-dark: #0044cc;
    --peg-blue-glow: rgba(0,68,204,0.6);
    --peg-yellow-light: #ffdd00;
    --peg-yellow-dark: #ccaa00;
    --peg-yellow-glow: rgba(204,170,0,0.6);
    --peg-green-light: #22cc44;
    --peg-green-dark: #118833;
    --peg-green-glow: rgba(17,136,51,0.6);
    --peg-orange-light: #ff55cc;
    --peg-orange-dark: #cc2299;
    --peg-orange-glow: rgba(204,34,153,0.6);
    --peg-purple-light: #f0f0f0;
    --peg-purple-dark: #cccccc;
    --peg-purple-glow: rgba(180,180,180,0.5);

    /* Buttons */
    --btn-confirm-from: #5a3e1b;
    --btn-confirm-to: #3d2a12;
    --btn-confirm-text: #f5efe6;
    --btn-clear-bg: rgba(0,0,0,0.1);
    --btn-clear-text: #5a3e1b;

    /* Toggle */
    --toggle-track: rgba(0,0,0,0.15);
    --toggle-track-active: #5a3e1b;
    --toggle-label: rgba(60, 40, 15, 0.7);
}

/* ============================================
   Layout
   ============================================ */
body {
    background: var(--page-bg);
    color: var(--page-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    user-select: none;
    transition: background 0.4s;
}

/* ============================================
   Top bar
   ============================================ */
.top-bar {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 4px;
    position: relative;
}

.top-bar h1 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.gear-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--accent);
    opacity: 0.5;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: opacity 0.2s, transform 0.3s;
}

.gear-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.gear-btn:hover,
.gear-btn.active {
    opacity: 1;
}

.gear-btn.active svg {
    transform: rotate(90deg);
}

.gear-btn svg {
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   Settings panel
   ============================================ */
.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(280px, 80vw);
    height: auto;
    max-height: 80dvh;
    background: var(--board-bg);
    border-radius: 0 0 0 16px;
    box-shadow: -4px 4px 24px rgba(0,0,0,0.4);
    z-index: 100;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s;
    overflow-y: auto;
}

.settings-panel.open {
    transform: translateX(0);
    opacity: 1;
}

.settings-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.setting-label {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    color: var(--page-text);
    font-weight: 500;
}

/* Backdrop */
.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.settings-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   Toggle switch (reusable)
   ============================================ */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--toggle-track);
    border-radius: 12px;
    transition: background 0.3s;
}

.toggle-switch input:checked + .toggle-track {
    background: var(--toggle-track-active);
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch input:checked ~ .toggle-thumb {
    transform: translateX(20px);
}

/* ============================================
   Board
   ============================================ */
.perspective-wrapper {
    perspective: 900px;
    perspective-origin: 50% 30%;
    width: 100%;
    max-width: 400px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 12px;
}

.board {
    transform: rotateX(18deg);
    transform-origin: bottom center;
    width: 100%;
    background: linear-gradient(
        180deg,
        var(--board-light) 0%,
        var(--board-bg) 40%,
        var(--board-rim) 100%
    );
    border-radius: 16px 16px 8px 8px;
    padding: clamp(8px, 2vw, 14px);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.5),
        0 2px 0 var(--board-rim),
        inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    transition: background 0.4s;
}

/* ============================================
   Rows
   ============================================ */
.row {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 8px);
    padding: clamp(3px, 0.8vw, 6px) clamp(4px, 1vw, 8px);
    border-radius: 8px;
    background: var(--row-bg);
    transition: background 0.3s, box-shadow 0.3s;
    position: relative;
}

.row.active {
    background: var(--row-active-bg);
    box-shadow: inset 0 0 0 1.5px var(--row-active-border);
}

.row-number {
    font-size: clamp(0.6rem, 1.8vw, 0.75rem);
    color: var(--row-number-color);
    width: 1.2em;
    text-align: center;
    font-weight: 600;
}

.slots {
    display: flex;
    gap: clamp(5px, 1.5vw, 10px);
    flex: 1;
    justify-content: center;
}

.slot {
    width: var(--peg-size);
    height: var(--peg-size);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--slot-bg), var(--slot-rim));
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.6),
        0 1px 0 rgba(255,255,255,0.05);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, width 0.3s, height 0.3s;
}

.row.active .slot:active {
    transform: scale(0.92);
}

.slot .peg {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    transform: scale(0) translateY(-20px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s;
}

.slot .peg.placed {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.slot .peg.removing {
    transform: scale(0) translateY(10px);
    opacity: 0;
    transition: transform 0.25s ease-in, opacity 0.2s;
}

/* ============================================
   Feedback pegs
   ============================================ */
.feedback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    width: calc(var(--feedback-peg-size) * 2 + 7px);
    height: calc(var(--feedback-peg-size) * 2 + 7px);
    padding: 2px;
    background: var(--feedback-bg);
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    flex-shrink: 0;
    transition: width 0.3s, height 0.3s;
}

.feedback-slot {
    width: var(--feedback-peg-size);
    height: var(--feedback-peg-size);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--feedback-slot-light), var(--feedback-slot-dark));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, width 0.3s, height 0.3s;
}

.feedback-slot:active {
    transform: scale(0.85);
}

.feedback-slot .feedback-peg {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.15s;
}

.feedback-slot .feedback-peg.placed {
    transform: scale(1);
    opacity: 1;
}

/* ============================================
   Peg colors (using theme variables)
   ============================================ */
.peg-red    { background: radial-gradient(circle at 35% 30%, var(--peg-red-light),    var(--peg-red-dark));    box-shadow: 0 2px 6px var(--peg-red-glow); }
.peg-blue   { background: radial-gradient(circle at 35% 30%, var(--peg-blue-light),   var(--peg-blue-dark));   box-shadow: 0 2px 6px var(--peg-blue-glow); }
.peg-yellow { background: radial-gradient(circle at 35% 30%, var(--peg-yellow-light), var(--peg-yellow-dark)); box-shadow: 0 2px 6px var(--peg-yellow-glow); }
.peg-green  { background: radial-gradient(circle at 35% 30%, var(--peg-green-light),  var(--peg-green-dark));  box-shadow: 0 2px 6px var(--peg-green-glow); }
.peg-orange { background: radial-gradient(circle at 35% 30%, var(--peg-orange-light), var(--peg-orange-dark)); box-shadow: 0 2px 6px var(--peg-orange-glow); }
.peg-purple { background: radial-gradient(circle at 35% 30%, var(--peg-purple-light), var(--peg-purple-dark)); box-shadow: 0 2px 6px var(--peg-purple-glow); }

/* Feedback peg colors */
.fb-black { background: radial-gradient(circle at 35% 30%, #555, #1a1a1a); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.fb-white { background: radial-gradient(circle at 35% 30%, #fff, #ccc); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* In accessible theme, add border ring to feedback for extra contrast */
[data-theme="accessible"] .fb-black { border: 1.5px solid #000; }
[data-theme="accessible"] .fb-white { border: 1.5px solid #999; }

/* In accessible theme, pegs get a subtle dark outline for extra distinction */
[data-theme="accessible"] .slot .peg.placed {
    box-shadow: 0 2px 6px var(--peg-red-glow), inset 0 0 0 1.5px rgba(0,0,0,0.25);
}

/* ============================================
   Color picker
   ============================================ */
.picker-area {
    width: 100%;
    max-width: 400px;
    padding: 10px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.picker-label {
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    color: var(--toggle-label);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.color-picker {
    display: flex;
    gap: clamp(8px, 2.5vw, 14px);
    justify-content: center;
    flex-wrap: wrap;
}

.color-option {
    width: clamp(40px, 10vw, 54px);
    height: clamp(40px, 10vw, 54px);
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s,
                box-shadow 0.2s;
    position: relative;
}

.color-option:active {
    transform: scale(0.9);
}

.color-option.selected {
    border-color: var(--accent);
    transform: scale(1.12);
    box-shadow: 0 0 16px var(--accent-glow);
}

.color-option .color-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* In accessible theme, color options get a dark outline */
[data-theme="accessible"] .color-option .color-inner {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
}

/* ============================================
   Action buttons
   ============================================ */
.actions {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    padding: 0 16px 20px;
}

.btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.2s, background 0.2s;
}

.btn:active {
    transform: scale(0.96);
}

.btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.btn-confirm {
    background: linear-gradient(135deg, var(--btn-confirm-from), var(--btn-confirm-to));
    color: var(--btn-confirm-text);
}

.btn-clear {
    background: var(--btn-clear-bg);
    color: var(--btn-clear-text);
    flex: 0.5;
}

/* ============================================
   Animations
   ============================================ */
.row {
    opacity: 0;
    transform: translateY(10px);
    animation: rowIn 0.4s forwards;
}

@keyframes rowIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.row:nth-child(1)  { animation-delay: 0.05s; }
.row:nth-child(2)  { animation-delay: 0.1s; }
.row:nth-child(3)  { animation-delay: 0.15s; }
.row:nth-child(4)  { animation-delay: 0.2s; }
.row:nth-child(5)  { animation-delay: 0.25s; }
.row:nth-child(6)  { animation-delay: 0.3s; }
.row:nth-child(7)  { animation-delay: 0.35s; }
.row:nth-child(8)  { animation-delay: 0.4s; }
.row:nth-child(9)  { animation-delay: 0.45s; }
.row:nth-child(10) { animation-delay: 0.5s; }

.row.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    border-radius: 2px;
    background: var(--accent);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ============================================
   Safe area
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .actions {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}