:root{--ink:#e8f1f4;--muted:#9db0b6;--panel:rgba(7,18,22,.88);--line:#2b4c55;--gold:#e5b95e;--red:#d65a4a;--cyan:#54bac8;--sea:#102d36}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07161a;color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select{font:inherit}.hidden{display:none!important}
.auth-screen{min-height:100%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#173d46 0,#0a1f25 38%,#061317 100%);padding:20px}.auth-card{width:min(430px,95vw);background:rgba(5,16,20,.92);border:1px solid #284b54;border-radius:18px;padding:28px;box-shadow:0 24px 70px #0009}.brand{font-size:34px;font-weight:900;letter-spacing:.14em;color:var(--gold)}.subtitle{color:var(--muted);line-height:1.5}.tabs{display:flex;gap:8px;margin:22px 0 14px}.tabs button,.auth-card button{border:1px solid #355b64;background:#102b31;color:#dce8ea;padding:11px 14px;border-radius:10px;cursor:pointer}.tabs button.active,.auth-card form button{background:#b88a39;color:#071216;border-color:#d7aa56;font-weight:800}.panel{display:none;gap:10px}.panel.active{display:grid}.panel input{padding:12px 13px;background:#091b20;border:1px solid #31505a;border-radius:9px;color:white}.msg{min-height:20px;color:#e59b79;margin-top:10px}.auth-card small{display:block;color:#668087;margin-top:18px}
.game{width:100%;height:100%;position:relative;background:#0c2b34}#sea{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.topbar{position:absolute;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(#061318f2,#0a2028d9);border-bottom:1px solid #21434c;z-index:5}.topbar b{color:var(--gold);letter-spacing:.09em}.topbar #shipLabel{margin-left:12px;color:#8da9b0;font-size:13px}.topbar .res{display:flex;gap:18px}.topbar button{background:#102c34;color:#c9d8db;border:1px solid #31535b;border-radius:8px;padding:7px 10px}.hud{position:absolute;top:72px;z-index:4;width:270px}.hud.left{left:14px}.hud.right{right:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 9px 30px #0005}.compact{padding:12px;margin-bottom:10px}.row{display:flex;justify-content:space-between;gap:12px}.label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#7f9da4;margin-bottom:6px}.tiny{font-size:12px;color:#a6bbc0;margin-top:4px}.bar{height:9px;background:#241a1a;border:1px solid #54322f;border-radius:99px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#9f322d,#e46b51);width:100%}.bar.xp{background:#10252b;border-color:#264854}.bar.xp i{background:linear-gradient(90deg,#257c91,#58c4cf)}#targetInfo{font-size:13px;line-height:1.45;min-height:42px}#fireBtn,.cannon{width:100%;margin-top:9px;background:#8c312b;border:1px solid #d35a50;color:white;font-weight:900;border-radius:9px;padding:10px;cursor:pointer}select{width:100%;background:#0c252b;color:white;border:1px solid #34545d;padding:8px;border-radius:8px}
.modal{position:absolute;inset:0;background:#0009;z-index:20;display:grid;place-items:center;padding:18px}.modal-card{position:relative;width:min(980px,96vw);max-height:88vh;overflow:auto;background:#07191e;border:1px solid #31545e;border-radius:16px;padding:22px}.close{position:absolute;right:12px;top:10px;background:none;border:0;color:#b9c8cc;font-size:28px}.harbor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.shop-card{border:1px solid #294b54;border-radius:10px;padding:12px;background:#0b2329}.shop-card strong{color:var(--gold)}.shop-card button,.upgrades button,#repairBtn{margin-top:8px;background:#173c45;color:#dce8ea;border:1px solid #3d6872;border-radius:8px;padding:8px 10px;cursor:pointer}.upgrades{display:flex;gap:8px;flex-wrap:wrap}.hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;background:#06191ed9;border:1px solid #294952;border-radius:99px;padding:7px 14px;font-size:12px;color:#99b2b8}.mobile-controls{display:none}
@media(max-width:780px){.topbar{height:52px;font-size:12px}.topbar .res{gap:8px}.hud{top:61px;width:190px}.hud.left{left:7px}.hud.right{right:7px}.compact{padding:8px}.hint{display:none}.mobile-controls{display:flex;position:absolute;left:12px;right:12px;bottom:16px;z-index:7;justify-content:space-between;align-items:end;pointer-events:none}.mobile-controls button{pointer-events:auto;background:#0a242bdd;color:#dce9eb;border:1px solid #41636b;border-radius:12px;width:50px;height:50px;font-size:20px}.dpad>button{display:block;margin:0 auto 5px}.dpad>div{display:flex;gap:5px}.cannon{width:68px!important;height:68px!important;border-radius:50%!important;background:#8d302bdd!important}.hud.right{top:auto;bottom:96px}.hud.right .card:nth-child(2){display:none}.auth-card{padding:22px}.brand{font-size:28px}}