:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f4ed;background:#101d2a;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 10%,#244258 0,#101d2a 42%,#0c1722 100%);min-height:100vh}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #f8c878;outline-offset:3px}[hidden]{display:none!important}.shell{max-width:1160px;padding:0 28px;margin:auto}.top{height:98px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff19}.brand{display:flex;align-items:center;gap:15px}.mark{width:38px;height:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;transform:rotate(-12deg)}.mark i{background:#f7c26b;border-radius:50%;box-shadow:0 0 12px #f7c26b66}.mark i:nth-child(2),.mark i:nth-child(3){background:#66d7c3;box-shadow:0 0 12px #66d7c366}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:800;color:#a4b8c4}.brand h1{font-size:23px;letter-spacing:-.04em;margin:2px 0 0}.top-actions{display:flex;gap:10px}.pill,.icon-button,.secondary,.text-button{background:#ffffff0c;border:1px solid #ffffff25;color:#f5f4ed;border-radius:12px;min-height:42px}.pill{padding:0 16px;font-weight:800}.icon-button{width:42px;font-size:25px}.hero{min-height:475px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:55px}.hero-copy{padding:42px 0}.tag{display:inline-block;background:#67d8c21d;color:#79ddcb;border:1px solid #67d8c24a;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:750}.hero h2{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.06em;max-width:580px;margin:20px 0}.hero p{color:#b8c8d0;line-height:1.6;max-width:520px}.setup{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 20px}.field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:120px}.field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#93aab7}select{appearance:none;color:#fff;background:#253848 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8"%3E%3Cpath d="m1 1 5 5 5-5" fill="none" stroke="%23f5f4ed" stroke-width="2"/%3E%3C/svg%3E') no-repeat right 12px center;border:1px solid #ffffff24;border-radius:10px;padding:12px 33px 12px 13px;min-height:46px}.primary-actions{display:flex;gap:10px;flex-wrap:wrap}.primary{background:#f8c66e;border:0;color:#172431;border-radius:12px;font-weight:850;padding:13px 25px;min-height:48px;box-shadow:0 6px 22px #f7c26b35}.primary:hover{background:#ffda93}.secondary{padding:12px 20px}.micro{font-size:12px}.preview{height:360px;max-width:410px;width:100%;justify-self:center;position:relative;display:grid;place-items:center;transform:rotate(5deg)}.preview:before{content:'';position:absolute;inset:0;border-radius:36px;background:#ffffff0b;border:1px solid #ffffff1c;box-shadow:0 30px 80px #0005}.preview-grid{width:250px;height:250px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:linear-gradient(90deg,transparent 31%,#7aa6af 31%,#7aa6af 33%,transparent 33%,transparent 65%,#7aa6af 65%,#7aa6af 67%,transparent 67%),linear-gradient(transparent 31%,#7aa6af 31%,#7aa6af 33%,transparent 33%,transparent 65%,#7aa6af 65%,#7aa6af 67%,transparent 67%);border:4px solid #7aa6af}.preview-grid:after{content:'';position:absolute;inset:-7px;background-image:radial-gradient(circle,#f6e7c6 0 5px,transparent 6px);background-size:calc(100% / 3) calc(100% / 3);background-position:-1px -1px;pointer-events:none}.pbox{margin:5px;border-radius:7px}.pbox.a{background:#f8c66e66}.pbox.b{background:#67d8c255}.preview-caption{position:absolute;bottom:21px;color:#b9cbd2;font-size:13px}.game-area{border-top:1px solid #ffffff22;padding:26px 0 40px;scroll-margin-top:15px}.game-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}.game-heading h2{font-size:30px;margin:5px 0 0;letter-spacing:-.04em}.game-actions{display:flex;gap:8px;flex-wrap:wrap}.text-button{padding:0 14px}.text-button:hover,.secondary:hover,.pill:hover,.icon-button:hover{background:#ffffff1f}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px}.board-wrap{background:#e7dfc9;border:10px solid #d2b98a;box-shadow:0 15px 40px #0006,inset 0 0 30px #a88f5a36;border-radius:20px;padding:16px 20px 10px;min-width:0}.board{--n:4;position:relative;width:min(100%,560px);aspect-ratio:1;margin:auto;touch-action:manipulation}.edge{position:absolute;display:block;padding:0;border:0;background:transparent;z-index:2}.edge:before{content:'';position:absolute;border-radius:99px;background:#5a647477;transition:background .13s,transform .13s}.edge:hover:before,.edge:focus-visible:before{background:#4ab9a6;transform:scale(1.08)}.edge.taken{pointer-events:none}.edge.taken.p1:before{background:#e3943a}.edge.taken.p2:before{background:#269c90}.edge.h{height:12%;transform:translate(-50%,-50%)}.edge.h:before{height:5px;top:calc(50% - 2.5px);left:8%;right:8%}.edge.v{width:12%;transform:translate(-50%,-50%)}.edge.v:before{width:5px;left:calc(50% - 2.5px);top:8%;bottom:8%}.dot{position:absolute;width:14px;height:14px;background:#213747;border-radius:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;box-shadow:0 1px 2px #0004}.box{position:absolute;transform:translate(-50%,-50%);border-radius:12px;display:grid;place-items:center;color:#17313b;font-size:clamp(16px,3vw,28px);font-weight:900;transition:background .18s}.box.p1{background:#eda95688}.box.p2{background:#54c9b58c}.board-help{color:#5b6060;text-align:center;font-size:13px;margin:10px 0 0}.score-panel{display:flex;flex-direction:column;gap:12px}.turn-banner{padding:17px;background:#ffffff14;border-radius:13px;font-weight:800;text-align:center;min-height:57px}.score-row{display:flex;align-items:center;justify-content:space-between;background:#ffffff0c;border:1px solid #ffffff24;border-radius:13px;padding:14px}.score-row:before{content:'';width:11px;height:11px;border-radius:50%;background:#f8c66e;margin-right:9px}.score-row.player2:before{background:#67d8c2}.score-name{flex:1;font-size:14px}.score-row strong{font-size:27px}.progress{padding:12px 4px;color:#a7bbc5;font-size:12px}.progress-track{height:5px;background:#ffffff21;border-radius:99px;margin-top:10px;overflow:hidden}.progress-track div{height:100%;width:0;background:#f8c66e;transition:width .2s}.result{padding:16px;background:#243d4b;border:1px solid #f8c66e66;border-radius:14px}.result h3{font-size:23px;margin:0 0 5px}.result p{font-size:13px;color:#c3d3d9;line-height:1.5}.result .primary{width:100%}.lower{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 35px}.info-card{background:#ffffff0b;border:1px solid #ffffff1a;border-radius:16px;padding:20px;min-height:170px}.card-icon{color:#f8c66e;font-size:23px}.info-card h3{margin:10px 0 6px;font-size:17px}.info-card p{margin:0;color:#aebfc8;font-size:13px;line-height:1.55}footer{border-top:1px solid #ffffff20;display:flex;justify-content:space-between;gap:12px;padding:22px 0 32px;color:#8197a3;font-size:11px}.footer-button{background:none;border:0;color:#9fb7c2;text-decoration:underline}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f8c66e;color:#152532;padding:10px 18px;border-radius:99px;font-weight:800;box-shadow:0 6px 22px #0006;transition:.2s;z-index:9}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:820px){.hero{grid-template-columns:1fr;gap:0}.preview{display:none}.play-layout{grid-template-columns:1fr}.score-panel{display:grid;grid-template-columns:1fr 1fr}.turn-banner,.progress,.result{grid-column:1/-1}.lower{grid-template-columns:1fr 1fr}}@media(max-width:520px){.shell{padding:0 16px}.top{height:78px}.brand h1{font-size:19px}.brand .eyebrow{font-size:8px}.mark{width:28px;height:28px;gap:6px}.hero{min-height:0}.hero-copy{padding:30px 0}.hero h2{font-size:39px}.setup{gap:8px;margin-top:23px}.field{min-width:calc(50% - 8px)}.game-heading{align-items:start;flex-direction:column}.board-wrap{padding:10px 10px 7px;border-width:7px}.dot{width:11px;height:11px}.lower{grid-template-columns:1fr}.info-card{min-height:auto}footer{flex-direction:column}.score-panel{gap:8px}}
.edge.hinted:before{background:#f72f87!important;box-shadow:0 0 0 6px #f72f8744;transform:scale(1.08)}.text-button:disabled{opacity:.45;cursor:not-allowed}

.replace-dialog{background:#1c3040;color:#fff;border:1px solid #d8b36c;border-radius:18px;max-width:calc(100vw - 24px);width:440px;padding:24px}.replace-dialog::backdrop{background:#09121cbb}.replace-dialog div{display:flex;gap:12px;flex-wrap:wrap}.replace-dialog button{min-height:44px;padding:10px 18px;border-radius:10px}.cancel-new{background:#263b4c;color:#fff;border:1px solid #789}.box{font-weight:800}.edge:focus-visible{outline:2px solid #f4ba63;outline-offset:-3px}
@media(max-width:320px){.shell{padding:0 8px}.game-top{flex-wrap:wrap;gap:8px}header{gap:5px}header h1{font-size:21px}.game-tools{gap:4px}.game-tools button{min-height:44px;padding:7px}.board{min-width:0}.setup{min-width:0}.setup select{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:600px) and (max-height:750px){.top{height:64px}.game-area{padding-top:14px}.game-heading{flex-direction:row;align-items:center;margin-bottom:12px}.game-heading h2{font-size:26px}.play-layout{grid-template-columns:minmax(0,1fr) 190px;gap:16px}.score-panel{display:flex}.board{width:min(100%,calc(100svh - 200px))}.board-wrap{padding:10px;border-width:6px}.board-help{font-size:11px}.turn-banner{padding:12px;min-height:44px}.score-row{padding:10px}.score-row strong{font-size:23px}.result .primary{min-height:44px}}
@media(max-width:380px){.brand{min-width:0;gap:7px}.brand>div{min-width:0}.brand .eyebrow{letter-spacing:.12em}.top-actions{flex-shrink:0;gap:5px}.pill{padding:0 10px}.score-panel{min-width:0}.score-row{min-width:0;padding:10px}.score-name{font-size:12px}.game-actions{flex-wrap:wrap;gap:5px}.game-actions button{min-height:44px}.board-wrap{width:100%}.field{min-width:100%}}