:root{color:#f7fbf5;background:#101613;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;-webkit-user-select:none;user-select:none}button{font:inherit}.app-shell{--viewport-gap: .625rem;align-items:flex-start;background:radial-gradient(circle at top left,rgba(116,175,134,.28),transparent 34rem),linear-gradient(145deg,#101613,#142821 42%,#0d1110);display:flex;min-height:100svh;padding:var(--viewport-gap)}.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)));container-type:inline-size;margin:0 auto;max-width:var(--panel-size);width:var(--panel-size)}.topbar{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;gap:1rem}.eyebrow{color:#9dd2ad;font-size:.8rem;font-weight:800;letter-spacing:0;margin:0 0 .18rem;text-transform:uppercase}h1{font-size:clamp(1.95rem,10cqw,min(3.4rem,8svh));line-height:.95;margin:0;text-wrap:nowrap}.icon-button,.primary-action,.cell{border:0;cursor:pointer}.icon-button{align-items:center;aspect-ratio:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#f7fbf5;display:inline-flex;flex:0 0 3rem;justify-content:center;transition:background .16s ease,transform .16s ease}.icon-button:hover,.icon-button:focus-visible{background:#ffffff2e;transform:translateY(-1px)}.score-row{align-items:stretch;display:grid;gap:.55rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:.6rem}.score-card,.status-chip{align-items:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.14);display:flex;min-height:3.25rem}.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{border-radius:999px;color:#dbeee0;font-size:clamp(.78rem,4.8cqw,1rem);gap:.35rem;justify-content:center;padding:0 .5rem}.active-red{box-shadow:inset 0 -.2rem #e73532}.active-yellow{box-shadow:inset 0 -.2rem #ffd43b}.board{--cell-gap: clamp(.12rem, .75cqw, .25rem);aspect-ratio:1;background:#102f4c;border:clamp(.35rem,2cqw,.7rem) solid #123250;border-radius:.55rem;box-shadow:inset 0 0 0 1px #ffffff29,0 1.2rem 2.6rem #0000003d;display:grid;gap:var(--cell-gap);grid-template-columns:repeat(var(--board-size),minmax(0,1fr));isolation:isolate;margin-bottom:.6rem;min-width:0;overflow:hidden;padding:var(--cell-gap);position:relative;width:100%}.cell{align-items:center;aspect-ratio:1;background:radial-gradient(circle at 50% 52%,#0c2940 0 44%,#133a5c 45% 58%,#1b5688 59% 100%);border-radius:.28rem;box-shadow:inset 0 -.12rem .2rem #0000003d;display:flex;justify-content:center;min-width:0;outline:0;overflow:visible;padding:0;position:relative;transition:background .16s ease,transform .16s ease;z-index:1}.board-face{display:grid;gap:var(--cell-gap);grid-template-columns:repeat(var(--board-size),minmax(0,1fr));grid-template-rows:repeat(var(--board-size),minmax(0,1fr));inset:var(--cell-gap);pointer-events:none;position:absolute;z-index:3}.face-cell{background:radial-gradient(circle at 50% 50%,transparent 0 36%,rgba(8,29,47,.88) 37% 42%,transparent 43%),radial-gradient(circle at 50% 50%,transparent 0 54%,#2a77ad 55% 100%);border-radius:.28rem;box-shadow:inset 0 .14rem #ffffff38,inset 0 -.16rem #0003;display:block}.face-win{background:radial-gradient(circle at 50% 50%,transparent 0 36%,rgba(21,71,40,.66) 37% 42%,transparent 43%),radial-gradient(circle at 50% 50%,transparent 0 54%,#a7f0bc 55% 100%);box-shadow:inset 0 0 0 .13rem #f7fbf5c2,inset 0 .14rem #ffffff57,inset 0 -.16rem #0000002e,0 0 .45rem #a7f0bc8c}.cell:focus-visible{box-shadow:0 0 0 .12rem #ffd43b,inset 0 -.12rem .2rem #0000003d;z-index:4}.cell:hover,.cell:focus-visible{background:radial-gradient(circle at 50% 52%,#0c2940 0 44%,#17456c 45% 58%,#21699f 59% 100%);transform:translateY(-2px)}.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%);transform:none}.disc{aspect-ratio:1;border-radius:999px;display:block;position:relative;top:0;width:78%;z-index:2}.disc-red{background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.56),transparent .38rem),linear-gradient(145deg,#ff6c5d,#d91f2b 64%,#8f101a);box-shadow:inset 0 .18rem .32rem #ffffff3d,inset 0 -.2rem .28rem #50000061,0 .12rem .22rem #00000052}.disc-yellow{background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.72),transparent .38rem),linear-gradient(145deg,#fff176,#ffc927 62%,#c68605);box-shadow:inset 0 .18rem .32rem #ffffff4d,inset 0 -.2rem .28rem #6344005c,0 .12rem .22rem #00000052}.cell-drop .disc{animation:disc-drop var(--drop-duration) linear both}.cell-win,.cell-win:hover,.cell-win:focus-visible{background:radial-gradient(circle at 50% 52%,#0c2940b8 0 44%,#61c77d 45% 58%,#a7f0bc 59% 100%)}@keyframes disc-drop{0%{top:var(--drop-distance)}to{top:0}}.primary-action{background:#f7fbf5;border-radius:.5rem;color:#15221e;font-weight:900;min-height:3rem;padding:0 1rem;transition:background .16s ease,transform .16s ease;width:100%}.primary-action:hover,.primary-action:focus-visible{background:#dff2e4;transform:translateY(-1px)}.size-control{background:#ffffff1a;border:1px solid rgba(255,255,255,.14);border-radius:.5rem;display:block;margin-top:.65rem;padding:.75rem .85rem .65rem}.size-label{align-items:center;color:#f7fbf5c7;display:flex;font-weight:800;justify-content:space-between;margin-bottom:.55rem}.size-label strong{color:#f7fbf5;font-size:1.05rem}.size-slider{--slider-track: linear-gradient(90deg, #e73532 0%, #f7fbf5 50%, #ffd43b 100%);appearance:none;background:transparent;cursor:pointer;display:block;height:1.35rem;margin:0;width:100%}.size-slider::-webkit-slider-runnable-track{background:var(--slider-track);border-radius:999px;box-shadow:inset 0 0 0 1px #15221e3d;height:.5rem}.size-slider::-moz-range-track{background:var(--slider-track);border-radius:999px;box-shadow:inset 0 0 0 1px #15221e3d;height:.5rem}.size-slider::-webkit-slider-thumb{appearance:none;background:#f7fbf5;border:.22rem solid #173c5e;border-radius:999px;box-shadow:0 .18rem .4rem #00000052,0 0 0 .2rem #f7fbf533;height:1.35rem;margin-top:-.43rem;width:1.35rem}.size-slider::-moz-range-thumb{background:#f7fbf5;border:.22rem solid #173c5e;border-radius:999px;box-shadow:0 .18rem .4rem #00000052,0 0 0 .2rem #f7fbf533;height:.95rem;width:.95rem}.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;display:flex;font-size:.76rem;font-weight:900;justify-content:space-between;margin-top:.35rem}.mode-control{align-items:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.14);border-radius:.5rem;display:flex;gap:.75rem;justify-content:space-between;margin-top:.65rem;padding:.72rem .85rem}.mode-disc{align-items:center;aspect-ratio:1;background:radial-gradient(circle at 50% 50%,transparent 0 36%,rgba(8,29,47,.88) 37% 42%,transparent 43%),radial-gradient(circle at 50% 50%,transparent 0 54%,#2a77ad 55% 100%);border-radius:999px;box-shadow:inset 0 .14rem #ffffff38,inset 0 -.16rem #0003;display:flex;flex:0 0 2.15rem;justify-content:center;width:2.15rem}.mode-disc-piece{aspect-ratio:1;border-radius:999px;display:block;width:78%}.mode-toggle{background:#08100d5c;border:1px solid rgba(255,255,255,.12);border-radius:999px;display:grid;flex:0 0 auto;gap:.2rem;grid-template-columns:repeat(3,minmax(3.65rem,1fr));padding:.2rem}.mode-option{background:transparent;border:0;border-radius:999px;color:#f7fbf5ad;cursor:pointer;font-weight:900;min-height:2rem;padding:0 .75rem;transition:background .16s ease,color .16s ease,transform .16s ease}.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:#ffd43b;color:#172018}