/* 0.5.2 camp layout. Loaded after style.css; presentation only.
   1) Экспедиция fits the viewport: no page scroll, long lists scroll inside their own column, the start button is always visible.
   2) Sub-tabs for long camp pages (Арсенал, Бестиарий, Достижения), see src/subtabs.js. */

/* ---------- Shared header compaction for short viewports (every camp tab, so the header does not jump) ---------- */
@media(min-width:851px) and (max-height:820px){.topbar{height:76px}.brand img.brand-mark{width:44px;height:44px}.brand b{font-size:20px}.tabs{height:50px}}
@media(max-height:500px) and (orientation:landscape){.topbar{height:50px;gap:12px}.brand{gap:8px;font-size:7px;letter-spacing:1.2px}.brand b{font-size:13px;letter-spacing:3px}.brand img.brand-mark,.brand .brand-mark{width:32px;height:32px}.profile-chip small{max-width:150px}.wallet strong{font-size:15px}.wallet small{font-size:6px;letter-spacing:1px}.wallet>.currency-art{width:20px;height:24px}.tabs{height:40px;min-height:40px;gap:18px}.tabs>button{min-height:40px}.tabs button span{display:none}}

/* ---------- Expedition grid: heroes | stage | options, start dock under the options (all sizes) ---------- */
.expedition{grid-template-areas:"heroes stage options" "heroes stage dock";grid-template-rows:minmax(0,1fr) auto;row-gap:14px}
.expedition>.hero-sidebar{grid-area:heroes;display:flex;flex-direction:column;min-width:0}
.expedition>.hero-stage{grid-area:stage;min-width:0}
.expedition>.right-panel{grid-area:options;min-width:0}
.expedition>.start-dock{grid-area:dock;display:flex;flex-direction:column;gap:9px;min-width:0}
.stage-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.start-dock .start-button{margin-top:0}
.start-dock .start-subtext{margin-top:0}
.start-summary{display:none;margin:0;font-size:11px;line-height:1.4;color:#a596ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.start-summary b{color:#e3c695;font-weight:600}

/* ---------- Fit mode: only while the expedition is shown (the shell holds exactly one viewport) ---------- */
.shell:has(>#main-content>.expedition){height:100vh;height:100dvh;min-height:0;overflow:hidden}
.shell:has(>#main-content>.expedition)>#main-content{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.shell:has(>#main-content>.expedition)>.lobby-footer{min-height:28px}
#main-content>.expedition{flex:1 1 0;min-height:0;padding:14px 0 14px}
#main-content>.expedition .hero-sidebar .hero-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#665172 transparent;padding:1px 5px 1px 1px}
#main-content>.expedition .test-label{flex:none;margin-top:12px}
#main-content>.expedition .hero-sidebar .section-label small{white-space:nowrap;margin-left:6px}
#main-content>.expedition .map-card strong,#main-content>.expedition .mode-card strong{overflow-wrap:anywhere;hyphens:auto}
#main-content>.expedition .hero-list>*,#main-content>.expedition .right-panel>*,#main-content>.expedition .map-list>*{flex-shrink:0}
#main-content>.expedition .hero-stage{min-height:0;container:stage/size}
#main-content>.expedition .right-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#665172 transparent;padding-right:6px}
#main-content>.expedition .right-panel .tutorial-target,#main-content>.expedition .hero-list.tutorial-target{outline-offset:-2px}
#main-content>.expedition .start-dock{padding-top:12px;border-top:1px solid #2e2738}
/* The dock may become sticky (narrow layouts) and then forms its own stacking context: lift it above the tutorial backdrop. */
.start-dock:has(.tutorial-target){z-index:71}

/* Stage: the full vertical composition when there is room; otherwise portrait beside the text, the text scrolls inside. */
@container stage (max-height:640px){
 .stage-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr);height:100%}
 .stage-heading{grid-column:1/-1;padding:14px 20px}
 .stage-visual{min-height:0}
 .stage-portrait{width:min(240px,58cqh,42cqw);height:min(240px,58cqh,42cqw)}
 .pedestal{bottom:max(4px,calc(50% - min(240px,58cqh,42cqw)/2 - 6px))}
 .hero-info{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#665172 transparent;padding:0 22px 16px 18px;text-align:left;background:linear-gradient(90deg,#16131e00 0,#16131ec4 16%,#16131ed9 100%)}
 .hero-info>:first-child{margin-top:auto}.hero-info>:last-child{margin-bottom:auto}
 .hero-info h1{font-size:34px;margin:6px 0 4px}
 .hero-info p{margin:10px 0;max-width:none}
 .ability-note{margin:10px 0}
 .hero-stats{justify-content:flex-start;margin-top:10px;gap:0}
 .hero-stats div{padding:0 16px}.hero-stats div:first-child{padding-left:0}
}
@container stage (max-height:640px) and (max-width:430px){
 .stage-body{display:flex;flex-direction:column}
 .stage-heading{display:none}
 .stage-visual{flex:0 0 auto;height:min(250px,44cqh)}
 .stage-portrait{width:min(230px,40cqh);height:min(230px,40cqh)}
 .pedestal{bottom:2px}
 .hero-info{flex:1 1 0;padding:2px 14px 12px;text-align:center;background:linear-gradient(180deg,#16131e00 0,#16131ed0 18%)}
 .hero-stats{justify-content:center}.hero-stats div:first-child{padding-left:16px}
}
@container stage (max-height:400px){
 .stage-heading{display:none}
 .stage-body{grid-template-rows:minmax(0,1fr)}
 .hero-info h1{font-size:26px}
 .hero-number,.hero-subtitle{font-size:10px}
 .hero-info p,.ability-note small{font-size:10.5px;line-height:1.55}
 .hero-stats b{font-size:15px}
}

/* Desktop with little height: denser option cards so more of the column is visible at once. */
@media(min-width:851px) and (max-height:820px){
 #main-content>.expedition .mode-picker{margin-bottom:12px}
 #main-content>.expedition .mode-card{min-height:0;padding:7px 9px}
 #main-content>.expedition .map-list{gap:7px}
 #main-content>.expedition .map-card{min-height:0;padding:11px 14px}
 #main-content>.expedition .map-card:before{font-size:58px}
 #main-content>.expedition .map-caption{min-height:0;margin:10px 1px}
 #main-content>.expedition .loadout{padding-top:12px}
 #main-content>.expedition .weapon-tag{margin-top:9px}
 #main-content>.expedition .section-label{padding-bottom:11px}
 #main-content>.expedition .start-button{padding:15px}
}

/* ---------- Tablet portrait: heroes | stage on top, options and the dock below in full width ---------- */
@media(max-width:850px) and (min-width:551px) and (min-height:501px){
 #main-content>.expedition{grid-template-columns:minmax(150px,190px) minmax(0,1fr);grid-template-rows:minmax(min(240px,40%),1fr) auto auto;grid-template-areas:"heroes stage" "options options" "dock dock";gap:12px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 #main-content>.expedition .right-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;overflow:visible;padding-right:0}
 #main-content>.expedition .right-panel>*{grid-column:1/-1;grid-row:auto}
 #main-content>.expedition .right-panel>.map-caption{grid-column:1;margin:0;min-height:0}
 #main-content>.expedition .right-panel>.loadout{grid-column:2;margin-top:0;padding-top:8px}
 #main-content>.expedition .mode-picker{margin-bottom:4px}
 #main-content>.expedition .mode-card{min-height:0}
 #main-content>.expedition .map-card{min-height:0;padding:12px 14px}
 #main-content>.expedition .start-dock{position:sticky;bottom:0;flex-direction:row;align-items:center;gap:16px;padding:10px 0 4px;background:#11101b}
 #main-content>.expedition .start-summary{display:block;flex:1 1 auto;min-width:0;font-size:12px}
 #main-content>.expedition .start-dock .start-button{width:auto;flex:0 0 min(320px,55%)}
 #main-content>.expedition .start-subtext{display:none}
}

/* ---------- Phone portrait: one internal scroller, the dock stays pinned at the bottom ---------- */
@media(max-width:550px){
 #main-content>.expedition{display:flex;flex-direction:column;gap:14px;padding:10px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
 #main-content>.expedition::-webkit-scrollbar{display:none}
 #main-content>.expedition>*{flex:none}
 #main-content>.expedition .hero-sidebar .hero-list{overflow:visible;padding:0}
 #main-content>.expedition .hero-stage{container-type:normal}
 #main-content>.expedition .right-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;overflow:visible;padding-right:0}
 #main-content>.expedition .right-panel>*{grid-column:1/-1;grid-row:auto}
 #main-content>.expedition .map-caption{margin:0;min-height:0}
 #main-content>.expedition .loadout{margin-top:0;padding-top:10px}
 #main-content>.expedition .start-dock{position:sticky;bottom:0;margin-top:auto;gap:6px;padding:10px 0 10px;border-top:1px solid #2e2738;background:#11101b;box-shadow:0 -14px 18px -6px #11101b}
 #main-content>.expedition .start-summary{display:block;text-align:center}
 #main-content>.expedition .start-subtext{display:none}
 #main-content>.expedition .start-button{padding:16px 14px;font-size:12px}
 .shell:has(>#main-content>.expedition)>.lobby-footer{display:none}
}

/* ---------- Phone/tablet landscape with little height: three compact columns ---------- */
@media(max-height:500px) and (orientation:landscape){
 .shell:has(>#main-content>.expedition)>.lobby-footer{display:none}
 #main-content>.expedition{display:grid;grid-template-columns:minmax(112px,.72fr) minmax(0,1.6fr) minmax(172px,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"heroes stage options" "heroes stage dock";gap:8px 12px;padding:8px 0;overflow:visible}
 #main-content>.expedition .section-label{padding-bottom:6px}
 #main-content>.expedition .section-label .section-kicker{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #main-content>.expedition .hero-list{display:flex;flex-direction:column;gap:5px}
 #main-content>.expedition .hero-card{height:42px;padding:3px 7px;gap:7px;flex-direction:row;justify-content:flex-start;border-left-width:2px}
 #main-content>.expedition .hero-card .portrait{width:30px;height:32px}
 #main-content>.expedition .hero-card strong{font-size:11px;max-width:none}
 #main-content>.expedition .hero-card small{display:none}
 #main-content>.expedition .hero-card.selected:after{display:block;right:7px}
 #main-content>.expedition .test-label{display:none}
 #main-content>.expedition .right-panel{display:flex;flex-direction:column}
 #main-content>.expedition .right-panel>*{grid-column:auto;grid-row:auto}
 #main-content>.expedition .mode-picker{margin-bottom:8px}
 #main-content>.expedition .mode-list{grid-template-columns:1fr 1fr;gap:5px}
 #main-content>.expedition .mode-card{min-height:0;padding:6px 7px;gap:2px}
 #main-content>.expedition .mode-card strong{font-size:11px}
 #main-content>.expedition .mode-card span,#main-content>.expedition .mode-card em{font-size:8px}
 #main-content>.expedition .mode-card small{font-size:7px}
 #main-content>.expedition .mode-caption,#main-content>.expedition .mode-warning{font-size:9px;line-height:1.5}
 #main-content>.expedition .map-list{display:flex;flex-direction:column;gap:5px}
 #main-content>.expedition .map-card{min-height:0;padding:7px 10px}
 #main-content>.expedition .map-card small{font-size:7px;margin-bottom:3px}
 #main-content>.expedition .map-card strong{font-size:11px}
 #main-content>.expedition .map-card>span{display:none}
 #main-content>.expedition .map-card:before{font-size:38px}
 #main-content>.expedition .map-caption{font-size:9px;line-height:1.55;min-height:0;margin:8px 1px}
 #main-content>.expedition .loadout{padding-top:8px;margin-top:0}
 #main-content>.expedition .loadout .section-kicker{font-size:7px}
 #main-content>.expedition .weapon-tag{margin-top:6px;gap:8px}
 #main-content>.expedition .weapon-tag .item-icon{width:28px;height:28px;font-size:17px}
 #main-content>.expedition .weapon-tag strong{font-size:10px}
 #main-content>.expedition .weapon-tag small{font-size:8px}
 #main-content>.expedition .start-dock{position:static;padding-top:6px;gap:0;background:none;box-shadow:none}
 #main-content>.expedition .start-button{padding:11px 12px;font-size:11px}
 #main-content>.expedition .start-summary,#main-content>.expedition .start-subtext{display:none}
}

/* ---------- Sub-tabs (Арсенал, Бестиарий, Достижения) ---------- */
.subtabs{position:sticky;top:calc(var(--safe-top,0px) / var(--ui-scale,1));z-index:5;display:flex;gap:4px;margin:0 0 22px;border-bottom:1px solid #43364c;background:#13111d;overflow-x:auto;scrollbar-width:none;box-shadow:0 10px 14px -12px #0009}
.subtabs::-webkit-scrollbar{display:none}
.subtabs .subtab{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;padding:10px 16px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#8f859e;font-size:12px;letter-spacing:.5px;white-space:nowrap}
.subtabs .subtab:hover{background:#1d1828;border-color:transparent;border-bottom-color:#5d4d6a;color:#cbbbd6}
.subtabs .subtab small{font-size:10px;color:#6f6380;letter-spacing:.3px;font-variant-numeric:lining-nums tabular-nums}
.subtabs .subtab[aria-selected="true"]{color:#e8c77e;border-bottom-color:#d9ad54}
.subtabs .subtab[aria-selected="true"] small{color:#b99a5e}
.subtabs .subtab:focus-visible{outline:2px solid #d9ad54;outline-offset:-5px}
.subpanel:focus{outline:none}
.subpanel:focus-visible{outline:1px dashed #6b5a78;outline-offset:6px}
.subpanel>.subheading:first-child{margin-top:4px}
@media(max-width:550px){.subtabs{margin-bottom:16px;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);padding-right:14px}.subtabs .subtab{padding:10px 12px;font-size:11px;gap:6px}.subtabs .subtab small{font-size:9px}}

/* ---------- Tall modals (result screen at 130% or on a short screen): the closing row of actions stays reachable ---------- */
.modal-content>.button-row:last-child{position:sticky;bottom:0;padding:14px 0 2px;background:linear-gradient(90deg,#241d2d,#1a1623);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px);mask-image:linear-gradient(180deg,transparent 0,#000 12px)}