:root{--hue-primary: 275;--hue-accent-live: 150;--hue-accent-hot: 18;--ink-0: oklch(.11 .018 265);--ink-1: oklch(.15 .02 265);--ink-2: oklch(.19 .022 265);--ink-3: oklch(.24 .024 265);--ink-4: oklch(.3 .028 265);--ink-5: oklch(.4 .03 265);--text-1: oklch(.98 .005 265);--text-2: oklch(.78 .015 265);--text-3: oklch(.58 .02 265);--text-4: oklch(.45 .02 265);--brand: oklch(.68 .22 var(--hue-primary));--brand-hi: oklch(.78 .18 var(--hue-primary));--brand-lo: oklch(.48 .22 var(--hue-primary));--brand-glow: oklch(.68 .22 var(--hue-primary) / .35);--live: oklch(.78 .18 var(--hue-accent-live));--hot: oklch(.72 .2 var(--hue-accent-hot));--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--font-display: "Manrope", "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--shadow-card: 0 1px 0 oklch(1 0 0 / .04) inset, 0 12px 40px -12px oklch(0 0 0 / .6);--shadow-pop: 0 1px 0 oklch(1 0 0 / .06) inset, 0 30px 80px -20px oklch(0 0 0 / .8);--tap: cubic-bezier(.2, .9, .2, 1);--sea: oklch(.55 .14 220);--sea-dark: oklch(.32 .08 220);--sea-glow: oklch(.75 .13 200 / .35);--hit: oklch(.66 .22 25);--hit-glow: oklch(.66 .22 25 / .4);--miss: oklch(.62 .02 260);--ship: oklch(.42 .02 260);--ship-hi: oklch(.52 .03 260);--sunk: oklch(.5 .18 25)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--ink-0);color:var(--text-1);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;-webkit-tap-highlight-color:transparent;min-height:100vh}body{background-image:radial-gradient(70% 40% at 80% -10%,oklch(.45 .22 var(--hue-primary) / .15),transparent 60%),radial-gradient(50% 40% at 10% 0%,oklch(.45 .14 220 / .1),transparent 60%),radial-gradient(60% 50% at 50% 110%,oklch(.35 .1 220 / .12),transparent 60%);background-attachment:fixed}button,input,select{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:none;padding:0}.app{height:100%;display:flex;flex-direction:column;min-height:0;background:var(--ink-0)}.app__header{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--ink-2)}.app__back{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--ink-2);color:var(--text-2);transition:background .12s}.app__back:hover{background:var(--ink-3);color:var(--text-1)}.app__title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text-1);display:flex;align-items:center;gap:8px}.app__title-sub{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}.app__user{margin-left:auto;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--ink-2);border:1px solid var(--ink-3)}.app__user-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--sea));display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff}.app__user-name{font-size:12px;font-weight:500;color:var(--text-2);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app__body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}.app__body::-webkit-scrollbar{width:4px}.app__body::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:2px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:var(--brand);color:#fff;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 8px 20px -8px var(--brand-glow);transition:transform .1s var(--tap),background .15s;min-height:44px;width:100%}.btn-primary:hover{background:var(--brand-hi);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;background:#ffffff0f;color:var(--text-1);border:1px solid var(--ink-3);border-radius:12px;font-size:13px;font-weight:500;transition:all .15s;min-height:44px;width:100%}.btn-ghost:hover{background:#ffffff1a;border-color:var(--ink-4)}.btn-danger{background:#c5363726;color:#ff958d;color:oklch(.78 .14 25);border:1px solid oklch(.55 .18 25 / .35)}.btn-danger:hover{background:#c5363738}.lobby{padding:18px 16px 24px;display:flex;flex-direction:column;gap:16px}.lobby__hero{position:relative;border-radius:var(--radius-lg);padding:20px 20px 24px;background:radial-gradient(140% 100% at 100% 0%,oklch(.35 .12 220 / .55),transparent 60%),radial-gradient(120% 100% at 0% 100%,oklch(.35 .22 var(--hue-primary) / .45),transparent 60%),var(--ink-2);border:1px solid var(--ink-3);overflow:hidden}.lobby__hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - 1px),oklch(1 0 0 / .04) 100%),linear-gradient(to right,transparent 0,transparent calc(100% - 1px),oklch(1 0 0 / .04) 100%);background-size:24px 24px;-webkit-mask-image:radial-gradient(60% 70% at 50% 30%,black,transparent);mask-image:radial-gradient(60% 70% at 50% 30%,black,transparent);pointer-events:none}.lobby__hero-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.lobby__rank{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:oklch(.78 .18 var(--hue-accent-live) / .12);color:var(--live);border:1px solid oklch(.78 .18 var(--hue-accent-live) / .25)}.lobby__rank:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)}.lobby__rating{margin-top:14px;position:relative;z-index:1}.lobby__rating-num{font-family:var(--font-display);font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--text-1);display:flex;align-items:baseline;gap:6px}.lobby__rating-delta{font-size:14px;font-weight:600;color:var(--live)}.lobby__rating-label{margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600}.lobby__stats{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1}.lobby__stat{background:#00000040;border:1px solid var(--ink-3);border-radius:12px;padding:10px 10px 8px}.lobby__stat-v{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums;line-height:1.1}.lobby__stat-k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600;margin-top:2px}.lobby__cta{position:relative;padding:18px 18px 20px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--brand) 0%,oklch(.55 .22 240) 100%);overflow:hidden;cursor:pointer;transition:transform .12s var(--tap);box-shadow:0 10px 30px -10px var(--brand-glow)}.lobby__cta:hover{transform:translateY(-2px)}.lobby__cta:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(30% 40% at 80% 120%,oklch(1 0 0 / .25),transparent 60%),repeating-linear-gradient(45deg,transparent 0 12px,oklch(1 0 0 / .04) 12px 14px);pointer-events:none}.lobby__cta-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.lobby__cta-label{font-size:11px;text-transform:uppercase;font-weight:600;letter-spacing:.12em;color:#ffffffb3}.lobby__cta-online{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#00000040;color:#fff}.lobby__cta-online:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:pulse 1.8s infinite}.lobby__cta-title{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-top:10px;position:relative;z-index:1}.lobby__cta-sub{font-size:13px;color:#ffffffbf;margin-top:2px;position:relative;z-index:1}.lobby__cta-arrow{position:absolute;right:16px;bottom:18px;width:40px;height:40px;border-radius:12px;background:#ffffff26;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;z-index:2}.section-h{display:flex;align-items:baseline;justify-content:space-between;padding:6px 4px 0}.section-h__t{font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}.section-h__l{font-size:12px;color:var(--text-3);font-weight:500}.bot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bot-card{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-md);padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s var(--tap);position:relative;overflow:hidden}.bot-card:hover{border-color:var(--brand-lo);background:var(--ink-3);transform:translateY(-2px)}.bot-card__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px}.bot-card--easy .bot-card__icon{background:#00581333;background:oklch(.4 .14 145 / .2);color:#68db70}.bot-card--med .bot-card__icon{background:#94690033;background:oklch(.55 .15 80 / .2);color:#ffc428;color:oklch(.85 .18 85)}.bot-card--hard .bot-card__icon{background:#c5363733;color:#ff958d;color:oklch(.78 .18 25)}.bot-card__name{font-size:13px;font-weight:600;color:var(--text-1)}.bot-card__elo{font-size:10px;font-family:var(--font-mono);color:var(--text-3)}.continue{display:flex;gap:12px;padding:14px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;align-items:center}.continue:hover{border-color:var(--ink-4);background:var(--ink-3)}.continue__mini-board{width:52px;height:52px;flex-shrink:0;border-radius:10px;background:var(--ink-0);display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:0;padding:4px;border:1px solid var(--ink-3)}.continue__mini-cell{background:#041216;border-radius:1px}.continue__mini-cell--hit{background:var(--hit)}.continue__mini-cell--miss{background:var(--miss);opacity:.3}.continue__mini-cell--ship{background:var(--ship-hi)}.continue__body{flex:1;min-width:0}.continue__vs{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue__meta{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:6px}.continue__meta-pill{font-family:var(--font-mono);padding:1px 6px;border-radius:4px;background:var(--ink-3);color:var(--text-2)}.continue__arrow{color:var(--text-3);flex-shrink:0}.match-row{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;transition:background .12s;cursor:pointer}.match-row:hover{background:var(--ink-2)}.match-row__badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--font-mono)}.match-row__badge--w{background:#008a2333;background:oklch(.55 .18 145 / .2);color:#6fe276}.match-row__badge--l{background:#c5363733;color:#ff958d;color:oklch(.78 .18 25)}.match-row__opp{font-size:13px;font-weight:500;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-row__meta{font-size:11px;color:var(--text-3);margin-top:1px}.match-row__delta{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.match-row__delta--w{color:var(--live)}.match-row__delta--l{color:#ed756e}.match-row__time{font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.board-wrap{position:relative;border-radius:var(--radius-md);padding:8px;background:var(--ink-1);border:1px solid var(--ink-3)}.board-wrap--enemy{background:radial-gradient(100% 100% at 50% 0%,oklch(.28 .08 220 / .4),transparent 60%),var(--ink-1);border-color:var(--sea-dark)}.board-wrap--me{background:radial-gradient(100% 100% at 50% 100%,oklch(.28 .1 var(--hue-primary) / .3),transparent 60%),var(--ink-1)}.board{display:grid;grid-template-columns:14px repeat(10,1fr);grid-template-rows:14px repeat(10,1fr);gap:1px;aspect-ratio:1;font-family:var(--font-mono);font-size:9px;color:var(--text-3);position:relative}.board__coord{display:grid;place-items:center;font-weight:600;line-height:1}.board__cell{background:#071418;border-radius:2px;position:relative;cursor:pointer;transition:background .12s,transform .08s var(--tap);aspect-ratio:1}.board-wrap--enemy .board__cell:hover:not(.board__cell--disabled):not(.board__cell--hit):not(.board__cell--miss):not(.board__cell--sunk){background:#003441;background:oklch(.3 .1 220);transform:scale(1.05);box-shadow:0 0 0 1px var(--sea);z-index:1}.board__cell--ship{background:var(--ship)}.board__cell--ship-hi{background:var(--ship-hi);box-shadow:0 0 0 1px var(--brand-lo) inset}.board__cell--miss{background:#101d21}.board__cell--miss:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background-image:radial-gradient(circle,var(--miss) 0 2px,transparent 2.5px);background-size:100% 100%;background-position:center;background-repeat:no-repeat;opacity:.8}.board__cell--hit{background:#760009;background:oklch(.35 .16 25);animation:hit-pop .4s var(--tap)}.board__cell--hit:after{content:"✕";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#ffe8e6;color:oklch(.95 .05 25);font-size:10px;font-weight:900;font-family:var(--font-mono)}.board__cell--sunk{background:var(--sunk);box-shadow:0 0 8px var(--hit-glow) inset,0 0 0 1px var(--hit)}.board__cell--sunk:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:linear-gradient(45deg,transparent 45%,oklch(.95 .05 25) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,oklch(.95 .05 25) 45% 55%,transparent 55%)}.board__cell--last{animation:ring .6s var(--tap)}@keyframes hit-pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes ring{0%{box-shadow:0 0 0 0 var(--hit-glow)}to{box-shadow:0 0 0 12px transparent}}.board__cell--target{background:#003441;background:oklch(.3 .1 220);box-shadow:0 0 0 1px var(--sea) inset}.board__cell--target:before{content:"";position:absolute;top:20%;right:20%;bottom:20%;left:20%;border:1px solid var(--sea);border-radius:50%}.board__cell--disabled{cursor:not-allowed}.battle{display:flex;flex-direction:column;height:100%;padding:14px;gap:12px}.battle__turn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;font-family:var(--font-mono)}.battle__turn--me{border-color:var(--brand-lo);background:linear-gradient(90deg,var(--brand-glow),transparent 40%),var(--ink-2)}.battle__turn--opp{border-color:var(--sea-dark);background:linear-gradient(270deg,var(--sea-glow),transparent 40%),var(--ink-2)}.battle__turn-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--text-3)}.battle__turn-who{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-1);margin-top:2px}.battle__turn-timer{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}.battle__turn-timer--urgent{color:var(--hot);animation:pulse .6s infinite}.fleet-strip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--ink-1);border:1px solid var(--ink-3);border-radius:12px}.fleet-strip__side{display:flex;align-items:center;gap:8px;min-width:0}.fleet-strip__avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}.fleet-strip__avatar--me{background:linear-gradient(135deg,var(--brand),var(--brand-lo))}.fleet-strip__avatar--opp{background:linear-gradient(135deg,var(--sea),var(--sea-dark))}.fleet-strip__name{font-size:11px;color:var(--text-3);text-transform:uppercase;font-weight:600;letter-spacing:.08em}.fleet-strip__ships{display:flex;gap:3px;margin-top:4px}.fleet-ship{height:6px;border-radius:2px;background:var(--ship-hi);transition:all .2s}.fleet-ship--4{width:18px}.fleet-ship--3{width:14px}.fleet-ship--2{width:10px}.fleet-ship--1{width:6px}.fleet-ship--sunk{background:var(--hit);opacity:.4}.fleet-strip__vs{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-4);letter-spacing:.1em;text-align:center}.board-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 6px}.board-head__title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-2);display:flex;align-items:center;gap:6px}.board-head__hint{font-size:10px;color:var(--text-4);font-family:var(--font-mono)}.reactions{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}.reaction{width:34px;height:34px;border-radius:10px;background:var(--ink-2);border:1px solid var(--ink-3);display:grid;place-items:center;font-size:18px;transition:all .12s var(--tap)}.reaction:hover{transform:translateY(-2px) scale(1.1);border-color:var(--brand-lo)}.floating-emoji{position:absolute;font-size:40px;pointer-events:none;animation:float-up 1.6s forwards;z-index:10}@keyframes float-up{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(-20px) scale(1.1)}to{transform:translateY(-120px) scale(1);opacity:0}}.placement{padding:14px;height:100%;display:flex;flex-direction:column;gap:12px}.placement__hint{font-size:12px;color:var(--text-3);text-align:center;padding:8px 12px;background:var(--ink-1);border:1px solid var(--ink-3);border-radius:10px;font-family:var(--font-mono)}.placement__hint strong{color:var(--text-1)}.fleet-dock{padding:12px;background:var(--ink-1);border:1px solid var(--ink-3);border-radius:12px}.fleet-dock__title{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:700;margin-bottom:8px}.fleet-dock__rows{display:flex;flex-direction:column;gap:6px}.fleet-dock__row{display:flex;align-items:center;gap:8px}.fleet-dock__row-label{width:60px;font-size:11px;color:var(--text-3);font-family:var(--font-mono)}.fleet-dock__ships{display:flex;gap:6px;flex:1}.fleet-piece{display:grid;gap:1px;background:var(--ship);border-radius:3px;padding:2px;cursor:grab;transition:all .1s}.fleet-piece--placed{background:var(--ink-3);opacity:.5;cursor:default}.fleet-piece:hover:not(.fleet-piece--placed){background:var(--ship-hi);transform:translateY(-1px)}.fleet-piece__unit{background:#677284;width:10px;height:10px;border-radius:1px}.fleet-piece--4{grid-template-columns:repeat(4,1fr)}.fleet-piece--3{grid-template-columns:repeat(3,1fr)}.fleet-piece--2{grid-template-columns:repeat(2,1fr)}.fleet-piece--1{grid-template-columns:1fr}.placement__actions{display:flex;gap:8px}.matching{padding:40px 24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}.matching__radar{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,oklch(.25 .1 220 / .4) 0%,transparent 70%),radial-gradient(circle,transparent 40%,oklch(.18 .02 220) 41% 45%,transparent 46%);border:1px solid var(--sea-dark);position:relative;overflow:hidden}.matching__radar:before,.matching__radar:after{content:"";position:absolute;top:15%;right:15%;bottom:15%;left:15%;border-radius:50%;border:1px solid oklch(.45 .12 220 / .3)}.matching__radar:after{top:35%;right:35%;bottom:35%;left:35%}.matching__radar-sweep{position:absolute;top:0;right:0;bottom:0;left:0;background:conic-gradient(from 0deg,transparent 0deg,transparent 320deg,oklch(.75 .13 200 / .5) 350deg,oklch(.75 .13 200 / .9) 360deg);border-radius:50%;animation:radar-sweep 2.5s linear infinite}.matching__radar-center{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:var(--sea);box-shadow:0 0 12px var(--sea-glow);transform:translate(-50%,-50%)}.matching__radar-blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--sea);box-shadow:0 0 8px var(--sea);animation:blip 2.5s ease-out infinite}.matching__radar-blip--1{top:30%;left:65%;animation-delay:.3s}.matching__radar-blip--2{top:60%;left:25%;animation-delay:1.1s}.matching__radar-blip--3{top:70%;left:70%;animation-delay:1.8s}@keyframes radar-sweep{to{transform:rotate(360deg)}}@keyframes blip{0%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1.4)}40%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1)}}.matching__title{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text-1)}.matching__sub{font-size:13px;color:var(--text-3);max-width:280px}.matching__timer{font-family:var(--font-mono);font-size:28px;color:var(--sea);font-variant-numeric:tabular-nums;letter-spacing:.04em}.matching__meta{display:flex;gap:16px;font-family:var(--font-mono);font-size:11px;color:var(--text-3)}.matching__meta strong{color:var(--text-1);font-weight:600}.result{height:100%;display:flex;flex-direction:column;padding:24px 18px 18px;gap:16px}.result__banner{text-align:center;padding:28px 16px 20px;border-radius:var(--radius-lg);position:relative;overflow:hidden}.result__banner--win{background:radial-gradient(70% 100% at 50% 0%,oklch(.55 .22 var(--hue-primary) / .35),transparent 60%),radial-gradient(70% 100% at 50% 100%,oklch(.45 .18 145 / .25),transparent 60%),var(--ink-1);border:1px solid var(--brand-lo)}.result__banner--loss{background:radial-gradient(70% 100% at 50% 0%,oklch(.45 .18 25 / .28),transparent 60%),var(--ink-1);border:1px solid oklch(.45 .18 25 / .4)}.result__banner-icon{font-size:44px;margin-bottom:4px}.result__banner-title{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.02em}.result__banner--win .result__banner-title{color:var(--text-1)}.result__banner--loss .result__banner-title{color:#ffbab3;color:oklch(.85 .12 25)}.result__banner-sub{font-size:13px;color:var(--text-3);margin-top:4px}.result__delta{margin-top:14px;display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px;border-radius:999px;background:#0000004d;font-family:var(--font-mono);font-size:13px}.result__delta strong{font-family:var(--font-display);font-size:18px;font-weight:800}.result__delta--win strong{color:var(--live)}.result__delta--loss strong{color:#ff847d}.result__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result__cell{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:12px}.result__cell-k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:600}.result__cell-v{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-1);margin-top:4px;font-variant-numeric:tabular-nums}.result__cell-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono);margin-top:2px}.result__actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}.confetti{position:absolute;width:8px;height:14px;animation:confetti-fall 2s linear forwards}@keyframes confetti-fall{0%{transform:translateY(-40px) rotate(0);opacity:1}to{transform:translateY(300px) rotate(720deg);opacity:0}}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot--ok{background:var(--live);box-shadow:0 0 8px var(--live)}.dot--warn{background:#eeb400;background:oklch(.8 .18 85)}.dot--err{background:var(--hot)}@media (min-width: 1100px){.phone{width:420px;height:860px}}.board__cell--preview-ok{background:#006818!important;background:oklch(.45 .18 145)!important;box-shadow:0 0 6px #00791e80 inset;box-shadow:0 0 6px oklch(.5 .2 145 / .5) inset;transition:background .1s}.board__cell--preview-bad{background:#8a0012!important;background:oklch(.4 .18 25)!important;box-shadow:0 0 6px #bb061e80 inset;transition:background .1s}.fleet-piece--selected{background:var(--brand)!important;opacity:1!important;transform:translateY(-2px);box-shadow:0 0 8px oklch(.6 .2 var(--hue-primary) / .5)}.fleet-piece--available{opacity:1!important;cursor:pointer}.placement__actions{flex-wrap:wrap}.placement__actions .btn-ghost{flex:1 1 auto;min-width:0}.placement__actions .btn-primary{flex:1 1 100%;margin-top:4px}@keyframes placement-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes fleet-piece-pulse{0%,to{box-shadow:0 0 oklch(.6 .2 var(--hue-primary) / .5)}50%{box-shadow:0 0 0 8px oklch(.6 .2 var(--hue-primary) / 0)}}.fleet-piece--selected{background:var(--brand)!important;outline:2px solid var(--brand)!important;outline-offset:3px!important;transform:translateY(-2px)!important;animation:fleet-piece-pulse 1.6s ease-out infinite!important;position:relative}.fleet-dock__title{color:var(--text-2)!important;font-size:11px!important}.board-wrap-with-fab{position:relative}.placement__rotate-fab{position:absolute;right:-2px;bottom:-2px;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;border:3px solid var(--ink-0);box-shadow:0 4px 16px oklch(.55 .2 var(--hue-primary, 280) / .45),0 2px 6px #00000059;display:grid;place-items:center;cursor:pointer;z-index:5;padding:0;transition:transform .18s var(--tap),box-shadow .18s;animation:rotate-fab-attention 4s ease-in-out infinite}.placement__rotate-fab:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 22px oklch(.55 .2 var(--hue-primary, 280) / .6),0 2px 8px #0006}.placement__rotate-fab:active:not(:disabled){transform:scale(.92)}.placement__rotate-fab:disabled{opacity:.4;cursor:not-allowed;animation:none}.placement__rotate-fab__axis{position:absolute;bottom:-3px;right:-3px;width:22px;height:22px;background:var(--ink-0);border:2px solid var(--brand);border-radius:50%;font-size:12px;font-weight:800;color:var(--brand);display:grid;place-items:center;font-family:var(--font-mono);line-height:1}.placement__rotate-fab svg{transition:transform .25s var(--tap)}.placement__rotate-fab--v svg{transform:rotate(90deg)}@keyframes rotate-fab-attention{0%,88%,to{box-shadow:0 4px 16px oklch(.55 .2 var(--hue-primary, 280) / .45),0 2px 6px #00000059}92%{box-shadow:0 4px 16px oklch(.55 .2 var(--hue-primary, 280) / .45),0 0 0 8px oklch(.55 .2 var(--hue-primary, 280) / .25),0 2px 6px #00000059}}@media (prefers-reduced-motion: reduce){.placement__rotate-fab{animation:none}.placement__rotate-fab svg{transition:none}}.placement--dragging{user-select:none;-webkit-user-select:none;touch-action:none}.placement--dragging .board{cursor:grabbing}.board__cell{-webkit-tap-highlight-color:transparent}.placement--dragging .board__cell--preview-ok{animation:drag-preview-pulse 1s ease-in-out infinite}.placement--dragging .board__cell--preview-bad{animation:drag-preview-bad .6s ease-in-out infinite}@keyframes drag-preview-pulse{0%,to{box-shadow:0 0 6px #00791e80 inset;box-shadow:0 0 6px oklch(.5 .2 145 / .5) inset}50%{box-shadow:0 0 12px #008a23d9 inset;box-shadow:0 0 12px oklch(.55 .22 145 / .85) inset}}@keyframes drag-preview-bad{0%,to{box-shadow:0 0 6px #bb061e80 inset}50%{box-shadow:0 0 12px #d40924d9 inset}}@media (prefers-reduced-motion: reduce){.placement--dragging .board__cell--preview-ok,.placement--dragging .board__cell--preview-bad{animation:none}}.board__cell--preview-forbidden{background:#6d50008c!important;background:oklch(.45 .12 85 / .55)!important;box-shadow:0 0 4px #906b0073 inset;box-shadow:0 0 4px oklch(.55 .18 85 / .45) inset;transition:background .12s}.placement__progress{display:flex;align-items:center;gap:10px;padding:6px 4px 0}.placement__progress-bar{flex:1;height:6px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:4px;overflow:hidden;position:relative}.placement__progress-fill{height:100%;background:linear-gradient(90deg,var(--brand) 0%,oklch(.65 .2 calc(var(--hue-primary, 280) + 30)) 100%);border-radius:3px;transition:width .25s var(--tap);box-shadow:0 0 6px oklch(.55 .2 var(--hue-primary, 280) / .5)}.placement__progress-label{font-family:var(--font-mono);font-size:10px;color:var(--text-3);min-width:88px;text-align:right;white-space:nowrap}.placement__progress-fill[style*="100%"]{background:linear-gradient(90deg,#23a136,#0aa842 25%,#00ac4a,#00af52 50%,#00bc6d);background:linear-gradient(90deg,#23a136,#0aa842 25%,color(xyz 0.158 0.3 0.111),color(xyz 0.164 0.315 0.124) 50%,color(xyz 0.191 0.377 0.181));animation:progress-complete-pulse 1.4s ease-in-out infinite}@keyframes progress-complete-pulse{0%,to{box-shadow:0 0 6px #23a13680}50%{box-shadow:0 0 12px #01bf35d9}}@media (prefers-reduced-motion: reduce){.placement__progress-fill[style*="100%"]{animation:none}}.placement__actions .btn-ghost[aria-label=Отменить],.placement__actions .btn-ghost[aria-label=Повторить]{flex:0 0 auto;min-width:36px;font-size:18px;padding:8px 10px}.placement__auto-menu{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--ink-1);border:1px solid var(--ink-3);border-radius:12px;margin-top:6px;animation:auto-menu-slide .18s ease-out}@keyframes auto-menu-slide{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.placement__auto-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;color:var(--text-1);cursor:pointer;text-align:left;transition:all .12s var(--tap)}.placement__auto-item:hover{background:var(--ink-3);border-color:var(--brand);transform:translate(2px)}.placement__auto-item:active{transform:translate(2px) scale(.98)}.placement__auto-icon{font-size:22px;flex:0 0 auto;width:28px;text-align:center}.placement__auto-item>span:last-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.placement__auto-item strong{font-size:13px;font-weight:700;color:var(--text-1)}.placement__auto-item small{font-size:10px;color:var(--text-3);font-family:var(--font-mono)}.placement__auto-item--saved{border-color:oklch(.5 .18 var(--hue-primary, 280) / .5);background:oklch(.18 .05 var(--hue-primary, 280) / .5)}@media (prefers-reduced-motion: reduce){.placement__auto-menu{animation:none}.placement__auto-item:hover{transform:none}}html,body{min-height:100vh}#root{display:flex;flex-direction:column;align-items:center;min-height:100vh;width:100%}.app{display:block;width:100%;max-width:480px;height:auto;min-height:100vh}.app__body{overflow:visible;flex:none;padding-bottom:32px}.app__header{position:sticky;top:0;z-index:20;background:#03040aeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;box-shadow:0 1px #ffffff0a}