/* ============================================================
   THE 100 GAMES PARTY — the front page's celebration

   Everything here only wakes up when the front page's <body> wears
   the word "party". The pieces it styles — the bulbs round the sign,
   the bunting, the big number and the confetti burst — are all made
   by party.js next to this file, so the front page itself has none
   of them written in.

   TO END THE PARTY, on the front page (site/index.html):
     1. take the word "party" off the <body> tag
     2. delete the line that loads this file (party.css)
     3. delete the line that loads party.js
   and the page is back to normal, arcade machines and all.

   Colours come from the front page's own variables, so day and
   night both work: --gold and --gold-glow at night, the confetti
   colours by day.
   ============================================================ */


/* ============================================================
   NIGHT — a ring of bulbs round the sign, and a big neon number
   ============================================================ */

/* The name's board gets a gold rim. */
.party .sign {
  border-color: rgba(255, 210, 63, 0.35);
  background: radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.07), rgba(255, 210, 63, 0.03) 70%);
  box-shadow: inset 0 0 24px rgba(255, 174, 0, 0.12), 0 0 30px rgba(255, 174, 0, 0.12);
}

.party .bulbs {
  position: absolute;
  inset: -2px;
  pointer-events: none;
}

.bulbs i {
  position: absolute;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6 0 20%, var(--gold) 55%, #a86f00 100%);
  box-shadow: 0 0 6px var(--gold-glow), 0 0 14px rgba(255, 174, 0, 0.55);
  /* Every third bulb is lit, and the lit ones march round the sign.
     --k (0, 1 or 2) is written on each bulb by party.js. */
  animation: chase 0.9s steps(1) infinite;
  animation-delay: calc(var(--k) * -0.3s);
}

@keyframes chase {
  0%   { opacity: 1; }
  33%  { opacity: 0.22; }
}

/* ===== The big number ===== */
.party .hundred {
  margin-top: 1.6rem;
  text-align: center;
}

.hundred-kicker {
  color: var(--gold);
  font-size: clamp(0.8rem, 3.4vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.35em;
  text-shadow: 0 0 10px var(--gold-glow);
}

.hundred-kicker .star { display: inline-block; animation: twinkle 1s steps(1) infinite; }
.hundred-kicker .star.late { animation-delay: -0.5s; }

@keyframes twinkle { 50% { opacity: 0.25; } }

.hundred-number {
  margin-top: 0.2rem;
  font-size: clamp(5.5rem, 30vw, 10rem);
  font-weight: 900;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: #fff8dc;
  text-shadow: 0 0 8px var(--gold), 0 0 28px var(--gold-glow), 0 0 80px var(--gold-glow);
}

.hundred-number .digit { display: inline-block; }

/* When the number lands it strikes like a tube, three times. */
.hundred-number.landed { animation: number-strike 0.9s ease-out; }

@keyframes number-strike {
  0%   { opacity: 1;   text-shadow: 0 0 20px var(--gold), 0 0 60px var(--gold-glow), 0 0 140px var(--gold-glow); }
  12%  { opacity: 0.3; }
  24%  { opacity: 1; }
  36%  { opacity: 0.5; }
  50%  { opacity: 1;   text-shadow: 0 0 20px var(--gold), 0 0 60px var(--gold-glow), 0 0 140px var(--gold-glow); }
}

.hundred-words {
  margin-top: 0.5rem;
  color: var(--title);
  font-size: clamp(0.8rem, 3.6vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.4em;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

/* The small line under it: the total has The 100th Game in it. */
.hundred-egg {
  margin-top: 0.6rem;
  color: var(--subtitle);
  font-size: clamp(0.7rem, 3vw, 0.85rem);
  font-style: italic;
  letter-spacing: 0.12em;
}

/* Not until the mini-games are counted (lib/menus.js fills the tag in).
   Off the disk there is no count at all, so the line stays away. */
.hundred-egg:has([data-mini-count]:empty) { display: none; }

/* The big number says it already, so the small "and counting" line goes. */
.party .counts { display: none; }

/* The confetti burst is drawn on a see-through sheet over the page. */
.party .burst {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

/* The bunting is a daytime thing only. */
.party .bunting { display: none; }

/* The number rises in with everything else as the sign warms up. */
.warm-up .hundred {
  animation: rise-into-place var(--sign-slide) ease-out backwards;
  animation-delay: calc(var(--sign-length) * 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .bulbs i, .hundred-kicker .star, .hundred-number.landed, .warm-up .hundred { animation: none; }
}


/* ============================================================
   DAY — bunting instead of bulbs, and paper cut-out numbers
   ============================================================ */
html.day-mode .party .sign {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

html.day-mode .party .bulbs { display: none; }

html.day-mode .party .hundred { position: relative; z-index: 1; }

/* Room at the top of the page for the bunting to hang in. */
html.day-mode body.party { padding-top: 4.5rem; }

html.day-mode .party .bunting {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.bunting .flag {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sway 3s ease-in-out infinite;
  animation-delay: var(--wait);
}

@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) { .bunting .flag { animation: none; } }

/* The kicker becomes a ribbon with its ends cut in. */
html.day-mode .hundred-kicker {
  display: inline-block;
  padding: 0.45rem 1.8rem;
  color: #ffffff;
  background: var(--accent);
  text-shadow: none;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  filter: drop-shadow(0 4px 6px var(--card-shadow));
}

html.day-mode .hundred-kicker .star { color: #ffe7a0; }

/* Each digit is a paper cut-out in its own colour, stuck on crooked.
   party.js writes each digit's --paper and --tilt on it. */
html.day-mode .hundred-number {
  color: var(--title);
  text-shadow: none;
  margin-top: 0.6rem;
}

html.day-mode .hundred-number .digit {
  color: var(--paper);
  text-shadow:
     3px  0   #fff, -3px  0   #fff,  0  3px #fff,  0 -3px #fff,
     2px  2px #fff, -2px  2px #fff,  2px -2px #fff, -2px -2px #fff,
     0 10px 16px rgba(62, 58, 68, 0.22);
  transform: rotate(var(--tilt));
}

html.day-mode .hundred-number.landed { animation: paper-pop 0.5s ease-out; }

@keyframes paper-pop {
  0%   { transform: scale(1.18); }
  60%  { transform: scale(0.97); }
  100% { transform: none; }
}

html.day-mode .hundred-words { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.day-mode .hundred-number.landed { animation: none; }
}