/* Benny Graves — the song finder. A split-flap board on a pasted handbill, in the Living Poster's inks and materials:
   paper stock with grain, masking tape, key-black ink, the cap-orange spot ink, white-bordered prints, label strips.
   Every rule is under .fd (the finder's own prefix). Day: cream card stock, black board. Night: black stock, the same
   black board lit with bone characters. Sizes on the board come from finder.js as custom properties on .fd-board. */

.fd {
  --fd-paper: #f6f1e7;
  --fd-ink: #181512;
  --fd-soft: rgba(24, 21, 18, .64);
  --fd-spot: #ff4a1f;
  --fd-spot-text: #c7300d;
  --fd-plate: #181512;
  --fd-border: #fbf9f4;
  --fd-tape: rgba(236, 228, 206, .9);
  --fd-tape-edge: rgba(120, 100, 60, .18);
  --fd-shadow: rgba(40, 28, 16, .34);
  --fd-label: #f6f1e7;
  --fd-grain: url(assets/grain-day.png);
  /* the board: a black housing, charcoal flaps, bone characters */
  --fd-house: #1d1a17;
  --fd-house-2: #141210;
  --fd-house-edge: rgba(255, 246, 230, .07);
  --fd-flap-t: #2d2926;
  --fd-flap-t2: #282421;
  --fd-flap-b: #23201d;
  --fd-flap-b2: #1e1b18;
  --fd-char: #f4ecdc;
  --fd-split: rgba(0, 0, 0, .92);
  --fd-pin: #050404;
  --fd-face: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --fd: 64ms;   /* one flip (flap.js FD) */
  --zd: 260ms;  /* the last flip + settle (flap.js ZD) */
  --fd-bp: 16px;
  position: relative;
  container: fd / inline-size;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--fd-ink);
  font-family: var(--fd-face);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
html[data-theme="night"] .fd {
  --fd-paper: #1b1815;
  --fd-ink: #f0e8d8;
  --fd-soft: rgba(240, 232, 216, .66);
  --fd-spot: #ff5a2a;
  --fd-spot-text: #ff6a3d;
  --fd-plate: #efe5d1;
  --fd-border: #ece6d9;
  --fd-tape: rgba(212, 202, 178, .8);
  --fd-tape-edge: rgba(0, 0, 0, .25);
  --fd-shadow: rgba(0, 0, 0, .7);
  --fd-label: #ece5d6;
  --fd-grain: url(assets/grain-night.png);
  --fd-house: #0b0a09;
  --fd-house-2: #060505;
  --fd-house-edge: rgba(240, 232, 216, .12);
  --fd-flap-t: #2a2623;
  --fd-flap-t2: #25221f;
  --fd-flap-b: #201d1a;
  --fd-flap-b2: #1b1816;
  --fd-char: #f3ead8;
}
.fd[data-stock="kraft"] { --fd-paper: #d9c7a4 }
html[data-theme="night"] .fd[data-stock="kraft"] { --fd-paper: #231e19 }
.fd *, .fd *::before, .fd *::after { box-sizing: border-box }
.fd :focus-visible { outline: 3px solid var(--fd-spot); outline-offset: 3px }
.fd [hidden] { display: none !important }
.fd .fd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0 }

/* ---------- the handbill: its own stock, pasted a touch crooked, two pieces of tape ---------- */
.fd-sheet {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--fd-grain) 0 0 / 320px 320px repeat, var(--fd-paper);
  box-shadow: 0 .5px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .14), 0 20px 34px -22px var(--fd-shadow);
  transform: rotate(-.35deg);
}
.fd[data-stock="bare"] .fd-sheet { display: none }
.fd-tape {
  position: absolute; display: block; height: 26px; pointer-events: none;
}
.fd-tape::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%, rgba(0, 0, 0, .05)), var(--fd-tape);
  clip-path: polygon(0 8%, 4% 0, 7% 12%, 10% 2%, 90% 0, 93% 14%, 96% 3%, 100% 10%, 100% 92%, 96% 100%, 93% 88%, 89% 100%, 11% 98%, 7% 86%, 4% 100%, 0 90%);
  box-shadow: inset 0 0 0 1px var(--fd-tape-edge);
}
.fd-tape-l { left: -22px; top: 6px; width: 104px; transform: rotate(-34deg) }
.fd-tape-r { right: -22px; top: 6px; width: 104px; transform: rotate(34deg) }

.fd-in { position: relative; padding: clamp(22px, 3vw, 40px) clamp(18px, 4vw, 56px) clamp(26px, 3.4vw, 48px) }
.fd[data-stock="bare"] .fd-in { padding-left: 0; padding-right: 0 }

/* small poster copy between two printed rules */
.fd-strip {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 clamp(18px, 2.6vw, 34px); padding: 7px 0 6px;
  border-top: 2px solid var(--fd-ink); border-bottom: 2px solid var(--fd-ink);
  text-transform: uppercase; font-size: 12px; line-height: 1.2; letter-spacing: .14em; font-weight: 800; font-variation-settings: 'wdth' 82;
}
.fd-strip-r { color: var(--fd-spot-text); text-align: right }

/* ---------- heading ---------- */
.fd-h {
  margin: 0 0 clamp(20px, 5cqi, 40px); max-width: 15ch; text-transform: uppercase; font-weight: 900; font-variation-settings: 'wdth' 62;
  font-size: clamp(38px, 11.4cqi, 100px); line-height: .86; letter-spacing: -.005em; text-wrap: balance;
}
/* "favorite" in the spot ink over a halftone shadow plate, like the poster's lettering */
.fd-fav { position: relative; display: inline-grid; color: var(--fd-spot); isolation: isolate }
.fd-fav > span { grid-area: 1 / 1 }
.fd-fav-plate {
  z-index: -1; transform: translate(.045em, .05em); color: transparent;
  background-image: radial-gradient(circle at center, var(--fd-plate) 0 33%, transparent 37%), radial-gradient(circle at center, var(--fd-plate) 0 33%, transparent 37%);
  background-size: 6px 6px; background-position: 0 0, 3px 3px;
  -webkit-background-clip: text; background-clip: text;
}
/* phones only (desktop is approved as it is): the word gets its own line, a size up, printed like the poster's
   BENNY GRAVES with the effects scaled down for smaller letters: the same wear, finer and lighter (holes only partly
   through the ink), and finer halftone dots sitting closer, so neither one eats into the letters */
@media (max-width: 639px) {
  .fd-fav { display: grid; width: max-content; font-size: 1.28em; margin-top: .04em }
  .fd-fav-ink {
    -webkit-mask: url(assets/wear-fine.png) 0 0 / 240px 240px repeat;
    mask: url(assets/wear-fine.png) 0 0 / 240px 240px repeat;
  }
  .fd-fav-plate { transform: translate(.026em, .03em); background-size: 4px 4px; background-position: 0 0, 2px 2px }
}

/* buttons: the poster's printed buttons (thick key-ink border, condensed caps, a spot-ink icon) */
.fd .fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; margin: 0;
  border: 2.5px solid var(--fd-ink); border-radius: 0; background: var(--fd-paper); color: var(--fd-ink); cursor: pointer;
  font-family: var(--fd-face); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 850;
  font-variation-settings: 'wdth' 80; line-height: 1; white-space: nowrap; touch-action: manipulation;
  transition: transform .15s ease;
}
.fd .fd-btn:active { transform: translateY(1px) }
.fd .fd-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fd-spot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.fd .fd-btn-ink { background: var(--fd-ink); color: var(--fd-paper) }
.fd .fd-listen svg { fill: var(--fd-spot); stroke: none; width: 16px; height: 16px }
.fd .fd-open svg { stroke: currentColor }
.fd .fd-surprise { width: 100%; min-height: 56px; padding: 0 26px; font-size: 15px }
@media (hover: hover) {
  .fd .fd-btn:hover { box-shadow: 4px 4px 0 var(--fd-spot) }
  .fd .fd-btn:hover:active { box-shadow: 2px 2px 0 var(--fd-spot) }
}

/* ---------- the board ---------- */
/* ---------- the body: board, the cover's place, the controls (phone first; wide slots below) ---------- */
.fd-body { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-areas: "board board" "side ctrl"; gap: 22px 16px; align-items: start }
.fd[data-state="idle"] .fd-body { grid-template-areas: "board board" "ctrl ctrl" }
.fd[data-state="idle"] .fd-side { display: none }
.fd-stage { grid-area: board; position: relative; min-width: 0 }
.fd-side { grid-area: side; position: relative; min-width: 0 }
.fd-ctrl { grid-area: ctrl; min-width: 0 }
.fd-board {
  position: relative; width: max-content; max-width: 100%; margin: 0 auto; padding: var(--fd-bp);
  border-radius: 12px; background: linear-gradient(180deg, var(--fd-house), var(--fd-house-2));
  box-shadow: inset 0 1px 0 var(--fd-house-edge), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 3px rgba(0, 0, 0, .22), 0 26px 40px -24px var(--fd-shadow);
  touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transform: translate3d(var(--nudge, 0px), 0, 0); transition: transform .5s cubic-bezier(.25, 1.6, .45, 1);
}
.fd-board.fd-drag { transition: none }
.fd-bolt { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 246, 230, .35), rgba(0, 0, 0, .2) 70%), #2a2623; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) }
.fd-b-tl { left: 5px; top: 5px } .fd-b-tr { right: 5px; top: 5px } .fd-b-bl { left: 5px; bottom: 5px } .fd-b-br { right: 5px; bottom: 5px }
.fd-rows { display: flex; flex-direction: column; gap: var(--rg); min-height: var(--ch) }
.fd-board.fd-fade .fd-rows { opacity: 0; transition: opacity .14s ease-out }
.fd-rows { transition: opacity .22s ease-in }

/* a line of flaps; the leaves' overlay sits over it, one slot exactly over each cell */
.fd-line { position: relative; display: flex; gap: var(--gx); height: var(--ch); flex: none }
.fd-ov { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none }
.fd-sl { position: absolute; top: 0; left: calc(var(--i) * (var(--cw) + var(--gx))); width: var(--cw); height: var(--ch); perspective: calc(var(--ch) * 4.2) }

/* one flap: two static halves, a hinge with its pins, the drop shadow under the flap */
.fd-fl {
  position: relative; flex: none; display: block; width: var(--cw); height: var(--ch); contain: layout style size; border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 2px 3px -1px rgba(0, 0, 0, .55);
}
.fd-fl::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: calc(50% - 1.5px); height: 3px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--fd-split), var(--fd-split)) 50% 50% / 100% 1px no-repeat,
    linear-gradient(90deg, var(--fd-pin) 0 3px, transparent 3px calc(100% - 3px), var(--fd-pin) calc(100% - 3px));
}
.fd-hf {
  position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; display: block; padding-top: var(--dy); margin: 0;
  text-align: center; text-decoration: none; font-family: var(--fd-face); font-weight: 780; font-variation-settings: 'wdth' 66;
  font-size: var(--fs); font-style: normal; color: var(--fd-char); white-space: pre;
}
.fd-t, .fd-lf { top: 0; line-height: var(--ch); border-radius: var(--r) var(--r) 0 0; background: linear-gradient(180deg, var(--fd-flap-t), var(--fd-flap-t2)); transform-origin: 50% 100% }
.fd-t { box-shadow: inset 0 1px 0 rgba(255, 246, 230, .06) }
.fd-b, .fd-lb { top: 50%; line-height: 0; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(180deg, var(--fd-flap-b), var(--fd-flap-b2)); transform-origin: 50% 0 }
.fd-lf { box-shadow: inset 0 -1px 0 rgba(255, 246, 230, .07) }
.fd-lb { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5) }
/* the shading that turns with each leaf, and the shadow a falling leaf throws on the flap below */
.fd-hf s { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; text-decoration: none }
.fd-lf s { background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3)) }
.fd-lb s { background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .25)) }
.fd-sl u { position: absolute; left: 0; right: 0; top: 50%; height: 50%; display: block; opacity: 0; text-decoration: none; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 75%) }
.fd-lf, .fd-lb, .fd-sl u { visibility: hidden }

/* the flip: leaves turn on the compositor; two identical keyframe sets (a/b) restart without a reflow */
.fd-sl.fa .fd-lf, .fd-sl.fb .fd-lf, .fd-sl.za .fd-lf, .fd-sl.zb .fd-lf, .fd-sl.za .fd-lb, .fd-sl.zb .fd-lb,
.fd-sl.fa u, .fd-sl.fb u, .fd-sl.za u, .fd-sl.zb u { visibility: visible }
.fd-sl.fa .fd-lf { animation: fdf-a var(--fd) linear both } .fd-sl.fb .fd-lf { animation: fdf-b var(--fd) linear both }
.fd-sl.fa .fd-lf s { animation: fdfs-a var(--fd) linear both } .fd-sl.fb .fd-lf s { animation: fdfs-b var(--fd) linear both }
.fd-sl.fa u { animation: fdfu-a var(--fd) linear both } .fd-sl.fb u { animation: fdfu-b var(--fd) linear both }
.fd-sl.za .fd-lf { animation: fdz-a var(--zd) linear both } .fd-sl.zb .fd-lf { animation: fdz-b var(--zd) linear both }
.fd-sl.za .fd-lf s { animation: fdzs-a var(--zd) linear both } .fd-sl.zb .fd-lf s { animation: fdzs-b var(--zd) linear both }
.fd-sl.za .fd-lb { animation: fdm-a var(--zd) linear both } .fd-sl.zb .fd-lb { animation: fdm-b var(--zd) linear both }
.fd-sl.za .fd-lb s { animation: fdms-a var(--zd) linear both } .fd-sl.zb .fd-lb s { animation: fdms-b var(--zd) linear both }
.fd-sl.za u { animation: fdzu-a var(--zd) linear both } .fd-sl.zb u { animation: fdzu-b var(--zd) linear both }
/* a flap on its way: the top leaf tips over the hinge and darkens as it turns from the light */
@keyframes fdf-a { 0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.42, 0, .92, .5) } 85%, 100% { transform: rotateX(-90deg) } }
@keyframes fdf-b { 0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.42, 0, .92, .5) } 85%, 100% { transform: rotateX(-90deg) } }
@keyframes fdfs-a { 0% { opacity: 0 } 85%, 100% { opacity: 1 } }
@keyframes fdfs-b { 0% { opacity: 0 } 85%, 100% { opacity: 1 } }
@keyframes fdfu-a { 0% { opacity: 0 } 70% { opacity: .55 } 100% { opacity: .35 } }
@keyframes fdfu-b { 0% { opacity: 0 } 70% { opacity: .55 } 100% { opacity: .35 } }
/* the last flap of a run: falls, lands, and settles with two small bounces */
@keyframes fdz-a { 0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.42, 0, .92, .5) } 22%, 100% { transform: rotateX(-90deg) } }
@keyframes fdz-b { 0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.42, 0, .92, .5) } 22%, 100% { transform: rotateX(-90deg) } }
@keyframes fdzs-a { 0% { opacity: 0 } 22%, 100% { opacity: 1 } }
@keyframes fdzs-b { 0% { opacity: 0 } 22%, 100% { opacity: 1 } }
@keyframes fdm-a { 0%, 22% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.35, .1, .8, .9) } 46% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1) } 60% { transform: rotateX(13deg); animation-timing-function: cubic-bezier(.6, 0, .85, .5) } 74% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1) } 84% { transform: rotateX(4deg); animation-timing-function: cubic-bezier(.6, 0, .85, .5) } 93%, 100% { transform: rotateX(0deg) } }
@keyframes fdm-b { 0%, 22% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.35, .1, .8, .9) } 46% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1) } 60% { transform: rotateX(13deg); animation-timing-function: cubic-bezier(.6, 0, .85, .5) } 74% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1) } 84% { transform: rotateX(4deg); animation-timing-function: cubic-bezier(.6, 0, .85, .5) } 93%, 100% { transform: rotateX(0deg) } }
@keyframes fdms-a { 0%, 22% { opacity: 1 } 46% { opacity: 0 } 60% { opacity: .22 } 74% { opacity: 0 } 84% { opacity: .08 } 93%, 100% { opacity: 0 } }
@keyframes fdms-b { 0%, 22% { opacity: 1 } 46% { opacity: 0 } 60% { opacity: .22 } 74% { opacity: 0 } 84% { opacity: .08 } 93%, 100% { opacity: 0 } }
@keyframes fdzu-a { 0% { opacity: 0 } 20% { opacity: .55 } 40% { opacity: .3 } 50%, 100% { opacity: 0 } }
@keyframes fdzu-b { 0% { opacity: 0 } 20% { opacity: .55 } 40% { opacity: .3 } 50%, 100% { opacity: 0 } }

/* ---------- the result: the cover pasted up as a print, a genre label, three printed buttons ---------- */
.fd-res { position: relative; transition: opacity .2s ease }
.fd-print { position: relative; margin: 0; padding: 0; transform: rotate(-1.4deg) }
.fd .fd-print-face {
  position: relative; display: block; padding: 6%; background: var(--fd-border); cursor: pointer;
  box-shadow: 0 .5px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .12), 0 14px 22px -14px var(--fd-shadow);
}
.fd .fd-print-face img { display: block; width: 100%; height: auto; aspect-ratio: 1; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none }
.fd-print .fd-tape { left: 32%; top: -15px; width: 36%; height: 20px; transform: rotate(-1.6deg) } /* on the white border only, never on the art */
/* a strip of label paper pasted under the print (it stays light at night, as on the poster) */
.fd-label {
  position: relative; display: inline-flex; flex-direction: column; gap: 4px; margin: -8px 0 0 6%; max-width: 94%; padding: 8px 12px 9px;
  background: var(--fd-label); color: #1b1611; transform: rotate(1.4deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 6px 10px -8px rgba(0, 0, 0, .4);
  text-transform: uppercase;
}
.fd-label span { font-weight: 800; font-variation-settings: 'wdth' 82; font-size: 10.5px; letter-spacing: .14em; line-height: 1; color: rgba(27, 22, 17, .6) }
.fd-label b { font-weight: 900; font-variation-settings: 'wdth' 64; font-size: clamp(17px, 4.8cqi, 26px); line-height: .95; color: #a02a07 }
.fd-acts { display: flex; flex-direction: column; gap: 8px; transition: opacity .2s ease }
.fd .fd-acts .fd-btn { width: 100%; min-height: 48px; padding: 0 12px; font-size: 13px; gap: 8px }

/* the cover's place before the first pick (wide slots only): crop marks and a registration mark, nothing pasted yet */
.fd-ph { position: relative; aspect-ratio: 1; margin: 6px }
.fd-crop { position: absolute; inset: 0; display: block; pointer-events: none }
.fd-crop::before, .fd-crop::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--fd-soft) }
.fd-crop-a::before { left: -10px; top: -10px; border-left-width: 2px; border-top-width: 2px }
.fd-crop-a::after { right: -10px; bottom: -10px; border-right-width: 2px; border-bottom-width: 2px }
.fd-crop-b::before { right: -10px; top: -10px; border-right-width: 2px; border-top-width: 2px }
.fd-crop-b::after { left: -10px; bottom: -10px; border-left-width: 2px; border-bottom-width: 2px }
.fd-ph::after { content: ''; position: absolute; inset: 0; border: 2px dashed var(--fd-soft); opacity: .45 }
.fd-reg { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: block }
.fd-reg b { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--fd-ink) }
.fd-reg b::before, .fd-reg b::after { content: ''; position: absolute; background: var(--fd-ink) }
.fd-reg b::before { left: 50%; top: -7px; bottom: -7px; width: 1.5px; margin-left: -.75px }
.fd-reg b::after { top: 50%; left: -7px; right: -7px; height: 1.5px; margin-top: -.75px }
.fd-reg b + b { border-color: var(--fd-spot); transform: translate(2px, -1.5px) }
.fd-reg b + b::before, .fd-reg b + b::after { background: var(--fd-spot) }

/* while the flaps turn, the old result steps back and waits */
.fd.fd-spinning .fd-res, .fd.fd-spinning .fd-acts { opacity: .32; pointer-events: none }
/* when they settle, the new cover is slapped onto the paper and the label follows */
.fd-res.fd-pa .fd-print { animation: fd-paste-a .46s cubic-bezier(.2, .9, .3, 1.2) both }
.fd-res.fd-pb .fd-print { animation: fd-paste-b .46s cubic-bezier(.2, .9, .3, 1.2) both }
.fd-res.fd-pa .fd-label { animation: fd-label-a .4s .12s cubic-bezier(.2, .9, .3, 1.2) both }
.fd-res.fd-pb .fd-label { animation: fd-label-b .4s .12s cubic-bezier(.2, .9, .3, 1.2) both }
@keyframes fd-paste-a { 0% { opacity: 0; transform: translateY(-10px) rotate(-4deg) scale(1.07) } 45% { opacity: 1 } 100% { opacity: 1; transform: rotate(-1.4deg) } }
@keyframes fd-paste-b { 0% { opacity: 0; transform: translateY(-10px) rotate(-4deg) scale(1.07) } 45% { opacity: 1 } 100% { opacity: 1; transform: rotate(-1.4deg) } }
@keyframes fd-label-a { 0% { opacity: 0; transform: translateY(6px) rotate(3deg) } 100% { opacity: 1; transform: rotate(1.4deg) } }
@keyframes fd-label-b { 0% { opacity: 0; transform: translateY(6px) rotate(3deg) } 100% { opacity: 1; transform: rotate(1.4deg) } }

/* ---------- a wider slot: the board on the left, the cover's own column on the right, the buttons under the board ---------- */
@container fd (min-width: 600px) {
  .fd-h { font-size: clamp(54px, 8.4cqi, 100px) }
  .fd .fd-surprise { width: auto; min-width: 240px }
  .fd-body { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 26px 32px }
  .fd-acts { max-width: 320px }
  .fd .fd-acts .fd-btn { min-height: 50px; padding: 0 20px; font-size: 14px }
}
@container fd (min-width: 860px) {
  .fd-body { grid-template-columns: minmax(0, 1fr) clamp(230px, 27%, 300px); grid-template-areas: "board side" "ctrl side"; gap: 26px clamp(32px, 4.4cqi, 60px) }
  .fd[data-state="idle"] .fd-body { grid-template-areas: "board side" "ctrl side" }
  .fd[data-state="idle"] .fd-side { display: block }
  .fd-board { margin: 0 }
  .fd-acts { flex-direction: row; max-width: none }
  .fd .fd-acts .fd-btn { width: auto; min-width: 180px }
}

/* ---------- narrow slots ---------- */
@container fd (max-width: 559px) {
  .fd-in { padding: 22px 16px 24px }
  .fd-strip { font-size: 10.5px; letter-spacing: .1em }
  .fd-board { border-radius: 10px }
  .fd-tape-l, .fd-tape-r { width: 84px; height: 22px; top: 4px }
  .fd-tape-l { left: -18px } .fd-tape-r { right: -18px }
}

/* ---------- reduced motion: the same board, set at once with a calm fade; no slaps ---------- */
@media (prefers-reduced-motion: reduce) {
  .fd-sl .fd-lf, .fd-sl .fd-lb, .fd-sl u, .fd-hf s { animation: none !important; visibility: hidden !important }
  .fd-board, .fd-btn { transition: none }
  .fd-res.fd-pa .fd-print, .fd-res.fd-pb .fd-print, .fd-res.fd-pa .fd-label, .fd-res.fd-pb .fd-label { animation: fd-calm .24s ease-out both }
  @keyframes fd-calm { from { opacity: 0 } to { opacity: 1 } }
}