:root{--bg:#090b0e;--panel:#11151a;--panel2:#181d23;--line:#343b43;--text:#f2f4f6;--muted:#9ca6b2;--orange:#ff7a18;--warm:#ff9a3c;--danger:#e05a4f;--gold:#ffc928;--red:#e93428;--cell:clamp(42px,6vw,73px);--gap:clamp(5px,.7vw,9px);font-family:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow-x:hidden;background:radial-gradient(circle at 50% 0,#28170d 0,#090b0e 38%,#050607 100%)}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe0bd;outline-offset:3px}.screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:#050607}.art-layer,.shade{position:absolute;inset:0}.art-layer{background:url('assets/artwork/connect4-master-v1.png') center/cover no-repeat}.shade{background:linear-gradient(90deg,rgba(4,5,6,.94) 0%,rgba(4,5,6,.74) 34%,rgba(4,5,6,.12) 70%,rgba(4,5,6,.18) 100%)}.launch-copy{position:relative;z-index:2;width:min(620px,84vw);margin-right:auto;margin-left:7vw}.launch-copy img{width:82px;filter:drop-shadow(0 0 20px #ff7a1855)}.launch-copy p,.eyebrow{margin:14px 0 7px;color:var(--orange);font-size:.68rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.launch-copy h1,.start-copy h1{margin:0;font-size:clamp(3rem,7vw,6.8rem);line-height:.83;letter-spacing:-.07em}.launch-copy h1 strong,.start-copy h1 strong{display:block;color:var(--orange)}.signal{width:min(410px,70vw);height:3px;margin:28px 0 10px;background:#30363d;overflow:hidden}.signal i{display:block;width:35%;height:100%;background:var(--orange);box-shadow:0 0 18px var(--orange);animation:scan 1.25s ease-in-out infinite}.launch-copy small{color:var(--muted);letter-spacing:.16em}@keyframes scan{from{transform:translateX(-110%)}to{transform:translateX(330%)}}
.start-panel{position:relative;z-index:2;width:min(620px,calc(100vw - 28px));margin-right:auto;margin-left:5vw;padding:clamp(24px,4vw,46px);border:1px solid #4c3526;border-top:3px solid var(--orange);background:linear-gradient(145deg,rgba(17,21,26,.97),rgba(6,8,10,.96));box-shadow:0 28px 100px #000}.start-panel header,.start-panel footer{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);font-size:.66rem;letter-spacing:.1em}.start-panel header img{width:56px}.start-copy{padding:40px 0 30px}.start-copy>p:last-child{color:#c3c9cf;font-size:1.02rem}.start-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tools{display:flex;gap:8px;margin:10px 0 30px}.start-panel footer{padding-top:16px;border-top:1px solid #30363c}.btn,.tool{min-height:44px;border:1px solid #414951;background:linear-gradient(#20262c,#11151a);font-weight:850;cursor:pointer}.btn{padding:11px 15px;border-radius:9px 3px 9px 3px;text-transform:uppercase;letter-spacing:.035em}.tool{padding:8px 12px;border-radius:8px}.btn:hover,.tool:hover{border-color:var(--orange);transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,#ff922f,#e85d00);border-color:#ff9a3c;color:#130b05}.btn.big{min-height:56px}
.game{min-height:100vh;padding:12px clamp(9px,2vw,26px) 18px}.topbar{max-width:1500px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0 14px}.brand{display:flex;align-items:center;gap:11px}.brand img{width:43px}.brand strong,.brand span{display:block}.brand strong{font-size:.88rem;letter-spacing:.055em}.brand span{margin-top:3px;color:var(--orange);font-size:.6rem;letter-spacing:.09em}.top-tools{display:flex;gap:7px}.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:230px minmax(550px,1fr) 270px;gap:14px}.panel,.stage{border:1px solid var(--line);background:linear-gradient(155deg,rgba(19,23,28,.98),rgba(7,9,11,.98));box-shadow:0 18px 50px #0007}.panel{padding:17px;border-radius:12px}.setup{display:flex;flex-direction:column;gap:13px}.setup label{display:grid;gap:6px;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.setup input,.setup select{width:100%;height:44px;padding:0 10px;border:1px solid #3d454d;border-radius:7px;background:#080a0d}.stage{padding:15px;border-radius:12px;min-width:0}.turn{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:11px;padding:11px 14px;border:1px solid #4d3625;border-radius:9px;background:#0b0e11}.player{display:flex;align-items:center;gap:9px;font-weight:850}.player.cpu{justify-content:flex-end}.mini{width:20px;height:20px;border-radius:50%;border:2px solid #ffffff44}.mini.gold{background:var(--gold);box-shadow:0 0 12px #ffc92855}.mini.red{background:var(--red);box-shadow:0 0 12px #e9342855}.status{text-align:center}.status strong,.status small{display:block}.status strong{font-size:1rem}.status small{margin-top:2px;color:var(--muted);font-size:.73rem}.board-shell{--active-col:3;position:relative;display:flex;justify-content:center;padding-top:17px}.indicator{position:absolute;top:2px;width:var(--cell);height:7px;border-radius:99px;background:var(--orange);box-shadow:0 0 18px var(--orange);transform:translateX(calc((var(--active-col) - 3) * (var(--cell) + var(--gap))));opacity:0;transition:.15s}.board-shell.ready .indicator{opacity:1}.board{display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--gap);padding:clamp(9px,1.1vw,14px);border:1px solid #565d64;border-radius:14px;background:linear-gradient(145deg,#2b3035,#111418 58%,#080a0c);box-shadow:inset 0 1px #ffffff1c,inset 0 -20px 40px #0008,0 22px 60px #0008}.cell{position:relative;width:var(--cell);height:var(--cell);padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,#020304 0 54%,#0d1013 59% 100%);box-shadow:inset 0 8px 15px #000e,0 1px #ffffff2b;cursor:pointer}.piece{position:absolute;inset:7%;border-radius:50%;transform:translateY(-620%);opacity:0}.cell.p1 .piece,.cell.p2 .piece{animation:drop .42s cubic-bezier(.2,.85,.25,1.15) forwards}.cell.p1 .piece{background:radial-gradient(circle at 31% 25%,#fff6b1 0 7%,#ffd331 25%,#bf7e00 100%);box-shadow:inset -8px -11px 17px #7c460055,0 0 18px #ffc92855}.cell.p2 .piece{background:radial-gradient(circle at 31% 25%,#ffb0a8 0 7%,#ef4034 25%,#820b05 100%);box-shadow:inset -8px -11px 17px #51000066,0 0 18px #e9342855}.cell.preview:after{content:"";position:absolute;inset:17%;border-radius:50%;background:#ffc92825;box-shadow:0 0 15px #ffc92833}.cell.win .piece{animation:winPulse .7s ease-in-out infinite alternate}.stage-actions{display:flex;justify-content:center;margin-top:13px}.right{display:flex;flex-direction:column;gap:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.stats>div{text-align:center;padding:10px 5px;border:1px solid #30373e;border-radius:7px;background:#0b0e11}.stats strong,.stats span{display:block}.stats strong{color:var(--warm);font-size:1.25rem}.stats span{margin-top:3px;color:var(--muted);font-size:.58rem;text-transform:uppercase}.score-panel{min-height:245px}.highscores{display:grid;gap:7px;margin-top:12px}.score-row{display:grid;grid-template-columns:24px 1fr auto;gap:7px;padding:9px;border-left:3px solid #454c53;background:#0b0e11;font-size:.77rem}.score-row small{display:block;color:var(--muted)}.score-row b{color:var(--warm)}.empty{color:var(--muted);font-size:.85rem;line-height:1.5}.game-footer{max-width:1500px;margin:13px auto 0;padding:12px 15px;border-top:1px solid #30363c;display:grid;grid-template-columns:1fr auto 1fr;color:var(--muted);font-size:.7rem}.game-footer span:nth-child(2){text-align:center}.game-footer strong{text-align:right;color:var(--orange)}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#000d;backdrop-filter:blur(9px)}.dialog{width:min(610px,100%);max-height:90vh;overflow:auto;padding:26px;border:1px solid #4d565f;border-top:3px solid var(--orange);background:#10151a;box-shadow:0 30px 100px #000}.dialog h2{margin:7px 0 17px;font-size:clamp(1.8rem,5vw,3rem)}.dialog p,.dialog li{color:#c1c9d0;line-height:1.6}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.result{text-align:center}.result-visual{height:150px;display:grid;place-items:center;font-size:6rem}.result>strong{display:block;color:var(--warm);font-size:1.2rem}.toast{position:fixed;z-index:60;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;padding:10px 15px;border:1px solid #48515a;border-radius:99px;background:#11171d;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes drop{0%{transform:translateY(-620%);opacity:1}75%{transform:translateY(7%)}100%{transform:translateY(0);opacity:1}}@keyframes winPulse{to{transform:scale(.86);filter:brightness(1.35)}}
@media(max-width:1120px){.layout{grid-template-columns:210px minmax(500px,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}}@media(max-width:780px){.game{padding:8px}.topbar{align-items:flex-start}.brand span{font-size:.5rem}.top-tools{display:grid;grid-template-columns:1fr 1fr}.tool{font-size:.69rem;padding:7px}.layout{grid-template-columns:1fr}.setup{display:grid;grid-template-columns:1fr 1fr}.setup .eyebrow{grid-column:1/-1}.stage{padding:9px}.right{display:grid;grid-template-columns:1fr 1fr}.game-footer{grid-template-columns:1fr;text-align:center;gap:5px}.game-footer span:nth-child(2),.game-footer strong{text-align:center}.start-panel{margin:auto}.shade{background:linear-gradient(90deg,#050607ee,#05060799)}}@media(max-width:560px){:root{--cell:clamp(34px,11.5vw,55px);--gap:4px}.start-actions,.setup,.right{grid-template-columns:1fr}.setup>*{grid-column:1!important}.turn{grid-template-columns:1fr 1fr}.status{grid-column:1/-1;grid-row:1}.board{padding:7px}.start-copy{padding:28px 0 22px}.start-panel footer{align-items:flex-start;flex-direction:column}.launch-copy{margin:auto}.launch-copy h1{font-size:clamp(2.8rem,15vw,5rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}