/* 30 Oct 2026 (Tom): old browns swapped for Jenny's dark card colours + gold (colours only). */
/* Hearth Home v2 (Jenny, 2026-10-22), the Home screen (html.hv2; ?home=v1 opts out). Every class is hv-*. */
@font-face { font-family: 'HV Gelasio'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/gelasio-700-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'HV Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/roboto-400-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'HV Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/roboto-500-normal-latin.woff2') format('woff2'); }

/* Home owns the whole screen: no sidebar, top bar, app bar or tab bar */
html.hv2 body[data-u-route="home"] { background: radial-gradient(120% 60% at 50% 0%, #19191c 0%, #121214 55%, #0b0b0d 100%) fixed, #0b0b0d; }
html.hv2 body[data-u-route="home"] :is(.u-side, .u-top, .u-abar, .u-tabbar) { display: none !important; }
html.hv2 body[data-u-route="home"] .u-shell { display: block !important; min-height: 0 !important; }
html.hv2 body[data-u-route="home"] .u-main { overflow: visible; }
html.hv2 body[data-u-route="home"] #content { padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; min-height: 0 !important; background: none !important; }

.hv-home {
  --ink: #f4e6cc; --ink-soft: #e2cba3; --ink-faded: #b9ad97; --gold: #e9bd62; --gold-deep: #c9993f; --ember: #e9bd62;
  --serif: 'HV Gelasio', Gelasio, Georgia, serif; --sans: 'HV Roboto', Roboto, 'DejaVu Sans', system-ui, sans-serif;
  --gap: 14px; --dh: 206px; --dmax: none;
  /* The visible screen, not the layout viewport: 100vh includes the address bar and pushes the carousel down. */
  min-height: 0; height: 100%; display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(6px + var(--hearth-safe-top, 0px)) 0 calc(6px + var(--hearth-safe-bottom, 0px));
  color: var(--ink); font: 400 14px/1.35 var(--sans); text-align: left; overflow-x: clip;
  background: radial-gradient(120% 60% at 50% 0%, #19191c 0%, #121214 55%, #0b0b0d 100%), #0b0b0d;
}
.hv-home *, .hv-layer * { box-sizing: border-box; margin: 0; }
.hv-home button, .hv-layer button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 0; min-width: 0; padding: 0; text-transform: none; letter-spacing: normal; box-shadow: none; }
.hv-home :focus-visible, .hv-layer :focus-visible { outline: 2px solid var(--gold, #e9bd62); outline-offset: 3px; }
.hv-i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* header */
.hv-head { height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 16px; }
.hv-brand { display: flex; align-items: center; gap: 8px; flex: none; font: 700 24px var(--serif); color: var(--gold); letter-spacing: .01em; white-space: nowrap; }
.hv-fl { width: 22px; height: 22px; flex: none; overflow: visible; } /* Final2 gold flame (Jenny, Tom 29 Oct): its own colours */
.hv-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.hv-home .hv-join { height: 44px; min-width: 44px; padding: 0 10px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font: 700 13px/1 var(--serif); color: var(--gold); border: 1.5px solid var(--gold-deep); background: linear-gradient(#26262a, #17171a); box-shadow: inset 0 0 0 3px #121214, inset 0 0 0 4px #c9993f55; }
.hv-home .hv-sign { height: 44px; min-width: 44px; padding: 0 12px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font: 700 13px/1 var(--serif); color: #e8e4dc; border: 1.5px solid #5a5f6b; background: linear-gradient(#26262a, #17171a); box-shadow: inset 0 0 0 3px #121214; }
/* Sign in/out sits in the header; the menu row is only for narrow phones where the header would overflow. */
.hv-home .hv-sign[hidden] { display: none; }
@media (max-width: 370px) { .hv-home .hv-sign { display: none; } }
.hv-home .hv-mb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1.5px solid var(--gold-deep); background: linear-gradient(#26262a, #17171a); box-shadow: inset 0 0 0 3px #121214, inset 0 0 0 4px #c9993f55; }

/* carousel */
.hv-car { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; overflow: clip; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; container-type: size; container-name: hvcar; }
.hv-track { display: flex; column-gap: var(--gap); align-items: stretch; width: max-content; will-change: transform; }
.hv-track.hv-anim { transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.hv-track.hv-anim .hv-card { transition: transform .32s; }
.hv-track.hv-anim .hv-card .hv-por { transition: filter .32s; }
.hv-track.hv-anim .hv-card::before { transition: opacity .32s; }
.hv-track.hv-anim .hv-card :is(.hv-nm, .hv-cl) { transition: filter .32s; }
/* Arch and card track the free slot (the carousel box) and stop before a wide row of three spills off the screen. */
.hv-home .hv-card { --d: 0;
  --aw: clamp(112px, min(44cqh, 58cqw), 260px);
  --cw: clamp(180px, min(58cqh, 84cqw), 330px);
  width: var(--cw); flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 14px 12px; border-radius: 22px; border: 1.5px solid var(--gold-deep);
  background: radial-gradient(90% 55% at 50% 30%, #e9bd6226, transparent 70%), linear-gradient(#19191c, #121214);
  box-shadow: inset 0 0 0 3px #121214, inset 0 0 0 4px #c9993f55, 0 10px 24px #000a;
  transform: scale(calc(1 - var(--d) * .08)); }
/* Phones (30 Oct): the arch was capped at 58% of the width, so on a 360-430 px phone the card sat in the middle of a
   tall slot with a 60-100 px empty band above it and between the dots and the doors. The arch now grows into the
   slot's height (leaving room for the name on two lines and the dots) up to 76% of the width, and the card follows. */
@media (max-width: 599px) and (min-height: 681px) {
  .hv-home .hv-card {
    --aw: clamp(112px, min(calc((100cqh - 175px) * .749), 76cqw), 316px);
    --cw: clamp(180px, min(calc(var(--aw) + 32px), 88cqw), 348px);
  }
}
/* side cards: the card frame, arch and portrait darken to 0.55; the text only dims to 0.68 so it stays above 4.5:1 */
.hv-home .hv-card { position: relative; will-change: transform; -webkit-touch-callout: none; }
.hv-home .hv-card::before { content: ""; position: absolute; inset: -1.5px; border-radius: 22px; background: #000; opacity: calc(var(--d) * .45); pointer-events: none; }
.hv-home .hv-card > * { position: relative; }
.hv-home .hv-card .hv-por { filter: brightness(calc(1 - var(--d) * .45)); will-change: filter; }
.hv-home .hv-card :is(.hv-nm, .hv-cl) { filter: brightness(calc(1 - var(--d) * .32)); }
.hv-card img { -webkit-user-drag: none; pointer-events: none; }
.hv-por { position: relative; display: block; width: var(--aw); aspect-ratio: 170 / 227; border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 14px 14px; padding: 4px; background: linear-gradient(#ffe3a0, #c9993f 40%, #957131); box-shadow: 0 0 30px #e9bd6240, 0 8px 20px #000a; }
.hv-pin { position: absolute; inset: 4px; border-radius: calc(var(--aw) / 2 - 4px) calc(var(--aw) / 2 - 4px) 11px 11px; overflow: hidden; background: radial-gradient(70% 55% at 50% 38%, #e9bd621f, transparent 72%), #121214; }
.hv-pin img, .hv-pfx img { position: absolute; max-width: none; height: auto; display: block; }
.hv-pfx { position: absolute; inset: 4px; pointer-events: none; z-index: 2; }
.hv-pfx img { filter: drop-shadow(0 1px .8px rgba(14, 7, 0, .8)) drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
/* token-library art is a round painting: scale it so the circle covers the arch */
/* 4 Nov PR111 fix (Lee B1): free-set portraits are 134% of the .hv-pin width, but .hv-pin is inset 4px so it is taller than 170:227 and art aspects vary;
   the box never ends above the pin's bottom, and cover keeps the art undistorted (only grows past 134% when it has to).
   8 Nov (Tom): original-race portraits are square busts. A cover fill clipped them on the Home card; they now show whole, like the sheet. Standard races keep the cover fill. The doll and token-library art are untouched. */
.hv-pin img.hv-base[src^="img/pop/"] { min-height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Original-race paintings are square busts shown whole on the sheet. Cover-cropping them on the taller Home arch clipped the face. Show the whole painting, upper-weighted like the sheet. */
.hv-pin img.hv-base[src*="/emberkin/"],
.hv-pin img.hv-base[src*="/bramblefolk/"],
.hv-pin img.hv-base[src*="/mireling/"],
.hv-pin img.hv-base[src*="/quarrykin/"],
.hv-pin img.hv-base[src*="/cairnborn/"],
.hv-pin img.hv-base[src*="/duskborne/"],
.hv-pin img.hv-base[src*="/spidicaus/"],
.hv-pin img.hv-base[src*="/lightwrought/"],
.hv-pin img.hv-base[src*="/weatherblood/"],
.hv-pin img.hv-base[src*="/fernwarden/"],
.hv-pin img.hv-base[src*="/velari/"],
.hv-pin img.hv-base[src*="/coppersoul/"],
.hv-pin img.hv-base[src*="/frosthollow/"],
.hv-pin img.hv-base[src*="/felineion-big-cat/"],
.hv-pin img.hv-base[src*="/felineion-little-cat/"] {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: 50% 20%;
}
.hv-pin img.hv-tok { left: 50%; top: 50%; width: 142%; transform: translate(-50%, -50%); }
.hv-pin img.hv-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hv-por.hv-ghost { background: radial-gradient(60% 45% at 50% 45%, #e9bd6222, transparent 70%), #12121488; border: 2px dashed var(--gold-deep); box-shadow: none; display: grid; place-items: center; }
.hv-tagnew { margin-left: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid #c9993f99; font: 700 11px/1.4 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); vertical-align: 2px; }
/* the app's unfinished-character and backup notices, above the carousel */
.hv-notes { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 4px auto 14px; padding: 0 16px; }
.hv-notes > * { margin: 0; }
/* Below the arch, in the flow. Grukka's axe is painted over the top of the portrait, so a badge in the top padding sits behind it. */
.hv-home .hv-card > .hv-tag { position: relative; z-index: 4; display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; border: 1px solid #c9993f99; background: #121214;
  font: 700 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; filter: brightness(calc(1 - var(--d) * .32)); }
/* a hero without a portrait: the arch holds only a prompt to add one */
.hv-home .hv-card > .hv-add { z-index: 1; padding: 4px; background: linear-gradient(#ffe3a0, #c9993f 40%, #957131); box-shadow: 0 0 30px #e9bd6240, 0 8px 20px #000a; color: var(--ink); }
.hv-addin { position: absolute; inset: 9px; border: 1.5px dashed #c9993f99; border-radius: calc(var(--aw) / 2 - 13px) calc(var(--aw) / 2 - 13px) 7px 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; text-align: center; }
.hv-addi { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; color: #24160a; background: linear-gradient(#e9bd62, #a87a2a); border: 1.5px solid #ffe3a0; box-shadow: 0 0 18px #e9bd6255; }
.hv-addi .hv-i { width: 28px; height: 28px; stroke-width: 1.9; }
.hv-addin b { font: 700 18px/1.15 var(--serif); color: var(--ink); }
.hv-addin small { font: 500 12px/1.3 var(--sans); color: var(--ink-soft); }
.hv-add:hover .hv-addin, .hv-add:focus-visible .hv-addin { border-color: var(--gold); }
/* the sheet button covers the whole card behind the portrait prompt */
.hv-home .hv-card > .hv-open { position: static; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hv-open::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.hv-home .hv-open:focus-visible { outline: none; }
.hv-home .hv-open:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 3px; }
.hv-pl { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #24160a; background: linear-gradient(#e9bd62, #a87a2a); border: 1.5px solid #ffe3a0; box-shadow: 0 0 22px #e9bd6266; }
.hv-pl .hv-i { width: 34px; height: 34px; stroke-width: 2; }
.hv-nm { display: block; margin-top: 10px; font: 700 clamp(15px, 4.2cqh, 28px)/1.2 var(--serif); color: var(--ink); max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
.hv-cl { display: block; margin-top: 4px; font: 500 clamp(12px, 2.6cqh, 16px)/1.3 var(--sans); color: var(--ink-soft); max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
.hv-home .hv-cta { margin-top: 14px; height: 50px; padding: 0 24px; border-radius: 14px; display: flex; align-items: center; gap: 8px; font: 700 17px var(--serif); color: #24160a; background: linear-gradient(#e9bd62, #a87a2a); border: 1.5px solid #ffe3a0; box-shadow: 0 0 18px #e9bd6255, inset 0 1px 0 #fff8; }
.hv-cta .hv-i { width: 20px; height: 20px; stroke-width: 2.2; }
.hv-dots { height: 30px; flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
.hv-nav { height: 30px; flex: none; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.hv-nav .hv-dots { margin-top: 0; padding: 0 6px; }
.hv-home .hv-arw { width: 44px; height: 44px; margin: -7px 0; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: none; border: 0; cursor: pointer; }
.hv-arw .hv-i { width: 22px; height: 22px; }
.hv-next .hv-i { transform: rotate(180deg); }
.hv-home .hv-arw:disabled { opacity: .3; cursor: default; }
.hv-home .hv-arw:not(:disabled):hover { background: #c9993f22; }
@media (hover: hover) and (pointer: fine) { .hv-nav .hv-dots { cursor: pointer; } }
/* touch screens swipe; the arrows are for mouse and keyboard */
@media (hover: none), (pointer: coarse) { .hv-home .hv-arw { visibility: hidden; } }
.hv-dots i { --a: 0; display: block; height: 8px; width: calc(8px + var(--a) * 14px); border-radius: 4px; background: color-mix(in srgb, var(--gold) calc(var(--a) * 100%), #2a2a2e); }
.hv-dots i.hv-plus { width: 8px; background: none; position: relative; }
.hv-dots i.hv-plus::before, .hv-dots i.hv-plus::after { content: ""; position: absolute; background: color-mix(in srgb, var(--gold) calc(var(--a) * 100%), rgba(201,153,63,.7)); left: 3px; top: 0; width: 2px; height: 8px; }
.hv-dots i.hv-plus::after { left: 0; top: 3px; width: 8px; height: 2px; }

/* doors: 2x2 on phones */
.hv-doors { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 0; margin: 0 auto; width: 100%; max-width: var(--dmax); }
.hv-home .hv-door { height: 92px; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 9px; padding: 0 8px; text-align: left;
  row-gap: 10px; min-width: auto; border-radius: 34px 34px 14px 14px; border: 1.5px solid var(--gold-deep);
  background: repeating-linear-gradient(90deg, #0000 0 22px, #00000030 22px 24px), radial-gradient(80% 50% at 50% 30%, #2a2a2e, transparent 75%), linear-gradient(#1a1a1d, #111113);
  box-shadow: inset 0 0 0 4px #121214, inset 0 0 0 5px #c9993f55, 0 10px 22px #000a; }
.hv-home .hv-door.hv-d-dm { border-color: #e9bd62; box-shadow: inset 0 0 0 4px #121214, inset 0 0 0 5px #e9bd6288, 0 0 22px #e9bd6244, 0 10px 22px #000a; }
.hv-ring { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(#111113 55%, #0000 57%), conic-gradient(#ffe3a0, #c9993f, #957131, #c9993f, #ffe3a0); box-shadow: 0 4px 10px #000a, 0 0 14px #e9bd6233; }
.hv-ring .hv-i { width: 21px; height: 21px; }
.hv-door b { font: 700 16px/1.15 var(--serif); color: var(--ink); white-space: nowrap; }
.hv-door small { margin-top: 2px; font: 500 11.5px/1.25 var(--sans); color: var(--ink-soft); white-space: nowrap; }

/* menu sheet */
html.hv-menu-open, html.hv-menu-open body { overscroll-behavior: none; }
.hv-layer { position: fixed; inset: 0; z-index: 9000; font: 400 14px/1.35 'HV Roboto', Roboto, system-ui, sans-serif; }
.hv-scrim { position: fixed; inset: 0; background: #080808c4; }
.hv-sheet:focus { outline: none; }
.hv-sheet { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(22px + var(--hearth-safe-bottom, 0px)); border-radius: 22px 22px 0 0; border-top: 1.5px solid #c9993f; background: linear-gradient(#19191c, #121214); box-shadow: 0 -10px 30px #000c; max-width: 520px; margin: 0 auto; outline: none; }
.hv-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(201,153,63,.7); margin: 0 auto 10px; }
.hv-layer .hv-mi { width: 100%; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-radius: 12px; color: #e9bd62; font: 700 17px 'HV Gelasio', Gelasio, Georgia, serif; }
.hv-layer .hv-mi + .hv-mi { border-top: 1px solid #c9993f33; border-radius: 0; }
.hv-mi span { color: #f4e6cc; flex: 1; text-align: left; }
.hv-mi em { font: 400 22px 'HV Roboto', Roboto, system-ui, sans-serif; color: #b9ad97; font-style: normal; }

/* "+ Paper sheet" under the Hearth wordmark (Tom 4 Nov): its own row, so it never meets Join game or the menu */
.hv-prow { flex: none; display: flex; justify-content: flex-start; padding: 0 16px; }
@media (min-width: 600px) { .hv-prow { padding: 0 32px; } }
/* short landscape phones: no height to spare for a row, so the button floats in the free left gutter under the wordmark */
@media (orientation: landscape) and (max-height: 500px) { .hv-home { position: relative; } .hv-prow { position: absolute; z-index: 2; top: calc(44px + var(--hearth-safe-top, 0px)); left: 0; padding: 0 12px; } }
.hv-home .hv-paper { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 16px 0 12px; border-radius: 22px; border: 1.5px solid var(--gold-deep, #957131); background: linear-gradient(#19191c, #121214); color: #e9bd62; font: 700 14px 'HV Gelasio', Gelasio, Georgia, serif; cursor: pointer; white-space: nowrap; }
.hv-home .hv-paper .hv-i { width: 16px; height: 16px; }
.hv-home .hv-paper:hover { background: #c9993f22; }
.hv-home .hv-paper:focus-visible { outline: 2px solid var(--gold, #c9993f); outline-offset: 2px; }

/* shop page */
.hv-shop > * { width: 100%; max-width: 528px; margin-left: auto; margin-right: auto; }
.hv-shop { padding: calc(8px + var(--hearth-safe-top, 0px)) 16px calc(18px + var(--hearth-safe-bottom, 0px)); }
.hv-shead { padding: 0; display: grid; grid-template-columns: 44px 1fr 44px; }
.hv-title { text-align: center; font: 700 22px var(--serif); color: var(--ink); }
.hv-home .hv-title:focus { outline: none; }
.hv-lede { margin: 8px 2px 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.hv-packs { display: grid; gap: 12px; list-style: none; padding: 0; }
.hv-pack { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; text-align: left; border: 1.5px solid var(--gold-deep); background: linear-gradient(#19191c, #121214); box-shadow: inset 0 0 0 3px #121214, inset 0 0 0 4px #c9993f55, 0 8px 20px #000a; }
.hv-cov { flex: none; position: relative; width: 96px; height: 128px; border-radius: 48px 48px 10px 10px; padding: 3px; background: linear-gradient(#ffe3a0, #c9993f 40%, #957131); }
.hv-cin { position: absolute; inset: 3px; border-radius: 45px 45px 8px 8px; overflow: hidden; background: #121214; }
.hv-cin img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.hv-pt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hv-pt em { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faded); font-style: normal; border: 1px solid #c9993f66; border-radius: 8px; padding: 2px 7px; }
.hv-pt b { margin-top: 8px; font: 700 19px var(--serif); }
.hv-pt small { margin-top: 3px; color: var(--ink-soft); font-size: 13px; }
.hv-pt i { margin-top: 10px; font: 500 12.5px var(--sans); color: var(--gold); font-style: normal; }

/* sizes */
@media (max-width: 370px) {
  .hv-home { --dh: 190px; }
  /* QA (1 Nov): at 344 px "Map builder" pushed its column wider, so that door ran to 2 px from the right edge.
     Equal columns, a slightly smaller ring and a label that can never widen its door. */
  .hv-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-home .hv-door { height: 84px; column-gap: 6px; padding: 0 6px 0 7px; grid-template-columns: 38px minmax(0, 1fr); }
  .hv-home .hv-ring { width: 38px; height: 38px; }
  .hv-door b { font-size: 14px; }
  .hv-door small { font-size: 10.5px; }
  .hv-door b, .hv-door small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* Below about 340 px two doors side by side do not fit ("Map builder" ran off the right edge at 280, Lee 31 Oct):
   one door per row, each a short full-width bar, and a label never pushes its door wider than the column. */
@media (max-width: 339.98px) {
  .hv-doors { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hv-home .hv-door { height: 56px; grid-template-columns: 36px minmax(0, 1fr); row-gap: 1px; align-content: center; padding: 0 12px; border-radius: 22px 22px 12px 12px; }
  .hv-home .hv-ring { width: 36px; height: 36px; }
  .hv-home .hv-ring .hv-i { width: 17px; height: 17px; }
  .hv-door b, .hv-door small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 339.98px) and (max-height: 680px) {
  .hv-doors { gap: 6px; }
  .hv-home .hv-door { height: 46px; }
  .hv-home .hv-ring { width: 30px; height: 30px; }
  .hv-home .hv-door { grid-template-columns: 30px minmax(0, 1fr); }
}
@media (min-width: 600px) {
  .hv-home { --gap: 24px; --dh: 230px; --dmax: 760px; }
  .hv-home .hv-card {
    --aw: clamp(170px, min(46cqh, 40cqw), 320px);
    --cw: clamp(240px, min(60cqh, 46cqw), 420px);
  }
  .hv-head { height: 64px; padding: 0 28px 0 32px; }
  .hv-brand { font-size: 28px; }
  .hv-doors { grid-template-columns: repeat(var(--hv-doors, 4), 1fr); }
  .hv-home .hv-door { height: var(--dh); grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; justify-items: center; align-content: stretch; text-align: center; padding: 0 8px 22px;
    border-radius: 999px 999px 14px 14px / 110px 110px 14px 14px; }
  .hv-ring { grid-row: 1; align-self: center; margin: 0; width: 66px; height: 66px; }
  .hv-ring .hv-i { width: 30px; height: 30px; }
  .hv-door b { font-size: 20px; }
  .hv-door small { font-size: 13px; }
  .hv-shead { height: 64px; }
}
@media (min-width: 1000px) {
  .hv-home { --dh: 196px; --dmax: 900px; }
  .hv-home .hv-card {
    --aw: clamp(200px, min(48cqh, 22cqw), 340px);
    --cw: clamp(270px, min(62cqh, 28cqw), 400px);
  }
}
@media (min-width: 1300px) {
  .hv-home { --gap: 28px; --dh: 220px; --dmax: 1040px; }
  .hv-home .hv-card {
    --aw: clamp(220px, min(46cqh, 20cqw), 360px);
    --cw: clamp(300px, min(60cqh, 26cqw), 440px);
  }
}
/* Home never scrolls. --hv-vv is visualViewport.height (home-v2.js), so the address bar cannot push the page down.
   100dvh covers the first paint, before that script runs. min-height:0 beats the app's min-height:100vh. */
html.hv2:has(body[data-u-route="home"]),
html.hv2:has(body[data-u-route="home"]) body {
  height: var(--hv-vv, 100dvh) !important; max-height: var(--hv-vv, 100dvh) !important; min-height: 0 !important; overflow: hidden !important;
}
html.hv2 body[data-u-route="home"] :is(.app, .u-shell, .u-main, #content, .hv-home) {
  height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important;
  /* clip, not hidden (Lee, 31 Oct): a hidden box can still be scrolled, so at 280 px focusing a door that stuck out
     slid the whole Home left and clipped the brand. clip cannot scroll; browsers without it keep hidden. */
  overflow: clip !important;
}
html.hv2 body[data-u-route="home"] .hv-home.hv-shop { overflow: auto !important; }
/* Wide and not very tall: the large doors and portraits would stick out of that locked page. Door title-to-subtitle
   spacing stays 12px (row-gap 10 + the subtitle's 2px margin). */
@media (min-width: 600px) and (min-height: 690px) and (max-height: 860px) {
  .hv-home { --dh: 150px; }
  .hv-home .hv-card { padding: 12px 14px 10px; }
  .hv-nm { margin-top: 8px; }
  .hv-cl { margin-top: 2px; }
  .hv-nav { margin-top: 6px; }
  .hv-home .hv-door { padding-bottom: 12px; }
  .hv-ring { width: 44px; height: 44px; }
  .hv-ring .hv-i { width: 20px; height: 20px; }
  .hv-door b { font-size: 16px; }
  .hv-door small { font-size: 11.5px; }
}
/* Short windows, including landscape phones: shrink the card and the tiles until the page fits.
   Tall frames (780 and up) keep the comp's door spacing. */
@media (max-height: 680px) {
  .hv-home { --dh: 52px; }
  .hv-head { height: 44px; }
  .hv-brand { font-size: 20px; }
  .hv-fl { width: 18px; height: 18px; }
  .hv-home .hv-card { padding: 8px 10px 6px; }
  .hv-nm { margin-top: 6px; }
  .hv-cl { margin-top: 1px; }
  .hv-nav, .hv-dots { height: 22px; margin-top: 4px; }
  .hv-doors { padding-top: 6px; gap: 8px; }
  .hv-home .hv-door { height: 52px; row-gap: 1px; align-content: center; padding-bottom: 0; }
  .hv-ring { width: 32px; height: 32px; }
  .hv-ring .hv-i { width: 16px; height: 16px; }
  .hv-door b { font-size: 13px; line-height: 1.1; }
  .hv-door small { margin-top: 0; font-size: 10px; line-height: 1.1; }
}
@media (max-height: 680px) and (min-width: 600px) {
  .hv-home { --dmax: none; }
  .hv-home .hv-card {
    --aw: clamp(180px, min(50cqh, 24cqw), 320px);
    --cw: clamp(240px, min(64cqh, 30cqw), 380px);
  }
  .hv-doors { grid-template-columns: repeat(var(--hv-doors, 4), minmax(0, 1fr)); }
  .hv-home .hv-door {
    height: 52px; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto;
    justify-items: start; align-content: center; text-align: left; padding: 0 8px; border-radius: 16px;
  }
  .hv-ring { grid-row: 1 / 3; align-self: center; }
  .hv-head { height: 44px; padding: 0 8px 0 12px; }
}
@media (max-height: 520px) {
  .hv-home { --dh: 44px; }
  .hv-home .hv-card {
    padding: 4px 8px;
    --aw: clamp(96px, min(36cqh, 48cqw), 150px);
    --cw: clamp(156px, min(48cqh, 72cqw), 220px);
  }
  .hv-nm { margin-top: 4px; }
  .hv-cl { margin-top: 0; }
  .hv-nav, .hv-dots { height: 18px; margin-top: 2px; }
  .hv-doors { padding-top: 4px; gap: 6px; }
  .hv-home .hv-door { height: 44px; }
  .hv-ring { width: 28px; height: 28px; }
  .hv-ring .hv-i { width: 14px; height: 14px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .hv-home .hv-card {
    --aw: clamp(104px, min(34cqh, 16cqw), 160px);
    --cw: clamp(168px, min(46cqh, 24cqw), 240px);
  }
  .hv-home .hv-door { height: 44px; grid-template-columns: 28px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-track.hv-anim, .hv-track.hv-anim .hv-card { transition: none; }
}
/* Browser only. Home stays the same flex page (a toast still takes room from the carousel, so the
   doors do not jump). Overflow scrolls instead of clipping, so a short window can reach GM, Map
   builder and Shop. Installed PWA keeps the clip rules above. Dot boxes stay the same size; the
   hit area around each dot is larger. */
@media (display-mode: browser) {
  html.hv2:has(body[data-u-route="home"]),
  html.hv2:has(body[data-u-route="home"]) body {
    overflow-x: clip !important; overflow-y: auto !important;
  }
  html.hv2 body[data-u-route="home"] :is(.app, .u-shell, .u-main, #content, .hv-home) {
    overflow: auto !important;
  }
  .hv-dots i:not(.hv-plus) { position: relative; }
  .hv-dots i:not(.hv-plus)::after { content: ""; position: absolute; left: -8px; right: -8px; top: -16px; bottom: -16px; }
}