.topbar{position:sticky;top:0;z-index:60;justify-content:space-between;background:linear-gradient(to bottom,rgba(14,17,19,.94),rgba(14,17,19,.55),transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand-btn{border:0;background:transparent;padding:7px 0;cursor:pointer;display:flex;align-items:center}.brand-btn img{width:112px;display:block}.top-actions{margin-left:auto}.home-tool-row{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.lab-chip{border-color:rgba(154,110,220,.35);color:#d8c5f4}.panel{width:min(720px,100%);margin:2vh auto;background:linear-gradient(145deg,rgba(23,28,31,.97),rgba(13,18,21,.98));border:1px solid var(--line);border-radius:28px;padding:clamp(18px,4vw,30px);box-shadow:var(--shadow)}.panel.wide{width:min(860px,100%)}.panel h2{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.045em;margin:7px 0 12px}.muted{color:var(--muted);line-height:1.55}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.variant-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preset{min-height:148px;text-align:left;border:1px solid var(--line);background:#101518;color:var(--text);border-radius:19px;padding:16px;cursor:pointer}.preset.active{border-color:#d7dcdf;background:#192024;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.preset b,.preset span,.preset small{display:block}.preset span{color:var(--muted);line-height:1.4;margin-top:7px;font-size:.78rem}.preset small{font-size:.67rem;color:#c1c8cb;line-height:1.45;margin-top:8px}.custom-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.variant-core-note{grid-column:1/-1;border:1px solid #323b40;background:#0e1316;border-radius:15px;padding:12px;color:#bfc7cb;font-size:.76rem;line-height:1.5}.variant-core-note b{color:#eef1f2}.field label,.lab-controls label{display:grid;gap:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#aeb6ba;font-weight:850}.field select,.lab-controls select{min-height:46px;border-radius:12px;border:1px solid #394248;background:#0d1215;color:var(--text);padding:0 10px}.custom-fields .check{grid-column:1/-1}.summary{margin:15px 0;border:1px solid #323b40;background:#0e1316;border-radius:15px;padding:12px;color:#c8ced1;font-size:.78rem;line-height:1.5}.action-row{grid-template-columns:repeat(3,minmax(0,1fr))}.ghost{min-height:46px;padding:0 13px}.economy{display:flex;justify-content:space-between;gap:8px;margin:0 2px 9px;color:#b9c0c4;font-size:.72rem;min-height:18px}.pill.active{border-color:#F6A623;color:#ffe0a3}.cell.shift-source{box-shadow:0 0 0 3px rgba(246,166,35,.72)}.lab-panel{width:min(900px,100%)}.lab-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.progress{height:5px;background:#242b2f;border-radius:99px;overflow:hidden;margin:12px 0}.progress span{display:block;height:100%;width:30%;background:#d7dcdf;animation:labRun 1s linear infinite}@keyframes labRun{from{transform:translateX(-110%)}to{transform:translateX(360%)}}.lab-results{margin-top:18px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{border:1px solid #333c41;border-radius:14px;background:#0f1417;padding:12px}.stat b{font-size:1.35rem}.stat span{display:block;color:var(--muted);font-size:.69rem;margin-top:3px}.batch-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.72rem}.batch-table th,.batch-table td{border-bottom:1px solid #30383d;padding:8px 5px;text-align:right}.batch-table th:first-child,.batch-table td:first-child{text-align:left}.board-frame.fx-shift{animation:takeFx .32s ease}.board-frame.fx-reveal{animation:takeFx .32s ease}

/* During active play, decorative home compositing is not needed. Keeping it out of the render tree prevents the fading/disappearing bug seen on mobile/coarse-pointer GPUs. */
body:not(.home-view) .takxo-field{display:none!important}

/* Modal stability: overlays must not depend on backdrop compositing over the animated home field. This keeps settings/difficulty rendering deterministic on mobile WebKit/PWA paths. */
.overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0E1113!important;isolation:isolate}.difficulty-grid .difficulty{min-height:54px;display:grid!important;place-items:center;visibility:visible!important;opacity:1!important}.difficulty-grid .secondary{color:var(--text)!important}.difficulty-grid .primary{color:#090b0f!important}@supports selector(body:has(.overlay:not(.hidden))){body:has(.overlay:not(.hidden)) .takxo-field{display:none!important}}

@media(max-width:820px), (hover:none) and (pointer:coarse){body:not(.home-view)::before{display:none!important}body:not(.home-view) .topbar,body:not(.home-view) .icon-btn,body:not(.home-view) .pill,body:not(.home-view) .overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}body:not(.home-view) .board-frame,body:not(.home-view) .board-frame *,body:not(.home-view) .game-shell *{will-change:auto!important}body:not(.home-view) .board-frame{filter:none!important;transform:none!important}body:not(.home-view) .board-frame.fx-take,body:not(.home-view) .board-frame.fx-lock,body:not(.home-view) .board-frame.fx-win,body:not(.home-view) .board-frame.fx-shift,body:not(.home-view) .board-frame.fx-reveal{animation:none!important}.piece.enter{animation:drop .22s ease-out}.cell.win{animation:none!important;box-shadow:0 0 0 2px rgba(200,217,21,.55),0 0 22px rgba(200,217,21,.12)}}
@media(max-width:680px){.preset-grid,.custom-fields,.lab-controls,.action-row{grid-template-columns:1fr}.preset{min-height:auto}.result-grid{grid-template-columns:repeat(2,1fr)}.brand-btn img{width:96px}.panel{margin-top:0}.topbar{height:54px}.home-tool-row{max-width:350px}.difficulty-chip{margin-top:8px}}


/* Final experience layer — no rules changes */
.curated-variant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.competitive-preset{border-color:rgba(200,217,21,.28)}.competitive-options{margin:14px 0 2px;border:1px solid #394248;border-radius:16px;background:#0e1316;padding:14px;display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:14px;align-items:center}.competitive-options label{display:grid;gap:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#aeb6ba;font-weight:850}.competitive-options select{min-height:44px;border:1px solid #394248;border-radius:12px;background:#0d1215;color:var(--text);padding:0 10px}.competitive-options p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.5}.cell.lock-ready:not(.full){border-color:rgba(200,217,21,.28)}.cell.lock-ready:not(.full)::before{content:"";position:absolute;top:7px;left:7px;width:7px;height:7px;border-radius:50%;background:var(--lock);opacity:.72;box-shadow:0 0 0 3px rgba(200,217,21,.08);z-index:12}.cell.retake-blocked{border-color:#485258!important;cursor:not-allowed}.cell.retake-blocked::after{content:"↺";position:absolute;right:7px;top:5px;z-index:14;color:#7e888d;font-size:.78rem;font-weight:900;line-height:1;opacity:.9}.lock-plate.lock-enter{animation:lockSnap .34s cubic-bezier(.18,.92,.2,1.18) .06s both}@keyframes lockSnap{0%{opacity:.12;transform:scale(.78)}65%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}.board.has-winner .cell{transition:opacity .34s ease,border-color .34s ease}.board.has-winner .cell:not(.win-claim){opacity:.5}.cell.win-claim{animation:claimLine .58s cubic-bezier(.18,.88,.22,1) both;animation-delay:calc(var(--win-order,0)*90ms)!important;z-index:4}@keyframes claimLine{0%{transform:scale(.96);box-shadow:inset 0 10px 28px rgba(0,0,0,.18)}48%{transform:scale(1.045);box-shadow:0 0 0 3px rgba(200,217,21,.28),0 0 30px rgba(200,217,21,.18)}100%{transform:scale(1);box-shadow:0 0 0 2px rgba(200,217,21,.55),0 0 22px rgba(200,217,21,.12)}}
@media(max-width:680px){.curated-variant-grid,.competitive-options{grid-template-columns:1fr}.cell.retake-blocked::after{right:5px;top:4px}.cell.lock-ready:not(.full)::before{top:5px;left:5px}}
@media(prefers-reduced-motion:reduce){.lock-plate.lock-enter,.cell.win-claim{animation:none!important}.board.has-winner .cell{transition:none!important}}


/* Blitz format */
.blitz-preset{border-color:rgba(246,166,35,.34)}
.blitz-clocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.blitz-clock{min-height:58px;border:1px solid #343d42;border-radius:16px;background:#0e1316;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.blitz-clock span{font-weight:950;font-size:1rem}.blitz-clock.x span{color:var(--x)}.blitz-clock.o span{color:var(--o)}
.blitz-clock b{font-variant-numeric:tabular-nums;font-size:clamp(1.35rem,5vw,2rem);letter-spacing:.02em}
.blitz-clock.x.active{border-color:rgba(240,91,79,.7);box-shadow:inset 0 0 0 1px rgba(240,91,79,.14)}
.blitz-clock.o.active{border-color:rgba(32,182,210,.7);box-shadow:inset 0 0 0 1px rgba(32,182,210,.14)}
.blitz-clock.urgent b{color:var(--lock)}
.blitz-clock.critical{border-color:var(--lock)!important;animation:blitzClockPulse .62s ease-in-out infinite alternate}
@keyframes blitzClockPulse{to{transform:scale(1.025);box-shadow:0 0 0 3px rgba(200,217,21,.12)}}
.blitz-countdown{position:absolute;inset:0;z-index:70;display:grid;place-items:center;background:rgba(9,13,15,.86);color:var(--text);font-weight:950;font-size:clamp(4rem,20vw,9rem);letter-spacing:-.05em;pointer-events:none}
.blitz-countdown.pop{animation:blitzCountPop .48s cubic-bezier(.16,.9,.18,1) both}
@keyframes blitzCountPop{0%{opacity:.25;transform:scale(.72)}55%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(max-width:680px){.blitz-clock{min-height:52px;padding:7px 11px}.blitz-clock b{font-size:1.45rem}.blitz-countdown{font-size:clamp(3.8rem,22vw,7rem)}}
@media(prefers-reduced-motion:reduce){.blitz-clock.critical,.blitz-countdown.pop{animation:none!important}}


/* final result player colors */
.result-mark{font-weight:950}.result-mark.x{color:var(--x)}.result-mark.o{color:var(--o)}