*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{min-width:320px;min-height:100vh;min-height:100svh;min-height:100dvh;font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;overscroll-behavior:none;-webkit-overflow-scrolling:auto;touch-action:manipulation}:root{--bg: #1b2230;--bg-deep: #121824;--text: #f2f5ff;--idle: #3e4a61;--idle-border: #4b5872;--active: #22d3ee;--active-border: #67e8f9;--overlay-bg: rgba(0, 0, 0, .56);--gap-size: clamp(10px, 1.9vmin, 24px);--viewport-pad: clamp(10px, 2.4vmin, 24px);--max-pad-size: 140px}.game-shell{width:100vw;height:100vh;height:100svh;height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 0%,#2a3448 0%,var(--bg) 46%,var(--bg-deep) 100%);overflow:hidden}.board-wrap{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding-top:calc(var(--viewport-pad) + env(safe-area-inset-top,0px));padding-right:calc(var(--viewport-pad) + env(safe-area-inset-right,0px));padding-bottom:calc(var(--viewport-pad) + env(safe-area-inset-bottom,0px));padding-left:calc(var(--viewport-pad) + env(safe-area-inset-left,0px))}.board{width:min(calc(100vw - (var(--viewport-pad) * 2) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),calc(100dvh - (var(--viewport-pad) * 2) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),1000px);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-size);place-items:center}.pad{width:100%;max-width:var(--max-pad-size);aspect-ratio:1;border:2px solid var(--idle-border);border-radius:50%;background:var(--idle);cursor:pointer;transition:transform .08s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pad:active{transform:scale(.96)}.pad.active{background:var(--active);border-color:var(--active-border);box-shadow:0 0 22px #22d3ee99,0 0 48px #22d3ee57}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:var(--overlay-bg);opacity:0;pointer-events:none;transition:opacity .15s ease}.overlay.show{opacity:1;pointer-events:auto}.dialog{padding:0;text-align:center;color:var(--text)}.dialog h2{margin:0;font-size:clamp(24px,3.4vw,34px)}.dialog p{margin:14px 0 0;font-size:clamp(18px,2.6vw,24px);font-weight:700}.restart{margin-top:20px;min-width:180px;padding:12px 16px;border:0;border-radius:999px;background:#22d3ee;color:#072040;font-size:clamp(16px,2.2vw,20px);font-weight:700;cursor:pointer}.restart:active{transform:scale(.98)}@media(orientation:portrait){:root{--gap-size: clamp(8px, 1.4vmin, 18px);--viewport-pad: clamp(8px, 1.8vmin, 16px)}}@media(min-width:1194px)and (min-height:834px)and (orientation:landscape){:root{--gap-size: 26px;--viewport-pad: 14px;--max-pad-size: 140px}}