:root{color-scheme:dark;--bg:#07111f;--panel:#0c1b2c;--line:#21364c;--ink:#eaf6ff;--muted:#7890a8;--cyan:#42e8df;--orange:#ff8a4c;--board:#132b45}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 20%,#102941 0,#07111f 58%);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}body{display:flex;justify-content:center}.page{width:min(700px,100%);padding:18px 14px}header{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);margin-bottom:12px}h1{font-size:clamp(18px,5vw,25px);letter-spacing:.15em;margin:0}header a,header button{border:0;background:none;color:var(--muted);font:11px inherit;text-decoration:none;padding:12px 0;cursor:pointer}header button{text-align:right}.settings{display:grid;grid-template-columns:1fr 1fr .8fr;gap:8px;margin-bottom:12px}.settings>*{min-width:0;border:1px solid var(--line);background:rgba(12,27,44,.9);padding:8px 10px;color:var(--muted);font-size:9px;letter-spacing:.08em;display:flex;flex-direction:column;gap:4px}.settings select{border:0;background:transparent;color:var(--ink);font:700 12px inherit;padding:0}.record b{font-size:14px;color:var(--ink)}.record i{font-style:normal}.game{border:1px solid var(--line);background:rgba(8,20,34,.86);padding:10px;box-shadow:0 15px 50px #0008}.turn{height:34px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;letter-spacing:.08em}.turn>span{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.turn b{color:var(--ink)}#undoButton{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:10px inherit;padding:6px 10px;cursor:pointer;touch-action:manipulation}.column-controls{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:4px 5px}.column-controls button{min-width:0;border:0;background:transparent;color:var(--muted);font-size:17px;padding:6px 0;cursor:pointer;touch-action:manipulation}.column-controls button:hover,.column-controls button:focus{color:var(--cyan);text-shadow:0 0 9px var(--cyan)}.column-controls button:disabled{opacity:.25}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,9px);padding:clamp(8px,2vw,15px);border:2px solid #284c6d;border-radius:10px;background:linear-gradient(145deg,#173957,var(--board));touch-action:manipulation;user-select:none}.cell{aspect-ratio:1;border-radius:50%;border:2px solid #29506f;background:inset;box-shadow:inset 2px 5px 8px #020912aa;background-color:#06101d;position:relative}.cell.human{background:radial-gradient(circle at 35% 30%,#b7fffa,var(--cyan) 28%,#168e91 72%);border-color:#6bfff7;box-shadow:inset -5px -8px 12px #087278,0 0 12px #42e8df66}.cell.computer{background:radial-gradient(circle at 35% 30%,#ffd5b7,var(--orange) 28%,#b74a25 72%);border-color:#ffb17f;box-shadow:inset -5px -8px 12px #8d3118,0 0 12px #ff8a4c55}.cell.winning{animation:pulse .65s infinite alternate}@keyframes pulse{to{filter:brightness(1.5);transform:scale(.9)}}.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:13px 5px;color:var(--muted);font-size:9px;letter-spacing:.08em}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:50%}.legend .human{background:var(--cyan)}.legend .computer{background:var(--orange)}footer{text-align:center;color:#49627a;font-size:9px;letter-spacing:.08em;padding:5px}@media(max-width:480px){.page{padding:10px 8px}.settings{grid-template-columns:1fr 1fr}.record{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}.game{padding:6px}.board{gap:4px;padding:7px}.cell{border-width:1px}.legend{gap:10px}header{margin-bottom:8px}}