:root {
  --cream: #F2E4C9;
  --ochre: #E8A33D;
  --orange: #D2521E;
  --magenta: #C7335B;
  --teal: #10485A;
  --blue: #7FA8BD;
  --ink: #2B3A42;
  --hs: 0.72;
  --font-display: 'Alfa Slab One', Impact, serif;
  --font-num: 'Staatliches', 'Arial Narrow', Impact, sans-serif;
  --font-text: 'Archivo', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img { -webkit-user-drag: none; }

#game {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--cream);
  overflow: hidden;
  touch-action: none;
}
#game canvas { display: block; max-width: 100%; max-height: 100%; }

.hidden { display: none !important; }

/* Printed cream surfaces: paper fibre, halftone screen and corner rivets. */
.printed, .riderCard, .teamCard, .resultCard,
.helpCard, .title-hint, .titleLegend, .helpAction, .resultActions {
  background-color: var(--cream) !important;
  background-image:
    radial-gradient(circle at 5px 5px, rgba(210, 82, 30, 0.58) 0 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 5px) 5px, rgba(210, 82, 30, 0.58) 0 1.5px, transparent 2px),
    radial-gradient(circle at 5px calc(100% - 5px), rgba(210, 82, 30, 0.58) 0 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(210, 82, 30, 0.58) 0 1.5px, transparent 2px),
    url("assets/img/cream-print.png") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-size: auto, auto, auto, auto, 128px 128px !important;
}

.printed-fill, .mask, .gatePatch, .posPatch, .speedTag, .tab, .reloadTag, .title-sub {
  background-color: #f1e2c6 !important;
  background-image: url("assets/img/cream-print.png") !important;
  background-size: 128px 128px !important;
}

.teamBand, .riderBand {
  background-image: radial-gradient(circle at 1px 1px, rgba(16, 72, 90, 0.2) 1px, transparent 1.35px);
  background-size: 6px 6px;
}

.rivalLine {
  background-color: #efd9b8;
  background-image: url("assets/img/cream-print.png");
  background-size: 128px 128px;
}


/* ------------------------------------------------------------------ */
/* Printed paper layers                                                */
/* ------------------------------------------------------------------ */

#paper {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url("assets/img/grain.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.3;
}

#frame {
  position: fixed;
  inset: 5px;
  z-index: 90;
  pointer-events: none;
  border: 5px solid rgba(210, 82, 30, 0.88);
  box-shadow:
    inset 0 0 0 2px rgba(242, 228, 201, 0.7),
    inset 0 0 22px rgba(43, 58, 66, 0.08);
}

#frame::before,
#frame::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(242, 228, 201, 0.6);
}
#frame::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
#frame::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

#hitFlash {
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  background: var(--cream);
  opacity: 0;
}
#hitFlash.on { opacity: 0.3; }

#wipe {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(120px, 22vw, 280px);
  z-index: 80;
  pointer-events: none;
  background: var(--cream);
  border-right: 12px solid var(--orange);
  box-shadow: 7px 0 0 rgba(16, 72, 90, 0.16);
  transform: translateX(-130%);
}
#wipe.run { animation: wipeAcross 0.62s cubic-bezier(0.72, 0, 0.24, 1) both; }
@keyframes wipeAcross {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(560%); }
}

/* ------------------------------------------------------------------ */
/* Screens                                                             */
/* ------------------------------------------------------------------ */

.screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

/* Title ------------------------------------------------------------ */

#title { overflow: hidden; }

.title-inner {
  position: relative;
  width: min(94vw, 1180px);
  margin-top: clamp(10px, 2.4vh, 30px);
  text-align: center;
}

.title-kicker {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(8px, 1.05vw, 13px);
  letter-spacing: 0.34em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: clamp(2px, 0.7vh, 8px);
  text-shadow: 0 1px 0 rgba(242, 228, 201, 0.8);
}

.title-logo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 8.2vw, 118px);
  line-height: 0.8;
  letter-spacing: 0.005em;
  color: var(--ochre);
  text-transform: uppercase;
  text-shadow:
    0.045em 0.055em 0 var(--orange),
    -0.008em -0.008em 0 rgba(242, 228, 201, 0.7);
  transform: rotate(-0.5deg);
}
.title-logo span { display: block; }

.title-sub {
  display: inline-block;
  margin-top: clamp(5px, 1.4vh, 14px);
  padding: 3px 12px 2px;
  background: var(--cream);
  border: 1.5px solid var(--orange);
  font-family: var(--font-num);
  font-size: clamp(12px, 1.5vw, 20px);
  letter-spacing: 0.16em;
  color: var(--teal);
  transform: rotate(-0.5deg);
}

.title-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(7px, 1.2vw, 18px);
  margin-top: clamp(10px, 2vh, 24px);
  pointer-events: auto;
}

.plateBtn {
  position: relative;
  display: block;
  width: clamp(142px, 19vw, 256px);
  filter: drop-shadow(2px 4px 0 rgba(43, 58, 66, 0.2));
  transition: transform 0.08s linear;
}
.plateBtn img { display: block; width: 100%; height: auto; }
.plateBtn:hover { transform: translate(-2px, -2px); }
.plateBtn:active { transform: translate(1px, 2px); }

.soundPatch {
  position: absolute;
  left: 73%;
  top: 27%;
  width: 24%;
  height: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0e1c4;
  border-radius: 8% / 22%;
  color: var(--orange);
  font-family: var(--font-num);
  font-size: clamp(17px, 2vw, 27px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 1px 2px 0 rgba(199, 51, 91, 0.25);
}

.title-hint {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 4px);
  transform: translateX(-50%);
  margin: 0;
  padding: 3px 10px;
  white-space: nowrap;
  background: rgba(242, 228, 201, 0.92);
  border-top: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(9.5px, 1vw, 12px);
  letter-spacing: 0.14em;
  color: var(--teal);
  text-transform: uppercase;
}

.riderCard {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px);
  width: clamp(88px, 12vw, 164px);
  background: var(--cream);
  border: 2px solid var(--orange);
  box-shadow: 5px 6px 0 rgba(16, 72, 90, 0.25);
  padding: 5px 5px 6px;
  text-align: center;
  pointer-events: none;
}
.riderCard img { display: block; width: 100%; height: auto; }
.riderBand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(34px, 5vh, 58px);
  margin-bottom: 3px;
  border: 1.5px solid var(--orange);
  overflow: hidden;
  background-color: var(--ochre);
}
.riderBand img { width: 104%; height: auto; filter: drop-shadow(2px 2px 0 rgba(43, 58, 66, 0.24)); }
.riderLabel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(7px, 0.8vw, 10px);
  letter-spacing: 0.22em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.riderName {
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: clamp(12px, 1.5vw, 20px);
  letter-spacing: 0.09em;
  color: var(--teal);
  line-height: 1;
}
.riderStats {
  margin-top: 1px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(7px, 0.75vw, 9px);
  letter-spacing: 0.09em;
  color: var(--orange);
  line-height: 1.3;
}
.riderBest {
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.1;
}

.titleLegend {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  padding: 9px 13px;
  background: var(--cream);
  border: 1.5px solid var(--orange);
  box-shadow: 4px 5px 0 rgba(16, 72, 90, 0.22);
  font-family: var(--font-text);
  font-size: clamp(8px, 0.95vw, 12px);
  line-height: 1.65;
  letter-spacing: 0.09em;
  color: var(--ink);
  text-transform: uppercase;
}
.titleLegend b {
  display: inline-block;
  min-width: 52px;
  color: var(--orange);
  font-weight: 700;
}

/* Pick ------------------------------------------------------------- */

#pick { justify-content: space-between; padding-top: clamp(10px, 2.2vh, 22px); padding-bottom: clamp(10px, 2vh, 22px); }

.pick-head { text-align: center; pointer-events: none; }
.pick-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 62px);
  line-height: 0.9;
  color: var(--ochre);
  text-transform: uppercase;
  text-shadow: 0.045em 0.055em 0 var(--orange);
}
.pick-sub {
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: clamp(11px, 1.2vw, 16px);
  letter-spacing: 0.2em;
  color: var(--teal);
}

.cardRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 24px);
  padding: 8px max(16px, env(safe-area-inset-left)) 8px max(16px, env(safe-area-inset-right));
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  pointer-events: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}
.cardRow::-webkit-scrollbar { display: none; }

.teamCard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(205px, 22.5vw, 292px);
  scroll-snap-align: center;
  background: var(--cream);
  border: 3px solid var(--orange);
  box-shadow: 4px 5px 0 rgba(16, 72, 90, 0.22);
  transition: transform 0.09s linear;
  text-align: left;
  padding: 9px 9px 10px;
}
.teamCard img { display: block; width: 100%; height: auto; }
.teamBand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(58px, 12vh, 118px);
  border: 1.5px solid var(--orange);
  overflow: hidden;
  background-color: var(--ochre);
}
.teamBand img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 3px 0 rgba(43, 58, 66, 0.25));
}
.teamTitle {
  display: block;
  margin-top: 7px;
  padding: 3px 0 4px;
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid rgba(210, 82, 30, 0.5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
  text-align: center;
}
.teamStats { display: block; margin-top: 5px; }
.teamStat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px dotted rgba(16, 72, 90, 0.28);
  padding: 1px 0;
}
.teamStat b {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(7px, 0.8vw, 10px);
  letter-spacing: 0.12em;
  color: var(--orange);
  text-transform: uppercase;
}
.teamStat i {
  font-style: normal;
  font-family: var(--font-num);
  font-size: clamp(13px, 1.5vw, 19px);
  line-height: 1.1;
  color: var(--teal);
}
.teamCard:hover { transform: translateY(-3px); }
.teamCard.selected { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.teamCard.selected::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 4px solid var(--orange);
  box-shadow: 0 0 0 2px var(--cream);
  pointer-events: none;
}
.selectedTag {
  display: none;
  position: absolute;
  top: -10px;
  right: -6px;
  padding: 3px 9px 2px;
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-num);
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 0.14em;
  transform: rotate(2deg);
}
.teamCard.selected .selectedTag { display: block; }

.teamCap {
  margin-top: 7px;
  padding: 4px 7px 3px;
  background: var(--cream);
  border-top: 2px solid var(--orange);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.teamCap b {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 20px);
  letter-spacing: 0.08em;
  color: var(--teal);
}
.teamCap small {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(7px, 0.8vw, 10px);
  letter-spacing: 0.05em;
  color: var(--orange);
  white-space: nowrap;
}

.pick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  pointer-events: auto;
}
.pick-actions .plateBtn { width: clamp(130px, 16vw, 210px); }

/* Finish ----------------------------------------------------------- */

#finish { justify-content: center; padding: 12px; }

.resultCard {
  position: relative;
  width: min(93vw, 790px);
  max-width: calc(100vw - 8px);
  max-height: 94vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border: 4px solid var(--orange);
  outline: 1px solid rgba(210, 82, 30, 0.42);
  outline-offset: -11px;
  box-shadow: 10px 12px 0 rgba(16, 72, 90, 0.3);
  padding: clamp(14px, 2.6vh, 26px) clamp(15px, 2.6vw, 30px) clamp(16px, 3vh, 28px);
  pointer-events: auto;
  touch-action: pan-y;
}

.resultTop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--orange);
  padding-bottom: 5px;
}
.resultTitle {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 58px);
  line-height: 0.84;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0.05em 0.05em 0 rgba(232, 163, 61, 0.55);
}
.resultPlace {
  font-family: var(--font-num);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.78;
  color: var(--teal);
  text-shadow: 3px 3px 0 rgba(199, 51, 91, 0.28);
  white-space: nowrap;
}
.resultPlace small { font-size: 0.42em; letter-spacing: 0.02em; }

.resultTimeRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid rgba(210, 82, 30, 0.55);
}
.resultTime {
  font-family: var(--font-num);
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.resultTimeLabel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(8px, 0.9vw, 11px);
  letter-spacing: 0.22em;
  color: var(--orange);
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 6px;
}

.resultMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 9px;
}
.metaBox {
  border-left: 3px solid var(--orange);
  padding: 2px 0 2px 7px;
  min-width: 0;
}
.metaBox span {
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: max(8px, 0.8vw);
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
}
.metaBox b {
  display: block;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(15px, 1.9vw, 24px);
  line-height: 1.1;
  color: var(--teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rivalLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 6px 10px;
  background-color: #efd9b8;
  background-image: url("assets/img/cream-print.png");
  background-size: 128px 128px;
  border: 1.5px solid var(--orange);
}
.rivalLine img { width: clamp(94px, 15vw, 160px); height: auto; display: block; }
.rivalLine div { min-width: 0; }
.rivalLine b {
  display: block;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--magenta);
}
.rivalLine span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(8px, 0.95vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.splitsHead {
  margin-top: 12px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: max(8.5px, 0.9vw);
  letter-spacing: 0.2em;
  color: var(--orange);
  text-transform: uppercase;
}
.splits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px 10px;
  margin-top: 3px;
}
.split {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-text);
  font-size: max(8.5px, 0.9vw);
  border-bottom: 1px dotted rgba(16, 72, 90, 0.28);
  padding: 1px 0;
}
.split b { font-weight: 700; color: var(--teal); }
.split span { color: var(--ink); }

.boardWrap { margin-top: 12px; border-top: 2px solid rgba(210, 82, 30, 0.55); padding-top: 7px; }
.boardTitle {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(8px, 0.9vw, 11px);
  letter-spacing: 0.22em;
  color: var(--orange);
  text-transform: uppercase;
}
.boardList { list-style: none; margin: 4px 0 0; padding: 0; }
.boardList li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-text);
  font-size: clamp(9px, 1vw, 13px);
  line-height: 1.5;
  border-bottom: 1px dotted rgba(16, 72, 90, 0.22);
}
.boardList li.mine { background: rgba(232, 163, 61, 0.28); }
.boardList .rank {
  width: 2.2em;
  font-family: var(--font-num);
  font-size: 1.25em;
  color: var(--orange);
}
.boardList .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boardList .who a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--orange); }
.boardList .val { font-family: var(--font-num); font-size: 1.2em; color: var(--ink); }
.boardNote {
  margin-top: 5px;
  font-family: var(--font-text);
  font-size: clamp(8px, 0.85vw, 11px);
  color: var(--teal);
}
.boardNote button {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resultActions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 20px);
  margin-top: 14px;
  padding-top: 8px;
  padding-bottom: 2px;
  background: var(--cream);
  border-top: 2px solid var(--orange);
}
.resultActions .plateBtn { width: clamp(150px, 19vw, 230px); }

/* Help ------------------------------------------------------------- */

#help {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 72, 90, 0.28);
  padding: 14px;
}
.helpCard {
  width: min(92vw, 470px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--cream);
  border: 4px solid var(--orange);
  box-shadow: 9px 10px 0 rgba(16, 72, 90, 0.35);
  padding: 16px 20px 18px;
  text-align: left;
}
.helpCard h2 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 0.9;
  color: var(--orange);
  text-transform: uppercase;
}
.helpCard p {
  margin: 4px 0 10px;
  font-family: var(--font-text);
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.45;
  color: var(--ink);
}
.helpRow {
  display: flex;
  gap: 10px;
  border-top: 1px dotted rgba(16, 72, 90, 0.32);
  padding: 6px 0;
  font-family: var(--font-text);
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.3;
}
.helpRow b {
  flex: 0 0 76px;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.helpBtnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.helpAction {
  padding: 7px 14px 5px;
  background: var(--cream);
  border: 2px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-num);
  font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: 0.1em;
  box-shadow: 2px 3px 0 rgba(16, 72, 90, 0.2);
}
.helpAction:active { transform: translate(1px, 2px); box-shadow: none; }

/* ------------------------------------------------------------------ */
/* HUD                                                                 */
/* ------------------------------------------------------------------ */

#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  font-family: var(--font-num);
}

.hud-tl {
  position: absolute;
  left: max(9px, env(safe-area-inset-left));
  top: max(9px, env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(5px * var(--hs));
}

.hud-tr {
  position: absolute;
  right: max(9px, env(safe-area-inset-right));
  top: max(9px, env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4px * var(--hs));
}

.hud-bl {
  position: absolute;
  left: max(9px, env(safe-area-inset-left));
  bottom: calc(max(9px, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--hs));
}

.hud-br {
  position: absolute;
  right: max(9px, env(safe-area-inset-right));
  bottom: calc(max(9px, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(5px * var(--hs));
}

.plate { position: relative; display: block; line-height: 0; }
.plate img { display: block; width: 100%; height: auto; }

.dial { width: calc(307px * var(--hs)); }
.ammoPlate { width: calc(312px * var(--hs)); }
.gatePlate { width: calc(255px * var(--hs)); }
.lapPlate { width: calc(371px * var(--hs)); }
.boostPlate { width: calc(334px * var(--hs)); }
.shieldPlate { width: calc(338px * var(--hs)); }
.posPlate { width: calc(283px * var(--hs)); }
.emblemPlate { width: calc(210px * var(--hs)); }

.speedTag {
  width: calc(307px * var(--hs));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 7px 1px;
  background: var(--cream);
  border-top: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  box-shadow: 2px 3px 0 rgba(43, 58, 66, 0.16);
}
.speedTag .spdNum {
  font-family: var(--font-num);
  font-size: max(14px, calc(34px * var(--hs)));
  line-height: 0.95;
  color: var(--teal);
  letter-spacing: 0.02em;
}
.speedTag .spdUnit {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: max(8px, calc(10px * var(--hs)));
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-right: auto;
}
.speedTag .teamTag {
  font-family: var(--font-num);
  font-size: max(9px, calc(14px * var(--hs)));
  letter-spacing: 0.08em;
  color: var(--orange);
  white-space: nowrap;
}

.mask {
  position: absolute;
  pointer-events: none;
  border-radius: 2px;
}

.ammoMask { top: 18%; height: 66%; left: 11%; width: 0; }
.reloadTag {
  position: absolute;
  left: 8%;
  bottom: 6%;
  padding: 1px 6px;
  background: var(--cream);
  border: 1px solid var(--orange);
  font-family: var(--font-num);
  font-size: max(8.5px, calc(14px * var(--hs)));
  letter-spacing: 0.12em;
  color: var(--orange);
  opacity: 0;
}
.reloadTag.on { opacity: 1; }

.boostMask { top: 24%; height: 52%; left: 24%; width: 0; }
.shieldMask { top: 24%; height: 52%; left: 26%; width: 0; }

.tab {
  padding: 1px 8px 1px;
  background: var(--cream);
  border: 1.5px solid var(--orange);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: max(8.5px, calc(10px * var(--hs)));
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--teal);
  text-transform: uppercase;
  box-shadow: 2px 3px 0 rgba(43, 58, 66, 0.14);
}
.tab b { font-weight: 700; color: var(--orange); }
.lapTab { align-self: flex-end; }

.gatePatch {
  position: absolute;
  left: 29%;
  top: 42%;
  width: 60%;
  height: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--teal);
  font-family: var(--font-num);
  font-size: calc(92px * var(--hs));
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 2px 2px 0 rgba(199, 51, 91, 0.3);
}

.lapMarker {
  position: absolute;
  top: -7%;
  left: 10%;
  width: calc(11px * var(--hs));
  height: calc(14px * var(--hs));
  transform: translateX(-50%);
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(1px 2px 0 rgba(43, 58, 66, 0.3));
}

.posPatch {
  position: absolute;
  left: 18%;
  top: 20%;
  width: 51%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--teal);
  font-family: var(--font-num);
  font-size: calc(76px * var(--hs));
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(199, 51, 91, 0.3);
}
.posPatch sup {
  font-size: 0.38em;
  vertical-align: top;
  line-height: 1;
  margin-left: 1px;
  margin-top: 0.55em;
}

.roundBtn {
  position: absolute;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: clamp(30px, 3.2vw, 42px);
  height: clamp(30px, 3.2vw, 42px);
  border-radius: 50%;
  background-color: var(--cream);
  background-image: url("assets/img/cream-print.png");
  background-size: 128px 128px;
  border: 2.5px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-num);
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1;
  box-shadow: 2px 3px 0 rgba(43, 58, 66, 0.24);
  pointer-events: auto;
}
.roundBtn:active { transform: translate(-50%, 2px); box-shadow: none; }

.boostBtn {
  position: absolute;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 4px);
  transform: translateX(-50%);
  width: clamp(58px, 7.2vw, 88px);
  height: clamp(58px, 7.2vw, 88px);
  border-radius: 50%;
  background-color: var(--cream);
  background-image: url("assets/img/cream-print.png");
  background-size: 128px 128px;
  border: 3px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-num);
  font-size: clamp(13px, 1.45vw, 19px);
  letter-spacing: 0.04em;
  box-shadow: 4px 5px 0 rgba(43, 58, 66, 0.26);
  pointer-events: auto;
  touch-action: none;
}
.boostBtn::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(210, 82, 30, 0.5);
  border-radius: 50%;
}
.boostBtn:active, .boostBtn.on {
  background-color: var(--ochre);
  color: var(--teal);
  box-shadow: 1px 2px 0 rgba(43, 58, 66, 0.26);
}

/* ------------------------------------------------------------------ */
/* Stamps and toasts                                                   */
/* ------------------------------------------------------------------ */

#stamp {
  position: fixed;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-2deg);
  z-index: 26;
  pointer-events: none;
  text-align: center;
  opacity: 0;
}
#stamp.show { animation: stampIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes stampIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(-5deg); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96) rotate(-2deg); }
}
.stampInner {
  display: inline-block;
  padding: 8px 26px 7px;
  background: var(--cream);
  border: 4px solid var(--orange);
  box-shadow: 7px 8px 0 rgba(16, 72, 90, 0.28);
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: 0.9;
  color: var(--orange);
  text-transform: uppercase;
  text-shadow: 0.045em 0.05em 0 rgba(232, 163, 61, 0.65);
}
.stampSub {
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: clamp(11px, 1.4vw, 18px);
  letter-spacing: 0.18em;
  color: var(--teal);
}

#toast {
  position: fixed;
  left: 50%;
  top: max(52px, calc(env(safe-area-inset-top) + 50px));
  transform: translateX(-50%);
  z-index: 25;
  pointer-events: none;
  padding: 3px 12px 2px;
  background: var(--cream);
  border: 2px solid var(--orange);
  box-shadow: 3px 4px 0 rgba(16, 72, 90, 0.22);
  font-family: var(--font-num);
  font-size: clamp(14px, 1.7vw, 22px);
  letter-spacing: 0.1em;
  color: var(--teal);
  opacity: 0;
  white-space: nowrap;
}
#toast.show { animation: toastIn 1.2s ease-out both; }
@keyframes toastIn {
  0%   { opacity: 0; transform: translate(-50%, -6px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  75%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* ------------------------------------------------------------------ */
/* Narrow and short layouts                                            */
/* ------------------------------------------------------------------ */

@media (max-aspect-ratio: 1/1) {
  .title-logo { font-size: clamp(38px, 12.4vw, 96px); }
  .title-inner { margin-top: clamp(8px, 2.6vh, 30px); }
  .title-buttons { gap: 8px; }
  .plateBtn { width: clamp(104px, 27vw, 168px); }
  .titleLegend { display: none; }
  .riderCard { width: clamp(78px, 20vw, 112px); }
  .splits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boostBtn { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 108px); }
  .teamCard { width: min(74vw, 320px); }
}

@media (max-height: 640px), (max-width: 760px), (max-aspect-ratio: 4/3) {
  .title-hint { display: inline-block; }
  .titleLegend { display: none; }
}

@media (max-height: 560px) {
  .title-logo { font-size: clamp(30px, 8vw, 58px); }
  .title-kicker { display: none; }
  .title-inner { margin-top: 14px; }
  .title-sub { display: none; }
  .title-buttons { margin-top: 8px; gap: 6px; }
  .plateBtn { width: clamp(104px, 15vw, 148px); }
  .title-hint { margin-top: 5px; }
  .titleLegend { display: none; }
  .riderCard { width: 74px; }
  .pick-title { font-size: clamp(24px, 4vw, 40px); }
  .teamCard { width: clamp(172px, 42vw, 214px); }
  .resultCard { padding: 12px 16px; }
  .resultTitle { font-size: 30px; }
  .resultPlace { font-size: 52px; }
  .resultTime { font-size: 40px; }
  .resultTimeLabel { padding-bottom: 3px; }
  .rivalLine { padding: 4px 8px; }
  .rivalLine img { width: 90px; }
  .splits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boardWrap { margin-top: 8px; }
  .resultActions { margin-top: 9px; }
  .resultActions .plateBtn { width: 140px; }
  .helpCard { padding: 12px 16px; }
  .helpRow { padding: 4px 0; }
}

@media (max-width: 620px) {
  .splits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultMeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultTitle { font-size: clamp(26px, 8vw, 40px); }
  .resultTime { font-size: clamp(30px, 9vw, 52px); }
  .resultPlace { font-size: clamp(42px, 13vw, 70px); }
}

@media (max-width: 430px) {
  .title-logo { font-size: clamp(34px, 11vw, 52px); }
  .plateBtn { width: clamp(96px, 28vw, 126px); }
  .teamCap small { display: none; }
}