:root{--bg:#090c1c;--panel:#12182c;--text:#f8f9ff;--muted:#8790ad;--cyan:#19d6e6;--p1:#ff3d81;--p2:#ffd53d;--cell:clamp(42px,8.3vw,76px);--gap:clamp(5px,1.2vw,11px)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:"DM Sans",sans-serif;background:radial-gradient(circle at 50% 38%,#172047 0,#0b1027 28%,var(--bg) 66%);overflow-x:hidden}.stars{position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#3eeaff 1px,transparent 1px);background-size:70px 70px,110px 110px;background-position:0 0,30px 25px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}button,input{font:inherit}.topbar{height:75px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0e;position:relative;z-index:2}.brand{color:#fff;text-decoration:none;font:800 19px "Baloo 2";letter-spacing:1.5px;display:flex;align-items:center;gap:12px}.brand b{color:var(--cyan)}.brand-mark{display:grid;grid-template-columns:repeat(2,8px);gap:3px;padding:7px;border:2px solid var(--cyan);border-radius:8px;transform:rotate(-6deg);box-shadow:0 0 14px #19d6e666}.brand-mark i{width:8px;height:8px;border-radius:50%;background:var(--cyan)}.icon-btn,.ghost-btn{border:1px solid #ffffff25;color:#dce2fa;background:#ffffff09;border-radius:10px;cursor:pointer;transition:.2s}.icon-btn{width:38px;height:38px;font-weight:800}.icon-btn:hover,.ghost-btn:hover{background:#ffffff18;transform:translateY(-1px)}main{width:min(1050px,calc(100% - 32px));margin:auto;position:relative}.hero{text-align:center;padding:45px 0 28px}.eyebrow{color:var(--cyan)!important;font-size:11px!important;font-weight:800;letter-spacing:3px}.hero h1{font:800 clamp(45px,7vw,80px)/.95 "Baloo 2";letter-spacing:-2px;margin:8px 0;text-shadow:0 7px 25px #000}.hero h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 30px #19d6e677}.hero>p{margin:0;color:var(--muted);font-size:14px}.setup-card{width:min(820px,100%);margin:0 auto 70px;background:linear-gradient(145deg,#161d34ee,#0e1428ee);border:1px solid #ffffff14;border-radius:18px;padding:26px 32px 30px;box-shadow:0 30px 80px #0007,0 0 50px #19d6e608}.setup-head{padding-bottom:19px;border-bottom:1px solid #ffffff10}.setup-head>div,.step-title{display:flex;gap:15px;align-items:center}.setup-head span,.step-title>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #19d6e670;border-radius:7px;color:var(--cyan);font-weight:800;font-size:12px;background:#19d6e611}.setup-card h2{font:800 15px "Baloo 2";letter-spacing:1px;margin:0}.setup-card p{font-size:11px;color:var(--muted);margin:1px 0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 28px}.mode-card{min-height:86px;padding:15px 17px;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid #ffffff16;border-radius:12px;background:#ffffff05;color:#fff;cursor:pointer;position:relative;transition:.2s}.mode-card:hover{transform:translateY(-2px);background:#ffffff0a}.mode-card.selected{border-color:var(--cyan);box-shadow:inset 0 0 25px #19d6e60d,0 0 20px #19d6e612}.mode-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:10px;background:#19d6e612;color:var(--cyan);font-size:21px}.mode-card strong{display:block;font:700 12px "Baloo 2";letter-spacing:.5px}.mode-card small{font-size:10px;color:var(--muted)}.mode-card>b{display:none;position:absolute;right:10px;top:10px;border-radius:50%;width:17px;height:17px;text-align:center;font-size:10px;color:#07121a;background:var(--cyan)}.mode-card.selected>b{display:block}.color-section{border-top:1px solid #ffffff10;padding-top:24px}.players-config{display:grid;grid-template-columns:1fr 45px 1fr;align-items:end;gap:12px;margin-top:18px}.player-config label{font:700 10px "Baloo 2";color:#c6cce0;letter-spacing:1px}.player-config input{display:block;width:100%;border:0;border-bottom:1px solid #ffffff16;background:transparent;color:#fff;padding:5px 0 6px;margin-bottom:9px;outline:none}.player-config input:focus{border-color:var(--cyan)}.versus{align-self:center;text-align:center;color:#56607d;font:800 12px "Baloo 2"}.swatches{display:flex;gap:8px}.swatch{width:25px;height:25px;border:2px solid transparent;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset -4px -5px 7px #0005,inset 3px 3px 5px #fff5;transition:.2s}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:#fff;outline:2px solid var(--c);outline-offset:2px}.start-btn{border:0;background:linear-gradient(110deg,#11bdd2,#31e5d0);color:#04151a;border-radius:10px;height:48px;padding:0 24px;font:800 12px "Baloo 2";letter-spacing:1px;cursor:pointer;box-shadow:0 12px 28px #13c9d52e;transition:.2s}.setup-card>.start-btn{display:flex;width:260px;margin:27px auto 0;align-items:center;justify-content:center;gap:25px}.start-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.start-btn span{font-size:19px}.hidden{display:none!important}
.game-area{padding:0 0 70px}.game-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:17px}.ghost-btn{padding:9px 14px;font-size:11px}.game-toolbar .ghost-btn:last-child{justify-self:end}.turn-box{text-align:center;background:#101831;border:1px solid #ffffff12;border-radius:12px;padding:7px 30px}.turn-box span{display:block;color:var(--muted);font-size:9px;letter-spacing:2px}.turn-box strong{font:800 17px "Baloo 2";color:var(--turn,var(--p1))}.score-row{width:min(calc(var(--cell)*7 + var(--gap)*8),100%);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.score{display:flex;align-items:center;gap:9px;font-size:12px;color:#c9cfe2}.score:last-child{justify-content:flex-end}.score i{width:14px;height:14px;background:var(--c);border-radius:50%;box-shadow:0 0 12px var(--c)}.score b{font:800 22px "Baloo 2"}.player-one{--c:var(--p1)}.player-two{--c:var(--p2)}.round{color:#67718d;font-size:9px;letter-spacing:2px}.round b{color:#bfc7dd}.board-scene{width:min-content;margin:76px auto 15px;position:relative;perspective:1100px}.board{display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--gap);padding:var(--gap);border-radius:20px 20px 12px 12px;background:linear-gradient(135deg,#1dd8e8,#08799e 70%);box-shadow:inset 8px 8px 16px #ffffff30,inset -10px -10px 25px #042d61aa,0 30px 25px #0009,0 0 45px #0bbbd33b;transform:rotateX(-3deg);position:relative;z-index:3}.cell{width:var(--cell);height:var(--cell);border:0;padding:0;border-radius:50%;background:radial-gradient(circle at 55% 58%,#10172e 0 54%,#050919 61%,#46f2ff77 68%,transparent 70%);cursor:pointer;position:relative}.piece{position:absolute;inset:7%;border-radius:50%;background:var(--c);box-shadow:inset 8px 9px 12px #fff6,inset -10px -12px 15px #0006,0 0 15px color-mix(in srgb,var(--c),transparent 45%);animation:drop .48s cubic-bezier(.25,.85,.35,1.13) both}.piece.win{animation:pulse .75s infinite alternate}.column-hints{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,var(--cell));gap:var(--gap);padding:var(--gap);z-index:4;pointer-events:none}.column-hints i{height:calc(var(--cell)*6 + var(--gap)*5);border-radius:20px;background:#fff0;transition:.2s}.board-scene[data-hover] .column-hints i.active{background:linear-gradient(#ffffff19,transparent)}.board-base{width:112%;height:25px;margin:-2px -6%;border-radius:4px 4px 18px 18px;background:linear-gradient(#087b9e,#064868);box-shadow:0 18px 22px #0009;transform:rotateX(48deg);position:relative;z-index:2}.hand{position:absolute;z-index:8;top:calc(var(--cell)*-1.35);left:calc(var(--gap) + var(--cell)*3 + var(--gap)*3);width:var(--cell);height:var(--cell);display:grid;place-items:center;transition:left .2s ease,transform .2s;pointer-events:none;filter:drop-shadow(0 10px 10px #0008)}.hand span{font-size:calc(var(--cell)*.68);position:absolute;z-index:2}.hand i{display:block;width:40%;aspect-ratio:1;border-radius:50%;background:var(--turn,var(--p1));margin-top:55%;box-shadow:inset 4px 5px 7px #fff7,inset -5px -6px 8px #0005}.hand.grab{animation:handDrop .5s ease}.hand.thinking{animation:think .7s infinite alternate}.hint{text-align:center;color:#6f7894;font-size:11px}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#050816d9;backdrop-filter:blur(9px)}.modal-card{width:min(430px,calc(100% - 32px));padding:38px;text-align:center;border:1px solid #ffffff1f;border-radius:22px;background:linear-gradient(145deg,#1b2545,#10152b);box-shadow:0 30px 90px #000b,0 0 70px #19d6e622;animation:pop .4s cubic-bezier(.2,1.5,.4,1)}.trophy{display:grid;place-items:center;width:72px;height:72px;margin:auto;border-radius:50%;font-size:38px;background:#19d6e618;color:var(--cyan);box-shadow:0 0 35px #19d6e635}.modal-card>p{font-size:10px;letter-spacing:3px;color:var(--muted);margin:22px 0 4px}.modal h2{font:800 42px/1 "Baloo 2";margin:0;color:var(--cyan)}.modal h3{font:700 18px "Baloo 2";margin:8px 0 24px}.modal-actions{display:flex;gap:10px;justify-content:center}.modal-actions .ghost-btn{padding:0 18px}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;width:9px;height:16px;background:var(--c);animation:fall var(--d) linear infinite;left:var(--x);transform:rotate(var(--r))}
@keyframes drop{from{transform:translateY(calc(var(--row)*-1*(var(--cell) + var(--gap)) - 110px)) rotateY(70deg)}70%{transform:translateY(5px)}to{transform:none}}@keyframes handDrop{50%{transform:translateY(22px) rotate(-8deg)}}@keyframes think{to{transform:translateY(-5px)}}@keyframes pulse{to{transform:scale(.82);filter:brightness(1.45)}}@keyframes pop{from{opacity:0;transform:scale(.75)}}@keyframes fall{to{top:110%;transform:rotate(700deg)}}
@media(max-width:640px){.topbar{height:60px}.hero{padding:28px 0 22px}.setup-card{padding:20px}.mode-grid{grid-template-columns:1fr}.players-config{grid-template-columns:1fr 25px 1fr}.player-config input{font-size:12px}.board-scene{margin-top:65px}.score span{display:none}.game-toolbar{grid-template-columns:auto 1fr auto;gap:6px}.turn-box{padding:7px 13px}.ghost-btn{padding:8px;font-size:10px}.modal-card{padding:30px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}