/* ─────────────────────────────────────────────────────────────────────────────
   Home, below the wishlist strip — "Hearthside den".

   The rest of the app went painted and cosy (the Games / Images / Videos split
   rooms, the Toon Hearth lock screen, the Torrents harbour), while Home kept a
   row of flat quick tiles, five identical rails and a stat grid. This sheet
   styles the replacement built in app.js (homeRenderQuick / MediaResume /
   Shelves / MediaNew):

   - Rooms: Games, Videos, Images, Downloads as painted doorways, each with its
     lanes as sticker buttons (Local·Web·Steam, Videos·Toons·Hentai·VR, …).
   - Now showing: the newest half-watched video as a feature card + a side grid.
   - Every shelf is a FITTED grid (homeFitGrids): columns from the width, at
     most two full rows, never a sideways scroll, never an empty cell.
   - Tiles are chunky stickers: a 2px ink outline, a hard offset shadow when
     lifted, a painted lane badge, a pop-in Play.

   Fonts: 'Hearth Fredoka' is declared by lock/lock.css (lock/fredoka.woff2).
   ───────────────────────────────────────────────────────────────────────────── */

.home-scroll {
  --hx-ink: #06070b;
  --hx-line: rgba(255, 255, 255, .075);
  --hx-line-hi: rgba(255, 214, 153, .5);
  --hx-cream: #fff3de;
  --hx-amber: #f6b544;
  --hx-coral: #ff7d5c;
  --hx-teal: #4fd1c5;
  --hx-radius: 16px;
  --hx-font: 'Hearth Fredoka', 'Fredoka', ui-rounded, system-ui, sans-serif;
  --hx-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ─── section heads ─── */
.hx-sec { margin-top: 34px; }
.hx-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 2px 14px;
}
.hx-head-ico {
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
  transition: transform .5s var(--hx-pop);
}
.hx-sec:hover .hx-head-ico { transform: rotate(-8deg) scale(1.08); }
.hx-h2 {
  margin: 0;
  font-family: var(--hx-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .2px;
  color: var(--text);
}
.hx-count {
  font-family: var(--hx-font);
  font-weight: 600;
  font-size: 13px;
  min-width: 26px; height: 24px;
  padding: 0 8px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  color: var(--hx-ink);
  background: var(--hx-amber);
  box-shadow: 0 2px 0 var(--hx-ink);
  font-variant-numeric: tabular-nums;
}
.hx-sub { font-size: 13px; color: var(--text-mute); }
.hx-more {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--hx-line);
  background: rgba(255, 255, 255, .03);
  color: var(--text-dim);
  font: 600 12.5px/1 var(--hx-font);
  letter-spacing: .2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .2s var(--hx-pop);
}
.hx-more span { transition: transform .2s var(--hx-pop); }
.hx-more:hover { color: var(--text); border-color: var(--hx-line-hi); background: rgba(246, 181, 68, .08); }
.hx-more:hover span { transform: translateX(3px); }
.hx-more:focus-visible,
.hx-filter:focus-visible,
.hx-lane:focus-visible,
.hx-room-hit:focus-visible { outline: 2px solid var(--hx-amber); outline-offset: 2px; }

/* segmented filter (Just arrived) */
.hx-filters {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  border: 1.5px solid var(--hx-line);
}
.hx-filter {
  min-height: 30px;
  padding: 0 13px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: 600 12.5px/1 var(--hx-font);
  cursor: pointer;
  transition: background .15s, color .15s, transform .2s var(--hx-pop);
}
.hx-filter:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.hx-filter.on {
  color: var(--hx-ink);
  background: var(--hx-cream);
  box-shadow: 0 2px 0 var(--hx-ink);
}

/* ─── rooms ─── */
.hx-rooms {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1180px) { .hx-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hx-rooms { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* SFW Home has five rooms (Media joined Games / Videos / Images / Downloads,
   2026-11-03) and a member can have three: neither may leave an empty cell.
   Five is a row of three over a row of two on a six-track grid; at two columns
   an odd last room takes the whole row. app.js sets data-count. */
@media (min-width: 1181px) {
  .hx-rooms[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-rooms[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hx-rooms[data-count="5"] > .hx-room { grid-column: span 2; }
  .hx-rooms[data-count="5"] > .hx-room:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .hx-rooms > .hx-room:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.hx-room {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 2px solid var(--hx-line);
  background: #0e1016;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  transition: transform .35s var(--hx-pop), box-shadow .25s, border-color .25s;
}
.hx-room:hover,
.hx-room:focus-within {
  transform: translateY(-4px);
  border-color: var(--hx-line-hi);
  box-shadow: 0 6px 0 var(--hx-ink), 0 22px 40px rgba(0, 0, 0, .45);
}
.hx-room-scene {
  position: absolute; inset: 0; z-index: -1;
  background: var(--room-bg) center 40% / cover no-repeat;
  filter: saturate(1.05) brightness(.8);
  transform: scale(1.04);
  transition: transform 7s cubic-bezier(.2, .6, .2, 1), filter .4s;
}
.hx-room-scene::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 9, 14, .15) 0%, rgba(8, 9, 14, .2) 35%, rgba(8, 9, 14, .88) 78%, rgba(8, 9, 14, .96) 100%);
}
.hx-room:hover .hx-room-scene { transform: scale(1.14) translate3d(-1.5%, -1%, 0); filter: saturate(1.15) brightness(.9); }
.hx-room-hit {
  position: absolute; inset: 0; z-index: 1;
  border: 0; border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.hx-room-ico {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 72px; height: 72px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)) drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
  transform-origin: 50% 90%;
}
.hx-room:hover .hx-room-ico { animation: hx-bob 1.1s var(--hx-pop) both; }
@keyframes hx-bob {
  0%   { transform: none; }
  30%  { transform: translateY(-8px) scale(1.08, .94) rotate(-4deg); }
  60%  { transform: translateY(1px) scale(.96, 1.05) rotate(2deg); }
  100% { transform: none; }
}
.hx-room-txt {
  position: relative; z-index: 2;
  display: grid; gap: 3px;
  pointer-events: none;
}
.hx-room-title {
  display: flex; align-items: center; gap: 10px;
  font: 600 28px/1.05 var(--hx-font);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.hx-room-title b {
  font: 600 14px/1 var(--hx-font);
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--hx-ink);
  background: var(--hx-cream);
  box-shadow: 0 2px 0 var(--hx-ink);
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}
.hx-room-line { font-size: 13px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* Every room's lanes are ONE row of equal tiles, whatever the room's width or
   lane count: icon, then name, then count, stacked so no tile ever wraps
   differently from its neighbours (a lane with no count keeps the same
   height). Inline pills wrapped
   Videos' fourth lane (VR) onto a second line, so its row stood taller than
   its neighbours' and the four rooms stopped lining up (Rober, 2026-10-14). */
.hx-room-lanes {
  position: relative; z-index: 2;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
.hx-lane {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 0; min-height: 70px;
  padding: 6px 5px 7px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .16);
  background: rgba(10, 11, 16, .66);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #f3f1ec;
  font: 600 12.5px/1 var(--hx-font);
  cursor: pointer;
  transition: transform .2s var(--hx-pop), background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.hx-lane img { width: 24px; height: 24px; object-fit: contain; }
.hx-lane img { flex: none; }
.hx-lane span,
.hx-lane b {
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-lane b {
  font-weight: 600; font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}
.hx-lane:hover {
  transform: translateY(-2px);
  background: var(--hx-cream);
  border-color: var(--hx-cream);
  color: var(--hx-ink);
  box-shadow: 0 3px 0 var(--hx-ink);
}
.hx-lane:hover b { color: rgba(6, 7, 11, .6); }
.hx-lane:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hx-ink); }
.hx-lane.hot { border-color: var(--hx-amber); box-shadow: 0 0 0 3px rgba(246, 181, 68, .18); }
.hx-lane.hot b { color: var(--hx-amber); }
.hx-lane.hot:hover b { color: #8a4b00; }

/* ─── the rooms fold (SFW profile; home-ledger.js) ───
   A chevron folds the four doorways into a row of plates that open the same
   rooms. The strip is clipped only while it moves (.is-moving) or is shut: at
   rest a room lifts 4px and casts a shadow past the strip, and a standing
   overflow:hidden would cut both. */
.hx-roomwrap { margin-top: 22px; }
.hx-roomwrap .hx-rooms { margin-top: 0; min-height: 0; transition: opacity .32s ease .08s; }
.hx-roomhead {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.hx-roomhead[hidden] { display: none; }
.hx-roomwrap.is-folded .hx-roomhead { margin-bottom: 0; }
.hx-fold {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 0 11px 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--hx-line);
  background: rgba(255, 255, 255, .03);
  color: var(--text-dim);
  font: 600 12.5px/1 var(--hx-font);
  letter-spacing: .2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.hx-fold:hover { color: var(--text); border-color: var(--hx-line-hi); background: rgba(246, 181, 68, .08); }
.hx-fold:focus-visible,
.hx-door:focus-visible { outline: 2px solid var(--hx-amber); outline-offset: 2px; }
.hx-fold-chev { transition: transform .5s var(--hx-pop); }
.hx-roomwrap.is-folded .hx-fold-chev { transform: rotate(-90deg); }
.hx-roomwrap.is-folded .hx-fold { min-height: 46px; }

.hx-roomfold {
  display: grid;
  grid-template-rows: 1fr;
}
/* Slides only when the chevron was pressed (home-ledger.js sets is-moving).
   At page load the rooms arrive folded by default, and a standing transition
   would show them open and slide them shut on every visit. */
.hx-roomwrap.is-moving > .hx-roomfold { transition: grid-template-rows .5s cubic-bezier(.3, .9, .3, 1); }
.hx-roomwrap.is-folded > .hx-roomfold { grid-template-rows: 0fr; }
.hx-roomwrap.is-moving > .hx-roomfold > .hx-rooms,
.hx-roomwrap.is-folded > .hx-roomfold > .hx-rooms { overflow: hidden; }
.hx-roomwrap.is-folded > .hx-roomfold > .hx-rooms {
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .5s;
}

/* The folded row: one plate per room, sharing the row the way the rooms share
   the strip, so folding never leaves a gap where a doorway was. */
.hx-doors { display: none; flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 8px; }
.hx-roomwrap.is-folded .hx-doors { display: flex; }
.hx-door {
  flex: 1 1 150px; min-width: 0;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px;
  padding: 4px 14px 4px 8px;
  border-radius: 16px;
  border: 1.5px solid var(--hx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), #0e1016;
  color: #f3f1ec;
  font: 600 14px/1 var(--hx-font);
  cursor: pointer;
  transition: transform .2s var(--hx-pop), background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.hx-door img { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.hx-door span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-door b {
  margin-left: auto;
  font: 600 12.5px/1 var(--hx-font);
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}
.hx-door:hover {
  transform: translateY(-2px);
  background: var(--hx-cream);
  border-color: var(--hx-cream);
  color: var(--hx-ink);
  box-shadow: 0 3px 0 var(--hx-ink);
}
.hx-door:hover b { color: rgba(6, 7, 11, .6); }
.hx-door:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hx-ink); }
/* Only when the chevron was just pressed: the rooms repaint whenever a count
   changes, and plates that re-popped on every repaint would be a tic. */
.hx-roomwrap.is-moving.is-folded .hx-door {
  animation: hx-pop-in .42s var(--hx-pop) calc(var(--i, 0) * 55ms + 140ms) backwards;
}

/* ─── the ledger: your library in figures (SFW profile; home-ledger.js) ───
   One ruled band, not a row of cards: the rooms above are the cards. The 2px
   gaps show the band's own ground as rules; a figure grows to fill its row, so
   the last row never ends on an empty cell whatever the library count is. */
.hx-ledger .hx-sec { margin-top: 30px; }
.hx-figs {
  display: flex; flex-wrap: wrap;
  gap: 2px;
  border-radius: 22px;
  border: 2px solid var(--hx-line);
  background: #23262f;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.hx-fig {
  flex: 1 1 190px; min-width: 0;
  display: grid; align-content: start; justify-items: start;
  gap: 8px;
  padding: 16px 18px 18px;
  border: 0;
  background: radial-gradient(130% 100% at 0% 0%, rgba(246, 181, 68, .07), transparent 62%), #0e1016;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.hx-fig:hover { background-color: #171a23; }
.hx-fig:focus-visible { outline: 2px solid var(--hx-amber); outline-offset: -4px; }
.hx-fig-top { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.hx-fig-ico {
  flex: none;
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
  transform-origin: 50% 90%;
}
.hx-fig:hover .hx-fig-ico { animation: hx-bob 1.1s var(--hx-pop) both; }
.hx-fig-label {
  min-width: 0;
  font: 600 14px/1.15 var(--hx-font);
  letter-spacing: .3px;
  color: #c9cfdc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-fig-val {
  font: 600 36px/1 var(--hx-font);
  letter-spacing: .2px;
  color: var(--hx-cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hx-fig.is-hot .hx-fig-val { color: var(--hx-amber); }
.hx-fig-sub {
  max-width: 100%;
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── tiles (games + media) ─── */
.hx-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 14px;
}
.hx-grid > .is-over { display: none; }

.hx-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--hx-radius);
  border: 2px solid var(--hx-line);
  background: var(--surface-2);
  cursor: pointer;
  outline: none;
  transition: transform .3s var(--hx-pop), box-shadow .2s, border-color .2s;
}
.hx-grid.is-few .hx-tile { aspect-ratio: auto; height: 250px; }
.hx-tile:hover,
.hx-tile:focus-visible {
  transform: translateY(-4px) rotate(-.4deg);
  border-color: var(--hx-line-hi);
  box-shadow: 0 5px 0 var(--hx-ink), 0 18px 30px rgba(0, 0, 0, .45);
}
.hx-tile:focus-visible { border-color: var(--hx-amber); }
.hx-tile:active { transform: translateY(-1px); box-shadow: 0 2px 0 var(--hx-ink); }
.hx-tile .hc-art,
.hx-feature .hc-art {
  position: absolute; inset: 0; z-index: -2;
  display: block;
  overflow: hidden;
}
.hx-tile .hc-art img,
.hx-feature .hc-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: scale(var(--home-cover-scale, 1));
  transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .18s;
}
.hx-tile:hover .hc-art img { transform: scale(calc(var(--home-cover-scale, 1) * 1.07)); }
.hc-art .hc-ph,
.hx-upd .hc-art .hc-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 30px/1 var(--hx-font);
  color: rgba(255, 255, 255, .35);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #262a3b, #171a24);
}
.hx-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 7, 11, .35) 0%, transparent 28%, transparent 46%, rgba(6, 7, 11, .9) 100%);
  pointer-events: none;
}
.hx-lane-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px;
  padding: 0 9px 0 3px;
  border-radius: 999px;
  background: rgba(8, 9, 14, .72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #efece6;
  font: 600 11.5px/1 var(--hx-font);
  pointer-events: none;
}
.hx-lane-badge img { width: 22px; height: 22px; object-fit: contain; }
.hx-chip {
  position: absolute; top: 9px; right: 9px;
  padding: 5px 9px;
  border-radius: 8px;
  font: 600 11.5px/1 var(--hx-font);
  color: var(--hx-ink);
  background: var(--hx-cream);
  box-shadow: 0 2px 0 var(--hx-ink);
  transform: rotate(3deg);
  pointer-events: none;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden; text-overflow: ellipsis;
}
.hx-chip.new { background: #7ef0b0; }
.hx-chip.fav { background: var(--hx-amber); letter-spacing: 1px; }
.hx-chip.set { background: #f9a8d4; }
.hx-plate {
  position: absolute; left: 12px; right: 12px; bottom: 11px;
  display: grid; gap: 3px;
  pointer-events: none;
}
.hx-title {
  font: 600 15.5px/1.2 var(--hx-font);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hx-play {
  position: absolute; left: 50%; top: 44%;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--hx-ink);
  background: var(--hx-amber);
  border: 2.5px solid var(--hx-ink);
  box-shadow: 0 4px 0 var(--hx-ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  transition: opacity .18s, transform .3s var(--hx-pop), background .15s;
  cursor: pointer;
}
.hx-play svg { width: 22px; height: 22px; margin-left: 3px; }
.hx-play.static { pointer-events: none; }
.hx-tile:hover .hx-play,
.hx-tile:focus-within .hx-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hx-play:hover { background: var(--hx-cream); transform: translate(-50%, -50%) scale(1.08) !important; }
.hx-play:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); outline: 2px solid #fff; outline-offset: 2px; }
.hx-prog {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}
.hx-prog i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--hx-coral), var(--hx-amber));
  border-radius: 0 3px 3px 0;
}
.hx-tile .hx-prog ~ .hx-plate,
.hx-tile:has(.hx-prog) .hx-plate { bottom: 14px; }
.hx-tile.is-running { border-color: rgba(52, 211, 153, .7); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }

/* ─── a library title on a tile: its poster stood beside its name ───
   An episode or a film from a TV / Movies library is drawn as its TITLE: the
   catalogue's backdrop behind, the poster propped in the corner, the name to
   its right. The tile keeps the shelf's one shape; the poster is sized off the
   tile's own height (cqh), so it fits a phone tile and a stretched banner alike. */
.hx-tile.has-cover { container-type: size; }
.hx-tile .hx-cover {
  inset: auto auto 10px 10px; z-index: 0;
  width: auto; height: 64cqh;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, .18);
  background: #171a24;
  box-shadow: 0 3px 0 var(--hx-ink), 0 10px 18px rgba(0, 0, 0, .5);
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
  transition: transform .35s var(--hx-pop);
  pointer-events: none;
}
.hx-tile .hx-cover img,
.hx-tile:hover .hx-cover img { object-position: center; transform: none; }
.hx-tile:hover .hx-cover,
.hx-tile:focus-visible .hx-cover { transform: rotate(1.5deg) translateY(-3px) scale(1.05); }
.hx-tile.has-cover .hx-plate { left: calc(64cqh * 2 / 3 + 24px); }
.hx-tile.has-cover .hx-title {
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.hx-tile.has-cover .hx-meta {
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.3;
}
/* No backdrop in the catalogue: the poster is its own ground, out of focus. */
.hx-tile.is-poster-bg > .hc-art:not(.hx-cover) img { filter: blur(16px) saturate(1.15) brightness(.62); transform: scale(1.3); }
.hx-tile.is-title .hx-shade {
  background: linear-gradient(180deg, rgba(6, 7, 11, .4) 0%, transparent 30%, rgba(6, 7, 11, .35) 48%, rgba(6, 7, 11, .92) 100%);
}

/* ─── Now showing ─── */
.hx-theater {
  display: grid;
  gap: 14px;
  grid-template-columns: 2fr 1fr 1fr;
}
.hx-theater > .hx-tile { aspect-ratio: 16 / 9; }
.hx-theater > :first-child { grid-row: 1 / 3; }
.hx-theater.n3 { grid-template-columns: 2fr 1fr; }
.hx-theater.n2 { grid-template-columns: 1fr 1fr; }
.hx-theater.n2 > :first-child { grid-row: auto; aspect-ratio: 16 / 9; }
.hx-theater.n1 { grid-template-columns: 1fr; }
.hx-theater.n1 > :first-child { grid-row: auto; aspect-ratio: 21 / 8; }
.hx-skel {
  min-height: 120px;
  aspect-ratio: 16 / 9;
  border-radius: var(--hx-radius);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: home-shimmer 1.3s linear infinite;
}
.hx-theater > .hx-skel:first-child { aspect-ratio: auto; }

.hx-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 260px;
  border-radius: 20px;
  border: 2px solid var(--hx-line);
  background: var(--surface-2);
  cursor: pointer;
  outline: none;
  transition: transform .3s var(--hx-pop), box-shadow .2s, border-color .2s;
}
.hx-feature:hover,
.hx-feature:focus-visible {
  transform: translateY(-4px);
  border-color: var(--hx-line-hi);
  box-shadow: 0 6px 0 var(--hx-ink), 0 24px 40px rgba(0, 0, 0, .5);
}
.hx-feature:focus-visible { border-color: var(--hx-amber); }
.hx-feature .hc-art img { transform: scale(1.02); }
.hx-feature:hover .hc-art img { transform: scale(1.06); }
.hx-feature .hx-shade {
  background:
    linear-gradient(180deg, rgba(6, 7, 11, .35) 0%, transparent 25%, transparent 42%, rgba(6, 7, 11, .94) 100%),
    linear-gradient(90deg, rgba(6, 7, 11, .55), transparent 60%);
}
.hx-feature .hx-lane-badge { top: 12px; left: 12px; height: 32px; font-size: 12.5px; }
.hx-feature .hx-lane-badge img { width: 26px; height: 26px; }
.hx-feature-body {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  display: grid; gap: 8px;
}
.hx-kicker {
  font: 600 12px/1 var(--hx-font);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hx-amber);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.hx-feature-title {
  font: 600 clamp(20px, 2.3vw, 32px)/1.1 var(--hx-font);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-feature-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.hx-resume {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: var(--hx-ink);
  background: var(--hx-amber);
  border: 2px solid var(--hx-ink);
  box-shadow: 0 4px 0 var(--hx-ink);
  font: 600 15px/1 var(--hx-font);
  transition: transform .25s var(--hx-pop), background .15s, box-shadow .15s;
}
.hx-resume svg { width: 16px; height: 16px; }
.hx-feature:hover .hx-resume { background: var(--hx-cream); transform: translateY(-2px) rotate(-2deg); }
.hx-feature .hx-meta { font-size: 13px; }
.hx-prog.big {
  position: relative;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
}

/* ─── Updates ready (to-do rows) ─── */
.hx-upd-grid { gap: 10px 14px; }
.hx-upd {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: 14px;
  border: 2px solid var(--hx-line);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: transform .25s var(--hx-pop), box-shadow .2s, border-color .2s;
}
.hx-upd:hover,
.hx-upd:focus-visible {
  transform: translateY(-3px);
  border-color: var(--hx-line-hi);
  box-shadow: 0 4px 0 var(--hx-ink), 0 14px 24px rgba(0, 0, 0, .4);
}
.hx-upd:focus-visible { border-color: var(--hx-amber); }
.hx-upd .hc-art {
  position: relative;
  display: block;
  width: 112px; aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
}
.hx-upd .hc-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .18s, transform .18s; }
.hx-upd-main { display: grid; gap: 4px; min-width: 0; }
.hx-upd .hx-title { font-size: 15px; text-shadow: none; }
.hx-ver {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap;
  min-width: 0;
}
.hx-ver b { overflow: hidden; text-overflow: ellipsis; }
.hx-ver s { text-decoration-color: rgba(255, 255, 255, .35); }
.hx-ver b { font-weight: 700; color: var(--hx-amber); }
.hx-upd-go {
  display: inline-grid; place-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--hx-ink);
  background: var(--hx-amber);
  border: 2px solid var(--hx-ink);
  box-shadow: 0 3px 0 var(--hx-ink);
  font: 600 13px/1 var(--hx-font);
  cursor: pointer;
  transition: transform .2s var(--hx-pop), background .15s, box-shadow .15s;
}
.hx-upd-go:hover { background: var(--hx-cream); transform: translateY(-2px); }
.hx-upd-go:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hx-ink); }
.hx-upd-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ─── What's New on Steam ───
   The Steam lane's own rail (games/steam-news.css) mounted bare under Home's
   painted head. It brings its own colours deliberately: these ARE Steam's
   notices, and they should read as a visitor on the page rather than as one
   more Hearth shelf. Only the rhythm is Home's. */
.home-snews .snews { margin: 0; }
.home-snews .snews-fold-in { padding-top: 2px; }

/* ─── discreet (eye) — un-blur what you point at ─── */
.hx-tile:hover .hc-art img,
.hx-tile:focus-visible .hc-art img,
.hx-feature:hover .hc-art img,
.hx-feature:focus-visible .hc-art img,
.hx-upd:hover .hc-art img,
.hx-upd:focus-visible .hc-art img { filter: none; }

/* ─────────────────────── first-load entrance ────────────────────────
   The first landing of a session assembles the den: the hearth catches
   light, the greeting rises out of it a word at a time, then the rooms
   and tiles are pressed on like stickers. app.js (homeLightHero /
   homeDealIn) decides WHEN; this is only the WHAT.

   Every entrance here is `animation-fill-mode: backwards` with NO final
   keyframe — the implicit last frame is the element's own resting style.
   That is what lets a tile animate in and still honour its hover
   transform a second later. Never swap these for `forwards`/`both`:
   the filled final frame beats the hover rule forever, and the tile
   quietly stops lifting. The classes are dropped after they play
   (homeAnim) for the same reason.
   ────────────────────────────────────────────────────────────────── */

@keyframes hx-deal-in  { from { opacity: 0; transform: translateY(18px) scale(.94) rotate(-1.4deg); } }
@keyframes hx-rise-in  { from { opacity: 0; transform: translateY(10px); } }
@keyframes hx-pop-in   { from { opacity: 0; transform: scale(.5); } }
@keyframes hx-stamp-in { 0% { opacity: 0; transform: scale(1.9) rotate(-10deg); } 55% { opacity: 1; } }
@keyframes hx-ico-in   { from { opacity: 0; transform: translateY(-14px) rotate(-24deg) scale(.55); } }
@keyframes hx-room-in  { 0% { opacity: 0; transform: translateY(34px) scale(.9) rotate(-1.6deg); } 55% { opacity: 1; } }

.hx-deal { animation: hx-deal-in .5s var(--hx-pop) var(--d, 0ms) backwards; }
.hx-h2.hx-deal,
.hx-sub.hx-deal,
.hx-more.hx-deal,
.hx-filters.hx-deal { animation-name: hx-rise-in; }
.hx-head-ico.hx-deal { animation-name: hx-ico-in; animation-duration: .58s; }
.hx-count.hx-deal { animation-name: hx-stamp-in; animation-duration: .46s; }
.hx-lane.hx-deal { animation-name: hx-pop-in; animation-duration: .42s; }
.hx-room.hx-deal { animation-name: hx-room-in; animation-duration: .62s; }
/* A figure is a cell of one ruled band: it rises in place (a tilting cell
   would break the rules), and its painted icon drops in after it. */
.hx-fig.hx-deal { animation-name: hx-rise-in; }
.hx-fig.hx-deal .hx-fig-ico { animation: hx-ico-in .58s var(--hx-pop) calc(var(--d, 0ms) + 160ms) backwards; }
/* the doorway lands, then its keeper hops — the same bob as hover, once */
.hx-room.hx-deal .hx-room-ico { animation: hx-bob 1s var(--hx-pop) calc(var(--d, 0ms) + 300ms) backwards; }

/* ─── the hearth catching light (hero) ─── */
@keyframes hx-fade-in { from { opacity: 0; } }
/* opacity only — a blur() in here reads better for about 40ms and then costs a
   full re-raster of three 460px blurred blobs every frame of the entrance,
   which is exactly the moment a slow device cannot afford it */
@keyframes hx-bloom   { from { opacity: 0; } }
@keyframes hx-ring-out { from { opacity: 0; transform: scale(.35); } }
@keyframes hx-flare {
  0%   { opacity: 0; transform: scale(.2); }
  38%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: .75; transform: scale(1); }
}
/* The greeting rises out of the firelight as ONE piece.
   ⚠ Do not "improve" this into a word-by-word stagger. The heading paints its
   text with `-webkit-background-clip: text` over `color: transparent`, and
   Chromium drops that clipped background for any DESCENDANT it has to put on
   its own render surface — a word span with a transform, an opacity, or a
   filter animates in completely INVISIBLE and only appears once the animation
   ends. All three were tried and shot (mockups/home-entrance.html). The same
   applies to a filter on .home-greet itself, which is why the firelight is a
   pseudo-element behind the text rather than a drop-shadow on it. Animating
   the heading's own transform/opacity is the one thing that keeps the
   gradient — that is what this does. */
@keyframes hx-greet-in { from { opacity: 0; transform: translateY(22px) rotate(-2deg) scale(.9); } }
@keyframes hx-greet-glow { 0% { opacity: 0; } 28% { opacity: 1; } }

.home-hero.hx-lit .hha-mesh,
.home-hero.hx-lit .hha-grain,
.home-hero.hx-lit .hha-vignette { animation: hx-fade-in .9s ease backwards; }

/* The blobs already carry an infinite drift, so their entrance is a SECOND
   animation that touches only opacity + filter — two animations fighting over
   `transform` would make the drift stutter on the first frame. */
.home-hero.hx-lit .hha-blob.b3 { animation: hha-drift-a 31s ease-in-out infinite alternate-reverse, hx-bloom 1s ease-out backwards; }
.home-hero.hx-lit .hha-blob.b1 { animation: hha-drift-a 22s ease-in-out infinite alternate, hx-bloom 1s ease-out 120ms backwards; }
.home-hero.hx-lit .hha-blob.b2 { animation: hha-drift-b 27s ease-in-out infinite alternate, hx-bloom 1s ease-out 240ms backwards; }

.home-hero.hx-lit .hha-rings i { animation: hx-ring-out .68s var(--hx-pop) backwards; }
.home-hero.hx-lit .hha-rings i:nth-child(1) { animation-delay: 220ms; }
.home-hero.hx-lit .hha-rings i:nth-child(2) { animation-delay: 300ms; }
.home-hero.hx-lit .hha-rings i:nth-child(3) { animation-delay: 380ms; }
/* the ember flares as it takes, then hands back to its idle breathing —
   no fill-mode, so hha-ember owns the property again the moment this ends */
.home-hero.hx-lit .hha-rings::before { animation: hha-ember 6s ease-in-out infinite alternate, hx-flare 1.4s ease-out; }

.home-hero.hx-lit .home-eyebrow { animation: hx-rise-in .5s var(--hx-pop) 160ms backwards; }
.home-hero.hx-lit .home-greet {
  position: relative;
  transform-origin: 6% 85%;
  animation: hx-greet-in .72s var(--hx-pop) 250ms backwards;
}
.home-hero.hx-lit .home-greet::after {
  content: '';
  position: absolute; z-index: -1;
  left: -5%; right: -5%; top: -45%; bottom: -45%;
  background: radial-gradient(55% 60% at 32% 50%, rgba(246, 181, 68, .42), rgba(255, 125, 92, .12) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: hx-greet-glow 1.7s ease-out 240ms backwards;
}
.home-hero.hx-lit .home-sub { animation: hx-rise-in .55s var(--hx-pop) 470ms backwards; }
.home-hero.hx-lit .home-hero-actions > * { animation: hx-deal-in .5s var(--hx-pop) backwards; }
.home-hero.hx-lit .home-hero-actions > :nth-child(1) { animation-delay: 570ms; }
.home-hero.hx-lit .home-hero-actions > :nth-child(2) { animation-delay: 660ms; }
.home-hero.hx-lit .home-hero-actions > :nth-child(3) { animation-delay: 750ms; }
.home-hero.hx-lit .home-hero-actions > :nth-child(n+4) { animation-delay: 840ms; }
.home-hero.hx-lit .home-eye { animation: hx-pop-in .5s var(--hx-pop) 900ms backwards; }

/* One burst of embers as it catches — built and removed by homeHeroSparks,
   so there is no idle spark loop running behind the page forever. */
.hha-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hha-sparks i {
  position: absolute;
  left: var(--x); bottom: -14px;
  width: 3px; height: calc(var(--s) * 10px);
  border-radius: 3px;
  background: linear-gradient(to top, rgba(255, 120, 30, 0), #ffb454 55%, #fff0c8);
  box-shadow: 0 0 9px 1px rgba(255, 150, 50, .6);
  animation: hha-spark var(--t) ease-out var(--dl) backwards;
}
@keyframes hha-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-6deg); }
  12%  { opacity: .95; }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--dx), -240px) scale(1) rotate(10deg); }
}

/* ─── phone ─── */
@media (max-width: 760px) {
  .hx-sec { margin-top: 26px; }
  .hx-h2 { font-size: 21px; }
  .hx-head-ico { width: 34px; height: 34px; }
  .hx-sub { display: none; }
  .hx-filters { order: 5; width: 100%; justify-content: flex-start; border-radius: 16px; }
  .hx-room-title { font-size: 24px; }
  .hx-room-ico { width: 60px; height: 60px; }
  .hx-theater,
  .hx-theater.n3,
  .hx-theater.n2 { grid-template-columns: 1fr 1fr; }
  .hx-theater > :first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .hx-theater.n2 > :first-child { grid-column: auto; aspect-ratio: 16 / 9; }
  .hx-feature { min-height: 0; }
  .hx-feature-body { left: 14px; right: 14px; bottom: 14px; }
  .hx-grid.is-few .hx-tile { height: 190px; }
  .hx-upd { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .hx-upd .hc-art { width: 88px; }
  /* touch: no hover, so the Play stays visible — small, out of the art's way */
  .hx-play { opacity: 1; width: 40px; height: 40px; top: auto; bottom: 46px; left: auto; right: 8px; transform: none; box-shadow: 0 3px 0 var(--hx-ink); }
  .hx-play svg { width: 17px; height: 17px; }
  .hx-tile:hover .hx-play, .hx-tile:focus-within .hx-play, .hx-play:focus-visible { transform: none; }
  .hx-play:hover { transform: none !important; }
  .hx-grid { gap: 10px; }
  .hx-grid.is-few .hx-tile { height: 170px; }
  .hx-title { font-size: 14px; }
  .hx-meta { font-size: 11px; }
  .hx-lane-badge { font-size: 0; gap: 0; padding: 0 3px; }
  .hx-chip { font-size: 10.5px; padding: 4px 7px; }
  .hx-room { min-height: 190px; }
  .hx-fold { min-height: 44px; }
  /* A phone tile is short: a smaller poster clears the badge above it, and the
     line under the name stays one line. */
  .hx-tile .hx-cover { height: 52cqh; left: 8px; bottom: 8px; border-radius: 7px; }
  .hx-tile.has-cover .hx-plate { left: calc(52cqh * 2 / 3 + 18px); }
  .hx-tile.has-cover .hx-meta { display: block; white-space: nowrap; }
  /* Folded on a phone: the chevron keeps its own row, the doors pair up under it. */
  .hx-doors { flex-basis: 100%; }
  .hx-fig { flex-basis: 150px; padding: 14px 14px 16px; gap: 7px; }
  .hx-fig-ico { width: 34px; height: 34px; }
  .hx-fig-val { font-size: 28px; }
  .hx-fig-label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  /* app.js already refuses to arm the entrance here; this is the belt to that
     braces, so a class left over from a mid-session preference change can
     never animate anything. `!important` is deliberate: the per-element
     entrance overrides (.hx-room.hx-deal, .hx-count.hx-deal …) are (0,2,0) and
     beat a plain .hx-deal reset even from inside this media query — that bug
     shipped a reduced-motion frame with the rooms still flying in. */
  .hx-deal, .hx-deal .hx-room-ico, .hx-deal .hx-fig-ico,
  .hx-roomwrap.is-moving.is-folded .hx-door,
  .home-hero.hx-lit .home-eyebrow,
  .home-hero.hx-lit .home-greet,
  .home-hero.hx-lit .home-greet::after,
  .home-hero.hx-lit .home-sub,
  .home-hero.hx-lit .home-hero-actions > *,
  .home-hero.hx-lit .home-eye,
  .home-hero.hx-lit .hha-mesh,
  .home-hero.hx-lit .hha-grain,
  .home-hero.hx-lit .hha-vignette,
  .home-hero.hx-lit .hha-blob,
  .home-hero.hx-lit .hha-rings::before,
  .home-hero.hx-lit .hha-rings i { animation: none !important; }
  .hha-sparks { display: none; }
  /* The hero's idle loops — drifting blobs, the breathing ember, the orb's
     float and pan — are decorative motion that never stops, which is the one
     thing this preference is most clearly about. They are stopped here rather
     than only during the entrance. */
  .home-hero .hha-blob,
  .home-hero .hha-rings::before,
  .home-hero .hha-orb,
  .home-hero .hha-orb img { animation: none !important; }

  .hx-room, .hx-room-scene, .hx-tile, .hx-feature, .hx-upd,
  .hx-tile .hc-art img, .hx-feature .hc-art img, .hx-head-ico { transition: none; }
  .hx-room:hover .hx-room-ico { animation: none; }
  .hx-fig:hover .hx-fig-ico { animation: none; }
  .hx-tile .hx-cover { transition: none; }
  .hx-tile:hover .hx-cover, .hx-tile:focus-visible .hx-cover { transform: rotate(-2deg); }
  .hx-roomfold, .hx-roomwrap .hx-rooms, .hx-fold-chev, .hx-door, .hx-fig { transition: none; }
  .hx-door:hover { transform: none; }
  .hx-room:hover .hx-room-scene { transform: scale(1.04); }
  .hx-tile:hover, .hx-feature:hover, .hx-upd:hover, .hx-room:hover { transform: none; }
}

/* ─── The hero's plaque — the Continue / Resume / Play button ────────────────
   Was the app-wide `.btn.primary`: a violet→cyan gradient pill with a glow and a
   light sweep, the one thing on Home that looked like any SaaS (Rober,
   2026-11-03: "the continue button is so AI"). It is a Hearthside sticker now:
   a walnut plaque bound in brass, an ink outline and a hard offset shadow like
   the room lanes, lit from the left by its own ember. The medallion is painted
   and says what the press resumes: icons/home/ember-<kind>.webp (game, web,
   steam, movie, show, video, play), cut from one forge master so every coin is
   the same brass, 144px for a 52px draw, cropped to the inner ring so the
   symbol still reads at that size. The
   kicker says what the press does, the title what it does it to, so a long
   title ellipsises on its own line instead of eating "Continue —".
   Markup: homeCta() in app.js. The buttons beside it (Surprise me, updates)
   are its peers: same height, same outline, no brass. */
.home-hero-actions { gap: 12px; }
.home-hero-actions .btn.big {
  min-height: 60px;
  padding: 0 20px;
  gap: 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 243, 222, .16);
  background: rgba(10, 11, 16, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--hx-cream);
  font: 600 15px/1 var(--hx-font);
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(6, 7, 11, .7);
  transition: transform .2s var(--hx-pop), background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.home-hero-actions .btn.big:hover {
  transform: translateY(-2px);
  background: var(--hx-cream);
  border-color: var(--hx-cream);
  color: var(--hx-ink);
  box-shadow: 0 5px 0 var(--hx-ink);
}
.home-hero-actions .btn.big:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hx-ink); }
.home-hero-actions .btn.big:focus-visible { outline: 2px solid var(--hx-cream); outline-offset: 3px; }

.home-hero-actions .btn.home-cta {
  --cta-brass: #c9973f;
  --cta-brass-hi: #f0c46a;
  min-width: 0;
  max-width: min(480px, 100%);
  padding: 0 24px 0 4px;
  gap: 13px;
  border: 2px solid var(--cta-brass);
  background:
    radial-gradient(90px 70px at 30px 50%, rgba(255, 138, 52, .34), transparent 70%),
    repeating-linear-gradient(176deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #3d2717 0%, #2a1a0f 58%, #20140c 100%);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  color: var(--hx-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 170, .32),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 0 0 2px var(--hx-ink),
    0 5px 0 2px var(--hx-ink);
  text-align: left;
}
.home-hero-actions .btn.home-cta:hover {
  transform: translateY(-2px);
  border-color: var(--cta-brass-hi);
  color: var(--hx-cream);
  background:
    radial-gradient(120px 80px at 30px 50%, rgba(255, 150, 60, .5), transparent 72%),
    repeating-linear-gradient(176deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #47301c 0%, #2f1d11 58%, #22150c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 170, .42),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 0 0 2px var(--hx-ink),
    0 7px 0 2px var(--hx-ink),
    0 10px 26px rgba(255, 120, 40, .18);
}
.home-hero-actions .btn.home-cta:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .3), 0 0 0 2px var(--hx-ink), 0 2px 0 2px var(--hx-ink);
}
.home-hero-actions .btn.home-cta:focus-visible { outline: 2px solid var(--cta-brass-hi); outline-offset: 5px; }

.home-cta .hcta-mark {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 0 0 2px var(--hx-ink), 0 0 10px rgba(255, 128, 40, .3);
  transition: transform .45s var(--hx-pop), box-shadow .2s;
}
.home-cta:hover .hcta-mark {
  transform: rotate(-12deg) scale(1.07);
  box-shadow: 0 0 0 2px var(--hx-ink), 0 0 16px rgba(255, 140, 50, .6);
}
/* "Add your first game" / "Set up your library" keep their glyph, set in a
   brass ring so they read as the same plaque. */
.home-cta .hcta-mark.is-glyph {
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--cta-brass);
  background: radial-gradient(circle at 50% 40%, #4a2c16, #1c110a 75%);
  color: var(--hx-amber);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .3);
}
.home-cta .hcta-mark.is-glyph svg { width: 20px; height: 20px; }
.home-cta .hcta-text { display: grid; gap: 5px; min-width: 0; }
.home-cta .hcta-kicker {
  font: 700 10.5px/1 var(--hx-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hx-amber);
}
.home-cta .hb-label {
  font: 600 17px/1.1 var(--hx-font);
  color: var(--hx-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── settling: the hero waits for its data (homeHeroHeld in app.js) ─── */
.home-skel.greet-skel { display: block; width: min(340px, 70%); height: .82em; border-radius: 10px; }
.home-skel.btn-skel.cta { width: 270px; }
.home-hero-actions .home-skel.btn-skel { height: 60px; border-radius: 14px; }
.home-hero.is-settling .hha-orb img { opacity: 0; }
/* SFW Home usually becomes the spotlight; hold its height so the box does
   not grow under the reader when it does. */
:root[data-content-profile="sfw"] .home-hero.is-settling:not(.has-spotlight) { min-height: 440px; }

@media (max-width: 640px) {
  .home-hero-actions .btn.home-cta { width: 100%; max-width: 100%; }
  .home-hero-actions .btn.big:not(.home-cta) { flex: 1 1 0; justify-content: center; min-height: 52px; }
  .home-hero-actions .home-skel.btn-skel.cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-actions .btn.big,
  .home-cta .hcta-mark { transition: background .15s, color .15s, border-color .15s; }
  .home-hero-actions .btn.big:hover,
  .home-hero-actions .btn.home-cta:hover,
  .home-cta:hover .hcta-mark { transform: none; }
}