:root {
  --red: #8f1428; --red-deep: #5c0c1b; --gold: #ffd56b; --gold-edge: #d9a93a; --cream: #fff3d1;
}
html { background: var(--red-deep); }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { margin: 0; min-height: 100vh; font-family: Georgia, "Times New Roman", serif; color: #ffeec7;
  background: radial-gradient(circle at 20% 0%, #a3182f, var(--red-deep) 75%) fixed; }
.bg { position: fixed; inset: 0; pointer-events: none; background:
    radial-gradient(#ffd56b55 1.5px, transparent 2px) 0 0 / 34px 34px,
    radial-gradient(#ffffff33 1px, transparent 2px) 17px 17px / 34px 34px; }
main { position: relative; max-width: 860px; margin: 0 auto; padding: 28px 16px 48px; text-align: center; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); color: var(--gold); letter-spacing: .04em; text-shadow: 0 2px 0 #4b0814; }
.sub { margin: 6px 0 14px; font-size: 1.1rem; }
.progress { display: inline-block; margin-bottom: 18px; padding: 4px 14px; border-radius: 99px; background: #0003; border: 1px solid #ffd56b66; font-size: .95rem; }
.testmode { display: inline-block; margin: 8px 0 0; padding: 4px 14px; border-radius: 99px; background: #ffd56b; color: var(--red-deep); font-weight: bold; font-size: .9rem; }
.banner { max-width: 420px; margin: 24px auto; padding: 16px 20px; border-radius: 12px; background: var(--cream); color: var(--red-deep); border: 3px solid var(--gold-edge); font-size: 1.1rem; }

.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 16px; }
.cell { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: calc(50% - 8px); max-width: 170px; text-align: center; }
@media (min-width: 600px) { .cell { width: calc(25% - 16px); } }
.cell:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 8px; }
.cell span { display: block; }
.door { position: relative; aspect-ratio: 3 / 4; perspective: 700px; }
.cell .inside { position: absolute; inset: 0; border-radius: 8px; border: 3px solid var(--gold-edge); background: #3a0a14; display: flex; align-items: center; justify-content: center; transition: background .5s; }
.star { font-size: 2.4rem; opacity: 0; transition: opacity .4s .3s; }
.cell .pane { position: absolute; inset: 0; border-radius: 8px; border: 3px solid var(--gold-edge); transform-origin: left center; transition: transform .8s cubic-bezier(.3, .7, .3, 1);
  display: flex; align-items: center; justify-content: center; font-size: 3.4rem; font-weight: bold; color: var(--gold); text-shadow: 0 2px 0 #0006;
  box-shadow: inset 0 0 0 5px #ffffff14, 0 4px 10px #0006; backface-visibility: hidden; }
.cell .pane::after { content: ""; position: absolute; right: 12%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 1px 2px #0008; }
.cell:nth-child(3n+1) .pane { background: linear-gradient(145deg, #1f7a4d, #145535); }
.cell:nth-child(3n+2) .pane { background: linear-gradient(145deg, #d63a50, #a1182c); }
.cell:nth-child(3n)   .pane { background: linear-gradient(145deg, #2b6cb8, #1b4a85); }
.cell:not(.open):hover .pane { transform: rotateY(-14deg); }
.cell.open .pane { transform: rotateY(-115deg); }
.cell.open .inside { background: radial-gradient(circle at 50% 45%, #fff3b0, #ffb43a 75%); }
.cell.open .star { opacity: 1; }
.label { margin-top: 8px; font-size: 1.2rem; font-weight: bold; }
.status { font-size: .85rem; opacity: .75; }
.cell.open .label { color: var(--gold); }
.cell.open .label::after { content: " ✓"; }
.cell.open .status { opacity: 1; color: var(--gold); }

dialog { border: 3px solid var(--gold-edge); border-radius: 16px; background: var(--cream); color: var(--red-deep); padding: 22px 22px 18px; width: min(92vw, 380px); text-align: center; font-family: inherit; }
dialog::backdrop { background: #1a0409cc; }
dialog h2 { margin: 0 0 4px; font-size: 1.6rem; }
.muted { margin: 6px 0; opacity: .8; }
#pin { width: 100%; margin: 12px 0 4px; padding: 10px; font: bold 2rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4em; text-align: center; text-indent: .4em;
  border: 3px solid var(--gold-edge); border-radius: 10px; background: #fff; color: var(--red-deep); }
#pin:focus { outline: 3px solid #1b4a85; }
.error { min-height: 1.4em; margin: 4px 0; color: #b0102a; font-weight: bold; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.buttons { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
button.primary, button.ghost { font: inherit; font-weight: bold; padding: 10px 22px; border-radius: 99px; cursor: pointer; border: 3px solid var(--gold-edge); }
button.primary { background: linear-gradient(#d63a50, #a1182c); color: #fff; }
button.ghost { background: transparent; color: var(--red-deep); }
button:disabled { opacity: .6; cursor: wait; }
.giftee { margin: 8px 0; font-size: clamp(2.2rem, 11vw, 3rem); font-weight: bold; color: #a1182c; word-break: break-word; }
.giftee::before { content: "🎅 "; }

#confetti span { position: fixed; top: -20px; width: 10px; height: 14px; z-index: 10; animation: fall linear forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  .pane, .inside, .star { transition: none; }
  .shake, #confetti span { animation: none; }
}