/* Tapp - the two modes as two worlds (2026-11-04).
 *
 * GIVEAWAY is prize night: the meadow goes to dusk, two spotlights sweep the
 * field, a ring of marquee bulbs chases round Tapp, gold glitter falls, and a
 * press prints a gold ticket that slides out of him with a YOU'RE IN stamp.
 * Once today's ticket is in, he wears a rosette and the bulbs settle to a glow.
 *
 * IDLE is the workshop day: full sun, coins orbit Tapp (faster the more he
 * earns), coin bubbles rise from the mound, and every tap is a little coin burst.
 *
 * Switching is an iris wipe from the mode button in the new mode's colour.
 * Everything here is decoration over the existing stage: pointer-events off,
 * and reduced motion keeps the colours and drops the movement.
 */

/* ------------------------------------------------------------ the mode switch */
.modes { position: relative; isolation: isolate; }
.modes .mode-btn { position: relative; z-index: 1; transition: color .3s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.modes .mode-btn:active { transform: scale(.95); }
.modes .mode-btn.is-on { color: #1d1030; }
html[data-mode='giveaway'] #app #mode-giveaway.is-on {
  background: linear-gradient(180deg, #ffe58a, #ffb800 60%, #ff9500) !important;
  box-shadow: 0 3px 0 #9a5200, inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 22px rgba(255, 196, 0, .7) !important;
}
html[data-mode='idle'] #app #mode-idle.is-on {
  background: linear-gradient(180deg, #c8ffe2, #3ee08f 60%, #19b86a) !important;
  box-shadow: 0 3px 0 #0d7a45, inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 22px rgba(62, 224, 143, .65) !important;
}
/* the whole switch takes the mode's colour, so the bar says which world this is */
html[data-mode='giveaway'] #app .modes { background: linear-gradient(90deg, #2b1052, #4a1a6b) !important; }
html[data-mode='idle'] #app .modes { background: linear-gradient(90deg, #0f4d3a, #1a6b4a) !important; }
.modes .mode-btn.is-on .mode-ico { animation: md-ico .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes md-ico { 0% { transform: scale(.4) rotate(-40deg); } 100% { transform: none; } }

/* ------------------------------------------------------------- shared layers */
.md-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; opacity: 0; transition: opacity .7s ease; }
html[data-mode='giveaway'] .md-night { opacity: 1; }
html[data-mode='idle'] .md-day { opacity: 1; }
/* .stage is its own stacking context (position: relative; z-index: 2), so a layer at
   z-index -1 paints over the stage's own background and under every prop in it. */

/* ------------------------------------------------------------------ prize night */
.md-night::before {
  /* dusk: the sky deepens from the top, the field keeps its colour at the bottom */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 10, 70, .92) 0%, rgba(100, 30, 130, .62) 34%, rgba(255, 120, 60, .22) 62%, rgba(40, 20, 80, .28) 100%);
  mix-blend-mode: multiply;
}
.md-night::after {
  /* a few stars come out over the meadow */
  content: ""; position: absolute; inset: 0 0 55% 0;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 22%, #ffe9a8, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(2px 2px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 88% 6%, #ffe9a8, transparent),
    radial-gradient(1px 1px at 36% 34%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 38%, #fff, transparent);
  animation: md-twinkle 3s ease-in-out infinite alternate;
}
@keyframes md-twinkle { to { opacity: .45; } }
.md-beam {
  position: absolute; bottom: -10%; width: 46%; height: 140%; transform-origin: 50% 100%;
  background: conic-gradient(from 180deg at 50% 100%, transparent 0deg, rgba(255, 236, 160, .0) 160deg, rgba(255, 236, 160, .34) 176deg, rgba(255, 255, 230, .5) 180deg, rgba(255, 236, 160, .34) 184deg, rgba(255, 236, 160, 0) 200deg, transparent 360deg);
  filter: blur(2px); mix-blend-mode: screen;
}
.md-beam--l { left: -6%; animation: md-sweep-l 7s ease-in-out infinite alternate; }
.md-beam--r { right: -6%; animation: md-sweep-r 8.5s ease-in-out infinite alternate; }
@keyframes md-sweep-l { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }
@keyframes md-sweep-r { from { transform: rotate(26deg); } to { transform: rotate(-20deg); } }
.md-glit { position: absolute; top: -8px; width: 5px; height: 5px; border-radius: 1px; background: #ffd75e; box-shadow: 0 0 6px #ffcf40;
  animation: md-fall linear infinite; opacity: .9; }
@keyframes md-fall { from { transform: translate3d(0, -10px, 0) rotate(0); } to { transform: translate3d(var(--dx, 20px), 110vh, 0) rotate(720deg); } }

/* the marquee ring of bulbs round Tapp */
.md-bulbs { position: absolute; inset: -16px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s; }
html[data-mode='giveaway'] .md-bulbs { opacity: 1; }
.md-bulbs i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: #fff2b8; box-shadow: 0 0 0 1.5px #7a3d00, 0 0 8px #ffcf40;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 78px)));
  animation: md-chase 1.2s steps(1) infinite; animation-delay: var(--d); }
@keyframes md-chase { 0%, 49% { background: #fff8d6; box-shadow: 0 0 0 1.5px #7a3d00, 0 0 12px #ffd75e, 0 0 24px #ffb800; } 50%, 100% { background: #b57400; box-shadow: 0 0 0 1.5px #7a3d00; } }
html.md-in-today .md-bulbs i { animation-duration: 3.6s; }

/* the rosette once today's ticket is in */
.md-rosette { position: absolute; right: -10px; top: -8px; z-index: 4; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle, #ffe680 0 52%, #ff9f1c 53% 62%, #e2551a 63% 100%);
  box-shadow: 0 0 0 2px #1d1030, 0 4px 0 #1d1030; color: #1d1030; font: 900 10px/1 var(--pixel, monospace); letter-spacing: .04em; text-align: center;
  transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.md-rosette::after { content: ""; position: absolute; left: 12px; bottom: -14px; width: 22px; height: 18px;
  background: linear-gradient(90deg, #e2551a 0 45%, transparent 45% 55%, #e2551a 55%); clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 70%, 50% 100%, 25% 70%, 0 100%); z-index: -1; }
html[data-mode='giveaway'].md-in-today .md-rosette { transform: scale(1) rotate(8deg); }

/* the ticket */
.md-ticket { position: absolute; left: 50%; top: 50%; z-index: 40; width: 196px; padding: 10px 14px 12px; pointer-events: none;
  background: linear-gradient(135deg, #fff6c9, #ffd34d 55%, #ffb800); color: #3b1d00;
  border-radius: 8px; box-shadow: 0 0 0 2px #1d1030, 0 6px 0 #1d1030, 0 18px 40px rgba(0, 0, 0, .4);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  animation: md-print 2.6s cubic-bezier(.2, .9, .3, 1) forwards; }
.md-ticket b { display: block; font: 900 17px/1.05 var(--shout, system-ui); letter-spacing: .02em; }
.md-ticket small { display: block; margin-top: 4px; font: 700 9.5px/1.3 var(--pixel, monospace); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.md-ticket em { position: absolute; right: 8px; top: 8px; padding: 3px 6px; border: 2px solid #c0182b; border-radius: 4px; color: #c0182b;
  font: 900 11px/1 var(--pixel, monospace); font-style: normal; letter-spacing: .08em; transform: rotate(-12deg) scale(2.4); opacity: 0;
  animation: md-stamp .35s .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.md-ticket::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px dashed rgba(59, 29, 0, .25); }
@keyframes md-print {
  0% { transform: translate(-50%, -40%) scaleY(.05); opacity: 0; }
  14% { transform: translate(-50%, -120%) scaleY(1); opacity: 1; }
  22% { transform: translate(-50%, -118%) rotate(-3deg); }
  70% { transform: translate(-50%, -122%) rotate(2deg); opacity: 1; }
  100% { transform: translate(60%, -300%) rotate(18deg) scale(.4); opacity: 0; }
}
@keyframes md-stamp { to { transform: rotate(-12deg) scale(1); opacity: 1; } }

/* ----------------------------------------------------------------- workshop day */
.md-day::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 8%, rgba(255, 250, 200, .55), transparent 70%); mix-blend-mode: screen; }
/* turned by modes.js (spinFrame), which eases its speed instead of swapping durations */
.md-orbit { position: absolute; inset: -20px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s;
  will-change: transform; }
html[data-mode='idle'] .md-orbit { opacity: 1; }
.md-orbit i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc61a 55%, #c98500); box-shadow: 0 0 0 1.5px #6b4300, 0 2px 0 #6b4300;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 84px))) rotate(calc(-1 * var(--a))); }
.md-bub { position: absolute; bottom: 18%; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc61a 60%, #c98500); box-shadow: 0 0 0 1px rgba(107, 67, 0, .6);
  opacity: 0; animation: md-rise 4.5s ease-in infinite; }
@keyframes md-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--dx, 10px), -46vh, 0) scale(1); } }
.md-spark { position: absolute; z-index: 30; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc61a 60%, #c98500); animation: md-burst .6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes md-burst { to { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } }

/* ----------------------------------------------------------------- the wipe */
.md-iris { position: absolute; inset: 0; z-index: 60; pointer-events: none; clip-path: circle(0 at var(--ox, 50%) var(--oy, 0%));
  animation: md-iris .75s cubic-bezier(.7, 0, .2, 1) forwards; }
.md-iris.is-give { background: radial-gradient(circle at var(--ox) var(--oy), #ffe58a, #ff9500 40%, #3a1460 75%); }
.md-iris.is-idle { background: radial-gradient(circle at var(--ox) var(--oy), #ffffff, #b9ffd8 35%, #3ee08f 70%); }
.md-iris b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 clamp(26px, 7vw, 44px)/1 var(--shout, system-ui); color: #1d1030; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 3px 0 rgba(255, 255, 255, .6); }
@keyframes md-iris { 0% { clip-path: circle(0 at var(--ox) var(--oy)); opacity: 1; } 55% { clip-path: circle(150% at var(--ox) var(--oy)); opacity: 1; } 100% { clip-path: circle(150% at var(--ox) var(--oy)); opacity: 0; } }

/* ------------------------------------------------- the frenzy pill, readable */
.fx-frenzy {
  top: 14px !important; padding: 7px 16px 11px !important; gap: 8px !important; align-items: center !important;
  border: 2px solid #ffd75e !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #2d1250, #1d1030) !important; color: #fff !important;
  box-shadow: 0 4px 0 #0b0614, 0 0 0 3px rgba(255, 215, 94, .25), 0 0 28px rgba(255, 196, 0, .55) !important;
}
.fx-frenzy b { font-size: 1.5rem !important; line-height: 1 !important; color: #ffd75e !important; text-shadow: 0 2px 0 #7a3d00; }
.fx-frenzy span { font-size: .8rem !important; letter-spacing: .14em !important; font-weight: 700; color: #fff !important; }
.fx-frenzy i { height: 3px !important; background: linear-gradient(90deg, #ffd75e, #ff9500) !important; border-radius: 0 3px 3px 0; }

@media (prefers-reduced-motion: reduce) {
  .md-beam, .md-glit, .md-bulbs i, .md-orbit, .md-bub, .md-ticket, .md-iris { animation: none !important; }
  .md-glit, .md-bub, .md-iris { display: none; }
  .md-ticket { transform: translate(-50%, -120%); }
}

/* the cinematic meadow (js/meadow.js) turns day into prize night itself, sky, stars and all:
   the CSS dusk and stars stand down so the two do not stack */
html.meadow-gl .md-night::before, html.meadow-gl .md-night::after, html.meadow-gl .md-day::before { display: none; }
html.meadow-gl #aaa-tint, html.meadow-gl #aaa-stars, html.meadow-gl #aaa-air, html.meadow-gl .stage::after { display: none !important; }