:root{color:#f7fbf5;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#101613;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{-webkit-user-select:none;user-select:none;margin:0}button{font:inherit}.app-shell{--viewport-gap:.625rem;min-height:100svh;padding:var(--viewport-gap);background:radial-gradient(circle at 0 0,#74af8647,#0000 34rem),linear-gradient(145deg,#101613 0%,#142821 42%,#0d1110 100%);align-items:flex-start;display:flex}.game-panel{--minimum-fit-size:14.75rem;--viewport-fit-size:calc(100svh - 15.25rem);--panel-size:min(36rem, 100%, max(var(--minimum-fit-size), var(--viewport-fit-size)));max-width:var(--panel-size);width:var(--panel-size);margin:0 auto;container-type:inline-size}.topbar{grid-template-columns:3rem minmax(0,1fr) 3rem;align-items:center;gap:1rem;margin-bottom:1rem;display:grid}.topbar>div{text-align:center;min-width:0}.eyebrow{color:#9dd2ad;letter-spacing:0;text-transform:uppercase;margin:0 0 .18rem;font-size:.8rem;font-weight:800}h1{text-wrap:nowrap;margin:0;font-size:clamp(1.95rem,10cqw,min(3.4rem,8svh));line-height:.95}.icon-button,.primary-action,.cell{cursor:pointer;border:0}.icon-button{aspect-ratio:1;color:#f7fbf5;background:#ffffff1a;border:1px solid #ffffff29;border-radius:999px;flex:0 0 3rem;justify-content:center;align-items:center;text-decoration:none;transition:background .16s,transform .16s;display:inline-flex}.icon-button:hover,.icon-button:focus-visible{background:#ffffff2e;transform:translateY(-1px)}.score-row{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:.55rem;margin-bottom:.6rem;display:grid}.score-card,.status-chip{background:#ffffff1a;border:1px solid #ffffff24;align-items:center;min-height:3.25rem;display:flex}.score-card{border-radius:.5rem;justify-content:space-between;padding:.65rem .8rem}.score-card span{color:#f7fbf5b8;font-weight:800}.score-card strong{font-size:1.35rem}.status-chip{color:#dbeee0;border-radius:999px;justify-content:center;gap:.35rem;padding:0 .5rem;font-size:clamp(.78rem,4.8cqw,1rem)}.active-red{box-shadow:inset 0 -.2rem #e73532}.active-yellow{box-shadow:inset 0 -.2rem #ffd43b}.board{--board-padding:clamp(.12rem, .75cqw, .25rem);--cell-gap:0rem;gap:var(--cell-gap);grid-template-columns:repeat(var(--board-columns), minmax(0, 1fr));isolation:isolate;min-width:0;padding:var(--board-padding);background:#102f4c;border:clamp(.35rem,2cqw,.7rem) solid #123250;border-radius:.55rem;width:100%;margin-bottom:.6rem;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff29,0 1.2rem 2.6rem #0000003d}.cell{--hover-ring:#f7fbf585;aspect-ratio:1;z-index:1;background:radial-gradient(circle at 50% 52%,#0c2940 0 44%,#133a5c 45% 58%,#1b5688 59% 100%);border-radius:.28rem;outline:0;justify-content:center;align-items:center;min-width:0;padding:0;transition:background .16s;display:flex;position:relative;overflow:visible;box-shadow:inset 0 -.12rem .2rem #0000003d}.cell-playable-red{--hover-ring:#e73532ad}.cell-playable-yellow{--hover-ring:#ffd43bb8}.board-face{gap:var(--cell-gap);grid-template-columns:repeat(var(--board-columns), minmax(0, 1fr));grid-template-rows:repeat(var(--board-rows), minmax(0, 1fr));inset:var(--board-padding);pointer-events:none;z-index:3;display:grid;position:absolute}.face-cell{box-shadow:none;background:radial-gradient(circle,#0000 0 54%,#2a77ad 55% 100%);border-radius:0;display:block}.cell:focus-visible{z-index:4;box-shadow:inset 0 0 0 .13rem #ffd43bc7}.cell:hover,.cell:focus-visible{background:radial-gradient(circle at 50% 52%, #0c2940 0 42%, var(--hover-ring) 43% 48%, #17456c 49% 58%, #21699f 59% 100%)}.cell:disabled{cursor:default}.cell:disabled:hover,.cell:disabled:focus-visible{background:radial-gradient(circle at 50% 52%,#0c2940 0 44%,#133a5c 45% 58%,#1b5688 59% 100%)}.disc{aspect-ratio:1;z-index:2;border-radius:999px;width:calc(78% + 2px);display:block;position:relative;top:0}.disc-red{background:radial-gradient(circle,#0000 0 56%,#6f081257 57% 64%,#0000 65%),linear-gradient(#ffffff2e,#0000 22%),linear-gradient(145deg,#f24c44,#d82731 58%,#ae1824);box-shadow:inset 0 0 0 .12rem #ffffff29,inset 0 -.18rem #57000952,inset 0 .12rem #ffffff38,0 .1rem .16rem #00000057}.disc-yellow{background:radial-gradient(circle,#0000 0 56%,#99660057 57% 64%,#0000 65%),linear-gradient(#ffffff3d,#0000 22%),linear-gradient(145deg,#ffe45d,#ffc928 58%,#d59a0b);box-shadow:inset 0 0 0 .12rem #ffffff38,inset 0 -.18rem #714c004d,inset 0 .12rem #ffffff4d,0 .1rem .16rem #00000057}.cell-drop .disc{animation:disc-drop var(--drop-duration) cubic-bezier(.42, 0, 1, .74) both}.disc-win{animation:disc-win-blink 1.65s ease-in-out var(--win-delay) infinite}.cell-drop .disc-win{animation:disc-drop var(--drop-duration) cubic-bezier(.42, 0, 1, .74) both, disc-win-blink 1.65s ease-in-out var(--win-delay) infinite}@keyframes disc-drop{0%{top:var(--drop-distance)}to{top:0}}@keyframes disc-win-blink{0%,to{filter:brightness()saturate();transform:scale(1)}50%{filter:brightness(1.45)saturate(1.24);transform:scale(1.05)}}.primary-action{color:#15221e;background:#f7fbf5;border-radius:.5rem;width:100%;min-height:3rem;padding:0 1rem;font-weight:900;transition:background .16s,transform .16s}.primary-action:hover,.primary-action:focus-visible{background:#dff2e4;transform:translateY(-1px)}.size-control{background:#ffffff1a;border:1px solid #ffffff24;border-radius:.5rem;margin-top:.65rem;padding:.75rem .85rem .65rem;display:block}.size-label{color:#f7fbf5c7;justify-content:space-between;align-items:center;margin-bottom:.55rem;font-weight:800;display:flex}.size-label strong{color:#f7fbf5;font-size:1.05rem}.size-slider{--slider-track:linear-gradient(90deg, #e73532 0%, #f7fbf5 50%, #ffd43b 100%);appearance:none;cursor:pointer;background:0 0;width:100%;height:1.35rem;margin:0;display:block}.size-slider::-webkit-slider-runnable-track{background:var(--slider-track);border-radius:999px;height:.5rem;box-shadow:inset 0 0 0 1px #15221e3d}.size-slider::-moz-range-track{background:var(--slider-track);border-radius:999px;height:.5rem;box-shadow:inset 0 0 0 1px #15221e3d}.size-slider::-webkit-slider-thumb{appearance:none;background:#f7fbf5;border:.22rem solid #173c5e;border-radius:999px;width:1.35rem;height:1.35rem;margin-top:-.43rem;box-shadow:0 .18rem .4rem #00000052,0 0 0 .2rem #f7fbf533}.size-slider::-moz-range-thumb{background:#f7fbf5;border:.22rem solid #173c5e;border-radius:999px;width:.95rem;height:.95rem;box-shadow:0 .18rem .4rem #00000052,0 0 0 .2rem #f7fbf533}.size-slider:focus-visible{outline:0}.size-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 .18rem .4rem #00000052,0 0 0 .22rem #ffd43b}.size-slider:focus-visible::-moz-range-thumb{box-shadow:0 .18rem .4rem #00000052,0 0 0 .22rem #ffd43b}.size-scale{color:#f7fbf594;justify-content:space-between;margin-top:.35rem;font-size:.76rem;font-weight:900;display:flex}.mode-control{background:#ffffff1a;border:1px solid #ffffff24;border-radius:.5rem;flex-direction:column;align-items:stretch;gap:.55rem;margin-top:.65rem;padding:.72rem .85rem;display:flex}.mode-row{--mode-active-color:#ffd43b;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.mode-row-red{--mode-active-color:#e73532}.mode-row-yellow{--mode-active-color:#ffd43b}.mode-disc{aspect-ratio:1;flex:0 0 2.15rem;width:2.15rem}.mode-toggle{background:#08100d5c;border:1px solid #ffffff1f;border-radius:999px;flex:auto;grid-template-columns:repeat(3,minmax(3.65rem,1fr));gap:.2rem;min-width:0;padding:.2rem;display:grid}.mode-option{color:#f7fbf5ad;cursor:pointer;background:0 0;border:0;border-radius:999px;min-height:2rem;padding:0 .75rem;font-weight:900;transition:background .16s,color .16s,transform .16s}.mode-option:hover,.mode-option:focus-visible{color:#f7fbf5;transform:translateY(-1px)}.mode-option-active,.mode-option-active:hover,.mode-option-active:focus-visible{background:var(--mode-active-color);color:#172018}