
.zaruba-home{--home-paper:#fffaf0;--home-ink:#194a83;--home-muted:#60758d;--home-line:#81add329;--home-button:#214f86;position:relative;isolation:isolate;overflow-x:clip;min-height:100svh;padding:42px max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;background:transparent;color:var(--home-ink)}
[data-skin="ocean"] .zaruba-home{--home-paper:#082436;--home-ink:#d8eee9;--home-muted:#9ab6c4;--home-line:#66b9cb12;--home-button:#22647a}
[data-skin="ink-fleet"] .zaruba-home{--home-ink:#30247c;--home-button:#382977;--home-line:#777ecb24}
[data-skin="illustrated-fleet"] .zaruba-home{--home-paper:#faf5e9;--home-ink:#284f78;--home-button:#305d84}
.home-center{position:relative;z-index:1;width:min(620px,100%);text-align:center}
.home-brand>div{display:flex;align-items:center;justify-content:center;gap:13px;letter-spacing:.13em;font-size:24px}.home-anchor{display:grid;place-items:center;width:43px;height:43px;border:2px solid currentColor;border-radius:50%;font-size:28px}.home-brand p{margin:11px 0 0;font-size:11px;letter-spacing:.24em;font-weight:700}
.home-radar{display:block;width:clamp(200px,23vw,266px);height:auto;margin:27px auto 21px;filter:drop-shadow(3px 5px 0 #183e6a22)}.radar-frame{fill:var(--home-paper);stroke:var(--home-ink);stroke-width:2}.radar-grid{opacity:.42;stroke-width:1}.radar-sweep{transform-origin:150px 150px;animation:home-sweep 7s linear infinite}.radar-blips{filter:drop-shadow(0 0 4px #76fff0);animation:home-blips 3s ease-in-out infinite}.radar-blips circle:nth-child(2n){opacity:.65}
@keyframes home-sweep{to{transform:rotate(360deg)}}@keyframes home-blips{50%{opacity:.55}}
.zaruba-home #home-title{font-family:ZarubaHand,"Comic Sans MS","Segoe Print","Bradley Hand",cursive;font-size:clamp(34px,4.6vw,64px);line-height:1.12;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--home-ink)}.zaruba-home #home-title em{font-style:normal}.home-underline{width:240px;height:13px;display:block;margin:13px auto 18px;transform:rotate(-1deg)}.home-description{font-size:15px;line-height:1.6;color:var(--home-muted);margin:0 auto 22px;max-width:490px}
.zaruba-home .home-actions{display:block;width:min(540px,100%);margin:0 auto;padding:0;background:none;border:0;box-shadow:none}.home-actions button{display:flex;align-items:center;justify-content:center;gap:11px;min-height:60px;font-size:18px;font-weight:700;border-radius:7px 10px 8px 5px;border:2px solid var(--home-button);box-shadow:3px 4px 0 #163d6920;transition:transform .15s,filter .15s}.home-actions svg{width:21px;height:21px;flex-shrink:0}.zaruba-home .home-create{width:100%;background:var(--home-button);color:#fff;height:62px}.home-create:hover,.home-join button:hover{filter:brightness(1.13);transform:translateY(-1px)}.home-actions button:active{transform:translateY(1px)}.home-or{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--home-muted);font-size:13px;margin:15px 0}.home-or span{height:1px;width:37px;background:currentColor;opacity:.5}.home-join{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}.zaruba-home .home-join input{height:58px;min-width:0;width:100%;text-align:center;letter-spacing:.2em;font-size:19px;border:2px solid var(--home-ink);border-radius:7px 4px 9px 6px;background:var(--home-paper);color:var(--home-ink);box-shadow:2px 3px 0 #163d6917}.home-join input::placeholder{color:var(--home-muted);opacity:.8}.zaruba-home .home-join button{height:58px;min-height:58px;background:var(--home-paper);color:var(--home-ink);border-color:var(--home-ink);font-size:15px;padding:0 10px}
.home-settings{position:fixed;right:max(28px,env(safe-area-inset-right));top:max(25px,env(safe-area-inset-top));z-index:15}.zaruba-home #home-settings-toggle{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--home-ink);border-radius:12px 8px 10px 7px;background:var(--home-paper);color:var(--home-ink);box-shadow:3px 3px 0 #163d691c}.home-settings svg{width:21px;height:21px;flex-shrink:0}.home-settings #home-settings-toggle svg{width:30px;height:30px}.home-settings button:hover,.home-settings a:hover{filter:brightness(1.1);background:color-mix(in srgb,var(--home-ink) 10%,var(--home-paper))!important}.home-settings button:active{transform:translateY(1px)}
#home-settings-panel{position:absolute;top:65px;right:0;width:280px;max-height:calc(100svh - 102px);overflow:auto;padding:14px 10px;background:var(--home-paper);color:var(--home-ink);border:2px solid var(--home-ink);border-radius:7px 4px 10px 6px;box-shadow:5px 7px 0 #153e6a18,0 12px 35px #06162420}#home-settings-panel[hidden]{display:none}.settings-caption{font-size:10px;letter-spacing:.2em;padding:0 12px;margin:3px 0 10px;color:var(--home-muted)}.zaruba-home #home-settings-panel button,.zaruba-home #home-settings-panel a{display:flex;align-items:center;gap:12px;width:100%;min-height:45px;border:0!important;box-shadow:none!important;padding:9px 12px;margin:0;border-radius:4px;background:transparent;color:inherit;text-decoration:none;font-size:15px;text-align:left;font-weight:600;white-space:normal}.zaruba-home #home-settings-panel em{font-style:normal;display:inline;min-width:0;overflow-wrap:anywhere}.home-settings button>span:last-child{margin-left:auto;font-size:22px}#home-settings-panel hr{border:0;border-top:1px solid var(--home-ink);opacity:.2;margin:9px 10px}.zaruba-home #home-settings-panel #home-logout{color:#b94048}.zaruba-home #home-settings-panel #profile-open{font-weight:800}
.zaruba-home button:focus-visible,.zaruba-home a:focus-visible,.home-join input:focus-visible{outline:3px solid #dc9a44;outline-offset:4px}
.home-footer{position:relative;z-index:1;margin-top:auto;padding-top:24px;text-align:center;color:var(--home-muted);font-size:11px;line-height:1.7;letter-spacing:.03em}.home-footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:inherit;text-decoration:none;padding:0 4px}.home-footer a:hover{text-decoration:underline}.home-footer .home-version{white-space:nowrap}
.home-decoration{position:absolute;bottom:60px;width:min(33vw,620px);max-width:max(100px,calc((100vw - 580px)/2 + 1.5vw));pointer-events:none;user-select:none;z-index:0;opacity:.78}.home-decoration img{width:100%;height:auto;display:block}.home-decoration-left{left:-1.5vw}.home-decoration-right{right:-1.5vw}[data-skin="ocean"] .home-decoration{filter:brightness(1.7) saturate(.55);opacity:.65}
#home-about-dialog{width:min(430px,calc(100vw - 36px));padding:26px;color:var(--home-ink);background:var(--home-paper);border:2px solid var(--home-ink);border-radius:10px;line-height:1.6}#home-about-dialog::backdrop{background:#061521a0}#home-about-close{padding:12px 20px;color:white;background:var(--home-button);border-radius:6px}

.home-anchor .home-icon{width:24px;height:24px}.home-settings .home-chevron svg{width:9px;height:14px}.home-icon{display:inline-block;vertical-align:middle;flex-shrink:0}.home-footer{max-width:100%;white-space:normal}.home-brand{width:max-content;max-width:100%;margin:auto}.home-brand p{font-size:clamp(8px,.8vw,11px)}
@media(max-width:1100px){.home-decoration{width:26vw;opacity:.55}.zaruba-home{padding-top:max(28px,env(safe-area-inset-top))}.home-radar{width:220px;margin:20px auto 15px}.home-settings{right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top))}}
@media(max-width:650px){.zaruba-home{padding-top:max(24px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}.home-brand{margin-left:0;padding-right:0}.home-brand>div{font-size:clamp(14px,4.1vw,18px);gap:8px;letter-spacing:.08em}.home-anchor{width:30px;height:30px}.home-anchor .home-icon{width:20px;height:20px}.home-brand p{margin-top:7px;letter-spacing:.16em}.zaruba-home #home-settings-toggle{width:44px;height:44px}.home-settings #home-settings-toggle svg{width:24px;height:24px}.home-settings{right:max(12px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top))}#home-settings-panel{top:54px;width:min(280px,calc(100vw - 24px));max-height:calc(100svh - 86px - env(safe-area-inset-bottom))}.home-radar{width:180px;margin:20px auto 15px}.zaruba-home #home-title{font-size:clamp(34px,10.5vw,44px);line-height:1.08}.home-underline{width:190px;margin:10px auto 13px}.home-description{font-size:13px;line-height:1.45;margin-bottom:16px;max-width:320px}.zaruba-home .home-create{height:54px;min-height:54px;font-size:17px}.home-or{margin:10px 0}.home-join{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}.zaruba-home .home-join input,.zaruba-home .home-join button{height:52px;min-height:52px}.zaruba-home .home-join button{font-size:13px;gap:7px;padding:0 7px}.home-join .home-icon{width:18px;height:18px}.home-decoration{display:none}.home-footer{padding-top:16px;font-size:10px;letter-spacing:0}}
@media(max-height:800px) and (min-width:651px){.zaruba-home{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.home-brand>div{font-size:21px}.home-anchor{width:35px;height:35px}.home-brand p{margin-top:7px}.home-radar{width:174px;margin:14px auto 10px}.zaruba-home #home-title{font-size:50px;line-height:1.05}.home-underline{margin:8px auto 11px}.home-description{margin-bottom:14px;font-size:14px}.zaruba-home .home-create{height:54px;min-height:54px}.home-or{margin:10px 0}.zaruba-home .home-join input,.zaruba-home .home-join button{height:52px;min-height:52px}.home-footer{padding-top:12px}.home-decoration{width:27vw;bottom:48px}}
@media(max-height:700px) and (max-width:650px){.zaruba-home{padding-top:max(16px,env(safe-area-inset-top))}.home-radar{width:130px;margin:12px auto 8px}.zaruba-home #home-title{font-size:36px}.home-underline{margin:5px auto 8px;height:10px}.home-description{font-size:12px;margin-bottom:10px}.home-or{margin:7px 0}.zaruba-home .home-create,.zaruba-home .home-join input,.zaruba-home .home-join button{height:48px;min-height:48px}.home-footer{padding-top:8px}}
@media(max-height:600px) and (max-width:650px){.home-radar{width:105px;margin:8px auto 6px}.zaruba-home #home-title{font-size:34px}.home-description{max-width:270px}.home-join{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-height:500px) and (min-width:651px){.zaruba-home{padding-top:max(16px,env(safe-area-inset-top))}.home-center{display:grid;grid-template-columns:190px minmax(0,390px);grid-template-rows:auto auto 1fr;column-gap:30px;width:min(610px,calc(100% - 100px))}.home-brand{grid-column:1;grid-row:1;margin:auto}.home-brand>div{font-size:14px;gap:6px;letter-spacing:.06em}.home-anchor{width:26px;height:26px}.home-anchor .home-icon{width:18px;height:18px}.home-brand p{font-size:8px}.home-radar{grid-column:1;grid-row:2 / 4;width:168px;margin:18px auto 0}.zaruba-home #home-title{grid-column:2;grid-row:1;font-size:34px;line-height:1}.home-underline{display:none}.home-description{grid-column:2;grid-row:2;font-size:12px;line-height:1.3;margin:10px 0}.home-actions{grid-column:2;grid-row:3}.zaruba-home .home-create,.zaruba-home .home-join input,.zaruba-home .home-join button{height:48px;min-height:48px;font-size:14px}.home-or{margin:6px 0}.home-decoration{display:none}.home-footer{padding-top:4px}.home-settings{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}#home-settings-panel{top:58px;max-height:calc(100svh - 86px - env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.radar-sweep,.radar-blips{animation:none}.home-actions button,.home-settings button{transition:none}}

/* Бічна композиція authoritative lobby reference; waiting scene незмінна. */
@media(min-width:651px){
 html[data-skin="illustrated-fleet"] body:has(.zaruba-home) .illustrated-fleet-scene .home-decoration{width:min(43vw,620px);max-width:calc((100vw - 680px)/2 + 130px);bottom:2%;opacity:.72}
 html[data-skin="illustrated-fleet"] body:has(.zaruba-home) .fleet-connecting-sea{bottom:0;height:160px;opacity:.72;filter:hue-rotate(14deg) saturate(2) brightness(.9);mask-image:none;-webkit-mask-image:none}
}
