/* Home (/): village-art hero, then big white cards straight on the dark page (no light sheet: the cards are
   large enough to carry the page, and a sheet made it all white). Headings sit on the dark background.
   Order follows what people come for: look up a profile, their Town Hall, clan tools, rankings, questions.
   Rhythm: 64px between sections on phones, 96px on desktop; 28px under each heading. */

/* ---------- Hero ---------- */
.hero--full h1{font-size:clamp(36px,calc(2.8vw + 20px),60px);line-height:1.04;max-width:760px!important}
/* The tag help popover may hang below the hero: clip the art layer, not the section. */
.hero--bg.hero--full{overflow:visible;z-index:2}
.hero--full .hero-bg{overflow:hidden}
.hero--full .lede{font-size:17px;line-height:1.5;max-width:600px}
@media (min-width:1024px){.hero--full .lede{font-size:18px}}
.hero--full .eyebrow{font-size:13.5px}
.hero--full .lookup{max-width:760px}
.hero--bg.hero--full .hero-copy{max-width:760px}

/* Your village (profile marked "This is me") and the saved Town Hall: quiet glass chips, not a card. */
.your-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero--bg .your-th,.your-me{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:5px 14px 5px 6px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.hero--bg .your-th:hover,.your-me:hover{background:rgba(255,255,255,.18)}
.hero--bg .your-th img,.your-me img{width:32px;height:32px;object-fit:contain}
.hero--bg .your-th span{flex:0 1 auto}
.hero--bg .your-th em{color:var(--gold-1);font-weight:800}
.your-me[hidden]{display:none}
.your-me span{display:flex;flex-direction:column;line-height:1.15}
.your-me small{font-size:11.5px;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:.02em}
.your-me b{font-size:15px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.your-me svg{width:12px;height:12px}

/* Hero fades into the page colour, not into the old green Town Hall band. */
@media (max-width:1023px){
  .hero--bg.hero--full::before{background:
    linear-gradient(0deg,var(--menu-2) 0%,rgba(13,24,51,.85) 10%,rgba(13,24,51,0) 34%),
    linear-gradient(180deg,#6a5690 0%,rgba(106,86,144,0) 30%)}
}
@media (min-width:1024px){
  .hero--bg.hero--full::before{background:
    linear-gradient(0deg,var(--menu-2) 0%,rgba(13,24,51,.9) 8%,rgba(13,24,51,.5) 20%,rgba(13,24,51,0) 36%),
    linear-gradient(90deg,rgba(13,24,51,.94) 0%,rgba(13,24,51,.8) 34%,rgba(13,24,51,.35) 56%,rgba(13,24,51,0) 70%),
    linear-gradient(180deg,rgba(22,36,74,.85) 0%,rgba(22,36,74,0) 18%)}
}

/* ---------- Sections on the dark page ---------- */
.home-body{background:var(--menu-2);padding-bottom:64px}
.home-body > section{background:none!important;padding:64px 0 0!important}
.home-body > section:first-child{padding-top:40px!important}
@media (min-width:1024px){
  .home-body{padding-bottom:96px}
  .home-body > section{padding-top:96px!important}
  .home-body > section:first-child{padding-top:48px!important}
}
.home-body .sec-head{margin-bottom:28px}
.home-body :is(.hub,.board,.tool,.parchment,.guide){background:#fff;border:0;box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* Town Hall hub: the level strip is a light tab row on the card; the picked level opens into the white card. */
.home-body .hub-tabs{background:var(--card-2)}
.home-body .hub-tabs .th-tile .nm{color:var(--stone-mute)}
.home-body .hub-tabs .th-tile:hover{background:rgba(255,255,255,.55)}
.home-body .hub-tabs .th-tile[aria-pressed="true"]{background:#fff}
.home-body .hub-tabs .th-tile[aria-pressed="true"] .nm{color:var(--stone-ink)}
.home-body .th-arrow{--c1:#fff;--c2:#fff;--cd:#fff;border:0;color:var(--stone-ink);box-shadow:0 1px 0 var(--card-line),0 4px 12px rgba(31,37,56,.14)}
.home-body .th-arrow .icon-white{color:var(--stone-ink)}
.home-body .maxlv{background:var(--stone);border:0}
.home-body .base-card{box-shadow:0 1px 0 var(--card-line);border-color:var(--card-line)}
.home-body :is(.hub-head h3,.tool h3).gt{color:var(--stone-ink);text-shadow:none}

/* Rankings side: a glass sidebar on the dark page, as tall as the board, instead of a short white card beside it. */
.home-body .rank-side{gap:0;align-self:stretch;padding:24px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.home-body .promo{padding:0 0 16px;border:0;border-radius:0;background:none;box-shadow:none;color:#fff}
.home-body .promo img.podium{width:72px;margin:0 0 8px}
.home-body .promo h3.gt{font-size:22px;color:#fff;text-shadow:none}
.home-body .promo p{color:#b9c5e6;font-size:14.5px}
.home-body .board-links{gap:0}
.home-body .board-links .btn{min-height:56px;padding:0 4px;border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.1);background:none;box-shadow:none;color:#fff;text-shadow:none;font:800 15px/1.2 "Nunito",sans-serif;transform:none;filter:none}
.home-body .board-links .btn:hover{color:var(--gold-1)}
.home-body .board-links .btn span{color:#9fb0d6;opacity:1;font-weight:700}
.home-body .board-links .btn span::after{content:" ›"}

/* Tool cards: the example strips on the page tone. */
.home-body .tool .mini{background:var(--stone);border:0;box-shadow:none}

/* About + FAQ: a plain white card. */
.home-body .parchment{border-radius:20px}
.home-body .faq summary .pm{background:var(--card-2)}
@media (max-width:639px){.hero--full .eb-more{display:none}}

/* Town Hall strip: tiles run edge to edge; where more levels are hidden, the edge fades and blurs out under a
   round arrow (classes set by updateArrows in public/home.js). Order stays 18 → 3: most players are TH14+. */
.home-body .hub-tabs .th-shell{padding:0}
.home-body .hub-tabs .th-row{padding:16px 16px 0;scroll-padding:0 56px;scroll-snap-type:none}
.home-body .hub-tabs .th-shell::before,.home-body .hub-tabs .th-shell::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:112px;pointer-events:none;opacity:0;transition:opacity .2s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.home-body .hub-tabs .th-shell::before{left:0;border-radius:22px 0 0 0;background:linear-gradient(90deg,var(--card-2) 28%,rgba(236,232,223,0));-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.home-body .hub-tabs .th-shell::after{right:0;border-radius:0 22px 0 0;background:linear-gradient(270deg,var(--card-2) 28%,rgba(236,232,223,0));-webkit-mask-image:linear-gradient(270deg,#000 40%,transparent);mask-image:linear-gradient(270deg,#000 40%,transparent)}
.home-body .hub-tabs .th-shell.more-prev::before,.home-body .hub-tabs .th-shell.more-next::after{opacity:1}
.home-body .hub-tabs .th-arrow{display:inline-flex;align-items:center;justify-content:center;z-index:3;top:50%;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;transform:translateY(-50%)}
.home-body .hub-tabs .th-arrow:active{transform:translateY(-50%) scale(.94)}
.home-body .hub-tabs .th-arrow.prev{left:12px}
.home-body .hub-tabs .th-arrow.next{right:12px}
.home-body .hub-tabs .th-arrow svg{width:16px;height:16px}
@media (max-width:767px){.home-body .hub-tabs .th-arrow{display:none}.home-body .hub-tabs .th-shell::before,.home-body .hub-tabs .th-shell::after{width:48px}}