/* The Advent Calendar only: the town square, its 24 doors and the Christmas dressing of the puzzles. The header, status
   lines and puzzles are in ../shared/calendar/calendar.css; shared rules in ../shared/base.css. Lights, the moon and an
   open door's glow are the scene, not surfaces, so they may glow. */

/* ---- the page: status, then the calendar, then the tally and share; side by side when the calendar is wide ---- */
.cal-wrap { display: grid; gap: 10px 36px; }
.cal-top { min-height: 3.2em; }
.cal-more .share-text { margin-top: 12px; }
.nh h1 { font-size: clamp(34px, 10vw, 72px); }

/* the calendar keeps its shape: tall (5:7) on phones and upright iPads, wide (5:3) on laptops and iPads on their side */
.cal { position: relative; container-type: inline-size; aspect-ratio: 5 / 7; width: min(100%, max(340px, calc((100dvh - 190px) * 5 / 7))); margin: 0 auto; }
.cal-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cal-scene.wide { display: none; }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .cal-wrap { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); grid-template-rows: auto 1fr; }
  .cal-art { grid-column: 1; grid-row: 1 / 3; }
  .cal-top { grid-column: 2; grid-row: 1; align-self: end; margin-top: 30px; }
  .cal-more { grid-column: 2; grid-row: 2; }
  .status { font-size: 22px; }
  .cal { aspect-ratio: 5 / 3; width: min(100%, max(460px, calc((100dvh - 130px) * 5 / 3))); }
  .cal-scene.tall { display: none; }
  .cal-scene.wide { display: block; }
}

/* the scene */
.cal-scene .star { fill: #F5F3EA; opacity: 0.7; }
.cal-scene .moon { fill: #F5F3EA; }
.cal-scene .tree-star { fill: #FFD23F; }
.cal-scene .bulb.b0 { fill: #FFD23F; } .cal-scene .bulb.b1 { fill: #FF9BD6; } .cal-scene .bulb.b2 { fill: #9FE0FF; } .cal-scene .bulb.b3 { fill: #FFB25A; }
.cal-scene .flakes { fill: #F5F3EA; opacity: 0.75; }
.cal-scene .star.s1 { animation: twinkle-dot 4s infinite; } .cal-scene .star.s2 { animation: twinkle-dot 6s 1s infinite; }
.cal-scene .bulb.b1, .cal-scene .bulb.b3 { animation: twinkle-dot 2.4s infinite; }
@keyframes twinkle-dot { 50% { opacity: 0.25; } }
.cal-scene .fall { animation: fall 40s linear infinite; }
.cal-scene.tall .fall { --drop: 560px; } .cal-scene.wide .fall { --drop: 480px; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(var(--drop)); } }

/* ---- a door: a button over the picture. Inside, the picture behind it (.behind) and a leaf on a hinge (.leaf, two for
   door 24) showing the number (.face). Closed: the number. Open to play: a frost-blue edge, a glow and a little wobble,
   and OPEN. Solved: the leaf swings open on the picture (solid edge). Missed: open, but the picture dark, with a
   dashed edge. An open leaf shows its plain back by changing colour as it turns edge-on, not with backface-visibility,
   which Safari loses when the leaf isn't turned. ---- */
.door { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; perspective: 420px; }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) { .door { left: var(--X); top: var(--Y); width: var(--W); height: var(--H); } }
.door:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.door.closed { cursor: default; }
.door .behind { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: #0A1030; border: 2px solid var(--edge); overflow: hidden; }
.door .behind svg { width: 86%; height: 86%; opacity: 0; }
.door .pn { display: none; position: absolute; left: 4px; top: 2px; font-size: 12px; font-weight: 800; line-height: 1; color: var(--muted); }
.door .leaf { position: absolute; inset: 0; transform-origin: left center; pointer-events: none; }
.door .leaf.l { inset: 0 50% 0 0; }
.door .leaf.r { inset: 0 0 0 50%; transform-origin: right center; }
.door .face { position: absolute; inset: 0; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(30, 42, 92, 0.86); border: 2px solid var(--edge); }
.door .num { font-size: clamp(18px, 7cqw, 34px); font-weight: 800; line-height: 1; color: var(--muted); }
.door .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; color: var(--accent); }
.door .tag:empty { display: none; }
.door.double .leaf.l .face { align-items: flex-end; padding-right: 2px; }
.door.double .leaf.r .face { align-items: flex-start; padding-left: 2px; }
.door.double .num { font-size: clamp(26px, 10cqw, 52px); }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) { .door .num { font-size: clamp(20px, 3.6cqw, 34px); } .door.double .num { font-size: clamp(30px, 5.4cqw, 56px); } }

.door.open { box-shadow: 0 0 14px 3px rgba(159, 224, 255, 0.5); }
.door.open .face { border: 3px solid var(--accent); }
.door.open .num { color: var(--accent); }
.door.open .leaf { animation: wobble 2.8s ease-in-out infinite; }
.door.open .leaf.r { animation-name: wobble-r; }
@keyframes wobble { 0%, 100% { transform: rotateY(-3deg); } 50% { transform: rotateY(-16deg); } }
@keyframes wobble-r { 0%, 100% { transform: rotateY(3deg); } 50% { transform: rotateY(16deg); } }
.door.solved .leaf, .door.failed .leaf { transform: rotateY(-104deg); }
.door.solved .leaf.r, .door.failed .leaf.r { transform: rotateY(104deg); }
.door.solved .face, .door.failed .face { background: #2A3570; }
.door.solved .num, .door.failed .num { opacity: 0; }
.door.solved .behind { background: #22306A; border: 2px solid #FFE7A3; }
.door.solved .behind svg { opacity: 1; }
.door.solved .pn, .door.failed .pn { display: block; }
.door.solved .pn { color: #FFE7A3; }
.door.failed .behind { border: 2px dashed var(--wrong); }
.door.failed .behind svg { opacity: 0.4; filter: grayscale(1) brightness(0.45); }
.door.just .leaf { animation: swing 1.3s cubic-bezier(0.3, 0.7, 0.3, 1) backwards; }
.door.just .face { animation: turn-face 1.3s linear backwards; }
.door.just .num { animation: turn-num 1.3s linear backwards; }
.door.just.solved .behind svg { animation: appear 700ms 500ms ease-out backwards; }
@keyframes swing { from { transform: none; } }
/* the front until the leaf is edge-on (about a third of the way through the swing), then its back */
@keyframes turn-face { 0%, 32% { background: rgba(30, 42, 92, 0.86); } 33%, 100% { background: #2A3570; } }
@keyframes turn-num { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes appear { from { opacity: 0; transform: scale(0.6); } }
@media (hover: hover) { .door.open:hover .face { background: rgba(58, 71, 133, 0.92); } }
@media (prefers-reduced-motion: reduce) {
  .cal-scene .star, .cal-scene .bulb, .cal-scene .fall, .door.open .leaf, .door.just .leaf, .door.just .face, .door.just .num, .door.just.solved .behind svg { animation: none !important; }
}

/* ---- the result: the picture behind the door ---- */
.prize { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.prize svg { width: 84px; height: 84px; flex: none; border-radius: 12px; background: #0A1030; border: 2px solid #FFE7A3; padding: 6px; }
.prize figcaption { font-weight: 600; }
.prize.dark svg { border: 2px dashed var(--wrong); filter: grayscale(1) brightness(0.45); }

/* ---- the puzzles, dressed for Christmas: a gingerbread's pick buttons, bells that swing ---- */
body[data-game="ad"] .pick svg .bg { fill: #B86A2E; }
body[data-game="ad"] .pick svg .cut { fill: #FFFDF4; }
body[data-game="ad"] .pick svg .line { stroke: #FFFDF4; }
.bells .bat-btn svg path { transform-origin: 50% 10%; }
.bells .bat-btn.flash svg path { transform: rotate(14deg); }
@media (prefers-reduced-motion: reduce) { .bells .bat-btn.flash svg path { transform: none; } }
/* four rows of pieces to pick (the pumpkin has three): a little tighter on a short phone */
@media (max-height: 600px) {
  body[data-game="ad"] .pick svg { height: 22px; }
  body[data-game="ad"] .pick legend { font-size: 12px; margin-bottom: 2px; }
  body[data-game="ad"] .pick fieldset { margin-bottom: 2px; }
}