/* P1 extras (owners: secrets, nights, showdown; WP3; CONTRACTS.md §5): 1. the Witching banner's placement,
   2. Haunted Hunt in the bag, 3. 13 Nights tombstones (gap S11), 4. Haunted Hunt on the stage (.sx-*, perches).
   Decorative @keyframes only under no-preference. */

/* ---------- 1. Showdown (F34) + Witching Hour (F36) ---------- */
/* #showdownSlot is placed by app.css inside #gateStack; its card is StageBanner --showdown (showdown.js). */
/* The Witching banner takes the plate's slot while it shows (setPlateAside("witching")). */
#witchingBanner{position:fixed;z-index:var(--z-content);left:0;right:0;top:var(--gate-top)}
@media (orientation:landscape){#witchingBanner{width:min(520px,100% - 2 * var(--sp-4))}} /* 520px: the landscape cap (as built) */
/* Tablets and laptops: the centre column never reaches the left action column (app.css G7). */
@media (orientation:landscape) and (min-height:501px){#witchingBanner{width:min(520px,100vw - 2 * (var(--sp-6) + 260px + var(--sp-4)))}}
@media (orientation:landscape) and (max-height:500px){#witchingBanner{right:var(--rail-w)}} /* centred on the stage beside the dock rail */

/* ---------- 2. Bag: Haunted Hunt (F30) ---------- */
.bag-count{margin-bottom:var(--sp-2)}
.bag-meter{margin-bottom:var(--sp-3)}

/* ---------- 3. Bag: 13 Nights (F31; page pattern, gap S11) ---------- */
.night-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.bf-sheet__body .night-grid{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2)}
@media (min-width:480px) and (orientation:portrait){.bf-sheet__body .night-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
.night-grid li{min-width:0}
/* The stone: a 4:5 button at least hit tall. Its radii are the tombstone's shape geometry. */
.night-stone{--stone-r:45% 45% 10px 10px/32% 32% 10px 10px;position:relative;display:block;width:100%;aspect-ratio:4/5;min-height:var(--hit);margin:0;padding:0;border:0;border-radius:var(--stone-r);background:none;color:var(--text);perspective:420px}
.night-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--dur-reveal) var(--ease-out)}
/* The drawn fallback stone (when TOMB_SPRITE is empty). Its stone greys are art colors (no tokens). */
.night-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--stone-r);border:var(--hairline) solid var(--plate-line);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(#6d6684,#423c56 58%,#2b2739);box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.12)} /* art: stone face and its bevel */
.night-back{transform:rotateY(180deg);border-color:var(--live-line);background:radial-gradient(ellipse 70% 45% at 50% 92%,color-mix(in srgb,var(--slime-400) 70%,transparent),transparent 70%),linear-gradient(#55625a,#2f3833 58%,#1d2420)} /* art: the opened stone's greys; the crack light is slime-400 (its alpha is gap S5) */
.night-back::after{content:"";position:absolute;left:24%;top:9%;width:3px;height:30%;background:var(--night-950);transform:rotate(14deg);box-shadow:4px 9px 0 -1px var(--night-950)} /* art: the crack */
.night-stone.is-locked .night-face{background:linear-gradient(#3b3550,#2a2540 58%,#1f1b2e)} /* art: the sleeping stone */
.night-stone.is-open .night-inner{transform:rotateY(180deg)}
/* I11 sprite (nights.js TOMB_SPRITE): cell 1 = closed, cell 2 = cracked open */
.night-grid.has-sprite .night-face{border-color:transparent;box-shadow:none;background:var(--tomb-sprite) 0 0/200% 100% no-repeat}
.night-grid.has-sprite .night-back{background-position:100% 0}
.night-grid.has-sprite .night-back::after{display:none}
/* States over the stone (after the sprite rule): today, new, locked (dimmed, owner default). */
.night-grid .night-stone.is-today .night-front{border:var(--stroke-bold) solid var(--live);box-shadow:var(--glow-spectral)}
.night-grid .night-stone.is-new .night-front{border:var(--hairline) solid var(--candle-300)}
.night-grid .night-stone.is-locked .night-front{border:var(--hairline) dashed var(--plate-line);opacity:var(--opacity-disabled)}
/* Selected: a lilac ring + moon glow on box-shadow, so the outline stays free for the focus ring. */
.night-stone.is-selected{box-shadow:0 0 0 var(--ring-offset) var(--surface),0 0 0 calc(var(--ring-offset) + var(--stroke-bold)) var(--lilac-300),var(--glow-moon)}
/* With keyboard focus the focus ring takes ring-offset…+ring, so the lilac edge moves out past it. */
.night-stone.is-selected:focus-visible{box-shadow:0 0 0 calc(var(--ring-offset) + var(--ring)) var(--surface),0 0 0 calc(var(--ring-offset) + var(--ring) + var(--stroke-bold)) var(--lilac-300),var(--glow-moon)}
/* Tonight's stone breathes (an opacity pulse on a pre-blurred glow; Calm stops it on the first frame). */
.night-stone.is-today::after{content:"";position:absolute;inset:calc(-1 * var(--sp-2));border-radius:inherit;background:radial-gradient(closest-side,var(--live-line),transparent);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes night-breathe{50%{opacity:1}}
  .night-stone.is-today::after{animation:night-breathe var(--dur-pulse) var(--ease-loop) infinite}
}
/* Calm: no flip; the faces crossfade over dur-ui. */
html[data-calm] .night-stone .night-inner{transform:none}
html[data-calm] .night-back{transform:none;opacity:0;transition-property:opacity;transition-timing-function:var(--ease-out);transition-duration:var(--dur-ui)!important}
html[data-calm] .night-stone.is-open .night-back{opacity:1}

/* The night's treat (Surface --row): a fixed minimum so the card does not jump as treats change. */
.night-treat{min-height:64px;margin:0 0 var(--sp-3)} /* 64px: one kicker + one line */
.night-treat p{margin:0}
.night-treat .bf-sheet__kicker{margin-bottom:var(--sp-1)}
.night-treat-text{color:var(--text)}
.night-treat-text.is-locked{color:var(--text-2)}
.night-treat .bf-sheet__note{margin-top:var(--sp-2)}
.night-tint{margin-bottom:var(--sp-2)}

/* Tonight's Haunt: a sheet section with a top rule (gap S11). */
.bag-haunt{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--hairline) solid var(--line)}
/* Under the Ghost color row its divider already rules the section off: one line, not two. */
.night-tint-wrap:has(.night-tint) + .bag-haunt{border-top:0;padding-top:0}
.bag-haunt-line{margin:0;font-weight:var(--fw-semibold)}
.bag-haunt-best{color:var(--text-2);font-weight:var(--fw-medium)}

/* ---------- 4. Haunted Hunt on the stage (F30) ---------- */
/* Reaction nodes live in #fx (pointer-events:none); js/secrets.js animates them with WAAPI. */
.sx{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.sx-skull{font-size:var(--fs-32);line-height:var(--lh-solid);transform:translate(-50%,-30%);filter:drop-shadow(var(--glow-spectral))}
.sx-ripple{width:72px;height:22px;border-radius:50%;border:var(--stroke-bold) solid var(--slime-400);transform:translate(-50%,-50%)} /* 72×22: the ripple's own geometry; the keyframes fade it */
/* FX lights mix their alpha into the gradient (no FX alpha tokens yet, gap S5). color-mix needs Safari 16.2+. */
.sx-flash{border-radius:40%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pumpkin-500) 80%,transparent),color-mix(in srgb,var(--lilac-300) 35%,transparent) 60%,transparent);mix-blend-mode:screen}
.sx-hand{overflow:hidden}
.sx-hand > span{display:block;width:300%;height:100%;background-size:100% 100%;background-repeat:no-repeat}
.sx-cackle img{display:block;width:100%;height:100%}
/* Wall lanterns: lit for 10 s per tap (12 s when both are lit) */
.hs:is([data-secret="wallL"],[data-secret="wallR"])::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--candle-300) 77%,transparent),color-mix(in srgb,var(--pumpkin-500) 27%,transparent) 55%,transparent);mix-blend-mode:screen}
.hs.is-lit::before{opacity:1} /* the lit alpha lives in the gradient */
/* The moon stirs as the taps add up (scene.css owns the Blood Moon look itself) */
/* --stir is a continuous 0–1 tap level (secrets.js), so this is a progress value, not a state opacity. */
html:not(.blood-moon):not([data-milestones~="bloodmoon"]):not([data-phase="witching"]) .hs[data-secret="moon"][data-stir]::before{opacity:calc(var(--stir,0) * .8)}
/* Calm: "Show me" still marks the hotspot, as a steady glow (the glint is scene.css's; no matching opacity step, gap S5) */
html[data-calm] .hs.is-hint::after{opacity:.7}
/* Batface perches (secrets.js keeps one only when it is on screen and tappable). */
@media (orientation:portrait){
  html.art-cover .hs[data-secret="batface"][data-perch="left"]{--l:32.5%;--t:38%}
  html.art-cover .hs[data-secret="batface"][data-perch="right"]{--l:63.5%;--t:38%}
  /* art-portrait (percent of #artFrame, F08): the painted pillar caps, and the arch's crown for "top". */
  html.art-portrait .hs[data-secret="batface"]{--l:46%;--t:21.5%} /* 21.5%: clear of the h1 at 360–430 wide */
  html.art-portrait .hs[data-secret="batface"][data-perch="left"]{--l:8%;--t:37%}
  html.art-portrait .hs[data-secret="batface"][data-perch="right"]{--l:80%;--t:37%}
  /* Compact: the plate covers the pillar caps, so the pair perches on the lanterns' tops. */
  html.art-portrait.compact:not(.art-variant-real) .hs[data-secret="batface"]:is([data-perch="left"],[data-perch="right"]){--t:29%}
  html.art-portrait.art-variant-real[data-art="party"] .hs[data-secret="batface"]{--l:46%;--t:17%}
  html.art-portrait.art-variant-real[data-art="party"] .hs[data-secret="batface"][data-perch="left"]{--l:4%;--t:29%}
  html.art-portrait.art-variant-real[data-art="party"] .hs[data-secret="batface"][data-perch="right"]{--l:86%;--t:29%}
  /* Compact party: the plate rises to 29%, so the pair sits up on the pillars' pumpkins. */
  html.art-portrait.compact.art-variant-real[data-art="party"] .hs[data-secret="batface"]:is([data-perch="left"],[data-perch="right"]){--t:22%}
  html.art-portrait.art-variant-real[data-art="dawn"] .hs[data-secret="batface"]{--l:46%;--t:19%}
  html.art-portrait.art-variant-real[data-art="dawn"] .hs[data-secret="batface"][data-perch="left"]{--l:6%;--t:30%}
  html.art-portrait.art-variant-real[data-art="dawn"] .hs[data-secret="batface"][data-perch="right"]{--l:82%;--t:30%}
}
.hs[data-secret="batface"]{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--amber-400) 60%,transparent))} /* Batface's lantern halo in amber-400; only its 60% alpha and 6px blur are gap S5 */
@media (prefers-reduced-motion:no-preference){
  @keyframes bat-perch{from{opacity:0;transform:translateY(calc(-1 * var(--sp-4))) scale(.7)}}
  .hs[data-secret="batface"]:not([hidden]){animation:bat-perch var(--dur-reveal) var(--ease-rise)}
}