/* Likely Accident Foundry. One explicit theme, no dark mode switch (Magpie's standing rule). */
:root {
  color-scheme: dark;
  --plum: #1f1224;
  --plum-2: #2e1a35;
  --blush: #f6e3da;
  --foxglove: #d8508f;
  --sage: #8fae8b;
  --gold: #c9a24b;
  --teal: #4fb3a9;
  --ink: #120a15;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; background: var(--plum); color: var(--blush); }
body {
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(ellipse at 50% 0%, #4a2a55 0%, transparent 60%),
    repeating-linear-gradient(90deg, #24152a 0 38px, #1f1224 38px 76px);
}
main { max-width: 560px; margin: 0 auto; padding: 28px 16px 60px; display: grid; gap: 26px; justify-items: center; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the cabinet */
.cabinet {
  width: 420px; position: relative;      /* built at 420 wide; art.js shrinks the whole machine as one piece on narrow screens */
  background: linear-gradient(180deg, #5b2a4a, #3b1c33);
  border: 6px solid var(--gold);
  border-radius: 26px 26px 14px 14px;
  padding: 14px 16px 18px;
  box-shadow: 0 18px 50px #000a, inset 0 0 0 3px #0005;
}
.crown { display: grid; place-items: center; margin: -2px auto 10px; width: 64px; border-radius: 50%; text-decoration: none; }
.crown:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.crown span {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #7c5f1f);
  color: var(--ink); font-size: 38px; font-weight: bold; box-shadow: 0 0 22px #c9a24b88;
}
.window {
  position: relative; height: 300px; overflow: hidden;
  border: 5px solid var(--gold); border-radius: 120px 120px 10px 10px;
  background: radial-gradient(circle at 50% 35%, #2f6f6a, #123532 70%);
}
.curtain { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3;
  background: repeating-linear-gradient(90deg, #8d2353 0 10px, #6c1a40 10px 20px); transition: transform .9s ease; }
.curtain.left { left: 0; border-right: 3px solid var(--gold); }
.curtain.right { right: 0; border-left: 3px solid var(--gold); }
.window.awake .curtain.left { transform: translateX(-70%); }
.window.awake .curtain.right { transform: translateX(70%); }

.cat { position: absolute; left: 50%; bottom: -2%; height: 70%; aspect-ratio: 1; transform: translateX(-50%); transform-origin: 50% 90%; z-index: 2; }
.cat svg, .cat img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fur { fill: #2a2030; stroke: #0b070d; stroke-width: 3; }
.eye { fill: #d9f26b; }
.pupil { fill: #0b070d; transition: rx .2s; }
.nose { fill: var(--foxglove); }
.mouth, .whisk { fill: none; stroke: #e9dfe6; stroke-width: 2.5; stroke-linecap: round; }

/* the silly things the cat does */
.cat.spin    { animation: spin 1s ease-in-out; }
.cat.loaf    { animation: loaf 1.2s ease-in-out; }
.cat.hop     { animation: hop .9s ease-out; }
.cat.tilt    { animation: tilt 1.1s ease-in-out; }
.cat.vanish  { animation: vanish 1.4s ease-in-out; }
.cat.zoom    { animation: zoom 1s ease-in-out; }
.cat.wide .pupil { rx: 12px; }
@keyframes spin   { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes loaf   { 50% { transform: translateX(-50%) scale(1.25, .7); } }
@keyframes hop    { 30% { transform: translate(-50%, -33%); } 60% { transform: translate(-50%, 0); } 75% { transform: translate(-50%, -9%); } }
@keyframes tilt   { 30% { transform: translateX(-50%) rotate(-24deg); } 70% { transform: translateX(-50%) rotate(24deg); } }
@keyframes vanish { 40% { transform: translate(-50%, 110%); } 60% { transform: translate(-50%, 110%); } }
@keyframes zoom   { 50% { transform: translateX(-50%) scale(1.9); } }

.bubble {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%) scale(0); z-index: 4;
  background: var(--blush); color: var(--ink); padding: 6px 12px; border-radius: 14px; font-size: 15px; white-space: nowrap;
  transition: transform .25s ease;
}
.bubble.on { transform: translateX(-50%) scale(1); }

/* coin slot */
.panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.slot {
  position: relative; width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--gold); cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #3a2440, #170d1b); overflow: hidden;
}
.slot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 7px; transform: translate(-50%, -50%); background: #000; border-radius: 4px; box-shadow: inset 0 0 0 1px #6b5a2a; }
.slot:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.coin {
  position: absolute; left: 50%; top: -54%; transform: translateX(-50%); z-index: 2;
  display: grid; place-items: center; width: 48%; height: 48%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9c9d1 60%, #7d7d88); color: #2a2a33; font: bold 13px/1 Georgia, serif;
}
.slot.drop .coin { animation: drop .7s ease-in forwards; }
@keyframes drop { 0% { top: -54%; } 70% { top: 24%; transform: translateX(-50%) scaleY(1); } 100% { top: 43%; transform: translateX(-50%) scaleY(.05); opacity: 0; } }
.purse { flex: 1; font-size: 15px; color: var(--gold); text-align: right; min-height: 1.2em; letter-spacing: .04em; }
.purse a { color: var(--teal); }
.purse { cursor: pointer; }                 /* a quarter can be tossed for a yes or a no */

/* the card that comes out */
.tray { margin-top: 14px; height: 120px; border-radius: 8px; background: #0d070f; box-shadow: inset 0 8px 16px #000; overflow: hidden; display: grid; align-items: start; justify-items: center; }
.card {
  width: 88%; transform: translateY(-115%); padding: 14px 16px; min-height: 96px; display: grid; place-items: center; text-align: center;
  background: var(--blush); color: var(--ink); font-size: 18px; line-height: 1.3; border: 2px solid var(--gold); border-top: 0; border-radius: 0 0 8px 8px;
  transition: transform .8s cubic-bezier(.2, .9, .3, 1.2);
}
.card.out { transform: none; }
.card { position: relative; }
.card:has(.pulled) { padding-right: 58px; }
.pulled { position: absolute; right: 10px; top: 50%; width: 36px; margin-top: -31px; rotate: 7deg; transition: transform .25s ease; filter: drop-shadow(0 3px 4px #0007); }
.pulled.fell svg { transform: rotate(180deg); }
.pulled svg { display: block; width: 100%; height: auto; }
.pulled:hover, .pulled:focus-visible { transform: translateY(-3px) scale(1.12); outline: none; }

/* two doors, no labels you can see */
.doors { display: flex; gap: 34px; }
.door {
  position: relative; display: block; width: 84px; height: 132px; border-radius: 42px 42px 4px 4px; border: 4px solid var(--gold);
  background: linear-gradient(180deg, #2f6f6a, #163f3b); transition: transform .3s ease, box-shadow .3s ease;
}
#door-b { background: linear-gradient(180deg, #8d2353, #4e1230); }
.door:hover, .door:focus-visible { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 28px #c9a24b66; outline: none; }
.knob { position: absolute; right: 12px; top: 58%; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
.who { margin: 0; font-style: italic; color: var(--sage); letter-spacing: .08em; }

/* A WHOLE PICTURE UNDER THE MACHINE (see art.js). Her finished picture is the machine; the working parts lie over it unseen;
   the page adds what a picture cannot do: bulbs that flicker, a ball that glows, a head that stirs, a ticket with real words. */
html.walled, html.walled body { background: var(--wall) !important; }
html.walled body { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--wall), #fff 14%), var(--wall) 55%, color-mix(in srgb, var(--wall), #000 38%) 100%) !important; }
html.walled .who { color: #4a2f22; }
.cabinet.under { border: 0; border-radius: 0; box-shadow: none; padding: 0; background-color: transparent; filter: drop-shadow(0 22px 26px #000a); }   /* the picture is cut from its wall, so the room is the page's */
.cabinet.under .curtain, .cabinet.under #cat { display: none; }
.cabinet.under .window { background: none; border: 0; border-radius: 0; overflow: visible; pointer-events: none; }
.cabinet.under .bubble { top: 1%; font-size: 17px; box-shadow: 0 4px 10px #0008; }
/* the speaker grille is the way to the back room, so something of the back room shows through it: a lamp lit somewhere
   behind the mesh, and the shadow of a gear going round in front of the lamp. Quicker and brighter when touched or when broke. */
.cabinet.under .crown span { position: relative; background: none; box-shadow: none; color: transparent; border-radius: 50%; overflow: hidden; }
.cabinet.under .crown span::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; mix-blend-mode: screen; opacity: .5; transition: opacity .5s ease;
  background: radial-gradient(circle at 46% 52%, #ffd27a 0, #ff9a3c99 34%, #7a2a0a33 62%, transparent 74%); animation: lamp 3.1s ease-in-out infinite alternate; }
.cabinet.under .crown span::after { content: ""; position: absolute; left: -18%; top: 4%; width: 92%; aspect-ratio: 1; mix-blend-mode: multiply; opacity: .34;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cmask%20id=%22m%22%3E%3Crect%20width=%22100%22%20height=%22100%22%20fill=%22black%22/%3E%3Cpolygon%20points=%2288.0,50.0%2095.7,55.2%2094.8,60.2%2085.9,62.6%2084.2,66.5%2088.9,74.5%2086.0,78.7%2076.9,76.9%2073.7,79.7%2074.5,88.9%2070.0,91.4%2062.6,85.9%2058.5,87.0%2055.2,95.7%2050.0,96.0%2045.7,87.8%2041.5,87.0%2034.8,93.4%2030.0,91.4%2029.8,82.2%2026.3,79.7%2017.5,82.5%2014.0,78.7%2017.8,70.2%2015.8,66.5%206.6,65.2%205.2,60.2%2012.2,54.3%2012.0,50.0%204.3,44.8%205.2,39.8%2014.1,37.4%2015.8,33.5%2011.1,25.5%2014.0,21.3%2023.1,23.1%2026.3,20.3%2025.5,11.1%2030.0,8.6%2037.4,14.1%2041.5,13.0%2044.8,4.3%2050.0,4.0%2054.3,12.2%2058.5,13.0%2065.2,6.6%2070.0,8.6%2070.2,17.8%2073.7,20.3%2082.5,17.5%2086.0,21.3%2082.2,29.8%2084.2,33.5%2093.4,34.8%2094.8,39.8%2087.8,45.7%22%20fill=%22white%22/%3E%3Cg%20fill=%22black%22%3E%3Ccircle%20cx=%2272.0%22%20cy=%2250.0%22%20r=%227.5%22%20fill=%22black%22/%3E%3Ccircle%20cx=%2256.8%22%20cy=%2270.9%22%20r=%227.5%22%20fill=%22black%22/%3E%3Ccircle%20cx=%2232.2%22%20cy=%2262.9%22%20r=%227.5%22%20fill=%22black%22/%3E%3Ccircle%20cx=%2232.2%22%20cy=%2237.1%22%20r=%227.5%22%20fill=%22black%22/%3E%3Ccircle%20cx=%2256.8%22%20cy=%2229.1%22%20r=%227.5%22%20fill=%22black%22/%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%226%22/%3E%3C/g%3E%3C/mask%3E%3Crect%20width=%22100%22%20height=%22100%22%20fill=%22black%22%20mask=%22url(%23m)%22/%3E%3C/svg%3E") center / contain no-repeat; filter: blur(1.2px); animation: round 14s linear infinite; }
.cabinet.under .crown:hover span::before, .cabinet.under .crown:focus-visible span::before, .cabinet.under .crown.beckon span::before { opacity: 1; }
.cabinet.under .crown:hover span::after, .cabinet.under .crown:focus-visible span::after, .cabinet.under .crown.beckon span::after { animation-duration: 3.5s; }
.cabinet.under .crown:focus-visible span { box-shadow: 0 0 0 3px var(--teal); }
/* a small brass plate under the grille says what is through there (her words, 2026-09-19). Brighter when broke or touched. */
.cabinet.under .crown::after { content: "dance for quarters"; position: absolute; left: 50%; top: 96%; translate: -50% 0; white-space: nowrap; padding: 2px 7px 3px; border-radius: 2px; pointer-events: none;
  font: bold 8.5px/1 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #2a1a02; text-shadow: 0 1px 0 #ffe9a888;
  background: linear-gradient(180deg, #f7dc86, #c9a24b 45%, #7a5a17); box-shadow: 0 0 0 1px #3d2a08, 0 2px 4px #000a; opacity: .82; transition: opacity .4s ease, box-shadow .4s ease; }
.cabinet.under .crown:hover::after, .cabinet.under .crown:focus-visible::after, .cabinet.under .crown.beckon::after { opacity: 1; box-shadow: 0 0 0 1px #3d2a08, 0 0 14px #ffd977; }
.cabinet.under .crown { overflow: visible; }
@keyframes lamp { 0% { filter: brightness(.8); } 100% { filter: brightness(1.25); } }
@keyframes round { to { transform: rotate(360deg); } }
.cabinet.under .slot { background: none; border: 0; border-radius: 50%; overflow: visible; }
.cabinet.under .slot::after { display: none; }
.cabinet.under .slot:hover, .cabinet.under .slot:focus-visible { box-shadow: 0 0 22px 4px #ffd97788; outline: none; }
.cabinet.under .coin { top: -120%; opacity: 0; }
.cabinet.under .slot.drop .coin { animation: drop-in .7s ease-in forwards; }
@keyframes drop-in { 0% { top: -120%; opacity: 1; } 75% { top: 18%; transform: translateX(-50%) scale(1); opacity: 1; } 100% { top: 26%; transform: translateX(-50%) scale(.2, .9); opacity: 0; } }
.cabinet.under .purse { text-align: center; font-size: 12px; color: #ffd977; text-shadow: 0 1px 3px #000; letter-spacing: .02em; }
.cabinet.under .purse a { color: #ffe9a8; }
.cabinet.under .tray { background: none; box-shadow: none; border-radius: 0; overflow: hidden; height: auto; justify-items: stretch; }
/* the ticket: long, like a real one. At rest only its tail hangs out (over the ticket that is part of the picture). */
.cabinet.under .tray .card { width: 100%; min-height: 0; height: auto; align-self: start; gap: 7px; padding: 10px 9px 34px; border: 0; border-radius: 0 0 3px 3px; font: 12.5px/1.3 Georgia, serif; color: #2a1a10; align-content: start;
  background: linear-gradient(90deg, #0002, transparent 12%, transparent 88%, #0003), repeating-linear-gradient(180deg, #0000 0 21px, #6b4a2a18 21px 22px), linear-gradient(180deg, #e9d2a6, #f3e2bd 30%, #e2c793);
  box-shadow: 0 8px 14px #0009; transform: translateY(-101%); transition: transform 1.1s cubic-bezier(.3, .8, .4, 1); }
.cabinet.under .card::after { content: "\2605  \263E  \2605"; position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 11px; color: #6b4a2a; letter-spacing: .2em; }
.cabinet.under .card.out { transform: translateY(0) perspective(420px) rotateX(-9deg) rotate(1.4deg); transform-origin: 50% 0; border-radius: 0 0 46% 46% / 0 0 5% 5%; }
.cabinet.under .tray .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;     /* the curl: light across the belly of the paper, shade where it rolls under */
  background: linear-gradient(180deg, #0003 0, transparent 7%, #fff5 38%, transparent 58%, #0000 80%, #3a240f55 100%), radial-gradient(ellipse 120% 30% at 50% 103%, #2a180a66, transparent 70%); mix-blend-mode: multiply; }
.cabinet.under .tray { overflow: visible; clip-path: inset(0 -30% -10% -30%); }
.cabinet.under .card.gone { transform: translateY(-104%); transition-duration: .5s; }
.cabinet.under .card:has(.pulled) { padding-right: 9px; }
.cabinet.under .card .drawn { display: block; font: bold 10px/1.2 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #6b2a3a; border-bottom: 1px solid #6b4a2a66; padding-bottom: 5px; }
.cabinet.under .pulled { position: static; display: block; width: 44%; margin: 8px auto 0; rotate: 4deg; }
/* her head: the same picture again, seen through a soft hole, turning a little about her neck */
.head, .ball, .show { display: none; }
.cabinet.under .show.wears { display: block; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .25s ease; }
.cabinet.under[data-acting] .show.wears { opacity: 1; }
.cabinet.under[data-acting] .head, .cabinet.under[data-acting] .ball { opacity: 0; transition: opacity .25s ease; }
.cabinet.under .head { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--scene-full, var(--scene)) 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(ellipse var(--head-w) var(--head-h) at var(--head-x) var(--head-y), #000 80%, transparent 100%); mask-image: radial-gradient(ellipse var(--head-w) var(--head-h) at var(--head-x) var(--head-y), #000 80%, transparent 100%);
  transform-origin: var(--neck-x) var(--neck-y); animation: idle 7s ease-in-out infinite; }
@keyframes idle { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(1.6deg); } 70% { transform: rotate(-1.2deg); } }
.cabinet.under[data-move="tilt"] .head, .cabinet.under[data-move="spin"] .head { animation: look 1.3s ease-in-out; }
.cabinet.under[data-move="hop"] .head, .cabinet.under[data-move="zoom"] .head { animation: start 1s ease-out; }
.cabinet.under[data-move="loaf"] .head, .cabinet.under[data-move="vanish"] .head { animation: nod 1.3s ease-in-out; }
@keyframes look { 25% { transform: rotate(-9deg); } 65% { transform: rotate(8deg); } }
@keyframes start { 20% { transform: translateY(-1.6%) scale(1.04); } 45% { transform: translateY(0); } 60% { transform: translateY(-.4%); } }
@keyframes nod { 35% { transform: translateY(1.2%) rotate(4deg); } 70% { transform: translateY(.3%) rotate(-3deg); } }
/* the light inside the ball */
.cabinet.under .ball { display: block; position: absolute; left: var(--ball-x); top: var(--ball-y); width: var(--ball-w); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 3;
  mix-blend-mode: screen; overflow: hidden; opacity: .28; transition: opacity .6s ease; }
.cabinet.under .ball i { position: absolute; inset: -30%; border-radius: 50%; filter: blur(5px);
  background: conic-gradient(from 0deg, #ff7ad900, #ff9ae6 12%, #7a3cff00 30%, #b8a0ff 46%, #ff7ad900 62%, #fff0fa 74%, #ff7ad900 90%); animation: swirl 9s linear infinite; }
.cabinet.under .ball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6 0, transparent 35%), radial-gradient(circle, transparent 45%, #2a0a3a 100%); mix-blend-mode: normal; }
.cabinet.under[data-move]:not([data-move=""]) .ball { opacity: 1; } .cabinet.under[data-move]:not([data-move=""]) .ball i { animation-duration: 1.6s; }
.cabinet.under[data-move]:not([data-move=""]) .light { animation-duration: .35s !important; }
.cabinet.under[data-acting] .light { animation-duration: .35s !important; }
@keyframes swirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cabinet.under .head, .cabinet.under .ball i, .cabinet.under .crown span::before, .cabinet.under .crown span::after { animation: none !important; } }

/* THE TICKET, TORN OFF. Touch the ticket and it tears away and comes up close, big enough to read; the little tarot card on it
   is still the way to the table. Touch anywhere else, or press Escape, and it goes back. */
.cabinet.under .tray .card.out { cursor: zoom-in; }
.torn-veil { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: #0d0710cc; opacity: 0; transition: opacity .35s ease; overflow: auto; }
.torn-veil.up { opacity: 1; }
.torn { position: relative; width: min(340px, 92vw); padding: 30px 26px 46px; color: #2a1a10; text-align: center; font: 21px/1.4 Georgia, serif; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(90deg, #0002, transparent 10%, transparent 90%, #0003), repeating-linear-gradient(180deg, #0000 0 33px, #6b4a2a18 33px 34px), linear-gradient(180deg, #e9d2a6, #f3e2bd 30%, #e2c793);
  box-shadow: 0 24px 50px #000c; transform: translateY(40vh) scale(.3) rotate(-8deg); transition: transform .55s cubic-bezier(.2, 1.1, .4, 1);
  clip-path: polygon(0 9px, 4% 2px, 9% 10px, 15% 3px, 21% 9px, 28% 1px, 34% 8px, 41% 3px, 47% 10px, 54% 2px, 60% 9px, 67% 3px, 73% 10px, 80% 2px, 86% 8px, 93% 2px, 100% 9px, 100% 100%, 0 100%); }
.torn-veil.up .torn { transform: rotate(-1.5deg); }
.torn .drawn { font: bold 14px/1.2 Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #6b2a3a; border-bottom: 1px solid #6b4a2a66; padding-bottom: 8px; width: 100%; }
.torn .pulled { position: static; display: block; width: 92px; margin: 6px 0 0; rotate: 3deg; }
.torn::after { content: "\2605  \263E  \2605"; position: absolute; left: 0; right: 0; bottom: 14px; font-size: 14px; color: #6b4a2a; letter-spacing: .2em; }
@media (prefers-reduced-motion: reduce) { .torn, .torn-veil { transition: none; } }

/* what changes when the machine takes its proportions and placements from her map (see REMAPPING in art.js) */
.cabinet.mapped { padding: 0; }
.cabinet.mapped .panel { display: contents; }
.cabinet.mapped .crown, .cabinet.mapped .tray, .cabinet.mapped .panel { margin: 0; }
.cabinet.mapped .crown span { width: 100%; height: 100%; font-size: min(38px, 9cqw); }
.cabinet.mapped .window { border: 0; border-radius: 0; }
.cabinet.mapped .slot { z-index: 6; }
.cabinet.mapped .purse { z-index: 6; display: grid; align-content: center; }
.cabinet.mapped .card { min-height: 80%; }

/* what changes when a piece wears her picture (see art.js) */
.cabinet.wears-over .crown, .cabinet.wears-over .panel, .cabinet.wears-over .tray { position: relative; z-index: 6; }
.cabinet.wears-over .window { border-color: transparent; }
.crown span.wears, .coin.wears { color: transparent; }
.slot.wears::after { display: none; }
.door.wears { border-radius: 0; }
.door.wears .knob { display: none; }
.card.wears { border: 0; }

@media (prefers-reduced-motion: reduce) { .cat, .card, .curtain, .coin { animation: none !important; transition: none !important; } }

/* broke: the question mark fidgets */
.crown.beckon span:first-child { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 0%, 60%, 100% { transform: rotate(0); box-shadow: 0 0 22px #c9a24b88; } 70% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); box-shadow: 0 0 40px #ffe9a8; } 90% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .crown.beckon span:first-child { animation: none; box-shadow: 0 0 40px #ffe9a8; } }