:root{color:#f8fafc;--safe-bottom:env(safe-area-inset-bottom,0px);background:#111827;font-family:Inter,system-ui,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at top,#334155,#020617 68%);min-height:100dvh;margin:0;overflow-x:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.screen{place-items:center;min-height:100dvh;padding:clamp(16px,4vw,24px);display:grid}.hero h1,.mode-screen h1{letter-spacing:clamp(-3px,-.45vw,-1px);margin:0 0 12px;font-size:clamp(36px,9vw,86px);line-height:.95}.mode-screen{align-content:center;gap:22px}.card{background:#0f172ae0;border:1px solid #ffffff1f;border-radius:clamp(20px,5vw,28px);padding:clamp(22px,5vw,32px);box-shadow:0 30px 80px #00000059}.narrow{width:min(100%,520px);max-width:520px}.intro-card p{font-size:clamp(16px,3.8vw,18px);line-height:1.45}.credits{color:#fed7aa;background:#fb923c1f;border:1px solid #fb923c38;border-radius:16px;margin:16px 0 0;padding:12px 14px;font-weight:700}input{color:#fff;background:#0f172a;border:1px solid #475569;border-radius:16px;width:100%;margin:16px 0;padding:15px 18px}.copyright-credit{text-align:center;opacity:.58;color:#ffffffc7;margin-top:10px;font-size:clamp(11px,2vw,12px);line-height:1.4}.primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#f97316);border:0;border-radius:16px;width:100%;padding:14px 18px;font-weight:800}.mode-grid{grid-template-columns:repeat(4,minmax(180px,1fr));gap:18px;width:100%;max-width:1180px;display:grid}.mode-card{text-align:left;color:#fff;cursor:pointer;background:#0f172ad9;border:1px solid #ffffff24;border-radius:clamp(20px,4vw,28px);min-height:185px;padding:clamp(18px,4vw,24px);transition:all .2s}.mode-card:hover{border-color:#f97316;transform:translateY(-4px)scale(1.01)}.mode-card h2{margin:0 0 10px;font-size:clamp(20px,3vw,25px)}.mode-card p{color:#cbd5e1;margin:0;line-height:1.45}.game-layout{min-height:100dvh;padding:clamp(10px,3vw,24px);padding-bottom:calc(clamp(14px, 3vw, 24px) + var(--safe-bottom));grid-template-columns:minmax(320px,min(72vmin,100vw - 390px)) minmax(270px,320px);justify-content:center;align-items:center;gap:clamp(16px,3vw,28px);display:grid}.board{border:clamp(4px,1.5vw,10px) solid #78350f;border-radius:clamp(12px,3vw,18px);grid-template-rows:repeat(8,minmax(0,1fr));grid-template-columns:repeat(8,minmax(0,1fr));width:min(92vw,72vmin);max-width:calc(100dvh - 36px);height:min(92vw,72vmin);max-height:calc(100dvh - 36px);margin:0 auto;display:grid;position:relative;overflow:hidden;box-shadow:0 30px 70px #0006}.square{cursor:pointer;aspect-ratio:1;border:0;place-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:0;display:grid;position:relative;overflow:hidden}.square small{opacity:.35;font-size:clamp(7px,1.7vw,10px);line-height:1;position:absolute;bottom:clamp(2px,.8vw,4px);right:clamp(3px,.9vw,5px)}.light{background:#f8e7c9}.dark{background:#9a5c2e}.selected{outline-offset:-2px;z-index:1;outline:clamp(3px,1vw,5px) solid #22c55e}.legal:after{content:"";aspect-ratio:1;background:#22c55ebf;border-radius:999px;width:22%;position:absolute}.lava{background:radial-gradient(circle,#f97316,#991b1b 70%)}.lava-icon{filter:drop-shadow(0 6px 8px #00000073);font-size:clamp(20px,6vmin,52px)}.piece{-webkit-user-select:none;user-select:none;font-size:clamp(24px,7vmin,68px);line-height:1}.white-piece{color:#fff7ed;filter:drop-shadow(0 2px 2px #5c3012f2)drop-shadow(0 0 4px #78350fe6)drop-shadow(0 6px 8px #5c3012b3)}.black-piece{color:#111827;filter:drop-shadow(0 2px 2px #fffffff2)drop-shadow(0 0 4px #ffffffe6)drop-shadow(0 6px 8px #ffffffa6)}.side-panel{gap:12px;width:100%;display:grid}.hud{background:#0f172ae0;border:1px solid #ffffff1f;border-radius:clamp(20px,4vw,28px);width:100%;padding:clamp(16px,4vw,24px);box-shadow:0 30px 80px #00000059}.hud h2{color:#fb923c;margin:0 0 16px}.hud p{margin:9px 0;line-height:1.35}.bot-from:before,.bot-to:before{content:"";z-index:2;pointer-events:none;border:3px solid #3b82f6e6;border-radius:14px;animation:.7s ease-out bot-square-pulse;position:absolute;inset:8%}.bot-to:before{border-color:#facc15f2;box-shadow:0 0 24px #facc158c}.bot-piece-animation{left:var(--from-x);top:var(--from-y);z-index:5;pointer-events:none;place-items:center;width:12.5%;height:12.5%;animation:.68s cubic-bezier(.22,.8,.22,1) forwards bot-piece-slide;display:grid;position:absolute}.bot-piece-animation .piece{transform:scale(1.14)}.bot-piece-animation .white-piece{filter:drop-shadow(0 12px 12px #00000094)}.bot-piece-animation .black-piece{filter:drop-shadow(0 12px 12px #ffffffb8)}.result-video-card{background:#0f172ac7;border:1px solid #ffffff1f;border-radius:clamp(16px,3vw,22px);width:100%;padding:10px;box-shadow:0 18px 46px #00000047}.result-video-title{color:#fed7aa;margin:0 0 8px;font-size:14px;font-weight:800}.result-video{object-fit:contain;background:#020617;border-radius:14px;width:100%;max-height:min(28dvh,190px);display:block}.app-credit{right:14px;bottom:calc(10px + var(--safe-bottom));opacity:.7;color:#fff;text-shadow:0 1px 3px #000000b3;z-index:9999;pointer-events:none;font-size:12px;position:fixed}@keyframes bot-piece-slide{0%{left:var(--from-x);top:var(--from-y);opacity:.1;transform:scale(.92)}18%{opacity:1;transform:scale(1.1)}to{left:var(--to-x);top:var(--to-y);opacity:0;transform:scale(1)}}@keyframes bot-square-pulse{0%{opacity:0;transform:scale(.78)}35%{opacity:1;transform:scale(1)}to{opacity:.2;transform:scale(1.06)}}@media (width<=1100px){.mode-grid{grid-template-columns:repeat(2,minmax(220px,1fr));max-width:760px}.game-layout{grid-template-columns:1fr;align-content:start}.board{width:min(94vw,68dvh);max-width:94vw;height:min(94vw,68dvh);max-height:68dvh}.side-panel{width:min(94vw,680px);margin:0 auto}.hud{width:100%;margin:0}.result-video{max-height:min(24dvh,180px)}}@media (width<=640px){.screen{align-content:center;place-items:start center}.mode-screen{align-content:start}.mode-screen h1{width:100%;max-width:420px;margin-top:6px}.mode-grid{grid-template-columns:1fr;gap:12px;max-width:420px}.mode-card{min-height:auto}.game-layout{align-content:start;gap:12px;padding:8px}.board{border-width:4px;border-radius:12px;width:min(96vw,62dvh);height:min(96vw,62dvh)}.side-panel{width:min(96vw,520px)}.hud{width:100%;padding:14px}.result-video-card{padding:8px}.result-video{max-height:150px}.hud h2{margin-bottom:10px;font-size:20px}.hud-info{grid-template-columns:1fr 1fr;gap:4px 10px;display:grid}.hud-info p{margin:2px 0;font-size:13px}.hud-info p:nth-child(3){grid-column:1/-1}.primary{margin-top:10px;padding:12px 14px}.app-credit{text-align:center;opacity:.65;margin-top:2px;font-size:11px;position:static}}@media (width<=380px){.piece{font-size:clamp(21px,8vw,34px)}.square small{font-size:6px}.hud-info{grid-template-columns:1fr}.hud-info p:nth-child(3){grid-column:auto}}@media (orientation:landscape) and (height<=560px){.game-layout{grid-template-columns:minmax(260px,calc(100dvh - 18px)) minmax(240px,310px);align-items:center;padding:8px}.board{width:min(58vw,100dvh - 18px);max-width:calc(100dvh - 18px);height:min(58vw,100dvh - 18px);max-height:calc(100dvh - 18px)}.hud{padding:12px}.result-video-card{display:none}.hud h2{margin-bottom:8px;font-size:18px}.hud p{margin:4px 0;font-size:13px}.primary{margin-top:8px;padding:10px 12px}.app-credit{display:none}}@media (width<=768px){html,body,#root{width:100%;min-width:0;overflow-x:hidden}.screen.mode-screen{flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;min-height:100dvh;padding:14px;display:flex;overflow:hidden auto}.mode-screen h1{width:100%;max-width:none;margin:0 0 8px;font-size:clamp(34px,11vw,52px)}.mode-grid{flex-direction:column;gap:12px;width:100%;min-width:0;max-width:none;display:flex}.mode-card{width:100%;min-width:0;min-height:auto;padding:16px}.mode-card:hover{transform:none}.game-layout{width:100%;min-height:100dvh;padding:8px;padding-bottom:calc(14px + var(--safe-bottom));flex-direction:column;justify-content:flex-start;align-items:stretch;gap:12px;display:flex;overflow-x:hidden}.board{flex:none;width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:calc(100vw - 16px);max-height:calc(100vw - 16px)}.side-panel{width:100%;max-width:none;margin:0}.hud,.result-video-card{width:100%}}@media (width<=768px) and (orientation:landscape){.game-layout{flex-direction:column;align-items:center;display:flex}.board{width:min(100vw - 16px,100dvh - 16px);max-width:min(100vw - 16px,100dvh - 16px);height:min(100vw - 16px,100dvh - 16px);max-height:min(100vw - 16px,100dvh - 16px)}.side-panel{width:min(100%,680px)}.result-video-card{display:block}}