:root{--bg:#071126;--panel:#111a35;--panel2:#18233f;--line:#263653;--text:#e4f7ff;--muted:#9bb0c7;--cyan:#00efff;--cyan2:#76f7ff;--orange:#ffad5a;--red:#ff676f;--green:#3af2b2;--ship:#17c8d7;--cell:min(8.2vw,38px)}*{box-sizing:border-box}html{background:#030816}body{margin:0;background:radial-gradient(circle at 50% 0,#102448 0,#071126 35%,#050b18 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}.app-shell{max-width:540px;margin:auto;min-height:100vh;background:linear-gradient(180deg,rgba(7,17,38,.96),rgba(4,10,22,.98));padding-bottom:76px}.topbar{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(7,17,38,.94);backdrop-filter:blur(14px);border-bottom:1px solid #14213a}.brand{display:flex;gap:9px;align-items:center}.brand img{width:43px;height:43px}.brand strong{display:block;letter-spacing:1.5px;font-size:15px}.brand span,.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan);font-size:10px;letter-spacing:1.1px}.resources{display:flex;gap:8px;font-family:ui-monospace,monospace;font-size:12px}.resources span{background:#131d38;padding:8px;border-radius:7px}.screen{display:none;padding:14px}.screen.active{display:block}.hero-card{position:relative;overflow:hidden;text-align:center;background:linear-gradient(160deg,#121d39,#10182e);border:1px solid #182843;border-radius:14px;padding:18px 16px 22px;margin-bottom:14px}.hero-card:before{content:"";position:absolute;inset:-40%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 38px,rgba(0,239,255,.09) 39px 40px);animation:radar 18s linear infinite}.hero-card>*{position:relative}.hero-emblem{width:100px}.hero-card h1{font-size:24px;line-height:1.05;margin:8px 0}.hero-card p{color:var(--muted);margin:8px auto 0;max-width:360px;font-size:13px}.card{background:linear-gradient(145deg,#131d38,#10182f);border:1px solid #192746;border-radius:12px;padding:13px;margin:12px 0;box-shadow:0 8px 25px rgba(0,0,0,.18)}.profile-card{display:flex;align-items:center;gap:12px}.rank-badge{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:#092d3c;border:1px solid #0b6470;font-size:24px}.grow{flex:1}.grow h2{font-size:18px;margin:2px 0 7px}.level{background:#252a47;padding:8px;border-radius:7px;text-align:center}.level span{display:block;color:var(--orange);font-size:9px}.level b{font-size:20px}.xpbar{height:6px;background:#283550;border-radius:99px;overflow:hidden}.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:.4s}.primary-btn,.secondary-btn,.ghost-btn,.danger-btn,.small-btn,.icon-btn{border:0;font:inherit;cursor:pointer}.primary-btn{width:100%;min-height:66px;border-radius:10px;background:linear-gradient(135deg,#02efff,#00c9d8);color:#002128;text-align:left;padding:10px 16px;box-shadow:0 0 24px rgba(0,239,255,.14);margin:10px 0}.primary-btn b{display:block;font-size:20px}.primary-btn small{font-family:ui-monospace,monospace;letter-spacing:1px}.primary-btn:disabled{filter:grayscale(1);opacity:.45}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-card{min-height:86px;text-align:left;padding:12px;border-radius:9px;border:1px solid #1b2946;background:#121a32;color:var(--text)}.mode-card b{display:block;font-size:17px;margin-bottom:7px}.mode-card small{color:var(--muted)}.mode-card.selected{border-color:#255a75;background:#15213d}.stats-card .section-title,.section-title{font-size:18px;font-weight:800;letter-spacing:.5px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.stats-grid>div{background:#10182f;padding:10px;border-radius:8px}.stats-grid small{display:block;color:var(--muted);font:10px ui-monospace,monospace}.stats-grid b{font-size:28px}.visual-reference,.visual-strip{display:flex;align-items:center;gap:12px;overflow:hidden}.visual-reference img{width:118px;height:150px;object-fit:cover;object-position:top;border-radius:8px;opacity:.8}.visual-reference h3{margin:4px 0}.visual-reference p{color:var(--muted);font-size:12px}.screen-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.screen-head h2{margin:2px 0;font-size:23px}.icon-btn,.small-btn,.ghost-btn,.secondary-btn{background:#18233f;color:var(--text);border:1px solid #263653;border-radius:9px}.icon-btn{width:44px;height:44px;font-size:22px}.small-btn{padding:9px 11px;color:var(--cyan)}.muted{color:var(--muted);font-size:13px}.board-wrap{max-width:450px;margin:13px auto}.board-line{display:flex}.coords.top{display:grid;grid-template-columns:repeat(10,1fr);padding-left:24px}.coords.side{width:24px;display:grid;grid-template-rows:repeat(10,var(--cell));align-items:center;text-align:center}.coords span{font:10px ui-monospace,monospace;color:#8298ae;display:grid;place-items:center}.board{width:calc(var(--cell)*10);height:calc(var(--cell)*10);display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));border:1px solid #2b4664;background:#07172b}.cell{position:relative;border-right:1px solid #1b3b58;border-bottom:1px solid #1b3b58;background:linear-gradient(135deg,rgba(0,99,130,.13),rgba(0,20,50,.22));cursor:pointer}.cell:hover{background:#0b3043}.cell.ship{background:linear-gradient(135deg,var(--ship),#0e6d88);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}.cell.hit{background:#7b2027}.cell.hit:after{content:"✹";position:absolute;inset:0;display:grid;place-items:center;color:#ffbd77;font-size:22px;animation:pop .35s}.cell.miss{background:#0d2a42}.cell.miss:after{content:"•";position:absolute;inset:0;display:grid;place-items:center;color:#8befff;font-size:26px}.cell.sunk{background:#4f1018;box-shadow:inset 0 0 10px #ff414a}.enemy .cell.ship{background:linear-gradient(135deg,rgba(0,99,130,.13),rgba(0,20,50,.22))}.ship-picker{display:grid;gap:7px}.ship-option{display:flex;align-items:center;justify-content:space-between;background:#111a32;border:1px solid #233451;border-radius:9px;padding:10px;color:var(--text)}.ship-option.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}.ship-option.done{opacity:.45}.ship-pips{display:flex;gap:3px}.ship-pips i{width:14px;height:7px;background:var(--cyan);border-radius:2px}.action-row{display:flex;gap:8px;margin:12px 0}.secondary-btn,.ghost-btn{padding:12px;flex:1}.secondary-btn{color:var(--cyan)}.ghost-btn{background:transparent}.ghost-btn.wide{width:100%;margin-top:4px}.battle-status{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;background:#111a31;border:1px solid #1b2945;border-radius:10px;padding:10px;font:11px ui-monospace,monospace;text-align:center}.battle-status span:first-child{color:var(--orange)}.battle-status span:last-child{color:var(--cyan)}.board-title{text-align:center;font:12px ui-monospace,monospace;color:var(--cyan);letter-spacing:1.5px}.turn-chip{padding:7px 9px;background:#0e3641;color:var(--cyan);border-radius:7px;font:10px ui-monospace,monospace}.telemetry{display:flex;justify-content:space-around;gap:5px;background:#0e162c;padding:10px;border-radius:9px;font:9px ui-monospace,monospace;color:var(--muted)}.telemetry b{display:block;color:var(--text);font-size:14px;text-align:center}.own-fleet{margin:12px 0;background:#10182f;border:1px solid #1a2948;border-radius:10px;padding:10px}.own-fleet summary{cursor:pointer;color:var(--cyan);font-size:13px}.compact{--cell:min(7vw,31px);margin:10px auto}.visual-strip img{width:86px;height:110px;object-fit:cover;object-position:top;border-radius:7px}.visual-strip div{display:flex;flex-direction:column}.visual-strip small{color:var(--muted);margin-top:4px}.result-hero{position:relative;height:330px;border-radius:14px;overflow:hidden;margin-bottom:12px;background:#111a32}.result-hero img{width:100%;height:100%;object-fit:cover;object-position:top}.result-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(7,17,38,.55) 55%,#071126 100%)}.result-overlay{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;text-align:center}.result-overlay h1{font-size:34px;margin:4px 0}.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.reward-grid .card{margin:0;text-align:center;padding:10px 6px}.reward-grid small{font:9px ui-monospace,monospace;color:var(--muted)}.reward-grid b{display:block;color:var(--cyan);font-size:17px}.debrief{display:flex;justify-content:space-between}.debrief div{text-align:center;flex:1}.debrief span{display:block;color:var(--muted);font-size:11px}.debrief b{font-size:20px}.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.skin{border:1px solid #263653;background:#111a31;color:var(--text);padding:13px 5px;border-radius:8px}.skin.selected{border-color:var(--cyan);color:var(--cyan)}.settings-list label{display:flex;justify-content:space-between;padding:14px 3px;border-bottom:1px solid #22304c}.settings-list input{width:22px;height:22px}.danger-btn{width:100%;padding:13px;margin-top:14px;border-radius:8px;background:#4a1720;color:#ffbdc0}.bottomnav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);height:68px;background:rgba(5,12,27,.97);border-top:1px solid #172440;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottomnav button{border:0;background:transparent;color:#9bacbd;font-size:20px}.bottomnav span{display:block;font:8px ui-monospace,monospace;margin-top:3px}.bottomnav button.active{color:var(--cyan)}.toast{position:fixed;z-index:50;left:50%;bottom:84px;transform:translate(-50%,20px);background:#17223d;border:1px solid #29415d;padding:10px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:.25s;color:var(--text);font-size:12px;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.3)}100%{transform:scale(1)}}@keyframes radar{to{transform:rotate(360deg)}}@media(max-width:380px){:root{--cell:8.05vw}.resources span:last-child{display:none}.brand span{display:none}.hero-card h1{font-size:21px}.result-hero{height:300px}}