/* The recipe cards: a hand of them, each a painted picture in layers inside a frame, that tilts
   under the pointer or the phone and turns over to deal. recipe-cards.js moves them; this is how
   they look. Every moving part reads custom properties the script sets:

     on a card    --x --y --r --s --z --b   where it sits in the hand, set per card
     on a card    --tx --ty                 how far it is tilted, -1 to 1, the active card only
     on a card    --gx --gy                 where the light catches it
     on a card    --foot                    where its character stands, down its picture, 0 to 1:
                                            the page sets this one, from the painting

   A card is --w wide, and everything on it is measured in --u, a 282nd of that: a pixel, on a
   card at its fullest. A smaller card is the same card, smaller, not a crowded one.

   Their colours are the card tokens in tokens.css, the same in both themes, since a card is a painted
   thing; everything round them is the site's own. What drifts in a picture is part of its
   painting, and keeps its own colours. */

.recipes { margin: 0 0 2.2rem; }
.recipes .dealt { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: var(--good-tint); color: var(--ink); }
.recipes-head { display: grid; gap: .2rem; margin-bottom: .4rem; }
.rh-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.rh-sub { color: var(--ink-3); max-width: 68ch; }
/* Folded: the card in use, small and still, beside the line, and the whole of it one press that
   brings the hand out. Open, the hand is under it and the press folds it away again. */
.recipes-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; margin: 0;
  padding: .75rem 1rem .75rem .75rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface);
  transition: border-color .12s, background .12s; }
.recipes-fold > summary::-webkit-details-marker { display: none; }
.recipes-fold > summary:hover { border-color: var(--accent); }
.recipes-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rh-thumb { flex: none; width: 64px; aspect-ratio: 5 / 7; padding: 4px; border-radius: 9px; background: linear-gradient(160deg, var(--card-recipe), var(--card-recipe-deep));
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.55); }
.rh-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--card-night); }
.rh-text { display: grid; gap: .2rem; min-width: 0; }
.rh-open { justify-self: start; margin-top: .2rem; font-size: .85rem; font-weight: 700; color: var(--accent-ink); }
.rh-open::after { content: " ▾"; }
.recipes-fold[open] .rh-open { font-size: 0; }
.recipes-fold[open] .rh-open::before { content: attr(data-fold); font-size: .85rem; }
.recipes-fold[open] .rh-open::after { content: " ▴"; font-size: .85rem; }
.recipes-fold[open] > summary { margin-bottom: .4rem; }
.hand-hint { text-align: center; color: var(--ink-3); font-size: .85rem; margin: .2rem 0 0; }
/* In the guided setup, the way past the cards for a parent who wants to answer for themselves. */
.own-way { text-align: center; margin: .8rem 0 .3rem; }
.own-way a { font-weight: 700; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 420px) { .own-way .long { display: none; } }

/* ---- the hand ---- */
.hand { --w: min(282px, 72vw); --u: calc(var(--w) / 282); position: relative; height: calc(var(--w) * 1.4 + 64 * var(--u)); margin: .6rem auto 0; perspective: 1500px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; overflow: hidden; }
.hand:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius-lg); }
/* Given a box of its own to fill, as the guided setup's first step is, the hand is sized to its
   height as well as its width, leaving room under it for the arrows, the way to build your own
   and the hint. A hand is 1.627 of its card's width tall: the card and the fan round it. */
@container hand-room (min-width: 0) {
  .hand { --w: max(170px, min(282px, 76cqw, calc((100cqh - 132px) / 1.627))); margin-top: 0; }
}
.rc { position: absolute; left: 50%; top: calc(26 * var(--u)); width: var(--w); aspect-ratio: 5 / 7; margin-left: calc(var(--w) / -2);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); z-index: var(--z, 1);
  transition: transform .55s cubic-bezier(.2, .85, .25, 1), opacity .45s;
  cursor: pointer; -webkit-tap-highlight-color: transparent; perspective: 1100px; }
/* The cards behind are in shadow: a veil over each face, not a filter over the card, since a
   filter over a card that turns in 3D has it drawn again, whole, every frame it moves. */
.rc-face::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: var(--card-night); opacity: calc((1 - var(--b, 1)) * 1.1); transition: opacity .45s; }
.rc.is-active { cursor: grab; }
.rc.gone { opacity: 0; pointer-events: none; }
.hand.dealing .rc { transform: translate3d(0, 130%, 0) rotate(8deg) scale(.8); opacity: 0; }
.rc-tilt, .rc-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.rc-tilt { transform: rotateY(calc(var(--tx, 0) * 17deg)) rotateX(calc(var(--ty, 0) * -15deg)); }
/* The card in front is turned frame by frame by the script; one that has just stopped being it
   settles back level, rather than snapping there. */
.rc:not(.is-active) :is(.rc-tilt, .rc-far, .rc-fx) { transition: transform .45s cubic-bezier(.2, .85, .25, 1); }
.rc-flip { transition: transform .75s cubic-bezier(.3, 1.3, .4, 1); }
.rc.is-flipped .rc-flip { transform: rotateY(180deg); }
.rc-face { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .75), 0 2px 0 rgba(255, 255, 255, .06) inset; }
/* The back a hair behind the front, not in the same plane: two faces in one plane flicker
   between each other as the card turns, whichever the browser happens to draw last. */
.rc-back { transform: rotateY(180deg) translateZ(1px); }

/* Every colour on a card is mixed from the card tokens in tokens.css, through its metal: one for a
   recipe, one for a tweak, one for the card that is yours, each a palette colour. Change the palette
   and every card follows. */
.rc { --metal: var(--card-recipe); --metal-deep: var(--card-recipe-deep); --night: var(--card-night); }
.rc-tweak { --metal: var(--card-tweak); --metal-deep: var(--card-tweak-deep); }
.rc-custom { --metal: var(--card-own); --metal-deep: var(--card-own-deep); }
.rc-face, .rc-badge, .rc-ribbon, .rc-stats, .rc-deal, .rc-back-body {
  --metal-light: color-mix(in srgb, var(--metal) 45%, white); --glow: color-mix(in srgb, var(--metal) 45%, transparent); }

/* The frame is the face itself, showing round the picture: the metal, polished. */
.rc-face { background: linear-gradient(150deg, var(--metal-light) 0%, color-mix(in srgb, var(--metal) 70%, var(--metal-deep)) 16%, var(--metal-deep) 33%,
  var(--metal) 52%, color-mix(in srgb, var(--metal) 40%, var(--metal-deep)) 72%, var(--metal-light) 100%); }
.rc-custom .rc-face { background: conic-gradient(from 210deg at 50% 50%, color-mix(in srgb, var(--card-own) 60%, white), color-mix(in srgb, var(--card-tweak) 60%, white),
  color-mix(in srgb, var(--card-good) 45%, white), color-mix(in srgb, var(--card-recipe) 60%, white), color-mix(in srgb, var(--card-own) 60%, white)); }

.rc-art { position: absolute; inset: calc(8 * var(--u)); border-radius: var(--radius); overflow: hidden; background: var(--night); isolation: isolate; }
.rc-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--card-ink) 55%, transparent), inset 0 0 0 4px rgba(0, 0, 0, .35),
  inset 0 -80px 60px -30px color-mix(in srgb, var(--night) 85%, transparent), inset 0 30px 40px -30px color-mix(in srgb, var(--night) 60%, transparent); }

/* The picture is behind the card, seen through it as through a window. The character stands in
   the window itself and stays put; the scene behind shifts as the card turns, the way a room
   seen through a window does as you walk past, so nothing ever comes out of the card.

   The scene pivots about the line the character stands on, --foot, rather than sliding whole:
   the ground under the character stays under it, and what is further up the picture, which is
   further away, moves the most — a skew for turning left and right, a stretch for tipping up and
   down. At full tilt the top of the scene has moved 3% of its height. The layers are larger than
   the window, so none of that shows an edge. What drifts in the scene moves with it. */
.rc-l { position: absolute; left: -7%; top: -7%; width: 114%; height: 114%; object-fit: cover; pointer-events: none; }
.rc-far, .rc-fx { transform-origin: 50% calc(var(--foot, .85) * 100%); will-change: transform;
  transform: skewX(calc(var(--tx, 0) * 1.72deg / var(--foot, .85))) scaleY(calc(1 + var(--ty, 0) * .03 / var(--foot, .85))); }
.rc-fx { z-index: 1; overflow: hidden; }
.rc-subject { z-index: 2; }

.rc-glare { position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; z-index: 6; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 18%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 48%);
  opacity: .55; transition: opacity .4s; }
.rc:not(.is-active) .rc-glare { opacity: .15; }
/* Foil, on the tweaks and on yours: a band of the other metals that runs across as the card turns. */
.rc-tweak .rc-glare, .rc-custom .rc-glare { background:
  radial-gradient(circle at var(--gx, 50%) var(--gy, 18%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%),
  linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--card-tweak) 40%, transparent) calc(var(--gx, 50%) - 10%),
    color-mix(in srgb, var(--card-own) 40%, transparent) var(--gx, 50%), color-mix(in srgb, var(--card-recipe) 35%, transparent) calc(var(--gx, 50%) + 10%), transparent 75%);
  mix-blend-mode: overlay; opacity: .8; }

/* ---- the words on the front ---- */
.rc-badge { position: absolute; top: calc(14 * var(--u)); z-index: 7; width: calc(54 * var(--u)); height: calc(54 * var(--u)); display: grid; place-content: center; text-align: center;
  color: var(--card-ink); line-height: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--metal-deep) 40%, var(--night)), var(--night) 70%);
  box-shadow: 0 0 0 2.5px var(--metal), 0 0 0 4px var(--metal-deep), 0 6px 14px rgba(0, 0, 0, .6); }
.rc-badge b { font: 700 calc(16.8 * var(--u))/1 var(--font-display, serif); letter-spacing: -.02em; }
.rc-badge small { font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: calc(3 * var(--u)); }
.rc-age { left: calc(14 * var(--u)); }
.rc-corner { border-radius: var(--radius); transform: rotate(45deg); width: calc(46 * var(--u)); height: calc(46 * var(--u)); top: calc(18 * var(--u)); right: calc(18 * var(--u)); }
.rc-corner > * { transform: rotate(-45deg); }
.rc-corner b { font-size: calc(18.4 * var(--u)); }

.rc-ribbon { position: absolute; z-index: 8; top: calc(78 * var(--u)); left: 50%; transform: translateX(-50%); padding: calc(3.5 * var(--u)) calc(12 * var(--u)); border-radius: var(--radius-pill);
  font-size: calc(9.9 * var(--u)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--night); white-space: nowrap;
  background: linear-gradient(180deg, var(--metal-light), var(--metal)); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.rc-ribbon.rc-suggest { top: calc(22 * var(--u)); background: linear-gradient(180deg, color-mix(in srgb, var(--card-good) 45%, white), var(--card-good)); }

/* The words stand on a shadow that rises from the foot of the picture, not on a box over it:
   the character is most of what a card is, and is usually standing down there. */
.rc-shade { position: absolute; inset: calc(8 * var(--u)); border-radius: var(--radius); z-index: 6; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 95%, transparent) 0, color-mix(in srgb, var(--night) 78%, transparent) 17%,
    color-mix(in srgb, var(--night) 25%, transparent) 31%, transparent 40%); }
.rc-plate { position: absolute; z-index: 7; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(46 * var(--u)); text-align: center; color: var(--card-ink); }
.rc-plate h3 { margin: 0; font: 600 calc(21.4 * var(--u))/1.1 var(--font-display, serif); letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.rc-plate p { margin: calc(4 * var(--u)) 0 0; font-size: calc(11.2 * var(--u)); line-height: 1.32; color: var(--card-ink-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.rc-plate h3::after { content: ""; display: block; width: calc(46 * var(--u)); height: calc(2 * var(--u)); margin: calc(5 * var(--u)) auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--metal), transparent); }
.rc-kind { display: inline-block; margin-bottom: calc(3 * var(--u)); font-size: calc(8.8 * var(--u)); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--metal); }

.rc-stats { position: absolute; z-index: 7; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(13 * var(--u)); display: flex; justify-content: center; gap: calc(5 * var(--u)); margin: 0; padding: 0;
  list-style: none; }
.rc-stats li { display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); padding: calc(3.5 * var(--u)) calc(6.7 * var(--u)); border-radius: var(--radius-pill); font-size: calc(9.9 * var(--u)); font-weight: 800;
  color: var(--card-ink); background: color-mix(in srgb, var(--night) 80%, transparent); box-shadow: inset 0 0 0 1px var(--glow); white-space: nowrap; }
.rc-i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--metal); flex: none; }

/* ---- the back ---- */
.rc-back-in { position: absolute; inset: calc(8 * var(--u)); border-radius: var(--radius); padding: calc(14.4 * var(--u)) calc(14.4 * var(--u)) calc(11.2 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u));
  color: var(--card-ink); overflow: hidden; background:
  radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--metal) 16%, transparent), transparent 55%),
  radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--card-good) 14%, transparent), transparent 50%),
  color-mix(in srgb, var(--metal-deep) 12%, var(--night));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--card-ink) 45%, transparent); }
.rc-back h3 { margin: 0; font: 600 calc(20 * var(--u))/1.1 var(--font-display, serif); }
.rc-ages { margin: 0; font-size: calc(11.2 * var(--u)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--metal); }
/* What it sets scrolls, if it has to; the button that deals it never does. */
.rc-back-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: calc(5.6 * var(--u)); padding-right: calc(3 * var(--u));
  scrollbar-width: thin; scrollbar-color: var(--glow) transparent; mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.rc-rules { margin: calc(1.6 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(4.8 * var(--u)); font-size: calc(11.2 * var(--u)); line-height: 1.32; color: var(--card-ink-2); }
.rc-rules li { padding-left: calc(14.4 * var(--u)); position: relative; }
.rc-rules li::before { content: ""; position: absolute; left: 0; top: .45em; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--metal); }
.rc-keeps { margin: 0; font-size: calc(11.2 * var(--u)); color: var(--card-ink-3); }
.rc-back form { margin: 0; }
.rc-deal { display: block; text-align: center; text-decoration: none; width: 100%; padding: calc(10.4 * var(--u)) calc(12.8 * var(--u)); border: 0; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-weight: 800; font-size: calc(14.4 * var(--u));
  color: var(--night); background: linear-gradient(180deg, var(--metal-light), color-mix(in srgb, var(--metal) 80%, var(--metal-deep)));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rc-deal:hover { filter: brightness(1.06); }
.rc-turn { align-self: center; border: 0; background: none; color: var(--card-ink-3); font: inherit; font-size: calc(12 * var(--u)); cursor: pointer; padding: calc(3 * var(--u)); }
.rc-turn:hover { color: var(--card-ink); }

/* ---- the hand's own controls ---- */
.hand-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .3rem; }
.hand-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.3rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hand-nav button:hover { border-color: var(--accent); }
.hn-dots { display: flex; gap: .35rem; }
.hn-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width .3s, background .3s; }
.hn-dots i.on { width: 20px; border-radius: 4px; background: var(--accent); }

/* ---- what drifts in the picture, behind its character ---- */
.p { position: absolute; left: var(--px); top: var(--py); width: var(--ps); height: var(--ps); border-radius: 50%; pointer-events: none;
  animation: var(--pa) var(--pt) var(--pdl) infinite ease-in-out; animation-play-state: paused; opacity: 0; }
.rc.is-active .p { animation-play-state: running; }
.p-stars { background: #fffbe6; box-shadow: 0 0 6px 1px rgba(255, 250, 220, .9); --pa: twinkle; }
.p-fireflies { background: #ffe38a; box-shadow: 0 0 10px 3px rgba(255, 214, 102, .8); --pa: firefly; }
.p-motes { background: #ffe9b8; box-shadow: 0 0 5px rgba(255, 233, 184, .7); --pa: drift; }
.p-seeds { background: radial-gradient(circle, #fff 20%, rgba(255, 255, 255, .15) 60%, transparent 70%); --pa: rise; }
.p-sparkles { background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); --pa: twinkle; }
.p-sparks { background: #ffb45c; box-shadow: 0 0 8px 2px rgba(255, 150, 60, .8); --pa: spark; }
.p-leaves { border-radius: 0 70% 0 70%; background: var(--pc, #e0772f); --pa: fall; }
.p-rain { width: 1.5px; height: calc(var(--ps) * 5); border-radius: 1px; background: linear-gradient(transparent, rgba(200, 225, 255, .7)); --pa: rain; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes firefly { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 50% { transform: translate(14px, -18px); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(-6px, -34px); } }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 0); } 30%, 70% { opacity: .8; } 100% { opacity: 0; transform: translate(22px, -26px); } }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 30px); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(18px, -120px); } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -70px) scale(.4); } }
@keyframes fall { 0% { opacity: 0; transform: translate(0, -40px) rotate(0); } 15% { opacity: 1; } 50% { transform: translate(18px, 110px) rotate(160deg); } 100% { opacity: 0; transform: translate(-8px, 260px) rotate(330deg); } }
@keyframes rain { 0% { opacity: 0; transform: translate(0, -60px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, 300px); } }

@media (prefers-reduced-motion: reduce) {
  .rc, .rc-flip { transition-duration: .01s; }
  .p { animation: none; opacity: .6; }
}