/* ============ La app recreada en HTML (nítida a cualquier tamaño) ============ */
.mock { container-type: inline-size; width: 100%; }
.mapp {
  --tier: #ef4444;
  font: 400 1.45cqw/1.45 var(--body); color: #eee;
  aspect-ratio: 16 / 11; position: relative; overflow: hidden;
  border-radius: 1.1em; border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(220, 38, 38, 0.32), transparent 70%),
    radial-gradient(50% 40% at 100% 0%, rgba(190, 24, 93, 0.25), transparent 70%),
    #0f0d0f;
  display: grid; grid-template-rows: 2.9em 1fr; grid-template-columns: 13.5em 1fr;
  box-shadow: 0 3em 6em -2em rgba(0, 0, 0, 0.9), 0 2em 5em -2em rgba(244, 63, 94, 0.35);
  user-select: none;
}
.mapp .mi { width: 1.15em; height: 1.15em; flex: none; }
.mbar { grid-column: 1 / -1; display: flex; align-items: center; gap: .6em; padding: 0 1.1em; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(15, 13, 15, .7); }
.mbar .hex { width: 1.1em; height: 1.1em; background: #f43f5e; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mbar b { font: 700 1em var(--display); letter-spacing: .03em; }
.mbar b i { font-style: normal; color: #f43f5e; }
.mbar .ver { color: #8d8d93; font-size: .72em; margin-left: .4em; }
.mbar .win { margin-left: auto; display: flex; gap: 1.2em; color: #8d8d93; font-size: .8em; }
.mside { padding: .9em .6em; border-right: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(20, 18, 22, .75), rgba(13, 11, 13, .6)); display: flex; flex-direction: column; gap: .2em; }
.mside .lbl { color: #8d8d93; font-size: .68em; margin: 0 .6em .4em; }
.mnav { display: flex; align-items: center; gap: .65em; padding: .55em .7em; border-radius: 0 .55em .55em 0; color: #8d8d93; font-size: .9em; border: 1px solid transparent; }
.mnav.on { color: #f43f5e; background: linear-gradient(90deg, rgba(244, 63, 94, .25), rgba(244, 63, 94, .04)); border-color: rgba(244, 63, 94, .22); box-shadow: inset .18em 0 0 #f43f5e; }
.mside .sys { margin-top: auto; padding: .7em; border-radius: .7em; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font-size: .72em; color: #cfc8cc; }
.mside .sys .dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #4ade80; margin-right: .4em; box-shadow: 0 0 .6em #4ade80; }
.mmain { padding: 1.1em 1.4em; position: relative; overflow: hidden; }
.mmain h5 { font: 700 1.7em/1.1 var(--display); margin: 0 0 .15em; }
.mmain .tag { color: #f43f5e; font-size: .68em; margin-bottom: .2em; }
.mmain .sub { color: #a39aa0; font-size: .8em; margin-bottom: .9em; }
.mcard { border-radius: .8em; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 55%); padding: .9em 1em; position: relative; overflow: hidden; }
.mbtn { display: inline-flex; align-items: center; justify-content: center; padding: .65em 1.2em; border-radius: .55em; font: 600 .85em var(--display); color: #fff; background: linear-gradient(180deg, #e11d48, #be123c 55%, #881337); box-shadow: 0 .4em 1.2em -.4em rgba(244, 63, 94, .9); transition: transform .15s; }
.mbtn.ghost { background: rgba(255, 255, 255, .08); box-shadow: none; border: 1px solid rgba(255, 255, 255, .15); }
.mbtn.press { transform: scale(.93); }

/* Escudo y puntuación */
.mhero { display: grid; grid-template-columns: 7.2em 1fr; gap: 1.2em; align-items: center; }
.mshield { width: 7.2em; height: 7.2em; border-radius: .9em; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tier) 50%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--tier) 35%, transparent), transparent 75%); transition: all .4s; position: relative; }
.mshield svg { width: 4.6em; filter: drop-shadow(0 0 1em var(--tier)); animation: breathe 2.2s ease-in-out infinite; }
.mshield svg .body { fill: var(--tier); transition: fill .4s; }
.mshield small { position: absolute; bottom: .35em; font: 600 .62em var(--display); color: #fff; }
@keyframes breathe { 50% { transform: scale(1.06) } }
.mscore .k { color: #a39aa0; font-size: .66em; }
.mscore .n { font: 700 2.6em/1 var(--display); color: color-mix(in srgb, var(--tier) 45%, white); font-variant-numeric: tabular-nums; }
.mscore .n small { font-size: .38em; color: #a39aa0; }
.mscore .badge { display: inline-block; margin-left: .6em; vertical-align: middle; font: 600 .62em var(--display); padding: .2em .55em; border-radius: .35em; color: var(--tier); border: 1px solid var(--tier); }
.mbarline { height: .75em; border-radius: .4em; background: rgba(255, 255, 255, .07); margin-top: .5em; overflow: hidden; }
.mbarline i { display: block; height: 100%; width: 40%; border-radius: inherit; background: repeating-linear-gradient(90deg, var(--tier) 0 .25em, color-mix(in srgb, var(--tier) 70%, black) .25em .38em); box-shadow: 0 0 .9em var(--tier); transition: width .5s, background .4s; }

/* Anillos en vivo */
.mrings { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-top: .8em; }
.mring { padding: .7em .8em; height: 6.6em; display: flex; flex-direction: column; justify-content: flex-end; }
.mring::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(244, 63, 94, .45), transparent); }
.mring b { font: 700 1.5em/1 var(--display); position: relative; z-index: 1; }
.mring span { color: #a39aa0; font-size: .65em; position: relative; z-index: 1; }
.mring svg { position: absolute; right: .7em; top: .7em; width: 3.4em; height: 3.4em; transform: rotate(-90deg); }
.mring circle { fill: none; stroke-width: 5; }
.mring .bg { stroke: rgba(255, 255, 255, .1); }
.mring .fg { stroke: #f43f5e; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.3, .8, .3, 1); filter: drop-shadow(0 0 .3em #f43f5e); }

/* Listas de pasos / hallazgos */
.mlist { display: grid; gap: .38em; margin-top: .7em; }
.mrow { display: flex; align-items: center; gap: .7em; padding: .42em .7em; border-radius: .55em; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); font-size: .82em; opacity: 0; transform: translateY(.5em); transition: opacity .35s, transform .35s, background .3s; }
.mrow.in { opacity: 1; transform: none; }
.mrow .r { margin-left: auto; font: 600 .82em var(--display); color: #8d8d93; }
.mrow .st { width: 1.2em; height: 1.2em; display: grid; place-items: center; color: #8d8d93; }
.mrow.run .st { color: #f43f5e; animation: spin 1s linear infinite; }
.mrow.ok .st, .mrow.ok .r { color: #4ade80; }
.mrow .sev { width: .3em; align-self: stretch; border-radius: .2em; background: #ef4444; box-shadow: 0 0 .6em #ef4444; }
.mrow .sev.w { background: #facc15; box-shadow: 0 0 .6em #facc15; }
.mprog { height: .55em; border-radius: .3em; background: rgba(255, 255, 255, .07); margin-top: .7em; overflow: hidden; }
.mprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #be123c, #f43f5e, #fda4af); box-shadow: 0 0 1em #f43f5e; transition: width .5s; }
.mflash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(34, 197, 94, .08), rgba(34, 197, 94, .38)); box-shadow: inset 0 0 0 .2em #4ade80; transition: opacity .3s; z-index: 5; }
.mflash.on { opacity: 1; }
.mflash div { text-align: center; transform: scale(.6); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.mflash.on div { transform: scale(1); }
.mflash .ok { width: 4.5em; height: 4.5em; margin: 0 auto .5em; border-radius: 50%; background: #22c55e; display: grid; place-items: center; color: #fff; box-shadow: 0 0 2.5em #22c55e; }
.mflash .ok .mi { width: 2.4em; height: 2.4em; stroke-width: 3; }
.mflash b { font: 700 1.9em var(--display); text-shadow: 0 0 1em #000; }

/* Bienvenida */
.mwel { display: grid; place-items: center; text-align: center; height: 100%; }
.mwel h6 { font: 700 2em/1.1 var(--display); margin: .2em 0 .9em; }
.muses { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6em; width: 100%; }
.muse { text-align: left; padding: .8em .7em; border-radius: .8em; border: 1.5px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: all .25s; }
.muse .mi { color: #f43f5e; width: 1.5em; height: 1.5em; }
.muse b { display: block; font: 600 .95em var(--display); margin-top: .4em; }
.muse span { font-size: .66em; color: #a39aa0; }
.muse.on { border-color: #f43f5e; background: rgba(244, 63, 94, .14); box-shadow: 0 0 1.6em -.4em rgba(244, 63, 94, .9); }
.mcursor { position: absolute; width: 1.6em; height: 1.6em; z-index: 6; left: 50%; top: 80%; transition: left .7s cubic-bezier(.5, 0, .2, 1), top .7s cubic-bezier(.5, 0, .2, 1); pointer-events: none; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .6)); }
.mcursor.click::after { content: ""; position: absolute; left: -.5em; top: -.5em; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid #fff; animation: ping .45s ease-out; }
@keyframes ping { from { transform: scale(.3); opacity: 1 } to { transform: scale(1.8); opacity: 0 } }

/* Medir: gráfico de FPS */
.mchart { height: 10em; margin-top: .6em; position: relative; }
.mchart svg { width: 100%; height: 100%; overflow: visible; }
.mchart .grid line { stroke: rgba(255, 255, 255, .06); }
.mchart .off { fill: none; stroke-linejoin: round; stroke: #8d8d93; stroke-width: 2; }
.mchart .on { fill: none; stroke: #f43f5e; stroke-width: 2.4; filter: drop-shadow(0 0 4px #f43f5e); }
.mphase { display: flex; justify-content: space-between; align-items: baseline; }
.mphase b { font: 700 2.4em/1 var(--display); font-variant-numeric: tabular-nums; }
.mphase span { font: 600 .75em var(--display); padding: .3em .6em; border-radius: .4em; background: rgba(255, 255, 255, .08); color: #cfc8cc; }
.mphase span.on { background: rgba(244, 63, 94, .2); color: #fda4af; }
.mlegend { display: flex; gap: 1.2em; font-size: .7em; color: #a39aa0; margin-top: .3em; }
.mlegend i { display: inline-block; width: 1.2em; height: .25em; border-radius: .2em; vertical-align: middle; margin-right: .4em; }
.mresult { margin-top: .6em; display: flex; align-items: center; gap: 1em; opacity: 0; transition: opacity .4s; }
.mresult.in { opacity: 1; }
.mresult b { font: 700 2em var(--display); color: #4ade80; }
.mresult span { font-size: .78em; color: #cfc8cc; }

/* Deshacer */
.mundo { display: grid; gap: .5em; margin-top: .4em; }
.mundo .mcard { display: flex; align-items: center; gap: .8em; padding: .65em .9em; transition: opacity .4s, transform .4s, max-height .4s, padding .4s, margin .4s; max-height: 6em; }
.mundo .mcard.gone { opacity: 0; transform: translateX(2em); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
.mundo .tile { width: 2em; height: 2em; border-radius: .5em; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #f3eef0; }
.mundo b { display: block; font: 600 .9em var(--display); }
.mundo small { color: #a39aa0; font-size: .7em; }
.mundo .mbtn { margin-left: auto; padding: .45em .9em; font-size: .72em; }
.mtoast { position: absolute; left: 50%; bottom: 1em; transform: translate(-50%, 1em); opacity: 0; padding: .55em 1em; border-radius: .6em; background: rgba(34, 197, 94, .16); border: 1px solid rgba(74, 222, 128, .5); color: #86efac; font-size: .8em; transition: all .35s; white-space: nowrap; }
.mtoast.in { opacity: 1; transform: translate(-50%, 0); }

/* Mini piezas de la galería (sin marco de ventana) */
.mini-stage { container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(70% 70% at 50% 40%, #2a2328, #0f0d0f); }
.mini { font: 400 3.4cqw/1.4 var(--body); color: #eee; position: absolute; inset: 0; padding: 6%; display: flex; flex-direction: column; justify-content: center; }
.mini .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.mini .gt { border-radius: .7em; padding: .7em .5em; text-align: center; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); transition: all .4s; }
.mini .gt .cv { width: 2.4em; height: 2.4em; border-radius: .6em; margin: 0 auto .4em; display: grid; place-items: center; font: 700 .9em var(--display); }
.mini .gt .cv { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .3em .8em -.3em rgba(0, 0, 0, .6); overflow: hidden; }
.mini .gt .cv svg { width: 62%; height: 62%; display: block; }
.mini .gt .cv .wm { font: 700 .62em/1 var(--display); letter-spacing: .04em; color: #fff; transform: skewX(-6deg); }
.mini .gt b { font: 600 .72em var(--display); display: block; }
.mini .gt em { font-style: normal; font-size: .55em; padding: .1em .45em; border-radius: .4em; border: 1px solid #8d8d93; color: #8d8d93; }
.mini .gt.play { border-color: #4ade80; box-shadow: 0 0 1.2em -.2em rgba(74, 222, 128, .7); }
.mini .gt.play em { border-color: #4ade80; color: #4ade80; }
.mini .xh { display: grid; place-items: center; height: 100%; }
.mini .xh svg { width: 46%; height: 46%; shape-rendering: crispEdges; }
.mini .xh .name { position: absolute; left: 6%; bottom: 6%; font: 600 .8em var(--display); }
.mini .xh .name small { display: block; font: 400 .7em var(--body); color: #a39aa0; }
.mini .pings { display: grid; gap: .45em; }
.mini .ping { display: grid; grid-template-columns: 6.5em 1fr 3em; gap: .6em; align-items: center; font-size: .75em; }
.mini .ping .bar { height: .45em; border-radius: .3em; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mini .ping .bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .7s cubic-bezier(.3, .8, .3, 1); }
.mini .ping b { text-align: right; font: 600 1em var(--display); }
.mini .risk { display: grid; gap: .45em; }
.mini .rk { display: flex; align-items: center; gap: .6em; font-size: .72em; padding: .5em .6em; border-radius: .55em; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.mini .rk .box { width: 1.1em; height: 1.1em; border-radius: .3em; border: 1.5px solid #8d8d93; display: grid; place-items: center; transition: all .25s; flex: none; }
.mini .rk.on .box { background: #f43f5e; border-color: #f43f5e; }
.mini .rk .box .mi { width: .8em; height: .8em; color: #fff; opacity: 0; stroke-width: 3; }
.mini .rk.on .box .mi { opacity: 1; }
.mini .rk .chip { margin-left: auto; font: 600 .8em var(--display); padding: .15em .5em; border-radius: .35em; border: 1px solid; }
.mini .ram { text-align: left; }
.mini .ram .big { font: 700 2.6em/1 var(--display); color: #ef4444; font-variant-numeric: tabular-nums; transition: color .4s; }
.mini .ram .track { height: .6em; border-radius: .3em; background: rgba(255, 255, 255, .08); margin: .6em 0 .3em; position: relative; }
.mini .ram .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #ef4444; box-shadow: 0 0 1em #ef4444; transition: width 1s, background .4s; }
.mini .ram .kit { position: absolute; top: -.4em; bottom: -.4em; width: 2px; background: #4ade80; }
.mini .ram p { margin: 0; font-size: .72em; color: #cfc8cc; }
.mini .slider { display: grid; grid-template-columns: 5.5em 1fr 2em; align-items: center; gap: .6em; font-size: .72em; margin-top: .3em; }
.mini .slider .t { height: .3em; border-radius: .2em; background: rgba(255, 255, 255, .1); position: relative; }
.mini .slider .t i { position: absolute; left: 0; top: 0; bottom: 0; background: #f43f5e; border-radius: inherit; }
.mini .slider .t b { position: absolute; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; background: #fff; border: 2px solid #f43f5e; }
.mini .creator { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1em; align-items: center; }
.mini .creator .pv { aspect-ratio: 1; border-radius: .8em; background: linear-gradient(180deg, #c9a872, #7a5b36); display: grid; place-items: center; }
.mini .creator .pv svg { width: 60%; height: 60%; shape-rendering: crispEdges; }

@media (prefers-reduced-motion: reduce) {
  .mshield svg, .mrow.run .st { animation: none; }
}