:root {
  --orange: #ef6a21;
  --gold: #ffc14a;
  --turq: #24d6c4;
  --bone: #fff1d0;
  --dark: #18110d;
  --brown: #3a1c0f;
  --sand: #d59b57;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0b0705;
}
body {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  color: var(--bone);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, .irf-lang-select { -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; }
#irf-game {
  position: relative;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 6%, rgba(255,193,74,.18), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0));
  user-select: none;
}
.irf-head {
  position: absolute;
  inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left));
  z-index: 35;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.irf-brand,
.irf-top-actions { pointer-events: auto; }
.irf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17,12,9,.78), rgba(17,12,9,.48));
  border: 1px solid rgba(255,241,208,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.irf-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  border: 2px solid rgba(255,241,208,.45);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 28px rgba(239,106,33,.3);
}
.irf-mark picture, .irf-mark img { width: 100%; height: 100%; display: block; }
.irf-mark img { object-fit: contain; padding: 6px; }
.irf-title {
  font-size: clamp(32px, 4vw, 58px);
  line-height: .88;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.irf-kicker {
  margin-top: 3px;
  font: 12px/1.2 Arial, sans-serif;
  letter-spacing: 2px;
  color: rgba(255,241,208,.82);
  text-transform: uppercase;
}
.irf-top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.irf-small-btn, .irf-cta, .irf-btn, .irf-lang-select {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255,241,208,.18);
  border-radius: 999px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.irf-small-btn {
  background: rgba(17,12,9,.68);
  color: var(--bone);
}
.irf-lang-select {
  width: auto;
  min-width: 66px;
  background: rgba(17,12,9,.78);
  color: var(--gold);
  outline: none;
  cursor: pointer;
  appearance: none;
  text-align: center;
  font-weight: 900;
}
.irf-small-btn.is-muted {
  opacity: .74;
  color: rgba(255,241,208,.7);
}
.irf-cta, .irf-btn.primary {
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #211009;
  border: 0;
  box-shadow: 0 12px 24px rgba(239,106,33,.24);
}
.irf-btn.secondary {
  background: rgba(17,12,9,.68);
  color: var(--bone);
}
.irf-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--sand);
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  touch-action: none;
}
.irf-hud {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  top: calc(max(8px, env(safe-area-inset-top)) + 86px);
  z-index: 12;
  display: grid;
  grid-template-columns: 1.25fr repeat(7, minmax(0,1fr));
  gap: 8px;
  pointer-events: none;
}
.irf-stat {
  min-height: 52px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(17,12,9,.62);
  border: 1px solid rgba(255,241,208,.16);
  backdrop-filter: blur(10px);
}
.irf-label {
  font: 10px Arial, sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255,241,208,.72);
}
.irf-val {
  margin-top: 4px;
  font-size: clamp(14px, 1.7vw, 22px);
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.irf-bars {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  top: calc(max(8px, env(safe-area-inset-top)) + 152px);
  z-index: 12;
  width: min(420px, calc(100% - 260px));
  display: grid;
  gap: 6px;
  pointer-events: none;
}
.irf-bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,241,208,.14);
  background: rgba(17,12,9,.58);
  overflow: hidden;
}
.irf-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--turq), var(--gold));
}
.irf-bar.damage span { background: linear-gradient(90deg, var(--gold), var(--orange)); }
.irf-mission-card {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 172px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  width: min(640px, calc(100% - 28px));
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(17,12,9,.78);
  border: 1px solid rgba(255,241,208,.2);
  text-align: center;
  opacity: 0;
  transition: opacity .24s, transform .24s;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.irf-mission-card.show { opacity: 1; transform: translateX(-50%) translateY(6px); }
.irf-mission-card strong {
  display: block;
  font-size: 30px;
  line-height: .95;
  color: var(--gold);
  text-transform: uppercase;
}
.irf-mission-card span { font: 13px/1.35 Arial, sans-serif; color: rgba(255,241,208,.88); }
.irf-roadbook {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 14;
  width: min(420px, calc(100% - 240px));
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(17,12,9,.74);
  border: 1px solid rgba(255,241,208,.18);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.irf-roadbook strong {
  display: block;
  font-size: 24px;
  line-height: .95;
  color: var(--gold);
  text-transform: uppercase;
}
.irf-roadbook span { display: block; margin-top: 4px; font: 12px/1.4 Arial, sans-serif; color: rgba(255,241,208,.86); }
.irf-roadbook em { font-style: normal; color: var(--turq); }
.irf-minimap {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 14;
  width: 200px;
  height: 124px;
  overflow: hidden;
  border-radius: 15px;
  border: 2px solid rgba(255,241,208,.22);
  background: rgba(17,12,9,.74);
  box-shadow: 0 16px 28px rgba(0,0,0,.24);
  pointer-events: none;
}
#irfMiniCanvas { width: 100%; height: 100%; }
.irf-touch {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 16;
  display: none;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
}
.irf-cluster { display: flex; gap: 10px; pointer-events: auto; align-items: end; }
.irf-cluster-drive { align-items: center; }
.irf-joystick {
  position: relative;
  width: clamp(132px, 22vw, 190px);
  height: clamp(88px, 15vw, 128px);
  border-radius: 999px;
  border: 1px solid rgba(255,241,208,.26);
  background: linear-gradient(180deg, rgba(17,12,9,.76), rgba(17,12,9,.54));
  box-shadow: inset 0 0 0 2px rgba(255,241,208,.07), 0 18px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  touch-action: none;
  overflow: hidden;
}
.irf-joystick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: rgba(255,241,208,.22);
}
.irf-joystick span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--turq), var(--gold));
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  transform: translateX(0);
  transition: transform .06s linear;
}
.irf-joystick b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,241,208,.78);
  pointer-events: none;
}
.irf-touch button {
  min-width: 70px;
  width: clamp(68px, 12vw, 88px);
  height: clamp(62px, 12vw, 84px);
  border-radius: 22px;
  border: 1px solid rgba(255,241,208,.24);
  background: rgba(17,12,9,.78);
  color: var(--bone);
  font-size: clamp(14px, 3vw, 18px);
  backdrop-filter: blur(8px);
  touch-action: none;
  box-shadow: 0 14px 26px rgba(0,0,0,.25);
}
.irf-touch button:active, .irf-touch button.is-pressed { transform: scale(.96); }
.irf-touch button.boost {
  width: clamp(82px, 14vw, 104px);
  height: clamp(78px, 14vw, 104px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #211009;
  border: 0;
}
.irf-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 18%, rgba(239,106,33,.25), transparent 30%), rgba(9,6,4,.72);
  backdrop-filter: blur(4px);
}
.irf-card {
  width: min(1160px, 96vw);
  max-height: 96vh;
  overflow: auto;
  padding: clamp(18px, 2vw, 28px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(59,28,15,.97), rgba(18,12,8,.98));
  border: 1px solid rgba(255,241,208,.18);
  box-shadow: 0 32px 100px rgba(0,0,0,.55);
}
.irf-card h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(38px, 6vw, 82px);
  line-height: .88;
  text-transform: uppercase;
}
.irf-card p { max-width: 840px; margin: 10px auto 18px; text-align: center; font: 15px/1.5 Arial, sans-serif; color: rgba(255,241,208,.88); }
.irf-hero-panel {
  position: relative;
  min-height: 210px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,241,208,.18);
  background: linear-gradient(135deg, rgba(239,106,33,.25), rgba(17,12,9,.9));
  margin: 14px 0 18px;
  display: grid;
  align-items: end;
  padding: 22px;
}
.irf-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,12,9,.22), rgba(17,12,9,.84)),
    image-set(url('../assets/map-bg.webp') type('image/webp'), url('../assets/map-bg.png') type('image/png')) center/cover no-repeat;
  opacity: .78;
}
.irf-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-14deg, rgba(255,241,208,.03) 0 2px, transparent 2px 12px);
}
.irf-hero-panel > div { position: relative; z-index: 1; max-width: 760px; }
.irf-hero-panel strong {
  display: block;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.irf-hero-panel span { display: block; margin-top: 7px; font: 15px/1.45 Arial, sans-serif; color: rgba(255,241,208,.92); }
.irf-build {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
}
.irf-box {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,241,208,.16);
  background: rgba(255,241,208,.06);
}
.irf-box h3 { margin: 0 0 10px; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--gold); }
.irf-field { margin: 8px 0; }
.irf-field label { display: block; margin-bottom: 5px; font: 11px/1.3 Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,241,208,.74); }
input, select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,241,208,.18);
  background: rgba(0,0,0,.24);
  color: var(--bone);
}
.irf-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.irf-driver {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
  border: 2px solid rgba(255,241,208,.16);
  background: #25150d;
  color: var(--bone);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.irf-driver:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.irf-driver.active { border-color: var(--turq); box-shadow: 0 0 0 3px rgba(36,214,196,.12), 0 0 28px rgba(36,214,196,.18); }
.irf-driver-art {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.irf-driver-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.75));
}
.irf-driver-art.nomad { background-image: image-set(url('../assets/wasteland-nomad.webp') type('image/webp'), url('../assets/wasteland-nomad.png') type('image/png')); }
.irf-driver-art.raider { background-image: image-set(url('../assets/desert-raider.webp') type('image/webp'), url('../assets/desert-raider.png') type('image/png')); }
.irf-driver-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 96px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92));
  text-align: left;
  text-transform: uppercase;
}
.irf-driver-name { font-size: 30px; line-height: .95; }
.irf-driver-meta { margin-top: 6px; font: 12px/1.35 Arial, sans-serif; color: rgba(255,241,208,.84); letter-spacing: 1px; }
.irf-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.irf-style {
  padding: 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,241,208,.14);
  background: rgba(0,0,0,.24);
  color: var(--bone);
  text-align: left;
}
.irf-style.active { border-color: var(--turq); }
.irf-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 2px solid rgba(255,241,208,.3); }
.irf-style strong { display: block; font-size: 20px; text-transform: uppercase; }
.irf-style span { font: 12px/1.35 Arial, sans-serif; color: rgba(255,241,208,.8); }
.irf-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.irf-btn { min-height: 50px; padding: 12px 16px; border-radius: 999px; text-transform: uppercase; }
.irf-help { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.irf-chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,241,208,.18);
  background: rgba(255,241,208,.08);
  color: rgba(255,241,208,.86);
  font: 12px/1.3 Arial, sans-serif;
}
@media (max-width: 1100px) {
  .irf-hud { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .irf-stat:first-child { display: none; }
  .irf-bars { width: min(360px, calc(100% - 250px)); }
}
@media (max-width: 860px) {
  .irf-build, .irf-select-grid, .irf-styles { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .irf-head { gap: 8px; }
  .irf-brand { padding: 8px 10px; }
  .irf-mark { width: 42px; height: 42px; }
  .irf-title { font-size: clamp(28px, 9vw, 44px); }
  .irf-kicker { font-size: 10px; }
  .irf-top-actions {
    width: min(58vw, 430px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .irf-top-actions .irf-cta { grid-column: 1 / -1; }
  .irf-lang-select, .irf-small-btn, .irf-cta { min-height: 38px; padding: 7px 7px; font-size: 13px; }
  .irf-hud {
    left: max(8px, env(safe-area-inset-left));
    right: 106px;
    top: calc(max(8px, env(safe-area-inset-top)) + 112px);
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
  }
  .irf-stat { min-height: 42px; padding: 6px 7px; border-radius: 11px; }
  .irf-label { font-size: 8px; letter-spacing: .8px; }
  .irf-val { font-size: 16px; }
  .irf-stat:nth-child(1), .irf-stat:nth-child(7), .irf-stat:nth-child(8) { display: none; }
  .irf-bars {
    left: max(8px, env(safe-area-inset-left));
    top: calc(max(8px, env(safe-area-inset-top)) + 200px);
    width: calc(100% - 122px);
  }
  .irf-mission-card {
    top: calc(max(8px, env(safe-area-inset-top)) + 210px);
    padding: 10px 12px;
  }
  .irf-mission-card strong { font-size: 23px; }
  .irf-minimap {
    width: 94px;
    height: 94px;
    right: max(8px, env(safe-area-inset-right));
    top: calc(max(8px, env(safe-area-inset-top)) + 112px);
    bottom: auto;
  }
  .irf-roadbook {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px);
    padding: 10px 12px;
  }
  .irf-roadbook strong { font-size: 20px; }
  .irf-roadbook span { font-size: 11px; }
  .irf-touch { display: flex; }
  .irf-touch {
    gap: 10px;
    align-items: flex-end;
  }
  .irf-cluster-drive { gap: 7px; }
  .irf-touch button { min-width: 58px; width: 20vw; max-width: 78px; height: 62px; font-size: 13px; border-radius: 18px; }
  .irf-touch button.boost { width: 76px; height: 76px; font-size: 13px; }
  .irf-joystick { width: min(42vw, 162px); height: 90px; }
  .irf-joystick span { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .irf-card {
    width: 100%;
    max-height: 100%;
    border-radius: 20px;
    padding: 14px;
  }
  .irf-card h2 { font-size: clamp(34px, 12vw, 56px); }
  .irf-hero-panel { min-height: 150px; }
  .irf-driver { min-height: 280px; }
}
@media (hover: none) and (pointer: coarse) {
  .irf-touch { display: flex; }
}
.irf-scoreboard {
  margin-top: 14px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,241,208,.16);
  background: rgba(0,0,0,.18);
}
.irf-scoreboard.compact { margin-top: 12px; }
.irf-scoreboard h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
}
.irf-score-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.irf-score-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,241,208,.07);
  border: 1px solid rgba(255,241,208,.10);
  font-family: Arial, sans-serif;
}
.irf-score-list li strong {
  font: 700 13px/1.2 Arial, sans-serif;
  color: var(--bone);
}
.irf-score-list li span {
  grid-column: 1;
  font: 11px/1.2 Arial, sans-serif;
  color: rgba(255,241,208,.68);
}
.irf-score-list li em {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-style: normal;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size: 22px;
  color: var(--turq);
}
.irf-empty-board {
  font: 13px/1.4 Arial, sans-serif;
  color: rgba(255,241,208,.76);
}

@media (max-width: 470px) {
  .irf-title { font-size: clamp(24px, 8vw, 34px); }
  .irf-mark { width: 38px; height: 38px; }
  .irf-brand { gap: 8px; }
  .irf-top-actions { width: 56vw; grid-template-columns: repeat(2, 1fr); }
  .irf-top-actions .irf-cta { display: none; }
  .irf-small-btn:nth-of-type(5) { display: none; }
  .irf-hud { right: 96px; top: calc(max(8px, env(safe-area-inset-top)) + 102px); }
  .irf-minimap { top: calc(max(8px, env(safe-area-inset-top)) + 102px); width: 86px; height: 86px; }
  .irf-roadbook { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 92px); }
  .irf-touch { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  .irf-cluster-drive { gap: 5px; }
  .irf-touch button { min-width: 48px; width: 17.5vw; height: 58px; padding: 0; }
  .irf-touch button.boost { width: 64px; height: 64px; }
  .irf-joystick { width: 34vw; min-width: 112px; height: 82px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .irf-touch { bottom: max(10px, env(safe-area-inset-bottom)); }
  .irf-roadbook { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 105px); }
}

/* IRF mobile control and UI refinement pass */
.irf-top-actions {
  max-width: min(780px, 58vw);
  padding: 4px;
  border-radius: 24px;
  background: rgba(17,12,9,.18);
  backdrop-filter: blur(6px);
}
.irf-small-btn:hover, .irf-btn:hover, .irf-touch button:hover { filter: brightness(1.08); }
.irf-touch button.go {
  background: linear-gradient(135deg, var(--turq), var(--gold));
  color: #211009;
  border: 0;
}
.irf-steer-btn.left::before { content: "◀"; display: block; font-size: 24px; line-height: .7; }
.irf-steer-btn.right::before { content: "▶"; display: block; font-size: 24px; line-height: .7; }
.irf-steer-btn {
  font-weight: 900;
  letter-spacing: .8px;
  background: linear-gradient(180deg, rgba(36,214,196,.28), rgba(17,12,9,.72)) !important;
  border-color: rgba(36,214,196,.42) !important;
}
.irf-touch button.is-pressed {
  transform: scale(.94) translateY(2px);
  filter: brightness(1.22);
  box-shadow: 0 0 0 3px rgba(255,193,74,.18), 0 8px 18px rgba(0,0,0,.35);
}
@media (min-width: 761px) {
  .irf-hud {
    left: 50%;
    right: auto;
    width: min(1080px, calc(100% - 24px));
    transform: translateX(-50%);
  }
  .irf-roadbook { width: min(410px, 34vw); }
  .irf-card { max-height: min(94vh, 920px); }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .irf-head {
    align-items: flex-start;
    gap: 6px;
  }
  .irf-brand {
    max-width: 42vw;
    padding: 7px 9px;
    border-radius: 16px;
  }
  .irf-kicker { display: none; }
  .irf-top-actions {
    max-width: 54vw;
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(62px, 1fr));
    gap: 5px;
    padding: 0;
    background: transparent;
  }
  #irfRestart, #irfChallenge, #irfRescue, #irfTopCta { display: none; }
  .irf-lang-select, .irf-small-btn, .irf-cta {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 14px;
  }
  .irf-hud {
    left: max(8px, env(safe-area-inset-left));
    right: 98px;
    top: calc(max(8px, env(safe-area-inset-top)) + 66px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .irf-stat:nth-child(1), .irf-stat:nth-child(2), .irf-stat:nth-child(7), .irf-stat:nth-child(8) { display: none; }
  .irf-stat { min-height: 39px; padding: 5px 7px; }
  .irf-label { font-size: 8px; }
  .irf-val { font-size: 15px; }
  .irf-bars {
    top: calc(max(8px, env(safe-area-inset-top)) + 152px);
    width: calc(100% - 116px);
  }
  .irf-minimap {
    width: 86px;
    height: 86px;
    top: calc(max(8px, env(safe-area-inset-top)) + 66px);
    right: max(8px, env(safe-area-inset-right));
  }
  .irf-mission-card {
    top: calc(max(8px, env(safe-area-inset-top)) + 164px);
    max-width: calc(100vw - 20px);
    padding: 8px 10px;
    border-radius: 14px;
  }
  .irf-mission-card strong { font-size: 22px; }
  .irf-mission-card span { font-size: 12px; }
  .irf-roadbook {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 154px);
    width: auto;
    padding: 8px 10px;
    border-radius: 14px;
  }
  .irf-roadbook strong { font-size: 18px; }
  .irf-roadbook span { font-size: 11px; }
  .irf-touch {
    display: flex;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 8px;
    align-items: flex-end;
  }
  .irf-cluster-steer {
    display: grid;
    width: min(48vw, 300px);
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right" "pad pad";
    gap: 7px;
  }
  .irf-steer-btn.left { grid-area: left; }
  .irf-steer-btn.right { grid-area: right; }
  .irf-joystick {
    grid-area: pad;
    width: 100%;
    min-width: 0;
    height: 52px;
    border-radius: 18px;
  }
  .irf-joystick span { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .irf-joystick b { bottom: 4px; font-size: 10px; }
  .irf-cluster-drive {
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 82px));
    gap: 7px;
  }
  .irf-touch button {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 64px;
    padding: 0 4px;
    font-size: 13px;
    border-radius: 18px;
  }
  .irf-touch button.boost { width: auto; height: 64px; border-radius: 18px; }
  .irf-touch button.go { font-size: 16px; }
  .irf-card {
    width: 100%;
    max-height: 100%;
    border-radius: 18px;
    padding: 12px;
  }
  .irf-card p { font-size: 13px; margin-bottom: 12px; }
  .irf-hero-panel { min-height: 132px; padding: 14px; margin: 10px 0; }
  .irf-hero-panel span { font-size: 12px; }
  .irf-driver { min-height: 220px; }
  .irf-driver-name { font-size: 24px; }
  .irf-buttons { gap: 7px; }
  .irf-btn { min-height: 42px; padding: 9px 12px; font-size: 13px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .irf-roadbook { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 156px); }
}
@media (max-width: 430px) {
  .irf-title { font-size: clamp(22px, 7.6vw, 32px); }
  .irf-mark { width: 34px; height: 34px; }
  .irf-top-actions { max-width: 56vw; grid-template-columns: repeat(2, minmax(54px,1fr)); }
  #irfFullscreen { display: none; }
  .irf-hud { right: 90px; }
  .irf-minimap { width: 78px; height: 78px; }
  .irf-cluster-steer { width: 49vw; gap: 6px; }
  .irf-cluster-drive { grid-template-columns: repeat(2, minmax(50px, 74px)); gap: 6px; }
  .irf-touch button { height: 58px; font-size: 12px; border-radius: 16px; }
  .irf-touch button.boost { height: 58px; }
  .irf-joystick { height: 46px; }
  .irf-roadbook { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 138px); }
}
@media (max-height: 640px) and (max-width: 760px) {
  .irf-mission-card { display: none; }
  .irf-roadbook { display: none; }
  .irf-touch button { height: 54px; }
  .irf-joystick { display: none; }
  .irf-cluster-steer { grid-template-areas: "left right"; }
}


/* IRF build v3: mobile-first HUD, safer touch controls, cleaner desktop */
html, body, #irf-game, .irf-stage, #irfCanvas { touch-action: none; }
.irf-mobile-tutorial {
  position: absolute;
  left: 50%;
  top: calc(max(8px, env(safe-area-inset-top)) + 112px);
  z-index: 34;
  width: min(420px, calc(100vw - 22px));
  transform: translate(-50%, -10px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 42px 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17,12,9,.9), rgba(58,28,15,.86));
  border: 1px solid rgba(255,193,74,.34);
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.irf-mobile-tutorial.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.irf-mobile-tutorial strong { display:block; color: var(--gold); font-size: 20px; line-height: 1; text-transform: uppercase; }
.irf-mobile-tutorial span, .irf-mobile-tutorial em { display:block; font: 12px/1.35 Arial, sans-serif; color: rgba(255,241,208,.92); margin-top: 4px; }
.irf-mobile-tutorial em { color: rgba(36,214,196,.95); font-style: normal; }
.irf-tut-close { position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(255,241,208,.14); color:var(--bone); }
@media (min-width: 761px) {
  .irf-brand { padding: 8px 12px; }
  .irf-mark { width: 44px; height: 44px; }
  .irf-title { font-size: clamp(30px, 3vw, 50px); }
  .irf-kicker { font-size: 11px; }
  .irf-small-btn, .irf-cta, .irf-lang-select { min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .irf-hud { top: calc(max(8px, env(safe-area-inset-top)) + 76px); grid-template-columns: 1.15fr repeat(7, minmax(92px,1fr)); gap: 6px; }
  .irf-stat { min-height: 44px; border-radius: 12px; padding: 6px 9px; }
  .irf-bars { top: calc(max(8px, env(safe-area-inset-top)) + 132px); }
  .irf-minimap { width: 150px; height: 106px; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .irf-is-playing .irf-head { inset: max(6px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) auto max(7px, env(safe-area-inset-left)); align-items:start; }
  .irf-is-playing .irf-brand { width: 56px; height: 50px; padding: 6px; justify-content:center; border-radius: 16px; }
  .irf-is-playing .irf-brand > div:not(.irf-mark) { display:none; }
  .irf-is-playing .irf-mark { width: 38px; height: 38px; }
  .irf-is-playing .irf-top-actions { max-width: calc(100vw - 76px); margin-left:auto; display:flex; justify-content:flex-end; gap:5px; }
  .irf-is-playing .irf-lang-select, .irf-is-playing .irf-small-btn { min-width: 52px; min-height: 36px; border-radius: 14px; font-size: 11px; padding: 5px 7px; }
  .irf-is-playing #irfRescue, .irf-is-playing #irfRestart, .irf-is-playing #irfFullscreen, .irf-is-playing #irfChallenge, .irf-is-playing #irfTopCta { display:none !important; }
  .irf-is-playing .irf-hud {
    top: calc(max(8px, env(safe-area-inset-top)) + 56px);
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 4px;
  }
  .irf-is-playing .irf-stat { min-height: 32px; padding: 4px 5px; border-radius: 10px; background: rgba(17,12,9,.54); }
  .irf-is-playing .irf-label { display:none; }
  .irf-is-playing .irf-val { margin:0; font-size: 14px; line-height: 1.1; }
  .irf-is-playing .irf-stat:nth-child(1), .irf-is-playing .irf-stat:nth-child(7), .irf-is-playing .irf-stat:nth-child(8) { display:none !important; }
  .irf-is-playing .irf-stat:nth-child(2), .irf-is-playing .irf-stat:nth-child(3), .irf-is-playing .irf-stat:nth-child(4), .irf-is-playing .irf-stat:nth-child(5), .irf-is-playing .irf-stat:nth-child(6) { display:block; }
  .irf-is-playing .irf-stat:nth-child(6) { display:none; }
  .irf-is-playing .irf-bars { top: calc(max(8px, env(safe-area-inset-top)) + 94px); left: max(7px, env(safe-area-inset-left)); width: calc(100% - 14px); gap:4px; }
  .irf-is-playing .irf-bar { height: 7px; }
  .irf-is-playing .irf-mission-card, .irf-is-playing .irf-roadbook { display:none !important; }
  .irf-is-playing .irf-minimap { display:none; }
  .irf-touch { z-index: 38; }
  .irf-is-playing .irf-touch {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .irf-is-playing .irf-cluster-steer { width: min(46vw, 226px); display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"left right"; gap:8px; }
  .irf-is-playing .irf-joystick { display:none; }
  .irf-is-playing .irf-cluster-drive { margin-left:auto; width:min(48vw, 226px); display:grid; grid-template-columns:1fr 1.08fr; grid-template-areas:"go go" "rev boost"; gap:8px; }
  .irf-is-playing .irf-touch button { width:auto; min-width:0; height:68px; border-radius:22px; font-size:14px; padding:0 5px; border-width:2px; box-shadow:0 12px 24px rgba(0,0,0,.34); }
  .irf-is-playing .irf-touch [data-k="left"] { grid-area:left; }
  .irf-is-playing .irf-touch [data-k="right"] { grid-area:right; }
  .irf-is-playing .irf-touch [data-k="up"] { grid-area:go; height:74px; font-size:22px; letter-spacing:1px; }
  .irf-is-playing .irf-touch [data-k="down"] { grid-area:rev; }
  .irf-is-playing .irf-touch [data-k="boost"] { grid-area:boost; height:68px; border-radius:22px; font-size:16px; }
  .irf-is-playing .irf-touch [data-k="handbrake"] { display:none; }
  .irf-steer-btn.left::before, .irf-steer-btn.right::before { font-size:30px; margin-bottom:3px; }
  .irf-mobile-tutorial { top: calc(max(8px, env(safe-area-inset-top)) + 104px); }
}
@media (orientation: landscape) and (max-height: 560px) and (hover: none) and (pointer: coarse) {
  .irf-is-playing .irf-hud { grid-template-columns: repeat(5, minmax(0,1fr)); left: 70px; right: 7px; top: max(7px, env(safe-area-inset-top)); }
  .irf-is-playing .irf-bars { top: calc(max(7px, env(safe-area-inset-top)) + 39px); left: 70px; width: calc(100% - 84px); }
  .irf-is-playing .irf-top-actions { max-width: 45vw; }
  .irf-is-playing .irf-touch button { height: 58px; border-radius:18px; }
  .irf-is-playing .irf-touch [data-k="up"] { height:58px; }
  .irf-is-playing .irf-cluster-drive { grid-template-columns: repeat(3, 64px); grid-template-areas:"rev boost go"; width:auto; }
  .irf-is-playing .irf-cluster-steer { width: 180px; }
  .irf-is-playing .irf-touch [data-k="boost"] { height:58px; }
  .irf-mobile-tutorial { top: 64px; }
}
@media (max-width: 430px) {
  .irf-is-playing .irf-touch button { height:64px; border-radius:20px; font-size:13px; }
  .irf-is-playing .irf-touch [data-k="up"] { height:70px; font-size:20px; }
  .irf-is-playing .irf-cluster-steer, .irf-is-playing .irf-cluster-drive { gap:6px; }
  .irf-is-playing .irf-cluster-steer { width: 45vw; }
  .irf-is-playing .irf-cluster-drive { width: 49vw; }
  .irf-is-playing .irf-val { font-size: 13px; }
}
@media (max-height: 640px) and (max-width: 760px) {
  .irf-is-playing .irf-touch button { height:58px; }
  .irf-is-playing .irf-touch [data-k="up"] { height:62px; }
}


/* IRF build v4: true mobile thumb layout and cleaner play screen */
:root { --irf-safe-bottom: max(20px, env(safe-area-inset-bottom)); }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-head {
    position: fixed;
    inset: max(6px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) auto max(7px, env(safe-area-inset-left));
    min-height: 42px;
    z-index: 45;
  }
  #irf-game.irf-is-playing .irf-brand {
    display: none !important;
  }
  #irf-game.irf-is-playing .irf-top-actions {
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    max-width: none;
    width: auto;
    display: grid;
    grid-template-columns: 58px 1fr 72px;
    gap: 6px;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }
  #irf-game.irf-is-playing .irf-top-actions > * { pointer-events: auto; }
  #irf-game.irf-is-playing #irfRestart,
  #irf-game.irf-is-playing #irfRescue,
  #irf-game.irf-is-playing #irfFullscreen,
  #irf-game.irf-is-playing #irfChallenge,
  #irf-game.irf-is-playing #irfTopCta { display: none !important; }
  #irf-game.irf-is-playing .irf-lang-select,
  #irf-game.irf-is-playing #irfSound,
  #irf-game.irf-is-playing #irfPause {
    display: flex !important;
    min-width: 0;
    min-height: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 11px;
    background: rgba(17,12,9,.68);
  }
  #irf-game.irf-is-playing #irfSound { justify-self: end; width: 74px; }
  #irf-game.irf-is-playing #irfPause { justify-self: end; width: 72px; }

  #irf-game.irf-is-playing .irf-hud {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 44px);
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    z-index: 30;
    display: grid;
    grid-template-columns: .8fr .8fr 1fr;
    gap: 5px;
    pointer-events: none;
  }
  #irf-game.irf-is-playing .irf-stat {
    display: none !important;
    min-height: 34px;
    padding: 4px 7px;
    border-radius: 11px;
    background: rgba(17,12,9,.54);
    border-color: rgba(255,241,208,.12);
    box-shadow: none;
    backdrop-filter: blur(6px);
  }
  #irf-game.irf-is-playing .irf-stat:nth-child(2),
  #irf-game.irf-is-playing .irf-stat:nth-child(3),
  #irf-game.irf-is-playing .irf-stat:nth-child(4) { display: block !important; }
  #irf-game.irf-is-playing .irf-label {
    display: block;
    font-size: 7px;
    letter-spacing: .7px;
    line-height: 1;
    opacity: .72;
  }
  #irf-game.irf-is-playing .irf-val {
    margin-top: 3px;
    font-size: 15px;
    line-height: .95;
    white-space: nowrap;
  }
  #irf-game.irf-is-playing .irf-bars {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 84px);
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    width: auto;
    z-index: 30;
    gap: 4px;
  }
  #irf-game.irf-is-playing .irf-bar { height: 6px; background: rgba(17,12,9,.38); }

  #irf-game.irf-is-playing .irf-mission-card,
  #irf-game.irf-is-playing .irf-roadbook,
  #irf-game.irf-is-playing .irf-minimap { display: none !important; }

  #irf-game.irf-is-playing .irf-touch {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(158px, 24svh, 210px);
    padding: 0 max(12px, env(safe-area-inset-right)) var(--irf-safe-bottom) max(12px, env(safe-area-inset-left));
    display: block;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17,12,9,0), rgba(17,12,9,.18));
  }
  #irf-game.irf-is-playing .irf-cluster,
  #irf-game.irf-is-playing .irf-cluster-steer,
  #irf-game.irf-is-playing .irf-cluster-drive { pointer-events: auto; }
  #irf-game.irf-is-playing .irf-cluster-steer {
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    bottom: var(--irf-safe-bottom);
    width: min(43vw, 190px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    gap: 10px;
  }
  #irf-game.irf-is-playing .irf-cluster-drive {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--irf-safe-bottom);
    width: min(44vw, 196px);
    display: grid;
    grid-template-columns: .82fr 1fr;
    grid-template-areas: "go go" "rev boost";
    gap: 10px;
    margin: 0;
  }
  #irf-game.irf-is-playing .irf-joystick { display: none !important; }
  #irf-game.irf-is-playing .irf-touch button {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 76px;
    padding: 0 4px;
    border-radius: 24px;
    border-width: 2px;
    font-size: 15px;
    letter-spacing: .4px;
    box-shadow: 0 13px 26px rgba(0,0,0,.38);
    touch-action: none;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="left"] { grid-area: left; }
  #irf-game.irf-is-playing .irf-touch [data-k="right"] { grid-area: right; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] {
    grid-area: go;
    height: 86px;
    font-size: 26px;
    border-radius: 28px;
    background: linear-gradient(135deg, #24d6c4, #ffc14a);
  }
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { grid-area: rev; height: 62px; font-size: 13px; }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"] {
    grid-area: boost;
    height: 62px;
    border-radius: 22px;
    font-size: 15px;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="handbrake"] { display: none !important; }
  #irf-game.irf-is-playing .irf-steer-btn.left::before,
  #irf-game.irf-is-playing .irf-steer-btn.right::before {
    font-size: 34px;
    line-height: .8;
    margin-bottom: 2px;
  }
  #irf-game.irf-is-playing .irf-mobile-tutorial {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 100px);
    z-index: 60;
    width: min(390px, calc(100vw - 20px));
    padding: 10px 40px 10px 12px;
  }
  #irf-game.irf-is-playing .irf-mobile-tutorial strong { font-size: 18px; }
  #irf-game.irf-is-playing .irf-mobile-tutorial span,
  #irf-game.irf-is-playing .irf-mobile-tutorial em { font-size: 11px; }
}

@media (orientation: portrait) and (max-width: 430px) {
  #irf-game.irf-is-playing .irf-touch {
    height: clamp(166px, 25svh, 218px);
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  #irf-game.irf-is-playing .irf-cluster-steer { width: 43vw; gap: 8px; }
  #irf-game.irf-is-playing .irf-cluster-drive { width: 45vw; gap: 8px; }
  #irf-game.irf-is-playing .irf-touch button { height: 72px; border-radius: 22px; font-size: 14px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 84px; font-size: 24px; }
  #irf-game.irf-is-playing .irf-touch [data-k="down"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"] { height: 60px; }
  #irf-game.irf-is-playing .irf-val { font-size: 14px; }
}

@media (orientation: landscape) and (max-height: 560px) and (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-top-actions {
    grid-template-columns: 54px 70px 68px;
    left: auto;
    width: 202px;
  }
  #irf-game.irf-is-playing .irf-hud {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: 220px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #irf-game.irf-is-playing .irf-bars {
    top: calc(max(7px, env(safe-area-inset-top)) + 42px);
    left: max(7px, env(safe-area-inset-left));
    right: 220px;
  }
  #irf-game.irf-is-playing .irf-touch {
    height: 124px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  #irf-game.irf-is-playing .irf-cluster-steer { width: 178px; gap: 8px; }
  #irf-game.irf-is-playing .irf-cluster-drive {
    width: 244px;
    grid-template-columns: 62px 76px 92px;
    grid-template-areas: "rev boost go";
    gap: 7px;
  }
  #irf-game.irf-is-playing .irf-touch button,
  #irf-game.irf-is-playing .irf-touch [data-k="up"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] {
    height: 66px;
    border-radius: 20px;
    font-size: 13px;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { font-size: 20px; }
  #irf-game.irf-is-playing .irf-mobile-tutorial { top: 54px; }
}

@media (max-height: 660px) and (orientation: portrait) {
  #irf-game.irf-is-playing .irf-touch { height: 150px; }
  #irf-game.irf-is-playing .irf-touch button { height: 64px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 74px; }
  #irf-game.irf-is-playing .irf-touch [data-k="down"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"] { height: 54px; }
}

@media (max-width: 760px) {
  .irf-card h2 { font-size: clamp(30px, 11vw, 48px); }
  .irf-card { max-height: 100svh; }
}


/* IRF build v5: phone-first thumb controls, less cramped live HUD */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-top-actions {
    grid-template-columns: 1fr 62px;
    left: auto;
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    min-width: 62px;
  }
  #irf-game.irf-is-playing .irf-lang-select,
  #irf-game.irf-is-playing #irfSound {
    display: none !important;
  }
  #irf-game.irf-is-playing #irfPause {
    width: 62px;
    min-height: 34px;
    height: 34px;
    padding: 0 7px;
    font-size: 10px;
    background: rgba(17,12,9,.55);
    border-color: rgba(255,241,208,.16);
  }
  #irf-game.irf-is-playing .irf-hud {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: 78px;
    grid-template-columns: .85fr .85fr 1fr;
    gap: 4px;
  }
  #irf-game.irf-is-playing .irf-stat {
    min-height: 31px;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(17,12,9,.44);
  }
  #irf-game.irf-is-playing .irf-label { font-size: 7px; }
  #irf-game.irf-is-playing .irf-val { font-size: 13px; margin-top: 2px; }
  #irf-game.irf-is-playing .irf-bars {
    top: calc(max(7px, env(safe-area-inset-top)) + 37px);
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    gap: 3px;
  }
  #irf-game.irf-is-playing .irf-bar { height: 5px; opacity: .88; }

  #irf-game.irf-is-playing .irf-touch {
    height: clamp(218px, 36svh, 292px);
    padding: 0;
    background:
      linear-gradient(180deg, rgba(17,12,9,0), rgba(17,12,9,.10) 38%, rgba(17,12,9,.22));
  }
  #irf-game.irf-is-playing .irf-cluster-steer,
  #irf-game.irf-is-playing .irf-cluster-drive {
    bottom: max(18px, env(safe-area-inset-bottom));
  }
  #irf-game.irf-is-playing .irf-cluster-steer::before,
  #irf-game.irf-is-playing .irf-cluster-drive::before {
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    text-align: center;
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: 1.3px;
    color: rgba(255,241,208,.78);
    text-shadow: 0 2px 4px rgba(0,0,0,.6);
    pointer-events: none;
  }
  #irf-game.irf-is-playing .irf-cluster-steer::before { content: "STEER"; }
  #irf-game.irf-is-playing .irf-cluster-drive::before { content: "DRIVE"; }
  html[data-irf-lang="es"] #irf-game.irf-is-playing .irf-cluster-steer::before { content: "GIRAR"; }
  html[data-irf-lang="es"] #irf-game.irf-is-playing .irf-cluster-drive::before { content: "CONDUCIR"; }

  #irf-game.irf-is-playing .irf-cluster-steer {
    left: max(10px, env(safe-area-inset-left));
    width: calc(52vw - 14px);
    height: 116px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    gap: 8px;
  }
  #irf-game.irf-is-playing .irf-cluster-drive {
    right: max(10px, env(safe-area-inset-right));
    width: calc(48vw - 14px);
    height: 136px;
    grid-template-columns: .86fr 1.18fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "boost go" "rev go";
    gap: 8px;
  }
  #irf-game.irf-is-playing .irf-touch button {
    height: 100%;
    border-radius: 22px;
    font-size: 15px;
    background: rgba(17,12,9,.72);
    border-color: rgba(255,241,208,.20);
    box-shadow: 0 12px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,241,208,.04);
  }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] {
    height: 116px;
    font-size: 14px;
    background: linear-gradient(180deg, rgba(36,214,196,.26), rgba(17,12,9,.68)) !important;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] {
    height: 136px;
    min-height: 136px;
    font-size: 27px;
    border-radius: 28px;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] {
    height: 64px;
    font-size: 13px;
    border-radius: 18px;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"] {
    background: linear-gradient(135deg, var(--orange), var(--gold));
    color: #211009;
    border: 0;
  }
  #irf-game.irf-is-playing .irf-steer-btn.left::before,
  #irf-game.irf-is-playing .irf-steer-btn.right::before {
    font-size: 40px;
    margin-bottom: 6px;
  }
  #irf-game.irf-is-playing .irf-touch button.is-pressed {
    transform: scale(.97) translateY(2px);
    filter: brightness(1.22);
    box-shadow: 0 0 0 4px rgba(36,214,196,.16), 0 8px 18px rgba(0,0,0,.38);
  }
  #irf-game.irf-is-playing .irf-mobile-tutorial {
    top: calc(max(7px, env(safe-area-inset-top)) + 52px);
  }
}

@media (orientation: portrait) and (max-width: 390px) {
  #irf-game.irf-is-playing .irf-cluster-steer { width: calc(53vw - 12px); gap: 6px; }
  #irf-game.irf-is-playing .irf-cluster-drive { width: calc(47vw - 12px); gap: 6px; }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] { height: 106px; border-radius: 20px; }
  #irf-game.irf-is-playing .irf-cluster-steer { height: 106px; }
  #irf-game.irf-is-playing .irf-cluster-drive { height: 126px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 126px; min-height: 126px; font-size: 24px; }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { height: 59px; font-size: 12px; }
}

@media (max-height: 690px) and (orientation: portrait) {
  #irf-game.irf-is-playing .irf-touch { height: 205px; }
  #irf-game.irf-is-playing .irf-cluster-steer { height: 96px; }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] { height: 96px; }
  #irf-game.irf-is-playing .irf-cluster-drive { height: 118px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 118px; min-height: 118px; }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { height: 55px; }
}

@media (orientation: landscape) and (max-height: 560px) and (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-touch { height: 132px; }
  #irf-game.irf-is-playing .irf-cluster-steer { width: 220px; height: 82px; left: max(12px, env(safe-area-inset-left)); }
  #irf-game.irf-is-playing .irf-cluster-drive { width: 286px; height: 82px; grid-template-columns: 72px 80px 118px; grid-template-rows: 82px; grid-template-areas: "rev boost go"; }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"],
  #irf-game.irf-is-playing .irf-touch [data-k="up"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { height: 82px; min-height: 82px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { font-size: 24px; }
  #irf-game.irf-is-playing .irf-hud { right: 84px; }
  #irf-game.irf-is-playing .irf-bars { right: 84px; }
}

@media (max-width: 760px) {
  .irf-overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .irf-card { border-radius: 16px; }
  .irf-buttons { position: sticky; bottom: -12px; background: linear-gradient(180deg, rgba(18,12,8,0), rgba(18,12,8,.96) 32%); padding-top: 10px; }
}

/* IRF build v6: mobile comfort controls and cleaner race screen */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-top-actions {
    top: max(7px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    width: 58px;
    grid-template-columns: 58px;
    gap: 0;
  }
  #irf-game.irf-is-playing #irfPause {
    display: flex !important;
    width: 58px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 9px;
    border-radius: 14px;
    opacity: .78;
  }
  #irf-game.irf-is-playing .irf-lang-select,
  #irf-game.irf-is-playing #irfSound,
  #irf-game.irf-is-playing #irfRestart,
  #irf-game.irf-is-playing #irfRescue,
  #irf-game.irf-is-playing #irfFullscreen,
  #irf-game.irf-is-playing #irfChallenge,
  #irf-game.irf-is-playing #irfTopCta { display: none !important; }

  #irf-game.irf-is-playing .irf-hud {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: 74px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #irf-game.irf-is-playing .irf-stat { display: none !important; }
  #irf-game.irf-is-playing .irf-stat:nth-child(2),
  #irf-game.irf-is-playing .irf-stat:nth-child(4),
  #irf-game.irf-is-playing .irf-stat:nth-child(5) {
    display: block !important;
    min-height: 29px;
    padding: 3px 6px;
    border-radius: 9px;
    background: rgba(17,12,9,.42);
  }
  #irf-game.irf-is-playing .irf-label { font-size: 7px; letter-spacing: .5px; }
  #irf-game.irf-is-playing .irf-val { font-size: 13px; margin-top: 1px; }
  #irf-game.irf-is-playing .irf-bars {
    top: calc(max(7px, env(safe-area-inset-top)) + 34px);
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    gap: 3px;
  }
  #irf-game.irf-is-playing .irf-bar { height: 5px; opacity: .82; }

  #irf-game.irf-is-playing .irf-touch {
    height: clamp(230px, 34svh, 310px);
    padding: 0;
    background: linear-gradient(180deg, rgba(17,12,9,0), rgba(17,12,9,.10) 34%, rgba(17,12,9,.30));
  }
  #irf-game.irf-is-playing .irf-cluster-steer,
  #irf-game.irf-is-playing .irf-cluster-drive {
    bottom: calc(max(28px, env(safe-area-inset-bottom)) + 12px);
  }
  #irf-game.irf-is-playing .irf-cluster-steer {
    left: max(10px, env(safe-area-inset-left));
    width: calc(49vw - 12px);
    height: 142px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    gap: 8px;
  }
  #irf-game.irf-is-playing .irf-cluster-drive {
    right: max(10px, env(safe-area-inset-right));
    width: calc(51vw - 12px);
    height: 166px;
    grid-template-columns: .82fr 1.18fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "auto go" "boost go" "rev go";
    gap: 7px;
  }
  #irf-game.irf-is-playing .irf-touch button {
    border-radius: 22px;
    border-width: 2px;
    box-shadow: 0 12px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,241,208,.05);
    font-size: 14px;
    letter-spacing: .25px;
    background: rgba(17,12,9,.76);
  }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] {
    height: 142px !important;
    min-height: 142px !important;
    font-size: 14px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(36,214,196,.30), rgba(17,12,9,.70)) !important;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] {
    grid-area: go;
    height: 166px !important;
    min-height: 166px !important;
    border-radius: 32px;
    font-size: 30px;
    background: linear-gradient(135deg, #24d6c4, #ffc14a) !important;
    color: #211009;
    border: 0;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="auto"] {
    display: flex !important;
    grid-area: auto;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 18px;
    font-size: 12px;
    color: var(--bone);
  }
  #irf-game.irf-auto-drive.irf-is-playing .irf-touch [data-k="auto"] {
    background: linear-gradient(135deg, var(--turq), var(--gold)) !important;
    color: #211009;
    border-color: rgba(255,241,208,.26);
    box-shadow: 0 0 0 4px rgba(36,214,196,.18), 0 12px 26px rgba(0,0,0,.36);
  }
  #irf-game.irf-is-playing .irf-touch [data-k="boost"] {
    grid-area: boost;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 18px;
    font-size: 12px;
    background: linear-gradient(135deg, var(--orange), var(--gold)) !important;
    color: #211009;
    border: 0;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="down"] {
    grid-area: rev;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 18px;
    font-size: 12px;
  }
  #irf-game.irf-is-playing .irf-touch [data-k="handbrake"],
  #irf-game.irf-is-playing .irf-joystick { display: none !important; }
  #irf-game.irf-is-playing .irf-steer-btn.left::before,
  #irf-game.irf-is-playing .irf-steer-btn.right::before { font-size: 46px; margin-bottom: 7px; }
  #irf-game.irf-is-playing .irf-cluster-steer::before,
  #irf-game.irf-is-playing .irf-cluster-drive::before {
    top: -22px;
    font-size: 10px;
    letter-spacing: 1.4px;
    opacity: .82;
  }
}

@media (orientation: portrait) and (max-width: 390px) {
  #irf-game.irf-is-playing .irf-touch { height: 248px; }
  #irf-game.irf-is-playing .irf-cluster-steer { width: calc(48vw - 10px); height: 132px; gap: 6px; }
  #irf-game.irf-is-playing .irf-cluster-drive { width: calc(52vw - 10px); height: 158px; gap: 6px; }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] { height: 132px !important; min-height: 132px !important; font-size: 12px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 158px !important; min-height: 158px !important; font-size: 26px; }
  #irf-game.irf-is-playing .irf-touch [data-k="auto"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { height: 48px !important; min-height: 48px !important; font-size: 11px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  #irf-game.irf-is-playing .irf-touch { height: 224px; }
  #irf-game.irf-is-playing .irf-cluster-steer { height: 116px; }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"] { height: 116px !important; min-height: 116px !important; }
  #irf-game.irf-is-playing .irf-cluster-drive { height: 144px; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 144px !important; min-height: 144px !important; }
  #irf-game.irf-is-playing .irf-touch [data-k="auto"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"] { height: 44px !important; min-height: 44px !important; }
}

@media (orientation: landscape) and (max-height: 560px) and (hover: none) and (pointer: coarse) {
  #irf-game.irf-is-playing .irf-touch { height: 134px; }
  #irf-game.irf-is-playing .irf-cluster-steer { width: 220px; height: 88px; }
  #irf-game.irf-is-playing .irf-cluster-drive {
    width: 350px;
    height: 88px;
    grid-template-columns: 74px 74px 80px 108px;
    grid-template-rows: 88px;
    grid-template-areas: "auto rev boost go";
  }
  #irf-game.irf-is-playing .irf-touch [data-k="left"],
  #irf-game.irf-is-playing .irf-touch [data-k="right"],
  #irf-game.irf-is-playing .irf-touch [data-k="auto"],
  #irf-game.irf-is-playing .irf-touch [data-k="boost"],
  #irf-game.irf-is-playing .irf-touch [data-k="down"],
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { height: 88px !important; min-height: 88px !important; }
  #irf-game.irf-is-playing .irf-touch [data-k="up"] { font-size: 24px; }
}

/* IRF build v7: mission briefing and stage progression polish */
.irf-briefing-card {
  width: min(980px, 96vw);
}
.irf-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}
.irf-mission-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  max-height: 330px;
  overflow: auto;
}
.irf-mission-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(255,241,208,.07);
  border: 1px solid rgba(255,241,208,.10);
}
.irf-mission-list b {
  color: var(--gold);
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
}
.irf-mission-list span,
.irf-mobile-tip span {
  font: 13px/1.35 Arial, sans-serif;
  color: rgba(255,241,208,.86);
}
.irf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.irf-mobile-tip {
  margin: 14px auto 0;
  width: min(760px, 100%);
  padding: 11px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(36,214,196,.14), rgba(255,193,74,.10));
  border: 1px solid rgba(36,214,196,.24);
  text-align: center;
}
.irf-mobile-tip strong {
  display: block;
  color: var(--turq);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
}
.irf-mission-card span + span {
  margin-top: 4px;
}
.irf-mission-card em {
  font-style: normal;
  color: var(--turq);
  font-weight: 700;
}
@media (max-width: 760px) {
  .irf-briefing-grid { grid-template-columns: 1fr; gap: 10px; }
  .irf-mission-list { max-height: 230px; }
  .irf-mission-list li { grid-template-columns: 58px 1fr; padding: 8px; }
  .irf-mission-list b { font-size: 14px; }
  .irf-mission-list span, .irf-mobile-tip span { font-size: 12px; }
  .irf-mobile-tip { padding: 9px 10px; }
  .irf-mobile-tip strong { font-size: 16px; }
}

/* IRF build v8: compact splash and pre-game flow */
.irf-btn.ghost {
  background: rgba(255,241,208,.08);
  color: rgba(255,241,208,.9);
  border: 1px solid rgba(255,241,208,.16);
}
.irf-wide { width: 100%; }
.irf-is-splash .irf-overlay,
.irf-is-build .irf-overlay {
  background:
    linear-gradient(180deg, rgba(9,6,4,.12), rgba(9,6,4,.68)),
    radial-gradient(circle at 18% 10%, rgba(255,193,74,.26), transparent 32%),
    image-set(url('../assets/map-bg.webp') type('image/webp'), url('../assets/map-bg.png') type('image/png')) center/cover no-repeat;
  backdrop-filter: blur(3px);
}
.irf-splash-card,
.irf-compact-card,
.irf-build-card {
  background: linear-gradient(180deg, rgba(58,28,15,.9), rgba(18,12,8,.94));
  border-color: rgba(255,241,208,.22);
}
.irf-splash-card {
  width: min(980px, calc(100vw - 28px));
  height: min(650px, calc(100svh - 28px));
  max-height: calc(100svh - 28px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(14px, 2vw, 24px);
}
.irf-splash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}
.irf-mini-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
}
.irf-mini-brand span {
  font-size: clamp(24px, 3vw, 42px);
  line-height: .88;
  letter-spacing: .8px;
  color: var(--bone);
  text-shadow: 0 3px 0 rgba(0,0,0,.32);
}
.irf-mini-brand em {
  font: 11px/1.2 Arial, sans-serif;
  letter-spacing: 2px;
  color: rgba(255,241,208,.78);
  font-style: normal;
}
.irf-start-lang {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,241,208,.16);
  gap: 4px;
  flex: 0 0 auto;
}
.irf-lang-pill {
  min-width: 54px;
  min-height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255,241,208,.82);
  font-size: 15px;
  font-weight: 900;
}
.irf-lang-pill.active {
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #211009;
  box-shadow: 0 8px 18px rgba(239,106,33,.2);
}
.irf-splash-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(230px, .7fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
  min-height: 0;
}
.irf-splash-copy {
  align-self: center;
}
.irf-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(36,214,196,.14);
  border: 1px solid rgba(36,214,196,.35);
  color: var(--turq);
  font: 12px/1.1 Arial, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.irf-splash-copy h2 {
  margin: 16px 0 8px;
  text-align: left;
  font-size: clamp(54px, 8vw, 112px);
  line-height: .78;
  max-width: 620px;
}
.irf-splash-copy p {
  margin: 0;
  text-align: left;
  max-width: 520px;
  font: 18px/1.35 Arial, sans-serif;
  color: rgba(255,241,208,.9);
}
.irf-splash-actions {
  display: grid;
  gap: 10px;
  align-self: center;
}
.irf-splash-actions .irf-btn {
  justify-content: center;
  min-height: 58px;
  font-size: 18px;
  letter-spacing: .5px;
}
.irf-splash-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.irf-splash-footer span,
.irf-mini-summary span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,241,208,.14);
  background: rgba(255,241,208,.07);
  font: 11px/1.2 Arial, sans-serif;
  letter-spacing: 1px;
  color: rgba(255,241,208,.8);
  text-transform: uppercase;
}
.irf-compact-card {
  width: min(820px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  overflow: auto;
}
.irf-compact-card .irf-buttons,
.irf-build-card .irf-buttons {
  position: static !important;
  background: none !important;
  padding-top: 0 !important;
}
.irf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.irf-info-grid h3 {
  margin: 0 0 10px;
  font-size: 28px;
  color: var(--gold);
  text-transform: uppercase;
}
.irf-info-tile {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,241,208,.13);
  background: rgba(255,241,208,.07);
  margin-bottom: 8px;
}
.irf-info-tile strong { display: block; font-size: 18px; text-transform: uppercase; color: var(--bone); }
.irf-info-tile span { display: block; margin-top: 4px; font: 13px/1.35 Arial, sans-serif; color: rgba(255,241,208,.78); }
.irf-settings-grid {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin: 22px auto 0;
}
.irf-build-card {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  overflow: auto;
  padding: clamp(14px, 2vw, 22px);
}
.irf-build-compact {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  margin-top: 14px;
}
.irf-select-grid-compact .irf-driver {
  min-height: 245px;
}
.irf-select-grid-compact .irf-driver-name {
  font-size: 24px;
}
.irf-styles-compact .irf-style {
  padding: 10px;
}
.irf-styles-compact .irf-style strong { font-size: 17px; }
.irf-mini-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.irf-build-actions .irf-btn {
  min-width: 150px;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .irf-is-splash .irf-overlay,
  .irf-is-build .irf-overlay,
  .irf-is-menu .irf-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .irf-splash-card {
    width: 100%;
    height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
    border-radius: 20px;
    padding: 12px;
  }
  .irf-splash-top {
    min-height: 42px;
    gap: 8px;
  }
  .irf-mini-brand span { font-size: clamp(22px, 7vw, 32px); }
  .irf-mini-brand em { font-size: 9px; letter-spacing: 1.3px; }
  .irf-start-lang { padding: 3px; gap: 3px; }
  .irf-lang-pill { min-width: 44px; min-height: 36px; font-size: 13px; }
  .irf-splash-main {
    grid-template-columns: 1fr;
    gap: 12px;
    align-content: center;
  }
  .irf-splash-copy h2 {
    font-size: clamp(44px, 16vw, 72px);
    text-align: center;
    margin: 12px auto 8px;
  }
  .irf-splash-copy p {
    text-align: center;
    font-size: 14px;
    max-width: 310px;
    margin: 0 auto;
  }
  .irf-badge {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    font-size: 10px;
    min-height: 28px;
    padding: 7px 10px;
  }
  .irf-splash-actions {
    gap: 8px;
    width: min(340px, 100%);
    margin: 0 auto;
  }
  .irf-splash-actions .irf-btn {
    min-height: 52px;
    font-size: 15px;
  }
  .irf-splash-footer {
    padding-top: 6px;
    gap: 5px;
  }
  .irf-splash-footer span {
    font-size: 9px;
    padding: 6px 7px;
  }
  .irf-compact-card,
  .irf-build-card {
    width: 100%;
    max-height: calc(100svh - 16px);
    border-radius: 18px;
    padding: 12px;
  }
  .irf-info-grid,
  .irf-build-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .irf-info-grid h3,
  .irf-box h3 { font-size: 22px; }
  .irf-info-tile { padding: 10px; }
  .irf-info-tile strong { font-size: 16px; }
  .irf-select-grid-compact {
    grid-template-columns: 1fr 1fr !important;
  }
  .irf-select-grid-compact .irf-driver {
    min-height: 180px;
  }
  .irf-driver-info {
    padding: 64px 10px 10px;
  }
  .irf-select-grid-compact .irf-driver-name {
    font-size: 18px;
  }
  .irf-driver-meta { font-size: 10px; letter-spacing: .4px; }
  .irf-styles-compact {
    grid-template-columns: 1fr 1fr !important;
  }
  .irf-styles-compact .irf-style span { display: none; }
  .irf-build-actions .irf-btn { min-width: 0; flex: 1 1 auto; }
}
@media (max-height: 640px) and (max-width: 760px) {
  .irf-splash-copy h2 { font-size: clamp(38px, 13vw, 58px); }
  .irf-splash-copy p { display: none; }
  .irf-splash-actions .irf-btn { min-height: 46px; }
  .irf-splash-footer { display: none; }
  .irf-select-grid-compact .irf-driver { min-height: 150px; }
  .irf-box { padding: 10px; }
  .irf-field { margin: 6px 0; }
}

/* IRF build v9: viral-ready finish screen and score/share flow */
.irf-viral-card {
  width: min(1120px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  overflow: auto;
  padding: clamp(14px, 2vw, 24px);
  background: linear-gradient(180deg, rgba(60,29,14,.94), rgba(17,12,8,.96));
}
.irf-viral-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.irf-viral-head h2 {
  text-align: left;
  margin: 0 0 6px;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .82;
}
.irf-viral-head p {
  margin: 0;
  max-width: 620px;
  font: 15px/1.4 Arial, sans-serif;
  color: rgba(255,241,208,.82);
  text-align: left;
}
.irf-viral-score {
  min-width: 190px;
  border-radius: 22px;
  padding: 14px 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(239,106,33,.26), rgba(255,193,74,.16));
  border: 1px solid rgba(255,193,74,.3);
  box-shadow: 0 16px 40px rgba(0,0,0,.26);
}
.irf-viral-score span,
.irf-viral-score em {
  display: block;
  font: 11px/1.1 Arial, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,241,208,.8);
  font-style: normal;
}
.irf-viral-score strong {
  display: block;
  margin: 4px 0;
  font-size: clamp(34px, 4vw, 54px);
  color: var(--gold);
  line-height: .9;
}
.irf-viral-grid {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(280px, 1.05fr) minmax(230px, .8fr);
  gap: 12px;
  align-items: stretch;
}
.irf-result-card dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 10px;
  margin: 0;
  text-align: left;
  font-family: Arial, sans-serif;
}
.irf-result-card dt {
  color: rgba(255,241,208,.58);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}
.irf-result-card dd {
  margin: 0;
  color: var(--bone);
  font-weight: 900;
  font-size: 14px;
}
.irf-share-panel textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255,241,208,.18);
  background: rgba(8,6,4,.44);
  color: var(--bone);
  padding: 11px 12px;
  font: 14px/1.35 Arial, sans-serif;
  outline: none;
}
.irf-share-panel textarea:focus,
.irf-share-panel input:focus {
  border-color: rgba(36,214,196,.72);
  box-shadow: 0 0 0 3px rgba(36,214,196,.11);
}
.irf-viral-actions,
.irf-finish-buttons {
  position: static !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 10px;
}
.irf-viral-actions .irf-btn,
.irf-finish-buttons .irf-btn {
  min-width: 130px;
  justify-content: center;
}
.irf-splits-box {
  margin-top: 12px;
}
.irf-splits-box table {
  width: 100%;
  border-collapse: collapse;
  font: 13px Arial, sans-serif;
  color: rgba(255,241,208,.86);
}
.irf-splits-box td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,241,208,.08);
}
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .irf-viral-card {
    width: 100%;
    max-height: calc(100svh - 16px);
    border-radius: 18px;
    padding: 12px;
  }
  .irf-viral-head {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .irf-viral-head h2 {
    text-align: center;
    font-size: clamp(34px, 12vw, 54px);
  }
  .irf-viral-head p {
    text-align: center;
    font-size: 13px;
    max-width: 320px;
    margin: 0 auto;
  }
  .irf-viral-score {
    min-width: 0;
    width: min(320px, 100%);
    margin: 0 auto;
    padding: 10px 12px;
  }
  .irf-viral-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .irf-result-card dl {
    grid-template-columns: 88px 1fr;
  }
  .irf-share-panel textarea {
    min-height: 84px;
    font-size: 13px;
  }
  .irf-viral-actions,
  .irf-finish-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .irf-viral-actions .irf-btn,
  .irf-finish-buttons .irf-btn {
    min-width: 0;
    min-height: 46px;
    font-size: 13px;
  }
}
@media (max-height: 640px) and (max-width: 860px) {
  .irf-viral-head h2 { font-size: clamp(30px, 10vw, 44px); }
  .irf-viral-head p { display: none; }
  .irf-viral-score strong { font-size: 30px; }
  .irf-splits-box { display: none; }
}

/* IRF build v10: compact first screen, no pointless build title, marketing CTAs */
.irf-is-splash .irf-overlay {
  overflow: hidden;
  place-items: center;
}
.irf-is-build .irf-overlay,
.irf-is-how .irf-overlay,
.irf-is-settings .irf-overlay,
.irf-is-finish .irf-overlay,
.irf-is-fail .irf-overlay,
.irf-is-pause .irf-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  place-items: start center;
  align-content: start;
}
.irf-splash-card-v10 {
  width: min(880px, calc(100vw - 28px));
  height: auto;
  min-height: 0;
  max-height: calc(100svh - 28px);
  overflow: hidden;
  padding: clamp(14px, 2vw, 22px);
  border-radius: clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 1.5vw, 16px);
}
.irf-splash-top-v10 {
  min-height: 44px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,241,208,.12);
}
.irf-mini-brand-v10 span {
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: .86;
}
.irf-splash-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.irf-mini-round {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,241,208,.16);
  color: var(--bone);
  background: rgba(17,12,9,.48);
  text-transform: uppercase;
  font-size: 13px;
}
.irf-splash-main-v10 {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}
.irf-splash-copy-v10 h2 {
  margin: 12px 0 6px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .82;
  letter-spacing: .5px;
}
.irf-splash-copy-v10 p {
  font-size: clamp(15px, 1.7vw, 19px);
  max-width: 460px;
}
.irf-campaign-strip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(36,214,196,.13), rgba(255,193,74,.10));
  border: 1px solid rgba(36,214,196,.28);
}
.irf-campaign-strip strong {
  display: block;
  color: var(--gold);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}
.irf-campaign-strip span {
  display: block;
  margin-top: 4px;
  font: 13px/1.35 Arial, sans-serif;
  color: rgba(255,241,208,.86);
}
.irf-splash-actions-v10 {
  gap: 8px;
}
.irf-splash-actions-v10 .irf-btn {
  min-height: 50px;
  font-size: 16px;
}
.irf-splash-footer-v10 {
  padding-top: 0;
  justify-content: flex-start;
}
.irf-splash-footer-v10 a {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,193,74,.28);
  background: rgba(255,193,74,.10);
  font: 11px/1.2 Arial, sans-serif;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
}
.irf-build-card-v10,
.irf-compact-card,
.irf-viral-card {
  overflow: visible;
  max-height: none;
  margin: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
}
.irf-build-card-v10 {
  width: min(1080px, calc(100vw - 28px));
  padding: clamp(14px, 1.7vw, 20px);
}
.irf-build-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title lang" "sub lang";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 46px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,241,208,.12);
}
.irf-build-topline > span {
  grid-area: title;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: .85;
  color: var(--bone);
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.irf-build-topline > em {
  grid-area: sub;
  font: 12px/1.25 Arial, sans-serif;
  color: rgba(255,241,208,.75);
  font-style: normal;
}
.irf-build-topline .irf-start-lang {
  grid-area: lang;
}
.irf-build-compact-v10 {
  margin-top: 0;
  gap: 12px;
}
.irf-build-card-v10 .irf-box {
  padding: 14px;
}
.irf-build-card-v10 .irf-box h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 8px;
}
.irf-build-card-v10 .irf-select-grid-compact .irf-driver {
  min-height: 218px;
}
.irf-build-card-v10 .irf-driver-info {
  padding-top: 110px;
}
.irf-build-card-v10 .irf-select-grid-compact .irf-driver-name {
  font-size: 22px;
}
.irf-build-card-v10 .irf-field {
  margin: 8px 0;
}
.irf-build-card-v10 .irf-styles-compact {
  gap: 8px;
}
.irf-build-card-v10 .irf-styles-compact .irf-style {
  padding: 9px;
}
.irf-build-actions {
  margin-top: 12px;
}
.irf-viral-actions #irfWhatsApp {
  background: rgba(36,214,196,.12);
  border-color: rgba(36,214,196,.26);
  color: var(--turq);
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .irf-is-splash .irf-overlay {
    overflow: hidden;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .irf-splash-card-v10 {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: calc(100svh - 16px);
    gap: 8px;
    padding: 10px;
  }
  .irf-splash-top-v10 {
    min-height: 38px;
    gap: 6px;
    padding-bottom: 6px;
  }
  .irf-mini-brand-v10 span {
    font-size: clamp(20px, 7vw, 30px);
  }
  .irf-mini-brand-v10 em {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .irf-splash-tools {
    gap: 5px;
  }
  .irf-mini-round {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .irf-splash-main-v10 {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 8px;
  }
  .irf-splash-copy-v10 h2 {
    font-size: clamp(36px, 14vw, 58px);
    margin: 9px auto 4px;
    text-align: center;
  }
  .irf-splash-copy-v10 p {
    font-size: 13px;
    text-align: center;
  }
  .irf-campaign-strip {
    margin-top: 9px;
    padding: 9px 10px;
    text-align: center;
  }
  .irf-campaign-strip strong {
    font-size: 20px;
  }
  .irf-campaign-strip span {
    font-size: 11px;
  }
  .irf-splash-actions-v10 {
    width: min(330px, 100%);
    margin: 0 auto;
    gap: 6px;
  }
  .irf-splash-actions-v10 .irf-btn {
    min-height: 45px;
    font-size: 13px;
  }
  .irf-splash-footer-v10 {
    justify-content: center;
    gap: 4px;
  }
  .irf-splash-footer-v10 span,
  .irf-splash-footer-v10 a {
    font-size: 8px;
    padding: 5px 6px;
  }
  .irf-build-card-v10 {
    width: 100%;
    padding: 10px;
    border-radius: 18px;
  }
  .irf-build-topline {
    min-height: 38px;
    column-gap: 8px;
  }
  .irf-build-topline > span {
    font-size: clamp(20px, 8vw, 30px);
  }
  .irf-build-topline > em {
    font-size: 10px;
  }
  .irf-build-card-v10 .irf-box {
    padding: 10px;
  }
  .irf-build-card-v10 .irf-select-grid-compact .irf-driver {
    min-height: 145px;
  }
  .irf-build-card-v10 .irf-driver-info {
    padding: 58px 8px 8px;
  }
  .irf-build-card-v10 .irf-select-grid-compact .irf-driver-name {
    font-size: 16px;
  }
  .irf-build-card-v10 .irf-driver-meta {
    font-size: 9px;
  }
  .irf-build-card-v10 .irf-styles-compact .irf-style strong {
    font-size: 13px;
  }
}
@media (max-height: 620px) and (max-width: 760px) {
  .irf-splash-copy-v10 p,
  .irf-campaign-strip span,
  .irf-splash-footer-v10 span:nth-child(3) {
    display: none;
  }
  .irf-splash-copy-v10 h2 {
    font-size: clamp(32px, 12vw, 48px);
  }
  .irf-campaign-strip {
    padding: 7px 8px;
  }
  .irf-splash-actions-v10 .irf-btn {
    min-height: 40px;
  }
}

/* IRF build v11: playable finish screen, social sharing, persistent local stats */
.irf-is-finish .irf-overlay,
.irf-is-fail .irf-overlay {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  place-items: start center !important;
  align-content: start !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.irf-viral-card-v11 {
  width: min(1100px, calc(100vw - 24px));
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 0;
  margin: max(10px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom));
}
.irf-viral-head-v11 {
  grid-template-columns: minmax(0, 1fr) minmax(145px, 210px);
  margin-bottom: 10px;
}
.irf-viral-head-v11 .irf-badge {
  display: inline-flex;
  margin-bottom: 7px;
}
.irf-viral-head-v11 h2 {
  font-size: clamp(34px, 4.6vw, 64px);
}
.irf-result-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.irf-result-strip > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,241,208,.13);
  background: rgba(255,241,208,.06);
}
.irf-result-strip span {
  display: block;
  margin-bottom: 4px;
  font: 10px/1.1 Arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,241,208,.62);
}
.irf-result-strip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1;
}
.irf-viral-grid-v11 {
  grid-template-columns: minmax(280px, 1fr) minmax(250px, .86fr) minmax(230px, .8fr);
  align-items: start;
  gap: 10px;
}
.irf-two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.irf-share-panel-v11 textarea {
  min-height: 82px;
  max-height: 132px;
}
.irf-social-panel p {
  margin: 0 0 10px;
  text-align: left;
  font: 13px/1.35 Arial, sans-serif;
  color: rgba(255,241,208,.78);
}
.irf-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.irf-social-grid .irf-btn {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 13px;
}
.irf-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.irf-mini-stats > div {
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,241,208,.08);
}
.irf-mini-stats span {
  display: block;
  font: 9px/1.1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(255,241,208,.58);
}
.irf-mini-stats strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
}
.irf-supply-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}
.irf-supply-pills span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,193,74,.10);
  border: 1px solid rgba(255,193,74,.16);
  color: var(--bone);
  font: 13px/1 Arial, sans-serif;
}
.irf-splits-details {
  margin-top: 10px;
}
.irf-splits-details summary {
  cursor: pointer;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 18px;
}
.irf-splits-details table {
  width: 100%;
  border-collapse: collapse;
  font: 13px Arial, sans-serif;
  color: rgba(255,241,208,.85);
}
.irf-splits-details td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,241,208,.08);
}
.irf-finish-sticky {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px -4px 0;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,241,208,.12);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(29,15,9,.90), rgba(17,10,6,.98));
  backdrop-filter: blur(14px);
}
.irf-finish-sticky .irf-btn {
  min-width: 138px;
  min-height: 44px;
  padding: 9px 13px;
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .irf-is-finish .irf-overlay {
    display: block !important;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(96px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .irf-viral-card-v11 {
    width: 100%;
    border-radius: 18px;
    padding: 10px 10px 0;
    margin: 0;
  }
  .irf-viral-head-v11 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 116px);
    gap: 8px;
    align-items: center;
  }
  .irf-viral-head-v11 h2 {
    text-align: left;
    font-size: clamp(30px, 9vw, 42px);
  }
  .irf-viral-head-v11 p {
    display: none;
  }
  .irf-viral-score {
    width: 100%;
    min-width: 0;
    padding: 8px;
  }
  .irf-viral-score strong {
    font-size: 28px;
  }
  .irf-result-strip {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 8px 0;
  }
  .irf-result-strip > div {
    padding: 8px;
    border-radius: 12px;
  }
  .irf-result-strip strong {
    font-size: 15px;
  }
  .irf-viral-grid-v11 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .irf-two-fields {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .irf-share-panel-v11 textarea {
    min-height: 72px;
    max-height: 92px;
    font-size: 12px;
  }
  .irf-social-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .irf-social-grid .irf-btn {
    min-height: 40px;
    padding: 7px 6px;
    font-size: 11px;
  }
  .irf-mini-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .irf-mini-stats strong {
    font-size: 17px;
  }
  .irf-local-panel .irf-scoreboard {
    display: none;
  }
  .irf-splits-details {
    display: none;
  }
  .irf-finish-sticky {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 10px -10px 0;
    padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
  .irf-finish-sticky .irf-btn {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    font-size: 11px;
    padding: 7px 6px;
  }
  .irf-finish-sticky #irfSubmitScore,
  .irf-finish-sticky #irfPrizePage {
    grid-column: span 1;
  }
}
@media (max-width: 430px) {
  .irf-social-grid { grid-template-columns: 1fr 1fr; }
  .irf-result-strip { grid-template-columns: 1fr 1fr; }
  .irf-viral-head-v11 { grid-template-columns: 1fr; }
  .irf-viral-score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; text-align: left; }
  .irf-viral-score strong { text-align: center; }
}

/* IRF build v12: direct WordPress score submission + online leaderboard */
.irf-submit-panel-v12,
.irf-online-panel {
  border-color: rgba(18, 213, 196, .22);
  background: linear-gradient(180deg, rgba(18, 213, 196, .08), rgba(255,255,255,.045));
}
.irf-submit-panel-v12 p,
.irf-online-panel p {
  margin: 8px 0 12px;
  color: rgba(255, 241, 208, .74);
  font-size: 13px;
  line-height: 1.45;
}
.irf-submit-panel-v12 input[type="email"],
.irf-submit-panel-v12 input[type="text"],
.irf-submit-panel-v12 input:not([type]) {
  min-height: 44px;
}
.irf-consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
  color: rgba(255, 241, 208, .76);
  font: 12px/1.35 Arial, sans-serif;
}
.irf-consent-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #24d6c4;
}
.irf-submit-status {
  margin: 12px 0;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255, 241, 208, .82);
  font: 12px/1.35 Arial, sans-serif;
}
.irf-submit-status.success {
  border-color: rgba(18,213,196,.55);
  color: #fff1d0;
  background: rgba(18,213,196,.12);
}
.irf-submit-status.error {
  border-color: rgba(255,140,36,.7);
  color: #ffe2b2;
  background: rgba(255,140,36,.12);
}
.irf-btn.is-loading,
.irf-btn:disabled {
  opacity: .62;
  cursor: wait;
  filter: grayscale(.15);
}
.irf-online-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}
.irf-online-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
}
.irf-online-list strong {
  color: #fff1d0;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.irf-online-list span {
  color: rgba(255, 241, 208, .65);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.irf-online-list em {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #ffc34d;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 18px;
  font-style: normal;
  letter-spacing: .03em;
}
.irf-empty-online {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: rgba(255, 241, 208, .72);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
}
@media (max-width: 700px) {
  .irf-submit-panel-v12 .irf-two-fields {
    grid-template-columns: 1fr;
  }
  .irf-online-list em {
    font-size: 16px;
  }
}