@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "BebasNeue";
  src: url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "ComicNeue";
  src: url("assets/fonts/ComicNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "RubikSprayPaint";
  src: url("assets/fonts/RubikSprayPaint-Regular.ttf") format("truetype");
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05010f;
  cursor: none;
  font-family: "Anton", "Impact", "Arial Black", system-ui, sans-serif;
  user-select: none;
}

#game { display: block; position: fixed; inset: 0; }

/* CRT scanlines + vignette for that 2014 stream-rip look */
#scanlines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* the HUD is gameplay-only — hidden on the menu, career, help & end screens so
   the score/timer/STYLE/BLAZE-meter never bleed onto an overlay */
#hud.hidden { display: none; }

/* CHEAT BANNER — full-screen confirmation for secret codes (Konami / 420), shown
   above every overlay so a cheat clearly registers even on the menu. */
#cheatBanner {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
#cheatBanner.show { display: flex; animation: cheatPulse 1.4s ease-out forwards; }
#cheatBanner .cbBig {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: clamp(30px, 7vw, 76px);
  letter-spacing: 2px;
  color: #00ff66;
  text-shadow: 0 0 22px #00ff66, 3px 3px 0 #f0f;
}
#cheatBanner .cbSub {
  font-family: "BebasNeue", "Anton", Impact, sans-serif;
  font-size: clamp(16px, 3vw, 30px);
  letter-spacing: 6px;
  color: #ffe600;
  margin-top: 10px;
  text-shadow: 0 0 14px #ffe600, 2px 2px 0 #000;
}
@keyframes cheatPulse {
  0%   { opacity: 0; transform: scale(.6) rotate(-4deg); }
  14%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
  28%  { transform: scale(1) rotate(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}

#score {
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: 52px;
  color: #fff;
  text-shadow: 0 0 12px #0ff, 3px 3px 0 #f0f, -2px -2px 0 #0f0;
  letter-spacing: 2px;
}

#combo {
  position: absolute;
  top: 74px;
  left: 22px;
  font-size: 30px;
  color: #ffe600;
  text-shadow: 2px 2px 0 #f00, 0 0 18px #ffe600;
  transform-origin: left center;
}

#timer {
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 52px;
  color: #fff;
  text-shadow: 0 0 12px #f0f, 3px 3px 0 #0ff;
}
#timer.danger { color: #ff2b2b; text-shadow: 0 0 22px #ff2b2b; }

#hiscore {
  position: absolute;
  top: 70px;
  right: 26px;
  font-size: 22px;
  color: #00e5ff;
  text-shadow: 2px 2px 0 #f0f, 0 0 10px #00e5ff;
  letter-spacing: 1px;
}

/* STYLE rank — DMC-style flair up top center; rewards varied skill shots */
#style {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .82;
  color: #9aa0b5;            /* JS overrides this per rank; currentColor cascades */
  opacity: 0;
  transition: opacity .25s ease;
}
#style.on { opacity: 1; }
#style .styleLabel {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #cfc8e8;
}
#style .styleRank {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 50px;
  color: currentColor;
  text-shadow: 0 0 16px currentColor, 2px 2px 0 #000;
  transition: transform .12s ease;
}
#style.bump .styleRank { transform: scale(1.35); }
#style .styleBar {
  width: 88px;
  height: 6px;
  margin-top: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  overflow: hidden;
}
#style .styleBar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  transition: width .12s linear;
}

/* BLAZE meter bar across the bottom */
#meterWrap {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(620px, 64vw);
  height: 18px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 16px rgba(255,255,255,.25);
  overflow: hidden;
}
#meter {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#00e5ff,#00ff66,#ffe600);
  transition: width .12s linear;
}
#meter.full {
  background: linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#00ff66,#00e5ff,#c400ff);
  background-size: 300% 100%;
  animation: rainbow 1s linear infinite;
}

#blaze {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  font-size: 30px;
  color: #00ff66;
  text-shadow: 2px 2px 0 #f00, 0 0 20px #00ff66;
  opacity: 0;
  transition: opacity .15s ease;
  letter-spacing: 2px;
}

#buffs {
  position: absolute;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 22px;
  color: #fff;
  text-shadow: 1px 1px 0 #000, 0 0 12px #00e5ff;
  letter-spacing: 1px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: radial-gradient(circle at center, rgba(40,0,80,.82), rgba(2,0,10,.96));
  color: #fff;
  /* Fixed — never scrolls. The inner block is scaled down to fit the window
     (see fitOverlay() in game.js) instead of overflowing into a scrollbar. */
  overflow: hidden;
}
.overlay.hidden { display: none; }

/* the actual content column; --fit is set per-overlay so a tall screen scales
   down to fit the viewport rather than clipping or scrolling */
.overlayInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: clamp(16px, 4vh, 40px) 24px;
  transform: scale(var(--fit, 1));
  transform-origin: center center;
}

.overlay h1 {
  font-family: "RubikSprayPaint", "Anton", "Impact", "Arial Black", sans-serif;
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: .9;
  background: linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#00ff66,#00e5ff,#c400ff,#ff0040);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* no text-stroke: RubikSprayPaint is full of spray specks and a stroke
     outlines every one of them, shredding the letterforms */
  filter: drop-shadow(4px 4px 0 #000);
  animation: rainbow 3s linear infinite;
}
.overlay h2 {
  font-family: "BebasNeue", "Anton", "Impact", "Arial Black", sans-serif;
  font-size: clamp(16px, 2.6vw, 28px);
  color: #00e5ff;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #f0f;
  margin-bottom: 8px;
}
.overlay .sub { max-width: 720px; font-size: 17px; color:#eee; margin-bottom: 12px; font-family: system-ui, sans-serif; }
.overlay .sub b { color:#ffe600; }

/* two-column on widescreen so the tips use the horizontal room instead of
   stacking into a tall wall of text */
.howto {
  list-style: none;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: #cfc8e8;
  margin-bottom: 14px;
  line-height: 1.55;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 34px;
  text-align: left;
  justify-content: center;
}
.howto li:last-child { grid-column: 1 / -1; text-align: center; }
.howto b { color:#fff; }

.overlay button {
  font-family: "Anton","Impact","Arial Black",sans-serif;
  font-size: 34px;
  letter-spacing: 3px;
  padding: 14px 46px;
  color: #05010f;
  background: linear-gradient(90deg,#ffe600,#00ff66);
  border: 4px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 30px #00ff66, 6px 6px 0 #f0f;
  transition: transform .08s ease;
}
.overlay button:hover { transform: scale(1.06) rotate(-1deg); }
.overlay button:active { transform: scale(.96); }

/* mode select */
.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 4px;
}
.overlay .modeBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 188px;
  padding: 12px 20px 10px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(160deg, rgba(40,0,80,.78), rgba(8,0,24,.82));
  border: 3px solid #00e5ff;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0,229,255,.35), 5px 5px 0 #f0f;
  transition: transform .08s ease, box-shadow .08s ease;
}
.overlay .modeBtn .mn { color: #fff; }
.modeBtn[data-mode="blitz"] .mn { color: #ffe600; }
.modeBtn[data-mode="hardcore"] .mn { color: #ff4d77; }
.modeBtn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 30px #00e5ff, 6px 6px 0 #f0f; }
.modeBtn:active { transform: scale(.97); }
.modeBtn[data-mode="blitz"] { border-color:#ffe600; box-shadow:0 0 18px rgba(255,230,0,.35), 5px 5px 0 #f0f; }
.modeBtn[data-mode="blitz"]:hover { box-shadow:0 0 30px #ffe600, 6px 6px 0 #f0f; }
.modeBtn[data-mode="hardcore"] { border-color:#ff2b5e; box-shadow:0 0 18px rgba(255,43,94,.4), 5px 5px 0 #f0f; }
.modeBtn[data-mode="hardcore"]:hover { box-shadow:0 0 30px #ff2b5e, 6px 6px 0 #f0f; }
.modeBtn .mn { font-size: 28px; letter-spacing: 2px; }
.modeBtn .md { font-family: system-ui, sans-serif; font-size: 13px; color: #cfc8e8; font-weight: 600; }
.modeBtn .mhi { font-family: system-ui, sans-serif; font-size: 12px; color: #ffe600; min-height: 15px; }

.overlay button.small { font-size: 18px; padding: 8px 18px; margin-top: 6px; }

/* career stats */
.statsGrid {
  display: grid;
  /* fill the panel width — auto-fit packs 3-5 columns on a wide window instead of
     a tall two-column strip with empty side margins */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 18px;
  width: 100%;
  max-width: 1060px;
  margin: 18px auto 24px;
  font-family: system-ui, sans-serif;
}
.statsGrid .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 18px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(0,229,255,.4);
  border-radius: 8px;
}
.statsGrid .stat .v { font-family: "Anton", "Impact", sans-serif; font-size: 38px; color: #ffe600; text-shadow: 0 0 12px #ffe600, 2px 2px 0 #f0f; }
.statsGrid .stat .k { font-size: 13px; letter-spacing: 1px; color: #cfc8e8; text-transform: uppercase; }

/* end-of-round scorecard */
.scorecard {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 6px 0 24px;
}
.scorecard .sc {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
  padding: 10px 16px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(0,229,255,.4);
  border-radius: 8px;
  font-family: system-ui, sans-serif;
}
.scorecard .scv { font-family: "Anton", "Impact", sans-serif; font-size: 34px; color: #ffe600; text-shadow: 0 0 10px #ffe600, 2px 2px 0 #f0f; }
.scorecard .sck { font-size: 12px; letter-spacing: 1px; color: #cfc8e8; }

.endBtns { display: flex; gap: 16px; align-items: center; }
.overlay button.ghost {
  font-size: 22px;
  padding: 14px 26px;
  color: #fff;
  background: transparent;
  border: 3px solid #fff;
  box-shadow: 4px 4px 0 #0ff;
}
.overlay button.ghost:hover { background: rgba(255,255,255,.1); }

/* rotating dank pro-tip / fake sponsor disclaimer on the title screen */
.tip {
  margin-top: 8px;
  min-height: 18px;
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #ffe600;
  text-shadow: 2px 2px 0 #f0f, 0 0 14px #ffe600;
  transition: opacity .25s ease;
}

.tiny { margin-top: 16px; font-family: system-ui, sans-serif; font-size: 13px; color:#8a82a8; }
.finalScore { font-family: system-ui,sans-serif; letter-spacing: 6px; color:#00e5ff; margin-top: 8px; }
#finalScoreVal {
  font-size: clamp(60px, 14vw, 150px);
  color:#ffe600;
  text-shadow: 0 0 30px #ffe600, 5px 5px 0 #f0f;
}
.rank { font-family: system-ui,sans-serif; font-size: 22px; color:#fff; margin-bottom: 26px; max-width: 560px; }

/* MUTATORS — toggle chips on the title screen */
.mutators {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
}
.mutLabel {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: #ff00d4;
  text-shadow: 2px 2px 0 #000, 0 0 14px #ff00d4;
}
.mutLabel small {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #cfc8e8;
  text-shadow: none;
  margin-top: 2px;
}
.mutChips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
/* override the loud default .overlay button styling with a compact chip look */
.overlay .mutChip {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  padding: 9px 18px;
  color: #cfc8e8;
  background: linear-gradient(160deg, rgba(40,0,80,.6), rgba(8,0,24,.7));
  border: 3px solid #5a4b8a;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  filter: grayscale(.5);
  opacity: .82;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.overlay .mutChip:hover { transform: translateY(-3px) scale(1.04); }
.overlay .mutChip:active { transform: scale(.95); }
.overlay .mutChip.on {
  color: #fff;
  border-color: #00ff66;
  background: linear-gradient(160deg, rgba(0,80,40,.7), rgba(40,0,80,.7));
  box-shadow: 0 0 22px #00ff66, 4px 4px 0 #f0f;
  filter: none;
  opacity: 1;
}

/* mutations are now random in-run EVENTS, not toggles — show them as informational
   "incoming" badges: no pointer, no click affordance, a faint danger pulse */
.overlay .mutChip.ev {
  cursor: default;
  border-color: #a0307a;
  color: #f0bfe0;
  background: linear-gradient(160deg, rgba(80,0,60,.55), rgba(20,0,30,.7));
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  filter: none;
  opacity: .9;
  animation: mutpulse 1.8s ease-in-out infinite;
}
.overlay .mutChip.ev:hover { transform: none; }
.overlay .mutChip.ev:active { transform: none; }
@keyframes mutpulse {
  0%, 100% { box-shadow: 3px 3px 0 rgba(0,0,0,.4), 0 0 4px rgba(255,0,212,.2); }
  50%      { box-shadow: 3px 3px 0 rgba(0,0,0,.4), 0 0 16px rgba(255,0,212,.6); }
}

@keyframes rainbow { to { background-position: 300% 0; } }

/* ============================================================
   CAREER RANK BADGE — title screen (#start) + career panel (#career)
   Sibling of .statsGrid/.scorecard. .crTier color + .crBar>i fill are
   set inline by JS, so we lean on currentColor and never hardcode tier hue.
   ============================================================ */
.careerBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 8px auto 4px;
  padding: 12px 26px 14px;
  max-width: 460px;
  background: linear-gradient(160deg, rgba(40,0,80,.62), rgba(8,0,24,.72));
  border: 2px solid rgba(0,229,255,.4);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(0,0,0,.45), inset 0 0 18px rgba(0,229,255,.08);
}
.careerBadge .crEmoji {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.careerBadge .crTier {
  /* color is applied inline via JS — currentColor drives the glow + bar fill */
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 36px;
  letter-spacing: 2px;
  line-height: .9;
  text-shadow: 0 0 16px currentColor, 2px 2px 0 #000;
}
.careerBadge .crBar {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 9px;
  margin-top: 2px;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 0 4px rgba(0,0,0,.5);
  overflow: hidden;
}
.careerBadge .crBar > i {
  display: block;
  height: 100%;
  width: 0%;               /* width set inline as a % by JS */
  background: currentColor; /* inline tier color on .crBar>i drives the fill */
  border-radius: 6px;
  box-shadow: 0 0 8px currentColor;
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.careerBadge .crSub {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cfc8e8;
  opacity: .85;
}

/* prominent variant at the top of the career panel */
.careerBadge.inPanel {
  max-width: 540px;
  margin: 4px auto 18px;
  padding: 16px 34px 18px;
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 26px rgba(0,229,255,.22), inset 0 0 22px rgba(0,229,255,.1);
}
.careerBadge.inPanel .crEmoji { font-size: 42px; }
.careerBadge.inPanel .crTier { font-size: 48px; }
.careerBadge.inPanel .crBar { max-width: 380px; height: 11px; }
.careerBadge.inPanel .crSub { font-size: 13px; }

/* ============================================================
   UNLOCK GRID — inside #career (#unlockGrid). Earned vs locked contrast
   creates the "gotta collect them all" pull. Sibling of .statsGrid.
   ============================================================ */
#unlockGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 18px;
  width: 100%;
  max-width: 1060px;
  margin: 6px auto 24px;
  font-family: system-ui, sans-serif;
}
.unlock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(90,75,138,.55);
  transition: transform .12s ease, box-shadow .2s ease,
              border-color .2s ease, opacity .2s ease, filter .2s ease;
}
.unlock .uIcon {
  font-size: 38px;
  line-height: 1;
  transition: filter .2s ease, transform .12s ease;
}
.unlock .uName {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 1.02;
  color: #fff;
}
.unlock .uDesc {
  font-size: 12px;
  letter-spacing: .5px;
  line-height: 1.35;
  color: #cfc8e8;
  opacity: .85;
}

/* EARNED — vivid neon, full color, rewarding ✓ corner */
.unlock.done {
  border-color: #00ff66;
  background: linear-gradient(160deg, rgba(0,80,40,.55), rgba(40,0,80,.6));
  box-shadow: 0 0 20px rgba(0,255,102,.4), 4px 4px 0 rgba(255,0,255,.5);
}
.unlock.done:hover { transform: translateY(-3px) scale(1.03); }
.unlock.done .uIcon { filter: drop-shadow(0 0 10px rgba(0,255,102,.6)); }
.unlock.done .uName {
  color: #fff;
  text-shadow: 0 0 12px #00ff66, 2px 2px 0 #f0f;
}
.unlock.done .uName::after {
  content: "✓ UNLOCKED";
  display: block;
  margin-top: 4px;
  font-family: "BebasNeue", "Anton", "Impact", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #00ff66;
  text-shadow: 0 0 8px #00ff66;
}

/* LOCKED — greyed, desaturated, muted so earned ones pop by contrast */
.unlock.locked {
  border-color: rgba(90,75,138,.4);
  background: rgba(20,12,40,.45);
  opacity: .55;
  filter: grayscale(.7);
}
.unlock.locked:hover { opacity: .8; }
.unlock.locked .uIcon { filter: grayscale(1) brightness(.7); opacity: .6; }
.unlock.locked .uName { color: #a79fc4; text-shadow: none; }

/* unlock section heading in the career panel */
.unlockHdr {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  letter-spacing: .04em;
  color: #ffe600;
  text-shadow: 0 0 12px rgba(255,230,0,.6), 2px 2px 0 #000;
  margin: 18px 0 10px;
  font-size: clamp(20px, 3.4vw, 30px);
}
/* end-of-run fresh-unlock row (reuses .unlock cards) */
.endUnlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.endUnlocks .unlock { min-width: 160px; flex: 0 1 200px; }

/* ============================================================
   MENU BUTTON ROW (title screen) + HOW TO PLAY help panel (#help)
   ============================================================ */
.menuBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}
.helpHdr {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  letter-spacing: .04em;
  color: #ffe600;
  text-shadow: 0 0 12px rgba(255,230,0,.6), 2px 2px 0 #000;
  margin: 20px 0 8px;
  font-size: clamp(20px, 3.4vw, 30px);
}
.sub.small { font-size: 13px; opacity: .85; margin: 0 0 8px; }

/* HOW TO PLAY tabs */
.tabBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 16px;
}
/* selectors scoped under #help/#career to beat the generic `.overlay button` rule */
#help .tabBtn,
#career .tabBtn {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(90,75,138,.55);
  color: #cfc8e8;
  cursor: pointer;
  box-shadow: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#help .tabBtn:hover,
#career .tabBtn:hover { color: #fff; border-color: #00e5ff; }
#help .tabBtn.active,
#career .tabBtn.active {
  color: #1a0a2e;
  background: #ffe600;
  border-color: #ffe600;
  box-shadow: 0 0 16px rgba(255,230,0,.5);
}
.tabPanel { display: none; }
.tabPanel.active { display: block; }
#help .trickList {
  width: 100%;
  max-width: 940px;
  margin: 10px auto 16px;
  /* two-up on a wide window so the cards use the horizontal room instead of
     stacking into one tall column */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.trick {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(90,75,138,.55);
}
.trick .tIcon { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; }
.trick .tIcon img {
  width: 52px; height: 52px; object-fit: contain; display: block;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.35));
}
.trick .tBody { flex: 1 1 auto; }
.trick .tHead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.trick .tName {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 20px; letter-spacing: 1px; color: #ffe600;
  text-shadow: 0 0 10px rgba(255,230,0,.5), 2px 2px 0 #000;
}
.trick .tReward {
  font-family: "BebasNeue", "Anton", "Impact", sans-serif;
  font-size: 16px; letter-spacing: 1px; color: #00ff66;
  text-shadow: 0 0 8px rgba(0,255,102,.5);
}
.trick .tDesc { margin: 0; font-size: 13px; line-height: 1.42; color: #cfc8e8; }

/* ============================================================
   RIVALS GALLERY — inside #career (#rivalGrid). Sibling of #unlockGrid.
   beaten = conquered trophy (neon-green), unknown = mystery silhouette
   (greyed, like .locked) to fuel the "hunt them down" pull. .final is the
   royal gold/magenta boss card. Reuses the unlock palette + Anton/BebasNeue.
   ============================================================ */
.rivalHdr {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  letter-spacing: .04em;
  color: #ffe600;
  text-shadow: 0 0 12px rgba(255,230,0,.6), 2px 2px 0 #000;
  margin: 18px 0 10px;
  font-size: clamp(20px, 3.4vw, 30px);
}
#rivalGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 18px;
  width: 100%;
  max-width: 1060px;
  margin: 6px auto 24px;
  font-family: system-ui, sans-serif;
}
.rival {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px 14px;
  border-radius: 10px;
  background: rgba(40,0,80,.5);
  border: 2px solid rgba(90,75,138,.55);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .25s ease,
              border-color .25s ease, opacity .25s ease, filter .25s ease;
}
.rival .rIcon {
  font-size: 42px;
  line-height: 1;
  transition: filter .25s ease, transform .14s ease;
}
/* a beaten rival shows its real boss sprite; sized off the rIcon font-size so the
   default/final/unknown size rules above all keep working without per-state tweaks */
.rival .rIcon img {
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  display: block;
}

/* inline UI icon — AI-gen sprite standing in for the old emoji glyphs in the
   title-screen chrome (how-to list, mode/mutation chips, buttons, headers).
   Sized to the surrounding text so it reads like the emoji it replaced. */
.ico {
  height: 1.25em;
  width: auto;
  vertical-align: -0.28em;
  margin-right: .12em;
  -webkit-user-drag: none;
  user-select: none;
}
.rival .rName {
  font-family: "Anton", "Impact", "Arial Black", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.02;
  color: #fff;
}
.rival .rTitle {
  font-family: "BebasNeue", "Anton", "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-style: italic;
  text-transform: uppercase;
  color: #cfc8e8;
  opacity: .8;
}
.rival .rLore {
  font-size: 12px;
  letter-spacing: .5px;
  line-height: 1.35;
  color: #cfc8e8;
  opacity: .82;
  max-width: 22ch;
}

/* BEATEN — conquered trophy: vivid neon-green glow, magenta drop-shadow */
.rival.beaten {
  border-color: #00ff66;
  background: linear-gradient(160deg, rgba(0,80,40,.55), rgba(40,0,80,.6));
  box-shadow: 0 0 20px rgba(0,255,102,.4), 4px 4px 0 rgba(255,0,255,.5);
}
.rival.beaten:hover { transform: translateY(-3px) scale(1.03); }
.rival.beaten .rIcon { filter: drop-shadow(0 0 10px rgba(0,255,102,.6)); }
.rival.beaten .rName {
  color: #fff;
  text-shadow: 0 0 12px #00ff66, 2px 2px 0 #f0f;
}
.rival.beaten .rName::after {
  content: "REKT";
  display: block;
  margin-top: 4px;
  font-family: "BebasNeue", "Anton", "Impact", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #00ff66;
  text-shadow: 0 0 8px #00ff66;
}
.rival.beaten .rTitle { color: #b6ffd2; opacity: .95; }
.rival.beaten .rLore { color: #eafff2; opacity: .95; }

/* UNKNOWN — mystery silhouette: greyed/desaturated like .locked, teased */
.rival.unknown {
  border-color: rgba(90,75,138,.4);
  background: rgba(20,12,40,.45);
  opacity: .55;
  filter: grayscale(.7);
}
.rival.unknown:hover { opacity: .82; }
.rival.unknown .rIcon {
  filter: grayscale(1) brightness(.7) blur(.4px);
  opacity: .55;
  transform: scale(.95);
}
.rival.unknown .rName { color: #a79fc4; text-shadow: none; }
.rival.unknown .rTitle { color: #8c83b0; opacity: .7; }
.rival.unknown .rLore { color: #8c83b0; opacity: .65; font-style: italic; }

/* FINAL BOSS — royal card. Bigger; ominous when unknown, ultimate when beaten */
.rival.final {
  grid-column: 1 / -1;
  padding: 22px 18px 18px;
}
.rival.final .rIcon { font-size: 54px; }
.rival.final .rName { font-size: 22px; letter-spacing: 2px; }

/* dethroned final boss = ultimate trophy: shimmering gold + magenta crown */
.rival.final.beaten {
  border-color: #ffe600;
  background: linear-gradient(160deg, rgba(80,60,0,.55), rgba(60,0,70,.62));
  box-shadow: 0 0 30px rgba(255,230,0,.5),
              0 0 48px rgba(255,0,255,.3),
              inset 0 0 26px rgba(255,230,0,.12),
              5px 5px 0 rgba(255,0,255,.55);
  animation: rivalRoyalShimmer 2.4s ease-in-out infinite;
}
.rival.final.beaten::before {
  content: "FINAL BOSS";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "BebasNeue", "Anton", "Impact", sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: #ffe600;
  filter: drop-shadow(0 0 8px rgba(255,230,0,.8));
}
.rival.final.beaten .rIcon { filter: drop-shadow(0 0 14px rgba(255,230,0,.75)); }
.rival.final.beaten .rName {
  color: #fff;
  text-shadow: 0 0 16px #ffe600, 2px 2px 0 #f0f;
}
.rival.final.beaten .rName::after {
  content: "DETHRONED";
  color: #ffe600;
  text-shadow: 0 0 10px #ffe600;
}
@keyframes rivalRoyalShimmer {
  0%, 100% { box-shadow: 0 0 30px rgba(255,230,0,.5),
                         0 0 48px rgba(255,0,255,.3),
                         inset 0 0 26px rgba(255,230,0,.12),
                         5px 5px 0 rgba(255,0,255,.55); }
  50%      { box-shadow: 0 0 42px rgba(255,230,0,.7),
                         0 0 64px rgba(255,0,255,.45),
                         inset 0 0 32px rgba(255,230,0,.2),
                         5px 5px 0 rgba(255,0,255,.55); }
}

/* lurking final boss = ominous oversized silhouette */
.rival.final.unknown {
  border-color: rgba(120,0,80,.5);
  background: rgba(14,4,22,.6);
  opacity: .62;
  filter: grayscale(.85) brightness(.85);
}
.rival.final.unknown .rIcon {
  font-size: 64px;
  filter: grayscale(1) brightness(.45) blur(.6px);
  opacity: .5;
}
.rival.final.unknown .rName { color: #7a4a8c; text-shadow: 0 0 10px rgba(120,0,80,.4); }