/* Device mode is independent of the visual theme. Desktop never enters it on resize. */
.device-layout-settings{border-top:1px solid #8d805950;margin-top:24px;padding-top:18px}.device-layout-settings p{font:13px/1.6 system-ui;color:#b5c8cc}.device-layout-settings label{display:grid;gap:8px}.device-layout-settings select{min-height:44px;background:#0b2530;color:#ebdeb9;border:1px solid #b39a64;padding:10px}
.device-layout-shortcut{position:fixed;right:12px;bottom:57px;z-index:242;width:42px;height:36px;border:1px solid #a28d5d;border-radius:6px;background:#0a2532ee;color:#e5d6ad;font-size:22px;cursor:pointer}.screen-auth .device-layout-shortcut{top:12px;right:12px;bottom:auto}.mobile-controls[hidden]{display:none!important}.mobile-controls{position:fixed;inset:0;z-index:110;pointer-events:none;--touch-edge:max(15px,env(safe-area-inset-right));--touch-bottom:max(18px,env(safe-area-inset-bottom));font-family:system-ui}.mobile-controls button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:auto;color:#f4e8c9;border:2px solid #b3a06c;box-shadow:0 4px 15px #0009,inset 0 0 0 3px #071c29,inset 0 0 24px #48cbe133;background:radial-gradient(circle at 35% 25%,#215974ec,#071c2bee 75%)}.mobile-controls button:focus-visible{outline:3px solid #b9f4ff;outline-offset:3px}.mobile-controls button.is-held{border-color:#b8f5ff;box-shadow:0 0 22px #70e8ff88,inset 0 0 0 3px #133d4f;transform:scale(.97)}.mobile-controls button:disabled{filter:grayscale(.75);opacity:.6}.mobile-stick{position:absolute;left:max(23px,env(safe-area-inset-left));bottom:var(--touch-bottom);width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,transparent 41%,#9ae8e824 42%,transparent 44%)!important}.mobile-stick-thumb{display:block;width:54px;height:54px;border-radius:50%;margin:auto;border:2px solid #cbb77e;background:radial-gradient(circle at 30% 20%,#5aadb0,#112d3c);box-shadow:0 3px 12px #0008;transform:translate(var(--stick-x,0px),var(--stick-y,0px))}.mobile-stick>small{position:absolute;bottom:8px;left:0;width:100%;font-size:8px;letter-spacing:.17em;color:#a7c6cd}.mobile-actions{position:absolute;right:var(--touch-edge);bottom:var(--touch-bottom);width:270px;height:245px;pointer-events:none}.mobile-actions[hidden]{display:none}.mobile-attack{position:absolute;right:0;bottom:0;width:91px;height:91px;border-radius:50%;font-size:34px!important;border-color:#8be7ef!important}.mobile-attack small{display:block;font-size:8px;letter-spacing:.12em}.mobile-skill{position:absolute;width:65px;height:65px;border-radius:50%;padding:4px!important;display:grid;align-content:center;justify-items:center;gap:1px;overflow:hidden}.mobile-skill b{font-size:19px;color:#9ee8ee}.mobile-skill-name{font-size:7px;line-height:1.15;max-width:52px;max-height:23px;overflow:hidden}.mobile-skill-q{right:102px;bottom:0}.mobile-skill-w{right:150px;bottom:74px}.mobile-skill-e{right:103px;bottom:147px}.mobile-skill-r{right:21px;bottom:170px;border-color:#d8b25b!important}.mobile-cooldown{position:absolute;inset:0;display:grid;place-content:center;font:700 25px system-ui;background:#04111ad9}.mobile-cooldown:empty{display:none}.mobile-supports{position:absolute;bottom:var(--touch-bottom);left:50%;transform:translateX(-50%);display:flex;gap:7px}.mobile-supports button{min-height:43px;max-width:87px;padding:7px!important;border-radius:13px;font-size:9px;line-height:1.3}.mobile-cancel{position:absolute;right:80px;top:23%;width:135px;height:48px;display:grid;place-content:center;border:2px solid #ef8c83;border-radius:30px;background:#4c202ccf;color:#ffe2d9;font-size:13px}.mobile-cancel[hidden]{display:none}.mobile-cancel.is-over{background:#b43a42}.mobile-touch-hint{position:absolute;left:50%;bottom:calc(var(--touch-bottom) + 53px);transform:translateX(-50%);font-size:9px;color:#d3dfdb;white-space:nowrap;text-shadow:0 2px 5px #000;pointer-events:none}
.device-layout-standalone{position:fixed;left:12px;bottom:12px;z-index:242;padding:9px;border:1px solid #a28d5d;border-radius:7px;background:#071d2bf0;color:#e8d5a6;font:12px system-ui}.device-layout-standalone summary{cursor:pointer}.device-layout-standalone select{display:block;margin-top:9px;padding:8px;background:#123541;color:#f3e4bc;border:1px solid #a28d5d}
html[data-device-layout=mobile] :is(button,a,input,select,summary){-webkit-tap-highlight-color:transparent}html[data-device-layout=mobile] input,html[data-device-layout=mobile] select,html[data-device-layout=mobile] textarea{font-size:16px!important}html[data-device-layout=mobile] body{overscroll-behavior:none}html[data-device-layout=mobile] #dimensionHome,html[data-device-layout=mobile] dialog{box-sizing:border-box}html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome{inset:0;height:100dvh;grid-template-rows:58px 43px minmax(0,1fr) 0;padding:0 0 calc(64px + env(safe-area-inset-bottom));overflow:hidden}html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome>.ds-header{height:58px;min-height:58px;padding:7px 10px;gap:9px;flex-wrap:nowrap;grid-row:1}html[data-device-layout=mobile] #dimensionHome .ds-brand{font-size:16px!important;white-space:nowrap}html[data-device-layout=mobile] #dimensionHome :is(.ds-current-section,.ds-header-tools,.ds-wallet){display:none!important}html[data-device-layout=mobile] #dimensionHome .ds-account{margin-left:auto;min-width:0;max-width:125px;font-size:11px;padding:5px!important}html[data-device-layout=mobile] #dimensionHome .ds-account img{width:25px;height:29px}html[data-device-layout=mobile] #dimensionHome .ds-settings{width:40px;min-height:40px}html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav{position:fixed;inset:auto 0 0;bottom:0;z-index:220;display:flex!important;justify-content:space-around;align-items:stretch;height:calc(62px + env(safe-area-inset-bottom));padding:0 5px env(safe-area-inset-bottom);background:linear-gradient(#133a49,#061824);border-top:1px solid #b29a68;box-shadow:0 -5px 25px #0008;overflow-x:auto;margin:0;gap:0}html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>button{min-width:53px;flex:1;padding:8px 2px;font-size:10px;min-height:52px;white-space:nowrap}html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>button::before{display:block;font:22px/1.3 Georgia;color:#d0bb83;content:'◇'}html[data-device-layout=mobile] #dimensionHome .legacy-primary-nav>[data-legacy-page=home]::before{content:'⌂'}html[data-device-layout=mobile] #dimensionHome .legacy-primary-nav>[data-legacy-page=play]::before{content:'⚔'}html[data-device-layout=mobile] #dimensionHome .legacy-primary-nav>[data-legacy-page=heroes]::before{content:'♛'}html[data-device-layout=mobile] #dimensionHome .legacy-primary-nav>[data-legacy-page=workbench]::before{content:'⚒'}html[data-device-layout=mobile] #dimensionHome .legacy-primary-nav>[data-legacy-page=places]::before{content:'◎'}html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome>.ds-stage{grid-template-columns:minmax(0,1fr);grid-row:3;padding:0;overflow:hidden}html[data-device-layout=mobile] #dimensionHome :is(.legacy-social-access,.ds-quick-links){display:none!important}html[data-device-layout=mobile] #dimensionHome .legacy-context-nav{grid-row:2;padding:0 8px;overflow-x:auto;white-space:nowrap}html[data-device-layout=mobile] #dimensionHome .legacy-context-nav>button{min-height:42px;flex-shrink:0}html[data-device-layout=mobile] #dimensionHome :is(.ds-page-workspace,.ds-heroes-workspace,.ds-collection-workspace,.legacy-home){min-height:0;overflow-y:auto;padding:12px!important}html[data-device-layout=mobile] #dimensionHome .legacy-home-feature{min-height:300px}html[data-device-layout=mobile] #dimensionHome .legacy-home-copy h1{font-size:36px}html[data-device-layout=mobile] #dimensionHome .legacy-home-cards{grid-template-columns:1fr}html[data-device-layout=mobile] #dimensionHome .ds-hall{grid-template-columns:1fr;grid-template-rows:auto;overflow-y:auto;gap:0}html[data-device-layout=mobile] #dimensionHome .ds-play-panel{min-height:0!important;padding:15px!important;overflow:visible}html[data-device-layout=mobile] #dimensionHome .ds-hero-stage{min-height:300px;height:360px}html[data-device-layout=mobile] #dimensionHome[data-play-step=prepare] .ds-hall{grid-template-rows:auto 360px auto}html[data-device-layout=mobile] #dimensionHome .ds-primary-start{min-height:52px;font-size:20px}html[data-device-layout=mobile] .social-ui{--social-bar:44px}html[data-device-layout=mobile] .social-dock{bottom:calc(64px + env(safe-area-inset-bottom));height:44px;background:#071b28;max-width:150px;left:auto;border-radius:8px 0 0 0}html[data-device-layout=mobile] :is(.social-drawer,.social-windows){bottom:calc(112px + env(safe-area-inset-bottom));max-height:calc(100dvh - 180px)}html[data-device-layout=mobile] .device-layout-shortcut{left:10px;right:auto;bottom:calc(70px + env(safe-area-inset-bottom));width:38px;height:32px}html[data-device-layout=mobile] .screen-auth .device-layout-shortcut{left:auto;bottom:auto;right:10px}
/* Play uses the full center viewport; touch buttons are anchored to the screen, not the document. */
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome{grid-template-rows:42px 0 minmax(0,1fr) 0;padding-bottom:0}html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome>.ds-header{height:42px;min-height:42px;padding:2px 8px}html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome :is(.legacy-context-nav,.legacy-primary-nav){display:none!important}html[data-device-layout=mobile] body[data-touch-scene=true] .social-ui,html[data-device-layout=mobile] body[data-touch-scene=true] .device-layout-shortcut{display:none!important}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI :is(.skill-bar,.attack-hint,.game-hint,.auxiliary-hud,.combat-coach,.combat-short-help,.game-view-button,.combat-feed,.team-hud){display:none!important}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud{left:50%;bottom:10px;transform:translateX(-50%);width:220px;max-width:35%;padding:0;border:0;background:#061927ad;pointer-events:none}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .player-hud{min-width:0;width:100%;padding:5px}.mobile-controls~*{--mobile-present:1}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .hud-portrait{width:30px;height:34px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .health-details{min-width:0}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .health-details strong{font-size:10px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #statusText{display:none}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .game-top-actions{top:5px;right:9px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .game-top-actions button{min-width:40px;min-height:35px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-hud{left:10px;top:80px;bottom:auto;width:125px;font-size:9px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .scoreboard{top:5px;left:50%;transform:translateX(-50%);max-width:65%;padding:5px;font-size:11px}html[data-device-layout=mobile] body[data-touch-scene=true] .practice-tools{top:120px;right:8px;max-width:160px;max-height:100px;overflow:auto;font-size:9px}html[data-device-layout=mobile] :is(dialog:not(.home-panel-inline),.dialog){max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px);padding:22px;overflow:auto}html[data-device-layout=mobile] dialog button{min-height:42px}html[data-device-layout=mobile] #world canvas{touch-action:none}html[data-device-layout=mobile] .legacy-login-stage{min-height:100dvh}html[data-device-layout=mobile] #dimensionHome .ds-collection-tabs{overflow-x:auto;flex-wrap:nowrap}html[data-device-layout=mobile] #dimensionHome .ds-collection-tabs button{flex-shrink:0}
@media(orientation:portrait){html[data-device-layout=mobile] .mobile-actions{transform:scale(.8);transform-origin:bottom right;right:8px;bottom:65px}html[data-device-layout=mobile] .mobile-stick{width:108px;height:108px;bottom:74px;left:14px}html[data-device-layout=mobile] .mobile-supports{bottom:21px;left:50%;max-width:100%;gap:5px}html[data-device-layout=mobile] .mobile-touch-hint{bottom:calc(209px + env(safe-area-inset-bottom));font-size:8px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud{bottom:255px;width:180px;max-width:70%}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .scoreboard{max-width:78%;top:43px}html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-hud{top:105px}html[data-device-layout=mobile] .mobile-cancel{top:33%;right:30px}}
@media(orientation:landscape) and (max-height:500px){html[data-device-layout=mobile] #dimensionHome .legacy-home-feature{min-height:250px}html[data-device-layout=mobile] .mobile-controls{--touch-bottom:9px}html[data-device-layout=mobile] .mobile-actions{transform:scale(.82);transform-origin:bottom right}html[data-device-layout=mobile] .mobile-stick{width:110px;height:110px}html[data-device-layout=mobile] .mobile-supports{bottom:55px}html[data-device-layout=mobile] .mobile-touch-hint{display:none}}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav{box-sizing:border-box;overflow-y:hidden;scrollbar-width:none}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>button{box-sizing:border-box;min-width:0;height:62px;max-height:62px;font:600 9px/1.2 system-ui!important;letter-spacing:0;overflow:hidden}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>[data-legacy-page=home]::before{content:'⌂'}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>[data-legacy-page=play]::before{content:'⚔'}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>[data-legacy-page=heroes]::before{content:'♛'}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>[data-legacy-page=workbench]::before{content:'⚒'}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-primary-nav>[data-legacy-page=places]::before{content:'◎'}
html[data-device-layout=mobile][data-presentation=legacy] #dimensionHome .legacy-context-nav{overflow-y:hidden;scrollbar-width:none}
html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome .ds-scene-workspace{grid-row:1!important;grid-column:1!important;height:100%;align-self:stretch}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI :is(.auxiliary-bar,.ux-practice-journey,.target-card,.combat-objective,.rift-route){display:none!important}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-coach{display:block!important}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .command-feedback{bottom:auto;top:60px;max-width:40%;font-size:11px}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .practice-tools{top:100px;left:10px;right:auto;width:125px;padding:5px;max-height:108px;overflow:auto}
html[data-device-layout=mobile] #gameUI .practice-tools :is(b,p){display:none}
html[data-device-layout=mobile] #gameUI .practice-tools button{font-size:8px;min-height:33px;padding:4px}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .practice-tools{top:115px;max-height:90px}
.mobile-skill>.skill-icon{width:33px;height:33px;display:block;filter:drop-shadow(0 0 5px #8adef6)}.mobile-skill>.skill-icon svg{width:100%;height:100%}.mobile-skill>b{position:absolute;bottom:3px;right:7px;font-size:8px!important}.mobile-skill-name{display:none}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud{height:38px;min-height:0;max-height:38px;box-sizing:border-box;align-items:center;border-radius:8px;box-shadow:none}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .player-hud{height:38px;min-height:0;max-height:38px;box-sizing:border-box;border:0;background:none;gap:5px}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .health-details{font-size:9px}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-hud{left:10px;top:5px;width:125px;padding:6px;background:#071e2bbd}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #hudClass{display:none}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .battle-minimap{top:44px;left:10px;right:auto;bottom:auto;width:88px;height:65px}
html[data-device-layout=mobile] .control-choices,html[data-device-layout=mobile] #castMode{display:none}
html[data-device-layout=mobile] #gameTooltip{display:none!important}
html[data-device-layout=mobile] .intro-controls,html[data-device-layout=mobile] .tavern-hint{display:none!important}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-top{padding:8px 10px;max-width:100%;gap:5px}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-top h1{font-size:20px;margin:0}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-top :is(p,.tiny){display:none}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-top button{min-height:38px;padding:5px 8px;font-size:9px}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-guests{display:none}
html[data-device-layout=mobile] body[data-touch-scene=true] .tavern-chat{right:10px;left:auto;bottom:15px;max-width:calc(100vw - 155px);width:260px;max-height:150px}
html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome{grid-template-rows:calc(58px + env(safe-area-inset-top)) 43px minmax(0,1fr) 0}
html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome>.ds-header{box-sizing:border-box;height:calc(58px + env(safe-area-inset-top));min-height:0;padding-top:calc(7px + env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
html[data-device-layout=mobile][data-presentation=legacy] body[data-touch-scene=true] #dimensionHome{grid-template-rows:calc(42px + env(safe-area-inset-top)) 0 minmax(0,1fr) 0}
html[data-device-layout=mobile][data-presentation=legacy] body[data-touch-scene=true] #dimensionHome>.ds-header{height:calc(42px + env(safe-area-inset-top));min-height:0;padding-top:calc(2px + env(safe-area-inset-top))}
html[data-device-layout=mobile] #dimensionHome :is(.ds-page-workspace,.ds-collection-workspace,.ds-heroes-workspace) button{min-height:44px}
html[data-device-layout=mobile] .screen-auth .device-layout-shortcut{top:calc(12px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
@media(prefers-reduced-motion:reduce){html[data-device-layout=mobile] .mobile-controls *{transition:none!important;animation:none!important}}

/* The menu keeps one screen on phones and tablets. Touch scenes retain their own HUD. */
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome{
 --mobile-header-size:58px;
 --mobile-nav-size:62px;
 --mobile-context-size:44px;
 grid-template-rows:calc(var(--mobile-header-size) + env(safe-area-inset-top)) var(--mobile-context-size) minmax(0,1fr) 0;
 padding-bottom:calc(var(--mobile-nav-size) + 46px + env(safe-area-inset-bottom));
 height:100dvh;
 min-height:0;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome>.ds-header{
 height:calc(var(--mobile-header-size) + env(safe-area-inset-top));
 min-height:0;
 padding-top:calc(5px + env(safe-area-inset-top));
 padding-bottom:5px;
 gap:6px;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome :is(.ds-account,.ds-settings){min-height:44px;box-sizing:border-box}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .ds-settings{min-width:44px;width:44px;flex:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome>.ds-stage{min-width:0;min-height:0;height:100%;overflow:hidden}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-primary-nav{
 height:calc(var(--mobile-nav-size) + env(safe-area-inset-bottom));
 padding-left:max(3px,env(safe-area-inset-left));
 padding-right:max(3px,env(safe-area-inset-right));
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-primary-nav>button{
 height:var(--mobile-nav-size);
 max-height:var(--mobile-nav-size);
 min-height:44px;
 min-width:0;
 padding:5px 2px;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-primary-nav>button::before{font-size:21px;line-height:1.25}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-context-nav{
 display:flex;
 align-items:stretch;
 gap:0;
 padding:0 max(6px,env(safe-area-inset-left)) 0 max(6px,env(safe-area-inset-right));
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-context-nav>button{
 flex:1 1 0;
 min-width:0;
 min-height:44px;
 margin:0;
 padding:5px 6px;
 font-size:9px;
 letter-spacing:.025em;
 white-space:normal;
 line-height:1.2;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-context-nav>[data-custom-action=create]{margin-left:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-context-nav>[data-custom-action]{font-size:9px;color:#e5d1a0}

/* Six choices per page: the catalogue grows through pages, never through native scrolling. */
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=select] .ds-hall{
 height:100%;
 min-height:0;
 padding:0;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-play-panel{
 box-sizing:border-box;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:38px minmax(0,1fr) 130px 48px;
 align-content:stretch;
 gap:8px;
 width:100%;
 height:100%;
 min-height:0!important;
 padding:10px!important;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading{grid-column:1;grid-row:1;min-height:0;margin:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading .ds-panel-kicker{display:block;margin:0 0 3px;font-size:8px;letter-spacing:.12em;line-height:1.2}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading h2{margin:0;font-size:23px;line-height:1.1}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-categories{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-catalogue{
 grid-column:1;
 grid-row:2;
 display:grid;
 grid-template-rows:minmax(0,1fr) 44px;
 gap:4px;
 min-width:0;
 min-height:0;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));
 align-content:stretch;
 gap:6px;
 width:100%;
 height:100%;
 min-height:0;
 margin:0;
 padding:0;
 border:0;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button{
 box-sizing:border-box;
 display:grid;
 grid-template-columns:29px minmax(0,1fr);
 grid-template-rows:auto auto;
 align-items:center;
 align-content:center;
 justify-content:stretch;
 gap:2px 7px;
 min-width:0;
 min-height:44px;
 height:100%;
 margin:0;
 padding:7px 8px;
 border:1px solid #698a9866;
 border-radius:4px;
 background:linear-gradient(140deg,#193847b3,#081b29dc);
 text-align:left;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button:last-child{border-right:1px solid #698a9866}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button[aria-pressed=true]{border:1px solid #8ee3e5;background:radial-gradient(ellipse at 0 50%,#3db7c944,transparent 80%),linear-gradient(130deg,#164758,#112f42);box-shadow:inset 0 0 17px #56cbe81f,0 0 10px #5bd9eb15}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button[aria-pressed=true]::after{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-icon{
 grid-column:1;
 grid-row:1 / 3;
 width:29px;
 height:29px;
 margin:0;
 font-size:24px;
 filter:drop-shadow(0 0 7px #4dd6eb40);
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-icon::before,
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-icon::after{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button strong{grid-column:2;grid-row:1;order:0;max-width:100%;font-size:14px;line-height:1.15;letter-spacing:0;text-transform:none;overflow-wrap:anywhere;hyphens:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button small{grid-column:2;grid-row:2;order:0;margin:0;font:9px/1.25 system-ui;color:#b8d0d6;overflow-wrap:normal}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager{min-height:44px;margin:0;gap:12px;font-size:10px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager>button{box-sizing:border-box;min-width:44px;min-height:44px;width:44px;height:44px;margin:0;border-radius:4px;font-size:25px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail{
 box-sizing:border-box;
 grid-column:1;
 grid-row:3;
 align-self:stretch;
 display:flex;
 flex-direction:column;
 justify-content:center;
 width:100%;
 max-width:none;
 min-width:0;
 min-height:0;
 margin:0;
 padding:9px 12px;
 border:1px solid #b49a5b4d;
 border-radius:4px;
 background:linear-gradient(130deg,#122e3cdb,#091b2cde);
 color:#c6d9df;
 font:11px/1.4 system-ui;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail :is(.ds-mode-icon,.client-mode-type,.client-mode-return){display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .legacy-selected-mode{margin:0 0 2px;font-size:20px;line-height:1.15}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .legacy-selected-spec{margin:0 0 5px;font-size:10px;line-height:1.3}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail p{margin:0 0 5px;font-size:11px;line-height:1.4}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail>.client-mode-reward{margin:0;padding:0;border:0;font-size:9px;line-height:1.3;color:#e1cf9f}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions{
 position:static;
 grid-column:1;
 grid-row:4;
 display:grid;
 grid-template-columns:minmax(0,1fr) 100px;
 align-items:stretch;
 gap:7px;
 min-width:0;
 min-height:44px;
 margin:0;
 padding:0;
 border:0;
 background:none;
 box-shadow:none;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.client-mode-summary{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.ds-primary-start{box-sizing:border-box;align-self:stretch;width:100%;min-width:0;min-height:44px;margin:0;padding:7px 8px;font-size:13px;line-height:1.2;letter-spacing:.02em}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.ds-secondary-actions{display:flex;align-self:stretch;width:100%;min-width:0;min-height:44px;margin:0;gap:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.ds-secondary-actions>button{box-sizing:border-box;flex:1;min-width:0;min-height:44px;margin:0;padding:5px;font-size:9px;line-height:1.3}

/* The start screen changes its composition rather than shrinking desktop content. */
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home{
 box-sizing:border-box;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:44px minmax(0,1fr) 156px;
 gap:8px;
 height:100%;
 min-height:0;
 padding:10px!important;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channels{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-height:0;padding:0;border:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;margin:0;padding:4px;border:1px solid #7394a433;border-radius:3px;background:#102b3b90;color:#a9c0ca;text-align:center;overflow:hidden}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel>span{font:17px/1 Georgia;color:#cbb882}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel>strong{font:600 9px/1.25 system-ui;letter-spacing:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel[aria-pressed=true]{color:#f0dfb6;border-color:#8bd1d59c;background:linear-gradient(140deg,#2b788b5c,#102b3b99);box-shadow:inset 0 0 16px #66c6d326}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-feature{grid-column:1;grid-row:2;min-height:0;height:100%;background-position:59% center}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-feature[data-story=heroes]{background-image:url('/assets/interface/heldenhof-v1.png')}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-feature[data-story=adventure]{background-image:url('/assets/wunderpfad/wunderinsel-v1.png')}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy{box-sizing:border-box;justify-content:center;width:100%;max-width:none;min-height:0;height:100%;padding:20px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy .legacy-eyebrow{font-size:8px;letter-spacing:.13em;line-height:1.4}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy h1{margin:12px 0;font-size:clamp(29px,8.5vw,38px);line-height:1.06}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy p{max-width:350px;font-size:12px;line-height:1.5}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions{flex-wrap:nowrap;gap:7px;margin-top:18px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions>button{box-sizing:border-box;min-width:0;min-height:44px;margin:0;padding:8px 12px;font-size:10px;line-height:1.2;letter-spacing:.025em}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-caption{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-links{grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;min-height:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card{box-sizing:border-box;justify-content:center;gap:0;min-height:44px;height:100%;margin:0;padding:8px 32px 8px 12px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card :is(small,span,b){display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card strong{font-size:16px;line-height:1.2}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card::after{content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);font:24px Georgia;color:#a1e2e4;pointer-events:none}

@media(max-width:767px) and (orientation:portrait){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=select]{--mobile-context-size:88px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=select] .legacy-context-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:44px 44px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=select] .legacy-context-nav>[data-custom-action=create]{grid-column:1 / span 2;grid-row:2;border-left:0;border-top:1px solid #9a915d40}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=select] .legacy-context-nav>[data-custom-action=join]{grid-column:3 / span 3;grid-row:2;border-top:1px solid #9a915d40}
}

@media(orientation:landscape),(min-width:768px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-play-panel{grid-template-columns:minmax(0,1fr) clamp(200px,28vw,320px);grid-template-rows:32px minmax(0,1fr) 44px;gap:8px 12px;padding:10px 12px!important}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail{grid-column:2;grid-row:1 / 3;padding:12px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .legacy-selected-mode{font-size:23px;margin-bottom:5px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .client-mode-type{display:block;padding:0;border:0;margin:0 0 10px;font-size:9px;color:#9ad8df}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions{grid-column:1 / -1;grid-row:3;grid-template-columns:minmax(0,1fr) 140px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home{grid-template-rows:44px minmax(0,1fr) 55px;gap:6px;padding:8px!important}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy{padding:10px 16px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy h1{font-size:26px;margin:0;line-height:1.05}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy :is(p,.legacy-eyebrow){display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions{margin-top:7px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-links{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card{padding:6px 24px 6px 9px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card strong{font-size:13px}
}

@media(max-height:500px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome{--mobile-header-size:46px;--mobile-nav-size:50px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome>.ds-header{padding-top:calc(1px + env(safe-area-inset-top));padding-bottom:1px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-primary-nav>button{padding-top:2px;padding-bottom:2px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-primary-nav>button::before{font-size:18px;line-height:1.2}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-play-panel{grid-template-rows:26px minmax(0,1fr) 44px;gap:6px 10px;padding:8px 10px!important}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading .ds-panel-kicker{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading h2{font-size:22px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button{grid-template-columns:25px minmax(0,1fr);grid-template-rows:1fr;gap:5px;padding:5px 6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-icon{width:25px;height:25px;grid-row:1}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button strong{font-size:13px;line-height:1.1}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button small{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail{padding:9px 10px;justify-content:flex-start}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .legacy-selected-mode{font-size:19px;margin-bottom:3px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .client-mode-type{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail p{font-size:10px;line-height:1.35;margin-bottom:5px}
}

@media(orientation:landscape) and (max-height:500px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home{grid-template-columns:110px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 55px;padding:6px!important;gap:6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channels{grid-column:1;grid-row:1 / -1;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(44px,1fr));gap:3px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel{justify-content:flex-start;padding:4px 7px;gap:5px;text-align:left}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-feature{grid-column:2;grid-row:1}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-links{grid-column:2;grid-row:2}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-play-panel{grid-template-rows:minmax(0,1fr) 44px;padding:6px!important;gap:6px 10px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-catalogue{grid-row:1;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:minmax(0,1fr);gap:6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-catalogue:has(>.client-mode-pager[data-single=true]){grid-template-columns:minmax(0,1fr)}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-catalogue>.ds-modes{grid-column:1;grid-row:1}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager{grid-column:2;grid-row:1;align-self:stretch;flex-direction:column;justify-content:center;gap:2px;width:44px;height:100%;min-height:0;overflow:hidden}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager[data-single=true]{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager>button{flex:none;width:44px;height:44px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-pager>span{flex:none;max-width:44px;font-size:8px;line-height:1.1;text-align:center;white-space:normal}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail{grid-row:1;padding:8px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions{grid-row:2}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) .social-dock{bottom:calc(52px + env(safe-area-inset-bottom))}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) :is(.social-drawer,.social-windows){bottom:calc(100px + env(safe-area-inset-bottom))}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) .device-layout-shortcut{bottom:calc(58px + env(safe-area-inset-bottom))}
}

@media(min-width:768px) and (min-height:600px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home{grid-template-columns:146px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 104px;padding:16px!important;gap:12px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channels{grid-column:1;grid-row:1 / -1;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,58px);align-content:start;gap:7px;padding-top:14px;border-right:1px solid #a6956340}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel{justify-content:flex-start;gap:10px;padding:9px;text-align:left;border:0;border-left:2px solid transparent;background:transparent}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel>span{font-size:23px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel>strong{font-size:11px;line-height:1.4}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .client-home-channel[aria-pressed=true]{border-left-color:#83e1e5}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-feature{grid-column:2;grid-row:1;background-position:center 43%}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy{padding:clamp(22px,3vw,48px)}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy h1{font-size:clamp(38px,4.3vw,60px);margin:15px 0;line-height:1.05}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy :is(p,.legacy-eyebrow){display:block}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy p{font-size:13px;line-height:1.6;max-width:390px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions{margin-top:21px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions>button{font-size:12px;padding:10px 19px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-links{grid-column:2;grid-row:2}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card{gap:7px;padding:12px 24px 12px 12px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card>small{display:block;font-size:8px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-card strong{font-size:18px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-play-panel{grid-template-columns:minmax(0,1fr) clamp(240px,29vw,340px);grid-template-rows:46px minmax(0,1fr) 52px;gap:12px 16px;padding:18px!important}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .client-mode-heading h2{font-size:29px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes{gap:10px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button{grid-template-columns:minmax(0,1fr);grid-template-rows:46px auto auto;justify-items:center;gap:8px;padding:14px 8px;text-align:center}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-icon{grid-column:1;grid-row:1;width:42px;height:42px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button strong{grid-column:1;grid-row:2;font-size:18px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-modes>button small{grid-column:1;grid-row:3;font-size:10px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail{padding:20px;justify-content:center}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail p{font-size:13px;line-height:1.65;margin-bottom:15px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail>.client-mode-reward{font-size:11px;line-height:1.5}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .ds-mode-detail .client-mode-return{display:block;font-size:11px;line-height:1.5;margin-top:16px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.ds-primary-start{font-size:17px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=select] .legacy-mode-actions>.ds-secondary-actions>button{font-size:11px}
}

/* Ordinary preparation stays in the same screen; real group/lobby forms keep their own layout. */
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)){
 box-sizing:border-box;
 display:grid;
 grid-column:1;
 grid-row:1;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:44px minmax(0,1fr) 176px;
 align-items:stretch;
 gap:8px;
 width:100%;
 height:100%;
 min-height:0;
 padding:8px;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel))>.legacy-preparation-path{
 box-sizing:border-box;
 grid-column:1;
 grid-row:1;
 flex-wrap:nowrap;
 align-items:center;
 gap:8px;
 min-width:0;
 min-height:44px;
 margin:0;
 padding:0;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .legacy-preparation-path>button{box-sizing:border-box;flex:none;min-width:112px;min-height:44px;margin:0;padding:7px;font-size:9px;letter-spacing:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .legacy-preparation-path>strong{min-width:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .legacy-preparation-count{flex:none;margin-left:auto;font-size:9px;white-space:nowrap}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel))>.ds-hero-stage{
 --mobile-hero-card:108px;
 box-sizing:border-box;
 grid-column:1;
 grid-row:2;
 align-self:stretch;
 height:100%;
 min-height:0;
 margin:0;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-canvas{inset:0 0 calc(var(--mobile-hero-card) + 8px);width:100%;height:calc(100% - var(--mobile-hero-card) - 8px);min-height:0;touch-action:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name{
 box-sizing:border-box;
 bottom:4px;
 left:50%;
 right:auto;
 transform:translateX(-50%);
 grid-template-columns:minmax(0,1fr) 176px minmax(0,1fr);
 grid-template-rows:22px 18px 44px;
 align-content:center;
 gap:4px;
 width:calc(100% - 12px);
 max-width:620px;
 height:var(--mobile-hero-card);
 min-height:0;
 margin:0;
 padding:8px;
 border-radius:5px;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name>:is(.legacy-party-identity,.legacy-party-readiness,small){display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name>strong{grid-column:1 / -1;grid-row:1;max-width:100%;font-size:23px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-role{grid-column:1 / -1;grid-row:2;max-width:100%;margin:0;padding:2px 8px;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name>button{grid-row:3;box-sizing:border-box;min-width:0;min-height:44px;width:100%;height:44px;max-width:none;margin:0;padding:4px;font-size:9px;line-height:1.2}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-change-hero{grid-column:1}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-auxiliary{grid-column:3}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-skill-preview{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(4,44px);gap:0;width:176px;height:44px;min-height:44px;margin:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-skill-preview>button{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:4px;font-size:10px;line-height:1}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-party-seats{bottom:calc(var(--mobile-hero-card) + 8px)}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-party-seat{width:58px;min-height:78px;padding:5px 3px;gap:4px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-party-seat>strong{font-size:9px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-party-seat>small{font-size:8px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall>.ds-play-panel:not(.ds-lobby-panel){
 box-sizing:border-box;
 grid-column:1;
 grid-row:3;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) 94px;
 gap:6px;
 width:100%;
 height:100%;
 min-width:0;
 min-height:0!important;
 margin:0;
 padding:8px!important;
 border-radius:5px;
 overflow:hidden;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>:is(.legacy-mode-back,.ds-panel-kicker,h2,.ds-categories,.ds-modes){display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail{grid-column:1;grid-row:1;align-self:center;min-width:0;min-height:0;margin:0;padding:0;border:0;font-size:11px;line-height:1.35;overflow:hidden}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail p{margin:0 0 4px;font-size:11px;line-height:1.35}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail small{font-size:9px;line-height:1.3;color:#d7c795}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions{position:static;grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px;gap:6px;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-primary-start{box-sizing:border-box;align-self:stretch;min-width:0;min-height:44px;width:100%;height:44px;margin:0;padding:6px 9px;font-size:16px;line-height:1.2}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-secondary-actions{display:flex;align-self:stretch;gap:6px;min-width:0;min-height:44px;width:100%;height:44px;margin:0}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-secondary-actions>button{box-sizing:border-box;flex:1;min-width:0;min-height:44px;height:44px;margin:0;padding:5px;font-size:10px;line-height:1.2}

@media(orientation:landscape),(min-width:768px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)){grid-template-columns:minmax(0,1fr) clamp(250px,32vw,360px);grid-template-rows:44px minmax(0,1fr);gap:8px;padding:8px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel))>.legacy-preparation-path{grid-column:1 / -1}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall>.ds-play-panel:not(.ds-lobby-panel){grid-column:2;grid-row:2}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail p{font-size:13px;line-height:1.6;margin-bottom:12px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail small{font-size:11px;line-height:1.5}
}

@media(orientation:landscape) and (max-height:500px){
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-page=play][data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)){grid-template-rows:44px minmax(0,1fr);gap:6px;padding:6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-canvas{inset:0 auto 0 0;width:max(44px,calc(100% - max(292px,62%)));height:100%;min-height:0}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name{left:auto;right:4px;bottom:4px;transform:none;width:max(284px,calc(62% - 8px));height:calc(100% - 8px);padding:6px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-hero-name>strong{font-size:20px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)) .ds-party-seats{display:none}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall>.ds-play-panel:not(.ds-lobby-panel){grid-template-rows:minmax(0,1fr) 44px;padding:6px!important}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail p{margin-bottom:4px;font-size:10px;line-height:1.3}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.ds-mode-detail small{font-size:9px;line-height:1.25}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions{grid-template-columns:minmax(130px,1.5fr) minmax(90px,1fr);grid-template-rows:44px;gap:4px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-primary-start{font-size:12px;padding:5px;white-space:normal;overflow-wrap:normal}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-secondary-actions{gap:4px}
 html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-play-panel:not(.ds-lobby-panel)>.legacy-preparation-actions>.ds-secondary-actions>button{font-size:9px;padding:4px}
}

@media(orientation:landscape) and (max-height:375px){
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome[data-play-step=prepare] .ds-hall:has(>.ds-play-panel:not(.ds-lobby-panel)){
  grid-template-rows:44px minmax(116px,1fr);
  overflow-y:auto;
  overscroll-behavior:contain;
}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home{grid-template-columns:minmax(0,1fr)}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home .client-home-channels{display:none}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home :is(.legacy-home-feature,.legacy-home-links){grid-column:1}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy{padding:6px 12px}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-copy h1{font-size:22px;white-space:normal}
html[data-device-layout=mobile][data-presentation=legacy] body:not([data-touch-scene=true]) #dimensionHome .legacy-home-actions{margin-top:5px}
}

/* Touch HUD. Position the interface in the corners and reserve the middle for play. */
/* Short desktop windows otherwise align the absolute-only scene to zero height. */
@media (max-height: 560px) and (min-width: 761px) {
  html:not([data-device-layout=mobile]) body.screen-game .ds-scene-workspace { align-self: stretch; }
}
.world-hud :is(.world-hud-toggle,.world-hud-population) { display: none; }
html[data-device-layout=mobile] body[data-touch-scene=true] {
  --touch-hud-left: max(8px, env(safe-area-inset-left));
  --touch-hud-right: max(8px, env(safe-area-inset-right));
  --touch-hud-bottom: max(8px, env(safe-area-inset-bottom));
  --touch-skill: clamp(44px, 12.5vmin, 58px);
  --touch-attack: clamp(60px, 17.5vmin, 78px);
  --touch-stick-size: clamp(76px, 25vmin, 112px);
  --touch-gap: 6px;
  --touch-action-floor: var(--touch-hud-bottom);
  --touch-world-drawer-bottom: calc(var(--touch-action-floor) + var(--touch-stick-size));
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .game-top-actions {
  top: 4px;
  right: var(--touch-hud-right);
  flex-direction: row;
  gap: 4px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .game-top-actions > button {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
#gameUI .game-fullscreen {display:none}
html[data-device-layout=mobile] #gameUI .game-fullscreen:not([hidden]) {display:grid;place-items:center}
#gameUI .game-fullscreen svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.device-fullscreen-settings {margin-top:9px;min-height:44px;padding:6px 12px}
html[data-device-layout=mobile] #gameUI:has(.game-fullscreen:not([hidden])) {--touch-top-reserved:198px}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI :is(.progress-hud,.battle-minimap,.practice-tools) {
  left: var(--touch-hud-left);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .battle-minimap {
  top: 52px;
  left:calc(var(--touch-hud-left) + 133px);
}
html[data-device-layout=mobile] body[data-touch-scene=true]:has(.comm-panel[data-touch-open=true]) #gameUI .battle-minimap {
  visibility:hidden;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .practice-tools {
  top: 124px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-hud {
  box-sizing: border-box;
  width: 125px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-heading {
  gap: 5px;
  line-height: 16px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #upgradeButton:not([hidden]) {
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 4px;
  padding: 4px;
  font-size: 8px;
  line-height: 1.25;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI:has(#upgradeButton:not([hidden])) .battle-minimap {
  margin-top: 50px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #upgradePanel {
  box-sizing: border-box;
  z-index: 18;
  top: 55px;
  left: var(--touch-hud-left);
  width: min(260px, calc(100% - var(--touch-hud-left) - var(--touch-hud-right)));
  max-height: min(48dvh, calc(100% - 66px));
  padding: 8px 10px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #upgradePanel button {
  min-height: 44px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #upgradeClose {
  min-width: 44px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .scoreboard {
  box-sizing: border-box;
  width: min(300px, calc(100% - 2 * var(--touch-top-reserved,150px) - var(--touch-hud-left) - var(--touch-hud-right)));
  max-width: none;
  min-width: 0;
  min-height: 42px;
  top: 4px;
  gap: 4px;
  padding: 4px 6px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .score-player {
  min-width: 0;
  gap: 4px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .score-player > strong,
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI #timer {
  font-size: 16px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .score-player > span {
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .match-clock {
  min-width: 48px;
  padding-inline: 3px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .match-clock :is(#roundLabel,#matchMode) {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
}
html[data-device-layout=mobile] body[data-touch-scene=true][data-game-mode=world] #gameUI :is(.scoreboard,.battle-minimap) {
  display: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true][data-game-mode=world] #gameUI .progress-hud {
  top: 53px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud {
  top: 4px;
  left: var(--touch-hud-left);
  z-index: 15;
  width: min(170px, calc(100% - var(--touch-top-reserved,150px) - var(--touch-hud-left) - var(--touch-hud-right)));
  min-width: 0;
  max-height:none;
  overflow:visible;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-device-layout=mobile] #gameUI .world-hud .world-hud-toggle {
  position: relative;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 22px 4px 8px;
  text-align: start;
  background: var(--arena-deep, #0a1a23);
  color: var(--arena-text, #f4ebd5);
  border-color: var(--arena-line, #8e7a57);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-toggle strong {
  font: 700 12px/1.15 system-ui, sans-serif;
  overflow-wrap: anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-caret {
  position: absolute;
  inset: 50% 7px auto auto;
  transform: translateY(-50%);
  font-size: 16px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-toggle[aria-expanded=true] .world-hud-caret {
  transform: translateY(-50%) rotate(180deg);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-toggle[aria-expanded=false] + .world-hud-details {
  display: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-details {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 4px);
  width: min(282px, calc(100vw - var(--touch-hud-left) - var(--touch-hud-right)));
  max-height: min(46dvh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 1px solid var(--arena-line, #8e7a57);
  border-radius: 7px;
  padding: 9px;
  background: var(--arena-deep, #0a1a23);
  color: var(--arena-text, #f4ebd5);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-details :is(header > small:not(.world-zone-status),h2,.world-map-key) {
  display: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-details p {
  margin: 0 0 6px;
  line-height: 1.35;
  color: var(--arena-text, #f4ebd5);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-population {
  display: block;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-hud-details button {
  min-height: 44px;
  margin-top: 6px;
  background: var(--arena-panel, #142b36);
  color: var(--arena-text, #f4ebd5);
  border-color: var(--arena-line, #8e7a57);
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-found {
  box-sizing: border-box;
  inset: auto auto max(56px, 10dvh) 50%;
  transform: translateX(-50%);
  width: min(200px, 48vw);
  padding: 8px;
  pointer-events: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-found h3 {
  font-size: 15px;
  margin: 3px 0;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-found p {
  display: none;
}

html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-actions {
  inset: auto var(--touch-hud-right) var(--touch-action-floor) auto;
  width: calc(var(--touch-attack) + var(--touch-skill) + 18px);
  height: calc(var(--touch-attack) + var(--touch-skill) * 2 + 18px);
  transform: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-actions > .mobile-attack {
  width: var(--touch-attack);
  height: var(--touch-attack);
  font-size: 26px !important;
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-actions > .mobile-skill {
  width: var(--touch-skill);
  height: var(--touch-skill);
  padding: 3px !important;
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-skill-q { right: calc(var(--touch-attack) + var(--touch-gap)); bottom: 0; }
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-skill-w { right: calc(var(--touch-attack) + var(--touch-gap)); bottom: calc(var(--touch-skill) + var(--touch-gap)); }
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-skill-e { right: 0; bottom: calc(var(--touch-attack) + var(--touch-gap)); }
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-skill-r { right: calc(var(--touch-skill) + var(--touch-gap)); bottom: calc(var(--touch-attack) + var(--touch-skill) + var(--touch-gap) * 2); }
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-stick {
  left: var(--touch-hud-left);
  bottom: var(--touch-action-floor);
  width: var(--touch-stick-size);
  height: var(--touch-stick-size);
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-stick-thumb {
  width: 46%;
  height: 46%;
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-supports {
  bottom: var(--touch-hud-bottom);
  gap: 4px;
  max-width: calc(100% - var(--touch-hud-left) - var(--touch-hud-right));
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-supports button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 3px 5px !important;
}
html[data-device-layout=mobile] body[data-touch-scene=true] .mobile-touch-hint {
  display: none;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud {
  bottom: calc(var(--touch-hud-bottom) + 48px);
  width: 165px;
  max-width: 32%;
}

@media (orientation: portrait) {
  html[data-device-layout=mobile] body[data-touch-scene=true] {
    --touch-action-floor: calc(var(--touch-hud-bottom) + 50px);
    --touch-world-drawer-bottom: calc(var(--touch-action-floor) + var(--touch-attack) + var(--touch-skill) * 2 + var(--touch-gap) * 2);
  }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .scoreboard {
    top: 53px;
    left: var(--touch-hud-left);
    transform: none;
    width: min(225px, calc(100% - var(--touch-hud-left) - var(--touch-hud-right)));
  }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .progress-hud { top: 113px; }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .battle-minimap,
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI:has(#upgradeButton:not([hidden])) .battle-minimap {
    top: 113px;
    left: calc(var(--touch-hud-left) + 133px);
    margin-top: 0;
  }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .practice-tools { top: 244px; }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud {
    left: var(--touch-hud-left);
    bottom: calc(var(--touch-hud-bottom) + 56px + clamp(76px, 25vmin, 112px));
    transform: none;
    max-width: 40%;
  }
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .world-found {
    bottom: 43%;
  }
}

@media (orientation: landscape) and (max-height: 375px) {
  html[data-device-layout=mobile] body[data-touch-scene=true] {
    --touch-skill: 44px;
    --touch-attack: 59px;
    --touch-stick-size: 80px;
  }
}

/* Friends remain available while touch controls are active, without a full dock. */
html[data-device-layout=mobile] body[data-touch-scene=true] #socialUI.social-ui:not([hidden]) { display: block !important; }
html[data-device-layout=mobile] body[data-touch-scene=true] #socialUI #friendsDock { display: none !important; }
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome .ds-header > #friendsToggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 40px; box-sizing: border-box; width: 40px; height: 38px; min-height: 38px;
  padding: 0; gap: 0; border: 1px solid var(--arena-line,#8e7a57); border-radius: 6px;
  background: var(--arena-panel,#0b252d); color: var(--arena-text,#f4e6cf); position: relative;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome #friendsToggle > .social-dock-icon { display: inline !important; font-size: 21px; line-height: 1; }
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome #friendsToggle > :is(strong,small) { display: none !important; }
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome #friendsToggle > .social-unread { position:absolute; inset:0 0 auto auto; min-width:16px; height:16px; padding:0 2px; font-size:9px; }
html[data-device-layout=mobile] body[data-touch-scene=true] #dimensionHome .ds-brand {
  max-width:min(147px,37vw); padding-right:4px; font-size:clamp(10px,3vw,12px) !important; letter-spacing:0;
}

html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud.combat-dock {
  display:block;
  width:min(188px,35%);
  height:auto;
  min-height:0;
  max-height:none;
  max-width:none;
  padding:5px 7px;
  border:1px solid #a3a87b88;
  background:#0a2330f2;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-dock .player-hud {
  grid-template-columns:26px minmax(0,1fr);
  gap:6px;
  padding:0;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-dock .hud-portrait {
  width:26px;
  height:31px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-dock #hudChampion {
  font-size:12px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-dock #healthText {
  font-size:10px;
}
html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .combat-dock .health-track {
  height:7px;
  margin:4px 0 0;
}
@media (orientation: portrait) {
  html[data-device-layout=mobile] body[data-touch-scene=true] #gameUI .bottom-hud.combat-dock {
    width:min(183px,45%);
  }
}

.mobile-rank-strip {
  position:absolute;
  right:var(--touch-hud-right);
  bottom:calc(var(--touch-action-floor) + var(--touch-attack) + var(--touch-skill) * 2 + var(--touch-gap) * 2 + 8px);
  display:flex;
  gap:4px;
  pointer-events:none;
}
.mobile-rank-strip[hidden] { display:none; }
.mobile-rank-strip > button.skill-rank-plus {
  width:44px;
  height:44px;
  padding:0;
  touch-action:manipulation;
  font:800 13px/1 system-ui;
}
@media (orientation:landscape) and (max-height:500px) {
  .mobile-rank-strip {
    right:50%;
    bottom:calc(var(--touch-action-floor) + 52px);
    translate:50% 0;
  }
}

/* Keep the optional chat above the centered skill-up controls in landscape.
   The keyboard-open layout is handled independently by communications.css. */
@media (orientation:landscape) and (max-height:500px) {
  html[data-device-layout=mobile] body.screen-game[data-touch-scene=true] .comm-panel[data-touch-open=true]:not([data-touch-keyboard=true]) {
    --comm-top: max(calc(56px + env(safe-area-inset-top)), calc(var(--comm-vtop, 0px) + 8px));
    --comm-bottom: max(112px, env(safe-area-inset-bottom));
  }
  html[data-device-layout=mobile] body.screen-game[data-touch-scene=true][data-game-mode=world] .comm-panel[data-touch-open=true]:not([data-touch-keyboard=true]) {
    --comm-top: max(calc(104px + env(safe-area-inset-top)), calc(var(--comm-vtop, 0px) + 8px));
    --comm-bottom:calc(var(--touch-hud-bottom) + 50px);
    width:min(360px, 52vw, calc(100vw - 2 * (max(var(--touch-hud-left), var(--touch-hud-right)) + max(var(--touch-stick-size), var(--touch-attack) + var(--touch-skill) + var(--touch-gap)) + 6px)));
  }
  html[data-device-layout=mobile] body.screen-game[data-touch-scene=true][data-game-mode=world]:has(.comm-panel[data-touch-open=true]) #gameUI .bottom-hud {
    visibility:hidden;
  }
}
@media (orientation:landscape) and (max-height:300px) {
  html[data-device-layout=mobile] body.screen-game[data-game-mode=world] .comm-panel[data-touch-open=true] .comm-body {
    display:flex;
    flex-direction:column;
    padding-block:4px;
  }
  html[data-device-layout=mobile] body.screen-game[data-game-mode=world] .comm-panel[data-touch-open=true] .comm-body > * {
    flex:none;
  }
  html[data-device-layout=mobile] body.screen-game[data-game-mode=world] .comm-panel[data-touch-open=true] .comm-form {
    order:-1;
  }
}

/* Wunderhain drawers stop before the touch controls and share the HUD space. */
html[data-device-layout=mobile] body[data-touch-scene=true][data-game-mode=world] #gameUI .world-hud-details {
  display:grid;
  max-height:max(0px, min(46dvh, 320px, calc(100dvh - 110px - env(safe-area-inset-top) - var(--touch-world-drawer-bottom))));
}
html[data-device-layout=mobile] #gameUI .world-hud-toggle[aria-expanded=false] + .world-hud-details {
  display:none;
}
html[data-device-layout=mobile] body[data-touch-scene=true][data-game-mode=world] #gameUI .world-hud-details :is(.world-hud-population,.world-mission) {
  order:1;
  margin-top:8px;
}
html[data-device-layout=mobile] body[data-touch-scene=true][data-game-mode=world]:has(.world-hud-toggle[aria-expanded=true], .comm-panel[data-touch-open=true]) #gameUI .progress-hud {
  visibility:hidden;
}
@media (orientation:portrait) {
  html[data-device-layout=mobile] body.screen-game[data-touch-scene=true][data-game-mode=world] .comm-panel[data-touch-open=true]:not([data-touch-keyboard=true]) {
    --comm-top:max(calc(104px + env(safe-area-inset-top)), calc(var(--comm-vtop, 0px) + 8px));
    --comm-bottom:calc(var(--touch-world-drawer-bottom) + 8px);
  }
}

html[data-device-layout=mobile] .live-world-map-dialog[open] {
  --world-map-vertical-space:calc(max(8px, env(safe-area-inset-top)) + max(8px, env(safe-area-inset-bottom)));
  box-sizing:border-box;
  inset-block:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom));
  width:min(95vw, calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))));
  max-height:calc(100dvh - var(--world-map-vertical-space));
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
  padding:8px 10px 10px;
  overscroll-behavior:contain;
}
html[data-device-layout=mobile] .live-world-map-dialog[open] > header {
  position:sticky;
  top:-8px;
  z-index:1;
  gap:8px;
  background:inherit;
}
html[data-device-layout=mobile] .live-world-map-dialog > header h2 { font-size:clamp(19px, 5vw, 26px); }
html[data-device-layout=mobile] .live-world-map-dialog > header button { min-width:44px; min-height:44px; }
html[data-device-layout=mobile] .live-world-map-dialog[open] > p { font-size:11px; line-height:1.3; }
html[data-device-layout=mobile] .live-world-map-dialog[open] > canvas {
  box-sizing:border-box;
  display:block;
  max-height:none;
  aspect-ratio:920 / 700;
}
html[data-device-layout=mobile] .live-world-map-dialog[open] > nav {
  grid-column:1;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:max-content;
  align-content:start;
  gap:6px;
  max-height:none;
  overflow:visible;
}
html[data-device-layout=mobile] .live-world-map-dialog[open] > nav button {
  min-height:44px;
  height:auto;
  min-width:0;
  padding:5px 8px;
  overflow-wrap:anywhere;
}
html[data-device-layout=mobile] .live-world-map-dialog[open] > nav strong { font-size:15px; }
html[data-device-layout=mobile] .live-world-map-dialog[open] > nav small { margin:1px 0; }
@media (orientation:landscape) {
  html[data-device-layout=mobile] .live-world-map-dialog[open] {
    height:calc(100dvh - var(--world-map-vertical-space));
    grid-template-columns:minmax(0, 1.1fr) minmax(145px, .9fr);
    grid-template-rows:auto auto minmax(0, 1fr);
    overflow:hidden;
  }
  html[data-device-layout=mobile] .live-world-map-dialog[open] > canvas {
    width:min(100%, calc((100dvh - var(--world-map-vertical-space) - 112px) * 920 / 700));
    justify-self:center;
    align-self:center;
  }
  html[data-device-layout=mobile] .live-world-map-dialog[open] > nav {
    grid-column:2;
    grid-template-columns:minmax(0, 1fr);
    height:100%;
    box-sizing:border-box;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* The mobile wordmark fits its own box, with no desktop divider through it. */
html[data-device-layout=mobile][data-presentation=legacy] body #dimensionHome > .ds-header .ds-brand {
  display:block;
  box-sizing:border-box;
  flex:0 1 auto;
  min-width:0;
  max-width:none;
  margin-right:0;
  padding:4px 0 4px 30px;
  border-right:0;
  background-size:24px 28px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(11px,3.6vw,15px)!important;
}