/* ============================================================================
 * Haunted Hills — public board
 *
 * Everything is scoped under body.hh (set by hills.js) so nothing here can
 * leak into the other modes. Colours follow the mockup: a purple-black night,
 * bone-coloured type, and one colour per haunting.
 * ========================================================================== */

body.hh {
  --hh-bg:        #120E1A;
  --hh-hill-far:  #1A1526;
  --hh-hill-near: #15101F;
  --hh-fence:     #0D0A13;
  --hh-fog:       rgba(176,164,220,0.13);
  --hh-stone:     #231E2C;
  --hh-stone-lit: #2A2437;
  --hh-edge:      #3E3647;
  --hh-base:      #17121F;
  --hh-panel:     #1A1523;
  --hh-panel-edge:#312A3A;
  --hh-bone:      #F4E6C6;
  --hh-text:      #EDE4CE;
  --hh-soft:      #D6CCDF;
  --hh-muted:     #CFC4DA;
  --hh-dim:       #ABA0BB;
  --hh-faint:     #9C92AC;
  --hh-link:      #F0B25A;
  --hh-tie:       #3A3342;
  --hh-title-glow: rgba(255,160,63,0.35);
  background: var(--hh-bg);
  color: var(--hh-text);
  font-family: 'Alegreya Sans', 'Gill Sans', 'Nunito', sans-serif;
}
body.hh.hh-witching {
  --hh-bg:        #1C0C15;
  --hh-hill-far:  #261019;
  --hh-hill-near: #1D0B12;
  --hh-fence:     #1A0910;
  --hh-fog:       rgba(239,65,89,0.18);
  --hh-stone:     #2A1822;
  --hh-stone-lit: #2A1822;
  --hh-title-glow: rgba(239,65,89,0.55);
}
/* The Last Rites: the final hour. A sickly green moon and grave fog rolling
   across the hills. */
body.hh.hh-rites {
  --hh-bg:        #0B1612;
  --hh-hill-far:  #112219;
  --hh-hill-near: #0D1B14;
  --hh-fence:     #08120D;
  --hh-fog:       rgba(92,242,160,0.22);
  --hh-stone:     #18261F;
  --hh-stone-lit: #1C2C24;
  --hh-title-glow: rgba(92,242,160,0.55);
}
body.hh-rites .hh-page { isolation: isolate; }
body.hh-rites .hh-page::before,
body.hh-rites .hh-page::after {
  content: ""; position: absolute; left: -25%; width: 150%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 22% 38% at 12% 60%, rgba(92,242,160,0.16), transparent 70%),
    radial-gradient(ellipse 26% 42% at 38% 72%, rgba(120,255,190,0.12), transparent 70%),
    radial-gradient(ellipse 20% 34% at 63% 58%, rgba(92,242,160,0.14), transparent 70%),
    radial-gradient(ellipse 28% 44% at 88% 70%, rgba(120,255,190,0.12), transparent 70%);
  filter: blur(8px);
}
body.hh-rites .hh-page::before { bottom: -6%; height: 75%; animation: hh-fog-drift 46s ease-in-out infinite alternate; }
body.hh-rites .hh-page::after  { top: 18%; height: 60%; opacity: .7; animation: hh-fog-drift 63s ease-in-out infinite alternate-reverse; }
@keyframes hh-fog-drift {
  from { transform: translateX(-8%); }
  to   { transform: translateX(8%); }
}
@media (prefers-reduced-motion: reduce) {
  body.hh-rites .hh-page::before, body.hh-rites .hh-page::after { animation: none; }
}
body.hh::before { display: none; }
body.hh header { background: rgba(11,9,17,0.92); border-bottom-color: var(--hh-panel-edge); }
body.hh main { max-width: 1440px; padding: 0; }
body.hh #score-bar { display: none !important; }
body.hh a { color: var(--hh-link); }
body.hh a:hover { color: #FFD08A; }
body.hh header .btn, body.hh header a.btn { color: inherit; }

.hh-page {
  position: relative;
  overflow: hidden;
  padding: 0 56px 150px;
  min-height: calc(100vh - 64px);
}

/* ── Scenery ─────────────────────────────────────────────────────────────── */
.hh-hills { position: absolute; left: 0; top: -8px; width: 100%; height: 340px; pointer-events: none; }
.hh-hills .far  { fill: var(--hh-hill-far); }
.hh-hills .near { fill: var(--hh-hill-near); }
.hh-hills .near-line { stroke: var(--hh-hill-near); fill: none; stroke-linecap: round; }
.hh-corner-web { position: absolute; left: 0; top: 0; pointer-events: none; }
.hh-fence { position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; pointer-events: none; }
.hh-fence path, .hh-fence rect { fill: var(--hh-fence); }
.hh-pumpkins { position: absolute; bottom: 4px; pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255,170,70,0.5)); }
.hh-pumpkins.l { left: 40px; }
.hh-pumpkins.r { right: 40px; }
.hh-fogbank { position: absolute; left: -10%; bottom: -130px; width: 120%; height: 320px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--hh-fog) 0%, rgba(0,0,0,0) 65%); pointer-events: none; }

/* ── Head ────────────────────────────────────────────────────────────────── */
.hh-head {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: clamp(14px, 3vh, 44px) 0 0 48px;
}
.hh-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hh-title h1 {
  margin: 0; font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900;
  font-size: clamp(34px, min(5vw, 7vh), 72px); line-height: 1; color: var(--hh-bone);
  text-shadow: 0 0 30px var(--hh-title-glow);
}
.hh-title > span { font-size: 19px; color: var(--hh-muted); }
.hh-moon-wrap { position: relative; display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.hh-moon-text { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hh-moon-text > b { font-family: 'Cinzel', serif; font-weight: 700; font-size: 21px; color: var(--hh-bone); }
.hh-moon-text > span { font-size: 16px; color: var(--hh-muted); }
.hh-moon { --moon: clamp(64px, 11vh, 120px); position: relative; width: var(--moon); height: var(--moon); flex-shrink: 0; }
.hh-moon i {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: #F1E4C4;
  box-shadow: inset calc(var(--moon) * -0.22) 0 0 0 var(--hh-bg), 0 0 60px rgba(241,228,196,0.3);
}
body.hh-witching .hh-moon i {
  background: #D8364C; box-shadow: 0 0 70px rgba(239,65,89,0.7), 0 0 160px rgba(239,65,89,0.3);
}
body.hh-rites .hh-moon i {
  background: #BFF5CF; box-shadow: inset calc(var(--moon) * -0.12) 0 0 0 rgba(11,22,18,0.55),
    0 0 70px rgba(92,242,160,0.7), 0 0 170px rgba(92,242,160,0.3);
}
.hh-moon svg { position: absolute; left: -58%; top: -17%; width: 183%; height: 125%; pointer-events: none; }

/* ── Banner ──────────────────────────────────────────────────────────────── */
.hh-banner {
  --fx: #F0B25A; --fx-rgb: 240,178,90;
  position: relative; display: flex; align-items: center; gap: 22px;
  padding: clamp(10px, 1.6vh, 18px) 26px; border-radius: 16px;
  background: rgba(var(--fx-rgb),0.08); border: 1px solid rgba(var(--fx-rgb),0.45);
}
.hh-banner > svg { flex-shrink: 0; }
.hh-banner-text { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.hh-banner-text > b { font-family: 'Cinzel', serif; font-weight: 700; font-size: 22px; color: var(--hh-bone); }
.hh-banner-text > span { font-size: 17px; color: var(--hh-soft); line-height: 1.4; }
.hh-banner-text > small { font-size: 15px; color: var(--hh-dim); }
.hh-banner-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.hh-banner-clock > b {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 34px; color: var(--fx);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hh-banner-clock > span { font-size: 14px; color: var(--hh-muted); }
.hh-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (min-width: 1181px) {
  .hh-banner { flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 18px 20px; }
  .hh-banner > svg { margin-top: 2px; }
  .hh-banner-text { flex: 1 1 0; }
  .hh-banner-text > b { font-size: 20px; line-height: 1.2; }
  .hh-banner-text > span { font-size: 16px; }
  .hh-banner-text > small { font-size: 14px; }
  .hh-banner-clock { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; padding-left: 50px; }
  .hh-banner-clock > b { font-size: 30px; }
  .hh-banner-actions { width: 100%; padding-left: 50px; }
  .hh-banner-actions .hh-btn { width: 100%; }
}
.hh-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 12px; border: none; background: var(--hh-link); color: #1B1320 !important;
  font-family: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.hh-btn:hover { background: #FFC56F; }
.hh-btn:focus-visible { outline: 2px solid var(--hh-bone); outline-offset: 3px; }
.hh-signed {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: #93E46E;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.hh-main {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 368px;
  grid-template-areas: "board banner" "board aside"; grid-template-rows: auto 1fr;
  column-gap: 40px; row-gap: 24px; padding-top: clamp(14px, 2.6vh, 40px); align-items: start;
}
.hh-main > .hh-board { grid-area: board; }
.hh-main > .hh-banner { grid-area: banner; }
.hh-main > .hh-aside { grid-area: aside; }

/* ── Headstones ──────────────────────────────────────────────────────────────
   Sized to the window. hills.js measures the space left below the banner and
   sets --tile-h / --tile-w / --gap-y so all three rows fit on screen, and
   everything inside a headstone is sized in cqh (percent of the stone's own
   height), so a small stone is a scaled-down big one rather than a cramped
   one. The values below are the fallback before the script has measured. */
.hh-page { --tile-h: 304px; --tile-w: 290px; --gap-y: 50px; --gap-x: 28px; }
.hh-board {
  display: grid; grid-template-columns: repeat(3, var(--tile-w)); justify-content: center;
  align-content: start; gap: var(--gap-y) var(--gap-x); padding-top: calc(var(--tile-h) * 0.05);
}
.hh-slot { position: relative; }
.hh-slot::before {   /* the grave mound */
  content: ''; position: absolute; left: -5%; right: -5%; bottom: calc(var(--tile-h) * -0.05);
  height: calc(var(--tile-h) * 0.12); border-radius: 50%; background: #0C0912;
}
.hh-tile {
  --fx: transparent; --fx-rgb: 0,0,0;
  position: relative; z-index: 1; width: var(--tile-w); height: var(--tile-h); box-sizing: border-box;
  container-type: size;
  /* The stone can't size its own padding in cqh (a container can't query
     itself), so these come from the measured height directly. */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--tile-h) * 0.02);
  padding: calc(var(--tile-h) * 0.06) calc(var(--tile-h) * 0.06) calc(var(--tile-h) * 0.27);
  border: 1px solid var(--hh-edge);
  border-radius: calc(var(--tile-w) * 0.42) calc(var(--tile-w) * 0.42) 12px 12px;
  background: var(--hh-stone); color: var(--hh-text); font-family: inherit; text-align: center;
  cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform .2s ease;
}
.hh-tile:hover { transform: translateY(-4px) rotate(0deg); }
.hh-tile:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 5px; }
/* Focus moved by script after a mouse click (see hhFocus in hills.js): no ring. */
.hh-quiet:focus-visible, .hh-quiet:focus { outline: none !important; }
.hh-tile.lit { background: var(--hh-stone-lit); }
.hh-tile.veiled { cursor: default; }
.hh-tile.veiled:hover { transform: rotate(var(--tilt, 0deg)); }

.hh-aura {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--fx), 0 0 40px rgba(var(--fx-rgb),0.5);
  animation: hh-pulse 2.8s ease-in-out infinite;
}
.hh-mist {
  position: absolute; left: -8%; right: -8%; bottom: -6cqh; height: 36cqh; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(205,196,235,0.35) 0%, rgba(205,196,235,0) 70%);
  pointer-events: none; animation: hh-mist 3.4s ease-in-out infinite;
}
.hh-seep {
  position: absolute; left: 6%; right: 6%; bottom: 25cqh; height: 36cqh; border-radius: 50% 50% 10px 10px;
  background: radial-gradient(ellipse at bottom, rgba(147,228,110,0.5) 0%, rgba(147,228,110,0) 72%);
  pointer-events: none; transform-origin: bottom center; animation: hh-seep 3.2s ease-in-out infinite;
}
.hh-spark {
  position: absolute; width: 2cqh; height: 2cqh; min-width: 4px; min-height: 4px; border-radius: 2px;
  pointer-events: none; transform: rotate(45deg); animation: hh-rise 2.4s ease-out infinite;
}
.hh-wisp {
  position: absolute; width: 2.6cqh; height: 2.6cqh; min-width: 5px; min-height: 5px; border-radius: 50%;
  pointer-events: none; animation: hh-float 3.6s ease-in infinite;
}
.hh-lantern {
  position: absolute; right: 10%; top: 13cqh; width: 7cqh; height: 11cqh; pointer-events: none;
  transform-origin: top center; filter: drop-shadow(0 0 6px #CBD5E2); animation: hh-swing 2.6s ease-in-out infinite;
}
.hh-chip {
  position: absolute; top: -4.6cqh; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  padding: .3em 1em; border-radius: 999px; font-size: clamp(11px, 4.6cqh, 14px); font-weight: 700;
  background: #1B1624; color: var(--fx); border: 1px solid var(--fx);
}
.hh-chip.soon { color: #CDC4EB; border: 1px dashed #CDC4EB; }

/* Boss art. Every icon gets an explicit square size (--ic) in container units,
   i.e. a share of the stone's own inner height (cqh) and width (cqw), so the
   icons grow and shrink with the stone as the window resizes and the min()
   keeps them inside narrow phone stones and short, wide desktop ones.
   No percentage heights inside grid rows: Safari resolves those from the
   image's width, which blew the spanning third icon up to double size.
   One icon fills the space; two sit side by side; three make an arc with the
   middle one raised to follow the headstone's curve; four make a 2×2 grid. */
.hh-art {
  --ic: min(60cqh, 72cqw); --g: 2cqh;
  height: 60cqh; max-width: 100%; flex-shrink: 0;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; gap: var(--g);
}
.hh-art.n2 { --ic: min(44cqh, 46cqw); }
.hh-art.n3 { --ic: min(40cqh, 31cqw); align-items: flex-end; padding-bottom: 2cqh; box-sizing: border-box; }
.hh-art.n3 img:nth-child(2) { margin-bottom: 14cqh; }
/* Four is a fixed 2×2 grid rather than a wrapping row: a wrap sized to exactly two
   icons plus the gap could round a hair short in Firefox at some window sizes,
   and then every icon wrapped onto its own line and the stack spilled off the stone. */
.hh-art.n4 { --ic: min(29cqh, 40cqw); display: grid; grid-template-columns: repeat(2, var(--ic));
  grid-auto-rows: var(--ic); place-content: center; }
.hh-art img {
  flex: 0 0 auto; width: var(--ic); height: var(--ic); object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.hh-art.q {
  width: 30cqh; height: 30cqh; border-radius: 14%; border: 1px dashed #5A5066; background: #1A1522;
  font-family: 'Cinzel', serif; font-size: 13cqh; color: #5A5066;
}
.hh-name {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(12px, 7.8cqh, 24px); line-height: 1.12;
  min-height: 2.24em; display: flex; align-items: center; justify-content: center;
  color: var(--hh-bone); text-shadow: 0 1px 0 #0B0911;
}
.hh-tile.veiled .hh-name { color: #5A5066; font-size: clamp(10px, 5.4cqh, 17px); }
.hh-scar { font-size: clamp(10px, 4.3cqh, 13px); color: var(--hh-dim); min-height: 1.25em; line-height: 1.25; }
.hh-base {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 3.6cqh 6cqh;
  border-top: 1px solid var(--hh-edge); border-radius: 0 0 11px 11px; background: var(--hh-base);
  box-shadow: inset 0 -3px 0 0 var(--hold, var(--hh-tie)); display: flex; flex-direction: column; gap: 2.2cqh;
}
.hh-base-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hh-pts { font-family: 'Cinzel', serif; font-size: clamp(12px, 7cqh, 21px); font-variant-numeric: tabular-nums; color: var(--hh-faint); }
.hh-pts.lead { font-weight: 700; }
.hh-hold { font-size: clamp(10px, 4.3cqh, 13px); color: var(--hh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-short { display: none; }
.hh-split { display: flex; height: clamp(4px, 2.6cqh, 8px); border-radius: 4px; overflow: hidden; background: #0F0C15; }
.hh-split i { display: block; }
.hh-split i.gap { width: 2px; background: #0F0C15; }
.hh-split i.b { flex-grow: 1; }

/* Small stones drop the secondary lines rather than crush the name. */
@container (max-height: 185px) {
  .hh-scar, .hh-hold { display: none; }
  /* ...and the art takes the room the hidden line leaves. */
  .hh-art { height: 68cqh; --ic: min(68cqh, 72cqw); }
  .hh-art.n2 { --ic: min(48cqh, 46cqw); }
  .hh-art.n3 { --ic: min(44cqh, 31cqw); }
  .hh-art.n3 img:nth-child(2) { margin-bottom: 16cqh; }
  .hh-art.n4 { --ic: min(32cqh, 40cqw); }
}

/* Wear: cracks, chipped edges and webs, fixed per position so a tile keeps
   its face for the whole event. Positions come from hills.js in percent. */
.hh-wear { position: absolute; pointer-events: none; }
.hh-crack { width: 20cqh; height: 33cqh; }
.hh-crack path:first-child { stroke: #15111C; stroke-width: 2.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hh-crack path:last-child { stroke: #1A1522; stroke-width: 1.3; fill: none; stroke-linecap: round; }
.hh-nick { width: 5.3cqh; height: 8cqh; }
.hh-nick path:first-child { fill: var(--hh-bg); }
.hh-nick path:last-child { stroke: var(--hh-edge); stroke-width: 1; fill: none; }
.hh-web { bottom: 24cqh; width: 28cqh; height: 28cqh; opacity: .85; }
.hh-web path { stroke: #80769A; stroke-width: .9; fill: none; stroke-linejoin: round; }
.hh-ghost {
  position: absolute; left: 12%; top: calc(var(--tile-h) * -0.15); z-index: 2; pointer-events: none;
  width: calc(var(--tile-h) * 0.23); height: calc(var(--tile-h) * 0.28);
  filter: drop-shadow(0 0 14px rgba(236,230,244,0.35)); animation: hh-bob 4.5s ease-in-out infinite;
}
.hh-ghost.right { left: auto; right: 12%; }
/* Wandering between headstones: fade up and away, then drift in over the next one. */
.hh-ghost.out { animation: hh-ghost-out .65s ease-in forwards; }
.hh-ghost.in { animation: hh-ghost-in .9s ease-out, hh-bob 4.5s ease-in-out .9s infinite; }
@keyframes hh-ghost-out { to { opacity: 0; transform: translateY(-18px) scale(.9); } }
@keyframes hh-ghost-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* ── Side panels ─────────────────────────────────────────────────────────── */
.hh-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hh-panel {
  position: relative; padding: 24px; border-radius: 18px; background: var(--hh-panel);
  border: 1px solid var(--hh-panel-edge); display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.hh-panel h2 { margin: 0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; color: var(--hh-bone); }
.hh-panel p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--hh-soft); }
/* ── Rules button and dialog ── */
.hh-title-last { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hh-rules-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px;
  border-radius: 999px; border: 1px solid #4A4058; background: rgba(26,21,35,.75); color: var(--hh-muted);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hh-rules-btn:hover { color: var(--hh-bone); border-color: var(--hh-link); }
.hh-rules-btn:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 2px; }
#hh-rules { max-width: 520px; }
#hh-rules h2 { font-size: 23px; }
.hh-rules { display: flex; flex-direction: column; gap: 12px; }
.hh-rules p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--hh-soft); }
.hh-rules dl { margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.hh-rules dl > div {
  padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.025);
  border-left: 3px solid var(--fx);
}
.hh-rules dt { font-weight: 700; font-size: 16px; color: var(--fx); }
.hh-rules dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--hh-muted); }

.hh-held { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hh-held div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-held div:last-child { align-items: flex-end; text-align: right; }
.hh-held b {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900; font-size: 64px; line-height: 1;
  color: var(--c); text-shadow: 0 0 24px var(--c);
}
.hh-held div > span { font-size: 18px; font-weight: 700; color: var(--c); overflow-wrap: anywhere; }
.hh-pips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.hh-pips i { height: 22px; border-radius: 10px 10px 2px 2px; background: var(--c, var(--hh-tie)); }
.hh-pips i.held { box-shadow: 0 0 8px var(--c); }
.hh-note { font-size: 15px; color: #B7ACC5; }

.hh-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.hh-log li { display: flex; gap: 12px; align-items: flex-start; }
.hh-log li > i {
  margin-top: 6px; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--fx); box-shadow: 0 0 8px var(--fx);
}
.hh-log li div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hh-log li div > b { font-size: 16px; color: var(--fx); }
.hh-log li div > span { font-size: 15px; color: #E6DDEC; }
.hh-log li div > small { font-size: 14px; color: var(--hh-dim); }
.hh-panel.veil { overflow: visible; }
.hh-spider { position: absolute; right: 40px; bottom: -70px; pointer-events: none; animation: hh-dangle 5s ease-in-out infinite; }

/* ── Tile detail: a sheet on phones, a card on desktop ───────────────────── */
.hh-detail-ov {
  position: fixed; inset: 0; z-index: 95; background: rgba(8,6,14,0.6);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.hh-detail-ov.open { display: flex; }
.hh-detail {
  --fx: var(--hh-edge); --fx-rgb: 62,54,71;
  position: relative; width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; box-sizing: border-box;
  padding: 22px 22px 24px; border-radius: 22px; background: #1B1624;
  border: 1px solid rgba(var(--fx-rgb),0.55); box-shadow: 0 20px 60px rgba(var(--fx-rgb),0.14);
  display: flex; flex-direction: column; gap: 14px; color: var(--hh-text);
  font-family: 'Alegreya Sans', 'Gill Sans', sans-serif;
}
.hh-detail-grip { display: none; align-self: center; width: 44px; height: 5px; border-radius: 3px; background: #4A4455; }
.hh-detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hh-detail-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
/* The detail sheet isn't a size container, so its art is sized in px. */
.hh-detail-id .hh-art { --ic: 64px; --g: 3px; width: 64px; height: 64px; padding: 0; flex-wrap: wrap; align-items: center; }
.hh-detail-id .hh-art.n2, .hh-detail-id .hh-art.n3, .hh-detail-id .hh-art.n4 { --ic: 30px; }
.hh-detail-id .hh-art.n3 img:nth-child(2) { margin-bottom: 0; }
.hh-detail h2 { margin: 0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--hh-bone); }
.hh-detail-status { font-size: 15px; font-weight: 700; color: var(--fx); }
.hh-x {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--hh-edge);
  background: #231E2C; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.hh-x:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 2px; }
.hh-detail p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hh-soft); }
.hh-table { display: flex; flex-direction: column; }
.hh-table > div {
  display: grid; grid-template-columns: 1fr 80px 80px; gap: 8px; padding: 12px 0; font-size: 17px;
  border-bottom: 1px solid #2F2838; align-items: center;
}
.hh-table > div.h { padding: 0 0 6px; font-size: 13px; color: var(--hh-dim); }
.hh-table > div > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.hh-table .team { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--c); min-width: 0; }
.hh-table .team i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex-shrink: 0; }
.hh-table .hour { color: var(--fx); font-weight: 700; }
.hh-drops h3 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--hh-dim); }
.hh-drops ul { margin: 0; padding: 0; list-style: none; }
.hh-drops li {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--hh-soft);
}
.hh-drops li b { color: var(--hh-link); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* One collapsible section per boss on multi-boss tiles. */
.hh-boss { border-bottom: 1px solid rgba(255,255,255,0.06); }
.hh-boss summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 8px 2px;
  list-style: none; cursor: pointer; font-size: 15px; color: var(--hh-bone);
}
.hh-boss summary::-webkit-details-marker { display: none; }   /* Safari */
.hh-boss summary::after {
  content: ''; flex-shrink: 0; width: 7px; height: 7px; margin: 0 4px 3px 2px;
  border-right: 2px solid var(--hh-dim); border-bottom: 2px solid var(--hh-dim);
  transform: rotate(45deg); transition: transform .15s ease;
}
.hh-boss[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.hh-boss summary:hover .hh-boss-name { color: #fff; }
.hh-boss summary:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 2px; border-radius: 6px; }
.hh-boss-name { flex: 1; min-width: 0; font-weight: 700; }
.hh-boss-meta { font-size: 13px; color: var(--hh-dim); white-space: nowrap; }
/* ── Side panel switch: The hills / Recent drops ── */
.hh-aside-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 14px; margin-bottom: -8px;
  background: var(--hh-panel); border: 1px solid var(--hh-panel-edge);
}
.hh-aside-tabs button {
  all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 9px 10px; border-radius: 10px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; color: var(--hh-dim);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, color .15s ease;
}
.hh-aside-tabs button:hover { color: var(--hh-bone); }
.hh-aside-tabs button.on { background: rgba(255,255,255,0.07); color: var(--hh-bone); }
.hh-aside-tabs button:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 1px; }
@media (max-width: 1180px) { .hh-aside > .hh-aside-tabs { grid-column: 1 / -1; } }

/* ── Recent drops panel ── */
.hh-panel.recent { gap: 12px; }
.hh-recent { list-style: none; margin: 0 -8px; padding: 0 8px 0 0; max-height: min(640px, calc(100vh - 260px)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #3E3647 transparent; }
.hh-recent li { margin: 0; }
.hh-proof {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px; border-radius: 10px; border-left: 3px solid var(--c);
  background: rgba(255,255,255,0.03); transition: background .15s ease;
}
.hh-proof:hover { background: rgba(255,255,255,0.07); }
.hh-proof:focus-visible { outline: 2px solid var(--hh-link); outline-offset: 2px; }
.hh-proof.new { animation: hh-proof-new 2.4s ease-out; }
@keyframes hh-proof-new { 0% { background: color-mix(in srgb, var(--c) 35%, transparent); } 100% { background: rgba(255,255,255,0.03); } }
.hh-proof img, .hh-proof .dash-proof-gone {
  width: 56px; height: 42px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: #0F0C15;
}
.hh-proof .dash-proof-gone { display: flex; align-items: center; justify-content: center; font-size: 0; padding: 0; }
.hh-proof .dash-proof-gone span:first-child { font-size: 16px; opacity: .5; }
.hh-proof-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hh-proof-t b { font-size: 14px; color: var(--hh-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-proof-t span { font-size: 12px; color: var(--hh-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-proof-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.hh-proof-r b { font-size: 13px; color: var(--c); font-variant-numeric: tabular-nums; }
.hh-proof-r small { font-size: 11px; color: var(--hh-dim); white-space: nowrap; }
@media (max-width: 1180px) { .hh-aside > .hh-panel.recent { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .hh-proof.new { animation: none; } }

/* ×N approved per team, in that team's colour. */
.hh-cnt {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; line-height: 17px; font-variant-numeric: tabular-nums;
  color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.hh-drops-key { float: right; font-size: 11px; color: var(--hh-dim); }
.hh-drops-key .hh-cnt { margin: 0 4px 0 0; }
.hh-boss ul { padding: 0 0 8px 12px; border-left: 2px solid var(--hh-edge); margin-left: 2px; }
.hh-boss li:last-child { border-bottom: 0; }
.hh-detail .hh-btn { width: 100%; margin-top: 4px; }
.hh-detail-foot { font-size: 14px; color: var(--hh-dim); text-align: center; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes hh-pulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes hh-flicker { 0%,100% { opacity: 1 } 38% { opacity: .7 } 44% { opacity: .95 } 70% { opacity: .8 } }
@keyframes hh-float { 0% { transform: translateY(6px); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(-30px); opacity: 0 } }
@keyframes hh-drift { 0% { transform: translateX(-5%) } 100% { transform: translateX(5%) } }
@keyframes hh-dangle { 0%,100% { transform: translateY(0) } 50% { transform: translateY(10px) } }
@keyframes hh-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes hh-rise { 0% { transform: translateY(0) rotate(45deg) scale(1); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(-70px) rotate(45deg) scale(.4); opacity: 0 } }
@keyframes hh-seep { 0%,100% { opacity: .4; transform: scaleY(.85) } 50% { opacity: .9; transform: scaleY(1.1) } }
@keyframes hh-swing { 0%,100% { transform: rotate(-12deg) } 50% { transform: rotate(12deg) } }
@keyframes hh-mist { 0%,100% { opacity: .3 } 50% { opacity: .8 } }
.hh-flame { animation: hh-flicker 1.9s infinite; }
.hh-fogbank { animation: hh-drift 20s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .hh-aura, .hh-mist, .hh-seep, .hh-spark, .hh-wisp, .hh-lantern, .hh-ghost, .hh-spider,
  .hh-flame, .hh-fogbank, .hh-ghost.in, .hh-ghost.out { animation: none; }
  .hh-spark, .hh-wisp { opacity: .8; }
  .hh-tile { transition: none; }
}

/* ── Smaller screens ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hh-page { padding: 0 32px 150px; }
  .hh-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "board" "aside"; grid-template-rows: auto; }
  .hh-aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .hh-spider { display: none; }
}

@media (max-width: 760px) {
  .hh-page { padding: 0 14px 120px; }
  .hh-head { padding: 16px 0 0 16px; align-items: center; }
  .hh-title > span { font-size: 14px; }
  .hh-rules-btn { min-height: 30px; font-size: 13px; padding: 0 11px; }
  .hh-moon-text { display: none; }
  .hh-moon { --moon: 48px; }
  .hh-moon i { box-shadow: inset -11px 0 0 0 var(--hh-bg), 0 0 26px rgba(241,228,196,0.3); }
  .hh-corner-web { width: 70px; height: 70px; }
  .hh-banner { padding: 12px 14px; gap: 12px; flex-wrap: wrap; border-radius: 14px; }
  .hh-banner > svg { display: none; }
  .hh-banner-text > b { font-size: 15px; }
  .hh-banner-text > span { font-size: 14px; }
  .hh-banner-text > small { font-size: 13px; }
  .hh-banner-clock > b { font-size: 22px; }
  .hh-banner-clock > span { display: none; }
  .hh-banner-actions { width: 100%; }
  .hh-banner-actions .hh-btn { width: 100%; }
  .hh-main { padding-top: 14px; row-gap: 20px; }
  .hh-page { --gap-x: 10px; }
  .hh-tile:hover { transform: rotate(var(--tilt, 0deg)); }
  .hh-tile { border-radius: calc(var(--tile-w) * 0.44) calc(var(--tile-w) * 0.44) 8px 8px; padding-bottom: calc(var(--tile-h) * 0.24); }
  .hh-name { font-size: clamp(10px, 8cqh, 13px); }
  .hh-scar, .hh-hold, .hh-web, .hh-ghost, .hh-lantern, .hh-crack, .hh-nick { display: none; }
  .hh-base { padding: 3.5cqh 5cqh 4cqh; gap: 2.5cqh; border-radius: 0 0 7px 7px;
    box-shadow: inset 0 -2px 0 0 var(--hold, var(--hh-tie)); }
  .hh-pts { font-family: inherit; font-size: clamp(11px, 8cqh, 13px); font-weight: 700; }
  .hh-long { display: none; }
  .hh-short { display: inline; }
  .hh-split i.gap { width: 1px; }
  .hh-chip { padding: 2px 8px; font-size: 11px; top: -11px; }
  .hh-chip-t { display: none; }   /* the banner carries the countdown on phones */
  .hh-aura { box-shadow: 0 0 0 2px var(--fx), 0 0 24px rgba(var(--fx-rgb),0.55); }
  .hh-aside { grid-template-columns: minmax(0, 1fr); }
  .hh-held b { font-size: 48px; }
  .hh-pumpkins { transform: scale(.6); transform-origin: bottom; }
  .hh-pumpkins.l { left: -10px; } .hh-pumpkins.r { right: -10px; }

  .hh-detail-ov { padding: 0; align-items: flex-end; }
  .hh-detail { max-width: none; max-height: 80vh; border-radius: 22px 22px 0 0; border-width: 1px 0 0;
    padding: 12px 20px calc(26px + env(safe-area-inset-bottom)); }
  .hh-detail-grip { display: block; }
}