* { 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%);
}

.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: url("assets/ui/hero_ship_alex.png") center 18% / cover no-repeat;
  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; }
}


/* R11 MENU MUSIC CLEAN — first screen only: demo background + huge logo + PRESS START. */
.startOverlay {
  background: transparent;
}
.startOverlay::before {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.48) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, rgba(0,0,0,.045) 1px 4px);
}
.attractCabinet.cleanStart {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px 20px 28px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.cleanStart .startLogo {
  width: min(94%, 690px);
  max-height: 82%;
  object-fit: contain;
  opacity: .96;
  filter:
    drop-shadow(0 0 10px rgba(0,0,0,.90))
    drop-shadow(0 0 22px rgba(255, 54, 24, .92))
    drop-shadow(0 0 28px rgba(76, 201, 255, .42));
}
.cleanStart .pressStartBtn {
  align-self: end;
  margin-bottom: 4px;
  min-width: min(72%, 380px);
  border: 0;
  background: rgba(0, 0, 0, .42);
  color: #ffdd86;
  font-size: clamp(22px, 4.1vw, 40px);
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(255, 210, 86, .95), 0 0 20px rgba(255, 80, 24, .60);
  box-shadow: none;
  animation: r11PressBlink 1.05s steps(2, start) infinite;
}
.cleanStart .pressStartBtn:hover,
.cleanStart .pressStartBtn:focus {
  transform: none;
  outline: 2px solid rgba(255, 221, 134, .55);
  outline-offset: 5px;
}
@keyframes r11PressBlink { 50% { opacity: .20; } }

/* R12 — face intro cards and return-to-flight cinematic overlay. */
.cardOverlay {
  z-index: 14;
  background:
    radial-gradient(circle at 50% 12%, rgba(76,201,255,.16), transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(255,78,28,.14), transparent 34%),
    rgba(0, 0, 0, .56);
}
.cardOverlay::before {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.05) 0%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.024) 0 1px, rgba(0,0,0,.12) 1px 4px);
}
.cinematicCard {
  position: relative;
  z-index: 1;
  width: min(90%, 540px);
  padding: 16px 16px 18px;
  border: 2px solid rgba(76,201,255,.82);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(1, 16, 34, .90), rgba(0, 0, 0, .84)),
    radial-gradient(circle at 50% 12%, rgba(255, 78, 28, .18), transparent 34%);
  box-shadow:
    0 0 20px rgba(76,201,255,.38),
    0 0 40px rgba(255,78,28,.16),
    inset 0 0 22px rgba(0,0,0,.76);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .26s ease, transform .26s ease;
}
.cardOverlay.show .cinematicCard {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cardBadge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border: 1px solid rgba(255,221,134,.78);
  border-radius: 999px;
  color: #ffdd86;
  background: rgba(0,0,0,.56);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(255,221,134,.78);
}
.cardImage {
  width: 100%;
  max-height: 308px;
  display: block;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 18px rgba(0,0,0,.48), inset 0 0 20px rgba(76,201,255,.08);
}
.cardText {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.cardTitle {
  color: #ffffff;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 10px #ff3a18, 0 0 14px #4cc9ff;
}
.cardSubtitle {
  color: #70e6ff;
  font-size: clamp(13px, 2.1vw, 18px);
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(76,201,255,.82);
}
@media (max-width: 640px) {
  .cinematicCard { width: min(94%, 520px); padding: 12px 12px 14px; }
  .cardImage { max-height: 260px; }
}

/* R12B — CRT monitor approved: stretch intro art and return art bigger without fear of pixelation. */
.cleanStart .startLogo {
  width: min(98%, 710px);
  max-height: 88%;
}
.menuLogo {
  width: min(100%, 780px);
  max-height: 350px;
}
.cinematicCard {
  width: min(96%, 700px);
  padding: 8px 8px 10px;
  border-width: 2px;
}
.cardImage {
  width: 100%;
  height: clamp(320px, 74vh, 430px);
  max-height: none;
  object-fit: fill;
  object-position: center center;
  image-rendering: auto;
}
.cardText {
  margin-top: 8px;
  gap: 4px;
}
.cardTitle {
  font-size: clamp(26px, 4.6vw, 38px);
}
.cardSubtitle {
  font-size: clamp(14px, 2.2vw, 19px);
}
@media (max-width: 640px) {
  .cleanStart .startLogo {
    width: min(99%, 690px);
    max-height: 90%;
  }
  .cinematicCard {
    width: min(98%, 620px);
    padding: 6px 6px 10px;
  }
  .cardImage {
    height: clamp(250px, 66vh, 360px);
  }
}

/* R12C — preserve original aspect ratio, enlarge the art near the practical CRT limit, no squashing. */
.cinematicCard {
  width: min(98%, 790px);
  max-width: 98vw;
  padding: 6px 6px 10px;
}
.cardImage {
  width: 100%;
  height: clamp(360px, 80vh, 500px);
  max-height: none;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
  background: rgba(0, 0, 0, .82);
}
.cardText {
  margin-top: 6px;
}
.cardTitle {
  font-size: clamp(28px, 4.8vw, 40px);
}
.cardSubtitle {
  font-size: clamp(14px, 2.3vw, 20px);
}
@media (max-width: 640px) {
  .cinematicCard {
    width: min(99%, 620px);
    padding: 5px 5px 9px;
  }
  .cardImage {
    height: clamp(280px, 70vh, 390px);
  }
}

/* R12D — give the face intro art more breathing time and a little more size without distorting it. */
.cinematicCard {
  width: min(99%, 840px);
  max-width: 99vw;
  padding: 5px 5px 9px;
}
.cardImage {
  width: 100%;
  height: clamp(390px, 84vh, 540px);
  object-fit: contain;
  object-position: center center;
  background: rgba(0, 0, 0, .88);
}
.cardText {
  margin-top: 5px;
  gap: 3px;
}
.cardTitle {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: 4px;
}
.cardSubtitle {
  font-size: clamp(15px, 2.4vw, 21px);
}
@media (max-width: 640px) {
  .cinematicCard {
    width: min(99.2%, 620px);
    padding: 4px 4px 8px;
  }
  .cardImage {
    height: clamp(300px, 74vh, 410px);
  }
}

/* R13 — discreet gameplay-only side banners.
   They appear only when the game is running and enough side space exists.
   They never appear on PRESS START, token menu, face cards, continue, or portal exit. */
.gameAdLayer {
  --adPanelW: clamp(118px, 7.8vw, 150px);
  --adPanelTop: 22px;
  --adPanelH: calc(100vh - 44px);
}
.adCard {
  opacity: .82;
  border-color: rgba(112,230,255,.66);
  box-shadow:
    0 0 12px rgba(76,201,255,.24),
    inset 0 0 20px rgba(76,201,255,.10),
    inset 0 0 42px rgba(0,0,0,.74);
}
.adCard::before { opacity: .38; }
.adCard::after { border-color: rgba(255,238,102,.32); }
.adKicker { font-size: clamp(8px, .82vw, 11px); }
.adHeadline {
  font-size: clamp(18px, 1.8vw, 32px);
  opacity: .92;
}
.adBody {
  font-size: clamp(10px, .95vw, 13px);
  opacity: .90;
}
.adFooter {
  opacity: .88;
}
.adCountdown {
  opacity: .86;
}
@media (max-width: 1240px) {
  .gameAdLayer { --adPanelW: 112px; }
  .adHeadline { font-size: 20px; letter-spacing: 2px; }
  .adBody { font-size: 10px; }
}

/* R13B — queued premium neon side banners with staggered 20-second cadence. */
.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-flicker .adCard { animation: adFlickerIn 2.55s steps(9, end) both; }
.sideAdPanel.ad-exit-flicker .adCard { animation: adFlickerOut 2.10s steps(7, end) both; }
.sideAdPanel.ad-enter-scan .adCard { animation: adScanIn 2.50s cubic-bezier(.18,.88,.22,1) both; }
.sideAdPanel.ad-exit-scan .adCard { animation: adScanOut 2.10s 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; }
}

/* R13C — ad session continuous from token purchase, including Face cards and transitions. */
.sideAdPanel.ad-enter-slide .adCard { animation-duration: 1.35s; }
.sideAdPanel.ad-exit-slide .adCard { animation-duration: .62s; }
.sideAdPanel.ad-enter-glow .adCard { animation-duration: 1.30s; }
.sideAdPanel.ad-exit-glow .adCard { animation-duration: .58s; }
.sideAdPanel.ad-enter-zoom .adCard { animation-duration: 1.28s; }
.sideAdPanel.ad-exit-zoom .adCard { animation-duration: .58s; }
.sideAdPanel.ad-enter-curtain .adCard { animation-duration: 1.25s; }
.sideAdPanel.ad-exit-curtain .adCard { animation-duration: .55s; }
.sideAdPanel.ad-enter-glitch .adCard { animation-duration: 1.18s; }
.sideAdPanel.ad-exit-glitch .adCard { animation-duration: .52s; }
.sideAdPanel.ad-enter-flicker .adCard { animation-duration: 1.22s; }
.sideAdPanel.ad-exit-flicker .adCard { animation-duration: .52s; }
.sideAdPanel.ad-enter-scan .adCard { animation-duration: 1.30s; }
.sideAdPanel.ad-exit-scan .adCard { animation-duration: .58s; }

.adCard {
  isolation: isolate;
}
.adCard::before {
  animation: adNeonBreath 4.8s ease-in-out infinite;
}
.adCountdown {
  animation: adCounterPulse 1.5s ease-in-out infinite;
}
@keyframes adNeonBreath {
  0%, 100% { opacity: .48; filter: brightness(1); }
  50% { opacity: .72; filter: brightness(1.18); }
}
@keyframes adCounterPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}


/* R15G — Chromebook / lite visual mode.
   Se activa automáticamente en ChromeOS o con ?lite=1 / ?chrome=1 / ?perf=1.
   Solo reduce efectos visuales CSS; no toca gameplay ni banners. */
body.chromebook-lite {
  background: #000;
}

body.chromebook-lite #screenWrap {
  box-shadow: none;
  border-radius: 8px;
}

body.chromebook-lite #crtOverlay {
  opacity: .34;
  background:
    linear-gradient(rgba(255,255,255,.045) 50%, rgba(0,0,0,.075) 50%),
    radial-gradient(ellipse at center, rgba(255,255,255,.045) 0%, rgba(0,0,0,.22) 78%);
  background-size: 100% 4px, 100% 100%;
}

body.chromebook-lite .gameAdPanel,
body.chromebook-lite .adPanel,
body.chromebook-lite .sideAdPanel {
  box-shadow: none !important;
  filter: none !important;
  animation-duration: .28s !important;
}

body.chromebook-lite .gameAdPanel *,
body.chromebook-lite .adPanel *,
body.chromebook-lite .sideAdPanel * {
  text-shadow: none !important;
  filter: none !important;
}

body.chromebook-lite .gameAdPanel::before,
body.chromebook-lite .gameAdPanel::after,
body.chromebook-lite .adPanel::before,
body.chromebook-lite .adPanel::after,
body.chromebook-lite .sideAdPanel::before,
body.chromebook-lite .sideAdPanel::after {
  animation: none !important;
  filter: none !important;
}


/* R15H — ultra light ad transitions.
   Diagnóstico de Chromebook: los bajones coinciden con entrada/cambio de banner.
   Solución: conservar banners y cadencia 24s/12s, pero usar solo transform + opacity. */
.sideAdPanel.ad-enter-slide .adCard,
.sideAdPanel.ad-enter-glow .adCard,
.sideAdPanel.ad-enter-zoom .adCard,
.sideAdPanel.ad-enter-curtain .adCard,
.sideAdPanel.ad-enter-glitch .adCard,
.sideAdPanel.ad-enter-flicker .adCard,
.sideAdPanel.ad-enter-scan .adCard {
  animation: adLiteSlideIn .24s ease-out both !important;
  will-change: transform, opacity;
  filter: none !important;
}

.sideAdPanel.ad-exit-slide .adCard,
.sideAdPanel.ad-exit-glow .adCard,
.sideAdPanel.ad-exit-zoom .adCard,
.sideAdPanel.ad-exit-curtain .adCard,
.sideAdPanel.ad-exit-glitch .adCard,
.sideAdPanel.ad-exit-flicker .adCard,
.sideAdPanel.ad-exit-scan .adCard {
  animation: adLiteSlideOut .16s ease-in both !important;
  will-change: transform, opacity;
  filter: none !important;
}

@keyframes adLiteSlideIn {
  from { opacity: 0; transform: translateX(var(--adInX, -110%)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes adLiteSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--adOutX, 110%)); }
}

.sideAdPanel .adCard {
  filter: none !important;
}

.sideAdPanel .adCard::before,
.sideAdPanel .adCard::after {
  animation: none !important;
  filter: none !important;
}


/* R15S — start screen maximized from first paint.
   Body already starts with arcade-fullscreen in index.html; this reinforces the initial PRESS START view. */
body.arcade-fullscreen #startOverlay {
  inset: 0;
}

body.arcade-fullscreen .cleanStart .startLogo {
  width: min(96%, 760px);
  max-height: 86%;
}

body.arcade-fullscreen .cleanStart .pressStartBtn {
  font-size: clamp(28px, 5vw, 48px);
}


/* R16 FINAL — precisión visual: logo grande con PRESS START siempre dentro del CRT. */
body.arcade-fullscreen .attractCabinet.cleanStart,
html:fullscreen .attractCabinet.cleanStart,
html:-webkit-full-screen .attractCabinet.cleanStart {
  padding: 12px 18px 16px;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 8px;
  overflow: hidden;
}

body.arcade-fullscreen .cleanStart .startLogo,
html:fullscreen .cleanStart .startLogo,
html:-webkit-full-screen .cleanStart .startLogo {
  align-self: stretch;
  width: min(96%, 760px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}

body.arcade-fullscreen .cleanStart .pressStartBtn,
html:fullscreen .cleanStart .pressStartBtn,
html:-webkit-full-screen .cleanStart .pressStartBtn {
  position: relative;
  z-index: 3;
  align-self: end;
  width: min(78%, 430px);
  min-width: 0;
  min-height: 58px;
  margin: 0 0 2px;
  padding: 8px 24px 10px;
  border: 3px solid #ffcf52;
  border-radius: 5px;
  background: rgba(0, 0, 0, .86);
  color: #fff2a6;
  font-size: clamp(28px, 4.8vw, 46px);
  letter-spacing: .14em;
  text-shadow: 0 0 10px #ffee66, 0 0 20px #ff4e1c, 0 0 28px rgba(76,201,255,.65);
  box-shadow: 0 0 12px rgba(255,238,102,.75), 0 0 24px rgba(255,78,28,.55), inset 0 0 14px rgba(76,201,255,.18);
  animation: r16PressStartVisible 1.05s steps(2, start) infinite;
}

@keyframes r16PressStartVisible {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .58; }
}


/* DEMO R01 — required closing screen only. */
.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; }