/* ============================================================
   LEVELIN: Perro Loco Bot — page-only styles (game cabinet, HUD,
   touch controls, how-to grid, fallback). Loaded ONLY on
   /levelin-game/. Relies on cyberpunk.css design tokens.
   ============================================================ */

/* --- Cabinet --------------------------------------------------- */
.lvl-cabinet-section .section-inner { max-width: 1100px; }

.lvl-cabinet {
    max-width: 980px;
    margin: 0 auto;
    background: #050811;
    border: 1px solid var(--c-line-2);
    padding: clamp(.6rem, 1.6vw, 1.1rem);
    /* angular cyber frame */
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: 0 0 0 1px rgba(184, 255, 46, .12), 0 24px 60px -30px rgba(0, 0, 0, .9);
}

.lvl-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;      /* reserves height → no CLS */
    background: #050811;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, .25);
    touch-action: none;        /* prevent scroll/zoom while playing */
}

#levelin-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #050811;
    cursor: crosshair;
}

#levelin-hud { position: absolute; inset: 0; pointer-events: none; }

/* --- Fullscreen ------------------------------------------------
   The cabinet enters the browser's top layer (fills the screen). The default
   .lvl-screen (aspect-ratio:16/9 + width:100%) computed a height TALLER than a
   non-16:9 screen and overflowed — that was the broken fullscreen. Instead we
   centre a 16:9 screen sized to the LARGEST that fits the viewport, so the
   fixed 480x270 playfield scales up 1:1 (pillar/letter-boxed with black bars on
   odd aspect ratios) — arcade-correct and identical on the common 16:9 display.
   A JS-toggled class is used instead of :fullscreen/:-webkit-full-screen so one
   rule set covers every engine. */
.lvl-cabinet.is-fullscreen {
    position: fixed;   /* redundant with the FS top layer, but keeps centring
                          correct regardless of page flow / UA quirks */
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #000;
    clip-path: none;
    box-shadow: none;
    border: 0;
    /* neutralise the GSAP .reveal transform/opacity (see is-immersive) so a
       tap during the 0.7s reveal can't leave the fullscreen view offset/faded */
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto;
}
.lvl-cabinet.is-fullscreen .lvl-screen {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    aspect-ratio: 16 / 9;
    max-width: none;
    border: 0;
}
.lvl-cabinet.is-fullscreen .lvl-controls {
    position: fixed;
    right: 12px;
    bottom: 10px;
    width: auto;
    margin: 0;
    gap: .5rem;
    z-index: 5;
    background: rgba(5, 8, 17, .55);
    padding: .35rem .5rem;
    border-radius: 10px;
}
.lvl-cabinet.is-fullscreen #levelin-start { display: none; }  /* not needed mid-fullscreen */

/* --- Immersive mobile mode (touch) -----------------------------
   Entered when a touch player taps JUGAR. Turns the cabinet into a
   full-viewport black stage. On Android we ALSO request native fullscreen
   + orientation.lock('landscape') (see boot.js), so the OS genuinely
   rotates and the (orientation:portrait) rule below never applies. On iOS
   — where neither the Fullscreen API on arbitrary elements nor orientation
   lock exist — this fixed overlay + the CSS 90deg rotation present the game
   in landscape anyway, filling the screen; the moment the player turns the
   phone to landscape the media query flips and the rotation drops to a
   native, upright landscape. */
.lvl-cabinet.is-immersive {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #000;
    clip-path: none;
    box-shadow: none;
    border: 0;
    /* The cabinet is a GSAP .reveal element: neutralise its scroll-reveal
       transform/opacity so this overlay is always solid and correctly placed.
       A leftover transform on the element also makes position:fixed offset,
       and a mid-reveal opacity<1 would let the page show through — this is the
       ONLY path that has no native fullscreen top-layer to mask those. */
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto;
}
.lvl-cabinet.is-immersive .lvl-screen {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    aspect-ratio: 16 / 9;
    max-width: none;
    border: 0;
}
/* Portrait phone that could NOT be OS-rotated (iOS): rotate the game view
   90deg so it presents landscape and fills the viewport. The engine measures
   the canvas via clientWidth/Height, which stays correct under this rotation. */
@media (orientation: portrait) {
    .lvl-cabinet.is-immersive .lvl-screen {
        position: absolute;
        top: 0;
        left: 100%;              /* = 100vw of the fixed cabinet */
        width: 100vh;
        height: 100vw;
        aspect-ratio: auto;
        transform: rotate(90deg);
        transform-origin: top left;
    }
}
.lvl-cabinet.is-immersive #levelin-start { display: none; }
/* Utility buttons (pause/mute/fullscreen) → TOP-CENTRE. The bottom corners
   belong to the thumb pads and the top corners to the on-canvas HUD (hearts
   top-left, score top-right), so centre-top is the only strip that collides
   with neither. bottom/right reset so this fully overrides the .is-fullscreen
   bottom-right rule when BOTH classes are on (Android native-FS + immersive). */
.lvl-cabinet.is-immersive .lvl-controls {
    position: fixed;
    top: 6px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: auto;
    margin: 0;
    gap: .4rem;
    z-index: 10000;
    background: rgba(5, 8, 17, .55);
    padding: .3rem .45rem;
    border-radius: 10px;
}
/* Exit-immersive button — only shown while immersive (iOS has no Esc key). */
#levelin-exit {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
    min-width: 40px;
    min-height: 40px;
    padding: 0 .55rem;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 17, .6);
    color: var(--c-fg);
    border: 1px solid rgba(234, 240, 255, .4);
    border-radius: 8px;
    font-family: var(--f-mono);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Exit sits at top-centre too, just left of the utility bar — keeps it off the
   top-left hearts HUD (a real phone fills the screen with no letterbox pillar
   to hide it in). The offset clears the ~166px-wide centred util bar. */
.lvl-cabinet.is-immersive #levelin-exit {
    display: inline-flex;
    top: 6px;
    left: auto;
    right: calc(50% + 92px);
}

/* Lock page scroll behind the immersive overlay (esp. iOS, no native FS). */
html.lvl-immersive-lock, html.lvl-immersive-lock body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

/* --- Controls bar ---------------------------------------------- */
.lvl-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .85rem;
    flex-wrap: wrap;
}
.lvl-controls-spacer { flex: 1 1 auto; }

#levelin-start { padding: .7rem 1.4rem; }

/* Control keys: physical dark "arcade cabinet" keys — clearly visible at rest
   (dark bevel + bright glyph), neon-lit + lifted on hover, lit in state
   colours when active. (Were transparent w/ a faint 14%-alpha border, so they
   read as invisible until hovered.) */
.lvl-ctl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .7rem;
    background: linear-gradient(180deg, var(--c-bg-3), var(--c-bg));
    color: var(--c-fg);
    border: 1px solid rgba(234, 240, 255, .3);
    border-radius: 6px;
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(234, 240, 255, .08);
    transition: transform .14s var(--ease), border-color .2s var(--ease),
        color .2s var(--ease), box-shadow .2s var(--ease);
}
.lvl-ctl:hover {
    border-color: var(--c-lime);
    color: var(--c-lime);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--c-lime), 0 0 14px rgba(184, 255, 46, .5),
        0 3px 0 rgba(0, 0, 0, .55);
}
.lvl-ctl:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.lvl-ctl[aria-pressed="true"] {
    border-color: var(--c-cyan);
    color: var(--c-cyan);
    box-shadow: 0 0 0 1px var(--c-cyan), 0 0 12px rgba(0, 229, 255, .45),
        0 2px 0 rgba(0, 0, 0, .55);
}
.lvl-ctl.is-muted {
    border-color: var(--c-red);
    color: var(--c-red);
    box-shadow: 0 0 0 1px var(--c-red), 0 0 12px rgba(255, 45, 85, .45),
        0 2px 0 rgba(0, 0, 0, .55);
}
.lvl-ctl:focus-visible,
.lvl-act:focus-visible,
#levelin-start:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

/* --- Touch controls (revealed by boot on touch devices) --------
   Premium mobile-shooter layout. LEFT: a floating 8-way virtual stick —
   the whole left zone is touchable and the stick re-centres under the
   finger (levelin-boot.js), so diagonals are a thumb-roll, not a
   two-button chord. RIGHT: an action arc anchored on a big FIRE button
   with JUMP above and BOMB beside it, lifted off the screen edge
   (+ safe-area) so thumbs never fight the bezel. Sized in vmin so the
   pads stay consistent whether the view is native landscape or the
   CSS-rotated portrait of immersive mode. */
#levelin-touch {
    /* theme-independent neons: the pads float over the always-dark game
       screen, but the site's light theme remaps --c-cyan/--c-fg to
       near-black — never inherit those here. */
    --tc-lime: #B8FF2E;
    --tc-cyan: #3DE8FF;
    --tc-orange: #FFA733;
    --pad-fire: clamp(68px, 16vmin, 100px);
    --pad-sec: clamp(54px, 12.5vmin, 78px);
    --pad-gap: clamp(8px, 2vmin, 16px);
    --pad-lift: calc(clamp(18px, 5.5vmin, 38px) + env(safe-area-inset-bottom, 0px));
    --stick-size: clamp(104px, 26vmin, 152px);
    position: absolute;
    inset: 0;
    pointer-events: none;       /* stick zone + buttons re-enable */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    z-index: 3;
}
#levelin-touch[hidden] { display: none; }

/* left = floating stick zone (invisible; hosts the stick) */
.lvl-stick-zone {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    height: 76%;
    pointer-events: auto;
    touch-action: none;
}
.lvl-stick {
    position: absolute;
    /* dock (rest) position — bottom-left thumb arc */
    left: calc(clamp(16px, 4.5vmin, 32px) + env(safe-area-inset-left, 0px));
    bottom: var(--pad-lift);
    width: var(--stick-size);
    height: var(--stick-size);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 8, 17, .3) 34%, rgba(5, 8, 17, .72) 100%);
    border: 2px solid rgba(184, 255, 46, .38);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 0 6px rgba(5, 8, 17, .22);
    backdrop-filter: blur(3px);
    opacity: .6;
    transition: opacity .25s ease;
}
.lvl-stick.is-live { opacity: 1; border-color: rgba(184, 255, 46, .8); }
/* rim chevrons — light up per active direction (both on a diagonal) */
.lvl-stick-tick {
    position: absolute;
    width: 11%;
    height: 11%;
    border-top: 3px solid rgba(184, 255, 46, .45);
    border-right: 3px solid rgba(184, 255, 46, .45);
    transition: border-color .1s ease;
}
.lvl-stick-tick-u { top: 6%; left: 50%; transform: translateX(-50%) rotate(-45deg); }
.lvl-stick-tick-r { right: 6%; top: 50%; transform: translateY(-50%) rotate(45deg); }
.lvl-stick-tick-d { bottom: 6%; left: 50%; transform: translateX(-50%) rotate(135deg); }
.lvl-stick-tick-l { left: 6%; top: 50%; transform: translateY(-50%) rotate(-135deg); }
.lvl-stick.dir-u .lvl-stick-tick-u,
.lvl-stick.dir-r .lvl-stick-tick-r,
.lvl-stick.dir-d .lvl-stick-tick-d,
.lvl-stick.dir-l .lvl-stick-tick-l {
    border-color: var(--tc-lime);
    filter: drop-shadow(0 0 6px rgba(184, 255, 46, .9));
}
.lvl-stick-knob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44%;
    height: 44%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #e9ffb0, var(--tc-lime) 48%, #5f9400 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .55), 0 0 18px rgba(184, 255, 46, .35),
        inset 0 -4px 8px rgba(0, 0, 0, .35);
    transition: transform .16s ease-out;
    will-change: transform;
}
.lvl-stick.is-live .lvl-stick-knob { transition: none; }

/* right = action arc:      JUMP
                       BOMB FIRE  */
.lvl-touch-actions {
    position: absolute;
    right: calc(clamp(12px, 3.5vmin, 26px) + env(safe-area-inset-right, 0px));
    bottom: var(--pad-lift);
    width: calc(var(--pad-fire) + var(--pad-sec) + var(--pad-gap));
    height: calc(var(--pad-fire) + var(--pad-sec) + var(--pad-gap));
    pointer-events: none;       /* buttons re-enable */
}
.lvl-act {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, .5vmin, 4px);
    width: var(--pad-sec);
    height: var(--pad-sec);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, rgba(18, 26, 48, .92), rgba(5, 8, 17, .88));
    border: 2px solid;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .08),
        inset 0 -4px 10px rgba(0, 0, 0, .45);
    transition: transform .08s ease, box-shadow .08s ease;
}
.lvl-act svg { width: 40%; height: 40%; display: block; filter: drop-shadow(0 0 5px currentColor); }
.lvl-act-tag {
    font-size: clamp(9px, 2.2vmin, 13px);
    letter-spacing: .12em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.lvl-act:active {
    transform: scale(.92);
    box-shadow: 0 0 22px currentColor, inset 0 0 14px rgba(0, 0, 0, .4);
}
.lvl-act-fire {
    right: 0;
    bottom: 0;
    width: var(--pad-fire);
    height: var(--pad-fire);
    color: #ff667f;
    border-color: rgba(255, 45, 85, .85);
}
.lvl-act-fire .lvl-act-tag { color: #fff; }
.lvl-act-jump {
    right: calc(var(--pad-fire) * .3);
    bottom: calc(var(--pad-fire) + var(--pad-gap));
    color: var(--tc-cyan);
    border-color: rgba(0, 229, 255, .8);
}
.lvl-act-bomb {
    right: calc(var(--pad-fire) + var(--pad-gap));
    bottom: calc(var(--pad-fire) * .24);
    color: var(--tc-orange);
    border-color: rgba(255, 159, 28, .8);
}

/* --- Fallback (no canvas / strong reduced-motion) -------------- */
#levelin-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    background: #050811;
    color: var(--c-fg);
}
#levelin-fallback[hidden] { display: none; }
.lvl-fb-title { font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; color: var(--c-lime); margin: 0; font-size: clamp(1.1rem, 3vw, 1.6rem); }
.lvl-fb-body { color: rgba(234, 240, 255, .72); max-width: 46ch; margin: 0; font-size: .95rem; }
.lvl-fb-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* --- How to play grid ------------------------------------------ */
.lvl-howto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.lvl-howto-col {
    background: var(--c-bg-2);
    border: 1px solid var(--c-line);
    padding: 1.4rem;
}
.lvl-howto-col .k {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-cyan);
    margin-bottom: .8rem;
}
.lvl-howto-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.lvl-howto-col li { font-size: .9rem; color: rgba(234, 240, 255, .82); }
body[data-theme="light"] .lvl-howto-col li { color: #1a1a1a; }
.lvl-howto-col .key {
    display: inline-block;
    min-width: 1.5em;
    padding: .05em .4em;
    text-align: center;
    font-family: var(--f-mono);
    font-size: .8em;
    border: 1px solid var(--c-line-2);
    border-radius: 3px;
    background: rgba(234, 240, 255, .04);
}
body[data-theme="light"] .lvl-howto-col .key { background: rgba(10, 10, 10, .04); }

/* --- End screen (win / game over CTA overlay) ------------------ */
#levelin-endscreen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 5;
}
#levelin-endscreen[hidden] { display: none; }
.lvl-end-card {
    text-align: center;
    max-width: 92%;
    background: rgba(5, 8, 17, .82);
    border: 1px solid var(--c-line-2);
    padding: clamp(1rem, 3vw, 1.5rem);
    backdrop-filter: blur(2px);
}
.lvl-end-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2.1rem); letter-spacing: .05em; color: var(--c-lime); text-transform: uppercase; }
.lvl-end-body { color: rgba(234, 240, 255, .82); font-size: .85rem; line-height: 1.5; margin: .55rem auto .35rem; max-width: 34ch; }
.lvl-end-score { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--c-cyan); margin-bottom: 1rem; }
.lvl-end-actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.lvl-end-actions .btn { font-size: .78rem; padding: .55rem 1rem; }

/* --- Orientation hint (portrait on touch) ---------------------- */
.lvl-rotate-hint {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: rgba(5, 8, 17, .82);
    color: var(--c-fg);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    z-index: 4;
    pointer-events: none;
}

/* --- Briefing: lore + fighting-game roster selector ------------ */
.lvl-lore { margin-bottom: 1.6rem; }
.lvl-lore .h-lead b { color: var(--c-lime); font-weight: 700; }
body[data-theme="light"] .lvl-lore .h-lead b { color: #0a6b16; }

.lvl-roster-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.lvl-roster-head .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--c-cyan); text-transform: uppercase; }
.lvl-roster-head .stamp { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--c-fg); border: 1px solid var(--c-line-2); padding: .1em .5em; opacity: .7; }

.lvl-roster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }

/* the roster grid of portrait tiles (the "select your fighter" board) */
.lvl-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .5rem; }
.lvl-char {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .3rem .2rem .35rem; cursor: pointer; color: inherit;
    background: var(--c-bg-2, rgba(255, 255, 255, .03));
    border: 1px solid var(--c-line-2); border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.lvl-char img { width: 100%; max-width: 52px; height: auto; image-rendering: pixelated; display: block; }
.lvl-char-name { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(234, 240, 255, .72); text-align: center; line-height: 1.1; }
body[data-theme="light"] .lvl-char-name { color: rgba(10, 10, 10, .7); }
.lvl-char:hover { border-color: var(--c-cyan); transform: translateY(-2px); }
.lvl-char:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.lvl-char[aria-selected="true"] {
    border-color: var(--c-lime);
    box-shadow: 0 0 0 1px var(--c-lime), 0 0 14px rgba(184, 255, 46, .35);
    background: rgba(184, 255, 46, .08);
}
.lvl-char[aria-selected="true"] .lvl-char-name { color: var(--c-lime); }

/* role accent per fighter type (data-role drives the left ribbon color) */
.lvl-char[data-role="hero"]::before,
.lvl-char[data-role="aliado"]::before,
.lvl-char[data-role="boss"]::before,
.lvl-char[data-role="mini"]::before,
.lvl-char[data-role="aibro"]::before,
.lvl-char[data-role="minion"]::before {
    content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
}
.lvl-char[data-role="hero"]::before { background: var(--c-lime); }
.lvl-char[data-role="aliado"]::before { background: #EAFBFF; }
.lvl-char[data-role="boss"]::before { background: var(--c-red); }
.lvl-char[data-role="mini"]::before { background: #FF6FB5; }
.lvl-char[data-role="aibro"]::before { background: #A855F7; }
.lvl-char[data-role="minion"]::before { background: var(--c-cyan); }

/* the focused-fighter detail panel */
.lvl-char-detail {
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; align-items: center;
    background: rgba(5, 8, 17, .55); border: 1px solid var(--c-line-2); padding: 1rem;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: sticky; top: 1rem;
}
body[data-theme="light"] .lvl-char-detail { background: rgba(255, 255, 255, .55); }
.lvl-char-portrait { position: relative; background: radial-gradient(circle at 50% 40%, rgba(0, 229, 255, .12), transparent 70%); border: 1px solid var(--c-line-2); padding: .4rem; }
.lvl-char-portrait img { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.lvl-char-tag { display: inline-block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: .12em .55em; border: 1px solid currentColor; margin-bottom: .5rem; }
.lvl-char-tag[data-role="hero"] { color: var(--c-lime); }
.lvl-char-tag[data-role="aliado"] { color: #EAFBFF; }
.lvl-char-tag[data-role="boss"] { color: var(--c-red); }
.lvl-char-tag[data-role="mini"] { color: #FF6FB5; }
.lvl-char-tag[data-role="aibro"] { color: #C084FC; }
.lvl-char-tag[data-role="minion"] { color: var(--c-cyan); }
.lvl-char-detail h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: .03em; font-size: clamp(1.1rem, 2.6vw, 1.5rem); margin: 0 0 .4rem; color: var(--c-fg); }
.lvl-char-desc { font-size: .9rem; line-height: 1.5; color: rgba(234, 240, 255, .82); margin: 0; }
body[data-theme="light"] .lvl-char-desc { color: #2a2a2a; }

/* --- Responsive ------------------------------------------------ */
@media (max-width: 768px) {
    .lvl-howto { grid-template-columns: 1fr; }
    .lvl-cabinet { padding: .5rem; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
    .lvl-roster { grid-template-columns: 1fr; }
    .lvl-char-detail { position: static; grid-template-columns: 96px minmax(0, 1fr); order: -1; }
}

/* --- Reduced motion: neutralise any CSS transitions here ------- */
@media (prefers-reduced-motion: reduce) {
    .lvl-ctl, .lvl-act, .lvl-stick, .lvl-stick-knob, .lvl-stick-tick, #levelin-start { transition: none; }
}