:root{--color-bg:#14182c;--color-surface:#1f2542;--color-surface-raised:#2a3158;--color-text:#f4f5fb;--color-text-muted:#a6acc8;--color-border:#3a4274;--color-accent:#5b6ee8;--color-accent-text:#fff;--font-family:system-ui, -apple-system, "Segoe UI", sans-serif;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:2rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius:.5rem;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #00000059;--cell-size:3rem}body{padding:var(--space-xl);background:var(--color-bg);font-family:var(--font-family);color:var(--color-text);justify-content:center;display:flex}#app{flex-direction:column;align-items:center;display:flex}.title{margin:0 0 var(--space-md);color:var(--color-text);font-size:var(--font-size-xl);text-align:center}.board{gap:var(--space-sm);background:var(--color-surface);width:fit-content;padding:var(--space-sm);border-radius:var(--radius);box-shadow:var(--shadow-md);margin:0 auto;display:flex;position:relative}.column{gap:var(--space-sm);cursor:pointer;flex-direction:column;display:flex}.cell{width:var(--cell-size);height:var(--cell-size);background:var(--color-bg);border-radius:50%}.board-frame{z-index:6;background:var(--color-surface);border-radius:var(--radius);pointer-events:none;-webkit-mask-image:radial-gradient(circle calc(var(--cell-size) / 2) at center, transparent 0, transparent calc(var(--cell-size) / 2), black calc(var(--cell-size) / 2));-webkit-mask-image:radial-gradient(circle calc(var(--cell-size) / 2) at center, transparent 0, transparent calc(var(--cell-size) / 2), black calc(var(--cell-size) / 2));mask-image:radial-gradient(circle calc(var(--cell-size) / 2) at center, transparent 0, transparent calc(var(--cell-size) / 2), black calc(var(--cell-size) / 2));-webkit-mask-size:calc(var(--cell-size) + var(--space-sm)) calc(var(--cell-size) + var(--space-sm));-webkit-mask-size:calc(var(--cell-size) + var(--space-sm)) calc(var(--cell-size) + var(--space-sm));mask-size:calc(var(--cell-size) + var(--space-sm)) calc(var(--cell-size) + var(--space-sm));-webkit-mask-position:calc(var(--space-sm) / 2) calc(var(--space-sm) / 2);-webkit-mask-position:calc(var(--space-sm) / 2) calc(var(--space-sm) / 2);mask-position:calc(var(--space-sm) / 2) calc(var(--space-sm) / 2);position:absolute;inset:0;-webkit-mask-repeat:repeat;mask-repeat:repeat}.held-piece-area{z-index:5;width:100%;height:calc(var(--cell-size) + var(--space-lg));margin-bottom:var(--space-sm);position:relative}.held-piece{width:var(--cell-size);height:var(--cell-size);background:var(--player1-color,#e53935);border-radius:50%;transition:left .25s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.held-piece.idle{animation:4s ease-in-out infinite held-piece-glide}.held-piece.inactive{transition:none}.held-piece.falling{transition:left .25s,top .45s cubic-bezier(.5,0,1,.5)}@keyframes held-piece-glide{0%,to{transform:translate(calc(-50% - .75rem),-50%)}50%{transform:translate(calc(.75rem - 50%),-50%)}}@media (prefers-reduced-motion:reduce){.held-piece.idle{animation:none}}.cell.red{background:var(--player1-color,#e53935)}.cell.yellow{background:var(--player2-color,#fdd835)}.end-screen{z-index:10;padding:var(--space-md) var(--space-lg);background:color-mix(in srgb, var(--color-surface-raised) 92%, transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--radius);box-shadow:var(--shadow-md);color:var(--color-text);font-size:var(--font-size-lg);text-align:center;white-space:nowrap;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.controls{gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.reset-button,.rematch-button{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base);font-family:var(--font-family);color:var(--color-accent-text);background:var(--color-accent);border-radius:var(--radius);box-shadow:var(--shadow-sm);cursor:pointer;border:none}.rematch-button.hidden{display:none}.color-selector{gap:var(--space-md);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:var(--color-text);align-items:center;display:flex}.color-selector legend{color:var(--color-text-muted);font-size:var(--font-size-sm)}.color-selector:disabled{opacity:.5}.color-option{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);cursor:pointer;display:flex}.color-option:has(input:checked){background:var(--color-surface-raised);border-color:var(--color-accent)}.color-option:focus-within{outline:2px solid var(--color-accent);outline-offset:2px}.color-option input[type=radio]{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.color-selector:disabled .color-option{cursor:not-allowed}.color-swatches{gap:var(--space-xs);display:inline-flex}.color-swatch{border-radius:var(--radius);width:.875rem;height:.875rem}.scoreboard{justify-content:center;gap:var(--space-md);margin-top:var(--space-md);margin-bottom:var(--space-md);padding:var(--space-xs) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);display:flex}.score-entry{align-items:center;gap:var(--space-xs);display:inline-flex}.score-value{font-size:var(--font-size-base);color:var(--color-text)}.footer{margin-top:var(--space-xl);color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center}