/* v10 (DESIGN_V10.md): direct entry — valley catalog, switch valley */
.home {
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column;
  padding: calc(var(--sat) + 18px) calc(16px + var(--tg-right)) 0 calc(16px + var(--tg-left));
  background: radial-gradient(110% 70% at 50% 0%, #2a3a2c 0%, #141b16 55%, #0b0f0c 100%);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.home.on { opacity: 1; }
.home-head { text-align: center; flex: none; }
.home-mark { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; color: var(--amber);
  background: var(--amber-soft); border: 1px solid rgba(226, 166, 91, .3); }
.home-mark .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.home h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.home .lead { margin: 8px auto 14px; max-width: 360px; color: var(--text-2); font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.home-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -16px; padding: 2px 16px 12px; }
.home-scroll.empty { display: grid; place-items: center; }
.home-empty-art { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--sage); background: rgba(143, 179, 122, .1); }
.home-empty-art .ic { width: 46px; height: 46px; stroke-width: 1.3; }
.home-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.home-card { padding: 12px; border-radius: 18px; background: var(--panel-raise); border: 1px solid var(--line); text-align: left; }
.hc-top { display: flex; align-items: center; gap: 12px; }
.home-card .ava { width: 48px; height: 48px; }
.home-card .ava b { font-size: 20px; }
.hc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-main b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-main small { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-btn { height: 46px; font-size: 15.5px; margin-top: 10px; }
.hc-btn .ic { width: 19px; height: 19px; }
.hc-btn span { display: inline-flex; }
.hc-hint { margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #a9dcbf; text-align: center; line-height: 1.35; }
.home-foot { flex: none; padding: 12px 0 calc(var(--sab) + 16px); text-align: center; border-top: 1px solid var(--line); }
.home-create { margin-top: 0; height: 56px; font-size: 16.5px; }
.home-create span { display: inline-flex; }
.home-foot small { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
/* switch sheet */
.home-switch-sheet .home-switch { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.home-switch h2 { margin-right: 44px; }
.home-card.mine { display: flex; align-items: center; gap: 12px; width: 100%; }
.home-card.mine:active { background: rgba(255, 255, 255, .08); }
.home-card.current { border-color: rgba(226, 166, 91, .45); opacity: 1; }
.hc-badge { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--amber); padding: 3px 8px; border-radius: 99px; background: var(--amber-soft); }
.hc-go { color: var(--text-3); display: inline-flex; }
/* HUD title as a switch */
.hud-title.switchable { cursor: pointer; position: relative; padding-right: 18px; }
.hud-switch { position: absolute; right: 0; top: 2px; color: var(--text-2); }
.hud-switch .ic { width: 16px; height: 16px; transform: rotate(90deg); }
.help-switch { margin: 0 0 12px; height: 46px; font-size: 15px; }
@media (min-width: 560px) { .home { padding-left: calc(50% - 250px); padding-right: calc(50% - 250px); } }

/* ------------------------------------------------------------------ v11: solo (no valley) */
.home-solo { margin-top: 12px; height: 50px; font-size: 15.5px; }
.home-solo span { display: inline-flex; }
body.solo #stage { background: url('../assets/bg/reserve.webp') center bottom / cover no-repeat, #1a241c; }
body.solo #hud .lvl, body.solo #hud-rank, body.solo #hud .hud-row.stats, body.solo #hud-treasury { display: none !important; }
body.solo #hud .hud-row .jade-pill { height: 34px; padding-right: 12px; }
body.solo #bar .bar-row { display: none; }
body.solo #bar .nav-row { border-top: 0; padding-top: 0; }
#solo-card {
  position: absolute; z-index: 4; left: calc(16px + var(--tg-left)); right: calc(16px + var(--tg-right)); top: 50%;
  transform: translateY(-58%); border-radius: 22px; padding: 18px 18px 16px; text-align: center;
  animation: fade-up .5s .1s var(--ease-out) both;
}
#solo-card .sc-ic { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(226, 166, 91, .3); }
#solo-card .sc-ic .ic { width: 27px; height: 27px; stroke-width: 1.5; }
#solo-card b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
#solo-card p { margin: 6px 0 4px; color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.45; }
#solo-card .big-btn { height: 52px; }
#solo-card .big-btn span { display: inline-flex; }
@media (min-width: 560px) { #solo-card { left: 50%; right: auto; width: 460px; margin-left: -230px; } }

/* ------------------------------------------------------------------ v12: leave the valley (secondary, reddish) */
.quit-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 14px 0 4px; padding: 10px;
  border-radius: 12px; border: 1px solid rgba(212, 138, 108, .35); color: #e8957f; font-size: 14px; font-weight: 700; }
.quit-link .ic { width: 16px; height: 16px; }
.quit-link:active { background: rgba(212, 138, 108, .12); }
.pp-link.quit-btn { color: #e8957f; }
.confirm-sheet .adm-confirm h2 { margin: 6px 44px 0 0; }
/* v12 §4: «a new valley in N h» note on the catalog */
.home-note { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin: -4px 0 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(226, 166, 91, .1); border: 1px solid rgba(226, 166, 91, .35); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.home-note .ic { width: 18px; height: 18px; color: var(--amber); flex: none; margin-top: 1px; }