:root {
  --bg: #050a1a;
  --ink: #eaf2ff;
  --mia: #3f7bff;
  --mia-gold: #e0b44a;
  --luc: #7dff3a;
  --hp: #ffd23f;
  --hp-low: #ff4d4d;
  --trail: #ff7a3a;
  --panel: rgba(8, 16, 40, 0.92);
  --line: rgba(120, 180, 255, 0.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.bar-row {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex; align-items: flex-start; gap: 10px;
}
.side { flex: 1; min-width: 0; }
.name { font-weight: 800; letter-spacing: .08em; font-size: clamp(11px, 2.2vh, 15px); text-shadow: 0 1px 3px #000; }
.p2 .name { text-align: right; }
.hp {
  position: relative; height: clamp(12px, 3.4vh, 20px); margin-top: 2px;
  background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.75); border-radius: 3px; overflow: hidden;
  transform: skewX(-12deg);
}
.p2 .hp { transform: skewX(12deg); }
.hp .fill, .hp .trail { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; transform-origin: right; }
.p2 .hp .fill, .p2 .hp .trail { left: 0; right: auto; transform-origin: left; }
.hp .trail { background: var(--trail); }
.hp .fill { background: linear-gradient(180deg, #fff28a, var(--hp) 45%, #d99a10); }
.side.low .hp .fill { background: linear-gradient(180deg, #ff9a9a, var(--hp-low) 50%, #a51a1a); animation: pulse .5s infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }
.meter { height: 5px; margin-top: 3px; background: rgba(0,0,0,.55); border-radius: 2px; overflow: hidden; width: 70%; }
.p2 .meter { margin-left: auto; }
.mfill { height: 100%; width: 0; background: linear-gradient(90deg, #7fd4ff, #ffffff); }
.p2 .mfill { margin-left: auto; background: linear-gradient(270deg, #9dff6a, #ffffff); }
.pips { margin-top: 3px; display: flex; gap: 5px; }
.p2 .pips { justify-content: flex-end; }
.pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); display: block; }
.pips i.on { background: var(--hp); box-shadow: 0 0 6px var(--hp); }
.timer {
  min-width: 54px; text-align: center; font-weight: 900; font-size: clamp(22px, 6vh, 38px);
  line-height: 1; text-shadow: 0 2px 4px #000; padding-top: 2px; font-variant-numeric: tabular-nums;
}
.timer.sd { color: var(--hp-low); font-size: clamp(14px, 3.2vh, 20px); }
.combo {
  position: absolute; top: 22%; font-weight: 900; font-style: italic; font-size: clamp(18px, 5vh, 34px);
  text-shadow: 0 0 10px rgba(0,0,0,.9), 0 2px 0 #000; opacity: 0; transition: opacity .25s;
  font-family: "Consolas", "Courier New", monospace;
}
.combo.c1 { left: 4%; color: #9cd3ff; }
.combo.c2 { right: 4%; color: #b9ff8f; }
.combo.show { opacity: 1; }
.announce {
  position: absolute; left: 0; right: 0; top: 36%; text-align: center;
  font-family: "Consolas", "Courier New", monospace; font-weight: 900;
  font-size: clamp(30px, 11vh, 80px); letter-spacing: .06em;
  color: #fff; text-shadow: 0 0 18px #3fa0ff, 0 0 2px #fff, 0 4px 0 #001a44;
  opacity: 0; transform: scale(1.3); transition: opacity .15s, transform .2s;
}
.announce.show { opacity: 1; transform: scale(1); }
.announce.ko { color: #ffe36b; text-shadow: 0 0 22px #ff7a00, 0 4px 0 #3a1400; }
.proto-tag {
  position: absolute; bottom: max(4px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .15em; opacity: .45;
}

/* ---------- Controles ---------- */
#controls { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#stickZone {
  position: absolute; left: 0; bottom: 0; width: 45%; height: 70%;
  pointer-events: auto; touch-action: none;
}
#stick {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  left: max(28px, calc(env(safe-area-inset-left) + 16px)); bottom: max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.18));
  border: 2px solid rgba(255,255,255,.35);
}
#knob {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(255,255,255,.45); border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 0 12px rgba(120,190,255,.5);
}
#btns {
  position: absolute; right: max(18px, calc(env(safe-area-inset-right) + 10px)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 230px; height: 190px; pointer-events: none;
}
.btn {
  position: absolute; width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 26px; color: rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.55); pointer-events: auto; touch-action: none;
  text-shadow: 0 1px 3px #000;
}
#bA { left: 0; bottom: 8px; background: rgba(63,123,255,.35); }
#bB { left: 92px; bottom: 44px; background: rgba(255,90,60,.35); }
#bS { left: 150px; bottom: 124px; width: 68px; height: 68px; font-size: 22px; background: rgba(160,90,255,.35); }
.btn.on { transform: scale(.92); filter: brightness(1.8); border-color: #fff; }
#pauseBtn {
  position: absolute; top: max(52px, calc(env(safe-area-inset-top) + 46px)); left: 50%; transform: translateX(-50%);
  width: 38px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.35); color: #fff; font-weight: 900; pointer-events: auto;
}
@media (max-height: 380px) {
  #stick { width: 130px; height: 130px; }
  .btn { width: 68px; height: 68px; font-size: 22px; }
  #bB { left: 80px; bottom: 38px; }
  #bS { left: 132px; bottom: 108px; width: 58px; height: 58px; }
}

/* ---------- Pantallas ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 30%, #13265a 0%, #060c22 60%, #02040c 100%);
  overflow-y: auto; touch-action: pan-y;
}
#pause, #result { background: rgba(3, 6, 18, .88); }
#title { cursor: pointer; }
.logo { font-size: clamp(40px, 12vw, 96px); font-weight: 900; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 0 24px rgba(63,123,255,.8), 0 4px 0 #001236; }
.logo span { color: var(--mia-gold); }
.sub { margin-top: 10px; opacity: .8; letter-spacing: .2em; font-size: 12px; text-transform: uppercase; }
.tap { margin-top: 36px; font-weight: 800; letter-spacing: .2em; font-family: Consolas, monospace; }
.blink { animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.ver { position: absolute; bottom: 10px; font-size: 11px; opacity: .45; }
h2 { margin: 0 0 12px; letter-spacing: .12em; font-size: clamp(18px, 4vh, 26px); }
.row { width: min(620px, 100%); display: flex; align-items: center; gap: 10px; margin: 5px 0; flex-wrap: wrap; }
.lbl { width: 140px; font-size: 13px; opacity: .8; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.opts button, .mbtn, .go {
  font: inherit; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; min-height: 38px;
}
.opts button.sel { background: rgba(63,123,255,.45); border-color: #8fb6ff; font-weight: 700; }
.go { margin-top: 14px; font-size: 20px; font-weight: 900; padding: 10px 36px; background: linear-gradient(180deg, #4f86ff, #2449b8); border-color: #bcd2ff; }
.mbtn { width: min(320px, 100%); margin: 5px 0; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 10px 0; font-size: 14px; }
.toggles input { transform: scale(1.3); margin-right: 6px; }
.help { max-width: 640px; font-size: 12px; opacity: .75; line-height: 1.5; text-align: center; }
#resultStats { margin: 6px 0 12px; font-size: 14px; opacity: .85; text-align: center; line-height: 1.6; }

/* ---------- Girar teléfono ---------- */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 50;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #13265a, #02040c 70%);
  font-weight: 800; font-size: 22px; letter-spacing: .06em; text-align: center; padding: 20px;
}
#rotate small { font-weight: 400; opacity: .7; font-size: 14px; }
#rotate .phone {
  width: 54px; height: 92px; border: 4px solid #cfe0ff; border-radius: 10px; margin-bottom: 18px;
  animation: rot 1.8s ease-in-out infinite;
}
@keyframes rot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) {
  body.fighting #rotate { display: flex; }
}

#fps { position: fixed; right: 6px; bottom: 4px; z-index: 7; font: 11px Consolas, monospace; opacity: .7; pointer-events: none; }

/* ---------- Fase 3: callouts, Super, medidor ---------- */
.callout {
  position: absolute; top: 30%; font-family: Consolas, "Courier New", monospace; font-weight: 900; font-style: italic;
  font-size: clamp(16px, 4.6vh, 30px); letter-spacing: .05em; opacity: 0; transform: translateY(8px);
  transition: opacity .12s, transform .12s; text-shadow: 0 0 10px rgba(0,0,0,.9), 0 2px 0 #000;
}
.callout.k1 { left: 5%; }
.callout.k2 { right: 5%; text-align: right; }
.callout.show { opacity: 1; transform: none; }
.callout.counter { color: #ff7a4a; }
.callout.perfect { color: #fff3a0; }
.callout.dizzy { color: #c9a8ff; }
.callout.info { color: #cfe6ff; }
.meter { position: relative; }
.side.full .meter { box-shadow: 0 0 8px #fff, 0 0 14px var(--mia); animation: pulse .4s infinite alternate; }
.side.p2.full .meter { box-shadow: 0 0 8px #fff, 0 0 14px var(--luc); }
#superCut {
  position: absolute; left: 0; right: 0; top: 34%; height: 30%; pointer-events: none;
  opacity: 0; transition: opacity .12s;
}
#superCut.show { opacity: 1; }
#superCut .sc-band {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 4%;
  padding: 0 6%; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(10,30,90,.85) 45%, rgba(0,0,0,.85));
  border-top: 3px solid #fff; border-bottom: 3px solid #fff;
  animation: scIn .35s ease-out;
}
#superCut.lucero .sc-band { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(10,60,10,.88) 45%, rgba(0,0,0,.88)); }
#superCut.right .sc-band { flex-direction: row-reverse; text-align: right; }
/* Retrato del Super: sale por arriba de la banda; del lado derecho se espeja para mirar al centro */
.sc-portrait {
  align-self: flex-end; height: 165%; aspect-ratio: 1; flex: none;
  background: url(../assets/build/portraits/mia_super_portrait.webp) center bottom / contain no-repeat;
  filter: drop-shadow(0 0 14px #7fd8ff);
  animation: scPortrait .45s ease-out;
}
#superCut.lucero .sc-portrait { background-image: url(../assets/build/portraits/lucero_super_portrait.webp); filter: drop-shadow(0 0 14px #8dff4a); }
#superCut.right .sc-portrait { transform: scaleX(-1); }
@keyframes scPortrait { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
.sc-text small { display: block; letter-spacing: .3em; font-size: clamp(10px, 2.4vh, 14px); opacity: .85; }
.sc-text b { display: block; font-family: Consolas, monospace; font-size: clamp(26px, 8vh, 60px); letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 18px #7fd8ff, 0 3px 0 #001236; }
#superCut.lucero .sc-text b { text-shadow: 0 0 18px #8dff4a, 0 3px 0 #0a2400; }
@keyframes scIn { from { transform: translateX(-30%) skewX(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
#bX {
  left: 150px; bottom: 210px; width: 80px; height: 40px; border-radius: 12px; font-size: 14px; letter-spacing: .08em;
  background: linear-gradient(180deg, rgba(255,230,120,.75), rgba(255,140,40,.6)); border-color: #fff;
  animation: pulse .45s infinite alternate;
}
@media (max-height: 380px) { #bX { left: 128px; bottom: 176px; } }

/* ---------- Fase 4: diálogo terminal, cita de victoria, volúmenes ---------- */
.dlg {
  position: absolute; top: 22%; max-width: 44%; padding: 8px 12px 10px;
  font-family: Consolas, "Courier New", monospace; font-size: clamp(13px, 3.6vh, 20px); line-height: 1.35;
  background: rgba(2, 8, 20, .82); border: 1px solid rgba(127, 216, 255, .6); border-radius: 4px;
  box-shadow: 0 0 14px rgba(127, 216, 255, .25), inset 0 0 20px rgba(127, 216, 255, .08);
  opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s;
}
.dlg.show { opacity: 1; transform: none; animation: glitch 2.4s infinite; }
.dlg1 { left: 5%; }
.dlg2 { right: 5%; text-align: right; }
.dlg small { display: block; font-size: .65em; opacity: .7; letter-spacing: .08em; margin-bottom: 2px; }
.dlg.mia { color: #cfeaff; }
.dlg.lucero { color: #c8ffab; border-color: rgba(141, 255, 74, .6); box-shadow: 0 0 14px rgba(141, 255, 74, .25), inset 0 0 20px rgba(141, 255, 74, .08); }
@keyframes glitch {
  0%, 93%, 100% { transform: none; clip-path: none; }
  94% { transform: translateX(-2px); clip-path: inset(0 0 55% 0); }
  95% { transform: translateX(2px); clip-path: inset(45% 0 0 0); }
  96% { transform: none; clip-path: none; }
}
.rquote { font-family: Consolas, monospace; font-size: 15px; margin: 4px 0 8px; max-width: 560px; text-align: center; }
.rquote.mia { color: #cfeaff; }
.rquote.lucero { color: #c8ffab; }
.toggles input[type=range] { transform: none; width: 110px; vertical-align: middle; margin-left: 6px; }

/* ---------- Fase 5: menús ---------- */
.logo.small { font-size: clamp(28px, 7vw, 54px); margin-bottom: 10px; }
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(640px, 100%); }
.mitem {
  font: inherit; color: var(--ink); text-align: left; padding: 10px 14px; min-height: 54px;
  background: linear-gradient(90deg, rgba(63,123,255,.28), rgba(63,123,255,.06)); border: 1px solid var(--line); border-radius: 10px;
  position: relative;
}
.mitem b { display: block; letter-spacing: .08em; font-size: clamp(14px, 3.4vh, 18px); }
.mitem small { opacity: .7; font-size: 12px; }
.mitem:active, .card:active, .chip:active { transform: scale(.97); }
.mitem.locked, .chip.locked { opacity: .55; }
.mitem.locked b::after { content: ' 🔒'; }
.mitem.hint::after {
  content: '¡Empieza aquí!'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--mia-gold); color: #1a1200; font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 10px;
  animation: pulse .6s infinite alternate;
}
.menu-extra { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.chip { font: inherit; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 18px; padding: 6px 14px; font-size: 13px; }
.chip.locked::after { content: ' 🔒'; }
.back { width: auto; padding: 8px 18px; }

/* Selección de personaje */
.cards { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; width: 100%; max-width: 900px; overflow-x: auto; padding: 4px; }
.card {
  font: inherit; color: var(--ink); position: relative; flex: 0 0 auto; width: clamp(130px, 22vw, 190px);
  background: rgba(255,255,255,.05); border: 2px solid var(--line); border-radius: 12px; padding: 8px; text-align: center;
}
.card .portrait { height: clamp(90px, 30vh, 170px); display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse at 50% 80%, rgba(63,123,255,.35), transparent 70%); border-radius: 8px; }
.card.lucero .portrait { background: radial-gradient(ellipse at 50% 80%, rgba(141,255,74,.3), transparent 70%); }
.card canvas { height: 100%; width: auto; }
.card b { display: block; margin-top: 6px; letter-spacing: .1em; }
.card small { display: block; font-size: 11px; opacity: .7; }
.card p { font-size: 11px; opacity: .75; margin: 4px 0 0; line-height: 1.3; }
.card.picked { border-color: #fff; box-shadow: 0 0 18px rgba(127,216,255,.6); }
.card.lucero.picked { box-shadow: 0 0 18px rgba(141,255,74,.6); }
.card.locked { opacity: .5; }
.card .sil { background: radial-gradient(ellipse at 50% 35%, #111 0 18%, transparent 19%), radial-gradient(ellipse at 50% 85%, #111 0 32%, transparent 33%); }
.card .lock { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; }
.attr { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .1em; margin-top: 4px; }
.st { display: flex; gap: 3px; }
.st i { width: 12px; height: 6px; background: rgba(255,255,255,.15); border-radius: 2px; display: block; }
.st i.on { background: var(--mia-gold); }
.badge { position: absolute; top: 6px; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 8px; }
.badge.p1 { left: 6px; background: var(--mia); }
.badge.p2 { right: 6px; background: #c0392b; }
.sel-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.sel-actions { display: flex; gap: 10px; align-items: center; }
.go:disabled { opacity: .4; }

/* Movimientos */
.tabs { justify-content: center; margin-bottom: 8px; flex: none; }
.ml-body { width: min(720px, 100%); max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.ml-body h3 { margin: 10px 0 4px; font-size: 13px; letter-spacing: .15em; color: var(--mia-gold); }
.mv { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mv .in { flex: 0 0 34%; font-family: Consolas, monospace; font-weight: 700; color: #cfeaff; font-size: 13px; }
.mv .in small { display: block; font-weight: 400; opacity: .9; font-size: 13px; color: #9fd0ff; margin-top: 2px; }
.mv .nm b { display: block; font-size: 14px; }
.mv .nm span { font-size: 12px; opacity: .75; }
.toggles.col { flex-direction: column; align-items: flex-start; }
.help.big { font-size: 15px; opacity: .9; }
.eps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ep { width: 220px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); text-align: center; }
.ep b { display: block; letter-spacing: .1em; }
.ep small { display: block; color: var(--mia-gold); margin: 2px 0 6px; }
.ep.locked { opacity: .5; }
.ep.locked b::after { content: ' 🔒'; }

/* Tutorial */
#tutBox {
  position: absolute; left: 50%; top: 17%; transform: translateX(-50%); width: min(560px, 70%);
  background: rgba(2, 8, 20, .85); border: 1px solid rgba(224,180,74,.7); border-radius: 8px; padding: 8px 14px; text-align: center;
  font-family: Consolas, monospace;
}
#tutBox small { display: block; font-size: 11px; letter-spacing: .15em; color: var(--mia-gold); }
#tutText { font-size: clamp(13px, 3.4vh, 17px); margin-top: 2px; }
#tutOk { font-weight: 900; color: #7dff8a; font-size: 18px; min-height: 0; }
#tutBox.done { border-color: #7dff8a; }
@media (max-height: 420px) { .menu-list { gap: 6px; } .mitem { min-height: 44px; padding: 6px 12px; } .card p { display: none; } }
.ml-body::-webkit-scrollbar { width: 6px; }
.ml-body::-webkit-scrollbar-thumb { background: rgba(127,216,255,.4); border-radius: 3px; }
.ml-body::-webkit-scrollbar-track { background: transparent; }
.ml-body { scrollbar-color: rgba(127,216,255,.4) transparent; scrollbar-width: thin; }
.cards { justify-content: safe center; }
.st i { width: 10px; }
.attr { gap: 4px; }
@media (orientation: portrait) {
  .cards { flex-wrap: wrap; overflow: visible; }
  .card { width: calc(50% - 8px); }
  .card .portrait { height: 150px; }
  .menu-list { grid-template-columns: 1fr; }
}

/* ---------- Fase 6: online ---------- */
#ping { position: absolute; left: 50%; transform: translateX(-50%); top: max(88px, calc(env(safe-area-inset-top) + 82px)); font: 700 10px Consolas, monospace; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
body:not(.online) #ping { display: none; }
#ping.good, #lobbyPing.good { color: #7dff8a; }
#ping.mid, #lobbyPing.mid { color: #ffd23f; }
#ping.bad, #lobbyPing.bad { color: #ff5a5a; }
#netMsg {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  background: rgba(2, 8, 20, .9); border: 1px solid #ffd23f; border-radius: 8px; padding: 12px 20px;
  font-family: Consolas, monospace; font-size: clamp(14px, 4vh, 20px); text-align: center;
}
body.online-menu #restartBtn, body.online-menu #pauseMoves, body.online-menu #dummyRow { display: none !important; }
.netstate { margin-bottom: 8px; font-size: 14px; opacity: .9; }
.netstate #netState.ok { color: #7dff8a; }
.netstate #netState.err { color: #ff7a7a; }
#nickInput, #codeInput {
  font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.07);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 200px;
}
#codeInput { width: 110px; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-family: Consolas, monospace; }
.online-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.online-actions .go { margin-top: 4px; }
.joinrow { display: flex; gap: 8px; align-items: center; }
.joinrow .mbtn { width: auto; margin: 0; }
#onWait { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
#onWait.hidden { display: none; }
#onWaitText { font-size: 15px; }
.roomcode { font-family: Consolas, monospace; font-size: clamp(34px, 10vh, 56px); font-weight: 900; letter-spacing: .3em; color: var(--mia-gold); }
.roomcode:empty { display: none; }

/* ---------- Fase 7: perfil, ranking, códigos ---------- */
.prof { width: min(640px, 100%); }
.mbtn.inline { width: auto; margin: 0; }
#profNick { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 180px; }
.card-ish { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.card-ish input { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: min(260px, 100%); }
.card-ish .joinrow { margin-top: 6px; flex-wrap: wrap; }
.card-ish .ok { color: #7dff8a; }
.card-ish .err, #redeemMsg.err { color: #ff8a8a; }
#redeemMsg.ok { color: #7dff8a; }
.stt { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.stt th, .stt td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.stt th { color: var(--mia-gold); font-size: 11px; letter-spacing: .08em; }
.redeem { width: min(460px, 100%); text-align: center; margin: 14px 0 4px; }
.redeem .lbl { width: auto; margin-bottom: 6px; }
.redeem .joinrow { justify-content: center; }
#redeemInput { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 200px; text-transform: uppercase; letter-spacing: .12em; text-align: center; font-family: Consolas, monospace; }
.ep.on small { color: #7dff8a; }

/* v0.9: medidor de mareo (bajo la barra de Super). Se llena con el daño recibido; al llenarse, la luchadora queda mareada */
.stunm { height: 3px; margin-top: 2px; background: rgba(0,0,0,.45); border-radius: 2px; overflow: hidden; width: 45%; }
.p2 .stunm { margin-left: auto; }
.stunm .sfill { height: 100%; width: 0; background: linear-gradient(90deg, #ffb347, #ff5a36); transition: width .15s; }
.p2 .stunm .sfill { margin-left: auto; }
.stunm.warn .sfill { animation: pulse .25s infinite alternate; }

/* ---------- v0.9.3: esquema de 4 botones (Opciones) ---------- */
.btn i { display: none; }
.b4only { display: none; }
body.btn4 .b4only { display: flex; }
body.btn4 .btn i { display: block; position: absolute; bottom: 9px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; opacity: .85; }
body.btn4 .btn { flex-direction: column; padding-bottom: 8px; box-sizing: border-box; }
body.btn4 #btns { width: 262px; height: 200px; }
body.btn4 .btn:not(#bS):not(#bX) { width: 72px; height: 72px; font-size: 24px; }
/* arriba los puños, abajo las patadas; los débiles a la izquierda (más cerca del pulgar) */
body.btn4 #bA { left: 8px;  bottom: 92px; }
body.btn4 #bB { left: 90px; bottom: 112px; }
body.btn4 #bC { left: 0;    bottom: 8px;  background: rgba(40,200,220,.35); }
body.btn4 #bD { left: 82px; bottom: 28px; background: rgba(255,160,40,.4); }
body.btn4 #bS { left: 178px; bottom: 60px; }
body.btn4 #bX { left: 172px; bottom: 150px; }
@media (max-height: 380px) {
  body.btn4 #btns { width: 236px; height: 176px; }
  body.btn4 .btn:not(#bS):not(#bX) { width: 62px; height: 62px; font-size: 21px; }
  body.btn4 #bA { left: 6px;  bottom: 80px; }
  body.btn4 #bB { left: 78px; bottom: 98px; }
  body.btn4 #bC { left: 0;    bottom: 6px; }
  body.btn4 #bD { left: 72px; bottom: 24px; }
  body.btn4 #bS { left: 158px; bottom: 50px; }
  body.btn4 #bX { left: 150px; bottom: 128px; }
}
/* v0.9.6: aviso del paso en la selección de luchadora */
.selhint { margin: -6px 0 10px; font-size: 13px; color: #9fb4ff; letter-spacing: .02em; text-align: center; }

/* ---------- v0.9.7: menú con dos opciones grandes (Online y Vs. CPU) y el resto pequeñas ---------- */
.menu-list { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(760px, 100%); }
.mitem.big { grid-column: span 2; min-height: 92px; padding: 14px 18px; text-align: center; border-width: 2px; }
.mitem.big b { font-size: clamp(20px, 5vh, 30px); letter-spacing: .1em; }
.mitem.big small { font-size: 13px; opacity: .85; }
.mitem.big.online { background: linear-gradient(135deg, rgba(63,123,255,.55), rgba(40,60,160,.25)); border-color: rgba(120,170,255,.75); box-shadow: 0 0 18px rgba(63,123,255,.35); }
.mitem.big.cpu { background: linear-gradient(135deg, rgba(220,70,60,.5), rgba(140,40,40,.22)); border-color: rgba(255,150,120,.7); box-shadow: 0 0 18px rgba(220,70,60,.3); }
.mitem.mini { grid-column: span 1; min-height: 46px; padding: 8px 8px; text-align: center; }
.mitem.mini b { font-size: clamp(11px, 2.6vh, 13px); letter-spacing: .05em; }
.mitem.mini small { display: none; }
.mitem.big.hint::after { top: 8px; transform: none; }
@media (max-height: 420px) { .mitem.big { min-height: 70px; padding: 8px 12px; } .mitem.mini { min-height: 38px; } }
.mitem.mini.hint::after { top: -11px; right: 50%; transform: translateX(50%); font-size: 10px; padding: 2px 7px; white-space: nowrap; }

/* ---------- v0.9.8: marca (logo e ilustración del título) ---------- */
#title { background: linear-gradient(180deg, rgba(4,8,28,.15) 0%, rgba(4,8,28,.1) 45%, rgba(4,8,28,.85) 100%), url(../assets/build/brand/titulo.webp) center / cover no-repeat, #050a1a; }
.brand-logo { display: block; width: min(78vw, 120vh); max-width: 820px; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); }
#title .brand-logo { margin-bottom: 4px; }
#title .sub { text-shadow: 0 2px 6px #000, 0 0 2px #000; }
#title .tap { text-shadow: 0 2px 8px #000; }
.brand-logo.small { width: min(48vw, 62vh); max-width: 460px; margin-bottom: 8px; }

/* ---------- Modo Aventura (F0, prueba): botón de salto ---------- */
.advonly { display: none; }
body.adv .advonly { display: flex; }
body.adv #bJ { left: 172px; bottom: 140px; width: 64px; height: 64px; font-size: 26px; background: rgba(80,200,140,.4); }
body.adv #bJ i { display: block; position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; font-weight: 700; }
@media (max-height: 380px) { body.adv #bJ { left: 152px; bottom: 118px; width: 56px; height: 56px; } }
#advHud { position: fixed; inset: 0; z-index: 6; pointer-events: none; font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000; }
#advHud .bar { position: absolute; height: 14px; border: 2px solid rgba(255,255,255,.7); border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
#advHud .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34a, #ff9d2a); transition: width .15s; }
#advHud .bar.enemy > i { background: linear-gradient(90deg, #c06cff, #7b3fe0); }
#advHud .p1name { position: absolute; left: 16px; top: 8px; font-size: 14px; letter-spacing: .08em; }
#advHud .p1bar { left: 16px; top: 28px; width: min(36vw, 320px); }
#advHud .lives { position: absolute; left: 16px; top: 60px; font-size: 14px; }
#advHud .meterbar { left: 16px; top: 46px; width: min(24vw, 210px); height: 9px; border-width: 1px; }
#advHud .meterbar > i { background: linear-gradient(90deg, #3f7bff, #7fd8ff); }
#advHud .meterbar.full { box-shadow: 0 0 10px #7fd8ff; animation: pulse .35s infinite alternate; }
#advHud .score { position: absolute; right: 16px; top: 8px; font-size: 18px; letter-spacing: .06em; }
#advHud .ename { position: absolute; right: 16px; top: 34px; font-size: 12px; opacity: .9; }
#advHud .ebar { right: 16px; top: 52px; width: min(26vw, 220px); }
#advHud .go { position: absolute; right: 6vw; top: 40%; font-size: 42px; color: #ffd34a; animation: pulse .4s infinite alternate; }
#advHud .banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: clamp(28px, 7vh, 54px); letter-spacing: .08em; color: #ffd34a; }
#advHud .banner .small { font-size: .55em; color: #9fffb0; }
#advHud .banner small { display: block; font-size: .4em; color: #fff; margin-top: 8px; letter-spacing: .04em; }
#advHud .perf { position: absolute; left: 50%; transform: translateX(-50%); top: 88px; white-space: nowrap; font-size: 11px; font-weight: 700; opacity: .8; pointer-events: auto; }
#advHud .perf button { pointer-events: auto; margin-left: 6px; font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 8px; border: 1px solid #fff6; background: #0008; color: #fff; }
/* v0.10.3: en la Aventura con 4 botones, SUPER abajo de S (arriba se encimaba con el salto) */
body.adv.btn4 #bX { left: 176px; bottom: 2px; }
@media (max-height: 380px) { body.adv.btn4 #bX { left: 152px; bottom: 0; } }
/* ---------- v0.11: Aventura en pareja (menú, barra del compañero, avisos de red) ---------- */
#advHud .mate { position: absolute; left: 16px; top: 80px; font-size: 11px; letter-spacing: .04em; }
#advHud .mate .bar { position: relative; display: block; width: min(22vw, 190px); height: 8px; border-width: 1px; margin-top: 3px; }
#advHud .mate .bar > i { background: linear-gradient(90deg, #ff8a6a, #ff4a3a); }
#advHud .netmsg { position: absolute; left: 0; right: 0; top: 58%; text-align: center; font-size: 15px; color: #ffd34a; }
#advHud .perf em { font-style: normal; }
.adv-lobby { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(3,6,26,.82); padding: 16px; }
.adv-lobby .box { width: min(520px, 100%); max-height: 100%; overflow: auto; background: linear-gradient(180deg, #121a4a, #0a0f2e); border: 2px solid rgba(255,255,255,.25); border-radius: 16px; padding: 14px 18px; color: #fff; text-align: center; }
.adv-lobby h2 { margin: 0 0 10px; letter-spacing: .14em; font-size: 22px; color: #ffd34a; }
.adv-lobby button { font: inherit; font-weight: 800; color: #fff; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(63,123,255,.35); padding: 9px 14px; margin: 4px; cursor: pointer; }
.adv-lobby button.big { display: block; width: 100%; margin: 0 0 10px; padding: 12px; font-size: 18px; background: linear-gradient(135deg, rgba(63,123,255,.6), rgba(40,60,160,.3)); }
.adv-lobby button small, .adv-lobby .pair small { display: block; font-size: 11px; font-weight: 600; opacity: .8; margin: 2px 0 6px; }
.adv-lobby .pair { border: 1px solid rgba(255,120,100,.5); border-radius: 12px; padding: 8px; background: rgba(220,70,60,.12); }
.adv-lobby .join { display: flex; justify-content: center; align-items: center; gap: 4px; }
.adv-lobby input { width: 110px; font: inherit; font-size: 18px; font-weight: 800; letter-spacing: .25em; text-align: center; text-transform: uppercase; padding: 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: #fff; }
.adv-lobby .msg { min-height: 1.2em; margin: 8px 0 4px; font-size: 13px; color: #ffd34a; }
.adv-lobby button.back { background: rgba(255,255,255,.12); }
@media (max-height: 420px) {
  .adv-lobby { padding: 8px; }
  .adv-lobby .box { padding: 8px 14px; }
  .adv-lobby h2 { margin: 0 0 6px; font-size: 18px; }
  .adv-lobby button { padding: 7px 12px; margin: 3px; }
  .adv-lobby button.big { padding: 8px; margin-bottom: 6px; font-size: 16px; }
  .adv-lobby .msg { margin: 4px 0 2px; }
}
/* v0.11.3: banda del Super en la Aventura (mismo diseño que la del versus) y retrato de Meteoro */
#advHud .advsc { position: absolute; left: 0; right: 0; top: 34%; height: 30%; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
#advHud .advsc.show { opacity: 1; }
#advHud .advsc .sc-band { position: absolute; inset: 0; display: flex; align-items: center; gap: 4%; padding: 0 6%;
  background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(10,30,90,.85) 45%, rgba(0,0,0,.85)); border-top: 3px solid #fff; border-bottom: 3px solid #fff; animation: scIn .35s ease-out; }
#advHud .advsc.meteoro .sc-band { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(110,12,8,.88) 45%, rgba(0,0,0,.88)); }
#advHud .advsc.lucero .sc-band { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(10,60,10,.88) 45%, rgba(0,0,0,.88)); }
#advHud .advsc.meteoro .sc-portrait { background-image: url(../assets/build/portraits/meteoro_super_portrait.webp); filter: drop-shadow(0 0 14px #ff5a4a); }
#advHud .advsc.lucero .sc-portrait { background-image: url(../assets/build/portraits/lucero_super_portrait.webp); filter: drop-shadow(0 0 14px #8dff4a); }
#advHud .advsc .sc-text b { text-shadow: 0 0 18px #7fd8ff, 0 3px 0 #001236; }
#advHud .advsc.meteoro .sc-text b { text-shadow: 0 0 18px #ff5a4a, 0 3px 0 #2a0000; }
#superCut.meteoro .sc-band { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(110,12,8,.88) 45%, rgba(0,0,0,.88)); }
#superCut.meteoro .sc-portrait { background-image: url(../assets/build/portraits/meteoro_super_portrait.webp); filter: drop-shadow(0 0 14px #ff5a4a); }
/* v0.11.3: AVENTURA (historia) es la primera opción del menú, a todo lo ancho */
.mitem.big.story { grid-column: 1 / -1; min-height: 72px; background: linear-gradient(135deg, rgba(255,200,60,.5), rgba(200,90,30,.28)); border-color: rgba(255,215,120,.85); box-shadow: 0 0 22px rgba(255,190,60,.35); }
@media (max-height: 420px) { .mitem.big.story { min-height: 52px; padding: 6px 12px; } .mitem.big.story small { font-size: 11px; } }
/* v0.11.6: aviso del agarre en la Aventura */
#advHud .grabhint { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 12px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,211,74,.7); font-size: clamp(11px, 2.6vh, 15px); letter-spacing: .02em; animation: pulse .5s infinite alternate; }
#advHud .grabhint b { color: #ffd34a; }
/* v0.11.7: pantalla de carga de la Aventura */
#advLoad { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #050a1a; color: #fff; }
#advLoad .box { width: min(420px, 80vw); text-align: center; }
#advLoad b { display: block; letter-spacing: .14em; font-size: clamp(16px, 4vh, 22px); color: #ffd34a; margin-bottom: 12px; animation: pulse .6s infinite alternate; }
#advLoad .bar { height: 12px; border: 2px solid rgba(255,255,255,.7); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
#advLoad .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd34a, #ff9d2a); transition: width .2s; }
#advLoad small { display: block; margin-top: 10px; font-size: 12px; opacity: .7; letter-spacing: .06em; }
/* v0.11.8: DEMO de la Aventura en la pantalla de título (como en las máquinas arcade) */
#advHud .demotag, #advHud .demopress { display: none; }
#advHud.isdemo .demotag { display: block; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: clamp(18px, 5vh, 30px); letter-spacing: .4em; color: #ffd34a; }
#advHud.isdemo .demopress { display: block; position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-size: clamp(16px, 4.6vh, 28px); letter-spacing: .14em; color: #fff; animation: blink 1s steps(1) infinite; }
#advHud.isdemo .perf, #advHud.isdemo .grabhint { display: none !important; }
body.demo #controls, body.demo #pauseBtn { display: none !important; }
/* v0.11.9: letrero ADELANTE con la imagen del usuario */
#advHud .go { right: 3vw; top: 34%; }
#advHud .go img { display: block; width: min(34vw, 340px); height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }

/* v0.11.9: pantalla final estilo arcade (retratos a los lados, letrero y botones al centro) */
#result.arcade { background: radial-gradient(ellipse at center, #121a4a 0%, #050a1a 70%); padding: 0; overflow: hidden; }
#result .fin-por { position: absolute; bottom: 0; height: min(92vh, 62vw); width: auto; max-width: 42vw; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(0,0,0,.8)); animation: finIn .5s ease-out; }
#result .fin-l { left: 0; object-position: left bottom; }
#result .fin-r { right: 0; object-position: right bottom; }
#result .fin-sign { display: block; width: min(46vw, 520px); height: auto; margin: 0 auto 2px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); animation: finSign .6s ease-out; }
#result.arcade .fin-center { position: relative; z-index: 2; width: min(46vw, 520px); margin: 0 auto; text-align: center; }
#result.arcade #resultTitle { font-size: clamp(14px, 3.4vh, 22px); margin: 0 0 4px; }
#result.arcade #resultQuote { font-size: 12px; }
#result.arcade #resultStats { font-size: 12px; text-shadow: 0 1px 3px #000; }
#result.arcade .mbtn { padding: 8px 12px; margin: 4px auto; }
#result:not(.arcade) .fin-por, #result:not(.arcade) .fin-sign { display: none; }
@keyframes finIn { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes finSign { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
@media (max-height: 420px) { #result .fin-sign { width: min(40vw, 380px); } #result.arcade .mbtn { padding: 5px 10px; margin: 2px auto; font-size: 13px; } }
.ep .ep-more { margin-top: 6px; font-size: 12px; opacity: .8; line-height: 1.35; }
/* v0.11.11: botón VER DEMO (título) y chip del menú */
.demo-btn { margin-top: 14px; font: inherit; font-weight: 900; letter-spacing: .14em; font-size: clamp(13px, 3.4vh, 18px); color: #050a1a;
  padding: 9px 22px; border-radius: 999px; border: 2px solid #fff; background: linear-gradient(180deg, #ffe27a, #ffb02e); box-shadow: 0 0 18px rgba(255,190,60,.6);
  cursor: pointer; animation: demoPulse .9s ease-in-out infinite alternate; pointer-events: auto; }
@keyframes demoPulse { from { opacity: 1; transform: scale(1); } to { opacity: .55; transform: scale(.96); } }
.chip.demo-chip { border-color: rgba(255,211,74,.8); color: #ffd34a; animation: demoPulse .9s ease-in-out infinite alternate; }
/* v0.12: CÓMO JUGAR y EXTRAS (cómic, Applewhite Books, ranking y perfil) */
.mitem.mini.extras { border-color: rgba(255,211,74,.7); }
.howto-row { display: flex; gap: 10px; width: min(640px, 100%); }
.howto-row .mitem.big { flex: 1; min-height: 70px; }
.howto-adv { width: min(640px, 100%); margin: 10px 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 12px; line-height: 1.5; text-align: center; }
.howto-adv > b { display: block; color: #ffd34a; letter-spacing: .08em; margin-bottom: 2px; }
.xtabs { display: flex; gap: 6px; margin-bottom: 10px; }
.xtabs button { font: inherit; font-size: 13px; font-weight: 800; color: #fff; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); cursor: pointer; }
.xtabs button.sel { background: linear-gradient(135deg, rgba(255,200,60,.55), rgba(200,90,30,.3)); border-color: rgba(255,215,120,.9); }
.xpane { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.xpane[data-pane="comic"] { flex-direction: row; align-items: center; gap: 16px; }
.xcover { height: min(52vh, 300px); width: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.xtext { flex: 1; text-align: left; }
.xtitle { display: block; letter-spacing: .1em; color: #ffd34a; margin-bottom: 6px; }
.xtext p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; opacity: .9; }
.xbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xtext .xbtns { justify-content: flex-start; }
.xbtns.big .mitem.big { min-width: 220px; }
a.mbtn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.xlogo { width: min(300px, 50vw); height: auto; }
.xtag { margin: 0; font-size: 13px; opacity: .85; text-align: center; }
.xbooks { display: flex; gap: 10px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; }
.xbooks img { height: min(30vh, 170px); width: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.5); flex: none; }
@media (max-height: 420px) { .xcover { height: 46vh; } .xbooks img { height: 26vh; } .xtext p { font-size: 12px; } #extras h2, #howto h2 { margin: 0 0 6px; } }
@media (max-height: 420px) { .xlogo { width: min(200px, 40vw); } .xtabs { margin-bottom: 6px; } .xpane { gap: 5px; } #extras .mbtn.back, #howto .mbtn.back { margin-top: 4px; padding: 6px 14px; } }
/* v0.12.1: registro (Google + noticias) */
.chip.reg-chip { border-color: rgba(127,216,255,.8); color: #7fd8ff; }
.regtitle { display: block; color: #ffd34a; letter-spacing: .12em; margin-bottom: 4px; }
.gbtn { display: flex; justify-content: center; margin: 10px 0 6px; min-height: 44px; }
.newsck { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 12px; line-height: 1.35; margin: 8px auto; max-width: 460px; cursor: pointer; }
.newsck input { margin-top: 2px; flex: none; width: 16px; height: 16px; }
.newsck i { opacity: .7; }
.help.small { font-size: 11px; opacity: .7; margin: 6px 0 0; }
.xsub { display: block; font-style: italic; font-size: 13px; opacity: .85; margin: -2px 0 8px; }

/* ---------- Menú con tarjetas de modo (captura del juego dentro del botón) ---------- */
#menu .brand-logo.small { width: min(40vw, 46vh); margin-bottom: 6px; }
.mode-card { grid-column: span 2; position: relative; overflow: hidden; display: block; padding: 0; margin: 0; font: inherit; color: #fff; text-align: left;
  height: clamp(130px, 42vh, 230px); border-radius: 14px; border: 2px solid rgba(255,255,255,.35); background: #0a1030; cursor: pointer; }
.mode-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: transform .4s; }
.mode-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,6,20,.82) 0%, rgba(3,6,20,.15) 42%, rgba(3,6,20,.2) 62%, rgba(3,6,20,.85) 100%); }
.mode-card .mc-txt { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 8px 12px; text-shadow: 0 2px 6px #000; }
.mode-card .mc-txt b { display: block; letter-spacing: .08em; font-size: clamp(15px, 4vh, 22px); }
.mode-card .mc-txt small { display: block; font-size: 11px; opacity: .9; line-height: 1.25; }
.mode-card .mc-btns { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2; display: flex; gap: 8px; justify-content: flex-end; }
.mc-sub { font: inherit; font-weight: 700; letter-spacing: .08em; font-size: clamp(12px, 3.2vh, 15px); color: #fff; border-radius: 10px; padding: 7px 14px; min-height: 36px;
  border: 2px solid rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(0,0,0,.6); cursor: pointer; }
.mc-sub.go { background: linear-gradient(135deg, #ffb83a, #d0601e); border-color: #ffe08a; }
.mc-sub.cpu { flex: 1; background: linear-gradient(135deg, rgba(225,75,60,.95), rgba(150,35,35,.95)); border-color: rgba(255,170,140,.9); }
.mc-sub.online { flex: 1; background: linear-gradient(135deg, rgba(70,130,255,.95), rgba(35,55,170,.95)); border-color: rgba(150,190,255,.9); }
.mode-card.adv { border-color: rgba(255,215,120,.9); box-shadow: 0 0 20px rgba(255,190,60,.35); }
.mode-card.fight { border-color: rgba(150,190,255,.85); box-shadow: 0 0 20px rgba(80,130,255,.35); cursor: default; }
.mode-card.adv:active img { transform: scale(1.04); }
.mode-card.adv:active, .mc-sub:active { transform: scale(.97); }
.mode-card.nudge .mc-sub { animation: mcNudge .5s ease-in-out 2; }
@keyframes mcNudge { 50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(255,255,255,.8); } }
@media (max-height: 420px) { .mode-card { height: clamp(120px, 44vh, 190px); } .mc-sub { min-height: 32px; padding: 5px 10px; } }
@media (max-width: 560px) and (orientation: portrait) { .mode-card { grid-column: 1 / -1; } }

/* invitación a registrarse en la pantalla final */
.result-reg { display: block; width: 100%; max-width: 440px; margin: 6px auto 8px; padding: 7px 12px; font: inherit; text-align: center; color: #e8f7ff; cursor: pointer;
  background: rgba(40,110,180,.35); border: 1px solid rgba(127,216,255,.8); border-radius: 12px; box-shadow: 0 0 14px rgba(127,216,255,.25); }
.result-reg b { display: block; color: #7fd8ff; font-size: 14px; letter-spacing: .04em; }
.result-reg span { display: block; font-size: 11.5px; line-height: 1.3; opacity: .9; }
/* con la invitación visible el letrero final se achica un poco para que todo quepa en un teléfono horizontal */
#result.arcade:has(#resultReg:not(.hidden)) .fin-sign { width: min(36vw, 420px); }
#result.arcade .result-reg { margin: 4px auto 6px; padding: 5px 10px; }
/* pantalla final: botones en fila y caja de registro sólida (en iPhone las barras de Safari roban alto) */
#result.arcade .fin-center { max-height: 100%; max-height: 100dvh; overflow-y: auto; padding-bottom: 6px; }
#result.arcade .rbtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
#result.arcade .rbtns .mbtn { flex: 1 1 0; min-width: 120px; width: auto; margin: 0; padding: 8px 8px; font-size: 13px; }
#result.arcade .rbtns .mbtn.hidden { display: none; }
#result.arcade .result-reg { background: rgba(8,22,52,.94); }
#result.arcade:has(#resultReg:not(.hidden)) #resultQuote { display: none; }
@media (max-height: 420px) { #result.arcade:has(#resultReg:not(.hidden)) .fin-sign { width: min(30vw, 330px); } #result.arcade .result-reg span { font-size: 11px; } }