/* Operación Meteoro — interfaz sobre la escena: transmisión entrante, subtítulos de radio, botones de la base, HUD de
   batalla (contador, oleada, escudo, radar, pausa, omitir), avisos, módulo de datos, tarjetas, ¡ESQUIVA!, núcleos,
   pausa y reporte. Nada tapa el centro de la acción; objetivos ≥ 44 px. Destellos: ≤ 3 por segundo y nunca a
   pantalla completa; con movimiento reducido no hay parpadeos ni sacudidas. */

/* ---------- Transmisión entrante ---------- */
.om .tx { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: #020409; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.om .tx.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.om .tx-noise { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(63, 224, 255, .05) 0 1px, transparent 1px 3px); }
.om .tx-noise::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 18px; background: linear-gradient(180deg, transparent, rgba(63, 224, 255, .18), transparent); opacity: 0; }
.om .tx.is-glitch .tx-noise::after { animation: tx-bar .32s steps(4) 1; }
.om .tx.is-glitch .tx-warn { animation: tx-shift .32s steps(3) 1; }
@keyframes tx-bar { 0% { opacity: 1; top: 20%; } 50% { top: 62%; } 100% { opacity: 0; top: 48%; } }
@keyframes tx-shift { 0% { transform: translate(-4px, 0); text-shadow: 3px 0 var(--red), -3px 0 var(--cyan); } 50% { transform: translate(3px, 1px); } 100% { transform: none; text-shadow: none; } }
.om .tx-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.om .tx-warn { margin: 0; font: 400 24px/1.15 var(--font-head); letter-spacing: .05em; color: var(--red); }
.om .tx-tri { display: inline-block; animation: tx-blink 1.25s ease-in-out infinite; } /* (0.8 destellos por segundo) */
@keyframes tx-blink { 50% { opacity: .35; } }
.om .tx-from { margin: 0 0 18px; font: 600 16px/1.3 var(--font-text); color: var(--muted); }
.om .accept { position: relative; }
.om .accept.is-hint { animation: acc-pulse 1.6s ease-in-out infinite; }
@keyframes acc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 46, 58, .55); } 50% { box-shadow: 0 0 0 12px rgba(255, 46, 58, 0); } }
.om .accept.is-hint::after { content: "Toca para escuchar el mensaje"; position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font: 600 16px/1 var(--font-text); letter-spacing: 0; color: var(--text); opacity: .85; }
.om.rm.tx-tri, .om.rm.accept.is-hint, .om.rm.tx.is-glitch .tx-warn, .om.rm.tx.is-glitch .tx-noise::after { animation: none; }
.om .skip-intro { position: absolute; z-index: 41; left: 10px; top: calc(10px + var(--safe-t)); opacity: 0; visibility: hidden; transition: opacity .3s; }
.om .skip-intro.is-on { opacity: 1; visibility: visible; }

/* ---------- Subtítulos de radio ---------- */
.om .subs { position: absolute; z-index: 36; left: 12px; right: 12px; bottom: calc(22px + var(--safe-b)); padding: 12px 14px 14px; border-left: 4px solid var(--orange); border-radius: 4px; background: linear-gradient(90deg, rgba(16, 19, 26, .92), rgba(16, 19, 26, .78)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease-soft), bottom .35s var(--ease-soft); pointer-events: none; }
.om .subs.is-on { opacity: 1; transform: none; }
.om .ui:has(.hub.is-on) .subs { bottom: calc(196px + 50px + var(--safe-b)); }
.om .subs-from { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 14px/1 var(--font-text); letter-spacing: .08em; color: var(--orange); }
.om .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: tx-blink 1.25s ease-in-out infinite; }
.om .subs-txt { margin: 0; min-height: 2.6em; font: 600 18px/1.35 var(--font-text); color: var(--text); }
.om.rm.rec { animation: none; }

/* ---------- Botones de la base ---------- */
.om .hub { position: absolute; z-index: 37; left: 12px; right: 12px; bottom: calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s, transform .35s var(--ease-soft), visibility 0s .35s; }
.om .hub.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s var(--ease-soft); }
.om .hub .tbtn { width: 100%; }
.om .hub-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.om .hub-row .tbtn { padding: 0 10px; }
.om .hub-enlist[hidden] { display: none; }
.om .hub-battle { font-size: 22px !important; min-height: 62px !important; }
/* movimiento reducido: "VER LA MISIÓN" como opción principal */
.om .hub.is-rm .hub-row { order: -1; grid-template-columns: 1fr; }
.om .hub.is-rm .hub-auto { min-height: 62px; border-color: #FFB27A; background: linear-gradient(180deg, #FF8A3D, var(--orange)); color: var(--ink); font: 400 20px/1 var(--font-head); }
.om .hub.is-rm .hub-battle { font-size: 18px !important; min-height: 52px !important; border-color: rgba(63, 224, 255, .55); background: linear-gradient(180deg, #2E3441, #1C212B); color: var(--text); }
.om .ui:has(.hub.is-rm.is-on) .subs { bottom: calc(250px + 20px + var(--safe-b)); }

/* ---------- HUD de batalla ---------- */
.om .hud { position: absolute; inset: 0; z-index: 32; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.om .hud.is-on { opacity: 1; visibility: visible; transition: opacity .4s; }
.om .hud > * { pointer-events: auto; }
.om .hud-top { position: absolute; left: 8px; right: 8px; top: calc(8px + var(--safe-t)); display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px; pointer-events: none; }
.om .hud-top > * { pointer-events: auto; }
.om .hud-cnt { display: flex; align-items: center; gap: 6px; min-width: 76px; height: 44px; padding: 0 10px; border: 1px solid rgba(63, 224, 255, .45); border-radius: 4px; background: rgba(10, 14, 22, .7); color: var(--cyan); clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%); }
.om .cnt-n { font: 400 22px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.om .hud-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 2px; min-width: 0; }
.om .hud-wave { max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 3px 10px; font: 700 15px/1.1 var(--font-text); letter-spacing: .08em; color: var(--text); background: rgba(10, 14, 22, .7); border-radius: 3px; white-space: nowrap; }
.om .shield { display: flex; align-items: center; gap: 6px; width: min(200px, 100%); }
.om .sh-lbl { font: 700 12px/1 var(--font-text); letter-spacing: .1em; color: var(--cyan); }
.om .sh-bar { position: relative; flex: 1; height: 10px; border: 1px solid rgba(63, 224, 255, .6); background: rgba(63, 224, 255, .1); transform: skewX(-16deg); overflow: hidden; }
.om .sh-fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, rgba(63, 224, 255, .7) 8px 10px); transform-origin: left; transition: transform .35s var(--ease-soft); }
.om .hud.is-low .sh-fill { background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, rgba(255, 210, 63, .7) 8px 10px); }
.om .sh-pct { min-width: 38px; font: 700 14px/1 var(--font-text); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.om .hud-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(232, 236, 244, .3); border-radius: 6px; background: rgba(16, 19, 26, .66); color: var(--text); cursor: pointer; }
.om .hud-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.om .hud-sub { position: absolute; right: 8px; top: calc(60px + var(--safe-t)); }
.om .info-btn { position: absolute; right: 10px; bottom: calc(14px + var(--safe-b)); width: 52px; height: 52px; border-color: rgba(255, 210, 63, .6); color: var(--yellow); }
.om .radar { position: absolute; left: 10px; bottom: calc(12px + var(--safe-b)); width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(63, 224, 255, .55); overflow: hidden; pointer-events: none;
  background: radial-gradient(circle, rgba(63, 224, 255, .12) 0 1px, transparent 1px) 50% 50% / 100% 100%, repeating-radial-gradient(circle, transparent 0 13px, rgba(63, 224, 255, .22) 13px 14px), rgba(8, 12, 20, .72); }
.om .radar::before, .om .radar::after { content: ""; position: absolute; background: rgba(63, 224, 255, .25); }
.om .radar::before { left: 50%; top: 0; bottom: 0; width: 1px; } .om .radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.om .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(63, 224, 255, .45), transparent 70deg); animation: sweep 2.4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.om.rm.sweep { animation-duration: 8s; }
.om .blips i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.om .blips i.is-boss { background: var(--red); width: 10px; height: 10px; }
.om .blips i[hidden] { display: none; }
/* HUD en la base (antes de la batalla): sólo contador, escudo y radar */
.om .hud.is-idle .hud-right, .om .hud.is-idle .hud-sub, .om .hud.is-idle .info-btn { display: none; }
.om .hud.is-idle .radar { bottom: auto; top: calc(62px + var(--safe-t)); left: 10px; }
.om .hud.is-idle .hud-cnt { visibility: hidden; }
.om .hud.is-idle .hud-top { right: 60px; } /* (deja libre el botón de sonido) */

/* modo automático */
/* etiqueta fija "MODO AUTOMÁTICO · Toca para tomar el control" (entre el radar y el expediente; toda es un botón) */
.om .auto-bar { position: absolute; z-index: 33; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 196px); min-height: 52px; padding: 6px 12px 6px 10px; border: 1px solid rgba(63, 224, 255, .6); border-radius: 6px; background: rgba(10, 14, 22, .86); color: var(--text); text-align: left; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, border-color .3s, background .3s; }
.om .auto-bar.is-on { opacity: 1; visibility: visible; }
.om .auto-bar .ab-ic { display: grid; color: var(--cyan); }
.om .auto-bar .ab-txt { display: flex; flex-direction: column; gap: 2px; }
.om .auto-bar .ab-main { font: 400 15px/1.1 var(--font-head); letter-spacing: .08em; color: var(--cyan); white-space: nowrap; }
.om .auto-bar .ab-sub { font: 600 13px/1.2 var(--font-text); color: var(--text); }
.om .auto-bar.is-took { border-color: var(--yellow); background: rgba(40, 30, 6, .9); }
.om .auto-bar.is-took .ab-main, .om .auto-bar.is-took .ab-ic { color: var(--yellow); }
/* selector de modo en la pausa */
.om .pz-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid rgba(63, 224, 255, .45); border-radius: 6px; overflow: hidden; }
.om .pzm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px; border: 0; background: transparent; color: var(--muted, #AAB3C5); font: 700 14px/1.1 var(--font-text); cursor: pointer; }
.om .pzm span:first-child { display: grid; }
.om .pzm[aria-pressed="true"] { background: rgba(63, 224, 255, .18); color: var(--text); box-shadow: inset 0 -3px 0 var(--cyan); }
.om .pzm:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
/* botones de la base: título + línea que explica el modo */
.om .hb-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.om .hb-d { font: 700 13px/1.1 var(--font-text); letter-spacing: 0; text-transform: none; opacity: .85; }
.om .hub-battle .hb-d { font-size: 14px; }
.om .hub-auto { min-height: 58px; }
.om .hub-info { min-height: 44px !important; border-color: rgba(232, 236, 244, .28) !important; background: transparent !important; font-size: 15px !important; }
.om .hb-l { white-space: nowrap; }
/* "CONTINUAR MISIÓN" con la barra que se llena en automático */
.om .cont-btn { position: relative; overflow: hidden; }
.om .cont-prog { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-timing-function: linear; }
.om .cont-prog.is-run { transform: scaleX(1); }

/* avisos de G-LOOBI */
.om .radio-line { position: absolute; z-index: 34; left: 50%; top: calc(104px + var(--safe-t)); transform: translate(-50%, -6px); width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 8px 12px; border-left: 3px solid var(--cyan); border-radius: 3px; background: rgba(10, 14, 22, .86); font: 600 16px/1.3 var(--font-text); color: var(--text); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.om .radio-line.is-on { opacity: 1; transform: translate(-50%, 0); }

/* cartel central */
.om .banner { position: absolute; z-index: 35; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; }
.om .banner.is-on { animation: bn-in 1.8s var(--ease-soft) both; }
.om .banner.is-big.is-on { animation-duration: 3.2s; }
@keyframes bn-in { 0% { opacity: 0; transform: scale(1.15); } 12% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.om .bn-main { display: inline-block; margin: 0; padding: 8px 18px; font: 400 26px/1.1 var(--font-head); letter-spacing: .06em; color: var(--text); background: rgba(10, 14, 22, .78); border-top: 3px solid var(--orange); border-bottom: 3px solid var(--orange); text-shadow: 0 0 18px rgba(255, 106, 26, .6); }
.om .banner.is-alert .bn-main { color: #fff; border-color: var(--red); background: rgba(60, 8, 14, .8); font-size: 21px; }
.om .banner.is-big .bn-main { font-size: clamp(30px, 10vw, 42px); padding: 12px 20px; color: var(--yellow); border-color: var(--yellow); text-shadow: 0 0 24px rgba(255, 210, 63, .55); }
.om .bn-sub { margin: 8px 0 0; font: 700 17px/1.2 var(--font-text); color: var(--text); text-shadow: 0 2px 6px #000; }
.om .bn-sub:empty { display: none; }
.om.rm.banner.is-on { animation-name: bn-in-rm; }
@keyframes bn-in-rm { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* módulo de datos: anillo que late en su posición proyectada */
.om .mod-hint { position: absolute; z-index: 31; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.om .mod-hint.is-on { opacity: 1; }
.om .mh-ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border: 3px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 16px rgba(255, 210, 63, .6); animation: mh 1.25s ease-in-out infinite; }
@keyframes mh { 50% { transform: scale(.82); } }
.om .mh-lbl { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); padding: 4px 10px; background: var(--yellow); color: var(--ink); font: 400 16px/1 var(--font-head); letter-spacing: .06em; white-space: nowrap; }
.om.rm.mh-ring { animation: none; }

/* retículas de los núcleos del jefe */
.om .cores { position: absolute; inset: 0; z-index: 31; pointer-events: none; }
.om .core { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.om .core[hidden] { display: none; }
.om .c-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border: 2px dashed rgba(255, 210, 63, .9); border-radius: 50%; animation: core-spin 4s linear infinite; }
.om .c-ring::before, .om .c-ring::after { content: ""; position: absolute; left: 50%; width: 2px; height: 10px; margin-left: -1px; background: var(--yellow); }
.om .c-ring::before { top: -8px; } .om .c-ring::after { bottom: -8px; }
@keyframes core-spin { to { transform: rotate(360deg); } }
.om.rm.c-ring { animation: none; }
.om .c-hp { position: absolute; left: -30px; top: 40px; width: 60px; display: flex; gap: 2px; }
.om .c-hp i { flex: 1; height: 6px; background: var(--yellow); box-shadow: 0 0 4px rgba(255, 210, 63, .8); }
.om .c-hp i.is-off { background: rgba(255, 210, 63, .2); box-shadow: none; }

/* marca del toque */
.om .tapfx { position: absolute; inset: 0; z-index: 31; pointer-events: none; }
.om .tapfx i { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 2px solid rgba(63, 224, 255, .9); border-radius: 50%; animation: tap-in .42s ease-out forwards; }
.om .tapfx i::before, .om .tapfx i::after { content: ""; position: absolute; background: var(--cyan); }
.om .tapfx i::before { left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; } .om .tapfx i::after { top: 50%; left: -6px; right: -6px; height: 2px; margin-top: -1px; }
.om .tapfx i.is-hit { border-color: var(--yellow); }
@keyframes tap-in { from { transform: scale(1.5); opacity: 0; } 40% { opacity: 1; } to { transform: scale(.6); opacity: 0; } }

/* ¡ESQUIVA! */
/* compacto y a un lado (derecha o izquierda según el ataque): el Comandante, al centro abajo, y el golpe se ven
   completos. Área táctil grande: el ::before la extiende 18 px alrededor sin agrandar el botón a la vista. */
.om .dodge { position: absolute; z-index: 38; bottom: calc(128px + var(--safe-b)); min-width: 0; width: 132px; min-height: 56px !important; padding: 0 10px !important; font-size: 17px !important; flex-direction: column; gap: 2px !important; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s var(--ease-snap), visibility 0s .2s; }
.om .dodge.is-right { right: 12px; left: auto; }
.om .dodge.is-left { left: 12px; right: auto; }
.om .dodge::before { content: ""; position: absolute; inset: -18px; }
.om .dodge.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease-snap); }
.om .dodge.is-on.is-pulse { animation: dodge-p .8s ease-in-out infinite; }
@keyframes dodge-p { 50% { box-shadow: 0 0 0 10px rgba(255, 46, 58, 0), 0 0 22px rgba(255, 46, 58, .6); } }
.om .dodge::after { content: "o desliza"; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font: 600 14px/1 var(--font-text); letter-spacing: 0; color: var(--text); text-shadow: 0 2px 6px #000; }

/* ---------- Tarjeta del módulo de datos ---------- */
.om .card-slot { position: absolute; inset: 0; z-index: 55; pointer-events: none; }
.om .hcard { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 14, .5); pointer-events: auto; opacity: 0; transition: opacity .3s; }
.om .hcard.is-on { opacity: 1; }
/* (sin clip-path ni sombras grandes: a 3× de densidad rasterizarlas costaba > 50 ms al abrir la tarjeta) */
.om .hcard-in { position: relative; width: min(380px, 100%); max-height: calc(100% - 24px); overflow: auto; padding: 20px 16px 16px; border: 2px solid var(--cyan); border-radius: 14px 4px 14px 4px; background: #121823; box-shadow: 0 0 0 4px rgba(63, 224, 255, .12); transform: scale(.94); transition: transform .35s var(--ease-snap); }
.om .hcard.is-on .hcard-in { transform: none; }
.om .hcard-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stripes); }
.om .hc-scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(63, 224, 255, .16), transparent); pointer-events: none; animation: hc-scan 1.1s ease-out 1 forwards; }
@keyframes hc-scan { from { transform: translateY(-100%); } to { transform: translateY(260%); opacity: 0; } }
.om.rm.hc-scan { display: none; }
.om .hc-kick { margin: 4px 0 4px; font: 700 14px/1.2 var(--font-text); letter-spacing: .1em; color: var(--cyan); }
.om .hcard h2 { margin: 0 0 8px; font: 400 26px/1.1 var(--font-head); color: var(--text); }
.om .hcard .big { margin: 0 0 8px; font: 700 20px/1.2 var(--font-text); color: var(--yellow); }
.om .hcard .addr { margin: 0 0 10px; font: 600 16px/1.35 var(--font-text); color: var(--text); }
.om .hcard > .hcard-in > .tbtn { width: 100%; margin-top: 14px; }

/* ---------- Pausa ---------- */
.om .pause { position: absolute; inset: 0; z-index: 52; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 14, .74); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.om .pause.is-on { opacity: 1; visibility: visible; transition: opacity .25s; }
.om .pause-card { display: flex; flex-direction: column; gap: 12px; width: min(300px, 100%); padding: 22px 18px; border: 2px solid rgba(232, 236, 244, .3); border-radius: 6px; background: #151A24; }
.om .pause-card h2 { margin: 0 0 6px; text-align: center; font: 400 28px/1 var(--font-head); letter-spacing: .12em; color: var(--text); }
.om .pause-card .tbtn { width: 100%; }

/* ---------- Reporte de la misión ---------- */
.om .report-slot { position: absolute; inset: 0; z-index: 48; pointer-events: none; }
.om .report { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + var(--safe-b)); background: linear-gradient(180deg, transparent 20%, rgba(4, 7, 14, .82)); pointer-events: auto; opacity: 0; transition: opacity .4s; }
.om .report.is-on { opacity: 1; }
.om .report-in { display: flex; flex-direction: column; gap: 10px; width: min(400px, 100%); max-height: 100%; overflow: auto; padding: 18px 16px 16px; border: 2px solid var(--yellow); border-radius: 6px; background: linear-gradient(180deg, rgba(24, 28, 38, .96), rgba(14, 17, 25, .97)); transform: translateY(24px); transition: transform .45s var(--ease-soft); }
.om .report.is-on .report-in { transform: none; }
.om .rp-kick { margin: 0; font: 700 14px/1 var(--font-text); letter-spacing: .12em; color: var(--cyan); text-align: center; }
.om .report h2 { margin: 0; text-align: center; font: 400 30px/1 var(--font-head); color: var(--yellow); letter-spacing: .04em; }
.om .rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.om .rp-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid rgba(63, 224, 255, .35); border-radius: 4px; background: rgba(63, 224, 255, .06); }
.om .rp-ic { color: var(--cyan); display: grid; }
.om .rp-l { font: 600 14px/1 var(--font-text); color: var(--muted); }
.om .rp-v { font: 400 24px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.om .rp-note, .om .rp-best { margin: 0; text-align: center; font: 600 16px/1.35 var(--font-text); color: var(--text); }
.om .rp-best { color: var(--green); }
.om .rp-unlock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0; font: 700 16px/1 var(--font-text); color: var(--yellow); }
.om .report-in .tbtn { width: 100%; }