/* Roadmap 4–6: hero scale, curated visual themes, and interaction consistency. */

/* Hero hierarchy */
#home .home-app-title{
  margin:0 0 7px!important;
  max-width:none!important;
  font-family:Baskerville,"Palatino Linotype",Palatino,"Book Antiqua",serif;
  font-size:clamp(4.6rem,8.3vw,8.9rem)!important;
  line-height:.78!important;
  letter-spacing:-.065em!important;
  font-weight:700!important;
  color:var(--st-text)!important;
  text-wrap:balance;
}
#home .home-brand-tagline{
  display:block;
  width:max-content;
  max-width:100%;
  margin:20px 0 17px!important;
  font-size:clamp(1.35rem,2.2vw,2rem)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  white-space:nowrap;
  color:var(--st-text-soft)!important;
}
#home .home-hero-copy>.muted{margin-top:0}

/* Curated visual themes. Light/Dark remains independent. */
html[data-visual-theme="grove"]{
  --st-cyan:#8fb99c;
  --st-purple:#8b7896;
  --st-gold:#d5b56a;
  --st-sage:#9db79f;
  --st-panel:linear-gradient(155deg,rgba(26,42,38,.97),rgba(14,26,26,.97));
  --st-panel-soft:linear-gradient(155deg,rgba(34,52,44,.92),rgba(18,31,29,.92));
  --st-page:radial-gradient(circle at 12% 3%,rgba(143,185,156,.18),transparent 29%),radial-gradient(circle at 87% 10%,rgba(213,181,106,.11),transparent 31%),radial-gradient(circle at 73% 88%,rgba(139,120,150,.08),transparent 30%),linear-gradient(180deg,#0b1413 0%,#08100f 54%,#0d1512 100%);
}
html[data-theme="light"][data-visual-theme="grove"]{
  --st-cyan:#527d62;
  --st-purple:#76637d;
  --st-gold:#9b772f;
  --st-sage:#718a75;
  --st-panel:linear-gradient(150deg,rgba(251,249,239,.98),rgba(229,235,220,.97));
  --st-panel-soft:linear-gradient(150deg,rgba(246,244,232,.96),rgba(220,229,214,.95));
  --st-page:radial-gradient(circle at 12% 4%,rgba(117,151,119,.22),transparent 28%),radial-gradient(circle at 90% 9%,rgba(181,143,67,.13),transparent 30%),linear-gradient(180deg,#f1efe4 0%,#e2e7da 55%,#f0ece1 100%);
}
html[data-visual-theme="starfall"]{
  --st-cyan:#62d7f0;
  --st-purple:#b18cff;
  --st-gold:#efc96f;
  --st-sage:#8ea2ad;
  --st-panel:linear-gradient(155deg,rgba(25,30,58,.97),rgba(13,16,38,.97));
  --st-panel-soft:linear-gradient(155deg,rgba(33,39,73,.92),rgba(18,22,48,.92));
  --st-page:radial-gradient(circle at 11% 3%,rgba(98,215,240,.16),transparent 29%),radial-gradient(circle at 89% 8%,rgba(177,140,255,.20),transparent 31%),radial-gradient(circle at 73% 89%,rgba(239,201,111,.09),transparent 29%),linear-gradient(180deg,#0b0c1d 0%,#080919 52%,#0d1025 100%);
}
html[data-theme="light"][data-visual-theme="starfall"]{
  --st-cyan:#287d9b;
  --st-purple:#7053a4;
  --st-gold:#a47827;
  --st-sage:#71818c;
  --st-panel:linear-gradient(150deg,rgba(255,252,247,.98),rgba(238,232,248,.97));
  --st-panel-soft:linear-gradient(150deg,rgba(249,246,244,.96),rgba(228,224,242,.95));
  --st-page:radial-gradient(circle at 12% 4%,rgba(57,137,166,.14),transparent 28%),radial-gradient(circle at 90% 8%,rgba(118,83,164,.15),transparent 30%),radial-gradient(circle at 73% 88%,rgba(180,135,54,.10),transparent 29%),linear-gradient(180deg,#f5f1ec 0%,#e9e4f0 54%,#f2eee8 100%);
}

/* Appearance panel */
.appearance-panel{grid-column:1/-1}
.appearance-panel h3{margin:5px 0 6px}
.appearance-intro{margin:0 0 14px;color:var(--st-muted);line-height:1.5;font-size:.82rem}
.visual-theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.visual-theme-option{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;padding:13px;border:1px solid var(--st-border-strong);border-radius:14px;background:color-mix(in srgb,var(--st-surface-2) 70%,transparent);color:var(--st-text);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.visual-theme-option:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--st-cyan) 48%,var(--st-border));box-shadow:0 9px 24px color-mix(in srgb,var(--st-text) 8%,transparent)}
.visual-theme-option.active{border-color:var(--st-gold);background:linear-gradient(135deg,color-mix(in srgb,var(--st-gold) 11%,var(--st-surface)),color-mix(in srgb,var(--st-cyan) 8%,var(--st-surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-gold) 28%,transparent)}
.visual-theme-swatch{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.visual-theme-option[data-visual-theme="classic"] .visual-theme-swatch{background:radial-gradient(circle at 25% 25%,#55dff1,transparent 35%),radial-gradient(circle at 78% 70%,#9e7cff,transparent 38%),#172338}
.visual-theme-option[data-visual-theme="grove"] .visual-theme-swatch{background:radial-gradient(circle at 25% 25%,#9db79f,transparent 35%),radial-gradient(circle at 78% 70%,#d5b56a,transparent 38%),#20342c}
.visual-theme-option[data-visual-theme="starfall"] .visual-theme-swatch{background:radial-gradient(circle at 25% 25%,#62d7f0,transparent 34%),radial-gradient(circle at 72% 65%,#b18cff,transparent 40%),#171936}
.visual-theme-copy strong,.visual-theme-copy small{display:block}.visual-theme-copy small{margin-top:3px;color:var(--st-muted);line-height:1.35}
.visual-theme-check{position:absolute;right:10px;top:9px;color:var(--st-gold);opacity:0;font-weight:900}.visual-theme-option.active .visual-theme-check{opacity:1}

/* Interaction consistency across desktop and touch. */
button,a,[role="button"],.variant,.overview-check,.sprite-info-trigger,.party-card,.visual-theme-option{-webkit-tap-highlight-color:transparent}
.btn,.quick-action,.chip,.nav button,.mobile button,.variant,.overview-check,.sprite-info-trigger,.party-card,.visual-theme-option{transition:transform .17s ease,border-color .17s ease,background .17s ease,box-shadow .17s ease,filter .17s ease}
.btn:not(:disabled):active,.quick-action:active,.chip:active,.nav button:active,.mobile button:active,.sprite-info-trigger:active,.party-card:active,.visual-theme-option:active{transform:scale(.975)}
.variant:not(:disabled):active{transform:perspective(780px) scale(.975)!important}
.overview-check:active{transform:scale(.985)}
.overview-check:focus-within,.variant:focus-visible,.sprite-info-trigger:focus-visible,.party-card:focus-visible,.visual-theme-option:focus-visible{outline:2px solid var(--st-cyan)!important;outline-offset:3px!important}
.familyhead .sprite-info-trigger,.overview-check{min-height:40px}
.variant-wrap{border-radius:15px}
.variant-wrap:has(.variant:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--st-cyan) 24%,transparent)}

/* Collection feedback messages */
.collection-toast{position:fixed;left:50%;bottom:82px;z-index:120;translate:-50% 16px;display:flex;align-items:center;gap:10px;width:min(430px,calc(100% - 28px));padding:12px 14px;border:1px solid color-mix(in srgb,var(--st-gold) 40%,var(--st-border));border-radius:14px;background:color-mix(in srgb,var(--st-surface) 94%,transparent);color:var(--st-text);box-shadow:0 20px 55px rgba(0,0,0,.34);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .2s ease,translate .2s ease}
.collection-toast.show{opacity:1;translate:-50% 0}
.collection-toast-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--st-gold) 24%,transparent),color-mix(in srgb,var(--st-cyan) 18%,transparent));color:var(--st-gold);font-size:1rem}
.collection-toast-copy{font-family:Baskerville,"Palatino Linotype",Palatino,serif;line-height:1.3}

/* The top-bar lockup is the primary application title/home control. */
.top{min-height:92px!important;height:auto!important;padding-block:10px!important}
.brand-home{padding:5px 12px 5px 3px!important}
.brand-home .brand-lockup{gap:14px!important}
.brand-home .brand-mark{width:62px!important;height:62px!important;flex:0 0 62px!important}
.brand-home .brand-copy{gap:4px!important}
.brand-home .brand-title{
  font-family:Baskerville,"Palatino Linotype",Palatino,"Book Antiqua",serif!important;
  font-size:clamp(1.55rem,2vw,2.05rem)!important;
  line-height:.95!important;
  letter-spacing:-.025em!important;
  font-weight:700!important;
  white-space:nowrap;
}
.brand-home .brand-tagline{
  display:block!important;
  font-family:Baskerville,"Palatino Linotype",Palatino,"Book Antiqua",serif!important;
  font-size:clamp(.72rem,.9vw,.9rem)!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
.brand-home .brand-tagline br{display:block}

@media(max-width:980px){
  #home .home-app-title{font-size:clamp(4.2rem,10vw,7rem)!important}
  #home .home-brand-tagline{font-size:clamp(1.18rem,2.5vw,1.65rem)!important}
  .brand-home .brand-mark{width:54px!important;height:54px!important;flex-basis:54px!important}
  .brand-home .brand-title{font-size:1.4rem!important}
  .brand-home .brand-tagline{font-size:.68rem!important}
}
@media(max-width:760px){
  #home .home-app-title{font-size:clamp(3.7rem,16vw,6rem)!important;line-height:.82!important}
  #home .home-brand-tagline{width:auto;white-space:normal;font-size:1.3rem!important;max-width:28ch}
  .visual-theme-options{grid-template-columns:1fr}
  .collection-toast{bottom:92px}
  .top{min-height:72px!important;padding-block:7px!important}
  .brand-home .brand-mark{width:46px!important;height:46px!important;flex-basis:46px!important}
  .brand-home .brand-title{font-size:1.18rem!important}
  .brand-home .brand-tagline{display:none!important}
}
@media(max-width:520px){
  #home .home-app-title{font-size:clamp(3.25rem,18vw,5rem)!important}
  #home .home-brand-tagline{font-size:1.18rem!important;margin-top:14px!important}
  .brand-home .brand-title{font-size:1.05rem!important}
}
@media(prefers-reduced-motion:reduce){
  .visual-theme-option,.collection-toast,.btn,.quick-action,.chip,.variant,.overview-check{transition:none!important}
}