/* juice.css - the celebration layer. Loaded after styles.css, so these win.
   Everything here is fixed-position and pointer-events:none: nothing in this
   file can shift the layout or eat a tap. */

/* ------------------------------------------------------------------ burst */

.juice-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 52;                 /* over the confetti canvas (50), under the toast (60) */
}

/* ----------------------------------------------------------- screen flash */

.juice-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;                 /* under the CRT vignette and scanlines */
  opacity: 0;
  mix-blend-mode: screen;
}
/* Tints are weak on purpose: a wash, not a strobe. */
.juice-flash.clear {
  background: radial-gradient(130% 95% at 50% 45%,
    rgba(74, 222, 128, .30) 0%, rgba(74, 222, 128, .10) 52%, transparent 78%);
}
.juice-flash.step {
  background: radial-gradient(130% 95% at 50% 45%,
    rgba(56, 189, 248, .22) 0%, rgba(56, 189, 248, .07) 52%, transparent 78%);
}
.juice-flash.on { animation: juice-tint 300ms ease-out forwards; }

@keyframes juice-tint {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------- level banner */

.juice-banner {
  position: fixed;
  left: 50%;
  top: 11%;
  z-index: 70;
  pointer-events: none;        /* he can keep tapping straight through it */
  max-width: 94vw;
  padding: 13px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--pixel, "Press Start 2P", ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #04212a;
  background: linear-gradient(180deg, #4ade80 0%, #2ec4b6 55%, #1aa79b 100%);
  border: 3px solid #04212a;
  border-radius: 4px;
  box-shadow: 0 6px 0 #071018, 0 0 26px rgba(46, 196, 182, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  transform: translate(-50%, 0) translateX(-130vw);
  animation: juice-banner-run 1280ms cubic-bezier(.2, .8, .25, 1) forwards;
}
.juice-banner .juice-kicker {
  display: inline-block;
  margin-right: 12px;
  padding: 2px 7px;
  background: #04212a;
  color: #7dd3fc;
  border-radius: 2px;
  font-size: 10px;
}

/* In from the left, hold, out to the right. 1.28s end to end. */
@keyframes juice-banner-run {
  0%   { transform: translate(-50%, 0) translateX(-130vw); opacity: 0; }
  14%  { transform: translate(-50%, 0) translateX(0);      opacity: 1; }
  78%  { transform: translate(-50%, 0) translateX(0);      opacity: 1; }
  100% { transform: translate(-50%, 0) translateX(130vw);  opacity: 0; }
}

@media (orientation: landscape) and (max-height: 900px) {
  .juice-banner { top: 11%; font-size: 12px; }
}

/* ----------------------------------------------------------------- pips */

/* blue -> white flash -> green, and it stays green until paintTrail redraws it */
.pip.juice-fill { animation: juice-pip 620ms ease-out forwards; }

@keyframes juice-pip {
  0%   { background: #38bdf8; box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  16%  { background: #f2fffa; box-shadow: 0 0 20px rgba(226, 255, 240, .9); }
  55%  { background: #86efac; box-shadow: 0 0 16px rgba(74, 222, 128, .75); }
  100% { background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, .6); }
}

/* -------------------------------------------------------------- XP meter */

/* Glow only - no transform, so the HUD cannot move a single pixel. */
.xp.juice-pulse { animation: juice-xp-bar 520ms ease-out; }
.xp.juice-pulse .xp-fill { animation: juice-xp-fill 520ms ease-out; }

@keyframes juice-xp-bar {
  0%   { box-shadow: 0 0 0 rgba(46, 196, 182, 0); border-color: var(--line, #21405a); }
  25%  { box-shadow: 0 0 18px rgba(46, 196, 182, .85); border-color: #2ec4b6; }
  100% { box-shadow: 0 0 0 rgba(46, 196, 182, 0); border-color: var(--line, #21405a); }
}
@keyframes juice-xp-fill {
  0%   { filter: brightness(1); }
  22%  { filter: brightness(1.85); }
  100% { filter: brightness(1); }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .juice-canvas,
  .juice-flash,
  .juice-banner { display: none !important; }
}