/* Hushed Halls: cards, doors, Hushed tiles, deck backs, paper-cut frames, candle stubs, stamps and every §10.3 motion.
   Owner: look agent. Tokens come from app.css (SPEC §10.1); only the extras below are defined here.
   Builders: public/js/ui/art/*.js (they emit the class names used in this file).

   MOTION SWITCHES (set on <html> by main.js via data attributes; the class forms work too, art/motion.js sets them):
     Fast    html[data-speed="fast"]  | html.pace-fast      every card animation <= 120 ms (x0.48)
     Reduced html[data-motion="reduced"] | html.motion-reduce movement removed; 100 ms cross-fade only; timers keep length
   Animation classes are named .hh-a-* (movement, replaced by the cross-fade when Reduced) and .hh-t-* (timers: never altered). */

:where(:root){
  /* extras not in app.css */
  --room:#17142E;              /* dark interior behind a board's cells */
  --hushed-ink:#A39DC2;        /* "shh" text (lighter than --hushed for >= 4.5:1 on the room colour) */
  --pace:1;                    /* 1 Normal, .48 Fast */
  --commit-ms:600ms;           /* staged placement commits after this (Fast 300 ms); also drains the Undo ring */
  /* per-moment durations at Normal; every value <= 250 ms */
  --dur-deal:calc(180ms * var(--pace));
  --dur-cut:calc(220ms * var(--pace));
  --dur-flip:calc(200ms * var(--pace));
  --dur-draw:calc(220ms * var(--pace));
  --dur-place:calc(200ms * var(--pace));
  --dur-stamp:calc(160ms * var(--pace));
  --dur-stub:calc(200ms * var(--pace));
  --dur-hush-glow:calc(120ms * var(--pace));
  --dur-hush:calc(250ms * var(--pace));
  --dur-shake:calc(120ms * var(--pace));
  --dur-shimmer:calc(200ms * var(--pace));
  --dur-draught:calc(220ms * var(--pace));
  --dur-polt:calc(240ms * var(--pace));
  --dur-banner:calc(200ms * var(--pace));
  --dur-sun:calc(250ms * var(--pace));
  --dur-door:calc(160ms * var(--pace));
  --dur-tint:calc(250ms * var(--pace));
  --dur-row:calc(200ms * var(--pace));
  --dur-podium:calc(250ms * var(--pace));
  --dur-pop:calc(160ms * var(--pace));
  --dur-lift:calc(120ms * var(--pace));
  --dur-confetti:calc(1600ms * var(--pace));
}
html[data-speed="fast"], html.pace-fast{ --pace:.48; --commit-ms:300ms; }

/* ===================================================================== card base */
.hh-card{
  position:relative; display:block; box-sizing:border-box; width:100%; margin:0; padding:0; border:0;
  aspect-ratio:100 / 96; container-type:size; overflow:hidden;
  border-radius:10% / 10.4%;                         /* 10 px on a 100 px card */
  color:var(--ink); font-family:var(--font-num, ui-rounded,"SF Pro Rounded",system-ui,sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1; text-align:center;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  --k:1cqw;                                          /* inside a card: 1 design px on a 100 px wide card */
  transition:transform var(--dur-lift) ease-out, box-shadow var(--dur-lift) ease-out, filter var(--dur-lift) ease-out;
}
button.hh-card{ font:inherit; font-weight:800; cursor:pointer; }
button.hh-card:active, .hh-card.is-tappable:active{ transform:translateY(1.5px) scale(.985); filter:brightness(.94); }
.hh-card > *{ pointer-events:none; }
.hh-card > .hh-zone{ pointer-events:auto; }
.hh-card svg{ display:block; }

/* sizes: own board cell 100x96, mini tiers (opponents), pile (deck/discard 68x92). "zoom" is just own, scaled by its parent. */
.hh-card[data-size="mini"][data-tier="l"]{ aspect-ratio:40 / 44; border-radius:12.5% / 11.4%; }
.hh-card[data-size="mini"][data-tier="m"]{ aspect-ratio:30 / 34; border-radius:13% / 11.5%; }
.hh-card[data-size="mini"][data-tier="s"]{ aspect-ratio:22 / 26; border-radius:15% / 12.7%; }
.hh-card[data-size="pile"]{ aspect-ratio:68 / 92; border-radius:10% / 7.4%; }
.hh-card.fill{ height:100%; aspect-ratio:auto; }

/* geometry knobs (plain numbers, multiplied by --k below) */
.hh-card{ --s-strip:10; --s-gl:14; --s-glx:4; --s-gly:12.5; --s-num:46; --s-numtop:10; --s-numpl:0; --s-numpt:0; }
.hh-card[data-size="mini"][data-tier="l"]{ --s-strip:7.5; --s-gl:25; --s-glx:5; --s-gly:11; --s-num:56; --s-numtop:7.5; --s-numpl:10; --s-numpt:6; }
.hh-card[data-size="mini"][data-tier="m"]{ --s-strip:10; --s-gl:30; --s-glx:4; --s-gly:14; --s-num:58; --s-numtop:10; --s-numpl:14; --s-numpt:8; }
.hh-card[data-size="mini"][data-tier="s"]{ --s-strip:13.6; --s-gl:41; --s-glx:4.5; --s-gly:17; --s-num:62; --s-numtop:13.6; --s-numpl:20; --s-numpt:12; }

/* ===================================================================== face-up value card */
.hh-face{
  background:var(--card);
  box-shadow:0 2px 0 var(--paper-shadow), inset 0 0 0 1px rgba(35,31,53,.14);
}
.hh-band-lantern{ --band:var(--band-lantern); }
.hh-band-empty{ --band:var(--band-empty); }
.hh-band-faint{ --band:var(--band-faint); }
.hh-band-rattle{ --band:var(--band-rattle); }
.hh-band-howl{ --band:var(--band-howl); }

.hh-strip{
  position:absolute; left:0; right:0; top:0; height:calc(var(--s-strip) * var(--k));
  background:var(--band); box-shadow:inset 0 calc(-1.4 * var(--k)) 0 rgba(35,31,53,.6);   /* ink keyline: the strip reads against ivory */
}
.hh-band-empty .hh-strip{ background:var(--band-empty); box-shadow:inset 0 0 0 calc(1.2 * var(--k)) var(--ink); }

.hh-gl{ position:absolute; width:calc(var(--s-gl) * var(--k)); height:calc(var(--s-gl) * var(--k)); }
.hh-gl > svg{ width:100%; height:100%; }
.hh-gl--tl{ left:calc(var(--s-glx) * var(--k)); top:calc(var(--s-gly) * var(--k)); }
.hh-gl--br{ right:calc(var(--s-glx) * var(--k)); bottom:calc(4 * var(--k)); transform:rotate(180deg); }
.hh-card[data-size="mini"] .hh-gl--tl{ top:calc(var(--s-strip) * var(--k) + 0.5 * var(--k)); }

.hh-picwrap{
  position:absolute; left:calc(17 * var(--k)); right:calc(17 * var(--k)); top:calc(11 * var(--k)); bottom:calc(6 * var(--k));
  display:flex; align-items:center; justify-content:center; color:var(--ink); opacity:var(--pic-opacity, .16);
}
.hh-picwrap > svg{ width:100%; height:100%; }
.hh-visitor .hh-picwrap{ --pic-opacity:.2; }

.hh-num{
  position:absolute; left:0; right:0; bottom:0; top:calc(var(--s-numtop) * var(--k));
  display:flex; align-items:center; justify-content:center;
  padding-left:calc(var(--s-numpl) * var(--k)); padding-top:calc(var(--s-numpt) * var(--k));
  font-size:calc(var(--s-num) * var(--k) * var(--numeral-scale, 1));
  color:var(--ink); letter-spacing:-.02em; white-space:nowrap;
}
.hh-visitor .hh-num{ padding-bottom:calc(11 * var(--k)); }

/* Visitor: double inner border in the Rattling violet, name under the numeral, "?" corner */
.hh-visitor::after{
  content:""; position:absolute; inset:calc(4.4 * var(--k)); border:calc(1.1 * var(--k)) solid var(--band-rattle); border-radius:calc(6.5 * var(--k));
  box-shadow:0 0 0 calc(1.2 * var(--k)) var(--card), 0 0 0 calc(2.3 * var(--k)) var(--band-rattle); pointer-events:none;
}
.hh-card[data-size="mini"].hh-visitor::after{ inset:calc(2.5 * var(--k)); border-width:calc(3 * var(--k)); box-shadow:none; border-radius:calc(8 * var(--k)); }
.hh-vname{ position:absolute; left:0; right:0; bottom:calc(9 * var(--k)); font-size:calc(8.8 * var(--k)); letter-spacing:.03em; font-weight:800; color:var(--ink); }
.hh-qmark{
  position:absolute; right:calc(7 * var(--k)); top:calc(12.5 * var(--k)); width:calc(12 * var(--k)); height:calc(12 * var(--k)); border-radius:50%;
  background:var(--band-rattle); color:var(--ink); font-size:calc(9 * var(--k)); line-height:calc(12 * var(--k)); font-weight:800;
}

/* ===================================================================== door (face-down): charcoal arch, never a value colour */
.hh-door, .hh-pileback{ background:transparent; overflow:hidden; }
.hh-door-arch{
  position:absolute; left:calc(3 * var(--k)); right:calc(3 * var(--k)); top:calc(2.5 * var(--k)); bottom:0;
  background:var(--door); border-radius:calc(47 * var(--k)) calc(47 * var(--k)) calc(5 * var(--k)) calc(5 * var(--k));
  box-shadow:0 calc(2 * var(--k)) 0 var(--paper-shadow);
}
.hh-door-arch::before{                            /* the arch line */
  content:""; position:absolute; inset:calc(6 * var(--k)) calc(6 * var(--k)) calc(5 * var(--k));
  border:calc(1.9 * var(--k)) solid var(--door-edge); border-radius:calc(41 * var(--k)) calc(41 * var(--k)) calc(3 * var(--k)) calc(3 * var(--k));
}
.hh-door-pat{
  position:absolute; left:calc(3 * var(--k)); right:calc(3 * var(--k)); top:calc(2.5 * var(--k)); bottom:0; opacity:.2; overflow:hidden;
  border-radius:calc(47 * var(--k)) calc(47 * var(--k)) calc(5 * var(--k)) calc(5 * var(--k));
}
.hh-door-pat > svg{ width:100%; height:100%; }
.hh-door-knob{
  position:absolute; right:calc(19 * var(--k)); top:calc(55 * var(--k)); width:calc(9.5 * var(--k)); height:calc(9.5 * var(--k)); border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #F6E6B0, var(--brass) 55%, #8A6D2C); box-shadow:0 calc(.8 * var(--k)) 0 rgba(0,0,0,.4);
}
/* minis: flat charcoal, 1 px arch, no knob/pattern detail */
.hh-card[data-size="mini"].hh-door .hh-door-arch{
  left:calc(2 * var(--k)); right:calc(2 * var(--k)); top:calc(1 * var(--k)); border-radius:calc(50 * var(--k)) calc(50 * var(--k)) calc(8 * var(--k)) calc(8 * var(--k)); box-shadow:none;
}
.hh-card[data-size="mini"].hh-door .hh-door-arch::before{
  inset:calc(7 * var(--k)) calc(7 * var(--k)) calc(6 * var(--k)); border-width:1px; border-radius:calc(40 * var(--k)) calc(40 * var(--k)) calc(4 * var(--k)) calc(4 * var(--k));
}
.hh-card[data-size="mini"].hh-door .hh-door-knob{ right:calc(18 * var(--k)); top:calc(56 * var(--k)); width:calc(11 * var(--k)); height:calc(11 * var(--k)); box-shadow:none; }
.hh-card[data-size="mini"][data-tier="l"].hh-door .hh-door-knob{ width:calc(8 * var(--k)); height:calc(8 * var(--k)); }

/* split door (a card in hand): upper "Swap" preview zone + 46 px "Flip" band (SPEC §9.2) */
.hh-door--split .hh-door-knob{ display:none; }
.hh-zone{ position:absolute; left:calc(3 * var(--k)); right:calc(3 * var(--k)); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--card); }
.hh-zone--swap{ top:calc(2.5 * var(--k)); bottom:calc(46 * var(--k)); flex-direction:column; gap:calc(1 * var(--k)); }
.hh-zone--swap i{ font-style:normal; font-size:calc(9.5 * var(--k)); letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.hh-prev{ display:flex; align-items:center; gap:calc(2 * var(--k)); opacity:.55; }
.hh-prev svg{ width:calc(14 * var(--k)); height:calc(14 * var(--k)); }
.hh-prev b{ font-size:calc(22 * var(--k)); font-weight:800; }
.hh-zone--flip{
  bottom:0; height:calc(46 * var(--k)); gap:calc(3 * var(--k)); font-size:calc(14 * var(--k)); font-weight:800; letter-spacing:.02em;
  background:rgba(244,235,221,.13); border-top:calc(1.5 * var(--k)) dashed rgba(244,235,221,.45); border-radius:0 0 calc(5 * var(--k)) calc(5 * var(--k));
}
.hh-zone--flip b{ font-size:calc(20 * var(--k)); line-height:1; }
.hh-zone:active{ background:rgba(244,235,221,.28); }

/* deck / discard back (68x92) */
.hh-pileback{ background:var(--door); box-shadow:0 2px 0 var(--paper-shadow), inset 0 0 0 1px rgba(255,255,255,.06); }
.hh-pileback .hh-door-arch{
  inset:calc(7 * var(--k)); background:transparent; box-shadow:none;
  border:calc(1.8 * var(--k)) solid var(--door-edge); border-radius:calc(30 * var(--k)) calc(30 * var(--k)) calc(4 * var(--k)) calc(4 * var(--k));
}
.hh-pileback .hh-door-arch::before{ display:none; }
.hh-pileback .hh-door-pat{ inset:0; border-radius:inherit; }
.hh-pileback .hh-door-knob{ right:calc(20 * var(--k)); top:calc(62 * var(--k)); width:calc(10 * var(--k)); height:calc(10 * var(--k)); }
.hh-count{
  position:absolute; left:50%; bottom:calc(5 * var(--k)); transform:translateX(-50%); min-width:calc(26 * var(--k)); padding:calc(2 * var(--k)) calc(6 * var(--k));
  border-radius:99px; background:var(--paper); color:var(--ink); font-size:calc(15 * var(--k)); box-shadow:0 1px 0 var(--paper-shadow);
}

/* ===================================================================== Hushed tile: not a card */
.hh-hushed{ background:transparent; box-shadow:none; overflow:visible; }
.hh-hushed::before{
  content:""; position:absolute; inset:calc(1 * var(--k)); border:calc(1.6 * var(--k)) dashed var(--hushed); border-radius:calc(9 * var(--k));
}
.hh-hushed-ghost{ position:absolute; left:50%; top:calc(15 * var(--k)); transform:translateX(-50%); width:calc(26 * var(--k)); opacity:.9; }
.hh-hushed-ghost svg{ width:100%; height:auto; }
.hh-shh{ position:absolute; left:0; right:0; bottom:calc(11 * var(--k)); font-size:calc(12 * var(--k)); font-weight:700; letter-spacing:.06em; color:var(--hushed-ink); }
.hh-card[data-size="mini"].hh-hushed::before{ border:max(1px, calc(4 * var(--k))) dotted var(--hushed); inset:calc(2 * var(--k)); border-radius:calc(14 * var(--k)); }

/* ===================================================================== card states */
.hh-card.is-hand{ transform:translateY(-4px); box-shadow:0 7px 0 var(--paper-shadow), 0 12px 18px rgba(0,0,0,.35); }
.hh-card.is-staged{ outline:2.5px dashed var(--moon); outline-offset:1px; }                       /* placement waiting to commit */
.hh-card.is-outlined{ outline:2.5px solid var(--seat, var(--moon)); outline-offset:1px; }       /* last-placed / selected, in the seat colour */
.hh-card.is-selected{ outline:3px solid var(--warn); outline-offset:1px; }
.hh-card.is-pair{ outline:1.5px solid rgba(246,239,216,.7); outline-offset:1px; box-shadow:0 2px 0 var(--paper-shadow), 0 0 10px 1px rgba(246,239,216,.5); }  /* two matching face-up rooms in a live line */
.hh-card.is-glow{ box-shadow:0 0 0 2px var(--moon), 0 0 14px 3px rgba(246,239,216,.75); }          /* hush glow */
.hh-card.is-disabled{ opacity:.45; filter:saturate(.5); pointer-events:none; }
.hh-card.is-lifted{ transform:translateY(-4px); box-shadow:0 6px 0 var(--paper-shadow), 0 0 14px 2px rgba(246,239,216,.6); }   /* discard pile during the Snag window */
.hh-door.is-glow{ box-shadow:0 0 0 2px var(--moon), 0 0 14px 3px rgba(246,239,216,.5); }
.hh-door.is-target .hh-door-arch{ box-shadow:0 0 0 calc(1.6 * var(--k)) var(--moon), 0 calc(2 * var(--k)) 0 var(--paper-shadow); }

/* ===================================================================== board + paper-cut frame */
.hh-board{ position:relative; isolation:isolate; }
.hh-frame{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; }
.hh-frame--active{ filter:drop-shadow(0 0 5px var(--seat)); }
.hh-sun{ transform-box:fill-box; }
@keyframes hh-sunrise{ from{ transform:translateY(var(--rise, 30px)); } to{ transform:none; } }
.hh-a-sunrise{ animation:hh-sunrise var(--dur-sun) ease-out both; }

/* ===================================================================== seat glyphs, stubs, stamps, badges, undo, windows */
.hh-seat-glyph, .hh-glyph{ display:inline-block; vertical-align:middle; }
.hh-stubs{ display:inline-flex; gap:2px; align-items:flex-end; vertical-align:middle; }
.hh-stub{ overflow:visible; }
.hh-stub .hh-fl--b{ opacity:0; }
.hh-stub.is-new .hh-fl--a{ animation:hh-fl-a calc(240ms * var(--pace)) steps(1) 3; }   /* two-frame flicker, then rest */
.hh-stub.is-new .hh-fl--b{ animation:hh-fl-b calc(240ms * var(--pace)) steps(1) 3; }
@keyframes hh-fl-a{ 0%{ opacity:1; } 50%{ opacity:0; } }
@keyframes hh-fl-b{ 0%{ opacity:0; } 50%{ opacity:1; } }

.hh-stamp{
  display:inline-block; padding:.12em .5em; border:3px solid var(--stamp, var(--moon)); border-radius:8px; color:var(--stamp, var(--moon));
  background:rgba(18,15,38,.62); font:900 22px/1 var(--font-num, ui-rounded, system-ui, sans-serif); letter-spacing:.06em; transform:rotate(var(--rot, -6deg)); white-space:nowrap;
}
.hh-stamp--bonus{ font-size:26px; }
.hh-dawnbadge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 6px; border-radius:99px; border:2px solid currentColor; background:rgba(18,15,38,.55);
  font:900 18px/1.2 var(--font-num, ui-rounded, system-ui, sans-serif); font-variant-numeric:tabular-nums;
}
.hh-dawnbadge.is-good{ color:var(--good); } .hh-dawnbadge.is-warn{ color:var(--warn); }
.hh-dawnbadge svg{ width:20px; height:20px; }

.hh-undo{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:44px; padding:0 14px 0 10px; border:0; border-radius:99px;
  background:var(--paper); color:var(--ink); font:800 15px/1 var(--font-ui, system-ui, sans-serif); box-shadow:0 3px 0 var(--paper-shadow);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.hh-undo:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--paper-shadow); }

/* timers (.hh-t-*): the ring IS the timer, so Fast / Reduced never change their length */
@keyframes hh-drain{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:100; } }
@keyframes hh-bar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.hh-t-undo{ stroke-dasharray:100; stroke-dashoffset:0; animation:hh-drain var(--commit-ms, 600ms) linear forwards; }
.hh-window{ display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.hh-t-ring{ stroke-dasharray:100; stroke-dashoffset:0; animation:hh-drain var(--ms, 1500ms) linear forwards; }
.hh-window-bar{ display:none; width:44px; height:6px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; }
.hh-t-bar{ display:block; height:100%; width:100%; background:var(--wcol, var(--warn)); transform-origin:left center; animation:hh-bar var(--ms, 1500ms) linear forwards; }
html[data-motion="reduced"] .hh-window-ring, html.motion-reduce .hh-window-ring{ display:none; }
html[data-motion="reduced"] .hh-window-bar, html.motion-reduce .hh-window-bar{ display:block; }
/* the check sweep (Verify) */
.hh-check-path{ stroke-dasharray:1; stroke-dashoffset:0; }
.hh-check.hh-t-check .hh-check-path{ animation:hh-sweep calc(380ms * var(--pace)) ease-out both; }
@keyframes hh-sweep{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* banners, tint, wordmark */
.hh-dawn-banner{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:10px 14px; background:var(--paper); color:var(--ink);
  font:900 20px/1.2 var(--font-num, ui-rounded, system-ui, sans-serif); box-shadow:0 4px 0 var(--paper-shadow);
}
.hh-dawn-tint{
  position:fixed; inset:0; pointer-events:none; opacity:0; z-index:0; transition:opacity var(--dur-tint) ease-out;
  background:linear-gradient(to top, rgba(255,179,138,.30), rgba(242,143,168,.12) 55%, rgba(140,107,216,0));
}
.is-reveal .hh-dawn-tint, .hh-dawn-tint.is-on{ opacity:1; }
.hh-backdrop{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hh-backdrop .hh-dawn-layer{ opacity:0; transition:opacity var(--dur-tint) ease-out; }
.hh-backdrop.is-dawn .hh-dawn-layer, .is-dawn > .hh-backdrop .hh-dawn-layer{ opacity:1; }
.hh-wordmark{ display:block; max-width:100%; height:auto; overflow:visible; }

/* ===================================================================== MOTION (§10.3). Each class is added for one moment. */
@keyframes hh-slide{ from{ transform:translate(var(--from-x, 0), var(--from-y, 0)) scale(var(--from-s, 1)); } to{ transform:none; } }
.hh-a-slide, .hh-a-deal, .hh-a-draw, .hh-a-discard{ pointer-events:none; }      /* a card in flight never steals a tap from the room or pile it passes over (polish) */
.hh-a-slide{ animation:hh-slide var(--dur-place) cubic-bezier(.2,.8,.25,1) both; position:relative; z-index:20; }          /* place / swap / snag flight / take */
.hh-a-deal{ animation:hh-slide var(--dur-deal) ease-out both; animation-delay:calc(var(--i, 0) * 30ms * var(--pace)); }     /* deal: 30 ms stagger */
.hh-a-draw{ animation:hh-slide var(--dur-draw) cubic-bezier(.2,.8,.25,1) both; position:relative; z-index:20; }           /* deck -> hand */
.hh-a-discard{ animation:hh-slide var(--dur-place) cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(100ms * var(--pace)); position:relative; z-index:19; }  /* old card to the pile, overlapping by 100 ms */

@keyframes hh-flip-out{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes hh-flip-in{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes hh-flip{ 0%{ transform:scaleX(1); } 50%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
.hh-a-flip-out{ animation:hh-flip-out calc(var(--dur-flip) / 2) ease-in both; }
.hh-a-flip-in{ animation:hh-flip-in calc(var(--dur-flip) / 2) ease-out both; }
.hh-a-flip{ animation:hh-flip var(--dur-flip) ease-in-out both; }

@keyframes hh-cut{ 0%{ transform:none; } 40%{ transform:translateX(calc(var(--cut, 7px) * -1)) rotate(-4deg); } 70%{ transform:translateX(var(--cut, 7px)) rotate(3deg); } 100%{ transform:none; } }
.hh-a-cut{ animation:hh-cut var(--dur-cut) ease-in-out both; }
@keyframes hh-pop{ 0%{ transform:scale(.5); opacity:0; } 70%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.hh-a-pop{ animation:hh-pop var(--dur-pop) ease-out both; }                      /* cut chips, level-up card, Ghost Book stamp */

@keyframes hh-stamp{ from{ transform:rotate(var(--rot, -6deg)) scale(1.4); opacity:0; } to{ transform:rotate(var(--rot, -6deg)) scale(1); opacity:1; } }
.hh-a-stamp{ animation:hh-stamp var(--dur-stamp) cubic-bezier(.2,1.1,.4,1) both; }                   /* SNAG!, -5, Dawn badge */
@keyframes hh-stubpop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.hh-a-stubpop{ animation:hh-stubpop var(--dur-stub) ease-out both; transform-origin:50% 100%; }

@keyframes hh-hush-glow{ from{ box-shadow:0 2px 0 var(--paper-shadow); } to{ box-shadow:0 0 0 2px var(--moon), 0 0 16px 4px rgba(246,239,216,.85); } }
.hh-a-hush-glow{ animation:hh-hush-glow var(--dur-hush-glow) ease-out both; }
@keyframes hh-hush-rise{
  0%{ opacity:0; transform:translate(0, 6px) scale(.8); }
  22%{ opacity:1; transform:translate(calc(var(--dx) * .12), calc(var(--dy) * .12)) scale(1); }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(.62); }
}
.hh-hushfx{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:30; overflow:visible; }
.hh-hush-ghost{ position:absolute; display:block; }
.hh-a-hush-ghost{ animation:hh-hush-rise var(--dur-hush) cubic-bezier(.3,.7,.35,1) both; animation-delay:calc(var(--i, 0) * 30ms * var(--pace)); }
@keyframes hh-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.hh-a-fade{ animation:hh-fade-in var(--dur-hush) ease-out both; }                 /* tiles fade to Hushed */
@keyframes hh-shake{ 0%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 50%{ transform:translateX(3px); } 75%{ transform:translateX(-2px); } 100%{ transform:translateX(0); } }
.hh-a-shake{ animation:hh-shake var(--dur-shake) linear both; }                  /* Double Hush: ~6 px frame shake */

@keyframes hh-shimmer{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }
.hh-a-shimmer{ position:relative; }
.hh-a-shimmer::before{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.75) 50%, transparent 68%); animation:hh-shimmer var(--dur-shimmer) ease-in-out both;
}
@keyframes hh-arc{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(calc(var(--dx) / 2), calc(var(--dy) / 2 + var(--arc, -14px))); }
  100%{ transform:translate(var(--dx), var(--dy)); }
}
.hh-a-arc{ animation:hh-arc var(--dur-draught) ease-in-out both; position:relative; z-index:25; }       /* Draught: the two rooms arc past each other (--arc +/-14px) */
@keyframes hh-hop{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(calc(var(--dx) / 2), calc(var(--dy) / 2 - 26px)) scale(1.16); }
  100%{ transform:translate(var(--dx), var(--dy)) scale(1); }
}
.hh-a-hop{ animation:hh-hop var(--dur-polt) ease-in-out both; position:relative; z-index:30; }          /* Poltergeist hop across boards */
@keyframes hh-outline-flash{ 0%{ outline:3px solid var(--moon); outline-offset:1px; } 100%{ outline:3px solid transparent; outline-offset:1px; } }
.hh-a-flash{ animation:hh-outline-flash 100ms linear both; }                      /* Reduced replacement for visitor swaps */

@keyframes hh-banner-in{ from{ transform:translateY(-110%); } to{ transform:none; } }
.hh-a-banner{ animation:hh-banner-in var(--dur-banner) ease-out both; }
@keyframes hh-swing{ from{ transform:perspective(320px) rotateY(0); } to{ transform:perspective(320px) rotateY(-84deg); } }
@keyframes hh-open{ from{ transform:perspective(320px) rotateY(84deg); } to{ transform:perspective(320px) rotateY(0); } }
.hh-a-swing{ animation:hh-swing var(--dur-door) ease-in both; transform-origin:0 50%; }                 /* Last Light: the door swings open ... */
.hh-a-open{ animation:hh-open var(--dur-door) ease-out both; transform-origin:0 50%; }                  /* ... and the face swings in */
@keyframes hh-row-in{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
.hh-a-row{ animation:hh-row-in var(--dur-row) ease-out both; animation-delay:calc(var(--i, 0) * 40ms * var(--pace)); }   /* score rows, 40 ms apart */
@keyframes hh-rise{ from{ transform:scaleY(.15); opacity:.2; } to{ transform:none; opacity:1; } }
.hh-a-podium{ animation:hh-rise var(--dur-podium) ease-out both; transform-origin:50% 100%; }
@keyframes hh-xfade{ from{ opacity:0; } to{ opacity:1; } }
.hh-a-xfade{ animation:hh-xfade 100ms linear both; }

.hh-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:40; }
.hh-confetti > i{ position:absolute; top:34%; display:block; border-radius:1px; }
@keyframes hh-confetti{
  0%{ transform:translate(0,0) rotate(0); opacity:1; }
  22%{ transform:translate(calc(var(--x) * .35), calc(var(--lift) * -1)) rotate(calc(var(--r) * .3)); opacity:1; }
  100%{ transform:translate(var(--x), var(--fall)) rotate(var(--r)); opacity:0; }
}
.hh-a-confetti-bit{ animation:hh-confetti var(--dur-confetti) cubic-bezier(.25,.6,.4,1) both; animation-delay:calc(var(--d, 0ms) * var(--pace)); }

/* ===================================================================== REDUCED: instant state changes + a 100 ms cross-fade, timers untouched */
html[data-motion="reduced"] [class*="hh-a-"], html.motion-reduce [class*="hh-a-"]{
  animation:hh-xfade 100ms linear both !important; animation-delay:0ms !important; transform:none !important;
}
html[data-motion="reduced"] .hh-a-flip-out, html.motion-reduce .hh-a-flip-out{ animation:none !important; }
html[data-motion="reduced"] .hh-a-shimmer::before, html.motion-reduce .hh-a-shimmer::before{ animation:none !important; opacity:0; }
html[data-motion="reduced"] .hh-a-arc, html[data-motion="reduced"] .hh-a-hop, html[data-motion="reduced"] .hh-a-shimmer,
html.motion-reduce .hh-a-arc, html.motion-reduce .hh-a-hop, html.motion-reduce .hh-a-shimmer{ animation:hh-outline-flash 100ms linear both !important; }
html[data-motion="reduced"] .hh-hushfx, html[data-motion="reduced"] .hh-confetti,
html.motion-reduce .hh-hushfx, html.motion-reduce .hh-confetti{ display:none !important; }
html[data-motion="reduced"] .hh-stub.is-new .hh-fl, html.motion-reduce .hh-stub.is-new .hh-fl{ animation:none !important; }
html[data-motion="reduced"] .hh-card, html.motion-reduce .hh-card{ transition:none; }
html[data-motion="reduced"] .hh-dawn-tint, html[data-motion="reduced"] .hh-backdrop .hh-dawn-layer,
html.motion-reduce .hh-dawn-tint, html.motion-reduce .hh-backdrop .hh-dawn-layer{ transition:opacity 100ms linear; }
html[data-motion="reduced"] .hh-sun, html.motion-reduce .hh-sun{ transform:none; }

/* bot tells (mini labels): moth flutters, bell rings, ribbon glows. Reduced motion collapses every hh-a-* to a 100 ms fade (rule above). */
.t-tell{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:22%; background:rgba(179,173,211,.28); color:var(--ui-text); padding:1px; box-sizing:content-box; }
.t-tell svg{ display:block; }
.t-tell.is-pair{ color:var(--band-lantern); box-shadow:0 0 5px 1px rgba(232,178,58,.65); }
.hh-a-flutter{ animation:hh-flutter 420ms ease-in-out both; transform-origin:50% 60%; }
.hh-a-ring{ animation:hh-ring 360ms ease-in-out both; transform-origin:50% 10%; }
.hh-a-glow{ animation:hh-glowp 500ms ease-in-out both; }
@keyframes hh-flutter{ 0%{ transform:rotate(0) scaleX(1); } 20%{ transform:rotate(-14deg) scaleX(.6); } 40%{ transform:rotate(12deg) scaleX(1.05); } 60%{ transform:rotate(-10deg) scaleX(.65); } 80%{ transform:rotate(6deg) scaleX(1); } 100%{ transform:none; } }
@keyframes hh-ring{ 0%{ transform:rotate(0); } 25%{ transform:rotate(22deg); } 50%{ transform:rotate(-18deg); } 75%{ transform:rotate(10deg); } 100%{ transform:none; } }
@keyframes hh-glowp{ 0%{ box-shadow:0 0 0 0 rgba(232,178,58,0); } 50%{ box-shadow:0 0 7px 3px rgba(232,178,58,.85); } 100%{ box-shadow:0 0 0 0 rgba(232,178,58,0); } }