/* =============================================================
   PIXEL BATTLE LOOK AND FEEL
   Loud on purpose. Big type, hot colors, nothing subtle.
   No fonts are downloaded. Everything here is built from
   fonts that are already on the machine, so it works offline.
   ============================================================= */

:root {
  --hot: #ff2e88;
  --zap: #ffe500;
  --slime: #14ff72;
  --sky: #21d4ff;
  --grape: #9b3cff;
  --ink: #0d000d;
  --chunk: "Arial Black", "Helvetica Neue", Impact, "Segoe UI Black", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  font-family: var(--chunk);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* the whole machine */
#cabinet {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      45deg,
      #14001c 0px, #14001c 28px,
      #1d0026 28px, #1d0026 56px
    );
}

/* ---- screens ---------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

.screen.is-on { display: flex; }

/* ---- title screen ----------------------------------------- */

.logo {
  margin: 0 0 6px;
  line-height: 0.85;
  letter-spacing: -2px;
  transform: rotate(-3deg);
}

.logo span {
  display: block;
  font-size: clamp(46px, 16vw, 130px);
  text-transform: uppercase;
}

.logo-a {
  color: var(--zap);
  text-shadow: 6px 6px 0 var(--hot), 12px 12px 0 var(--grape);
}

.logo-b {
  color: var(--sky);
  text-shadow: 6px 6px 0 var(--slime), 12px 12px 0 #00394a;
}

.tagline {
  margin: 22px 0 30px;
  font-size: clamp(13px, 3.6vw, 20px);
  letter-spacing: 2px;
  color: #fff;
  background: var(--hot);
  padding: 8px 14px;
  transform: rotate(1.5deg);
}

.credits {
  margin-top: 26px;
  font-size: clamp(11px, 3vw, 15px);
  letter-spacing: 1px;
  color: #b18ec4;
}

/* ---- the one button style used everywhere ------------------ */

.big-button {
  font-family: var(--chunk);
  font-size: clamp(26px, 8vw, 54px);
  letter-spacing: 2px;
  padding: 18px 44px;
  color: #12001a;
  background: var(--zap);
  border: 6px solid #fff;
  border-radius: 14px;
  box-shadow: 0 10px 0 var(--hot);
  cursor: pointer;
  transform: rotate(-1deg);
  touch-action: manipulation;
}

.big-button:active {
  transform: translateY(8px) rotate(-1deg);
  box-shadow: 0 2px 0 var(--hot);
}

/* ---- the play screen --------------------------------------- */

#screen-play {
  justify-content: flex-start;
  padding: 0;
}

#hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: clamp(13px, 3.4vw, 20px);
  letter-spacing: 1px;
  background: #000;
  z-index: 3;
}

#lives .life {
  font-size: clamp(18px, 5vw, 26px);
  color: var(--hot);
  margin-right: 3px;
  text-shadow: 0 0 10px var(--hot);
}

#lives .life.gone {
  color: #3a2440;
  text-shadow: none;
}

#cleared { color: var(--zap); }

#timer-track {
  width: 100%;
  height: 14px;
  background: #260033;
  z-index: 3;
}

#timer-fill {
  width: 100%;
  height: 100%;
  background: var(--slime);
  transform-origin: left center;
  transform: scaleX(1);
}

#timer-fill.panic { background: var(--hot); }

/* the empty box every microgame draws into */
#stage {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

/* ---- the instruction slam ---------------------------------- */

#flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
}

#flash.hidden { display: none; }

#flash span {
  font-size: clamp(32px, 10vw, 86px);
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 5px 5px 0 var(--hot), 10px 10px 0 var(--grape);
  background: rgba(10, 0, 14, 0.72);
  padding: 12px 20px;
  max-width: 88%;
  text-align: center;
  overflow-wrap: break-word;
}

#flash.flash-go span { animation: slam 0.9s ease-out forwards; }

@keyframes slam {
  0%   { transform: scale(2.2) rotate(-8deg); opacity: 0; }
  18%  { transform: scale(1) rotate(-2deg); opacity: 1; }
  70%  { transform: scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: scale(1.12) rotate(4deg); opacity: 0; }
}

/* ---- the card between games -------------------------------- */

#curtain {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grape);
  z-index: 8;
}

#curtain.hidden { display: none; }
#curtain.won { background: var(--slime); }
#curtain.lost { background: var(--hot); }

#curtain-text {
  font-size: clamp(40px, 14vw, 120px);
  color: #12001a;
  letter-spacing: -1px;
  transform: rotate(-3deg);
  text-align: center;
}

/* a quick full screen blink when you win or lose a round */
body.blip-win #cabinet { animation: blipwin 0.4s steps(2) 2; }
body.blip-lose #cabinet { animation: bliplose 0.4s steps(2) 2; }

@keyframes blipwin {
  0%, 100% { filter: none; }
  50% { filter: invert(1) hue-rotate(90deg); }
}

@keyframes bliplose {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-8px, 4px); }
  75% { transform: translate(8px, -4px); }
}

/* ---- game over --------------------------------------------- */

.over-title {
  margin: 0;
  font-size: clamp(44px, 15vw, 120px);
  color: var(--hot);
  text-shadow: 6px 6px 0 var(--zap);
  transform: rotate(-2deg);
}

.over-score {
  font-size: clamp(20px, 6vw, 38px);
  color: #fff;
  margin: 18px 0 4px;
}

.over-score span { color: var(--slime); }

.over-best {
  margin: 0 0 10px;
  font-size: clamp(14px, 4vw, 22px);
  color: var(--zap);
  letter-spacing: 2px;
}

.over-taunt {
  margin: 0 0 28px;
  font-size: clamp(12px, 3.4vw, 18px);
  color: #b18ec4;
  letter-spacing: 2px;
}

/* =============================================================
   BITS THE MICROGAMES USE.
   A microgame can bring its own styles inline, but these are
   here so a new one can look right with almost no effort.
   ============================================================= */

/* a plain chunky button you can scatter around the stage */
.mg-button {
  position: absolute;
  font-family: var(--chunk);
  font-size: 18px;
  padding: 10px 14px;
  color: #12001a;
  background: var(--zap);
  border: 4px solid #12001a;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

/* a centered banner for a microgame to explain its own rule */
.mg-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: clamp(12px, 3.4vw, 18px);
  letter-spacing: 1px;
  padding: 6px 12px;
  border: 3px solid #fff;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.mg-shake { animation: shake 0.25s; }

@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
  30% { transform: translate(-6px, 3px) rotate(var(--tilt, 0deg)); }
  70% { transform: translate(6px, -3px) rotate(var(--tilt, 0deg)); }
}