/* 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: min(100%, 420px);
  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: -6px; width: 210px; height: 210px; 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%, -70px); } 60% { transform: translate(-50%, 0); } 75% { transform: translate(-50%, -18px); } }
@keyframes tilt   { 30% { transform: translateX(-50%) rotate(-24deg); } 70% { transform: translateX(-50%) rotate(24deg); } }
@keyframes vanish { 40% { transform: translate(-50%, 230px); } 60% { transform: translate(-50%, 230px); } }
@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: -50px; transform: translateX(-50%); z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; 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: -50px; } 70% { top: 22px; transform: translateX(-50%) scaleY(1); } 100% { top: 40px; transform: translateX(-50%) scaleY(.05); opacity: 0; } }
.purse { font-size: 15px; color: var(--gold); text-align: right; min-height: 1.2em; letter-spacing: .04em; }
.purse a { color: var(--teal); }

/* 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%; margin-top: -130px; 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: margin-top .8s cubic-bezier(.2, .9, .3, 1.2);
}
.card.out { margin-top: 0; }
.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; }

@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; } }