/* Композиція lobby reference; палітра та artwork залишаються у skin. */
.home-path-heading{display:none}
html[data-skin="illustrated-fleet"] body .zaruba-home{padding:30px 24px 40px;min-height:100dvh;height:auto;display:block;overflow:clip}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-center{position:relative;display:flex;flex-direction:column;gap:0;width:min(740px,100%);max-height:none;margin:auto;isolation:isolate}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-brand{margin:0 auto 34px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-brand p{display:block}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-radar{display:block;position:absolute;z-index:-1;pointer-events:none;left:-150px;top:70px;width:550px;max-width:none;height:auto;margin:0;opacity:1}
html[data-skin="illustrated-fleet"] body .zaruba-home #home-title{font-size:clamp(50px,7vw,83px);line-height:1.2;margin:0}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-underline{display:none;margin:0;width:300px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-description{display:block;max-width:100%;margin:0 auto 16px;font-size:25px;line-height:1.25}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-live-status{display:flex;margin:0 auto 18px;padding:9px 18px;font-size:22px;gap:8px 22px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 42px;width:100%;margin:0;padding:0;position:relative}
html[data-skin="illustrated-fleet"] body .zaruba-home :is(.mode-selector,.opponent-selector,.bot-difficulty){grid-column:1/-1;margin:0;padding:0;text-align:left;min-width:0}
html[data-skin="illustrated-fleet"] body .zaruba-home fieldset legend{font-size:25px;line-height:1.15;margin-bottom:8px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-join.mode-options{gap:18px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-join.mode-options button{height:64px;min-height:64px;font-size:25px;white-space:normal}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-path-heading{display:block;font:600 28px/1.1 var(--ui-heading-font);margin:10px 0 0;text-align:left}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-create-heading{grid-column:1;grid-row:4}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-join-heading{grid-column:2;grid-row:4}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-create{grid-column:1;grid-row:5;height:60px;min-height:60px;font-size:27px}
html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path{grid-column:2;grid-row:5/7;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:60px 60px;gap:12px;position:relative}
html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path :is(button,input){min-height:60px;height:60px;font-size:25px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions>[data-social-action="invite"]{grid-column:1;grid-row:6;width:100%;min-height:60px;font-size:24px}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions>[data-social-action="continue"]{grid-column:1/-1;grid-row:7}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-or{display:none}
html[data-skin="illustrated-fleet"] body .zaruba-home [hidden]{display:none!important}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions:has(.bot-difficulty:not([hidden])) .home-create-heading{grid-row:4}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions:has(.bot-difficulty:not([hidden])) .home-create{grid-column:1/-1}
html[data-skin="illustrated-fleet"] body.compact-app #app:has(.zaruba-home){height:auto;min-height:100dvh;overflow:visible}
html[data-skin="illustrated-fleet"] body.compact-app:has(.zaruba-home){height:auto;overflow-y:auto}
@media(max-height:800px){
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-brand{margin-bottom:16px}
 html[data-skin="illustrated-fleet"] body .zaruba-home #home-title{font-size:48px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-description{font-size:22px;margin-bottom:10px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions{gap:8px 28px}
}
@media(max-width:650px){
 html[data-skin="illustrated-fleet"] body .zaruba-home{padding:60px 18px 24px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-brand{margin-bottom:16px}
 html[data-skin="illustrated-fleet"] body .zaruba-home #home-title{font-size:39px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-radar{width:390px;left:-110px;top:80px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-description{font-size:19px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-live-status{font-size:16px;padding:6px;gap:4px 10px;margin-bottom:12px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions{gap:8px 18px}
 html[data-skin="illustrated-fleet"] body .zaruba-home fieldset legend{font-size:21px;margin-bottom:5px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-join.mode-options{gap:10px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-join.mode-options button{font-size:20px;height:56px;min-height:56px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-path-heading{font-size:21px;margin-top:6px}
 html[data-skin="illustrated-fleet"] body .zaruba-home :is(.home-create,.home-actions>[data-social-action="invite"]){font-size:19px;min-height:58px;height:auto;padding:6px 10px;white-space:normal}
 html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path{grid-template-rows:58px 58px;gap:8px}
 html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path :is(input,button){font-size:19px;min-height:58px;height:58px;padding:6px}
 html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path input{font-size:16px;letter-spacing:.04em}
}

/* Навігація fixed: brand стоїть між її controls, як у референсі. */
@media(min-width:651px){html[data-skin="illustrated-fleet"] body #app:has(.zaruba-home){padding-top:0}html[data-skin="illustrated-fleet"] body .zaruba-home{min-height:calc(100dvh - 48px)}}

/* Вузькі controls зберігають цілі слова та однаковий ритм двох action-зон. */
html[data-skin="illustrated-fleet"] body .zaruba-home .home-join.opponent-options{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:650px){
 html[data-skin="illustrated-fleet"] body .zaruba-home .mode-selector .mode-options button{height:76px;min-height:76px;font-size:18px;line-height:1.05;justify-content:center;padding:6px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-create{--ink-action-padding:24px}
 html[data-skin="illustrated-fleet"] body .zaruba-home :is(.home-create,.home-actions>[data-social-action="invite"]){height:76px;min-height:76px;font-size:18px;line-height:1.1;overflow-wrap:normal}
 html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path{grid-template-rows:76px 76px}
 html[data-skin="illustrated-fleet"] body .zaruba-home #entry .home-join-path :is(input,button){height:76px;min-height:76px;--ink-action-padding:22px}
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-underline{max-width:100%}
}

/* Назви режимів ближче до центральної лінії кнопки. */
html[data-skin="illustrated-fleet"] body .zaruba-home .mode-selector .mode-name{position:relative;top:-4px}

/* Галочка не торкається мальованої рамки controls. */
html[data-skin="illustrated-fleet"] body .zaruba-home .mode-options .mode-check{top:7px;right:10px}

/* Розділювач двох action-зон, як у затвердженому референсі. */
html[data-skin="illustrated-fleet"] body .zaruba-home .home-or{
 display:flex;position:absolute;left:50%;bottom:0;transform:translateX(-50%);
 flex-direction:column;justify-content:center;gap:7px;height:170px;margin:0;
 font:500 25px/1 var(--ui-body-font);pointer-events:none;
}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-or span{
 display:block;width:9px;flex:1;min-height:18px;transform:rotate(1deg);
}
@media(max-width:650px){
 html[data-skin="illustrated-fleet"] body .zaruba-home .home-or{height:190px;font-size:16px;gap:5px}
}

/* Іконки створення та приєднання стоять поруч із написами. */
html[data-skin="illustrated-fleet"] body .zaruba-home #entry :is(.home-create,.home-join-path button){gap:6px}
html[data-skin="illustrated-fleet"] body .zaruba-home #entry :is(.home-create,.home-join-path button)>.ui-icon{position:static;transform:none;margin:0}

/* Приглушуємо лише основу радара; цілі зберігають власну яскравість. */
html[data-skin="illustrated-fleet"] body .zaruba-home .home-radar>:not(.ink-radar-contacts){opacity:var(--lobby-radar-opacity)!important}

/* Рукописна підказка під запрошенням, як у візуальному референсі. */
.home-invite-hint{display:none}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint{grid-column:1;grid-row:7;display:flex;align-items:center;justify-content:center;gap:5px;margin:-4px 0 0;font:500 clamp(14px,2vw,19px)/1.2 var(--ui-body-font);color:var(--ink-color);pointer-events:none}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint::before,
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint::after{content:"";width:34px;height:30px;flex-shrink:0;align-self:flex-end;transform:translateY(-4px)}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint::after{transform:translateY(-4px) scaleX(-1) rotate(-5deg)}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions>[data-social-action="continue"]{grid-row:8}
html[data-skin="illustrated-fleet"] body .zaruba-home .home-actions:has(.home-invite-hint:not([hidden])) .home-or{bottom:35px}

/* Bot: одна послідовність складність → старт, без порожніх friend-колонок. */
html[data-skin="illustrated-fleet"] body .zaruba-home .bot-difficulty:not([hidden]){grid-row:4;margin-top:8px}
html[data-skin="illustrated-fleet"] body .zaruba-home #entry .difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-skin="illustrated-fleet"] body .zaruba-home .difficulty-options button{min-width:0}
html[data-skin="illustrated-fleet"] body .zaruba-home .difficulty-options .choice-content{padding:0 10px}
@media(max-width:430px){html[data-skin="illustrated-fleet"] body .zaruba-home #entry .difficulty-options{grid-template-columns:1fr}}

/* Social CTA другорядна за висотою, без зміни сітки create/join. */
html[data-skin="illustrated-fleet"] body .zaruba-home #entry>[data-social-action="invite"]{height:55px;min-height:55px;align-self:start}
@media(max-width:650px){html[data-skin="illustrated-fleet"] body .zaruba-home #entry>[data-social-action="invite"]{height:70px;min-height:70px}}