/* Dice Fight: the anime layer. Sunbursts, halftone, kanji, shockwaves, power-level auras,
   speech bubbles and the champion's stage. All decorative; reduced motion calms it down. */

/* ---------- particle canvas (js/particles.js) ---------- */
.particles { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- halftone manga texture over everything ---------- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: 6px 6px;
  mix-blend-mode: screen;
}
#app { position: relative; z-index: 2; }

/* ---------- sunburst rays ---------- */
.sunburst {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 10, 0.55) 0deg 7deg, rgba(255, 45, 149, 0.0) 7deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: spin-slow 14s linear infinite;
}
.countdown-rays {
  width: 150vmax; height: 150vmax; left: 50%; top: 52%; margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 45, 149, 0.28) 0deg 6deg, rgba(34, 228, 255, 0.0) 6deg 14deg);
  animation-duration: 9s;
}
.home-rays { width: 560px; height: 560px; left: 50%; top: 80px; margin: -280px 0 0 -280px; opacity: 0.55; animation-duration: 22s; }
.home-wrap { position: relative; }
.home-wrap > :not(.home-rays) { position: relative; }
.logo { animation: logo-throb 2.4s ease-in-out infinite; }
@keyframes logo-throb { 50% { transform: scale(1.025) rotate(-0.6deg); } }

/* ---------- giant kanji stamps (fx.kanji) ---------- */
.kanji {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS Mincho", serif; font-weight: 900;
  font-size: min(58vw, 46vh); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 30px rgba(255, 45, 149, 0.7);
  animation: kanji-slam 900ms cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.kanji.gold { -webkit-text-stroke-color: var(--yellow); text-shadow: 0 0 40px rgba(255, 214, 10, 0.8); }
.kanji.cyan { -webkit-text-stroke-color: var(--cyan); text-shadow: 0 0 40px rgba(34, 228, 255, 0.8); }
.kanji.red { -webkit-text-stroke-color: var(--red); text-shadow: 0 0 40px rgba(255, 59, 59, 0.9); }
.kanji.grey { -webkit-text-stroke-color: #9a9ab8; text-shadow: none; }
@keyframes kanji-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
  25% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.95); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.08); }
}

/* ---------- shockwave rings & flashes (fx.shockwave / fx.flash) ---------- */
.shockwave {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 6px solid var(--wave, var(--yellow)); box-shadow: 0 0 24px var(--wave, var(--yellow)), inset 0 0 18px var(--wave, var(--yellow));
  animation: shockwave 520ms cubic-bezier(.1, .8, .3, 1) forwards;
}
@keyframes shockwave { to { transform: scale(11); opacity: 0; border-width: 1px; } }
.flash { position: absolute; inset: 0; background: var(--flash, #fff); animation: flash 260ms ease-out forwards; mix-blend-mode: screen; }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }

/* ---------- colour-split (chromatic aberration) on the big impact text ---------- */
.impact span, .countdown-num.go, .busted-card strong, .interrupt strong, .banner {
  text-shadow: -0.05em 0 0 rgba(34, 228, 255, 0.85), 0.05em 0 0 rgba(255, 45, 149, 0.85), 0.09em 0.09em 0 var(--ink);
}
.countdown-num { text-shadow: -0.03em 0 0 rgba(34, 228, 255, 0.8), 0.03em 0 0 var(--magenta), 0.06em 0.06em 0 var(--ink); }

/* ---------- die: motion blur in flight, a punch on doubles ---------- */
.arena.rolling .cube { filter: blur(1.4px) saturate(1.3); }
.die-zone.punch .die-scene { animation: die-punch 420ms cubic-bezier(.2, 1.8, .4, 1); }
@keyframes die-punch { 0% { transform: scale(1); } 30% { transform: scale(1.32) rotate(-6deg); } 100% { transform: scale(1); } }

/* ---------- power level: the score's aura escalates as it climbs ---------- */
.hud-total { position: relative; transition: filter 300ms; }
.hud-total.aura-1 { filter: drop-shadow(0 0 8px rgba(255, 138, 0, 0.9)); animation: aura-flicker 0.9s ease-in-out infinite; }
.hud-total.aura-2 { filter: drop-shadow(0 0 12px rgba(34, 228, 255, 1)) drop-shadow(0 0 22px rgba(34, 228, 255, 0.6)); animation: aura-flicker 0.6s ease-in-out infinite; }
.hud-total.aura-3 { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px rgba(255, 214, 10, 1)); animation: aura-flicker 0.35s ease-in-out infinite; }
.hud-total.aura-4 { animation: aura-rainbow 1.2s linear infinite, aura-flicker 0.25s ease-in-out infinite; }
@keyframes aura-flicker { 50% { transform: scale(1.04) translateY(-1px); } }
@keyframes aura-rainbow {
  0% { filter: drop-shadow(0 0 16px #ff2d95) drop-shadow(0 0 30px #ff2d95); }
  33% { filter: drop-shadow(0 0 16px #22e4ff) drop-shadow(0 0 30px #22e4ff); }
  66% { filter: drop-shadow(0 0 16px #ffd60a) drop-shadow(0 0 30px #ffd60a); }
  100% { filter: drop-shadow(0 0 16px #ff2d95) drop-shadow(0 0 30px #ff2d95); }
}
.power-label {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--yellow); pointer-events: none;
}

/* ---------- announcer speech bubble in the countdown ---------- */
.countdown-line {
  background: var(--white); color: var(--ink); border: 4px solid var(--ink); border-radius: 22px;
  padding: 10px 16px; box-shadow: 5px 5px 0 var(--magenta); margin-top: 10px; transform: rotate(-2deg);
}
.countdown-line::after {
  content: ""; position: absolute; right: 18%; bottom: -22px; width: 26px; height: 26px;
  background: var(--white); border-right: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  transform: skewX(-30deg) rotate(45deg);
}

/* ---------- results: rows streak in; the winner gets rays and 優勝 ---------- */
.result-row { position: relative; overflow: hidden; }
.result-row::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 45%, transparent 60%);
  transform: translateX(-120%); animation: row-sheen 700ms ease-out 120ms forwards;
}
@keyframes row-sheen { to { transform: translateX(120%); } }
.result-row.first { animation: row-in 320ms cubic-bezier(.2, 1.4, .4, 1), winner-glow 1.4s ease-in-out 400ms infinite; }
@keyframes winner-glow { 50% { box-shadow: 0 0 24px rgba(255, 214, 10, 0.7), inset 0 0 18px rgba(255, 214, 10, 0.25); } }

/* ---------- final: the champion's stage ---------- */
.champion { isolation: isolate; }
.champ-avatar { position: relative; display: grid; place-items: center; }
.champ-avatar .sunburst { width: 300px; height: 300px; left: 50%; top: 50%; margin: -150px 0 0 -150px; z-index: -1; animation-duration: 8s; }
.champ-avatar .avatar { animation: champ-bounce 1.6s ease-in-out infinite; box-shadow: 0 0 0 4px var(--yellow), 0 0 30px rgba(255, 214, 10, 0.8); }
@keyframes champ-bounce { 50% { transform: translateY(-6px) scale(1.04); } }
.champ-kanji {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-6deg); z-index: -2;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS Mincho", serif; font-weight: 900;
  font-size: 7.5rem; line-height: 1; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 2px rgba(255, 214, 10, 0.45);
}
.champion-name {
  background: linear-gradient(100deg, #ffd60a 0%, #fff4dc 25%, #ffd60a 45%, #ff8a00 70%, #ffd60a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0.05em 0.05em 0 var(--magenta)) drop-shadow(0.07em 0.07em 0 var(--ink));
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }
.final-announcer { animation: announcer-in 560ms cubic-bezier(.2, 1.35, .45, 1) both, announcer-hype 0.9s ease-in-out 700ms infinite; }
@keyframes announcer-hype { 50% { transform: translateY(-5px) rotate(2deg); } }

/* ---------- reduced motion: keep the information, drop the spectacle ---------- */
@media (prefers-reduced-motion: reduce) {
  .sunburst, .logo, .hud-total, .champ-avatar .avatar, .champion-name, .final-announcer { animation: none !important; }
  .kanji, .shockwave, .flash { display: none; }
  .arena.rolling .cube { filter: none; }
}

/* The countdown rays are bigger than the screen: clip them. */
.countdown { overflow: hidden; }