/* 0.7.6a «Первые 5 минут»: new camp (src/camp-home.js) — sections bar (top on PC, bottom on phones), main screen «герой у костра»,
   «Режим и мир» sheet, «Ближайшая цель», Heroes, «Ещё», first hero choice; gradual hiding of wallets and HUD slot frames.
   Loaded last; presentation only. The camp-scene art is not delivered yet: a CSS glow stands in for the fire (no new images). */

/* ---------- Sections bar ---------- */
.camp-nav{display:flex;gap:28px;height:56px;align-items:stretch;border-bottom:1px solid var(--c-panel)}
.camp-nav>button{display:inline-flex;align-items:center;gap:8px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--r-common);padding:0 2px;font:600 var(--fs-s)/1 var(--font-display);letter-spacing:.5px;white-space:nowrap;min-height:44px;position:relative}
.camp-nav>button[hidden]{display:none}
.camp-nav>button.active{color:var(--c-gold);border-bottom-color:var(--r-legendary)}
.camp-nav-icon{font-size:var(--fs-l);line-height:1;color:var(--c-text-3)}
.camp-nav>button.active .camp-nav-icon{color:var(--r-legendary)}
.camp-nav>button:focus-visible{outline:2px solid var(--r-legendary);outline-offset:-2px}
.topbar>.settings-tab{margin-left:4px;border:0;background:transparent;color:var(--c-text-2);font-size:var(--fs-2xl);min-width:44px;min-height:44px;padding:0;flex-shrink:0}
.topbar>.settings-tab.active{color:var(--c-gold)}
html[data-badge-camp] .camp-nav [data-tab="more"]::after{content:"";position:absolute;top:9px;right:-8px;width:8px;height:8px;border-radius:50%;background:var(--r-legendary);box-shadow:0 0 0 2px var(--c-night-0),0 0 8px rgb(var(--r-legendary-rgb) / 53%);pointer-events:none}
.camp-nav [data-tab="admin"]{font-size:11px}

/* Phones (and any touch screen up to tablet width): a bottom bar of 5 icons with labels, 56 px + safe area. */
@media (max-width:850px),(pointer:coarse) and (max-width:1100px){
 #lobby{padding-bottom:calc(60px + var(--safe-bottom,0px))}
 .camp-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(56px + var(--safe-bottom,0px));padding:0 max(6px,var(--safe-left,0px)) var(--safe-bottom,0px) max(6px,var(--safe-right,0px));gap:0;border-top:1px solid var(--c-panel-hi);border-bottom:0;background:rgb(var(--c-bg-rgb) / 95%);backdrop-filter:blur(6px);justify-content:space-around}
 .camp-nav>button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:4px;font-size:var(--fs-xs);letter-spacing:.2px;border-bottom:0;border-top:2px solid transparent;padding:0 2px}
 .camp-nav>button>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .camp-nav>button.active{border-top-color:var(--r-legendary)}
 .camp-nav [data-tab="admin"]{display:none!important}
 html[data-badge-camp] .camp-nav [data-tab="more"]::after{top:7px;right:calc(50% - 18px)}
 body:has(#lobby:not([hidden])):not(:has(#modal:not([hidden]))) .toast{bottom:calc(68px + var(--safe-bottom,0px))}
}
@media (max-height:500px) and (orientation:landscape){
 #lobby{padding-bottom:calc(46px + var(--safe-bottom,0px))}
 .camp-nav{height:calc(44px + var(--safe-bottom,0px))}
 .camp-nav>button{flex-direction:row;gap:6px;font-size:var(--fs-xs)}
 .camp-nav-icon{font-size:14px}
 body:has(#lobby:not([hidden])):not(:has(#modal:not([hidden]))) .toast{bottom:calc(52px + var(--safe-bottom,0px))}
}

/* Newcomer header: gold only until shards / skulls are first received (src/gradual-unlock.js). */
html[data-gradual-shards="hidden"] .shards-wallet,html[data-gradual-skulls="hidden"] .skulls-wallet{display:none}

/* ---------- Main screen ---------- */
.camp-home{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,420px);gap:28px;align-items:center;padding:22px 0;min-height:0}
.camp-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:100%;padding:10px 0}
.camp-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--radius);background:radial-gradient(ellipse 48% 42% at 50% 70%,rgb(var(--r-legendary-rgb) / 14%),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 60%,var(--c-panel-hi),transparent 75%)}
.camp-fire{position:absolute;left:calc(50% - 130px);bottom:12%;width:40px;height:28px;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 50% 80%,var(--c-gold-hi),var(--r-legendary) 45%,rgb(var(--c-danger-rgb) / 0%) 72%);filter:blur(1px);animation:camp-fire 1.6s ease-in-out infinite alternate;opacity:.85}
@keyframes camp-fire{from{transform:scale(.92,.88);opacity:.7}to{transform:scale(1.05,1.08);opacity:.95}}
.reduced-motion .camp-fire{animation:none}
@media(prefers-reduced-motion:reduce){.camp-fire{animation:none}}
.camp-stage .stage-visual{position:relative;width:min(100%,420px);height:min(46vh,380px);min-height:180px;display:grid;place-items:center}
.camp-stage .stage-portrait{width:min(62%,250px);height:auto;aspect-ratio:1}
.camp-hero-name{position:relative;text-align:center;margin-top:6px}
.camp-hero-name strong{display:block;font:700 var(--fs-2xl)/1.1 var(--font-display);color:var(--c-light);letter-spacing:1px}
.camp-hero-name small{display:block;margin-top:4px;color:var(--c-text-2);font-size:12px}
.camp-actions{display:flex;flex-direction:column;gap:12px;min-width:0}
.camp-actions .start-button{margin:0;width:100%}
.camp-modemap{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);color:var(--c-gold-hi);font-size:var(--fs-m);text-align:left;position:relative}
.camp-modemap>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-modemap>b{color:var(--r-common);font-size:12px}
.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-light);box-shadow:0 0 0 2px var(--c-bg),0 0 8px var(--c-light);vertical-align:2px;margin-left:6px}
.camp-goal{display:flex;gap:12px;align-items:center;width:100%;padding:12px 14px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);text-align:left;font:inherit}
button.camp-goal{cursor:pointer}
button.camp-goal:hover{border-color:var(--c-text-3)}
.camp-goal-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--c-panel);color:var(--r-legendary);font-size:16px}
.camp-goal-body{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.camp-goal-body small{grid-column:1/-1;font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--c-gold-line)}
.camp-goal-body strong{grid-column:1/-1;font-size:var(--fs-m);font-weight:600;line-height:1.3;color:var(--c-text);overflow-wrap:anywhere}
.camp-goal-bar{display:block;height:6px;border-radius:var(--radius);background:var(--c-panel);overflow:hidden}
.camp-goal-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--c-gold-line),var(--c-gold-hi))}
.camp-goal-body em{font-style:normal;font-size:11px;color:var(--c-text-2);white-space:nowrap}

/* Fit: the main screen holds one viewport, no page scroll (like the old expedition). */
.shell:has(>#main-content>.camp-home){height:100vh;height:100dvh;min-height:0;overflow:hidden}
.shell:has(>#main-content>.camp-home)>#main-content{flex:1 1 0;min-height:0;display:flex;flex-direction:column}

@media (max-width:850px){
 .camp-fire{left:calc(50% - 105px);bottom:10%}
 .camp-home{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:8px 0 10px;align-items:stretch}
 .camp-stage{padding:0}
 .camp-stage .stage-visual{height:100%;min-height:120px;max-height:330px}
 .camp-stage .stage-portrait{width:auto;height:min(78%,230px)}
 .camp-hero-name strong{font-size:var(--fs-xl)}
 .camp-hero-name small{font-size:11px}
 .camp-actions{gap:9px}
 .camp-actions .start-button{min-height:54px;font-size:20px}
}
@media (max-height:500px) and (orientation:landscape){
 .camp-home{grid-template-columns:minmax(0,1fr) minmax(260px,46%);grid-template-rows:1fr;gap:14px;padding:6px 0;align-items:center}
 .camp-stage .stage-visual{height:min(52vh,200px);min-height:100px}
 .camp-stage .stage-portrait{height:min(80%,150px);width:auto}
 .camp-hero-name strong{font-size:16px}
 .camp-hero-name small{display:none}
 .camp-actions{gap:7px}
 .camp-actions .start-button{min-height:46px;font-size:var(--fs-l);padding:8px 12px}
 .camp-modemap{min-height:40px;padding:7px 12px}
 .camp-goal{padding:8px 12px}
 .camp-goal-icon{width:28px;height:28px;font-size:var(--fs-m)}
 .camp-goal-body strong{font-size:12px}
}

/* ---------- «Режим и мир» sheet ---------- */
.camp-sheet .mode-picker{margin:10px 0 16px}
.camp-sheet .map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.camp-sheet .map-caption{margin:10px 0 4px;font-size:12px;color:var(--c-text-2)}
.mode-card .new-dot{margin-left:6px}

/* ---------- Heroes ---------- */
.camp-heroes .next-hero{margin:4px 0 18px}
.next-hero-card{display:flex;gap:14px;align-items:center;width:100%;max-width:560px;padding:12px 14px;border:1px dashed var(--c-line);border-radius:var(--radius);background:var(--c-bg);color:inherit;text-align:left;font:inherit}
.next-hero-card .portrait{flex:none;width:58px;height:58px}
.portrait.silhouette{filter:brightness(.18) saturate(0) contrast(1.4);opacity:.9}
.next-hero-body{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.next-hero-body strong{grid-column:1/-1;font-size:var(--fs-l);color:var(--c-text)}
.next-hero-body small{grid-column:1/-1;font-size:12px;color:var(--c-text-2);overflow-wrap:anywhere}
.next-hero-body em{font-style:normal;font-size:11px;color:var(--c-text-2)}
.camp-heroes-grid{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:26px;align-items:start}
.camp-heroes .hero-list{display:grid;gap:8px;max-height:none}
.all-heroes{margin-top:14px}
.all-heroes>summary{cursor:pointer;padding:10px 4px;color:var(--c-gold);font-size:var(--fs-m);min-height:44px;display:flex;align-items:center}
.all-heroes[open]>summary{margin-bottom:6px}
.hero-detail{border:1px solid var(--c-panel-hi);border-radius:var(--radius);padding:16px;background:var(--c-bg);display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:18px;align-items:start}
.hero-detail .stage-visual{position:relative;height:240px;display:grid;place-items:center}
.hero-detail .stage-portrait{width:min(90%,200px);height:auto;aspect-ratio:1}
.hero-detail .hero-info h1{margin:4px 0}
.hero-detail .weapon-tag{margin-top:12px}
.hero-detail .hero-pick{margin-top:14px;width:100%;min-height:48px}
@media (max-width:850px){
 .camp-heroes-grid{grid-template-columns:1fr;gap:16px}
 .hero-detail{grid-template-columns:1fr;padding:12px}
 .hero-detail .stage-visual{height:190px}
}

/* ---------- «Ещё» ---------- */
.more-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.more-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;width:100%;min-height:58px;padding:11px 14px;border:1px solid var(--c-panel-hi);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);text-align:left;font:inherit;position:relative}
.more-item strong{font-size:14px}
.more-item small{grid-column:1;font-size:11px;color:var(--c-text-2)}
.more-item b{grid-row:1/span 2;grid-column:2;color:var(--r-common)}
.more-item:hover{border-color:var(--c-line)}
.more-item.active{border-color:var(--r-legendary)}
.more-item[data-tab]::after{position:absolute;top:10px;right:34px}
@media (max-width:850px){.more-list{grid-template-columns:1fr;gap:8px}}

/* ---------- First hero choice (modal) ---------- */
.first-hero{text-align:center}
.first-hero-sub{color:var(--c-gold);margin:4px 0 16px}
.first-hero-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.first-hero-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;border:1px solid var(--c-line);border-radius:var(--radius);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--hero-color) 22%,transparent),transparent 70%),var(--c-bg);color:var(--c-text);font:inherit;min-height:44px}
.first-hero-card:hover,.first-hero-card:focus-visible{border-color:var(--r-legendary);outline:none;box-shadow:0 0 0 1px var(--r-legendary),0 0 18px rgb(var(--r-legendary-rgb) / 20%)}
.first-hero-card .portrait{width:96px;height:96px}
.first-hero-card strong{font:700 var(--fs-xl)/1.1 var(--font-display);color:var(--c-light)}
.first-hero-card small{font-size:12px;color:var(--c-shard);line-height:1.35}
.first-hero .button-row{justify-content:center;margin-top:14px}
@media (max-width:560px){
 .first-hero-list{grid-template-columns:1fr;gap:8px}
 .first-hero-card{flex-direction:row;text-align:left;padding:10px 12px;gap:12px}
 .first-hero-card .portrait{width:64px;height:64px;flex:none}
 .first-hero-card strong{font-size:var(--fs-l)}
}
@media (max-height:500px) and (orientation:landscape){
 .first-hero-card{padding:10px 8px}
 .first-hero-card .portrait{width:64px;height:64px}
}

/* ---------- One-line notes (relic, charges, shards) ---------- */
.gradual-note{margin:8px 0;padding:7px 11px;border-left:3px solid var(--r-legendary);background:rgb(var(--r-legendary-rgb) / 8%);color:var(--c-text);font-size:var(--fs-s);line-height:1.4;text-align:left}

/* ---------- HUD of a newcomer: only filled slots + one «+» per group, no group labels (until 3 runs) ---------- */
html[data-gradual-slots="lite"] #equipment .equipment-group>.equipment-label{display:none}
html[data-gradual-slots="lite"] #equipment .slot.empty~.slot.empty{display:none}
html[data-gradual-slots="lite"] #equipment .slot.empty{font-size:0}
html[data-gradual-slots="lite"] #equipment .slot.empty::before{content:"+";font-size:14px;line-height:1;color:var(--r-common)}