.button{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-weight:var(--font-weight-semibold);font-size:var(--font-size-body);color:var(--color-text-primary);border:1px solid #0000;transition:background-color .15s,border-color .15s,opacity .15s;display:inline-flex}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background-color:var(--color-primary);color:#fff}.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--secondary{border-color:var(--color-border);background-color:#0000}.button--secondary:hover:not(:disabled){background-color:var(--color-primary-subtle)}.home{align-items:center;gap:var(--spacing-xxxl);padding:var(--spacing-xxxxl) var(--spacing-xl);flex-direction:column;display:flex}.home__header{align-items:center;gap:var(--spacing-md);text-align:center;flex-direction:column;display:flex}.home__header .material-symbols-rounded{color:var(--color-primary);font-size:3rem}.home__title{font-size:var(--font-size-display);font-weight:var(--font-weight-extrabold);letter-spacing:-.02em}.home__subtitle{color:var(--color-text-secondary);font-size:var(--font-size-subtitle)}.home__modes{gap:var(--spacing-lg);flex-direction:column;width:min(22rem,100%);display:flex}@media (width>=48rem){.home__modes{flex-direction:row;width:auto}}.home__mode{align-items:flex-start;gap:var(--spacing-xs);padding:var(--spacing-xl);text-align:left;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);flex-direction:column;transition:border-color .15s,transform .15s,background-color .15s;display:flex}.home__mode:hover{border-color:var(--color-primary);transform:translateY(-2px)}.home__mode--selected{border-color:var(--color-primary);background-color:var(--color-primary-subtle)}.home__mode .material-symbols-rounded{color:var(--color-primary);font-size:1.75rem}.home__mode-label{font-weight:var(--font-weight-bold)}.home__mode-description{color:var(--color-text-secondary);font-size:var(--font-size-caption)}.home__difficulty{gap:var(--spacing-sm);display:flex}.home__difficulty-option{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);transition:border-color .15s,color .15s,background-color .15s}.home__difficulty-option--active{border-color:var(--color-primary);background-color:var(--color-primary-subtle);color:var(--color-primary);font-weight:var(--font-weight-semibold)}.scoreboard{gap:var(--spacing-sm);padding:var(--spacing-lg) var(--spacing-xxl);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;min-width:min(24rem,100%);display:flex}.scoreboard__badge-row{justify-content:center;display:flex}.scoreboard__badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);background-color:var(--color-primary-subtle);color:var(--color-primary);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em}.scoreboard__names{justify-content:space-between;gap:var(--spacing-lg);display:flex}.scoreboard__name{font-size:var(--font-size-label);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;transition:color .2s}.scoreboard__name--active{color:var(--color-text-primary)}.scoreboard__counts{justify-content:space-between;align-items:center;display:flex}.scoreboard__count{font-size:var(--font-size-display);font-weight:var(--font-weight-extrabold);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;line-height:1;transition:color .2s,text-shadow .2s}.scoreboard__count--active{color:var(--color-primary);text-shadow:0 0 18px #4f8cff73}.scoreboard__vs{font-size:var(--font-size-title);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);text-transform:uppercase}.board{--cell:clamp(2.5rem, calc((100vw - 2rem) / 7), 4.75rem);--frame:calc(var(--cell) * .28);--ball-size:calc(var(--cell) * .84);width:calc(var(--cell) * 7 + var(--frame) * 2);height:calc(var(--cell) * 6 + var(--frame) * 2);padding:var(--frame);background-color:var(--color-board-frame);border-radius:calc(var(--cell) * .35);box-shadow:var(--shadow-lg);position:relative}.board__back{inset:var(--frame);z-index:1;background-color:var(--color-board-hole);position:absolute}.board__balls{inset:var(--frame);z-index:2;grid-template-columns:repeat(7, var(--cell));grid-template-rows:repeat(6, var(--cell));display:grid;position:absolute;overflow:visible}.board__front{inset:var(--frame);z-index:3;background-color:var(--color-board-frame);-webkit-mask-image:radial-gradient(circle closest-side,#0000 0 87%,#000 88%);mask-image:radial-gradient(circle closest-side,#0000 0 87%,#000 88%);-webkit-mask-size:var(--cell) var(--cell);-webkit-mask-size:var(--cell) var(--cell);mask-size:var(--cell) var(--cell);position:absolute}.board__strike{inset:var(--frame);z-index:4;width:calc(var(--cell) * 7);height:calc(var(--cell) * 6);pointer-events:none;position:absolute;overflow:visible}.board__strike line{stroke:var(--color-strike);stroke-width:.18px;stroke-linecap:round;filter:drop-shadow(0 0 6px #ffffff8c)}.board__columns{inset:var(--frame);z-index:4;grid-template-columns:repeat(7,1fr);display:grid;position:absolute}.board__column{cursor:pointer;background:0 0;border:0;padding:0}.board__column:hover:not(:disabled){background-color:#ffffff0a}.board__ball{width:var(--ball-size);height:var(--ball-size);border:10px solid var(--color-ball-border);animation-name:board-ball-drop;animation-duration:calc(.4s + var(--ball-row) * .12s);border-radius:50%;place-self:center;animation-timing-function:cubic-bezier(.5,0,.8,.35);animation-fill-mode:forwards}.board__ball--player1{background-color:var(--color-ball-player-1)}.board__ball--player2{background-color:var(--color-ball-player-2)}.board__ball--winner{box-shadow:0 0 0 3px #ffffffd9,0 0 18px 4px #ffffff80}@keyframes board-ball-drop{0%{transform:translateY(calc(-1 * ( .85 * var(--ball-size) + var(--ball-row) * var(--cell) + (var(--cell) - var(--ball-size)) / 2 )))}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.board__ball{animation-duration:10ms}}.game-over{z-index:100;padding:var(--spacing-xl);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:#0009;place-items:center;display:grid;position:fixed;inset:0}.game-over__card{align-items:center;gap:var(--spacing-xxl);padding:var(--spacing-xxxl);background-color:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;flex-direction:column;display:flex}.game-over__title{font-size:var(--font-size-title);font-weight:var(--font-weight-extrabold)}.game-over__actions{justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.game-screen{align-items:center;gap:var(--spacing-xl);padding:var(--spacing-xxl) var(--spacing-xl);flex-direction:column;display:flex}.game-screen__status{min-height:1.5rem;color:var(--color-text-secondary);font-size:var(--font-size-label)}.game-screen__actions{justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}body{background:radial-gradient(60rem 40rem at 85% -10%, #4f8cff14, transparent 60%), radial-gradient(50rem 35rem at -10% 110%, #8b5cf614, transparent 60%), var(--color-bg);min-height:100vh}#root{flex-direction:column;justify-content:center;min-height:100vh;display:flex}:root{--color-bg:#0a0a0b;--color-surface:#14151a;--color-surface-raised:#1c1d24;--color-text-primary:#f5f5f4;--color-text-secondary:#a1a1aa;--color-border:#ffffff14;--color-primary:#4f8cff;--color-primary-hover:#6ea0ff;--color-primary-active:#3d74d9;--color-primary-subtle:#4f8cff1f;--color-board-frame:#1a1d24;--color-board-hole:#0a0a0b;--color-ball-player-1:#ef4444;--color-ball-player-2:#3b82f6;--color-ball-border:#000;--color-strike:#fff;--ball-border-width:10px;--font-family-base:"Inter", system-ui, -apple-system, sans-serif;--font-size-display:2.5rem;--font-size-title:1.5rem;--font-size-subtitle:1.125rem;--font-size-body:1rem;--font-size-label:.875rem;--font-size-caption:.75rem;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-xxl:2rem;--spacing-xxxl:3rem;--spacing-xxxxl:4rem;--radius-md:.75rem;--radius-lg:1rem;--radius-full:9999px;--shadow-md:0 4px 12px #0006;--shadow-lg:0 12px 32px #00000080;--focus-ring:0 0 0 3px #4f8cff59}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-family-base);font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}h1,h2,h3,h4{line-height:1.2;font-weight:var(--font-weight-bold);margin:0}p{margin:0}button,input,select{font-family:inherit;font-size:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{box-shadow:var(--focus-ring);outline:none}.material-symbols-rounded{font-variation-settings:"FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24}