/* diz.png visual language. Only illustrated-fleet owns these tokens and rules. */
[data-skin="illustrated-fleet"]{--ui-heading-font:ZarubaHand,"Segoe Print",cursive;--ui-body-font:ZarubaHand,"Segoe Print",cursive;--ui-text:#203878;--ui-ink:#203878;--ui-border:#29468e;--ui-muted:#506493;--ui-accent:#24469b;--ui-paper:#fffaf0;--ui-panel-bg:#fffaf0;--ui-input-bg:#fffcf3;--ui-button-bg:#fffaf0;--ui-button-text:#203878;--ui-shadow:2px 3px 0 #29468e24;--ui-radius:3px 6px 4px 5px;--ui-line:double;--art-grid:#a4c9ea28}
[data-skin="illustrated-fleet"] body{font-family:var(--ui-body-font);color:var(--ui-text)}
[data-skin="illustrated-fleet"] :is(.game,.zaruba-home,.account-shell,#global-dialogs,#app-chrome,#app-brand-footer){font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog,.account-shell) :is(h1,h2,h3,label,button,input,select,p,small,th,td,dt,dd){font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog){background:var(--ui-panel-bg);color:var(--ui-text);border:3px double var(--ui-border);border-radius:var(--ui-radius);outline:1px solid #29468e70;outline-offset:-7px;box-shadow:var(--ui-shadow);font-size:21px}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog) :is(h2,h3){font-size:clamp(28px,3vw,36px);line-height:1.15;color:var(--ui-text)}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog,.account-shell) :is(input,select){font-size:22px;min-height:48px;padding:8px 12px;background:var(--ui-input-bg);color:var(--ui-text);border:2px solid var(--ui-border);border-radius:var(--ui-radius)}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog,.account-shell) button{font-family:var(--ui-body-font);font-size:22px;min-height:44px;background:var(--ui-paper);color:var(--ui-text);border:3px double var(--ui-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
[data-skin="illustrated-fleet"] :is(.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog,.account-shell) :is(button,input,select):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
[data-skin="illustrated-fleet"] #global-settings-panel{width:min(285px,calc(100vw - 24px));padding:10px 15px;background:var(--ui-paper);border:0;border-radius:2px;outline:1px solid var(--ui-border);outline-offset:-4px;box-shadow:3px 5px 0 #29468e30;border-image:none}
[data-skin="illustrated-fleet"] #global-settings-panel::before{content:"";position:absolute;inset:0;pointer-events:none;border:3px solid transparent;border-image:url('../../assets/lobby/ink-frame.svg') 10 stretch}
[data-skin="illustrated-fleet"] #app-chrome :is(button,a){font-family:var(--ui-body-font);font-size:23px;font-weight:600;line-height:1.2;color:var(--ui-text)}
[data-skin="illustrated-fleet"] #global-settings-panel :is(button,a){min-height:45px;padding:8px 6px}
[data-skin="illustrated-fleet"] #global-settings-panel hr{border:0;height:3px;opacity:.5;background:url('../../assets/lobby/underline.svg') center/100% 100% no-repeat;margin:6px 0}
[data-skin="illustrated-fleet"] #global-settings-panel svg{width:21px;height:21px}
[data-skin="illustrated-fleet"] #global-settings-panel .global-language{font-size:23px;padding:6px;gap:6px}
[data-skin="illustrated-fleet"] #global-settings-panel .locale-selector{font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] #global-settings-panel :is(.locale-short,.global-country-code){font-size:19px}
[data-skin="illustrated-fleet"] #global-back,[data-skin="illustrated-fleet"] .room-navbar #global-back{font:600 23px/1.2 var(--ui-body-font);background:transparent;border:0;box-shadow:none;color:var(--ui-text)}
[data-skin="illustrated-fleet"] .with-room-navbar .game>header.room-navbar{border-bottom:0}
[data-skin="illustrated-fleet"] .room-navbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:url('../../assets/lobby/underline.svg') center/100% 100% no-repeat;pointer-events:none}
[data-skin="illustrated-fleet"] .with-room-navbar .game>header.room-navbar :is(.brand,.room,.room b,.room-player){font:600 23px/1.15 var(--ui-body-font);letter-spacing:.02em;color:var(--ui-text)}
[data-skin="illustrated-fleet"] .room-navbar .room>span{font-size:17px}
[data-skin="illustrated-fleet"] .room-navbar .logo{background:transparent;color:var(--ui-text);border-color:var(--ui-border)}
[data-skin="illustrated-fleet"] .game{position:relative;isolation:isolate}
[data-skin="illustrated-fleet"] .turn-banner{position:relative;z-index:1;background:var(--ui-paper);color:var(--ui-text);border:0;border-radius:0;box-shadow:none;min-height:66px;margin:16px auto 0;padding:14px 24px;width:min(900px,calc(100% - 48px))}
[data-skin="illustrated-fleet"] .turn-banner::before{content:"";position:absolute;inset:0;pointer-events:none;border:9px solid transparent;border-image:url('../../assets/lobby/ink-frame.svg') 10 stretch}
[data-skin="illustrated-fleet"] .turn-banner b{font:600 clamp(25px,2.8vw,34px)/1.15 var(--ui-heading-font)}
[data-skin="illustrated-fleet"] .waiting{position:relative;z-index:1;padding:12px 20px 170px}
[data-skin="illustrated-fleet"] .waiting .sonar{width:175px;margin:20px auto 10px;background:repeating-radial-gradient(circle,transparent 0 23px,#29468e50 24px 25px);border:3px double var(--ui-border);border-radius:49% 51% 48% 50%;outline:1px solid #29468e80;outline-offset:5px}
[data-skin="illustrated-fleet"] .waiting .sonar::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49.6%,#29468e80 50%,transparent 50.5%),linear-gradient(90deg,transparent 49.6%,#29468e80 50%,transparent 50.5%);pointer-events:none}
[data-skin="illustrated-fleet"] .waiting .sonar b{font-size:40px;color:var(--ui-text)}
[data-skin="illustrated-fleet"] .waiting h2{font:600 clamp(33px,3.6vw,46px)/1.1 var(--ui-heading-font);margin:22px 0 6px;color:var(--ui-text)}
[data-skin="illustrated-fleet"] .waiting h2::after{content:"";display:block;width:min(280px,70%);height:12px;margin:5px auto 10px;background:url('../../assets/lobby/brush-underline.svg') center/100% 100% no-repeat}
[data-skin="illustrated-fleet"] .waiting p{font:500 25px/1.25 var(--ui-body-font);color:var(--ui-text);margin:12px auto}
[data-skin="illustrated-fleet"] .waiting #invite{position:relative;font:600 27px/1.2 var(--ui-body-font);min-height:58px;min-width:min(370px,100%);max-width:100%;padding:10px 28px;background:var(--ui-paper);color:var(--ui-text);border:8px solid transparent;border-image:url('../../assets/lobby/ink-frame.svg') 10 stretch;box-shadow:2px 4px 0 #29468e24;transition:transform .15s}
[data-skin="illustrated-fleet"] .waiting #invite:hover{transform:translateY(-2px)}
[data-skin="illustrated-fleet"] .battle :is(.title h2,.title p,.hint,.fleet-help,#shuffle,#ready){font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] .battle .title h2{font-size:30px}
[data-skin="illustrated-fleet"] .battle :is(.hint,.fleet-help,#shuffle){font-size:20px}
[data-skin="illustrated-fleet"] #ready{font-size:26px}
[data-skin="illustrated-fleet"] #app-brand-footer .global-footer{font:500 18px/1.4 var(--ui-body-font);color:var(--ui-muted)}
[data-skin="illustrated-fleet"] #result-modal .result-dialog{width:min(760px,100%);padding:16px 22px 12px;font-family:var(--ui-body-font);background:var(--ui-paper);border:8px solid transparent;border-image:var(--frame-style) 12 stretch;color:var(--ui-text);box-shadow:5px 8px 0 #29468e24}
[data-skin="illustrated-fleet"] #result-modal :is(h2,p,button,dt,dd){font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] #result-modal h2{font-size:clamp(44px,6vw,64px);line-height:.95;margin-bottom:6px}
[data-skin="illustrated-fleet"] #result-modal p{font-size:24px}
[data-skin="illustrated-fleet"] #result-modal button{font-size:26px;min-height:58px}
[data-skin="illustrated-fleet"] #result-modal :is(.result-badges>.mode-badge,.result-progression,.result-stats,.earned-item){position:relative;background:var(--ui-paper);border:7px solid transparent;border-image:var(--frame-style) 12 stretch;border-radius:0;box-shadow:var(--ink-shadow)}
[data-skin="illustrated-fleet"] #result-modal .result-badges{margin-bottom:7px;gap:6px}
[data-skin="illustrated-fleet"] #result-modal .result-badges>.mode-badge{font-size:20px;min-height:38px;padding:4px 12px}
[data-skin="illustrated-fleet"] #result-modal .result-players{font-size:28px;margin-bottom:4px}
[data-skin="illustrated-fleet"] #result-modal #result-description{font-size:26px;line-height:1.25;margin-bottom:8px}
[data-skin="illustrated-fleet"] #result-modal .result-progression{padding:9px 13px 7px;gap:5px 12px}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong{font:700 36px/1 var(--ui-heading-font)}
[data-skin="illustrated-fleet"] #result-modal .result-rank{font-size:25px}
[data-skin="illustrated-fleet"] #result-modal .result-xp-transition{font-size:16px}
[data-skin="illustrated-fleet"] #result-modal .result-xp-transition i{height:9px;border:1px solid #29468e55}
[data-skin="illustrated-fleet"] #result-modal .result-duration{font-size:20px}
[data-skin="illustrated-fleet"] #result-modal .result-duration time{font-size:27px;font-weight:700}
[data-skin="illustrated-fleet"] #result-modal .earned-group>b{font-size:19px}
[data-skin="illustrated-fleet"] #result-modal .result-earned{gap:2px}
[data-skin="illustrated-fleet"] #result-modal .earned-group{gap:1px}
[data-skin="illustrated-fleet"] #result-modal .earned-item{min-height:34px;padding:3px 10px;font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .result-progression details{font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .result-progression summary{font-size:20px;cursor:pointer}
[data-skin="illustrated-fleet"] #result-modal .result-stats{padding:8px 12px 7px;margin-top:7px}
[data-skin="illustrated-fleet"] #result-modal .result-stats h3{font-size:34px;margin-bottom:4px}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div{padding:0 4px;border-left:1px solid #29446b25}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:first-child{border-left:0}
[data-skin="illustrated-fleet"] #result-modal .result-actions{gap:7px 10px;margin-top:8px}
[data-skin="illustrated-fleet"] #result-modal .result-actions>button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:62px;padding:5px 16px;font:600 28px/1.05 var(--ui-body-font);background-color:var(--paper-bg);background-image:var(--ink-button-hatch),var(--ink-button-wash);background-size:40px 13px,cover;background-position:left bottom,center;background-repeat:repeat-x,no-repeat;border:8px solid transparent;border-image:var(--ink-button-frame) 22 30 30 22 / 12px 17px 17px 12px / 0 6px 6px 0 stretch;border-radius:0;color:var(--ink-button-pen);box-shadow:none}
[data-skin="illustrated-fleet"] #result-modal .result-actions>button :is(.ui-icon){width:20px!important;height:20px!important;min-width:20px;flex:0 0 20px}
[data-skin="illustrated-fleet"] #result-modal #result-close.result-secondary{font-size:21px;min-height:34px;margin-top:2px;padding:2px 10px;border:0;border-image:none;box-shadow:none;background:transparent}
/* One reusable decorative scene. No background grid or margin in this layer. */
@media(max-width:800px){
 [data-skin="illustrated-fleet"] .with-room-navbar .game>header.room-navbar :is(.brand,.room,.room b,.room-player){font-size:19px}
 [data-skin="illustrated-fleet"] .room-navbar .room>span{font-size:14px}
 [data-skin="illustrated-fleet"] .turn-banner{width:calc(100% - 30px);padding:14px 18px}
 [data-skin="illustrated-fleet"] .waiting{padding:14px 16px 145px}
 [data-skin="illustrated-fleet"] .waiting .sonar{width:145px;margin-top:24px}
 [data-skin="illustrated-fleet"] .waiting p{font-size:23px}
 [data-skin="illustrated-fleet"] .waiting #invite{font-size:24px;min-width:0;width:100%;padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] .waiting #invite{transition:none}}
[data-skin="illustrated-fleet"] .room-navbar::after,[data-skin="illustrated-fleet"] #global-settings-panel hr{background-image:url('ink-rule.svg')}
[data-skin="illustrated-fleet"] .game-copy-glyph{display:inline-block;vertical-align:middle;width:22px;height:26px;font-size:0;background:url('copy-ink.svg') center/contain no-repeat}
[data-skin="illustrated-fleet"] .waiting .sonar b{font-size:0;width:42px;height:42px;background:var(--ui-text);mask:url('../../assets/home/fontawesome/anchor.svg') center/contain no-repeat;-webkit-mask:url('../../assets/home/fontawesome/anchor.svg') center/contain no-repeat}
[data-skin="illustrated-fleet"] .room-navbar .logo{font-size:0}
[data-skin="illustrated-fleet"] .room-navbar .logo::before{content:"";width:20px;height:22px;background:var(--ui-text);mask:url('../../assets/home/fontawesome/anchor.svg') center/contain no-repeat;-webkit-mask:url('../../assets/home/fontawesome/anchor.svg') center/contain no-repeat}
@media(min-height:950px) and (min-width:801px){
 [data-skin="illustrated-fleet"] .waiting{padding-top:48px}
 [data-skin="illustrated-fleet"] .waiting .sonar{width:260px;margin-top:30px}
 [data-skin="illustrated-fleet"] .waiting p{margin:18px auto}
}
[data-skin="illustrated-fleet"] .account-shell .login-intro{font-size:22px;line-height:1.35}
[data-skin="illustrated-fleet"] .account-shell #account-login label{font-size:21px}
[data-skin="illustrated-fleet"] .player-dialog .stats-grid span{background:var(--ui-paper);border:1px solid #29468e65;border-radius:var(--ui-radius);font:500 18px/1.2 var(--ui-body-font);padding:10px 6px;min-width:0}
[data-skin="illustrated-fleet"] .player-dialog .stats-grid b{font:700 28px/1.1 var(--ui-body-font)}
[data-skin="illustrated-fleet"] .player-dialog .profile-label{font-size:29px}
[data-skin="illustrated-fleet"] .player-dialog :is(.match-list article,.account-settings){border-color:#29468e60}
[data-skin="illustrated-fleet"] .player-dialog .match-list small{font-size:19px}
[data-skin="illustrated-fleet"] .leaderboard-tabs [aria-selected="true"]{background:#e9edf8;color:var(--ui-text);border-color:var(--ui-border);text-decoration:underline}
[data-skin="illustrated-fleet"] :is(.skin-card,.sound-pack-card){background:var(--ui-paper);color:var(--ui-text);border:3px double var(--ui-border);border-radius:var(--ui-radius);font-family:var(--ui-body-font)}
[data-skin="illustrated-fleet"] :is(.skin-card,.sound-pack-card) :is(strong,h3){font-size:25px}
[data-skin="illustrated-fleet"] :is(.skin-card,.sound-pack-card) :is(p,small){font:500 19px/1.25 var(--ui-body-font)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dt{font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .result-stats dd{font-size:27px}
@media(max-width:600px){
 [data-skin="illustrated-fleet"] #result-modal .result-dialog{padding:22px 18px}
 [data-skin="illustrated-fleet"] #result-modal h2{font-size:44px}
 [data-skin="illustrated-fleet"] #result-modal :is(.result-players,#result-description){font-size:21px}
 [data-skin="illustrated-fleet"] #result-modal .result-actions>button{min-height:64px;font-size:23px}
 [data-skin="illustrated-fleet"] #result-modal .result-stats dt{font-size:16px}
}
/* Account pages use the same one-sheet background as HOME and rooms in this skin. */
[data-skin="illustrated-fleet"] body.with-app-chrome{position:relative;min-height:100dvh;isolation:isolate}
[data-skin="illustrated-fleet"] body.with-app-chrome::before{position:absolute;top:0;bottom:0}
[data-skin="illustrated-fleet"] body.with-app-chrome::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.16;background:url('../../assets/lobby/paper-grain.svg') repeat}
[data-skin="illustrated-fleet"] .account-shell.account-lobby{background:transparent}
[data-skin="illustrated-fleet"] .account-shell.account-lobby::before,[data-skin="illustrated-fleet"] .account-shell.account-lobby::after{content:none}
[data-skin="illustrated-fleet"] #app-brand-footer.over-modal{background:transparent}
[data-skin="illustrated-fleet"] .account-shell .lobby-action small,[data-skin="illustrated-fleet"] .account-shell .lobby-top header p{font:500 21px/1.25 var(--ui-body-font)}
[data-skin="illustrated-fleet"] .account-shell .lobby-top-caption{font:600 18px/1.2 var(--ui-body-font)}
/* Reference-scale handwriting: the labels must carry visual weight, not look like captions. */
@media(min-width:801px){
 [data-skin="illustrated-fleet"] #global-settings-panel{width:320px}
 [data-skin="illustrated-fleet"] #app-chrome :is(button,a),[data-skin="illustrated-fleet"] #global-settings-panel .global-language{font-size:28px}
 [data-skin="illustrated-fleet"] #global-settings-panel :is(button,a){min-height:51px}
 [data-skin="illustrated-fleet"] .turn-banner b{font-size:40px}
 [data-skin="illustrated-fleet"] .waiting h2{font-size:56px}
 [data-skin="illustrated-fleet"] .waiting p{font-size:29px}
 [data-skin="illustrated-fleet"] .waiting #invite{font-size:32px;min-width:410px}
 [data-skin="illustrated-fleet"] .with-room-navbar .game>header.room-navbar :is(.brand,.room b,.room-player){font-size:26px}
}
/* Center the label in the whole control, independently of its leading icon. */
[data-skin="illustrated-fleet"] :is(.waiting #invite,.zaruba-home .home-create,.zaruba-home .home-join button,.account-shell .account-login-cta){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;text-align:center;padding-inline:var(--ink-action-padding,44px);overflow-wrap:anywhere}
[data-skin="illustrated-fleet"] :is(.waiting #invite,.zaruba-home .home-create,.zaruba-home .home-join button,.account-shell .account-login-cta)>:is(.game-copy-glyph,.ui-icon,.lobby-icon){position:absolute;left:var(--ink-action-icon-left,12px);top:50%;transform:translateY(-50%);width:var(--ink-action-icon-size,22px);height:var(--ink-action-icon-height,26px);margin:0;flex:none;pointer-events:none}
[data-skin="illustrated-fleet"] .zaruba-home .home-join button{--ink-action-padding:30px;--ink-action-icon-left:6px;--ink-action-icon-size:18px;--ink-action-icon-height:22px;height:auto;min-height:58px}

/* HOME reference frame: independent of differing screen content heights.
   Child .home-decoration rules remain owned solely by home/home.css. */
[data-skin="illustrated-fleet"] .illustrated-fleet-scene{position:fixed;inset:calc(64px + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom));z-index:0;pointer-events:none;user-select:none;overflow:hidden}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene :is(.lobby-air,.lobby-sea,.lobby-smoke-layer){position:absolute;inset:0;pointer-events:none}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene .lobby-air{overflow:hidden}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene .lobby-smoke-layer{z-index:1}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene :is(.lobby-smoke-svg,.lobby-flying-bird){position:absolute;overflow:visible;pointer-events:none}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene .lobby-flying-bird{left:0;top:0}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene :is(.lobby-ink-puff,.lobby-bird-wings){transform-origin:0 0}

/* Shared pen materials: presentation only; keep control sizing and scene geometry. */
[data-skin="illustrated-fleet"]{
 --ink-font:ZarubaHand,"Segoe Print",cursive;--ink-color:#203878;--paper-bg:#fffaf0;
 --ink-border:#29468e;--ink-shadow:2px 3px 0 #29468e20;--rough-line-opacity:.65;
 --frame-style:url('./pen-frame.svg');--button-hatch:repeating-linear-gradient(125deg,transparent 0 4px,#29468e18 4px 5px,transparent 5px 8px);
 --ui-heading-font:var(--ink-font);--ui-body-font:var(--ink-font);--ui-text:var(--ink-color);--ui-paper:var(--paper-bg);--ui-shadow:var(--ink-shadow)
}
[data-skin="illustrated-fleet"] :is(.home-actions button,.home-actions input,.account-shell input,.account-shell select,.account-shell .account-login-cta,.player-dialog,.skin-dialog,.sound-dialog,.result-dialog,.leave-dialog,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button,.player-dialog input){
 border-image-source:var(--frame-style);border-image-slice:12;border-image-width:8px;border-image-repeat:stretch;outline:0;box-shadow:var(--ink-shadow)
}
[data-skin="illustrated-fleet"] .waiting #invite::before,[data-skin="illustrated-fleet"] .turn-banner::before{border-image-source:var(--frame-style);border-image-slice:12;border-image-width:8px}
[data-skin="illustrated-fleet"] #global-settings-panel::before{border-image-source:var(--frame-style);border-image-slice:12;border-image-width:8px}
[data-skin="illustrated-fleet"] :is(.home-actions button,.account-login-cta){background-color:var(--paper-bg);background-image:var(--button-hatch);background-size:100% 5px;background-position:bottom;background-repeat:no-repeat;color:var(--ink-color)}
[data-skin="illustrated-fleet"] :is(.home-actions button,.account-login-cta):hover{background-color:#f7f4e9;color:var(--ink-color);box-shadow:2px 4px 0 #29468e35}
[data-skin="illustrated-fleet"] :is(.home-description,.home-brand p,.home-or,.home-actions input,.brand-footer){font-family:var(--ink-font)}
[data-skin="illustrated-fleet"] .home-description{font-size:clamp(21px,2vw,26px);line-height:1.15}
[data-skin="illustrated-fleet"] .home-or span{height:3px;background:url('../../assets/lobby/underline.svg') center/100% 100% no-repeat;border:0;opacity:var(--rough-line-opacity)}
[data-skin="illustrated-fleet"] .home-radar{color:var(--ink-color);filter:none;overflow:visible}
[data-skin="illustrated-fleet"] .home-radar>.radar-frame{fill:transparent;stroke:var(--ink-border);stroke-width:1;filter:none}
[data-skin="illustrated-fleet"] .home-radar>circle:nth-of-type(2){fill:var(--paper-bg);fill-opacity:.45;stroke:var(--ink-border);stroke-width:1}
[data-skin="illustrated-fleet"] .home-radar .radar-grid{stroke:var(--ink-border);opacity:.4}
[data-skin="illustrated-fleet"] .home-radar .radar-ink-detail{display:inline}
[data-skin="illustrated-fleet"] .home-radar .radar-blips{fill:var(--ink-color);filter:none}
[data-skin="illustrated-fleet"] .home-radar .radar-sweep path:first-child{fill:var(--ink-border);opacity:.055}
[data-skin="illustrated-fleet"] .home-radar .radar-sweep path:last-child{stroke:var(--ink-border);opacity:.4;stroke-width:1}
[data-skin="illustrated-fleet"] .home-radar>circle:last-of-type{fill:transparent}
[data-skin="illustrated-fleet"] .home-radar>g:last-child{fill:var(--ink-color);font-family:var(--ink-font);font-size:12px}
[data-skin="illustrated-fleet"] :is(.home-actions,.player-dialog,.account-shell) :is(input,button):focus-visible{outline:2px solid var(--ink-color);outline-offset:3px}

/* The same ink sea joins both ships beneath the shared HOME/Waiting content. */
[data-skin="illustrated-fleet"] .fleet-connecting-sea{position:absolute;left:12%;width:76%;height:clamp(110px,10vw,190px);bottom:40px;object-fit:fill;opacity:.78;filter:hue-rotate(12deg) saturate(1.8);pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
@media(max-width:1100px){[data-skin="illustrated-fleet"] .fleet-connecting-sea{opacity:.55}}
@media(max-height:800px) and (min-width:651px){[data-skin="illustrated-fleet"] .fleet-connecting-sea{bottom:28px}}
@media(max-width:650px),(max-height:500px){[data-skin="illustrated-fleet"] .fleet-connecting-sea{display:none}}

[data-skin="illustrated-fleet"] .lobby-ink-cloud{position:absolute;left:0;pointer-events:none;overflow:visible}

[data-skin="illustrated-fleet"] .fleet-ink-sun{position:absolute;top:-90px;right:-90px;width:200px;height:auto;opacity:.58;pointer-events:none}
@media(max-width:650px){[data-skin="illustrated-fleet"] .fleet-ink-sun{right:-60px;top:-60px;width:140px;opacity:.48}}

/* Single sketch instrument for illustrated HOME and Waiting. */
[data-skin="illustrated-fleet"] .home-radar.ink-radar{color:var(--ink-color);filter:none}
[data-skin="illustrated-fleet"] .ink-radar .ink-radar-paper{fill:var(--paper-bg);fill-opacity:.84;stroke:none}
[data-skin="illustrated-fleet"] .ink-radar>g:last-child{fill:none}
[data-skin="illustrated-fleet"] .ink-radar-beam{transform-origin:150px 150px;animation:ink-radar-scan var(--ink-radar-period) linear infinite}
[data-skin="illustrated-fleet"] .ink-radar-contact{opacity:0;animation:ink-radar-detect var(--ink-radar-period) linear infinite;animation-delay:var(--contact-delay)}
[data-skin="illustrated-fleet"] .waiting .ink-radar{width:175px;margin:20px auto 10px}
@keyframes ink-radar-scan{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ink-radar-detect{0%,4%{opacity:var(--target-strength)}18%{opacity:calc(var(--target-strength)*.65)}45%{opacity:calc(var(--target-strength)*.16)}70%,100%{opacity:0}}
@media(max-width:650px){[data-skin="illustrated-fleet"] .waiting .ink-radar{width:145px;margin-top:24px}}
@media(min-width:1101px) and (min-height:900px){[data-skin="illustrated-fleet"] .waiting .ink-radar{width:260px;margin-top:30px}}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] .ink-radar-beam,[data-skin="illustrated-fleet"] .ink-radar-contact{animation:none}[data-skin="illustrated-fleet"] .ink-radar-contact{opacity:.25}}

/* Shared drawn button frame: ink shadow is artwork, not a generic CSS shadow.
   Border-image paints outside the existing box; layout/padding/centering stay owned by components. */
[data-skin="illustrated-fleet"]{--ink-button-pen:#252ba0;--ink-button-frame:url('./button-pen-frame.svg');--ink-button-hatch:url('./button-pen-hatch.svg');--ink-button-wash:url('./button-pen-wash.svg')}
[data-skin="illustrated-fleet"] .account-shell.account-lobby .lobby-action{
 --lobby-card-wash:rgba(28,154,165,.28);
 background-color:#cfece5!important;
 background-image:linear-gradient(104deg,rgba(28,154,165,.34),rgba(230,247,239,.42) 48%,rgba(65,172,154,.24)),var(--ink-button-hatch)!important;
 background-position:center,left bottom;background-size:cover,40px 13px;background-repeat:no-repeat,repeat-x
}
[data-skin="illustrated-fleet"] .account-shell.account-lobby .lobby-action:nth-child(2){--lobby-card-wash:rgba(224,91,66,.25);background-color:#f3d3bf!important;background-image:linear-gradient(104deg,rgba(224,91,66,.31),rgba(255,238,218,.4) 48%,rgba(226,132,73,.24)),var(--ink-button-hatch)!important}
[data-skin="illustrated-fleet"] .account-shell .lobby-action:first-child>.ui-icon:first-child{color:#087f8c}
[data-skin="illustrated-fleet"] .account-shell .lobby-action:nth-child(2)>.ui-icon:first-child{color:#c94f49}
[data-skin="illustrated-fleet"] .account-shell .lobby-action>.ui-icon:last-child{color:#6169b8}
[data-skin="illustrated-fleet"] .account-shell .lobby-top{
 border:7px solid transparent;border-radius:0;box-shadow:none;
 border-image-source:var(--ink-button-frame);border-image-slice:22 30 30 22;border-image-width:12px 17px 17px 12px;border-image-outset:0 6px 6px 0;border-image-repeat:stretch;
 background-color:#fbf5e4;background-image:linear-gradient(112deg,rgba(69,170,181,.08),transparent 38%,rgba(255,190,55,.09)),url('../../assets/lobby/panel-hatch.svg');background-size:cover,100% 100%;background-repeat:no-repeat
}
[data-skin="illustrated-fleet"] .account-shell .lobby-top header>.ui-icon{color:#d29116;filter:drop-shadow(1px 1px 0 #fff0b4)}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li{border-bottom-color:rgba(37,43,160,.16);transition:transform .15s ease,filter .15s ease}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(1){background:linear-gradient(90deg,rgba(255,203,53,.34),rgba(255,240,184,.2));border-color:rgba(196,139,13,.4);color:#a36708}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(2){background:linear-gradient(90deg,rgba(106,184,198,.27),rgba(210,232,232,.16));border:1px solid rgba(44,125,145,.25);color:#27768b}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(3){background:linear-gradient(90deg,rgba(226,119,72,.25),rgba(247,208,167,.14));border-color:rgba(176,79,42,.3);color:#a1482c}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(n+4):nth-child(even){background:rgba(87,123,190,.055)}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(1) .lobby-rank-accent{color:#d3940d}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(2) .lobby-rank-accent{color:#398da2}
[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:nth-child(3) .lobby-rank-accent{color:#b65d35}
@media(hover:hover) and (pointer:fine){[data-skin="illustrated-fleet"] .account-shell .lobby-ranks li:hover{filter:saturate(1.15);transform:translateX(2px)}}
@media(hover:hover) and (pointer:fine){
 [data-skin="illustrated-fleet"] .account-shell.account-lobby .lobby-action:first-child:hover{background-color:#b9e2d8!important}
 [data-skin="illustrated-fleet"] .account-shell.account-lobby .lobby-action:nth-child(2):hover{background-color:#edc2a8!important}
}
[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button,.home-join input){
 border-image-source:var(--ink-button-frame);border-image-slice:22 30 30 22;border-image-width:12px 17px 17px 12px;border-image-outset:0 6px 6px 0;border-image-repeat:stretch;
 background-color:var(--paper-bg);
 /* М'який пігмент і нерегулярні діагональні мазки, як у референсі. */
 background-image:var(--ink-button-hatch),var(--ink-button-wash);
 background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;
 color:var(--ink-button-pen);box-shadow:none;font-weight:700;outline-offset:4px;transition:transform .15s ease,background-color .15s ease
}
[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button):hover:not(:disabled){background-color:#f5f1e5;box-shadow:none;transform:translateY(-1px);color:var(--ink-button-pen)}
[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button):active:not(:disabled){transform:translate(1px,1px);border-image-outset:0 2px 2px 0}
[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button,.home-join input):focus-visible{outline:2px solid var(--ink-color)}
[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button):disabled{opacity:.5;transform:none}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] :is(.game-button,.social-page button,.social-page a,.waiting #invite,.home-actions button,.battle .primary,.battle #shuffle,.account-shell .lobby-action,.account-shell form button,.player-dialog button,.skin-dialog button,.sound-dialog button,.result-dialog button,.leave-dialog button){transition:none}}

@media(max-width:650px){[data-skin="illustrated-fleet"] .zaruba-home .home-join button{font-size:20px;--ink-action-padding:26px;white-space:nowrap}}

/* Account choices reuse the same colored pen-on-paper system as HOME mode and
   opponent controls: pale paper, soft pigment wash and a matching drawn frame. */
[data-skin="illustrated-fleet"] .account-shell.account-lobby #account-new{
 --ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg');
 background-color:var(--paper-bg)!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important;background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;color:var(--ink-button-pen)
}
[data-skin="illustrated-fleet"] .account-shell.account-lobby #account-enter{
 --ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-orange.svg');--ink-button-hatch:url('./button-pen-hatch-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg');
 background-color:var(--paper-bg)!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important;background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;color:var(--ink-button-pen)
}
[data-skin="illustrated-fleet"] .account-shell.account-lobby #account-new>.ui-icon{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] .account-shell.account-lobby #account-enter>.ui-icon{color:var(--lobby-orange)}
@media(hover:hover) and (pointer:fine){
 [data-skin="illustrated-fleet"] .account-shell.account-lobby #account-new:hover{background-color:#eef6e9!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important}
 [data-skin="illustrated-fleet"] .account-shell.account-lobby #account-enter:hover{background-color:#fff0e4!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important}
}

/* Login card follows the same colored pen-on-paper language. */
[data-skin="illustrated-fleet"] .account-shell #account-login{
 border:8px solid transparent;border-radius:0;box-shadow:none;
 border-image-source:url('./button-pen-frame-blue.svg');border-image-slice:22 30 30 22;border-image-width:12px 17px 17px 12px;border-image-outset:0 6px 6px 0;border-image-repeat:stretch;
 background-color:var(--paper-bg);background-image:linear-gradient(120deg,rgba(32,92,150,.045),transparent 42%,rgba(102,58,144,.035)),url('../../assets/lobby/panel-hatch.svg');background-size:cover,100% 100%;background-repeat:no-repeat
}
[data-skin="illustrated-fleet"] .account-shell #account-login .account-login-cta{
 --ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg');
 background-color:var(--paper-bg)!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important;background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;color:var(--ink-button-pen)!important
}
[data-skin="illustrated-fleet"] .account-shell #account-login #account-forgot{
 --ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg');
 width:100%;background-color:var(--paper-bg)!important;background-image:var(--ink-button-hatch),var(--ink-button-wash)!important;background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;color:var(--ink-button-pen)!important
}
[data-skin="illustrated-fleet"] .account-shell #account-login :is(#account-login-name,#account-pin){
 --login-input-pen:var(--lobby-blue);
 border:6px solid transparent;border-radius:0;box-shadow:none;
 border-image-source:url('./button-pen-frame-blue.svg');border-image-slice:22 30 30 22;border-image-width:9px 12px 12px 9px;border-image-outset:0 3px 3px 0;border-image-repeat:stretch;
 background-color:#fffaf0;background-image:url('./button-pen-hatch-blue.svg'),linear-gradient(105deg,rgba(32,92,150,.055),transparent 48%,rgba(32,92,150,.035));background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;color:var(--ui-text);caret-color:var(--login-input-pen)
}
[data-skin="illustrated-fleet"] .account-shell #account-login :is(#account-login-name,#account-pin):hover{background-color:#f8f5e9}
[data-skin="illustrated-fleet"] .account-shell #account-login :is(#account-login-name,#account-pin):focus-visible{outline:2px solid var(--login-input-pen);outline-offset:5px;background-color:#fffdf6}
@media(hover:hover) and (pointer:fine){
 [data-skin="illustrated-fleet"] .account-shell #account-login .account-login-cta:hover{background-color:#eef6e9!important}
 [data-skin="illustrated-fleet"] .account-shell #account-login #account-forgot:hover{background-color:#f3edf8!important}
}

/* Profile: compact identity header, colored paper tabs and drawn content cards. */
[data-skin="illustrated-fleet"] #profile-modal .profile-dialog{
 width:min(1120px,100%);height:auto;max-height:calc(100dvh - 36px);padding:28px 32px 26px;
 display:grid;grid-template-columns:86px minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:20px;row-gap:4px;overflow:visible;
 border:9px solid transparent;border-radius:0;outline:0;box-shadow:none;
 border-image-source:url('./button-pen-frame-blue.svg');border-image-slice:22 30 30 22;border-image-width:13px 18px 18px 13px;border-image-outset:0 7px 7px 0;border-image-repeat:stretch;
 background-color:var(--paper-bg);background-image:linear-gradient(118deg,rgba(32,92,150,.035),transparent 38%,rgba(102,58,144,.025)),url('../../assets/lobby/panel-hatch.svg');background-size:cover,100% 100%;background-repeat:no-repeat
}
[data-skin="illustrated-fleet"] #profile-modal .profile-avatar{grid-column:1;grid-row:1/3;align-self:center;display:grid;place-items:center;width:78px;height:78px;margin:0;color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #profile-modal #profile-title{grid-column:2;grid-row:1;align-self:end;margin:0 62px 0 0;font-size:clamp(34px,4vw,48px);line-height:1.05;color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #profile-modal .profile-label{display:none}
[data-skin="illustrated-fleet"] #profile-modal .profile-dialog>p:not(.profile-label){grid-column:2;grid-row:2;align-self:start;margin:2px 0 8px;color:color-mix(in srgb,var(--lobby-blue) 78%,var(--ui-muted));font-size:20px}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 10px;padding:4px 4px 7px;overflow:visible}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button{min-width:0;min-height:50px;padding:8px 10px;border:7px solid transparent;border-radius:0;box-shadow:none;white-space:nowrap;background-color:var(--paper-bg);background-position:left bottom,center;background-size:40px 13px,cover;background-repeat:repeat-x,no-repeat;font-size:22px;line-height:1.05}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(1){--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-blue.svg');--ink-button-hatch:url('./button-pen-hatch-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(2){--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(3){--ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-orange.svg');--ink-button-hatch:url('./button-pen-hatch-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(4){--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button{border-image-source:var(--ink-button-frame);border-image-slice:22 30 30 22;border-image-width:10px 13px 13px 10px;border-image-outset:0 4px 4px 0;border-image-repeat:stretch;background-image:var(--ink-button-hatch),var(--ink-button-wash);color:var(--ink-button-pen)}
[data-skin="illustrated-fleet"] #profile-modal :is(.profile-tabs button,.career-filters button){background-clip:padding-box;background-origin:padding-box}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button[aria-selected="true"]{background-color:color-mix(in srgb,var(--ink-button-pen) 11%,var(--paper-bg));color:var(--ink-button-pen);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
[data-skin="illustrated-fleet"] #profile-modal .profile-panel{grid-column:1/-1;grid-row:4;min-height:0;padding:4px 8px 8px;overflow:visible}
[data-skin="illustrated-fleet"] #profile-modal .career-summary{padding:14px 18px;border:7px solid transparent;border-radius:0;border-image:url('./button-pen-frame-blue.svg') 22 30 30 22 / 10px 14px 14px 10px / 0 4px 4px 0 stretch;background-color:color-mix(in srgb,var(--lobby-blue) 3%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #profile-modal .career-summary :is(.xp-progress span,.career-time span){font-size:15px}
[data-skin="illustrated-fleet"] #profile-modal .career-summary :is(.xp-progress b,.career-time b){font-size:19px}
[data-skin="illustrated-fleet"] #profile-modal .career-stat-block{font-size:14px}
[data-skin="illustrated-fleet"] #profile-modal .career-stat-block small{font-size:13px}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid{gap:10px;margin-top:10px}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid span{padding:10px 6px;border:1px solid color-mix(in srgb,var(--stat-color,var(--lobby-blue)) 40%,transparent);background:color-mix(in srgb,var(--stat-color,var(--lobby-blue)) 7%,var(--paper-bg));border-radius:4px;font-size:18px}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid b{font-size:30px}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid span:nth-child(4n+1){--stat-color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid span:nth-child(4n+2){--stat-color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid span:nth-child(4n+3){--stat-color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid span:nth-child(4n){--stat-color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #profile-modal .stats-grid b{color:var(--stat-color)}
[data-skin="illustrated-fleet"] #profile-modal #profile-close{--ink-button-pen:var(--lobby-red);right:24px;top:22px;display:grid;place-items:center;width:50px;height:50px;padding:0;color:var(--lobby-red);line-height:1;border:7px solid transparent;border-image:url('./button-pen-frame-clean-red.svg') 22 30 22 22 / 9px 11px 9px 9px / 0 stretch;background-color:var(--paper-bg)!important;background-image:url('./button-pen-wash-red.svg')!important;background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;box-shadow:none}
[data-skin="illustrated-fleet"] #profile-modal #profile-close>.ui-icon{display:block;width:22px!important;height:22px!important;min-width:22px;margin:0;vertical-align:0}
[data-skin="illustrated-fleet"] #profile-modal :is(.match-list article,.account-settings,.wallet-settings){background-color:color-mix(in srgb,var(--lobby-blue) 3%,var(--paper-bg));border-bottom-color:color-mix(in srgb,var(--lobby-blue) 28%,transparent)}
[data-skin="illustrated-fleet"] #profile-modal [data-history-item][hidden]{display:none!important}
@media(min-width:761px){
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 14px}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"][hidden]{display:none}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>.wallet-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;border:0;background:none}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings>.phone-profile-card{grid-column:1/-1}
 [data-skin="illustrated-fleet"] #profile-modal .phone-profile-card .phone-current{margin:0 0 12px}
 [data-skin="illustrated-fleet"] #profile-modal .phone-profile-card [data-phone-form]{grid-template-columns:minmax(0,1fr) minmax(260px,.9fr)}
 [data-skin="illustrated-fleet"] #profile-modal :is(.wallet-card,.recovery-card,[data-profile-panel="account"]>.account-settings:not(.wallet-settings)){--account-wash:rgba(32,92,150,.1);margin:0;padding:18px 20px;border:7px solid transparent;border-image:url('./button-pen-frame-clean-blue.svg') 22 30 22 22 / 9px 12px 9px 9px / 0 stretch;background-color:color-mix(in srgb,var(--lobby-blue) 5%,var(--paper-bg));background-image:linear-gradient(118deg,var(--account-wash),rgba(255,250,240,.28) 48%,var(--account-wash));background-position:center;background-size:100% 100%;background-repeat:no-repeat;background-clip:padding-box;box-shadow:none}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-card{--account-wash:rgba(38,124,80,.11);border-image-source:url('./button-pen-frame-clean-green.svg');background-color:color-mix(in srgb,var(--lobby-green) 6%,var(--paper-bg))}
 [data-skin="illustrated-fleet"] #profile-modal .recovery-card{--account-wash:rgba(102,58,144,.11);border-image-source:url('./button-pen-frame-clean-purple.svg');background-color:color-mix(in srgb,var(--lobby-purple) 6%,var(--paper-bg))}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"] h3{margin:0 0 12px;font-size:32px;line-height:1.1}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-card h3{color:var(--lobby-green)}
 [data-skin="illustrated-fleet"] #profile-modal .recovery-card h3{color:var(--lobby-purple)}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-balance-line{margin:0 0 12px;font-size:21px}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:9px 10px}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings label{gap:5px;font-size:19px;line-height:1.2}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings :is(input,select){box-sizing:border-box;width:100%;min-height:50px;padding:8px 12px;border:2px solid var(--lobby-blue);border-radius:4px;background:var(--paper-bg);font-size:21px}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings button{min-height:50px;padding:8px 14px;border:7px solid transparent;border-image:url('./button-pen-frame-clean-purple.svg') 22 30 22 22 / 8px 10px 8px 8px / 0 stretch;background-color:var(--paper-bg);background-image:url('./button-pen-wash-purple.svg');background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--lobby-purple);box-shadow:none;font-size:19px}
 [data-skin="illustrated-fleet"] #profile-modal #wallet-topup button{border-image-source:url('./button-pen-frame-clean-green.svg');background-image:url('./button-pen-wash-green.svg');color:var(--lobby-green)}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings .player-error{grid-column:1/-1;min-height:0;margin:0;font-size:16px}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>.account-settings:not(.wallet-settings){grid-column:1;margin:0;font-size:20px;line-height:1.35}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>.account-settings:not(.wallet-settings) p{margin:9px 0;font-size:19px}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>.account-settings:not(.wallet-settings) h3{color:var(--lobby-blue)}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>.account-settings:not(.wallet-settings) button{min-height:50px;padding:8px 14px;border:7px solid transparent;border-image:url('./button-pen-frame-clean-blue.svg') 22 30 22 22 / 8px 10px 8px 8px / 0 stretch;background-color:var(--paper-bg);background-image:url('./button-pen-wash-blue.svg');background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--lobby-blue);box-shadow:none;font-size:19px}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>#profile-edit{grid-column:2;grid-row:2;align-self:start;min-height:70px;padding:11px 18px;border:7px solid transparent;border-image:url('./button-pen-frame-clean-orange.svg') 22 30 22 22 / 9px 12px 9px 9px / 0 stretch;background-color:var(--paper-bg);background-image:url('./button-pen-wash-orange.svg');background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--lobby-orange);box-shadow:none;font-size:22px}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>#profile-edit[hidden]{display:none}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>#profile-form{grid-column:2;grid-row:2;display:grid;align-self:start;gap:9px;margin:0;padding:12px;border:1px solid color-mix(in srgb,var(--lobby-orange) 45%,transparent)}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>#profile-form[hidden]{display:none}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="account"]>#profile-form>.primary{border-image-source:url('./button-pen-frame-clean-orange.svg');background-image:url('./button-pen-wash-orange.svg');color:var(--lobby-orange);box-shadow:none}
 [data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="history"]>h3{margin:4px 0 12px;font-size:30px}
 [data-skin="illustrated-fleet"] #profile-modal .match-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 [data-skin="illustrated-fleet"] #profile-modal .match-list article{--match-ink:var(--lobby-red);--match-frame:url('./button-pen-frame-clean-red.svg');--match-wash:url('./button-pen-wash-red.svg');align-content:start;gap:9px;min-height:142px;padding:13px 15px;border:7px solid transparent;border-image:var(--match-frame) 22 30 22 22 / 9px 12px 9px 9px / 0 stretch;background-color:var(--paper-bg);background-image:var(--match-wash);background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--lobby-blue);box-shadow:none}
 [data-skin="illustrated-fleet"] #profile-modal .match-list article[data-result="win"]{--match-ink:var(--lobby-green);--match-frame:url('./button-pen-frame-clean-green.svg');--match-wash:url('./button-pen-wash-green.svg')}
 [data-skin="illustrated-fleet"] #profile-modal .match-list article[hidden]{display:none!important}
 [data-skin="illustrated-fleet"] #profile-modal .match-list article>b{font-size:20px;line-height:1.25;color:var(--match-ink)}
 [data-skin="illustrated-fleet"] #profile-modal .match-tags{display:flex;flex-wrap:wrap;gap:7px}
 [data-skin="illustrated-fleet"] #profile-modal .match-list .match-tags .mode-badge{display:inline-flex;align-items:center;gap:5px;width:auto;margin:0;padding:5px 9px;border:1.5px solid currentColor;border-radius:5px;background:color-mix(in srgb,var(--lobby-blue) 6%,var(--paper-bg));color:var(--lobby-blue);box-shadow:none;font-size:15px;line-height:1.1}
 [data-skin="illustrated-fleet"] #profile-modal .match-list .match-tags .bot-badge{color:var(--lobby-purple);background:color-mix(in srgb,var(--lobby-purple) 7%,var(--paper-bg))}
 [data-skin="illustrated-fleet"] #profile-modal .match-list article>small{font-size:17px;line-height:1.3;color:var(--match-ink);opacity:.86}
 [data-skin="illustrated-fleet"] #profile-modal .history-pager{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;margin-top:10px}
 [data-skin="illustrated-fleet"] #profile-modal .history-pager button{width:42px;min-height:36px;padding:0;border:7px solid transparent;border-image:url('./button-pen-frame-clean-blue.svg') 22 30 22 22 / 8px 10px 8px 8px / 0 stretch;background:var(--paper-bg);color:var(--lobby-blue);box-shadow:none;font-size:24px;line-height:1}
 [data-skin="illustrated-fleet"] #profile-modal .history-pager b{min-width:58px;text-align:center;color:var(--lobby-blue);font-size:17px}
 [data-skin="illustrated-fleet"] #profile-modal .career-center{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:4px}
 [data-skin="illustrated-fleet"] #profile-modal .career-center h3{margin:2px 0;font-size:30px}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters{display:flex;flex-wrap:wrap;gap:7px;overflow:visible;padding:0}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button{--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-clean-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg');min-height:44px;padding:7px 13px;border:7px solid transparent;border-image-source:var(--ink-button-frame);border-image-slice:22 30 22 22;border-image-width:9px 12px 9px 9px;border-image-outset:0;border-image-repeat:stretch;border-radius:0;background-color:var(--paper-bg);background-image:var(--ink-button-wash);background-position:center;background-size:cover;background-repeat:no-repeat;color:var(--ink-button-pen);box-shadow:none;font-size:17px;line-height:1.05}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button:nth-child(5n+2){--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-clean-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button:nth-child(5n+3){--ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-clean-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg')}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button:nth-child(5n+4){--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-clean-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button:nth-child(5n){--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-clean-red.svg');--ink-button-wash:url('./button-pen-wash-red.svg')}
 [data-skin="illustrated-fleet"] #profile-modal .career-filters button[aria-pressed="true"]{background-color:color-mix(in srgb,var(--ink-button-pen) 12%,var(--paper-bg));color:var(--ink-button-pen);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievements{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none;overflow:visible}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievement{gap:4px;padding:8px 10px}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievement[hidden]{display:none!important}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievement>div{font-size:17px}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievement p{font-size:15px;line-height:1.2}
 [data-skin="illustrated-fleet"] #profile-modal .career-achievement em{font-size:14px}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats{display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats .progression-badge{--feat-ink:var(--lobby-green);--feat-wash-image:url('./button-pen-wash-green.svg');position:relative;flex:0 1 auto;padding:8px 11px;border:2px solid var(--feat-ink);border-left-width:6px;border-radius:5px;background-color:var(--paper-bg);background-image:var(--feat-wash-image);background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--feat-ink);font-size:15px;box-shadow:none}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats .progression-badge.rarity-rare{--feat-ink:var(--lobby-blue);--feat-wash-image:url('./button-pen-wash-blue.svg');border-style:double}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats .progression-badge.rarity-epic{--feat-ink:var(--lobby-purple);--feat-wash-image:url('./button-pen-wash-purple.svg');border-style:ridge}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats .progression-badge.rarity-legendary{--feat-ink:var(--lobby-orange);--feat-wash-image:url('./button-pen-wash-orange.svg');border-width:3px 3px 3px 7px}
 [data-skin="illustrated-fleet"] #profile-modal .career-feats .progression-badge em{padding:1px 5px;border-radius:999px;background:var(--feat-ink);color:var(--paper-bg)}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none;overflow:visible}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history-item{padding:8px 10px;border:1px solid color-mix(in srgb,var(--lobby-blue) 24%,transparent);border-radius:4px}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history-item[hidden]{display:none!important}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history-item summary{font-size:16px}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history-item summary small{font-size:14px}
 [data-skin="illustrated-fleet"] #profile-modal .reward-history-detail{font-size:14px}
 [data-skin="illustrated-fleet"] #profile-modal .career-pager{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px}
 [data-skin="illustrated-fleet"] #profile-modal .career-pager[hidden]{display:none}
 [data-skin="illustrated-fleet"] #profile-modal .career-pager button{width:38px;min-height:32px;padding:0;border:2px solid var(--lobby-blue);border-image:none;background:var(--paper-bg);box-shadow:none;font-size:22px;line-height:1}
 [data-skin="illustrated-fleet"] #profile-modal .career-pager b{min-width:54px;text-align:center;font-size:16px}
}
[data-skin="illustrated-fleet"] body.with-app-chrome #profile-modal .profile-dialog{max-height:calc(100dvh - 152px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){
 [data-skin="illustrated-fleet"] #profile-modal .profile-dialog{height:auto;max-height:calc(100dvh - 20px);padding:20px 16px 16px;grid-template-columns:62px minmax(0,1fr);column-gap:12px;overflow:auto}
 [data-skin="illustrated-fleet"] #profile-modal .profile-avatar{width:58px;height:58px}
 [data-skin="illustrated-fleet"] #profile-modal #profile-title{font-size:31px;margin-right:48px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-dialog>p:not(.profile-label){font-size:16px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-block:8px 12px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-tabs button{font-size:17px;min-height:44px}
 [data-skin="illustrated-fleet"] #profile-modal #profile-close{right:13px;top:13px;width:44px;height:44px}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings{display:grid;gap:12px;margin:0;padding:0;border:0;background:none}
 [data-skin="illustrated-fleet"] #profile-modal :is(.wallet-card,.recovery-card){padding:12px;border:2px solid var(--lobby-blue)}
 [data-skin="illustrated-fleet"] #profile-modal .wallet-settings form{display:grid;gap:9px}
}
@media(max-height:600px) and (orientation:landscape){
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #global-dialogs:has(#profile-modal:not([hidden])){z-index:1500}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal{inset:0;width:100%;height:100dvh;padding:0;place-items:stretch}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-dialog{width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden;border-image-outset:0}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-avatar{width:56px;height:56px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal #profile-title{font-size:30px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-dialog>p:not(.profile-label){margin-bottom:2px;font-size:16px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-tabs{gap:8px;margin-block:2px 4px;padding-bottom:4px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-tabs button{min-height:44px;padding-block:5px;font-size:18px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal .profile-panel{min-height:0;margin-bottom:12px;padding-bottom:18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:18px}
 [data-skin="illustrated-fleet"] body.with-app-chrome.compact-phone-landscape #profile-modal #profile-close{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:2;width:44px;height:44px}
}

/* Leaderboard uses the same colored pen language as profile and career. */
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-dialog{width:min(760px,100%)}
[data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-title{color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-title>.ui-icon{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:4px 4px 8px;overflow:visible}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button{--leader-color:var(--lobby-blue);--leader-frame:url('./button-pen-frame-clean-blue.svg');--leader-wash:url('./button-pen-wash-blue.svg');min-width:0;min-height:48px;padding:7px 10px;border:7px solid transparent;border-image:var(--leader-frame) 22 30 22 22 / 9px 11px 9px 9px / 0 stretch;background-color:var(--paper-bg);background-image:var(--leader-wash);background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--leader-color);box-shadow:none;font-size:20px;line-height:1.05;white-space:normal}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button:nth-child(2){--leader-color:var(--lobby-green);--leader-frame:url('./button-pen-frame-clean-green.svg');--leader-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button:nth-child(3){--leader-color:var(--lobby-orange);--leader-frame:url('./button-pen-frame-clean-orange.svg');--leader-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button:nth-child(4){--leader-color:var(--lobby-purple);--leader-frame:url('./button-pen-frame-clean-purple.svg');--leader-wash:url('./button-pen-wash-purple.svg')}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button[aria-selected="true"]{background-color:color-mix(in srgb,var(--leader-color) 13%,var(--paper-bg));color:var(--leader-color);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button:hover:not(:disabled){background-color:color-mix(in srgb,var(--leader-color) 10%,var(--paper-bg));color:var(--leader-color)}}
[data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-list{display:grid;gap:6px;min-height:0;padding:2px 4px 8px;overflow:auto;overscroll-behavior:contain}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row{--leader-color:var(--lobby-blue);display:flex;align-items:center;min-height:56px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--leader-color) 42%,transparent);border-left:7px solid var(--leader-color);border-radius:4px;background-color:color-mix(in srgb,var(--leader-color) 7%,var(--paper-bg));background-image:linear-gradient(112deg,color-mix(in srgb,var(--leader-color) 8%,transparent),transparent 52%);color:color-mix(in srgb,var(--leader-color) 86%,var(--ui-text));box-shadow:none}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(4n+2){--leader-color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(4n+3){--leader-color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(4n){--leader-color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(1){--leader-color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(2){--leader-color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row:nth-child(3){--leader-color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row.you{--leader-color:var(--lobby-blue);background-color:color-mix(in srgb,var(--lobby-blue) 14%,var(--paper-bg));outline:2px dashed color-mix(in srgb,var(--lobby-blue) 62%,transparent);outline-offset:-5px}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row>span{display:flex;align-items:center;gap:7px;min-width:0;font-size:20px;line-height:1.2}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row :is(.ui-icon,.player-country-flag){flex:none}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row .rank-insignia.compact{flex:0 0 auto;width:32px;height:40px;margin-inline:1px 2px;cursor:default}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row .rank-insignia::after{display:none}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row .ui-icon{color:var(--leader-color)}
[data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row>b{min-width:48px;padding:4px 8px;border:1.5px solid var(--leader-color);border-radius:999px;background:color-mix(in srgb,var(--leader-color) 10%,var(--paper-bg));color:var(--leader-color);text-align:center;font-size:21px}
[data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-close{right:18px;top:14px;display:grid;place-items:center;width:50px;height:50px;padding:0;color:var(--lobby-red);line-height:1;border:7px solid transparent;border-image:url('./button-pen-frame-clean-red.svg') 22 30 22 22 / 9px 11px 9px 9px / 0 stretch;background-color:var(--paper-bg)!important;background-image:url('./button-pen-wash-red.svg')!important;background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;box-shadow:none}
[data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-close>.ui-icon{display:block;width:22px!important;height:22px!important;min-width:22px;margin:0;vertical-align:0}
@media(max-width:600px){
 [data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 [data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-tabs button{min-height:44px;font-size:17px}
 [data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row{min-height:50px;padding:7px 9px}
 [data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row>span{font-size:17px}
 [data-skin="illustrated-fleet"] #leaderboard-modal .leaderboard-row .rank-insignia.compact{width:28px;height:35px;margin-inline:0 1px}
 [data-skin="illustrated-fleet"] #leaderboard-modal #leaderboard-close{width:44px;height:44px}
}

/* About confirmation keeps only the drawn frame and wash, without the shared bottom hatch/outset. */
[data-skin="illustrated-fleet"] #global-about-modal #global-about-close{min-height:48px;padding:8px 18px;border:7px solid transparent;border-image:url('./button-pen-frame-clean-blue.svg') 22 30 22 22 / 9px 11px 9px 9px / 0 stretch;background-color:var(--paper-bg);background-image:url('./button-pen-wash-blue.svg');background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--lobby-blue);box-shadow:none}
@media(min-width:761px) and (max-height:900px){
 [data-skin="illustrated-fleet"] #profile-modal .profile-dialog{padding-block:20px 18px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-avatar{width:64px;height:64px}
 [data-skin="illustrated-fleet"] #profile-modal #profile-title{font-size:34px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-dialog>p:not(.profile-label){font-size:17px;margin-bottom:2px}
 [data-skin="illustrated-fleet"] #profile-modal .profile-tabs{margin-block:4px 6px}
 [data-skin="illustrated-fleet"] #profile-modal .career-summary{padding-block:10px}
 [data-skin="illustrated-fleet"] #profile-modal .career-time span{padding:4px}
 [data-skin="illustrated-fleet"] #profile-modal .career-stat-block{padding:4px}
 [data-skin="illustrated-fleet"] #profile-modal .stats-grid span{padding-block:7px}
}

[data-skin="illustrated-fleet"] .ink-radar-compass{font:600 12px var(--ink-font);opacity:.8}
[data-skin="illustrated-fleet"] .ink-radar-ping{opacity:0;transform-origin:0 0;animation:ink-radar-ping var(--ink-radar-period) linear infinite;animation-delay:var(--contact-delay)}
@keyframes ink-radar-ping{0%{opacity:.5;transform:scale(.6)}22%{opacity:0;transform:scale(2.5)}100%{opacity:0;transform:scale(2.5)}}
[data-skin="illustrated-fleet"][data-radar-paused="true"] :is(.ink-radar-beam,.ink-radar-contact,.ink-radar-ping){animation-play-state:paused}
@media(max-width:650px){[data-skin="illustrated-fleet"] .ink-radar-compass{font-size:13px}}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] .ink-radar-ping{animation:none;opacity:0}}

/* Matching compact country/language paper frames, scoped to this skin. */
[data-skin="illustrated-fleet"] #global-settings-panel :is(.global-country-current,.locale-selector select){height:44px;min-height:44px;box-sizing:border-box;background-color:var(--ui-paper);border:2px solid var(--ui-border);border-image:var(--frame-style) 12 / 5px stretch;box-shadow:var(--ink-shadow)}

/* HOME/waiting controller owns one clock; retain the paper and hand-ink artwork. */
[data-skin="illustrated-fleet"] .ink-radar .ink-radar-paper{fill-opacity:.22}
[data-skin="illustrated-fleet"] .ink-radar[data-radar-managed] :is(.ink-radar-beam,.ink-radar-contact,.ink-radar-ping){animation:none}
[data-skin="illustrated-fleet"] .ink-radar[data-radar-managed] .ink-radar-beam{will-change:transform}
[data-skin="illustrated-fleet"] .ink-radar[data-radar-managed] .ink-radar-ping{transform-box:view-box;transform-origin:0 0}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] .ink-radar[data-radar-managed] .ink-radar-beam{will-change:auto}}

/* Stable glyph origin: pulse around the contact, not the SVG viewport center. */
[data-skin="illustrated-fleet"] .ink-radar[data-radar-managed] .ink-radar-contact{transform-box:view-box;transform-origin:0 0}

/* Code entry uses the same Join frame and row height; typing stays stationary. */
[data-skin="illustrated-fleet"] .zaruba-home .home-join input{height:100%;min-height:58px;transition:background-color .15s ease}

/* All decorative icons use local pen strokes, including asynchronous dialogs. */
[data-skin="illustrated-fleet"] .room-navbar .logo::before{content:none}
[data-skin="illustrated-fleet"] .room-navbar .logo{font-size:24px}
[data-skin="illustrated-fleet"] .waiting .sonar b{font-size:32px;background:none;mask:none;-webkit-mask:none}
[data-skin="illustrated-fleet"] .game-copy-glyph{background:none;mask:none;-webkit-mask:none;font-size:22px}


/* Settings presentation tokens apply wherever the shared control is mounted. */
[data-skin="illustrated-fleet"]{
 --settings-gear-size:28px;--settings-icon-color:var(--ui-ink);
 --settings-background:transparent;--settings-shadow:none;
 --settings-focus-width:1px;--settings-focus-color:var(--ui-ink)
}

/* Donation is the bright companion to the 48px Settings control. */
[data-skin="illustrated-fleet"] .donation-button{
 box-sizing:border-box;height:48px;min-height:48px;padding:0 14px;
 border:7px solid transparent;border-radius:0;
 border-image:url('./button-pen-frame-clean-orange.svg') 22 30 30 22 / 8px 10px 8px 8px / 0 stretch;
 background-color:#ffecd0;
 background-image:url('./button-pen-hatch-orange.svg'),url('./button-pen-wash-orange.svg');
 background-position:left bottom,center;background-size:34px 10px,cover;background-repeat:repeat-x,no-repeat;
 color:var(--lobby-orange);box-shadow:none;font-size:21px!important;font-weight:800;line-height:1;
 transition:transform .15s ease,background-color .15s ease,filter .15s ease
}
[data-skin="illustrated-fleet"] .donation-button:hover{background-color:#ffddb0;color:var(--lobby-orange);filter:saturate(1.12);transform:translateY(-1px)}
[data-skin="illustrated-fleet"] .donation-button:active{transform:translate(1px,1px)}
[data-skin="illustrated-fleet"] .donation-button svg{color:inherit}
@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] .donation-button{transition:none}}

/* Donation dialog uses the same hand-drawn palette, one clear color per action. */
[data-skin="illustrated-fleet"] .donation-presets button:nth-child(1){--ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-orange.svg');--ink-button-hatch:url('./button-pen-hatch-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] .donation-presets button:nth-child(2){--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-blue.svg');--ink-button-hatch:url('./button-pen-hatch-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg')}
[data-skin="illustrated-fleet"] .donation-presets button:nth-child(3){--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] .donation-presets button:nth-child(4){--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-red.svg');--ink-button-hatch:url('./button-pen-hatch-red.svg');--ink-button-wash:url('./button-pen-wash-red.svg')}
[data-skin="illustrated-fleet"] #donation-form .primary{--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}
[data-skin="illustrated-fleet"] .donation-dialog #donation-close{border:7px solid transparent;border-image:url('./button-pen-frame-clean-red.svg') 22 30 30 22 / 8px / 0 stretch;background:#ffe4df;color:var(--lobby-red);font-size:28px!important}

/* Keep relative frame assets in the skin stylesheet that owns them. */
[data-skin="illustrated-fleet"] .post-game-controls button{border:3px solid transparent;border-image:var(--ink-button-frame) 22 30 30 22 / 8px / 0 stretch;background:var(--paper-bg);font-size:22px;box-shadow:none}

/* Resolve the relative asset beside this stylesheet, not in a shared var() consumer. */
[data-skin="illustrated-fleet"] #global-settings.settings-button{border-image:url('./settings-pen-frame.svg') 22 30 30 22 / 8px / 0 stretch}

/* Палітра authoritative lobby reference; геометрія shared button незмінна. */
[data-skin="illustrated-fleet"]{--lobby-blue:#205c96;--lobby-green:#267957;--lobby-red:#ad3038;--lobby-orange:#b85717;--lobby-purple:#663a90;--lobby-radar-opacity:.19}
[data-skin="illustrated-fleet"] .zaruba-home [data-mode-id="turbo"]{--ink-button-pen:var(--lobby-purple);--ink-button-frame:url("./button-pen-frame-purple.svg");--ink-button-hatch:url("./button-pen-hatch-purple.svg");--ink-button-wash:url("./button-pen-wash-purple.svg")}
[data-skin="illustrated-fleet"] .zaruba-home :is([data-mode-id="standard"],.home-join-path button,.difficulty-options [data-choice="normal"]){--ink-button-pen:var(--lobby-blue);--ink-button-frame:url("./button-pen-frame-blue.svg");--ink-button-hatch:url("./button-pen-hatch-blue.svg");--ink-button-wash:url("./button-pen-wash-blue.svg")}
[data-skin="illustrated-fleet"] .zaruba-home :is([data-mode-id="hard"],.difficulty-options [data-choice="easy"]){--ink-button-pen:var(--lobby-green);--ink-button-frame:url("./button-pen-frame-green.svg");--ink-button-hatch:url("./button-pen-hatch-green.svg");--ink-button-wash:url("./button-pen-wash-green.svg")}
[data-skin="illustrated-fleet"] .zaruba-home :is([data-mode-id="very-hard"],.difficulty-options [data-choice="admiral"]){--ink-button-pen:var(--lobby-red);--ink-button-frame:url("./button-pen-frame-red.svg");--ink-button-hatch:url("./button-pen-hatch-red.svg");--ink-button-wash:url("./button-pen-wash-red.svg")}
[data-skin="illustrated-fleet"] .zaruba-home :is([data-choice="human"],.home-create){--ink-button-pen:var(--lobby-orange);--ink-button-frame:url("./button-pen-frame-orange.svg");--ink-button-hatch:url("./button-pen-hatch-orange.svg");--ink-button-wash:url("./button-pen-wash-orange.svg")}
[data-skin="illustrated-fleet"] .zaruba-home :is([data-social-action="invite"]){--ink-button-pen:var(--lobby-purple);--ink-button-frame:url("./button-pen-frame-purple.svg");--ink-button-hatch:url("./button-pen-hatch-purple.svg");--ink-button-wash:url("./button-pen-wash-purple.svg")}
[data-skin="illustrated-fleet"] .zaruba-home .home-create-heading{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] .zaruba-home .home-join-heading{color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] .zaruba-home #home-title em{position:relative;display:inline-block;border:0;border-radius:0;padding:0 .16em}
[data-skin="illustrated-fleet"] .zaruba-home #home-title em::after{content:"";position:absolute;inset:-8% -3% -10%;pointer-events:none;background:var(--lobby-red);mask:url('./lobby-title-circle.svg?rev=pencil-1') center/100% 100% no-repeat;-webkit-mask:url('./lobby-title-circle.svg?rev=pencil-1') center/100% 100% no-repeat}
[data-skin="illustrated-fleet"] .zaruba-home .home-underline{color:var(--lobby-red);background:none}
[data-skin="illustrated-fleet"] .zaruba-home .home-underline path{opacity:1}
[data-skin="illustrated-fleet"] .zaruba-home .home-live-status>span:first-child .ui-icon{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] .zaruba-home .home-live-status>span:nth-child(2) .ui-icon{color:var(--lobby-red)}
[data-skin="illustrated-fleet"] .zaruba-home .home-live-status>span:nth-child(3) .ui-icon{color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] .zaruba-home .home-actions [aria-checked="true"]{background-color:color-mix(in srgb,var(--ink-button-pen) 4%,var(--paper-bg))}

[data-skin="illustrated-fleet"] .zaruba-home .home-actions button{--icon-color:var(--ink-button-pen)}

[data-skin="illustrated-fleet"] .zaruba-home .home-path-heading{width:fit-content}

/* Червоні pen arrows біля підписів authoritative lobby reference. */
[data-skin="illustrated-fleet"] .zaruba-home :is(.mode-selector,.opponent-selector) legend::after,
[data-skin="illustrated-fleet"] .zaruba-home .home-description::after{
 content:"";display:inline-block;width:42px;height:38px;margin-left:6px;
 vertical-align:top;background:var(--lobby-red);pointer-events:none;
 mask:url('./lobby-red-arrow.svg?rev=hand-2') center/contain no-repeat;
 -webkit-mask:url('./lobby-red-arrow.svg?rev=hand-2') center/contain no-repeat;
}
[data-skin="illustrated-fleet"] .zaruba-home :is(.mode-selector,.opponent-selector) legend{position:relative}
[data-skin="illustrated-fleet"] .zaruba-home :is(.mode-selector,.opponent-selector) legend::after{position:absolute;top:-5px;left:100%;margin:0}
[data-skin="illustrated-fleet"] .zaruba-home .home-description{position:relative}
[data-skin="illustrated-fleet"] .zaruba-home .home-description::after{position:absolute;right:-48px;top:-12px;transform:rotate(72deg)}
@media(max-width:650px){[data-skin="illustrated-fleet"] .zaruba-home .home-description::after{right:0;top:-26px;width:28px;height:26px}}

[data-skin="illustrated-fleet"] .zaruba-home .home-or{color:var(--ui-muted)}
[data-skin="illustrated-fleet"] .zaruba-home .home-or span{background:var(--ui-border);opacity:.7;border:0;mask:url('./lobby-pen-divider.svg') center/100% 100% no-repeat;-webkit-mask:url('./lobby-pen-divider.svg') center/100% 100% no-repeat}

/* Теплий жовто-помаранчевий тон сонця в lobby. */
[data-skin="illustrated-fleet"] .fleet-ink-sun{filter:url("./sun-warm-ink.svg#warm");opacity:.85}

/* Онлайн-блок використовує чинний мальований frame artwork. */
html[data-skin="illustrated-fleet"] body .zaruba-home .home-live-status{
 border:3px solid transparent;border-radius:0;
 border-image:var(--ink-button-frame) 22 30 30 22 / 10px 14px 14px 10px / 0 4px 4px 0 stretch;
 background:var(--paper-bg);box-shadow:none;
}

/* Вибраний radio: заштрихований куточок і контрастна біла галочка. */
[data-skin="illustrated-fleet"]{--selected-corner-check:#fff}
html[data-skin="illustrated-fleet"] body .zaruba-home .mode-options .mode-check{
 width:34px;height:34px;display:grid;place-items:start end;padding:5px 5px 0 0;
 color:var(--selected-corner-check);--icon-color:var(--selected-corner-check);isolation:isolate;
}
html[data-skin="illustrated-fleet"] body .zaruba-home .mode-options .mode-check::before{
 content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-button-pen);
 mask:url('./selected-corner.svg') center/100% 100% no-repeat;
 -webkit-mask:url('./selected-corner.svg') center/100% 100% no-repeat;pointer-events:none;
}
html[data-skin="illustrated-fleet"] body .zaruba-home .mode-check .ui-icon{color:var(--selected-corner-check);width:13px!important;height:13px!important;min-width:13px}

/* Зерниста олівцева сітка, бірюзовий промінь і блакитні контакти. */
[data-skin="illustrated-fleet"]{--radar-beam-ink:#428b88;--radar-contact-ink:#329ddc;--radar-pencil-width:1.8;--radar-pencil-rim-width:3}
[data-skin="illustrated-fleet"] .ink-radar-beam{color:var(--radar-beam-ink)}
[data-skin="illustrated-fleet"] .ink-radar-contacts{color:var(--radar-contact-ink)}
[data-skin="illustrated-fleet"] .ink-radar-pencil{filter:url('./radar-pencil.svg#pencil')}
[data-skin="illustrated-fleet"] .ink-radar-pencil path{stroke-width:var(--radar-pencil-width)}
[data-skin="illustrated-fleet"] .ink-radar-pencil>path:nth-child(-n+3){stroke-width:var(--radar-pencil-rim-width)}

/* Поле коду залишається чистим для читабельного введення. */
[data-skin="illustrated-fleet"] .home-join input{--ink-button-wash:none}

/* Маска завантажується відносно skin CSS, поруч із самим artwork. */
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint::before,
html[data-skin="illustrated-fleet"] body .zaruba-home .home-invite-hint::after{background:var(--ink-color);mask:url('./invite-hint-arrow.svg') center/contain no-repeat;-webkit-mask:url('./invite-hint-arrow.svg') center/contain no-repeat}

/* Контури карти з екрана входу без декоративної рози вітрів. */
[data-skin="illustrated-fleet"]{--lobby-map-opacity:.53}
[data-skin="illustrated-fleet"] .illustrated-fleet-scene::before{content:"";position:absolute;inset:0;background:url('../../assets/lobby/reference-chart-coastlines.svg') center top/100% auto repeat-y;opacity:var(--lobby-map-opacity);pointer-events:none}

@media(max-width:740px){[data-skin="illustrated-fleet"] .illustrated-fleet-scene::before{opacity:.45}}

[data-skin="illustrated-fleet"] .zaruba-home .difficulty-options [aria-checked="true"]{background-color:color-mix(in srgb,var(--ink-button-pen) 19%,var(--paper-bg))}

/* Result modal reuses the colored pen set from the opening screens. */
[data-skin="illustrated-fleet"] #result-modal .result-dialog:not(:has(.result-icon)) #result-title{color:var(--lobby-red)}
[data-skin="illustrated-fleet"] #result-modal .result-dialog:has(.result-icon) #result-title{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #result-modal .result-badges>.mode-badge:first-child{color:var(--lobby-blue);border-image-source:url('./button-pen-frame-blue.svg');background-color:color-mix(in srgb,var(--lobby-blue) 5%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .result-badges>.mode-badge:nth-child(2){color:var(--lobby-purple);border-image-source:url('./button-pen-frame-purple.svg');background-color:color-mix(in srgb,var(--lobby-purple) 5%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .result-players{color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #result-modal #result-description{color:color-mix(in srgb,var(--lobby-purple) 82%,var(--ui-text))}
[data-skin="illustrated-fleet"] #result-modal .result-progression{border-image-source:url('./button-pen-frame-blue.svg');background-color:color-mix(in srgb,var(--lobby-blue) 3%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #result-modal .result-rank{color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #result-modal .result-duration time{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #result-modal .earned-group:first-child>b{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #result-modal .earned-group:nth-child(2)>b{color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #result-modal .earned-item{border-image-source:url('./button-pen-frame-green.svg');background-color:color-mix(in srgb,var(--lobby-green) 4%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .earned-group:nth-child(2) .earned-item{border-image-source:url('./button-pen-frame-purple.svg');background-color:color-mix(in srgb,var(--lobby-purple) 4%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .earned-more{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #result-modal .result-stats{border-image-source:url('./button-pen-frame-green.svg');background-color:color-mix(in srgb,var(--lobby-green) 3%,var(--paper-bg))}
[data-skin="illustrated-fleet"] #result-modal .result-stats h3{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(1) dd{color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(2) dd{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(3) dd{color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(4) dd{color:var(--lobby-green)}
[data-skin="illustrated-fleet"] #result-modal .result-actions>#result-rematch{--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-blue.svg');--ink-button-hatch:url('./button-pen-hatch-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg')}
[data-skin="illustrated-fleet"] #result-modal .result-actions>#result-menu{--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] #result-modal .result-actions>[data-social-action="share"]{--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-red.svg');--ink-button-hatch:url('./button-pen-hatch-red.svg');--ink-button-wash:url('./button-pen-wash-red.svg')}
[data-skin="illustrated-fleet"] #result-modal .result-actions>[data-social-action="challenge"]{--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}
[data-skin="illustrated-fleet"] #result-modal #result-close.result-secondary{color:var(--lobby-orange)}

/* Стан вибору відокремлено від клавіатурного фокуса. */
html[data-skin="illustrated-fleet"] body .zaruba-home #entry [role="radio"]:not(:focus-visible){outline:none}
html[data-skin="illustrated-fleet"] body .zaruba-home #entry :is(button,input):focus-visible{outline:2px dashed var(--ink-button-pen);outline-offset:4px}
html[data-skin="illustrated-fleet"] body .zaruba-home .difficulty-options [aria-checked="true"] .mode-check{width:38px;height:38px}
html[data-skin="illustrated-fleet"] body .zaruba-home #code[aria-invalid="true"]{--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-red.svg');--ink-button-hatch:url('./button-pen-hatch-red.svg');color:var(--lobby-red)}

/* Battle palette: clear own/enemy semantics while keeping the grid itself quiet. */
[data-skin="illustrated-fleet"] .room-navbar .room>b{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] .room-navbar>.room-player{color:var(--lobby-green)!important}
[data-skin="illustrated-fleet"] .room-navbar .room>.mode-badge{color:var(--lobby-blue);border-color:var(--lobby-blue);background-color:color-mix(in srgb,var(--lobby-blue) 7%,var(--paper-bg));box-shadow:none}
[data-skin="illustrated-fleet"] .room-navbar .room>.bot-badge{color:var(--lobby-purple);border-color:var(--lobby-purple);background-color:color-mix(in srgb,var(--lobby-purple) 8%,var(--paper-bg))}
[data-skin="illustrated-fleet"] .game>.turn-banner{--battle-accent:var(--lobby-blue);--battle-frame:url('./button-pen-frame-clean-blue.svg');--battle-wash:url('./button-pen-wash-blue.svg');color:var(--battle-accent);background-color:color-mix(in srgb,var(--battle-accent) 6%,var(--paper-bg));background-image:var(--battle-wash);background-position:center;background-size:cover;background-repeat:no-repeat}
[data-skin="illustrated-fleet"] .game>.turn-banner::before{border-image:var(--battle-frame) 22 30 22 22 / 9px 12px 9px 9px / 0 stretch}
[data-skin="illustrated-fleet"] .game>.turn-banner:is(.status-your-turn,.status-won){--battle-accent:var(--lobby-green);--battle-frame:url('./button-pen-frame-clean-green.svg');--battle-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] .game>.turn-banner:is(.status-opponent-turn,.status-waiting-ready){--battle-accent:var(--lobby-orange);--battle-frame:url('./button-pen-frame-clean-orange.svg');--battle-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] .game>.turn-banner:is(.status-shot-hit,.status-shot-sunk,.status-lost){--battle-accent:var(--lobby-red);--battle-frame:url('./button-pen-frame-clean-red.svg');--battle-wash:url('./button-pen-wash-red.svg')}
[data-skin="illustrated-fleet"] .battle>article:first-child .title :is(p,h2,.player-identity){color:var(--lobby-green)}
[data-skin="illustrated-fleet"] .battle>article:last-child .title :is(p,h2,.player-identity){color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] .battle>article:last-child .title>span{color:var(--lobby-red)}
[data-skin="illustrated-fleet"] .battle>article:first-child .board-viewport{background-color:color-mix(in srgb,var(--lobby-green) 5%,var(--paper-bg));background-image:linear-gradient(135deg,color-mix(in srgb,var(--lobby-green) 7%,transparent),transparent 52%)}
[data-skin="illustrated-fleet"] .battle>article:last-child .board-viewport{background-color:color-mix(in srgb,var(--lobby-orange) 5%,var(--paper-bg));background-image:linear-gradient(225deg,color-mix(in srgb,var(--lobby-orange) 7%,transparent),transparent 52%)}

/* Five profile destinations: each keeps the same hand-drawn colored frame. */
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(3){--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-red.svg');--ink-button-hatch:url('./button-pen-hatch-red.svg');--ink-button-wash:url('./button-pen-wash-red.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(4){--ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-orange.svg');--ink-button-hatch:url('./button-pen-hatch-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:nth-child(5){--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}

/* The honors cabinet uses illustrated cards, but the medal artwork remains the focal point. */
[data-skin="illustrated-fleet"] #profile-modal [data-profile-panel="honors"]{padding-inline:5px}
[data-skin="illustrated-fleet"] #profile-modal .honors-gallery>header h3{font-size:32px;color:var(--lobby-red)}
[data-skin="illustrated-fleet"] #profile-modal .honors-gallery>header p{font-size:18px}
[data-skin="illustrated-fleet"] #profile-modal .honor-totals{color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #profile-modal .honor-filter-row button,
[data-skin="illustrated-fleet"] #profile-modal .honor-group-filter button{--honor-button:var(--lobby-blue);min-height:40px;padding:6px 13px;border:6px solid transparent;border-image:url('./button-pen-frame-clean-blue.svg') 22 30 22 22 / 8px 10px 8px 8px / 0 stretch;border-radius:0;background:var(--paper-bg);box-shadow:none;color:var(--honor-button);font-size:16px}
[data-skin="illustrated-fleet"] #profile-modal :is(.honor-filter-row,.honor-group-filter) button:nth-child(4n+2){--honor-button:var(--lobby-green);border-image-source:url('./button-pen-frame-clean-green.svg')}
[data-skin="illustrated-fleet"] #profile-modal :is(.honor-filter-row,.honor-group-filter) button:nth-child(4n+3){--honor-button:var(--lobby-orange);border-image-source:url('./button-pen-frame-clean-orange.svg')}
[data-skin="illustrated-fleet"] #profile-modal :is(.honor-filter-row,.honor-group-filter) button:nth-child(4n){--honor-button:var(--lobby-purple);border-image-source:url('./button-pen-frame-clean-purple.svg')}
[data-skin="illustrated-fleet"] #profile-modal :is(.honor-filter-row,.honor-group-filter) button[aria-pressed="true"]{background:color-mix(in srgb,var(--honor-button) 12%,var(--paper-bg));color:var(--honor-button);text-decoration:underline;text-underline-offset:3px}
[data-skin="illustrated-fleet"] #profile-modal .honor-group>h3{font-size:26px;color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] #profile-modal .honor-card{border-radius:0;border:7px solid transparent;border-image:url('./button-pen-frame-clean-green.svg') 22 30 22 22 / 9px 12px 9px 9px / 0 stretch;background-color:color-mix(in srgb,var(--honor-color) 6%,var(--paper-bg));background-image:linear-gradient(104deg,color-mix(in srgb,var(--honor-color) 8%,transparent),transparent 55%);background-clip:padding-box;box-shadow:none}
[data-skin="illustrated-fleet"] #profile-modal .honor-card.rarity-rare{border-image-source:url('./button-pen-frame-clean-blue.svg')}
[data-skin="illustrated-fleet"] #profile-modal .honor-card.rarity-epic{border-image-source:url('./button-pen-frame-clean-purple.svg')}
[data-skin="illustrated-fleet"] #profile-modal .honor-card.rarity-legendary{border-image-source:url('./button-pen-frame-clean-orange.svg')}
[data-skin="illustrated-fleet"] #profile-modal .honor-copy h4{font-size:20px}
[data-skin="illustrated-fleet"] #profile-modal .honor-copy p{font-size:16px}
[data-skin="illustrated-fleet"] #profile-modal .honor-copy footer{font-size:14px}

/* На малих екранах профіль і шафа відзнак переходять у дві колонки. */
@media(max-width:800px){
 [data-skin="illustrated-fleet"] #profile-modal .profile-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-skin="illustrated-fleet"] #profile-modal .profile-tabs button:last-child{grid-column:1/-1}
}
@media(max-width:520px){
 [data-skin="illustrated-fleet"] #profile-modal .honor-copy h4{font-size:18px}
 [data-skin="illustrated-fleet"] #profile-modal .honor-copy p{font-size:14px}
}

/* Кольори екрана розстановки залишаються семантичними для свого й ворожого флоту. */
[data-skin="illustrated-fleet"] .battle>article:first-child .fleet-help{color:color-mix(in srgb,var(--lobby-green) 82%,var(--ui-text))}
[data-skin="illustrated-fleet"] .battle #shuffle{--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-clean-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg')}
[data-skin="illustrated-fleet"] .battle #ready{--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-clean-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] .battle :is(#shuffle,#ready){border:7px solid transparent;border-image:var(--ink-button-frame) 22 30 22 22 / 9px 11px 9px 9px / 0 stretch;background-color:color-mix(in srgb,var(--ink-button-pen) 5%,var(--paper-bg));background-image:var(--ink-button-wash);background-position:center;background-size:cover;background-repeat:no-repeat;background-clip:padding-box;color:var(--ink-button-pen);box-shadow:none}

/*
 * Підсумок перемоги складається з живого DOM-контенту й незалежних прозорих
 * декоративних шарів. Вони не впливають на геометрію та не перехоплюють ввід.
 */
[data-skin="illustrated-fleet"] #result-modal .result-dialog:has(.result-hero){
 position:relative;display:block;width:min(900px,100%);max-height:calc(100dvh - 24px);min-height:0;overflow:visible;padding:12px 24px 10px;border:0;border-image:none;outline:0;
 background-color:var(--paper-bg);
 background-image:url('./victory-frame-outer.svg?v=1.29.55'),linear-gradient(145deg,rgba(211,143,28,.035),transparent 34%,rgba(32,92,150,.025)),url('../../assets/lobby/paper-grain.svg');
 background-position:center;background-size:100% 100%,100% 100%,420px 420px;background-repeat:no-repeat,no-repeat,repeat;
 box-shadow:4px 6px 0 #17355e1a;
}
[data-skin="illustrated-fleet"] #result-modal .result-dialog:has(.result-hero)::before,
[data-skin="illustrated-fleet"] #result-modal .result-dialog:has(.result-hero)::after{display:none}
[data-skin="illustrated-fleet"] #result-modal .victory-corners{
 --victory-corner-size:48px;--victory-corner-inset:10px;
 position:absolute;z-index:6;inset:0;display:block;overflow:hidden;pointer-events:none;
}
[data-skin="illustrated-fleet"] #result-modal .victory-corners i{
 position:absolute;width:var(--victory-corner-size);aspect-ratio:466/437;
 background:url('../../assets/progression/honors/victory-corner-filigree.png?v=1.29.55') left top/contain no-repeat;
}
[data-skin="illustrated-fleet"] #result-modal .victory-corners i:nth-child(1){top:var(--victory-corner-inset);left:var(--victory-corner-inset)}
[data-skin="illustrated-fleet"] #result-modal .victory-corners i:nth-child(2){top:var(--victory-corner-inset);right:var(--victory-corner-inset);transform:scaleX(-1)}
[data-skin="illustrated-fleet"] #result-modal .victory-corners i:nth-child(3){bottom:var(--victory-corner-inset);left:var(--victory-corner-inset);transform:scaleY(-1)}
[data-skin="illustrated-fleet"] #result-modal .victory-corners i:nth-child(4){right:var(--victory-corner-inset);bottom:var(--victory-corner-inset);transform:scale(-1)}
[data-skin="illustrated-fleet"] #result-modal .result-hero{
 position:relative;isolation:isolate;overflow:visible;width:min(62.5%,calc(clamp(100px,22dvh,225px) * 1310 / 690));height:auto;min-height:0;aspect-ratio:1310/690;margin:0 auto;container-type:inline-size;
 background:transparent url('../../assets/progression/honors/victory-cup-ribbon-fit.png?v=1.29.55') center/contain no-repeat;
}
[data-skin="illustrated-fleet"] #result-modal .result-hero .result-icon{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;opacity:.001}
/* Центр намальованої стрічки лежить на 77% висоти ресурсу, а не файла. */
[data-skin="illustrated-fleet"] #result-modal .result-hero #result-title{
 position:absolute;z-index:2;inset:65% 12% 10%;display:grid;place-items:center;width:auto;margin:0;color:var(--lobby-green);
 font-size:12cqw;line-height:1;text-shadow:0 2px #fff7df;
}
[data-skin="illustrated-fleet"] #result-modal .result-badges{position:relative;z-index:3;margin:0 auto 3px;gap:8px}
[data-skin="illustrated-fleet"] #result-modal .result-badges>.mode-badge{min-height:26px;padding:1px 7px;border-width:3px;font-size:16px;box-shadow:none}
[data-skin="illustrated-fleet"] #result-modal .result-intro{position:relative;isolation:isolate;display:grid;justify-items:center;width:100%;min-width:0;min-height:0;gap:1px;margin:0 auto 3px}
[data-skin="illustrated-fleet"] #result-modal .result-intro-ships{position:absolute;z-index:0;inset:0;pointer-events:none}
[data-skin="illustrated-fleet"] #result-modal .result-intro-ships i{position:absolute;bottom:0;width:min(14%,95px);height:auto;aspect-ratio:620/392;background-position:center bottom;background-size:contain;background-repeat:no-repeat}
[data-skin="illustrated-fleet"] #result-modal .result-intro-ships i:first-child{left:0;background-image:url('../../assets/progression/honors/victory-intro-ship-left.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .result-intro-ships i:last-child{right:0;aspect-ratio:617/394;background-image:url('../../assets/progression/honors/victory-intro-ship-right.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .result-players{
 position:relative;z-index:1;display:block;width:58%;max-width:58%;min-width:0;height:auto;min-height:0;aspect-ratio:1968/256;margin:0 auto;padding:0;box-sizing:border-box;flex-wrap:nowrap;white-space:nowrap;
 border:0;border-image:none;outline:0;background:transparent url('../../assets/progression/honors/victory-player-ribbon-fit.png?v=1.29.55') center/contain no-repeat;box-shadow:none;
 color:var(--lobby-purple);font-size:24px;line-height:1;
}
[data-skin="illustrated-fleet"] #result-modal .result-players-content{position:absolute;inset:10% 10% 30%;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0}
[data-skin="illustrated-fleet"] #result-modal .result-players-content>.player-identity{display:flex;align-items:center;justify-content:center;min-width:0;flex:0 1 auto;gap:4px}
[data-skin="illustrated-fleet"] #result-modal .player-identity-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-skin="illustrated-fleet"] #result-modal .player-country-flag{flex-shrink:0;display:block;vertical-align:middle}
[data-skin="illustrated-fleet"] #result-modal .result-players .ui-icon{width:20px!important;height:20px!important;min-width:20px;flex:0 0 20px}
[data-skin="illustrated-fleet"] #result-modal .result-badges .ui-icon{width:17px!important;height:17px!important;min-width:17px}
[data-skin="illustrated-fleet"] #result-modal #result-description{position:relative;z-index:1;max-width:min(64ch,68%);margin:0 auto;padding:0;border:0;color:var(--lobby-purple);font-size:18px;line-height:1.15}
[data-skin="illustrated-fleet"] #result-modal .victory-confetti{position:absolute;z-index:0;inset:0 24% 26%;overflow:hidden;pointer-events:none}
[data-skin="illustrated-fleet"] #result-modal .victory-confetti i{
 --confetti-x:calc(3% + var(--confetti-index) * 4.05%);
 position:absolute;left:var(--confetti-x);top:-12%;width:8px;height:17px;border:1.5px solid color-mix(in srgb,currentColor 75%,#17355e);border-radius:2px 4px 2px 4px;
 color:hsl(calc(var(--confetti-index) * 67deg) 72% 45%);background:currentColor;opacity:0;
 animation:victory-confetti-fall calc(2.8s + var(--confetti-index) * .035s) cubic-bezier(.2,.55,.45,1) infinite;
 animation-delay:calc(var(--confetti-index) * -.17s);transform-origin:center;
}
[data-skin="illustrated-fleet"] #result-modal .victory-confetti i:nth-child(3n+1){top:-2%;width:12px;height:7px}
[data-skin="illustrated-fleet"] #result-modal .victory-confetti i:nth-child(3n+2){top:8%;width:7px;height:15px}
[data-skin="illustrated-fleet"] #result-modal .victory-confetti i:nth-child(4n){border-radius:50%;width:9px;height:9px}
@keyframes victory-confetti-fall{
 0%{opacity:0;transform:translate3d(-7px,-16px,0) rotate(0deg) scale(.8)}
 12%{opacity:.95}
 55%{opacity:.9;transform:translate3d(10px,58px,0) rotate(235deg) scale(1)}
 100%{opacity:0;transform:translate3d(-4px,124px,0) rotate(510deg) scale(.78)}
}

/* XP має незалежний геометричний центр; погон праворуч не зміщує число. */
[data-skin="illustrated-fleet"] #result-modal .result-progression.result-progression{
 position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:3px 10px;align-items:center;width:100%;min-height:0;margin:0 auto;padding:28px 32px 24px;
 border:0;border-image:none;outline:0;background-color:transparent;background-image:linear-gradient(110deg,rgba(38,124,80,.025),rgba(255,250,240,.42) 44%,rgba(211,143,28,.025));box-shadow:none;
}
[data-skin="illustrated-fleet"] #result-modal .result-progression::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:url('./victory-frame-green.svg?v=1.29.55') center/100% 100% no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,linear-gradient(90deg,#000 calc(50% - var(--result-flourish-gap,62px)),transparent 0 calc(50% + var(--result-flourish-gap,62px)),#000 0) bottom/100% 14px no-repeat}
[data-skin="illustrated-fleet"] #result-modal .result-progression::after{
 content:"";position:absolute;z-index:4;left:50%;bottom:-3px;width:180px;height:auto;aspect-ratio:235/51;pointer-events:none;
 background:url('../../assets/progression/honors/victory-center-flourish-reference.png?v=1.29.55') center/contain no-repeat;transform:translateX(-44%);clip-path:inset(0 20% 0 9%);
}
[data-skin="illustrated-fleet"] #result-modal .result-progression>*{position:relative;z-index:1}
[data-skin="illustrated-fleet"] #result-modal .result-dialog>.victory-corners,
[data-skin="illustrated-fleet"] #result-modal .result-progression>.victory-corners,
[data-skin="illustrated-fleet"] #result-modal .result-stats>.victory-corners{position:absolute;z-index:6}
[data-skin="illustrated-fleet"] #result-modal .result-progression>.victory-corners{--victory-corner-size:42px;--victory-corner-inset:7px}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong{
 grid-column:1/-1;grid-row:1;justify-self:center;padding:0;color:var(--lobby-green);font:700 34px/1 var(--ui-heading-font);
}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong::before,
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong::after{content:"";position:absolute;top:50%;width:75px;height:auto;aspect-ratio:138/68;background:url('../../assets/progression/honors/victory-xp-laurel.png?v=1.29.55') center/contain no-repeat}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong::before{right:calc(100% + 13px);transform:translateY(-50%)}
[data-skin="illustrated-fleet"] #result-modal .result-progression>strong::after{left:calc(100% + 13px);transform:translateY(-50%) scaleX(-1)}
[data-skin="illustrated-fleet"] #result-modal .result-rank{grid-column:3;grid-row:1;justify-self:end;align-self:center;font-size:20px;color:var(--lobby-purple)}
[data-skin="illustrated-fleet"] #result-modal .result-xp-transition{grid-column:1/-1;grid-row:2;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .result-xp-transition i{height:14px;border:2px solid #b67b16;border-radius:10px;background:#dfe8e9;box-shadow:inset 0 0 0 2px #fff9}
[data-skin="illustrated-fleet"] #result-modal .result-duration{grid-column:1/-1;grid-row:3;justify-self:center;font-size:17px;line-height:1.1}
[data-skin="illustrated-fleet"] #result-modal .result-duration time{color:var(--lobby-orange);font-size:18px;line-height:1.1}
[data-skin="illustrated-fleet"] #result-modal .rank-up{grid-column:1/-1;min-width:0;gap:5px;font-size:14px;line-height:1.1;letter-spacing:0}
[data-skin="illustrated-fleet"] #result-modal .rank-up .rank-insignia{width:14px;height:20px}
[data-skin="illustrated-fleet"] #result-modal .rank-up span{font-size:12px;gap:2px}
[data-skin="illustrated-fleet"] #result-modal .result-earned{grid-column:1/-1;display:grid;gap:0;min-width:0}
[data-skin="illustrated-fleet"] #result-modal .earned-group{display:grid;gap:4px;min-width:0}
[data-skin="illustrated-fleet"] #result-modal .earned-group>b{display:flex;align-items:center;gap:12px;color:var(--lobby-green);font-size:18px;line-height:1.1}
[data-skin="illustrated-fleet"] #result-modal .earned-group>b::after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--lobby-orange) 62%,transparent)}
[data-skin="illustrated-fleet"] #result-modal .earned-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:center;gap:12px;min-width:0;overflow:visible;padding:1px 4px 2px}
[data-skin="illustrated-fleet"] #result-modal .earned-item.earned-item{
 display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;min-height:40px;padding:0 13px 0 0;
 border:0;border-image:none;outline:0;background:transparent;box-shadow:none;overflow:visible;
}
[data-skin="illustrated-fleet"] #result-modal .honor-medal-compact{width:48px;height:auto;aspect-ratio:1;margin:0;filter:drop-shadow(0 3px 2px #172e5730)}
[data-skin="illustrated-fleet"] #result-modal .earned-item[data-honor-id="double_hit"] .honor-medal{background-position:center;background-size:contain;background-image:url('../../assets/progression/honors/victory-medal-double-hit.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .earned-item[data-honor-id="triple_hit"] .honor-medal{background-position:center;background-size:contain;background-image:url('../../assets/progression/honors/victory-medal-triple-hit.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .earned-item>span:not(.honor-medal){display:block;min-width:0}
[data-skin="illustrated-fleet"] #result-modal .earned-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lobby-blue);font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .earned-item small{display:none}
[data-skin="illustrated-fleet"] #result-modal .earned-item em{font-size:17px}
[data-skin="illustrated-fleet"] #result-modal .earned-more{align-self:center;min-width:2.3em;color:var(--lobby-orange);font-size:18px}
[data-skin="illustrated-fleet"] #result-modal .result-progression details{display:block;grid-column:1/-1;margin-top:0;font-size:15px}
[data-skin="illustrated-fleet"] #result-modal .result-progression summary{font-size:17px;cursor:pointer;min-height:28px}

/* Статистика повторює еталонну сітку 4 + 2, а кораблі лишаються в кутах. */
[data-skin="illustrated-fleet"] #result-modal .result-stats.result-stats{position:relative;isolation:isolate;overflow:visible;width:100%;min-height:0;margin:7px auto 0;padding:7px 70px 8px;border:0;border-image:none;outline:0;background:transparent;box-shadow:none}
[data-skin="illustrated-fleet"] #result-modal .result-stats::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:url('./victory-frame-blue.svg?v=1.29.55') center/100% 100% no-repeat}
[data-skin="illustrated-fleet"] #result-modal .result-stats-ships{position:absolute;z-index:0;inset:0;pointer-events:none}
[data-skin="illustrated-fleet"] #result-modal .result-stats-ships i{position:absolute;bottom:9px;width:58px;height:auto;aspect-ratio:360/208;background-position:center bottom;background-size:contain;background-repeat:no-repeat;opacity:.9}
[data-skin="illustrated-fleet"] #result-modal .result-stats-ships i:first-child{left:1.5%;background-image:url('../../assets/progression/honors/victory-stats-ship-left.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .result-stats-ships i:last-child{right:1.5%;aspect-ratio:359/208;background-image:url('../../assets/progression/honors/victory-stats-ship-right.png?v=1.29.55')}
[data-skin="illustrated-fleet"] #result-modal .result-stats>*{position:relative;z-index:2}
[data-skin="illustrated-fleet"] #result-modal .result-stats>.result-stats-ships{position:absolute;z-index:0;inset:0}
[data-skin="illustrated-fleet"] #result-modal .result-stats>.victory-corners{--victory-corner-size:32px;--victory-corner-inset:6px}
[data-skin="illustrated-fleet"] #result-modal .result-stats h3{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 3px;color:var(--lobby-green);font-size:23px}
[data-skin="illustrated-fleet"] #result-modal .result-stats h3::before,
[data-skin="illustrated-fleet"] #result-modal .result-stats h3::after{content:"";display:block;width:68px;height:2px;background:linear-gradient(90deg,transparent,var(--lobby-orange),transparent)}
[data-skin="illustrated-fleet"] #result-modal .result-stats h3 .ui-icon{width:22px!important;height:22px!important;color:var(--lobby-orange)}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 0;margin:0}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div{min-width:0;min-height:0;padding:0 6px;border-left:1px solid #29446b25}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(1),
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(5){border-left:0}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(5){grid-column:auto;grid-row:auto}
[data-skin="illustrated-fleet"] #result-modal .result-stats dl>div:nth-child(6){grid-column:auto;grid-row:auto}
[data-skin="illustrated-fleet"] #result-modal .result-stats dt{font-size:15px;line-height:1.1}
[data-skin="illustrated-fleet"] #result-modal .result-stats dd{margin:1px 0 0;font-size:20px;line-height:1}

/* Дії залишаються у двох однакових колонках, як у погодженому макеті. */
[data-skin="illustrated-fleet"] #result-modal .result-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:5px 10px;margin-top:7px}
[data-skin="illustrated-fleet"] #result-modal .result-actions>button{min-height:44px;padding:2px 8px;border-width:5px;gap:6px;font-size:20px}
[data-skin="illustrated-fleet"] #result-modal #result-close.result-secondary{display:block;min-height:44px;margin:0 auto;padding:4px 8px;color:var(--lobby-orange);font-size:21px;text-decoration:underline;text-underline-offset:4px}


@media(prefers-reduced-motion:reduce){[data-skin="illustrated-fleet"] #result-modal .victory-confetti i{display:none;animation:none}}

/* Розгорнута другорядна інформація має власний scroll і не зсуває основні дії. */
[data-skin="illustrated-fleet"] #result-modal .result-progression:has(details[open]){z-index:10}
[data-skin="illustrated-fleet"] #result-modal .result-progression details[open]{overflow:visible;max-height:none;z-index:8}
[data-skin="illustrated-fleet"] #result-modal .result-detail-content{position:absolute;z-index:9;bottom:100%;left:0;display:block;width:100%;max-height:min(180px,35dvh);overflow:auto;padding:10px;background:var(--paper-bg);border:2px solid var(--lobby-green);box-shadow:0 3px 8px #172e5730;box-sizing:border-box;white-space:normal}
[data-skin="illustrated-fleet"] #result-modal .earned-group>div{position:relative}
[data-skin="illustrated-fleet"] #result-modal .earned-group .earned-more{position:static;grid-column:auto;width:auto;min-width:28px;margin:0}
[data-skin="illustrated-fleet"] #result-modal .earned-more summary{min-width:44px;min-height:32px;display:grid;place-items:center;list-style:none}
[data-skin="illustrated-fleet"] #result-modal .earned-more .result-detail-content{display:grid;gap:6px;text-align:left}

/* Social повторно використовує матеріали погодженої перемоги, геометрія — у social.css. */
[data-skin="illustrated-fleet"] .social-dialog{--ui-control-font-size:26px;--ui-dialog-heading-size:40px;--ui-surface-padding:28px;border:0;outline:0;background-color:var(--paper-bg);background-image:url('./victory-frame-outer.svg'),url('../../assets/lobby/paper-grain.svg');background-size:100% 100%,420px 420px;background-repeat:no-repeat,repeat;box-shadow:4px 6px 0 #17355e1a}
[data-skin="illustrated-fleet"] .social-dialog h2{text-align:center;color:var(--lobby-blue)}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i{position:absolute;width:46px;aspect-ratio:466/437;background:url('../../assets/progression/honors/victory-corner-filigree.png') center/contain no-repeat}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i:nth-child(1){left:8px;top:8px}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i:nth-child(2){right:8px;top:8px;transform:scaleX(-1)}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i:nth-child(3){left:8px;bottom:8px;transform:scaleY(-1)}
[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i:nth-child(4){right:8px;bottom:8px;transform:scale(-1)}
[data-skin="illustrated-fleet"] .social-dialog [data-provider="telegram"],[data-skin="illustrated-fleet"] .social-dialog [data-provider="facebook"]{--ink-button-pen:var(--lobby-blue);--ink-button-frame:url('./button-pen-frame-clean-blue.svg');--ink-button-hatch:url('./button-pen-hatch-blue.svg');--ink-button-wash:url('./button-pen-wash-blue.svg')}
[data-skin="illustrated-fleet"] .social-dialog [data-provider="whatsapp"]{--ink-button-pen:var(--lobby-green);--ink-button-frame:url('./button-pen-frame-clean-green.svg');--ink-button-hatch:url('./button-pen-hatch-green.svg');--ink-button-wash:url('./button-pen-wash-green.svg')}
[data-skin="illustrated-fleet"] .social-dialog [data-provider="viber"],[data-skin="illustrated-fleet"] .social-dialog [data-provider="copy"],[data-skin="illustrated-fleet"] .social-dialog [data-provider="native"]{--ink-button-pen:var(--lobby-purple);--ink-button-frame:url('./button-pen-frame-clean-purple.svg');--ink-button-hatch:url('./button-pen-hatch-purple.svg');--ink-button-wash:url('./button-pen-wash-purple.svg')}
[data-skin="illustrated-fleet"] .social-dialog .social-download{--ink-button-pen:var(--lobby-orange);--ink-button-frame:url('./button-pen-frame-orange.svg');--ink-button-hatch:url('./button-pen-hatch-orange.svg');--ink-button-wash:url('./button-pen-wash-orange.svg')}
[data-skin="illustrated-fleet"] .social-dialog .social-close{--ink-button-pen:var(--lobby-red);--ink-button-frame:url('./button-pen-frame-clean-red.svg');--ink-button-hatch:url('./button-pen-hatch-red.svg');--ink-button-wash:url('./button-pen-wash-red.svg')}
@media(max-width:650px),(max-height:450px){[data-skin="illustrated-fleet"] .social-dialog{--ui-control-font-size:22px;--ui-dialog-heading-size:32px}[data-skin="illustrated-fleet"] .social-dialog>.victory-corners i{width:28px}}