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

html, body {
  min-height: 100%;
  background: #000;
  color: #dff8ff;
  font-family: "Courier New", monospace;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 70, 135, .32), transparent 42%),
    radial-gradient(circle at 20% 70%, rgba(255, 52, 24, .14), transparent 34%),
    #000;
}

.arcade {
  width: min(96vw, 900px);
  display: grid;
  gap: 10px;
  justify-items: center;
}

#screenWrap {
  position: relative;
  width: min(96vw, 720px);
  aspect-ratio: 4 / 3;
  border: 4px solid #4cc9ff;
  border-radius: 12px;
  overflow: hidden;
  background: #001020;
  box-shadow:
    0 0 30px rgba(76, 201, 255, .50),
    0 0 60px rgba(255, 58, 24, .20),
    inset 0 0 22px rgba(76, 201, 255, .18);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #001020;
}

#crtOverlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: .72;
  z-index: 20;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.44) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.18) 2px 4px),
    repeating-linear-gradient(to right, rgba(255,0,0,.035) 0 1px, rgba(0,255,120,.018) 1px 2px, rgba(0,140,255,.035) 2px 3px, rgba(0,0,0,0) 3px 4px);
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 10;
}

.overlay.hidden { display: none; }

.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.50)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,.08) 1px 4px);
}

.startOverlay {
  background:
    radial-gradient(circle at 50% 20%, rgba(28, 105, 170, .20), rgba(0,0,0,.18) 45%, rgba(0,0,0,.62) 100%);
}

.welcomeOverlay {
  z-index: 14;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 180, 255, .18), rgba(0,0,0,.10) 35%, rgba(0,0,0,.72) 100%);
}

.welcomeCabinet {
  position: relative;
  z-index: 1;
  width: min(98%, 760px);
  min-height: 95%;
  border: 2px solid rgba(76,201,255,.9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(0,0,0,.76), 0 0 26px rgba(76,201,255,.36);
  background: #03070d;
}

.welcomeScene {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.62)),
    none;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.02);
}

.welcomeFrame {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 20px 18px;
  text-align: center;
}

.welcomeKicker {
  padding: 6px 14px;
  border: 2px solid rgba(76,201,255,.92);
  border-radius: 999px;
  color: #dff8ff;
  background: rgba(0, 10, 26, .66);
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(76,201,255,.85);
  box-shadow: 0 0 12px rgba(76,201,255,.24);
}

.welcomeTitle {
  color: #ffd85a;
  font-size: clamp(42px, 9vw, 96px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255,120,24,.92), 0 0 24px rgba(255,62,24,.72), 0 0 42px rgba(255, 210, 90, .24);
}

.welcomeSubtitle {
  color: #70e6ff;
  font-size: clamp(16px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 10px rgba(76,201,255,.90);
}

.welcomeEnterBtn {
  min-width: min(82vw, 360px);
  padding: 14px 26px;
  border: 2px solid rgba(255, 96, 26, .96);
  border-radius: 12px;
  color: #fff7c0;
  background: linear-gradient(180deg, rgba(255, 78, 24, .40), rgba(0, 18, 36, .84));
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 82, 24, .45), inset 0 0 18px rgba(255,255,255,.08);
  animation: welcomePulse 1.25s ease-in-out infinite alternate;
}

.welcomeEnterBtn:hover,
.welcomeEnterBtn:focus-visible {
  outline: none;
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 0 16px rgba(255, 82, 24, .62), 0 0 30px rgba(76,201,255,.20), inset 0 0 18px rgba(255,255,255,.10);
}

.welcomeHint {
  color: #f4f8ff;
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(76,201,255,.75);
  background: rgba(0,0,0,.34);
  padding: 6px 12px;
  border-radius: 999px;
}

@keyframes welcomePulse {
  from { box-shadow: 0 0 10px rgba(255, 82, 24, .42), inset 0 0 12px rgba(255,255,255,.06); }
  to { box-shadow: 0 0 22px rgba(255, 82, 24, .75), 0 0 34px rgba(76,201,255,.22), inset 0 0 18px rgba(255,255,255,.10); }
}

.attractCabinet {
  position: relative;
  z-index: 1;
  width: min(96%, 720px);
  min-height: 94%;
  padding: 10px 14px 12px;
  display: grid;
  grid-template-rows: auto auto minmax(100px, 1fr) auto auto;
  border: 2px solid rgba(76,201,255,.88);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0, 10, 28, .56), rgba(0,0,0,.70)),
    radial-gradient(circle at 50% 12%, rgba(255, 64, 28, .22), transparent 35%);
  box-shadow: inset 0 0 28px rgba(0,0,0,.76), 0 0 24px rgba(76,201,255,.34);
  overflow: hidden;
}

.scoreStrip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #4cc9ff;
}

.startLogo {
  justify-self: center;
  width: min(99%, 760px);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 62, 24, .85)) drop-shadow(0 0 20px rgba(76,201,255,.40));
}

.attractGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  min-height: 118px;
}

.pilotPanel,
.howToPanel {
  border: 2px solid rgba(76,201,255,.72);
  border-radius: 10px;
  background: rgba(0, 12, 30, .76);
  box-shadow: inset 0 0 18px rgba(76,201,255,.16), 0 0 12px rgba(0,0,0,.38);
}

.pilotPanel {
  display: none;
}

.pilotTitle,
.pilotRole {
  color: #70e6ff;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #4cc9ff;
}

.pilotPanel img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255,255,255,.18);
  image-rendering: auto;
  filter: saturate(1.08) contrast(1.04);
}

.howToPanel {
  align-self: end;
  padding: 11px 12px;
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0, 20, 45, .76), rgba(0, 0, 0, .70));
}

.modeBadge {
  justify-self: center;
  padding: 5px 18px;
  border: 2px solid rgba(255, 78, 28, .95);
  color: #ffffff;
  background: rgba(255, 56, 24, .20);
  font-size: clamp(18px, 3.2vw, 30px);
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 12px #ff3a18, 0 0 18px #4cc9ff;
}

.instructionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.instructionGrid div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(112,230,255,.80);
  color: #fff;
  background: rgba(0,0,0,.52);
  font-size: clamp(11px, 1.75vw, 15px);
  font-weight: 900;
  text-align: left;
  text-shadow: 0 0 8px rgba(112,230,255,.88);
}

.instructionGrid .icon {
  color: #ff4e1c;
  min-width: 22px;
  text-align: center;
  text-shadow: 0 0 8px #ff3a18;
}

.pressStartBtn {
  justify-self: center;
  margin-top: 4px;
  padding: 6px 30px;
  border: 2px solid #ff4e1c;
  background: rgba(0,0,0,.74);
  color: #fff;
  font-family: inherit;
  font-size: clamp(26px, 5.2vw, 46px);
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #ff3a18, 0 0 18px #4cc9ff;
  box-shadow: 0 0 14px rgba(255,78,28,.62), inset 0 0 18px rgba(255,78,28,.20);
  cursor: pointer;
  animation: blinkStart 1.05s steps(2, start) infinite;
}

@keyframes blinkStart {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: .32; }
}

.creditLine {
  margin-top: 6px;
  color: #70e6ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #4cc9ff;
}

.tokenCabinet {
  position: relative;
  z-index: 1;
  width: min(96%, 760px);
  padding: 12px;
  border: 3px solid #4cc9ff;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(7, 17, 40, .94), rgba(0, 3, 12, .96)),
    radial-gradient(circle at 50% 0%, rgba(255, 61, 26, .22), transparent 42%);
  box-shadow: 0 0 18px rgba(76,201,255,.45), 0 0 42px rgba(255,58,24,.25), inset 0 0 30px rgba(76,201,255,.15);
  overflow: hidden;
}

.tokenCabinet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #02060c;
  opacity: .13;
  filter: saturate(1.1) contrast(1.08);
}

.tokenCabinet::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(165,217,255,.36);
  border-radius: 12px;
}

.cabinetMarquee,
.cabinetFooter {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(112,230,255,.75);
  background: rgba(0,0,0,.62);
  color: #70e6ff;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #4cc9ff;
  font-size: 12px;
}

.cabinetMarquee { border-radius: 10px 10px 4px 4px; margin-bottom: 10px; }
.cabinetFooter { border-radius: 4px 4px 10px 10px; margin-top: 10px; font-size: 11px; letter-spacing: 1px; color: #fff; }

.menuBox {
  position: relative;
  z-index: 1;
  padding: 8px 18px 12px;
  border: 2px solid rgba(255,78,28,.74);
  border-radius: 14px;
  background: rgba(0, 8, 20, .80);
  box-shadow: inset 0 0 24px rgba(0,0,0,.72), 0 0 15px rgba(255,78,28,.18);
}

.menuLogo {
  width: min(98%, 760px);
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,78,28,.80));
}

.neonBadge {
  display: inline-block;
  margin: 1px 0 6px;
  padding: 4px 12px;
  border: 1px solid #70e6ff;
  border-radius: 999px;
  color: #70e6ff;
  background: rgba(0,0,0,.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #4cc9ff;
}

.menuSubtitle {
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-weight: 900;
  text-shadow: 0 0 10px #ff3a18, 0 0 12px #4cc9ff;
}

.menuBox .small {
  font-size: 13px;
  color: #dff8ff;
  margin-bottom: 8px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(76,201,255,.65);
}

.tokenRules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 9px auto 10px;
  max-width: 500px;
}

.tokenRules span {
  padding: 5px 4px;
  border: 1px solid rgba(112,230,255,.60);
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 0 8px #4cc9ff;
}

.tokenButtons {
  display: grid;
  gap: 9px;
  justify-items: stretch;
  margin: 8px auto 0;
  max-width: 455px;
}

.tokenButtons button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  text-align: left;
  padding: 10px 16px;
  border: 2px solid #4cc9ff;
  color: #f8feff;
  background: linear-gradient(90deg, rgba(76,201,255,.18), rgba(0,0,0,.82) 42%, rgba(255,78,28,.15)), #050b12;
  box-shadow: inset 0 0 14px rgba(76,201,255,.20), 0 0 12px rgba(76,201,255,.35);
  font-family: inherit;
  cursor: pointer;
}

.tokenButtons button:hover,
.tokenButtons button.selected {
  border-color: #ff4e1c;
  transform: translateX(2px);
  box-shadow: inset 0 0 16px rgba(255,78,28,.24), 0 0 16px rgba(255,78,28,.58);
}

.tokenButtons button:disabled { display: none !important; }

.coinIcon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #ff4e1c;
  border-radius: 50%;
  color: #fff;
  background: #230700;
  box-shadow: 0 0 12px rgba(255,78,28,.75), inset 0 0 8px rgba(255,78,28,.24);
}

.btnMain {
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 8px #ff3a18;
  font-weight: 900;
}

.btnSub {
  margin-top: 2px;
  font-size: 12px;
  color: #70e6ff;
  text-shadow: 0 0 8px rgba(76,201,255,.75);
  font-weight: 900;
}

.controlHint {
  margin-top: 8px;
  color: #70e6ff;
  font-size: 11px;
  text-shadow: 0 0 8px #4cc9ff;
}

.message {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 14px;
  border: 1px solid #4cc9ff;
  border-radius: 8px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 0 8px #4cc9ff;
}
.message.hidden { display: none; }

.hud {
  width: min(96vw, 720px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  color: #70e6ff;
  font-size: 12px;
}
.hud div {
  padding: 5px 6px;
  border: 1px solid rgba(76,201,255,.55);
  background: rgba(0,0,0,.70);
  text-align: center;
  box-shadow: inset 0 0 10px rgba(76,201,255,.10);
}
.hud span { display: block; color: #bdf5ff; font-size: 10px; }
.hud strong { color: #fff; text-shadow: 0 0 8px #4cc9ff; }

.help {
  width: min(96vw, 720px);
  color: #bdf5ff;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  opacity: .88;
  text-shadow: 0 0 8px rgba(76,201,255,.65);
}

#exitBtn {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 50;
  padding: 8px 16px;
  border: 2px solid #ff4e1c;
  border-radius: 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(255,78,28,.55);
  cursor: pointer;
}

body.game-active #exitBtn { opacity: .82; }

@media (max-width: 700px) {
  .attractGrid { grid-template-columns: 1fr; }
  .pilotPanel { display: none; }
  .instructionGrid { grid-template-columns: 1fr; }
  .cabinetFooter, .cabinetMarquee { flex-wrap: wrap; justify-content: center; }
}

/* R30 — Fullscreen restored for the new attract/menu flow.
   The stage fills the browser window immediately, and true browser fullscreen
   is requested from PRESS START / token user actions. */
body.arcade-fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  place-items: center;
}

body.arcade-fullscreen .arcade,
html:fullscreen .arcade,
html:-webkit-full-screen .arcade {
  width: 100vw;
  height: 100vh;
  max-width: none;
  display: grid;
  place-items: center;
  gap: 0;
}

body.arcade-fullscreen #screenWrap,
html:fullscreen #screenWrap,
html:-webkit-full-screen #screenWrap {
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  max-width: none;
  border-radius: 0;
}

body.arcade-fullscreen .hud,
body.arcade-fullscreen .help,
html:fullscreen .hud,
html:fullscreen .help,
html:-webkit-full-screen .hud,
html:-webkit-full-screen .help {
  display: none;
}

body.arcade-fullscreen #exitBtn,
html:fullscreen #exitBtn,
html:-webkit-full-screen #exitBtn {
  right: 18px;
  top: 18px;
}


/* R10 — Publicidad lateral viva solo durante gameplay.
   No aparece en start/menu/token/summary. Las tarjetas viven en los laterales
   del monitor cuando existe espacio real fuera del canvas 4:3. */
.gameAdLayer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
  --adPanelW: 150px;
  --adPanelTop: 18px;
  --adPanelH: calc(100vh - 36px);
}

body.ads-active .gameAdLayer { display: block; }

.sideAdPanel {
  position: fixed;
  top: var(--adPanelTop);
  width: var(--adPanelW);
  height: var(--adPanelH);
  display: none;
  perspective: 900px;
}

body.ads-active.ads-wide .sideAdPanel { display: grid; }
.sideAdPanel.ad-panel-hidden { display: none !important; }
.sideAdLeft { left: 12px; }
.sideAdRight { right: 12px; }

.adCard {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  align-items: center;
  justify-items: center;
  padding: 12px 8px;
  overflow: hidden;
  border: 2px solid rgba(112,230,255,.84);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,78,28,.32), transparent 32%),
    linear-gradient(180deg, rgba(1,19,40,.94), rgba(0,4,12,.98));
  box-shadow:
    0 0 16px rgba(76,201,255,.40),
    inset 0 0 24px rgba(76,201,255,.15),
    inset 0 0 52px rgba(0,0,0,.70);
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(76,201,255,.88);
}

.adCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,.16) 1px 4px),
    linear-gradient(90deg, rgba(255,78,28,.18), transparent 30%, transparent 70%, rgba(76,201,255,.18));
}

.adCard::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,238,102,.46);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: inset 0 0 14px rgba(255,238,102,.12);
}

.adKicker,
.adHeadline,
.adBody,
.adFooter,
.adCountdown {
  position: relative;
  z-index: 1;
  font-weight: 900;
}

.adKicker {
  color: #70e6ff;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 2px;
}

.adHeadline {
  align-self: end;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: #ffee66;
  font-size: clamp(20px, 2.2vw, 38px);
  line-height: .95;
  letter-spacing: 4px;
  text-shadow: 0 0 14px #ffee66, 0 0 18px #ff4e1c;
}

.sideAdRight .adHeadline {
  transform: none;
}

.adBody {
  align-self: start;
  margin-top: 12px;
  max-width: 95%;
  color: #ffffff;
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1.25;
}

.adFooter {
  margin-top: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255,78,28,.86);
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  color: #70e6ff;
  font-size: clamp(9px, .95vw, 12px);
  letter-spacing: 1px;
}

.adCountdown {
  margin-top: 8px;
  width: 34px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112,230,255,.70);
  background: rgba(0,0,0,.68);
  color: #ffee66;
  font-size: 12px;
}

.sideAdPanel.ad-enter-slide .adCard { animation: adSlideIn 2.50s cubic-bezier(.2,.9,.2,1) both; }
.sideAdPanel.ad-exit-slide .adCard { animation: adSlideOut 2.50s ease-in both; }
.sideAdPanel.ad-enter-glow .adCard { animation: adGlowIn 2.50s ease-out both; }
.sideAdPanel.ad-exit-glow .adCard { animation: adGlowOut 2.50s ease-in both; }
.sideAdPanel.ad-enter-zoom .adCard { animation: adZoomIn 2.50s cubic-bezier(.1,.85,.2,1) both; }
.sideAdPanel.ad-exit-zoom .adCard { animation: adZoomOut 2.50s ease-in both; }
.sideAdPanel.ad-enter-curtain .adCard { animation: adCurtainIn 2.50s steps(10, end) both; }
.sideAdPanel.ad-exit-curtain .adCard { animation: adCurtainOut 2.50s steps(8, end) both; }
.sideAdPanel.ad-enter-glitch .adCard { animation: adGlitchIn 2.50s steps(7, end) both; }
.sideAdPanel.ad-exit-glitch .adCard { animation: adGlitchOut 2.50s steps(6, end) both; }

@keyframes adSlideIn {
  from { opacity: 0; transform: translateX(var(--adInX, -120%)) skewY(-5deg); filter: brightness(1.8) blur(2px); }
  to { opacity: 1; transform: translateX(0) skewY(0); filter: brightness(1) blur(0); }
}
@keyframes adSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--adOutX, 120%)) skewY(5deg); filter: brightness(1.5) blur(2px); }
}
@keyframes adGlowIn {
  0% { opacity: 0; filter: brightness(3) saturate(2) blur(5px); transform: scale(.98); }
  60% { opacity: 1; filter: brightness(1.8) saturate(1.4) blur(0); }
  100% { opacity: 1; filter: brightness(1) saturate(1) blur(0); transform: scale(1); }
}
@keyframes adGlowOut {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0; filter: brightness(2.6) blur(5px); }
}
@keyframes adZoomIn {
  from { opacity: 0; transform: scale(.72) rotateX(12deg); filter: blur(3px); }
  to { opacity: 1; transform: scale(1) rotateX(0); filter: blur(0); }
}
@keyframes adZoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.78) rotateX(-12deg); filter: blur(3px); }
}
@keyframes adCurtainIn {
  from { opacity: 1; clip-path: inset(0 50% 0 50%); filter: brightness(1.6); }
  to { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes adCurtainOut {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to { opacity: 0; clip-path: inset(48% 0 48% 0); }
}
@keyframes adGlitchIn {
  0% { opacity: 0; transform: translate(9px, -5px); filter: hue-rotate(90deg) contrast(2); clip-path: inset(42% 0 37% 0); }
  20% { opacity: .8; transform: translate(-7px, 4px); clip-path: inset(5% 0 72% 0); }
  42% { opacity: .5; transform: translate(5px, 0); clip-path: inset(70% 0 8% 0); }
  70% { opacity: 1; transform: translate(-2px, 1px); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translate(0,0); filter: hue-rotate(0deg) contrast(1); clip-path: inset(0 0 0 0); }
}
@keyframes adGlitchOut {
  0% { opacity: 1; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  35% { opacity: .75; transform: translate(-8px, 4px); clip-path: inset(12% 0 65% 0); }
  70% { opacity: .45; transform: translate(9px, -3px); clip-path: inset(65% 0 14% 0); }
  100% { opacity: 0; transform: translate(0,0); clip-path: inset(45% 0 45% 0); }
}

@media (max-aspect-ratio: 4/3), (max-width: 920px) {
  body.ads-active .gameAdLayer { display: none; }
}

/* R14B TIME ATTACK ADS — same approved premium cadence as the Main Arcade. */
.gameAdLayer {
  --adPanelW: clamp(124px, 8.8vw, 168px);
  --adPanelTop: 18px;
  --adPanelH: calc(100vh - 36px);
}
.adCard {
  border-color: rgba(112,230,255,.96);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,84,28,.46), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(76,201,255,.20), transparent 30%),
    linear-gradient(180deg, rgba(1,19,40,.97), rgba(0,4,12,.99));
  box-shadow:
    0 0 18px rgba(76,201,255,.50),
    0 0 34px rgba(255,78,28,.22),
    inset 0 0 24px rgba(76,201,255,.18),
    inset 0 0 56px rgba(0,0,0,.74);
}
.adCard::before {
  opacity: .66;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.18) 1px 4px),
    linear-gradient(90deg, rgba(255,78,28,.22), transparent 26%, transparent 74%, rgba(76,201,255,.22));
}
.adCard::after {
  inset: 6px;
  border-color: rgba(255,238,102,.54);
  box-shadow: inset 0 0 18px rgba(255,238,102,.18), 0 0 12px rgba(76,201,255,.16);
}
.adKicker {
  color: #8cf1ff;
  text-shadow: 0 0 10px rgba(76,201,255,1), 0 0 16px rgba(76,201,255,.34);
}
.adHeadline {
  color: #ffee66;
  text-shadow: 0 0 14px #ffee66, 0 0 22px #ff4e1c, 0 0 28px rgba(76,201,255,.20);
  letter-spacing: 5px;
}
.adBody {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(76,201,255,.72);
}
.adFooter {
  border-color: rgba(255,78,28,.98);
  background: rgba(0,0,0,.66);
  box-shadow: 0 0 10px rgba(255,78,28,.24), inset 0 0 8px rgba(76,201,255,.12);
}
.adCountdown {
  width: 38px;
  height: 26px;
  border-color: rgba(112,230,255,.88);
  box-shadow: 0 0 10px rgba(76,201,255,.22), inset 0 0 8px rgba(255,238,102,.10);
  font-weight: 900;
}
.sideAdPanel.ad-enter-slide .adCard { animation: adSlideIn 1.35s cubic-bezier(.2,.9,.2,1) both; }
.sideAdPanel.ad-exit-slide .adCard { animation: adSlideOut .68s ease-in both; }
.sideAdPanel.ad-enter-glow .adCard { animation: adGlowIn 1.35s ease-out both; }
.sideAdPanel.ad-exit-glow .adCard { animation: adGlowOut .68s ease-in both; }
.sideAdPanel.ad-enter-zoom .adCard { animation: adZoomIn 1.35s cubic-bezier(.1,.85,.2,1) both; }
.sideAdPanel.ad-exit-zoom .adCard { animation: adZoomOut .68s ease-in both; }
.sideAdPanel.ad-enter-curtain .adCard { animation: adCurtainIn 1.25s steps(10, end) both; }
.sideAdPanel.ad-exit-curtain .adCard { animation: adCurtainOut .68s steps(8, end) both; }
.sideAdPanel.ad-enter-glitch .adCard { animation: adGlitchIn 1.20s steps(7, end) both; }
.sideAdPanel.ad-exit-glitch .adCard { animation: adGlitchOut .68s steps(6, end) both; }
.sideAdPanel.ad-enter-flicker .adCard { animation: adFlickerIn 1.28s steps(9, end) both; }
.sideAdPanel.ad-exit-flicker .adCard { animation: adFlickerOut .68s steps(7, end) both; }
.sideAdPanel.ad-enter-scan .adCard { animation: adScanIn 1.28s cubic-bezier(.18,.88,.22,1) both; }
.sideAdPanel.ad-exit-scan .adCard { animation: adScanOut .68s ease-in both; }
@keyframes adFlickerIn {
  0% { opacity: 0; transform: scale(.96) translateY(8px); filter: brightness(2.3) saturate(1.8); }
  15% { opacity: .25; }
  22% { opacity: .92; }
  29% { opacity: .18; }
  36% { opacity: 1; }
  48% { opacity: .35; }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) saturate(1); }
}
@keyframes adFlickerOut {
  0% { opacity: 1; }
  30% { opacity: .40; }
  55% { opacity: 1; }
  100% { opacity: 0; filter: brightness(2.2); }
}
@keyframes adScanIn {
  0% { opacity: 0; transform: translateX(var(--adInX, 120%)) scale(.92); clip-path: inset(0 0 82% 0); filter: brightness(2.1); }
  45% { opacity: .95; clip-path: inset(0 0 36% 0); }
  75% { opacity: 1; clip-path: inset(0 0 8% 0); }
  100% { opacity: 1; transform: translateX(0) scale(1); clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes adScanOut {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(82% 0 0 0); filter: brightness(1.9); }
}
@media (max-width: 1200px) {
  .gameAdLayer { --adPanelW: clamp(116px, 8.2vw, 146px); }
  .adHeadline { font-size: 22px; letter-spacing: 3px; }
}


/* R15A PERFORMANCE LIGHT ADS — render/CSS-only pass.
   Keeps banners and approved cadence, but removes permanent heavy effects during gameplay. */
.sideAdPanel,
.adCard {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.adCard {
  box-shadow:
    0 0 10px rgba(76,201,255,.30),
    inset 0 0 18px rgba(76,201,255,.10),
    inset 0 0 38px rgba(0,0,0,.72);
}
.adCard::before {
  animation: none !important;
  opacity: .42;
}
.adCountdown {
  animation: none !important;
  box-shadow: inset 0 0 7px rgba(255,238,102,.08);
}
body.fps-warning #gameCanvas {
  outline: 0;
}

/* ?lite=1 / ?perf=1: same gameplay, lighter CRT/cabinet/ad effects. */
body.performance-lite #crtOverlay {
  opacity: .22;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,.08) 1px 4px);
}
body.performance-lite #screenWrap {
  box-shadow: inset 0 0 12px rgba(76,201,255,.10);
}
body.performance-lite .overlay::before {
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.38));
}
body.performance-lite .startLogo,
body.performance-lite .menuLogo,
body.performance-lite .pilotPanel img {
  filter: none !important;
}
body.performance-lite .adCard {
  opacity: .78;
  border-color: rgba(112,230,255,.58);
  background: linear-gradient(180deg, rgba(1,19,40,.94), rgba(0,4,12,.98));
  box-shadow: inset 0 0 16px rgba(0,0,0,.70);
  text-shadow: none;
}
body.performance-lite .adCard::before,
body.performance-lite .adCard::after {
  opacity: .24;
  box-shadow: none;
}
body.performance-lite .adHeadline,
body.performance-lite .adKicker,
body.performance-lite .adBody,
body.performance-lite .adFooter,
body.performance-lite .adCountdown {
  text-shadow: none;
  box-shadow: none;
}
body.performance-lite .sideAdPanel.ad-enter-slide .adCard,
body.performance-lite .sideAdPanel.ad-enter-zoom .adCard { animation-duration: .75s; }
body.performance-lite .sideAdPanel.ad-exit-slide .adCard,
body.performance-lite .sideAdPanel.ad-exit-zoom .adCard { animation-duration: .38s; }


/* R16O — FINAL CELEBRATION: result + English poster + Spanish courtesy poster. */
.victoryPresentation {
  position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #02050d;
  opacity: 1;
  transition: opacity .55s ease;
}
.victoryPresentation.hidden { display: none !important; }
.victoryPresentation.is-fading { opacity: 0; }
.victoryResultCard {
  position: absolute;
  z-index: 4;
  width: min(86%, 540px);
  padding: 26px 22px 30px;
  text-align: center;
  border: 3px solid #70e6ff;
  outline: 2px solid rgba(255,238,102,.72);
  outline-offset: -10px;
  background:
    radial-gradient(circle at 50% 20%, rgba(40,155,255,.30), transparent 42%),
    linear-gradient(180deg, rgba(2,12,34,.98), rgba(2,3,12,.98));
  box-shadow: 0 0 24px #4cc9ff, 0 0 55px rgba(255,35,160,.42), inset 0 0 40px rgba(76,201,255,.18);
  animation: victoryCardEnter .8s cubic-bezier(.18,.9,.2,1) both;
}
.victoryResultCard.is-hidden { display: none; }
.victoryResultLabel {
  color: #ffee66;
  font: 900 clamp(24px, 5.2vw, 46px)/1 "Courier New", monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #ff9d00, 0 0 22px rgba(255,157,0,.72);
}
.victoryTimeCaption {
  margin-top: 18px;
  color: #a5d9ff;
  font: 900 clamp(13px, 2vw, 18px)/1 "Courier New", monospace;
  letter-spacing: 4px;
}
.victoryFinalTime {
  margin-top: 10px;
  color: #ffffff;
  font: 900 clamp(48px, 11vw, 92px)/1 "Courier New", monospace;
  letter-spacing: -4px;
  text-shadow: 0 0 7px #fff, 0 0 16px #4cc9ff, 0 0 34px #ff2fa8;
  animation: victoryTimePulse 1.1s ease-in-out infinite alternate;
}
.victoryRecordLine {
  margin-top: 18px;
  color: #7dff9a;
  font: 900 clamp(15px, 2.5vw, 22px)/1.2 "Courier New", monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(125,255,154,.85);
}
.victoryPoster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #02050d;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .7s ease, transform 6s linear;
  pointer-events: none;
}
.victoryPoster.is-visible { opacity: 1; transform: scale(1); }

.victoryTrueFinal {
  z-index: 7;
  object-fit: contain;
  background: #01040b;
  transform: scale(1.035);
  transition: opacity .8s ease, transform 5s ease-out, filter .9s ease;
}
.victoryTrueFinal.is-visible {
  opacity: 1;
  transform: scale(1);
}
.victoryTrueFinal.is-exiting {
  opacity: 0;
  transform: scale(.985);
  filter: brightness(.55) blur(1px);
}

.victoryTimeBadge {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  min-width: min(78%, 430px);
  padding: 12px 22px 15px;
  text-align: center;
  border: 3px solid #ffee66;
  background: rgba(0,4,18,.86);
  box-shadow: 0 0 18px #ffee66, 0 0 38px rgba(255,47,168,.52), inset 0 0 22px rgba(76,201,255,.22);
  opacity: 0;
  transition: opacity .45s ease, transform .45s cubic-bezier(.18,.9,.2,1);
}
.victoryTimeBadge.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.victoryTimeBadge span {
  display: block;
  color: #70e6ff;
  font: 900 clamp(12px, 2vw, 18px)/1 "Courier New", monospace;
  letter-spacing: 4px;
}
.victoryTimeBadge strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font: 900 clamp(38px, 8vw, 72px)/1 "Courier New", monospace;
  text-shadow: 0 0 7px #fff, 0 0 16px #4cc9ff, 0 0 26px #ff2fa8;
  animation: victoryTimePulse 1.1s ease-in-out infinite alternate;
}
@keyframes victoryCardEnter {
  from { opacity: 0; transform: scale(.72); filter: brightness(2); }
  65% { opacity: 1; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes victoryTimePulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.035); filter: brightness(1.2); }
}

/* TIME ATTACK DEMO R02 — required closing screen. */
.demoCompleteOverlay { z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0, 3, 12, .94); }
.demoCompleteBox { width: min(86%, 520px); box-sizing: border-box; padding: 34px 28px 30px; text-align: center; border: 3px solid #70e6ff; background: #000814; box-shadow: 0 0 22px rgba(112,230,255,.42), inset 0 0 24px rgba(112,230,255,.12); font-family: "Courier New", monospace; }
.demoCompleteLogo { display: block; width: min(78%, 350px); max-height: 112px; object-fit: contain; margin: 0 auto 20px; }
.demoCompleteTitle { color: #ffee66; font-size: clamp(28px, 6vw, 44px); font-weight: 900; line-height: 1.05; text-shadow: 0 0 12px rgba(255,238,102,.55); }
.demoReleaseLabel { margin-top: 22px; color: #70e6ff; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.demoReleaseDate { margin-top: 8px; color: #fff; font-size: clamp(22px, 4.7vw, 34px); font-weight: 900; }
.returnToGateBtn { margin-top: 27px; min-width: 220px; padding: 13px 22px; border: 2px solid #70e6ff; background: #00172b; color: #fff; font: 900 16px "Courier New", monospace; cursor: pointer; box-shadow: 0 0 12px rgba(112,230,255,.28); }
.returnToGateBtn:hover, .returnToGateBtn:focus-visible { background: #05314b; outline: 2px solid #ffee66; outline-offset: 3px; }