:root{--bg:#071824;--panel:#081c2ae6;--line:#8cc8e638;--txt:#eef7fb;--muted:#a8c3d1;--sea:#5fd3f5;--sea2:#1f7fae;--sand:#ffb36b;--good:#6ee39a;--bad:#ff7a6b;--rare:#6fb8ff;--epic:#d48cff;--gold:#ffd257;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);font-family:Segoe UI,system-ui,-apple-system,Roboto,Arial,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--txt);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none;margin:0;overflow:hidden}#c{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}.screen{padding:max(12px, var(--sat)) max(12px, var(--sar)) max(12px, var(--sab)) max(12px, var(--sal));z-index:20;touch-action:pan-y;background:radial-gradient(#04101a1a,#04101a99);justify-content:center;align-items:center;display:none;position:fixed;inset:0;overflow:auto}.screen.clear{background:linear-gradient(90deg,#04101ab8,#04101a00 60%);justify-content:flex-start}.screen.clear.right{background:linear-gradient(270deg,#04101ac7,#04101a00 65%);justify-content:flex-end}.screen.dim{z-index:30;background:#030c149e}.screen.show{display:flex}#loading{z-index:50;background:radial-gradient(#0f3d58,#04121c);flex-direction:column;gap:14px}#loading .bar{background:#ffffff1a;border-radius:3px;width:min(320px,70vw);height:6px;overflow:hidden}#loading .bar i{background:var(--sea);width:0;height:100%;transition:width .25s;display:block}.logo{letter-spacing:7px;color:#fff;text-shadow:0 3px #0d4a6a,0 0 22px #3fb6d88c;text-align:center;font-size:46px;font-weight:900;line-height:1}.logo small{letter-spacing:.9em;color:var(--sand);text-shadow:0 2px #6a4a10;margin-top:6px;padding-left:.9em;font-size:.42em;display:block}.logo.big{font-size:clamp(42px,8vw,66px)}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;max-width:100%;margin:auto;padding:18px 20px;box-shadow:0 20px 60px #00000080}.screen.clear .panel,.screen.clear.right .panel{margin:0}.panel.menu{text-align:center;width:400px}.panel.small{width:420px}.panel.wide{width:860px}.panel.luka{flex-direction:column;width:500px;max-height:calc(100vh - 24px);display:flex}.panel h2{letter-spacing:1.5px;text-transform:uppercase;margin:0 0 8px;font-size:20px}.tag{color:var(--muted);margin:6px 0 12px}.who,.saveline{min-height:20px;color:var(--muted);margin-bottom:10px;font-size:14px}.saveline b{color:var(--sand)}.col{flex-direction:column;gap:10px;display:flex}.row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;display:flex}.btn{appearance:none;border:1px solid var(--line);color:var(--txt);font:inherit;cursor:pointer;letter-spacing:.3px;touch-action:manipulation;background:#ffffff12;border-radius:10px;padding:10px 16px;font-weight:700}.btn:hover{background:#ffffff21}.btn:disabled{opacity:.4;cursor:default}.btn.primary{color:#fff;background:linear-gradient(#45c3e6,#1b7fb0);border-color:#8fdcf2}.btn.gold{color:#2a1800;background:linear-gradient(#ffd56b,#d9962a);border-color:#ffe39a}.btn.big{padding:13px 18px;font-size:17px}.btn.small{padding:6px 10px;font-size:13px}.btn.ghost{background:0 0}.muted{color:var(--muted)}.small{font-size:13px}.err{color:var(--bad)}.head{justify-content:space-between;align-items:center;display:flex}.scroll{overflow:auto}.field{justify-content:space-between;align-items:center;gap:12px;margin:10px 0;display:flex}.field input,.field select{font:inherit;border:1px solid var(--line);color:var(--txt);background:#00000059;border-radius:8px;padding:8px 10px}.field input[type=range]{width:180px;padding:0}.help p{max-width:660px;margin:8px 0;line-height:1.45}.logo{letter-spacing:6px}.panel.center{text-align:center}.invite{border:1px dashed var(--sea);border-radius:10px;margin-top:12px;padding:10px}.lvl{text-align:left}.lvl b{font-size:17px;display:block}.lvl small{color:var(--muted);margin-top:2px;font-size:13px;font-weight:500;display:block}.join input{font:inherit;text-transform:uppercase;letter-spacing:4px;text-align:center;border:1px solid var(--line);width:120px;color:var(--txt);background:#00000059;border-radius:8px;padding:9px 10px;font-weight:800}.lobby-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.code{letter-spacing:6px;color:var(--sea);font-size:34px;font-weight:900}.players{margin:12px 0;padding:0;list-style:none}.players li{background:#ffffff0d;border-radius:8px;justify-content:space-between;margin:4px 0;padding:7px 10px;display:flex}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}#hud button,#hud #place{pointer-events:auto}#topbar{top:max(8px, var(--sat));left:max(8px, var(--sal));align-items:center;gap:6px;display:flex;position:absolute}#status{top:max(10px, var(--sat));border:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;text-align:center;background:#04121cb8;border-radius:12px;max-width:calc(100vw - 120px);padding:8px 16px;font-size:18px;font-weight:900;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}#status.mine{color:#ffd38a;border-color:#ffb36bb3;box-shadow:0 0 18px #ff964659}#status.theirs{color:#9fe6ff}.chip{border:1px solid var(--line);white-space:nowrap;background:#04121cb8;border-radius:10px;padding:6px 10px;font-size:14px;font-weight:700}.chip:empty{display:none}.ib{appearance:none;border:1px solid var(--line);color:var(--txt);font:inherit;cursor:pointer;background:#04121cb8;border-radius:10px;width:42px;height:38px;font-size:18px;font-weight:700}.ib.wide{width:auto;padding:0 12px;font-size:14px}#peek{right:max(10px, var(--sar));top:max(10px, var(--sat));appearance:none;font:inherit;color:var(--txt);border:1px solid var(--line);cursor:default;background:#04121cb3;border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:5px 6px 6px;display:flex;position:absolute}#peek.on{cursor:pointer;border-color:#ffc45cbf}#peek.on:hover{background:#0a2434d9}#peekLbl{letter-spacing:.4px;opacity:.85;font-size:11px;font-weight:800}#mini{width:112px;height:112px;display:block}#fleets{left:max(10px, var(--sal));bottom:max(10px, var(--sab));border:1px solid var(--line);background:#04121ca8;border-radius:12px;padding:8px 10px;position:absolute}.fleet{align-items:center;gap:8px;margin:3px 0;display:flex}.fleet .lbl{width:70px;color:var(--muted);font-size:12px;font-weight:700}.fleet>div{align-items:center;gap:4px;display:flex}.sh{gap:1px;display:inline-flex}.sh i{background:#a9b3bd;border-radius:2px;width:8px;height:8px}.sh.sunk i{opacity:.55;background:#ff6b4a}#shots{margin-top:4px}#place{width:-moz-fit-content;width:fit-content;left:0;right:0;bottom:max(10px, var(--sab));border:1px solid var(--line);background:#04121ccc;border-radius:14px;max-width:calc(100vw - 16px);margin:0 auto;padding:10px 12px;position:absolute}#place .row{margin-top:8px}#shipList{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.pick{appearance:none;font:inherit;color:var(--txt);border:1px solid var(--line);cursor:pointer;background:#ffffff0f;border-radius:10px;align-items:center;gap:6px;padding:6px 8px;font-size:12px;font-weight:700;display:flex}.pick.on{border-color:var(--sand);box-shadow:0 0 10px #ffb36b73}.pick .sh i{width:11px;height:11px}#toast{text-shadow:0 3px 10px #000c;opacity:0;white-space:nowrap;font-size:26px;font-weight:900;transition:opacity .3s;position:absolute;top:22%;left:50%;transform:translate(-50%)}#toast.show{opacity:1}#toast.good{color:#ffd38a}#toast.bad{color:#ff8a7a}.endText{color:var(--muted)}.stats{flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0;display:flex}.stats div{background:#ffffff12;border-radius:10px;min-width:84px;padding:8px 12px}.stats b{font-size:22px;display:block}.stats span{color:var(--muted);font-size:12px}#end h1{letter-spacing:3px;margin:4px 0;font-size:40px}#end h1.win{color:#ffd38a;text-shadow:0 0 24px #ffa05099}#end h1.lose{color:#9fb4c4}@media (max-width:600px),(max-height:520px){#mini{width:84px;height:84px}#peekLbl{font-size:10px}}@media (max-width:600px){#peek{top:calc(max(10px, var(--sat)) + 94px)}#status{top:calc(max(10px, var(--sat)) + 46px);max-width:calc(100vw - 20px);font-size:15px}#toast{font-size:20px}.fleet .lbl{width:56px}.pick{padding:5px 6px}}@media (orientation:landscape) and (max-height:520px){#place{left:auto;right:max(8px, var(--sar));top:max(8px, var(--sat));bottom:max(8px, var(--sab));flex-direction:column;justify-content:center;width:214px;margin:0;padding:8px;display:flex;overflow-y:auto}#shipList{flex-direction:column;align-items:stretch;gap:5px}#place .row{grid-template-columns:1fr 1fr;gap:5px;display:grid}#place .row #rotate,#place .row #ready{grid-column:1/-1}#place .btn{margin:0;padding:8px 6px;font-size:14px}#status{padding:6px 12px;font-size:15px}}@media (pointer:coarse) and (min-width:601px){body.embedded #peek{right:calc(max(10px, var(--sar)) + 50px)}}