/* ============================================================
   KUDUMBAVILAKKU - RUN ED RUN
   UI styles. Gold / temple-vault theme.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #070503;
  color: #f6e6c4;
  font-family:
    "Trebuchet MS",
    "Segoe UI",
    Roboto,
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

:root {
  --gold-1: #fff3c4;
  --gold-2: #ffd35c;
  --gold-3: #e3a92b;
  --gold-4: #a86a12;
  --ink: #0b0703;
  --ink-2: #1a1108;
  --red: #c0392b;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* THE BANNER BAND.
     Everything transient - the toast, the masspadi card, the rescue and
     flood banners - hangs off these two lines instead of picking its own
     percentage. They used to sit at 24%, 30% and 34%, and CFG.HORIZON is
     0.26, so all three landed on the road you are reading rather than in
     the sky above it.

     --hud-h is the HUD block rebuilt from the same parts it is actually
     made of: the screen padding, the score at its clamped size, and the
     distance line under it. Deriving it beats picking a pixel floor by
     eye, because the score is clamped on vw while the safe area is not -
     a floor tuned on a phone rides up into the score on a wide short
     window, and one tuned there sits too low on the phone.

     The band hangs straight off --hud-h. It used to be max(12%, that),
     which reads like a safety net and is the opposite: max() takes the
     LOWER of the two on screen, so on anything tall the 12% won and
     pushed the banners 30-40px further down the sky than the score
     actually needed. Sitting them right under the HUD is both the
     highest they can go and the most road left visible. --band-2 is the
     second line, for the cards, so a toast and a card together do not
     print over each other - the gap is wider than the toast is tall. */
  --band-1: calc(var(--hud-h) + 8px);
  --band-2: calc(var(--hud-h) + 42px);
}

#stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------- screens ---------------- */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
  z-index: 5;
}
.screen.on {
  display: flex;
}
.screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* if the content is taller than the screen, centring must not cut off the top */
.screen > * {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.screen.hud > * {
  margin-top: 0;
  margin-bottom: 0;
}
.screen.hud {
  pointer-events: none;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
.screen.hud .icon-btn,
.screen.hud .pill {
  pointer-events: auto;
}

.screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(255, 190, 70, 0.1),
      transparent 60%
    ),
    radial-gradient(
      100% 100% at 50% 100%,
      rgba(0, 0, 0, 0.82),
      rgba(6, 4, 2, 0.62) 55%,
      rgba(6, 4, 2, 0.3)
    );
  z-index: -1;
}
.screen.hud::before {
  display: none;
}

/* ---------------- boot ---------------- */
.boot-box {
  text-align: center;
  animation: fadeUp 0.6s ease;
}
.boot-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    var(--gold-1),
    var(--gold-2) 42%,
    var(--gold-3) 66%,
    var(--gold-4)
  );
  box-shadow:
    0 0 34px rgba(255, 190, 60, 0.45),
    inset 0 -5px 12px rgba(120, 60, 0, 0.55);
  animation: spinCoin 2.2s linear infinite;
}
.boot-title {
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  letter-spacing: 3px;
  font-size: 26px;
  color: var(--gold-2);
}
.boot-title.ml {
  font-family:
    "Malayalam Sangam MN", "Malayalam MN", "Nirmala UI", "Noto Sans Malayalam",
    "Noto Serif Malayalam", Manjari, Rachana, Meera, AnjaliOldLipi, Kartika,
    sans-serif;
  letter-spacing: 0;
  line-height: 1.45;
}
.boot-rom {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 5px;
  color: #b4934f;
}
.boot-sub {
  letter-spacing: 6px;
  font-size: 11px;
  color: #b99a63;
  margin-top: 4px;
}
.boot-track {
  width: 220px;
  height: 5px;
  margin: 20px auto 8px;
  background: rgba(255, 220, 150, 0.14);
  border-radius: 4px;
  overflow: hidden;
}
.boot-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
  transition: width 0.18s linear;
}
.boot-tip {
  font-size: 11px;
  color: #8d7550;
  letter-spacing: 1.4px;
}

/* ---------------- tap gate ---------------- */
.tap-box {
  text-align: center;
  cursor: pointer;
}
.coin-spin {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    var(--gold-1),
    var(--gold-2) 42%,
    var(--gold-3) 70%,
    var(--gold-4)
  );
  box-shadow: 0 0 26px rgba(255, 190, 60, 0.5);
  animation: spinCoin 1.6s linear infinite;
}
.tap-text {
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 3px;
  font-size: 20px;
  color: var(--gold-2);
  animation: pulse 1.6s ease-in-out infinite;
}
.tap-sub {
  font-size: 11px;
  color: #8d7550;
  letter-spacing: 1.6px;
  margin-top: 8px;
}

/* ---------------- main menu ---------------- */
.menu-wrap {
  text-align: center;
  width: 100%;
  max-width: 560px;
  animation: fadeUp 0.55s ease;
}

.crest {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 211, 92, 0),
      rgba(255, 211, 92, 0.55),
      rgba(255, 211, 92, 0) 60%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 211, 92, 0.22),
      transparent 70%
    );
  border-radius: 50%;
  position: relative;
  animation: spinSlow 9s linear infinite;
}
.crest::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: linear-gradient(
    160deg,
    var(--gold-1),
    var(--gold-3) 55%,
    var(--gold-4)
  );
  -webkit-clip-path: polygon(
    50% 0%,
    62% 36%,
    100% 50%,
    62% 64%,
    50% 100%,
    38% 64%,
    0% 50%,
    38% 36%
  );
  clip-path: polygon(
    50% 0%,
    62% 36%,
    100% 50%,
    62% 64%,
    50% 100%,
    38% 64%,
    0% 50%,
    38% 36%
  );
}

.title {
  position: relative;
  margin: 0;
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  font-size: clamp(26px, 8.4vw, 62px);
  letter-spacing: clamp(1px, 0.7vw, 5px);
  line-height: 1;
  overflow: hidden;
}

/* ---- the name in Malayalam ----
   Malayalam stacks vowel signs above and below the base letter and joins
   consonants into conjuncts, so it needs room that Latin does not: a taller
   line box, no clipping, and ZERO letter-spacing. Spacing out an Indic
   script pushes the marks off their bases and breaks the conjuncts apart,
   which reads as broken rather than styled. */
.title.ml,
.title.ml .t-line {
  font-family:
    "Malayalam Sangam MN", "Malayalam MN", "Nirmala UI", "Noto Sans Malayalam",
    "Noto Serif Malayalam", Manjari, Rachana, Meera, AnjaliOldLipi, Kartika,
    sans-serif;
  /* NOT bold. Almost none of these families ship a real bold face, so the
     browser fakes one by smearing the regular - which thickens the vowel
     signs into their base letters and closes the counters in ka and bha.
     The weight here comes from size, the gold gradient and the glow. */
  font-weight: 400;
  /* a starting point only - fitTitle() in ui.js measures the word and
     shrinks this until it fits, because how wide the title runs depends
     on which Malayalam font the device happened to have */
  font-size: clamp(28px, 10vw, 72px);
  letter-spacing: 0;
  line-height: 1.42;
  white-space: nowrap;
}
.title.ml {
  /* Nothing may clip here. Malayalam hangs vowel signs above and below
     the line box and the title carries a drop-shadow glow, and the old
     overflow:hidden cut both. The shine is kept inside by its own
     animation range instead - see @keyframes sweepIn. */
  overflow: visible;
  padding: 4px 10px 8px;
}
/* a narrower, softer gleam that stays within the heading */
.title.ml .shine {
  width: 26%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 245, 210, 0.3),
    transparent
  );
  animation: sweepIn 3.6s ease-in-out 0.8s infinite;
}
/* if the device has no Malayalam font we put the romanisation in this
   element instead, and it wants the original Latin treatment back */
.title.ml.fallback {
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  font-size: clamp(24px, 7.6vw, 56px);
  letter-spacing: clamp(1px, 0.6vw, 4px);
  line-height: 1.12;
}

.title-rom {
  margin-top: -2px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(11px, 3vw, 17px);
  letter-spacing: clamp(3px, 1.5vw, 9px);
  color: #c9a458;
  animation: fadeUp 0.6s ease 0.18s backwards;
}
.title-rom.hide {
  display: none;
}

/* ---- the baked title ----
   An SVG of fixed aspect ratio, so it fits by width and needs no font,
   no measuring and no shrink-to-fit pass. */
.title.ml .t-line {
  display: block;
  width: 100%;
}
.title.ml svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 13px rgba(255, 170, 40, 0.3));
}
.boot-title.ml svg {
  display: block;
  width: 248px;
  height: auto;
  margin: 0 auto;
}

/* his name on the select card, under the Latin one */
.card .cml {
  margin: 2px 0 0;
  font-family:
    "Malayalam Sangam MN", "Malayalam MN", "Nirmala UI", "Noto Sans Malayalam",
    "Noto Serif Malayalam", Manjari, Rachana, Meera, AnjaliOldLipi, Kartika,
    sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  color: var(--gold-2);
}
.t-line {
  display: inline-block;
  background: linear-gradient(
    180deg,
    #fffbe8 4%,
    var(--gold-2) 34%,
    var(--gold-3) 56%,
    #8a5a0e 76%,
    var(--gold-2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(255, 170, 40, 0.28));
  animation: slam 0.7s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* fallback for browsers without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-line {
    color: var(--gold-2);
    -webkit-text-fill-color: var(--gold-2);
  }
}
.shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-18deg);
  animation: sweep 3.6s ease-in-out 0.8s infinite;
  pointer-events: none;
}

.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 2px;
  font-size: clamp(10px, 2.6vw, 14px);
  letter-spacing: clamp(3px, 1.4vw, 8px);
  color: #d9b877;
  animation: fadeUp 0.6s ease 0.25s backwards;
}
.subtitle .rule {
  display: block;
  width: clamp(24px, 12vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3));
}
.subtitle .rule:last-child {
  background: linear-gradient(270deg, transparent, var(--gold-3));
}

/* the three thieves standing under the title */
.heroes {
  width: 100%;
  margin: 6px 0 2px;
}
.heroes canvas {
  display: block;
  width: 100%;
  /* a little taller than it was: the name plate sits under their feet */
  height: clamp(118px, 26vh, 218px);
}

.best-line {
  margin: 14px 0 20px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #a98f60;
  animation: fadeUp 0.6s ease 0.35s backwards;
}
.best-line b {
  color: var(--gold-2);
}
.best-line .dot {
  opacity: 0.5;
  margin: 0 6px;
}

.menu-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  animation: fadeUp 0.6s ease 0.45s backwards;
}

.btn {
  position: relative;
  min-width: 226px;
  padding: 13px 26px;
  border: 1px solid rgba(255, 211, 92, 0.45);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(58, 40, 16, 0.92),
    rgba(26, 17, 8, 0.92)
  );
  color: var(--gold-2);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 17px;
  letter-spacing: 2.4px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 224, 150, 0.18);
}
/* Impact has no Malayalam, so a button set in it falls back per glyph and
   the label arrives in whatever face the system picks - and the 2.4px
   tracking pulls the vowel signs away from the consonants they hang on.
   Slightly larger, because Malayalam carries more detail per glyph than
   capitals do at the same size. */
.btn.ml {
  font-family:
    "Malayalam Sangam MN", "Malayalam MN", "Nirmala UI", "Noto Sans Malayalam",
    "Noto Serif Malayalam", Manjari, Rachana, Meera, AnjaliOldLipi, Kartika,
    sans-serif;
  font-size: 19px;
  letter-spacing: 0;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 180, 50, 0.22);
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}
.btn.primary {
  background: linear-gradient(
    180deg,
    #ffe89a,
    var(--gold-2) 38%,
    var(--gold-3) 72%,
    #9a6410
  );
  color: #3a2405;
  border-color: #ffe9a8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.primary:hover {
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 190, 60, 0.45);
}
.btn.ghost {
  background: rgba(20, 13, 6, 0.6);
  color: #c7a769;
  border-color: rgba(255, 211, 92, 0.22);
  font-size: 15px;
  min-width: 200px;
}
.btn.wide {
  width: 100%;
  max-width: 320px;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.menu-foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  animation: fadeUp 0.6s ease 0.55s backwards;
}
.ver {
  font-size: 10px;
  letter-spacing: 2px;
  color: #6b5738;
}

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 211, 92, 0.32);
  background: rgba(18, 12, 6, 0.72);
  color: var(--gold-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:active {
  transform: scale(0.94);
}
.ico-snd {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--gold-2);
  -webkit-clip-path: polygon(0 34%, 32% 34%, 62% 4%, 62% 96%, 32% 66%, 0 66%);
  clip-path: polygon(0 34%, 32% 34%, 62% 4%, 62% 96%, 32% 66%, 0 66%);
}
.icon-btn.muted .ico-snd {
  background: #6f5c3a;
}
.icon-btn.muted::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--red);
  transform: rotate(-42deg);
}

/* ---------------- panels ---------------- */
.panel {
  width: 100%;
  max-width: 900px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 211, 92, 0.22);
  background: linear-gradient(
    180deg,
    rgba(26, 17, 8, 0.93),
    rgba(10, 7, 3, 0.95)
  );
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 220, 150, 0.1);
  animation: fadeUp 0.35s ease;
}
.panel.narrow {
  max-width: 460px;
}
.panel.center {
  text-align: center;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-head h2,
.panel h2 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(16px, 4.4vw, 22px);
  letter-spacing: 3px;
  color: var(--gold-2);
}
.panel-head .spacer {
  width: 40px;
}
.panel h2.gold {
  margin-bottom: 18px;
}
.panel-foot {
  margin-top: 14px;
  text-align: center;
}
.sel-name {
  font-size: 12px;
  letter-spacing: 2px;
  color: #a98f60;
  margin-bottom: 10px;
  min-height: 16px;
}

/* ---------------- character cards ---------------- */
.cards {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.card {
  position: relative;
  width: 178px;
  padding: 10px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 211, 92, 0.18);
  background: linear-gradient(
    180deg,
    rgba(48, 32, 12, 0.55),
    rgba(14, 9, 4, 0.75)
  );
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  flex: 0 0 auto;
}
.card:hover {
  transform: translateY(-4px);
}
.card.sel {
  border-color: var(--gold-2);
  box-shadow:
    0 0 0 1px rgba(255, 211, 92, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(255, 180, 50, 0.22);
  transform: translateY(-4px);
}
.card canvas {
  display: block;
  width: 100%;
  height: 168px;
  border-radius: 10px;
  background: radial-gradient(
    70% 70% at 50% 40%,
    rgba(255, 190, 70, 0.14),
    rgba(0, 0, 0, 0.35)
  );
}
.card h3 {
  margin: 8px 0 1px;
  text-align: center;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 1.6px;
  font-size: 15px;
  color: var(--gold-2);
}
.card .ctitle {
  margin: 0 0 8px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #a2865a;
  text-transform: uppercase;
}
.stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 9px;
  letter-spacing: 1px;
  color: #9d8358;
  text-align: center;
}
.stat-row span {
  width: 40px;
  text-align: center;
}
.bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 220, 150, 0.12);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
  border-radius: 3px;
}
.perk {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 190, 60, 0.1);
  border: 1px solid rgba(255, 190, 60, 0.18);
  font-size: 9.5px;
  line-height: 1.35;
  color: #e7c98c;
  text-align: center;
  letter-spacing: 0.4px;
}
.sel-name,
.card .ctitle,
.card h3,
.card .perk,
.panel h2,
.panel-head h2 {
  text-align: center;
}
.card .tick {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-2);
  color: #3a2405;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
  display: none;
}
.card.sel .tick {
  display: block;
}

/* ---------------- how to play ---------------- */
.how-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 220, 150, 0.05);
  font-size: 12px;
}
.how-row .key {
  min-width: 76px;
  color: var(--gold-2);
  font-weight: bold;
  letter-spacing: 1px;
}
.how-row .sw {
  min-width: 92px;
  color: #b1955f;
  font-size: 11px;
}
.how-row .d {
  flex: 1;
  color: #e3d2ab;
  text-align: right;
}
.how-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.lg {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: #cdb37c;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
}
.lg b {
  color: #f0dcae;
  font-weight: normal;
}
.lg span {
  margin-left: auto;
  color: var(--gold-2);
}
.how-note {
  margin: 14px 2px 0;
  font-size: 11px;
  line-height: 1.6;
  color: #9b8154;
  font-style: italic;
  text-align: center;
}

/* icons */
.ic {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.ic.coin {
  background: radial-gradient(
    circle at 34% 30%,
    #fff3c4,
    var(--gold-2) 45%,
    var(--gold-3) 72%,
    var(--gold-4)
  );
  box-shadow: inset 0 -2px 3px rgba(120, 60, 0, 0.4);
}
.ic.bar {
  border-radius: 2px;
  width: 16px;
  height: 10px;
  background: linear-gradient(
    160deg,
    #fff0b8,
    var(--gold-2) 40%,
    var(--gold-3) 70%,
    #8d5a0d
  );
  transform: skewX(-12deg);
}
.ic.mag {
  border-radius: 3px;
  background: linear-gradient(180deg, #ff6b5a, #b8241a);
}
.ic.shield {
  border-radius: 4px 4px 50% 50%;
  background: linear-gradient(180deg, #7fd4ff, #1c74b5);
}
.ic.boost {
  border-radius: 2px;
  background: linear-gradient(180deg, #b48cff, #5b2ec9);
}
.ic.brick {
  border-radius: 2px;
  width: 16px;
  height: 10px;
  background: linear-gradient(160deg, #d08054, #a8543a 55%, #7d3a26);
}
.ic.mic {
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(180deg, #d9dee6 55%, #e03127 55%);
}
.ic.food {
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #6b3d18 0 26%,
    #d99a5c 27%,
    #a9682f 100%
  );
}
.lg.bad {
  background: rgba(120, 30, 20, 0.3);
}
.lg.bad b {
  color: #ffb4a4;
}
.lg.bad span {
  color: #ff8e78;
}
.how-note .warn {
  color: #ff8e78;
  font-style: normal;
}
.pill.brickpill {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.pill.brickpill.ready {
  border-color: #7dd88a;
  box-shadow: 0 0 16px rgba(110, 230, 130, 0.5);
  color: #cfffd6;
}

.ic.mass {
  background: linear-gradient(140deg, #fff3c4, var(--gold-2) 45%, #7fd4ff);
}
.ic.plane {
  border-radius: 0;
  background: #dff0ff;
  -webkit-clip-path: polygon(
    50% 0%,
    58% 34%,
    100% 62%,
    100% 72%,
    55% 58%,
    55% 84%,
    72% 95%,
    72% 100%,
    50% 92%,
    28% 100%,
    28% 95%,
    45% 84%,
    45% 58%,
    0% 72%,
    0% 62%,
    42% 34%
  );
  clip-path: polygon(
    50% 0%,
    58% 34%,
    100% 62%,
    100% 72%,
    55% 58%,
    55% 84%,
    72% 95%,
    72% 100%,
    50% 92%,
    28% 100%,
    28% 95%,
    45% 84%,
    45% 58%,
    0% 72%,
    0% 62%,
    42% 34%
  );
}

/* ---------------- HUD ---------------- */
.hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.hud-l {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.score {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(26px, 6.6vw, 40px);
  line-height: 1;
  color: #fff0c0;
  letter-spacing: 1px;
}
.dist {
  font-size: 11px;
  letter-spacing: 3px;
  color: #d7b877;
  margin-top: 3px;
}
.hud-r {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 20px;
  background: rgba(12, 8, 3, 0.6);
  border: 1px solid rgba(255, 211, 92, 0.26);
  font-size: 13px;
  color: #ffe9b0;
  font-weight: bold;
}
.zone-row {
  display: flex;
  margin-top: 10px;
}
.zone-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 16px;
  background: rgba(12, 8, 3, 0.55);
  border: 1px solid rgba(255, 211, 92, 0.22);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: #e8d3a2;
  transition:
    border-color 0.4s ease,
    color 0.4s ease;
}
.zone-pill .zdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
}
.zone-pill b {
  color: var(--gold-2);
  letter-spacing: 1.4px;
  font-weight: normal;
}
.zone-pill.ny {
  border-color: rgba(120, 190, 255, 0.4);
  color: #cfe6ff;
}
.zone-pill.ny .zdot {
  background: #7fd4ff;
  box-shadow: 0 0 8px #7fd4ff;
}
.zone-pill.ny b {
  color: #7fd4ff;
}
.zone-pill.soon b {
  color: #ff9a6a;
  animation: pulse 1s ease-in-out infinite;
}

.power-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pw {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 16px;
  background: rgba(12, 8, 3, 0.55);
  border: 1px solid rgba(255, 211, 92, 0.2);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #ffe9b0;
}
.pw.slow {
  border-color: rgba(255, 150, 90, 0.45);
  color: #ffd0b0;
}
.pw.swim {
  border-color: rgba(120, 190, 255, 0.5);
  color: #bfe2ff;
}
.pw.kallu {
  border-color: rgba(240, 248, 240, 0.55);
  color: #f2fbf4;
}
.pw.held {
  border-color: rgba(255, 150, 90, 0.3);
  color: #c9a184;
  opacity: 0.8;
}
.pw.kallu .pw-fill {
  background: #f4fbf5;
}
.ic.kallu {
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, #fbfbf6 38%, #b3794c 38%);
}
.pw.slow .pw-fill {
  background: #ff9a5c;
}
.pw .pw-track {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.pw .pw-fill {
  height: 100%;
  background: var(--gold-2);
}

.countdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  text-align: center;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(56px, 18vw, 130px);
  color: #fff3c4;
  text-shadow:
    0 0 36px rgba(255, 180, 50, 0.8),
    0 6px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.toast {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band-1);
  text-align: center;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(16px, 4.6vw, 28px);
  letter-spacing: 3px;
  color: #ffe08a;
  text-shadow: 0 0 24px rgba(255, 170, 40, 0.8);
  opacity: 0;
  pointer-events: none;
}
.toast.show {
  animation: toastPop 1s ease both;
}

/* ---------------- losing gold to the mic ---------------- */
.toast.bad {
  color: #ff7a5c;
  text-shadow: 0 0 24px rgba(255, 60, 30, 0.85);
}
@keyframes coinShake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-4px) scale(1.12);
  }
  40% {
    transform: translateX(4px) scale(1.12);
  }
  60% {
    transform: translateX(-3px) scale(1.06);
  }
  80% {
    transform: translateX(3px) scale(1.06);
  }
}
.pill.robbed {
  animation: coinShake 0.5s ease;
  border-color: #ff6a4a;
  box-shadow: 0 0 18px rgba(255, 70, 40, 0.6);
  color: #ffc7ba;
}

/* ---------------- the street saves you ---------------- */
/* The flood and rescue cards, on the same line as the masspadi card -
   the three are different events and are not expected together, and
   sharing the line keeps them all clear of the road. */
.rescue-banner {
  position: absolute;
  left: 50%;
  top: var(--band-2);
  transform: translate(-50%, 0) scale(0.7);
  padding: 9px 22px;
  border-radius: 16px;
  border: 1px solid rgba(125, 216, 138, 0.55);
  background: linear-gradient(
    120deg,
    rgba(14, 34, 18, 0.95),
    rgba(8, 18, 10, 0.95)
  );
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(90, 220, 110, 0.3);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.rescue-banner.show {
  animation: bannerPop 2.6s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
.flood-banner {
  border-color: rgba(120, 190, 255, 0.55);
  background: linear-gradient(
    120deg,
    rgba(10, 26, 40, 0.95),
    rgba(6, 14, 24, 0.95)
  );
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(80, 170, 255, 0.3);
}
.flood-banner b {
  color: #9fd8ff;
  text-shadow: 0 0 20px rgba(90, 180, 255, 0.55);
}
.flood-banner span {
  color: #c8e2f4;
}

.rescue-banner b {
  display: block;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(16px, 4.4vw, 24px);
  letter-spacing: 2px;
  color: #9ef0a8;
  text-shadow: 0 0 20px rgba(90, 230, 110, 0.5);
}
.rescue-banner span {
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: #cfe8d2;
}

/* ---------------- masspadi pickup banner ---------------- */
/* Out of the road and into the sky. At top 34% this landed below the
   horizon (CFG.HORIZON is 0.26), which is to say squarely on the lane
   you are trying to read, for 2.8s at a time. The max() keeps it clear
   of the HUD two ways at once: 12% is above the horizon on a tall
   screen, and the pixel floor stops it climbing into the score row on a
   short landscape one, where 12% is only a few dozen pixels. */
.masspadi {
  position: absolute;
  left: 50%;
  top: var(--band-2);
  transform: translate(-50%, 0) scale(0.6);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 9px;
  border-radius: 16px;
  border: 1px solid rgba(255, 211, 92, 0.45);
  background: linear-gradient(
    120deg,
    rgba(34, 22, 8, 0.96),
    rgba(14, 10, 4, 0.96)
  );
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(255, 190, 60, 0.25);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.masspadi.show {
  animation: bannerPop 2.8s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

/* The card animation, shared by all three. The version this replaced
   centred itself with translate(-50%, -50%), which would hang half of a
   card off the top of the screen now that they hang from their top edge.
   Same shape, no vertical centring, and it leaves upward. */
@keyframes bannerPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.6);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.06);
  }
  20% {
    transform: translate(-50%, 0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.96);
  }
}
.masspadi canvas {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}
.mass-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.mass-tag {
  font-size: 9px;
  letter-spacing: 2.4px;
  color: #9fd4ff;
}
.mass-txt b {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(14px, 3.6vw, 20px);
  letter-spacing: 2px;
  color: var(--gold-2);
  text-shadow: 0 0 18px rgba(255, 190, 60, 0.5);
}
.mass-sub {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #d8bd85;
}

@media (max-width: 460px) {
  .masspadi {
    gap: 10px;
    padding: 10px 14px 10px 10px;
  }
  .masspadi canvas {
    width: 40px;
    height: 40px;
  }
  .mass-sub {
    font-size: 9px;
    letter-spacing: 1px;
  }
}

/* A short viewport has hardly any sky to put this in. The HUD ends
   around 68px whatever the height, and the horizon is 26% of not very
   much - on a 600px-tall window that is a band of about 88px for a card
   76px tall, and it does not fit once you allow a margin. Shrink it and
   bring the floor down with it. Landscape on a phone (390px tall, band
   of 33px) has no answer short of not drawing it at all; there it still
   clips the top of the road, which is the best available. */
@media (max-height: 640px) {
  /* A short window has almost no sky. Pull the band up to 10%, close the
     gap, and bring the toast down in size - at 4.6vw it is 28px on a
     wide short window, which on its own is a third of the band. */
  :root {
    --band-1: calc(var(--hud-h) + 6px);
    --band-2: calc(var(--hud-h) + 32px);
  }
  .toast {
    font-size: clamp(14px, 3vw, 20px);
  }
  .masspadi {
    gap: 8px;
    padding: 7px 12px 7px 8px;
    border-radius: 12px;
  }
  .masspadi canvas {
    width: 34px;
    height: 34px;
  }
  .mass-txt b {
    font-size: clamp(12px, 3vw, 15px);
  }
  .mass-tag,
  .mass-sub {
    font-size: 8px;
    letter-spacing: 1px;
  }
}

/* ---------------- martyred abroad ---------------- */
.martyr {
  display: none;
  text-align: center;
  margin: 0 0 12px;
}
.martyr.on {
  display: block;
  animation: fadeUp 0.45s ease;
}

/* The frame is one canvas - wood, mount, oval, portrait and garland are
   all drawn in memorial(). Fixed backing size because the game over
   screen is still display:none when it is drawn, so there is nothing to
   measure; CSS scales it down from there. */
.martyr canvas {
  display: block;
  width: 100%;
  max-width: 228px;
  height: auto;
  margin: 0 auto;
}

/* the little engraved plaque under the frame */
.mt-plate {
  display: inline-block;
  margin: 10px auto 8px;
  padding: 5px 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #caa25a, #8a6a2c 46%, #6d5220);
  border: 1px solid rgba(255, 228, 160, 0.4);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 240, 200, 0.45);
}
.mt-plate b {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: #2a1e08;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.35);
}
.mt-text {
  margin: 0 auto 8px;
  max-width: 300px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #aab3c2;
  font-style: italic;
}

/* ---------------- game over ---------------- */
.over .caught {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(24px, 7.4vw, 38px);
  letter-spacing: 5px;
  color: #ff7a5c;
  text-shadow: 0 0 30px rgba(255, 60, 30, 0.55);
  animation: slam 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.chop-line {
  margin-top: 10px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(13px, 3.6vw, 18px);
  letter-spacing: 2px;
  color: #e9d6ae;
}
.chop-line b {
  font-size: 1.55em;
  color: #ff5f45;
  text-shadow: 0 0 18px rgba(255, 60, 30, 0.55);
}
.chop-flavor {
  margin-top: 3px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.6px;
  color: #9b8154;
  min-height: 15px;
}

.ov-score {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(38px, 12vw, 64px);
  line-height: 1;
  color: var(--gold-2);
  margin-top: 12px;
  text-shadow: 0 0 28px rgba(255, 180, 50, 0.4);
}
.ov-label {
  font-size: 10px;
  letter-spacing: 5px;
  color: #9b8154;
  margin-bottom: 14px;
}
.ov-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ov-stats > div {
  flex: 1;
  padding: 9px 4px;
  border-radius: 10px;
  background: rgba(255, 220, 150, 0.06);
}
.ov-stats b {
  display: block;
  font-size: 17px;
  color: #f4e2b4;
}
.ov-stats span {
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: #9b8154;
}
.ov-best {
  font-size: 11px;
  letter-spacing: 3px;
  color: #b99a63;
  margin-bottom: 16px;
}
.ov-best.new {
  color: var(--gold-2);
  animation: pulse 1s ease-in-out infinite;
}

/* ---------------- leaderboard ---------------- */
.bd-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.bd-tab {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid rgba(255, 211, 92, 0.18);
  border-radius: 10px;
  background: rgba(255, 220, 150, 0.04);
  color: #a98f60;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
}
.bd-tab.on {
  border-color: rgba(255, 211, 92, 0.5);
  background: linear-gradient(
    180deg,
    rgba(255, 211, 92, 0.16),
    rgba(255, 211, 92, 0.04)
  );
  color: var(--gold-2);
}
.bd-list {
  min-height: 150px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 220, 150, 0.05);
}
.bd-row.top {
  background: linear-gradient(
    90deg,
    rgba(255, 211, 92, 0.16),
    rgba(255, 220, 150, 0.04)
  );
}
/* a row carrying a speech bubble is several lines tall, so stop
   centring: the rank and the score belong next to the name, not
   halfway down beside what the name is shouting. */
.bd-row.said {
  align-items: flex-start;
}
/* your own row, wherever it landed */
.bd-row.me {
  border-color: rgba(255, 211, 92, 0.55);
}
.bd-rank {
  min-width: 24px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 15px;
  color: #9b8154;
  text-align: right;
}
.bd-row.top .bd-rank {
  color: var(--gold-2);
}
.bd-who {
  flex: 1;
  min-width: 0;
}
.bd-who b {
  display: block;
  font-size: 13px;
  color: #f4e2b4;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-who i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: #9b8154;
}
/* ---------------- the podium speech bubble ----------------
   What the top three are shouting, in a bubble hung under the name
   that said it. --say is the accent as a bare "r, g, b" triplet so
   one custom property can drive the border, both gradient stops and
   the tail: gold, silver and bronze, set once per rank below. */
.bd-say {
  --say: 255, 211, 92;
  position: relative;
  display: block;
  margin: 8px 0 1px;
  padding: 7px 11px;
  border: 1px solid rgba(var(--say), 0.34);
  border-radius: 4px 11px 11px 11px;
  background: linear-gradient(
    180deg,
    rgba(var(--say), 0.15),
    rgba(var(--say), 0.04)
  );
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 240, 200, 0.08);
  font-style: normal;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: rgb(var(--say));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* the tail, pointing up at the name. A rotated square showing only
   its two outer edges, sat on top of the bubble's own corner - the
   corner above it is square (border-radius 4px) so the two meet
   flush instead of leaving a notch of background between them. */
.bd-say-tail {
  position: absolute;
  top: -5px;
  left: 9px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid rgba(var(--say), 0.34);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 2px;
  background: rgba(var(--say), 0.15);
}

/* the name of whoever the line is aimed at, sitting inside the sentence
   rather than above it - it is a span, because .bd-who b next door is
   display:block and would put it on its own line. It keeps the board's
   own face rather than the Malayalam one it is embedded in (a Latin name
   set in a Malayalam font beside real Malayalam looks like a mistake)
   and it is brightened a touch so it reads as a name being called out
   rather than the first word of the sentence. */
.bd-say-at {
  display: inline;
  font-family:
    "Trebuchet MS",
    "Segoe UI",
    Roboto,
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff4d8;
  /* the name itself never breaks mid-word; the sentence after it wraps
     normally, because half a punchline is worse than a second line. */
  white-space: nowrap;
}

/* gold, silver, bronze */
.bd-say.r1 {
  --say: 255, 211, 92;
}
.bd-say.r2 {
  --say: 214, 221, 234;
}
.bd-say.r3 {
  --say: 226, 155, 96;
}

/* Malayalam needs its own stack, and no letter-spacing: the spacing
   prises the vowel signs off the consonants they hang on. */
.bd-say.ml {
  font-family:
    "Malayalam Sangam MN", "Malayalam MN", "Nirmala UI", "Noto Sans Malayalam",
    "Noto Serif Malayalam", Manjari, Rachana, Meera, AnjaliOldLipi, Kartika,
    sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
}
.bd-score {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 16px;
  color: var(--gold-2);
}
.bd-empty {
  padding: 34px 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1px;
  color: #9b8154;
}
.bd-status {
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #a98f60;
  min-height: 14px;
}

/* ---------------- name box ---------------- */
.bd-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.bd-name label {
  font-size: 9.5px;
  letter-spacing: 2px;
  color: #9b8154;
}
.bd-name input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 211, 92, 0.24);
  background: rgba(0, 0, 0, 0.42);
  color: #f4e2b4;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* the rest of the page is locked down for swipes - a text field
     has to opt back in or it cannot be selected or typed into */
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}
.bd-name input:focus {
  outline: none;
  border-color: rgba(255, 211, 92, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 211, 92, 0.12);
}
.bd-name input::placeholder {
  color: #7a6540;
  letter-spacing: 2px;
}
.bd-name .btn {
  min-width: 0;
  padding: 10px 16px;
  font-size: 13px;
}

/* The name is asked for on the way in, not after the run - you cannot
   start without one, so it sits above the PLAY button rather than
   waiting on the game over screen. */
/* ---------------- credits ---------------- */
/* The same link on the game over screen, deliberately quieter - it
   sits under RUN AGAIN and must not compete with it. */
.over-kaapi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 7px 16px;
  border: 1px solid rgba(255, 211, 92, 0.3);
  border-radius: 999px;
  background: rgba(255, 211, 92, 0.05);
  color: var(--gold-3);
  text-decoration: none;
  animation: fadeUp 0.6s ease 0.5s backwards;
}
.over-kaapi:hover {
  color: var(--gold-2);
  border-color: rgba(255, 211, 92, 0.6);
  background: rgba(255, 211, 92, 0.1);
}
.over-kaapi .kaapi-cup {
  font-size: 15px;
}
.over-kaapi .kaapi-ml {
  font-size: 14px;
}

/* The credit sits on the menu rather than behind a button - you should
   not have to go looking for who made the thing you are playing. It is
   still a button: tapping it opens the full screen. */
.menu-credit {
  display: block;
  width: 100%;
  margin: 12px auto 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.7;
  animation: fadeUp 0.6s ease 0.6s backwards;
}
.menu-credit:hover {
  background: rgba(255, 211, 92, 0.06);
}
.mc-by {
  display: block;
  font-size: 9px;
  letter-spacing: 3px;
  color: #7d6942;
}
.mc-who {
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--gold-3);
  border-bottom: 1px solid rgba(255, 211, 92, 0.28);
}
.menu-credit:hover .mc-who {
  color: var(--gold-2);
}
.mc-amp {
  margin: 0 6px;
  color: #6b5a38;
  font-size: 10px;
}

.cred-block {
  margin: 0 0 16px;
}
.cred-role {
  display: block;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  color: #8e7647;
  margin-bottom: 5px;
}
.cred-who {
  display: inline-block;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(15px, 4.6vw, 19px);
  letter-spacing: 1.6px;
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 211, 92, 0.35);
  padding-bottom: 2px;
}
.cred-who:hover {
  color: var(--gold-1);
  border-bottom-color: var(--gold-1);
}
.cred-rule {
  height: 1px;
  margin: 18px auto;
  max-width: 200px;
  background: linear-gradient(
    90deg,
    rgba(255, 211, 92, 0),
    rgba(255, 211, 92, 0.35),
    rgba(255, 211, 92, 0)
  );
}
.cred-love {
  margin: 0 auto 16px;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.6;
  color: #c9b189;
  font-style: italic;
}

/* the kaapikada button. An anchor, not a button - it has to be able to
   navigate, so nothing on it may preventDefault. */
.btn.kaapi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}
.kaapi-cup {
  font-size: 19px;
  line-height: 1;
}
.kaapi-ml {
  font-size: 19px;
  letter-spacing: 0;
  /* Malayalam sits on a different baseline to Impact, and the button's
     letter-spacing pushes its marks off their consonants */
  line-height: 1.5;
}

/* how many other people are on the road right now */
.live-line {
  min-height: 14px;
  margin: -12px 0 10px;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  color: #7f9a72;
}
.live-line b {
  color: #9fe08a;
}
.live-line i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #6ede5a;
  box-shadow: 0 0 6px rgba(110, 222, 90, 0.9);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.menu-name {
  max-width: 226px;
  margin: 0 auto;
  animation: fadeUp 0.6s ease 0.4s backwards;
}
.menu-name label {
  flex: 0 0 auto;
}
.name-nag {
  min-height: 15px;
  margin: 5px 0 14px;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #9b8154;
  animation: fadeUp 0.6s ease 0.4s backwards;
}
.name-nag.bad {
  color: #e8a13a;
}

/* an empty box that has just refused a run says so twice: in the nag
   line, and by moving */
.bd-name input.bad {
  border-color: rgba(232, 161, 58, 0.75);
  animation: nameShake 0.32s ease;
}
@keyframes nameShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.ov-submit {
  margin-bottom: 16px;
}
.ov-rank {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold-2);
  min-height: 14px;
  margin-bottom: 6px;
}

#rotate-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10px + var(--safe-b));
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: #7a6540;
  display: none;
  z-index: 6;
  pointer-events: none;
}

/* ---------------- animations ---------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slam {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sweep {
  0% {
    left: -60%;
  }
  55%,
  100% {
    left: 130%;
  }
}
/* same gleam, but it starts and ends inside the box so the heading
   never has to clip it - and so never clips the letters either */
@keyframes sweepIn {
  0% {
    left: -26%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  55%,
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes spinCoin {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.12);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@keyframes toastPop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: none;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (max-width: 560px) {
  /* phones: cards become a horizontal snap-scroller so the START button
     stays on screen instead of being pushed below three stacked cards */
  .cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .card {
    width: 62%;
    min-width: 158px;
    max-width: 200px;
    scroll-snap-align: center;
  }
  .card canvas {
    height: 144px;
  }
  .btn {
    min-width: 200px;
    padding: 12px 20px;
    font-size: 16px;
  }
  .panel {
    padding: 14px 12px;
  }
}
@media (max-height: 640px) {
  .crest {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
  }
  .heroes canvas {
    height: clamp(78px, 15vh, 120px);
  }
  .best-line {
    margin: 10px 0 14px;
  }
}
@media (max-height: 460px) and (orientation: landscape) {
  .crest {
    display: none;
  }
  .heroes canvas {
    height: 84px;
  }
  .best-line {
    margin: 8px 0 12px;
  }
  .menu-btns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn {
    padding: 9px 22px;
    font-size: 15px;
    min-width: 150px;
  }
  .card canvas {
    height: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}