:root {
    --clr-green: #45ff88;
    --clr-green-dim: #1f8a4f;
    --clr-green-glow: rgba(69, 255, 136, 0.18);
    --clr-amber: #ffc857;
    --clr-red: #ff5c70;
    --clr-cyan: #5de7ff;
    --clr-blue: #6aa9ff;
    --clr-white: #d9e7ea;
    --clr-muted: #7c8f96;
    --clr-panel: rgba(5, 13, 15, 0.86);
    --clr-panel-strong: rgba(8, 19, 22, 0.96);
    --clr-border: rgba(93, 231, 255, 0.26);
    --font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --font-display: 'VT323', monospace;
    --terminal-radius: 8px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-mono);
    color: var(--clr-green);
    background:
        radial-gradient(circle at 18% 20%, rgba(93, 231, 255, 0.08), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(255, 200, 87, 0.06), transparent 30%),
        linear-gradient(145deg, #0c1114 0%, #030506 100%);
    touch-action: none;
}

body {
    display: grid;
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) minmax(240px, 300px);
    gap: clamp(10px, 1.4vw, 24px);
    align-items: center;
    padding: clamp(8px, 1.2vw, 18px);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

button,
a {
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}

button {
    -webkit-tap-highlight-color: transparent;
}

input,
textarea,
#terminal-output {
    -webkit-user-select: text;
    user-select: text;
}

.hidden {
    display: none !important;
}

.monitor-frame {
    position: relative;
    width: min(100%, calc(96vh * 1.5));
    max-height: 96vh;
    aspect-ratio: 1152 / 768;
    justify-self: center;
    background: linear-gradient(145deg, #161b1f, #080b0d);
    border: 2px solid #2b3438;
    border-radius: 14px;
    padding: 7px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.72),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#screen-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #020405;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.82);
}

#screen-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.08) 2px 4px);
    mix-blend-mode: soft-light;
}

#game-container,
#game-container canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.side-panel {
    height: min(96vh, 860px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(7, 18, 20, 0.92), rgba(4, 10, 12, 0.86));
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 24px rgba(69, 255, 136, 0.08);
}

.side-panel::-webkit-scrollbar,
#terminal-output::-webkit-scrollbar {
    width: 6px;
}

.side-panel::-webkit-scrollbar-thumb,
#terminal-output::-webkit-scrollbar-thumb {
    background: rgba(93, 231, 255, 0.35);
    border-radius: 4px;
}

.panel-title {
    margin: 0 0 14px;
    color: var(--clr-cyan);
    font-family: var(--font-display);
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1;
    border-bottom: 1px solid rgba(93, 231, 255, 0.18);
    padding-bottom: 8px;
    text-shadow: 0 0 14px rgba(93, 231, 255, 0.28);
}

.mt-4 {
    margin-top: 28px;
}

.panel-content p,
.panel-list li,
.control-item {
    font-size: 13px;
    line-height: 1.5;
    color: var(--clr-white);
}

.system-card,
.tip-card {
    border: 1px solid rgba(69, 255, 136, 0.28);
    border-left: 3px solid var(--clr-green);
    background: rgba(69, 255, 136, 0.06);
    border-radius: 6px;
    padding: 10px;
}

.tip-card {
    border-color: rgba(255, 200, 87, 0.32);
    border-left-color: var(--clr-amber);
}

.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-list li {
    margin-bottom: 10px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.panel-list li.completed {
    color: var(--clr-green);
    transform: translateX(2px);
}

.badge,
.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 24px;
    color: #00130a;
    background: var(--clr-green);
    border-radius: 5px;
    padding: 2px 8px;
    font-weight: 700;
    box-shadow: 0 2px 0 var(--clr-green-dim);
}

.control-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 11px;
}

.control-item .key {
    color: #061012;
    background: var(--clr-cyan);
    box-shadow: 0 2px 0 #217787;
}

.console-controls {
    position: absolute;
    left: clamp(10px, 2vw, 24px);
    right: clamp(10px, 2vw, 24px);
    bottom: calc(clamp(10px, 2vw, 24px) + var(--safe-bottom));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2000;
}

.d-pad,
.action-buttons {
    pointer-events: auto;
    opacity: 0.52;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.d-pad:hover,
.action-buttons:hover,
.d-pad:focus-within,
.action-buttons:focus-within {
    opacity: 0.96;
}

.d-pad {
    display: grid;
    grid-template-columns: repeat(3, clamp(40px, 5.2vw, 52px));
    grid-template-rows: repeat(3, clamp(40px, 5.2vw, 52px));
}

.d-btn,
.d-pad-center {
    background: rgba(24, 31, 36, 0.88);
    border: 1px solid #070909;
    color: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 4px rgba(255, 255, 255, 0.08), 0 4px #050607;
}

.d-btn {
    cursor: pointer;
    font-size: 16px;
}

.d-btn.active,
.d-btn:active {
    transform: translateY(2px);
    color: var(--clr-green);
    background: rgba(20, 28, 30, 0.95);
    box-shadow: inset 0 2px rgba(0, 0, 0, 0.7), 0 2px #050607;
}

.d-btn.up { grid-column: 2; grid-row: 1; border-radius: 8px 8px 0 0; }
.d-btn.left { grid-column: 1; grid-row: 2; border-radius: 8px 0 0 8px; }
.d-btn.right { grid-column: 3; grid-row: 2; border-radius: 0 8px 8px 0; }
.d-btn.down { grid-column: 2; grid-row: 3; border-radius: 0 0 8px 8px; }
.d-pad-center { grid-column: 2; grid-row: 2; }

.a-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.a-btn {
    width: clamp(58px, 8vw, 74px);
    height: clamp(58px, 8vw, 74px);
    border-radius: 50%;
    border: 3px solid #151a1d;
    background: radial-gradient(circle at 32% 28%, #ff7b82, #9d1d2d 72%);
    color: rgba(255, 255, 255, 0.88);
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 6px #050607, inset 0 5px rgba(255, 255, 255, 0.23);
    cursor: pointer;
}

.a-btn.active,
.a-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px #050607, inset 0 6px rgba(0, 0, 0, 0.45);
}

#interaction-hint {
    position: absolute;
    top: clamp(72px, 8vw, 92px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    display: flex;
    gap: 7px;
    align-items: center;
    max-width: min(78vw, 360px);
    padding: 5px 11px;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--clr-white);
    background: rgba(0, 9, 10, 0.8);
    border: 1px solid rgba(69, 255, 136, 0.4);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(69, 255, 136, 0.28);
    animation: fadeInUp 0.24s ease;
}

.hint-text { font-size: 12.5px; }

.hint-key {
    color: #04100b;
    background: var(--clr-green);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

#notification-overlay {
    position: absolute;
    top: 62px;            /* under the top fabs, clear of the centered CTF pill */
    right: 14px;
    width: min(320px, calc(100% - 28px));
    z-index: 3500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

/* On touch/narrow screens the top row is busy (fabs + CTF pill) and the
   notifications used to stack right under the progress bar — move them to the
   bottom-centre, above the on-screen controls, so nothing overlaps. */
@media (max-width: 760px) {
    #notification-overlay {
        top: auto;
        right: auto;
        left: 50%;
        bottom: calc(190px + var(--safe-bottom));
        transform: translateX(-50%);
        align-items: center;
        width: min(340px, calc(100% - 24px));
    }
}

.notification-toast {
    color: var(--clr-green);
    background: var(--clr-panel-strong);
    border: 1px solid rgba(69, 255, 136, 0.3);
    border-left: 3px solid var(--clr-green);
    border-radius: 7px;
    padding: 10px 13px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
    animation: toastIn 0.22s ease;
}

.notification-toast.warning,
.notification-toast.warn {
    color: var(--clr-amber);
    border-left-color: var(--clr-amber);
}

.notification-toast.error,
.notification-toast.err {
    color: var(--clr-red);
    border-left-color: var(--clr-red);
}

.notification-toast.info {
    color: var(--clr-cyan);
    border-left-color: var(--clr-cyan);
}

.floating-fab {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2600;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(93, 231, 255, 0.45);
    color: var(--clr-cyan);
    background: rgba(5, 13, 15, 0.72);
    box-shadow: 0 0 16px rgba(93, 231, 255, 0.16);
    cursor: pointer;
}

/* Tutorial ? — always visible, top-left, green */
.tutorial-fab {
    font-weight: bold;
    border-color: rgba(69, 255, 136, 0.55);
    color: var(--clr-green);
    background: rgba(5, 20, 10, 0.9);
    box-shadow: 0 0 10px var(--clr-green-glow);
    transition: all 0.2s ease;
}

.tutorial-fab:hover {
    background: var(--clr-green);
    color: #000;
    box-shadow: 0 0 20px var(--clr-green);
}

/* Contact ✉ — always visible, top-right */
.contact-fab {
    left: auto;
    right: 16px;
    top: 16px;
    width: auto;
    min-width: 68px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--clr-amber);
    border-color: rgba(255, 200, 87, 0.55);
    background: rgba(21, 14, 5, 0.9);
    box-shadow: 0 0 10px rgba(255, 200, 87, 0.12);
    transition: all 0.2s ease;
}

.contact-fab:hover {
    background: var(--clr-amber);
    color: #000;
    box-shadow: 0 0 18px var(--clr-amber);
}

/* MENU — directly under the "?" fab (top-left column), label centered.
   Hidden on wide screens (desktop uses ESC). */
.pause-fab {
    left: 16px;
    right: auto;
    transform: none;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    width: auto;
    height: 34px;
    min-width: 66px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-amber);
    border-color: rgba(255, 200, 87, 0.45);
    background: rgba(21, 14, 5, 0.82);
}

/* Subtle compact pill — small, low-contrast, doesn't dominate the top of the
   scene. The clue chips are off the HUD (use the `clues` command / toasts). */
.ctf-progress {
    position: absolute;
    left: 50%;
    top: 10px;
    z-index: 2450;
    width: auto;
    max-width: calc(100% - 180px);
    transform: translateX(-50%);
    padding: 4px 12px 6px;
    border: 1px solid rgba(93, 231, 255, 0.16);
    border-radius: 999px;
    color: var(--clr-white);
    background: rgba(3, 9, 11, 0.5);
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0.82;
}

.ctf-progress-top,
.ctf-clue-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 10px;
}

.ctf-progress-top {
    font-weight: bold;
    font-size: 10.5px;
    letter-spacing: 0.03em;
    opacity: 0.92;
}

.ctf-progress-top strong {
    color: var(--clr-cyan);
}

/* Clue chips removed from the persistent HUD to keep it subtle. */
.ctf-clue-row { display: none; }

/* Keep the pill text inside the box — the label truncates, the count never shrinks. */
.ctf-progress-top { flex-wrap: nowrap; }
.ctf-progress-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctf-progress-top strong { flex-shrink: 0; }
.submit-hint-banner { white-space: normal; word-break: break-word; }

.ctf-progress-track {
    height: 3px;
    margin: 4px 0 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ctf-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--clr-cyan), var(--clr-green), var(--clr-amber));
    box-shadow: 0 0 12px rgba(69, 255, 136, 0.45);
    transition: width 0.28s ease;
}

.clue-chip {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 5px;
    color: var(--clr-muted);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.035);
}

.clue-chip.found {
    color: #03120b;
    border-color: rgba(69, 255, 136, 0.65);
    background: var(--clr-green);
}

.submit-hint-banner {
    font-size: 11px;
    color: var(--clr-amber);
    text-align: center;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 200, 87, 0.2);
    padding-top: 4px;
}

.tutorial-panel,
.pause-card {
    color: var(--clr-white);
    background:
        linear-gradient(180deg, rgba(10, 24, 28, 0.98), rgba(3, 8, 10, 0.97)),
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 4px);
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62), 0 0 28px rgba(69, 255, 136, 0.08);
}

.tutorial-panel {
    position: absolute;
    left: 16px;
    top: 62px;
    width: min(430px, calc(100% - 32px));
    padding: 14px;
    z-index: 3200;
}

.panel-topline,
.pause-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.panel-topline {
    color: var(--clr-cyan);
    margin-bottom: 12px;
}

.icon-btn {
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: var(--clr-white);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.tutorial-panel p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Info hub — opened by the "?" fab. Centered, scrollable overlay. */
.mobile-info-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100% - 28px));
    max-height: min(86%, 640px);
    overflow-y: auto;
    padding: 16px;
    z-index: 3600;
    color: var(--clr-white);
    background:
        linear-gradient(180deg, rgba(10, 24, 28, 0.98), rgba(3, 8, 10, 0.97)),
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 4px);
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(69, 255, 136, 0.1);
}

.mobile-info-grid { display: grid; gap: 12px; margin-top: 4px; }

.mobile-info-grid article {
    border-top: 1px solid rgba(93, 231, 255, 0.12);
    padding-top: 10px;
}

.mobile-info-grid article:first-child { border-top: 0; padding-top: 0; }

.mobile-info-grid h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--clr-cyan);
}

.mobile-info-grid p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--clr-white);
}

.mobile-info-grid .guide-actions { margin-top: 6px; }

/* The "Gira el móvil" suggestion is obsolete now that portrait fills the screen. */
.orientation-hint { display: none; }

/* Touch controls only make sense on touch devices. */
body.device-desktop .console-controls { display: none; }

.guide-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.guide-actions button,
.minigame-primary,
.choice-grid button {
    border: 2px solid var(--clr-cyan) !important;
    background: rgba(93, 231, 255, 0.15) !important;
    font-weight: bold;
    text-shadow: 0 0 5px var(--clr-cyan);
    box-shadow: 0 0 8px rgba(93, 231, 255, 0.2);
    min-height: 36px;
    border-radius: 6px;
    color: var(--clr-white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.guide-actions button:hover,
.minigame-primary:hover,
.choice-grid button:hover {
    border-color: var(--clr-green) !important;
    color: var(--clr-green) !important;
    box-shadow: 0 0 14px var(--clr-green);
}

.quick-command,
.terminal-guide button {
    border: 1px solid rgba(69, 255, 136, 0.35);
    border-radius: 5px;
    color: var(--clr-green);
    background: rgba(69, 255, 136, 0.08);
    cursor: pointer;
}

.pause-menu {
    position: absolute;
    inset: 0;
    z-index: 7000;
    display: grid;
    place-items: center;
    padding: 22px;
    background: radial-gradient(circle at 50% 45%, rgba(93, 231, 255, 0.08), rgba(0, 0, 0, 0.68));
    backdrop-filter: blur(3px);
}

.pause-card {
    width: min(580px, 100%);
    padding: clamp(16px, 3vw, 24px);
}

.pause-header h2 {
    margin: 0;
    color: var(--clr-green);
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 0.9;
}

.pause-eyebrow {
    color: var(--clr-cyan);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-grid {
    display: grid;
    gap: 12px;
    margin: 20px 0;
}

.settings-grid label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
    font-size: 13px;
}

input[type="range"] {
    accent-color: var(--clr-green);
}

.pause-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pause-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid rgba(93, 231, 255, 0.28);
    border-radius: 6px;
    color: var(--clr-white);
    background: rgba(255, 255, 255, 0.055);
    text-decoration: none;
    cursor: pointer;
}

.pause-actions button:hover {
    border-color: rgba(69, 255, 136, 0.5);
    color: var(--clr-green);
}

#terminal-ui {
    position: absolute;
    inset: 5%;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(2, 9, 10, 0.94);
    border: 1px solid rgba(69, 255, 136, 0.42);
    border-radius: var(--terminal-radius);
    box-shadow:
        0 0 0 1px rgba(69, 255, 136, 0.08),
        0 0 42px rgba(69, 255, 136, 0.16),
        0 22px 70px rgba(0, 0, 0, 0.82);
    animation: terminalOpen 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.terminal-chrome {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(5, 26, 20, 0.88);
    border-bottom: 1px solid rgba(69, 255, 136, 0.22);
}

.terminal-chrome-dots {
    display: flex;
    gap: 6px;
}

.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

.terminal-chrome-title {
    flex: 1;
    text-align: center;
    color: var(--clr-muted);
    font-size: 12px;
}

#terminal-close-btn {
    border: 0;
    color: var(--clr-muted);
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.terminal-helper,
.terminal-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(69, 255, 136, 0.1);
}

.quick-command {
    padding: 6px 9px;
    font-size: 12px;
}

.terminal-suggestions {
    color: var(--clr-muted);
    border-top: 1px solid rgba(69, 255, 136, 0.08);
    border-bottom: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

#terminal-output {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 8px;
    color: var(--clr-green);
    font-size: clamp(12px, 1.35vw, 15px);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(69, 255, 136, 0.16);
}

.prompt {
    color: var(--clr-green);
    white-space: nowrap;
    user-select: none;
    font-size: 14px;
}

.prompt-separator { color: var(--clr-muted); }
.prompt-path { color: var(--clr-cyan); }
.prompt-symbol { margin-right: 8px; color: var(--clr-green); }

#terminal-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--clr-white);
    background: transparent;
    caret-color: var(--clr-green);
    font-family: inherit;
    font-size: 14px;
}

.cursor-blink {
    width: 8px;
    height: 18px;
    margin-left: 3px;
    background: var(--clr-green);
    opacity: 0.75;
    animation: blink 0.95s steps(1) infinite;
}

.t-cmd { color: var(--clr-white); }
.t-info { color: var(--clr-green); }
.t-warn { color: var(--clr-amber); }
.t-err { color: var(--clr-red); }
.t-data { color: var(--clr-cyan); }
.t-dim { color: var(--clr-muted); }
.t-bold { color: var(--clr-green); font-weight: 700; }
.t-ascii {
    display: block;
    color: var(--clr-green);
    font-family: var(--font-display);
    font-size: clamp(14px, 4.4vw, 24px);
    line-height: 0.95;
    /* Never wrap the block art — wrapping turns it into garbage. It fits a phone
       at this size; if it ever can't, it scrolls within the output, not wraps. */
    white-space: pre;
    text-shadow: 0 0 12px rgba(69, 255, 136, 0.32);
}

.minigame-modal {
    position: absolute;
    inset: 0;
    z-index: 6900;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(3px);
}

.minigame-card {
    color: var(--clr-white);
    width: min(640px, 100%);
    max-height: min(86vh, 680px);
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(9, 21, 24, 0.98), rgba(3, 8, 10, 0.98));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.72), 0 0 28px rgba(93, 231, 255, 0.1);
}

#minigame-body h3,
#minigame-body h4 {
    margin: 0 0 10px;
    color: var(--clr-cyan);
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
}

#minigame-body p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
}

.notes-window,
.rack-console,
.laptop-desktop {
    display: grid;
    gap: 12px;
}

.notebook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(79, 48, 24, 0.8);
    border-radius: 8px;
    background: linear-gradient(90deg, #2b180e, #130a06 49%, #080403 50%, #2b180e);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55);
}

.notebook-page {
    position: relative;
    min-height: 330px;
    border: 0;
    border-radius: 0;
    color: #1c2a24;
    background:
        repeating-linear-gradient(to bottom, rgba(43, 82, 105, 0.16) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, #dbc79b, #c5ad7c);
    box-shadow: inset 0 0 22px rgba(64, 37, 15, 0.24);
    padding: 14px;
}

.notebook-page h3 {
    color: #243b33 !important;
}

.page-stitches {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, rgba(75, 35, 18, 0.55) 0 9px, transparent 9px 18px);
}

.hand-note {
    color: #28382f;
    font-family: var(--font-display);
    font-size: 24px !important;
    line-height: 1.05 !important;
}

/* El pingüino en formato ASCII mucho más limpio */
.ascii-tux {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.1;
    color: #28382f;
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
}

.credential-card,
.sticky-clue {
    border: 1px dashed rgba(52, 39, 24, 0.5);
    border-radius: 6px;
    padding: 10px;
    color: #142019;
    background: rgba(255, 244, 179, 0.75);
}

.credential-card {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.sticky-clue {
    margin-bottom: 12px;
    transform: rotate(-1.2deg);
    background: #f6d66a;
}

.single-page-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
}

.notebook-nav {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    margin-top: auto;
}

.copy-btn {
    margin-top: 10px;
    background: #243b33;
    color: var(--clr-green);
    border: 1px solid var(--clr-green);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
}

.copy-btn:hover {
    background: var(--clr-green);
    color: #000;
}

.os-window-theme {
    border: 1px solid #3a4850;
    background: #111619;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.os-titlebar {
    background: #1c2326;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2b353a;
}

.os-title {
    font-size: 12px;
    color: var(--clr-muted);
}

.os-controls {
    display: flex;
    gap: 5px;
}

.os-controls .c-dot {
    width: 8px;
    height: 8px;
    background: #4f5b60;
    border-radius: 50%;
}

.terminal-style-login {
    padding: 20px;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0;
}

.input-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-prompt {
    color: var(--clr-green);
    width: 80px;
}

.input-line input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 14px;
    flex: 1;
    border-bottom: 1px solid #2b353a;
}

.os-button {
    background: #1c2326;
    border: 1px solid var(--clr-cyan);
    color: var(--clr-cyan);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
}

.os-button:hover {
    background: var(--clr-cyan);
    color: #000;
}

/* ====== CSS FALTANTE: Minijuego Portátil (Certificaciones) ====== */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.os-action-btn {
    background: #1c2326;
    border: 1px solid var(--clr-muted);
    color: var(--clr-white);
    padding: 10px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    transition: all 0.2s;
    text-align: center;
}

.os-action-btn:hover {
    border-color: var(--clr-cyan);
    color: var(--clr-cyan);
    background: rgba(93, 231, 255, 0.1);
}

/* ====== CSS FALTANTE: Minijuego Rack (SIEM) ====== */
.siem-layout-theme {
    border: 1px solid #22332a;
    background: #060e10;
    padding: 15px;
    border-radius: 6px;
}

.siem-header-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.live-indicator {
    font-size: 11px;
    color: var(--clr-red);
    animation: blink 1s infinite steps(1);
}

.siem-log-terminal {
    background: #020607;
    border: 1px solid #14252a;
    padding: 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 15px;
    max-height: 70px;
    overflow-y: auto;
}

.alert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 15px 0;
}

.alert-card {
    background: #0d1518;
    border: 1px solid #1c2d33;
    border-left: 3px solid var(--clr-muted);
    padding: 10px 14px;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--clr-white);
}

.alert-card:hover {
    background: #121d22;
    border-color: var(--clr-cyan);
}

.alert-card.selected {
    border-color: var(--clr-green);
    border-left-color: var(--clr-green);
    background: rgba(69, 255, 136, 0.08);
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.alert-card strong {
    font-size: 14px;
    color: var(--clr-cyan);
}

.alert-card small {
    font-size: 11px;
    color: var(--clr-muted);
}

.crit-high { color: var(--clr-amber); }
.crit-crit { color: var(--clr-red); }
.crit-low { color: var(--clr-muted); }

.triage-btn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    font-weight: bold;
}

.trace-bar {
    height: 4px;
    background: #14252a;
    border-radius: 2px;
    margin: 10px 0;
    overflow: hidden;
}

.trace-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--clr-green);
    transition: width 0.3s ease;
}

#world-effect {
    position: absolute;
    inset: 0;
    z-index: 1800;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(69, 255, 136, 0.11), transparent 68%);
    animation: worldPulse 0.8s ease-out forwards;
}

@keyframes terminalOpen {
    from { opacity: 0; transform: scale(0.965); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate(-50%, 7px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes blink {
    50% { opacity: 0; }
}

@keyframes worldPulse {
    to { opacity: 0; }
}

/* ═══════════════════════════════════════════
   PRE-GAME SKILL CHECK OVERLAY
   ═══════════════════════════════════════════ */
.pregame-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 16px;
    background:
        radial-gradient(circle at 30% 30%, rgba(69, 255, 136, 0.07), transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(93, 231, 255, 0.05), transparent 40%),
        rgba(2, 6, 8, 0.96);
    backdrop-filter: blur(6px);
}

.pregame-card {
    width: min(580px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(9, 22, 26, 0.99), rgba(3, 8, 10, 0.99));
    box-shadow: 0 0 60px rgba(69, 255, 136, 0.1), 0 24px 80px rgba(0,0,0,0.75);
}

.pregame-logo-wrap {
    text-align: center;
    margin-bottom: 16px;
}

/* Intro narrativa — mensaje de Jaime estilo chat */
.pregame-intro {
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 12px 12px 12px 4px;
    background: rgba(69, 255, 136, 0.06);
    border: 1px solid rgba(69, 255, 136, 0.2);
}
.pregame-intro-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: bold;
    color: var(--clr-green);
    margin-bottom: 8px;
}
.pgi-avatar { font-size: 15px; }
.pregame-intro-msg {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--clr-white);
}
.pregame-intro-msg:last-child { margin-bottom: 0; }

.pregame-logo {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 64px);
    color: var(--clr-green);
    text-shadow: 0 0 28px rgba(69, 255, 136, 0.5);
    letter-spacing: 0.04em;
    line-height: 1;
}

.pregame-logo-sub {
    color: var(--clr-cyan);
    font-size: 13px;
    margin-top: 6px;
    letter-spacing: 0.06em;
}

/* Entry header: Jaime first (the product), DeckBreakout demoted to an eyebrow.
   Carries who/level/skills/intent so a recruiter gets the value in ~3s, even on
   mobile where the /QUIÉN_SOY side panel isn't shown. */
.pregame-eyebrow {
    font-family: var(--font-display);
    color: var(--clr-green);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(69, 255, 136, 0.4);
    margin-bottom: 12px;
}
.pregame-name {
    font-family: var(--font-display);
    font-size: clamp(30px, 5.6vw, 46px);
    color: var(--clr-white);
    line-height: 1.04;
    letter-spacing: 0.02em;
    margin: 0;
}
.pregame-role {
    color: var(--clr-cyan);
    font-size: clamp(13px, 2.6vw, 15px);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 8px;
}
.pregame-cred {
    color: var(--clr-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 6px;
}
.pregame-intent {
    color: var(--clr-green);
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 8px;
}

.pregame-title {
    margin: 0 0 6px;
    color: var(--clr-white);
    font-family: var(--font-display);
    font-size: 28px;
    text-align: center;
}

.pregame-desc {
    text-align: center;
    color: var(--clr-muted);
    font-size: 13px;
    margin: 0 0 20px;
}

.pregame-options {
    display: grid;
    gap: 10px;
}

.pregame-detected {
    text-align: center;
    margin: 16px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--clr-cyan);
    border: 1px dashed rgba(93, 231, 255, 0.3);
    border-radius: 8px;
    background: rgba(93, 231, 255, 0.06);
}

.pregame-option {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(93, 231, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--clr-white);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
}

.pregame-option:hover {
    border-color: var(--clr-green);
    background: rgba(69, 255, 136, 0.07);
    transform: translateX(3px);
}

.po-icon {
    font-size: 26px;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.po-title {
    font-size: 15px;
    font-family: var(--font-display);
    color: var(--clr-cyan);
    font-size: 20px;
    line-height: 1;
}

.po-desc {
    font-size: 12px;
    color: var(--clr-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════
   CONTACT MODAL
   ═══════════════════════════════════════════ */
.contact-modal {
    position: absolute;
    inset: 0;
    z-index: 8000;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
}

.contact-card {
    width: min(480px, 100%);
    padding: 20px;
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(9, 22, 26, 0.99), rgba(3, 8, 10, 0.99));
    box-shadow: 0 18px 60px rgba(0,0,0,0.7), 0 0 28px rgba(93, 231, 255, 0.08);
    color: var(--clr-white);
}

/* Contact modal: tab switch between "Mensaje" and "Solicitar CV". */
.contact-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 12px;
}
.contact-tab {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid rgba(93, 231, 255, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--clr-white);
    font-family: var(--font-mono);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.contact-tab:hover { border-color: rgba(93, 231, 255, 0.5); }
.contact-tab.active {
    background: rgba(93, 231, 255, 0.12);
    border-color: var(--clr-cyan);
    color: var(--clr-cyan);
    font-weight: bold;
}

.contact-form {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.contact-form input,
.contact-form textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(93, 231, 255, 0.22);
    border-radius: 6px;
    color: var(--clr-white);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    resize: vertical;
    transition: border-color 0.18s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--clr-cyan);
    background: rgba(93, 231, 255, 0.04);
}

.contact-form textarea {
    min-height: 90px;
}

/* ═══════════════════════════════════════════
   TERMINAL LINKS
   ═══════════════════════════════════════════ */
.t-link {
    color: var(--clr-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s;
}

.t-link:hover {
    color: var(--clr-green);
}

/* ═══════════════════════════════════════════
   NOTEBOOK MINIGAME — REDESIGN
   ═══════════════════════════════════════════ */
.notebook-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notebook-page {
    position: relative;
    min-height: 340px;
    background:
        repeating-linear-gradient(to bottom, rgba(43, 82, 105, 0.14) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, #d8c38a, #c9ae6e);
    color: #1a2b22;
    padding: 18px 20px;
    border-radius: 4px 4px 0 0;
    animation: pageFlipIn 0.25s ease;
    overflow: hidden;
}

@keyframes pageFlipIn {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.nb-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nb-header-stamp {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #243b33;
    background: rgba(36, 59, 51, 0.15);
    border: 1px dashed rgba(36, 59, 51, 0.4);
    padding: 4px 8px;
    border-radius: 3px;
    letter-spacing: 0.08em;
    display: inline-block;
    margin-bottom: 4px;
}

.nb-ascii-art {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.3;
    white-space: pre;
    letter-spacing: 0;
    color: #243b33;
    background: rgba(36, 59, 51, 0.08);
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid rgba(36, 59, 51, 0.3);
    margin: 4px 0;
    overflow-x: auto;
}

.nb-handwritten {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.1;
    color: #243b33;
    margin: 0;
}

.nb-crossed {
    text-decoration: line-through;
    opacity: 0.6;
}

.nb-doodle-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nb-small-art {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.2;
    white-space: pre;
    color: #243b33;
    background: rgba(36, 59, 51, 0.08);
    padding: 6px 8px;
    border-radius: 3px;
    margin: 0;
    flex: 1;
    min-width: 100px;
}

.nb-credential-box {
    background: rgba(255, 244, 190, 0.85);
    border: 1px dashed rgba(52, 39, 24, 0.55);
    border-radius: 6px;
    padding: 12px 14px;
    display: grid;
    gap: 6px;
}

.cred-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 13px;
    color: #142019;
}

.cred-label {
    min-width: 50px;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #3a2a10;
    font-weight: 700;
}

.cred-row code {
    font-family: var(--font-mono);
    background: rgba(36, 59, 51, 0.12);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 13px;
}

.nb-copy-btn {
    margin-top: 4px;
    background: #243b33;
    color: var(--clr-green);
    border: 1px solid var(--clr-green);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    justify-self: start;
}

.nb-copy-btn:hover {
    background: var(--clr-green);
    color: #000;
}

.nb-sticky-clue {
    background: #f5e04a;
    border-radius: 4px;
    padding: 14px 16px;
    transform: rotate(-1deg);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.2);
    text-align: center;
}

.sticky-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #3a2a10;
    font-weight: 700;
    margin-bottom: 4px;
}

.sticky-value {
    font-family: var(--font-display);
    font-size: 32px;
    color: #142019;
    line-height: 1;
}

.sticky-sub {
    font-size: 11px;
    color: #3a2a10;
    margin-top: 4px;
}

.nb-status-bar {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(36, 59, 51, 0.15);
    border-radius: 4px;
    font-size: 12px;
}

.nb-status-ok {
    color: #1a4a2a;
    font-weight: 700;
}

.notebook-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    /* Pinned to the bottom of the page so it's always reachable — no scrolling
       down a long note to find the next/prev buttons on mobile. */
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: linear-gradient(180deg, rgba(201, 174, 110, 0.4), #c9ae6e);
    border-radius: 0 0 6px 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 -6px 14px rgba(40, 28, 10, 0.18);
}

/* Solid, high-contrast buttons (the old faint outline read as "dark"/invisible). */
.nb-nav-btn {
    flex-shrink: 0;
    background: #2f5d4e;
    border: 1px solid #234a3e;
    color: #f4ecd8;
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, transform 0.08s;
}

.nb-nav-btn:hover:not(:disabled) {
    background: #3c7763;
}
.nb-nav-btn:active:not(:disabled) { transform: scale(0.96); }

.nb-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.nb-page-dots {
    display: flex;
    gap: 6px;
    font-size: 10px;
    color: rgba(36, 59, 51, 0.4);
}

.nb-page-dots .dot-active {
    color: #243b33;
}

/* ═══════════════════════════════════════════
   LAPTOP WIN98 STYLE MINIGAME
   ═══════════════════════════════════════════ */
.laptop-win98 {
    border: 2px solid #3a4a52;
    border-radius: 4px;
    overflow: hidden;
    background: #0d1419;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

.win98-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: linear-gradient(90deg, #1c3a4a, #0d2535);
    border-bottom: 1px solid #2a3a42;
    font-size: 12px;
}

.win98-icon { font-size: 14px; }

.win98-title {
    flex: 1;
    color: var(--clr-cyan);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.win98-btns {
    display: flex;
    gap: 4px;
    font-size: 11px;
    color: var(--clr-muted);
}

.win98-body {
    padding: 16px 18px;
}

.win98-terminal {
    background: #020507;
    border: 1px solid #14252a;
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 14px;
}

.win98-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.win98-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.win98-field label {
    color: var(--clr-green);
    font-size: 14px;
    min-width: 80px;
}

.win98-field input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(93, 231, 255, 0.3);
    outline: none;
    color: var(--clr-white);
    font-family: var(--font-mono);
    font-size: 14px;
    flex: 1;
    padding: 3px 4px;
}

.win98-btn-primary {
    margin-top: 8px;
    background: rgba(93, 231, 255, 0.1);
    border: 1px solid var(--clr-cyan);
    color: var(--clr-cyan);
    padding: 9px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    align-self: flex-start;
}

.win98-btn-primary:hover {
    background: var(--clr-cyan);
    color: #000;
}

/* Laptop terminal mode */
.win98-terminal-mode {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-output {
    background: #020507;
    border: 1px solid #14252a;
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    min-height: 180px;
    max-height: 240px;
    overflow-y: auto;
}

.lt-line {
    margin-bottom: 1px;
    white-space: pre-wrap;
    word-break: break-word;
}

.lt-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #020507;
    border: 1px solid rgba(93, 231, 255, 0.2);
    border-radius: 3px;
    padding: 6px 10px;
}

.lt-prompt, .lt-prompt-echo {
    color: var(--clr-green);
    white-space: nowrap;
    font-size: 12px;
    user-select: none;
}

.lt-input-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--clr-white);
    font-family: var(--font-mono);
    font-size: 13px;
    caret-color: var(--clr-green);
}

.lt-quickcmds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lt-qbtn {
    background: rgba(69, 255, 136, 0.07);
    border: 1px solid rgba(69, 255, 136, 0.25);
    color: var(--clr-green);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}

.lt-qbtn:hover {
    background: rgba(69, 255, 136, 0.18);
    border-color: var(--clr-green);
}

/* ═══════════════════════════════════════════
   SIEM PRO RACK MINIGAME
   ═══════════════════════════════════════════ */
.siem-pro {
    background: #060c0e;
    border: 1px solid rgba(69, 255, 136, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

.siem-pro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    background: rgba(5, 20, 15, 0.9);
    border-bottom: 1px solid rgba(69, 255, 136, 0.12);
    flex-wrap: wrap;
    gap: 8px;
}

.siem-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.siem-live-dot {
    color: var(--clr-red);
    animation: blink 1s steps(1) infinite;
    font-size: 10px;
}

.siem-live-label {
    font-size: 10px;
    color: var(--clr-red);
    letter-spacing: 0.1em;
}

.siem-title-text {
    font-size: 12px;
    color: var(--clr-cyan);
    letter-spacing: 0.04em;
}

.siem-header-right {
    display: flex;
    gap: 8px;
}

.siem-stat {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 700;
}

.siem-stat-red  { color: var(--clr-red);   background: rgba(255, 92, 112, 0.12); }
.siem-stat-amber{ color: var(--clr-amber);  background: rgba(255, 200, 87, 0.12); }
.siem-stat-dim  { color: var(--clr-muted);  background: rgba(255,255,255, 0.05); }

.siem-log-stream {
    background: #020507;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.55;
    max-height: 88px;
    overflow-y: auto;
    border-bottom: 1px solid rgba(69, 255, 136, 0.08);
}

.siem-log-line { margin-bottom: 1px; }

.siem-instructions {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--clr-white);
    border-bottom: 1px solid rgba(69, 255, 136, 0.08);
    margin: 0;
}

.siem-alert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
}

.siem-alert-card {
    background: rgba(8, 18, 22, 0.9);
    border: 1px solid rgba(69, 255, 136, 0.14);
    border-left: 3px solid rgba(69, 255, 136, 0.18);
    border-radius: 5px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.siem-alert-card:hover {
    border-color: rgba(93, 231, 255, 0.5);
    background: rgba(93, 231, 255, 0.04);
    transform: translateY(-1px);
}

.siem-alert-card.sac-selected {
    border-color: var(--clr-green);
    border-left-color: var(--clr-green);
    background: rgba(69, 255, 136, 0.08);
    box-shadow: 0 0 10px rgba(69, 255, 136, 0.15);
}

.sac-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 2px;
}

.sac-source { color: var(--clr-muted); }
.sac-sev { padding: 1px 4px; border-radius: 2px; font-size: 9px; }
.sac-crit  { color: var(--clr-red);   background: rgba(255,92,112,0.18); }
.sac-high  { color: var(--clr-amber); background: rgba(255,200,87,0.18); }
.sac-med   { color: var(--clr-cyan);  background: rgba(93,231,255,0.15); }
.sac-info  { color: var(--clr-muted); background: rgba(255,255,255,0.06); }

.sac-title {
    display: block;
    font-size: 13px;
    color: var(--clr-cyan);
    line-height: 1.2;
}

.sac-desc {
    font-size: 11px;
    color: var(--clr-muted);
    line-height: 1.3;
}

.sac-phase {
    font-size: 10px;
    color: rgba(69, 255, 136, 0.55);
    margin-top: 3px;
    letter-spacing: 0.03em;
}

.siem-chain-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(5, 20, 15, 0.5);
    font-size: 11px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(69, 255, 136, 0.08);
}

.chain-slot {
    color: var(--clr-muted);
    border: 1px dashed rgba(69, 255, 136, 0.2);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}

.chain-slot.chain-filled {
    color: var(--clr-green);
    border-color: rgba(69, 255, 136, 0.55);
    border-style: solid;
}

.chain-arrow {
    color: rgba(69, 255, 136, 0.4);
    font-size: 14px;
}

.siem-trace-bar {
    height: 4px;
    background: rgba(69, 255, 136, 0.08);
    margin: 0 14px;
    border-radius: 2px;
    overflow: hidden;
}

.siem-trace-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--clr-cyan), var(--clr-green));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.siem-triage-btn {
    width: calc(100% - 28px);
    margin: 10px 14px 14px;
    padding: 11px;
    border: 1px solid rgba(69, 255, 136, 0.35);
    background: rgba(69, 255, 136, 0.06);
    color: var(--clr-green);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.04em;
}

.siem-triage-btn:not(:disabled):hover {
    background: rgba(69, 255, 136, 0.16);
    border-color: var(--clr-green);
}

.siem-triage-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

#siem-result {
    padding: 0 14px 12px;
}

/* ═══════════════════════════════════════════
   TERMINAL GUIDE — IMPROVED FOR NON-TECH
   ═══════════════════════════════════════════ */
#terminal-guide {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(69, 255, 136, 0.1);
    background: rgba(5, 26, 20, 0.5);
}

#terminal-guide p {
    grid-column: 1 / -1;
    margin: 0 0 2px;
}

#terminal-guide button {
    border: 1px solid rgba(69, 255, 136, 0.3);
    border-radius: 5px;
    color: var(--clr-white);
    background: rgba(69, 255, 136, 0.06);
    cursor: pointer;
    padding: 8px 10px;
    /* Uniform across every guided button: same font, same size, same height —
       long labels wrap inside the fixed min-height instead of growing a button. */
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    transition: background 0.15s, border-color 0.15s;
}

#terminal-guide button:hover {
    background: rgba(69, 255, 136, 0.14);
    border-color: var(--clr-green);
    color: var(--clr-green);
}

/* ═══════════════════════════════════════════
   CONSOLE BRAND
   ═══════════════════════════════════════════ */
/* Centre the DeckBreakout brand on the screen regardless of the d-pad/action
   widths (the controls bar only renders on touch devices). */
.console-brand {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.console-brand span {
    font-family: var(--font-display);
    font-size: 18px;
    color: rgba(69, 255, 136, 0.55);
    letter-spacing: 0.06em;
    pointer-events: none;
}

@media (max-width: 1350px) {
    body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: auto;
        padding-bottom: 30px;
    }

    .monitor-frame {
        width: 100%;
        height: 50vh;
        min-height: 380px;
        max-height: 600px;
    }

    /* Side panels hidden on narrow — INFO button replaces them */
    .side-panel.left-panel,
    .side-panel.right-panel {
        display: none;
    }

    .console-controls {
        bottom: calc(10px + var(--safe-bottom));
        opacity: 0.85;
    }

    .pause-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 620px) {
    .monitor-frame {
        border-radius: 0;
        border: 0;
        min-height: 320px;
        padding: 0;
    }

    #screen-content { border-radius: 0; }

    /* Portrait phones: the game takes the WHOLE screen vertically. The body
       stops scrolling and the frame fills 100dvh; the Phaser camera fills the
       room to that height and pans sideways as the player walks. */
    @media (orientation: portrait) {
        html, body {
            height: 100dvh;
            overflow: hidden;
        }
        body {
            padding: 0;
            padding-bottom: 0;
            gap: 0;
        }
        .monitor-frame {
            width: 100%;
            height: 100dvh;
            min-height: 100dvh;
            max-height: 100dvh;
        }
    }

    #terminal-output {
        font-size: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .choice-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   WINDOWS XP LOGIN SCREEN
   ═══════════════════════════════════════════ */
.winxp-login-body {
    display: flex;
    min-height: 260px;
    background: linear-gradient(135deg, #1b4f9a 0%, #0d2b5e 100%);
}

.winxp-left-bar {
    width: 130px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #2a5fba, #1a3d80);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.winxp-brand-name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    letter-spacing: 0.05em;
    font-family: var(--font-display);
}

.winxp-login-area {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.winxp-instructions {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.winxp-user-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

.winxp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a7fd4, #2554a3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.winxp-username {
    color: white;
    font-size: 15px;
    font-family: var(--font-mono);
    display: block;
}

.winxp-role {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    margin: 2px 0 0;
}

.winxp-password-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.winxp-pass-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.winxp-pass-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.winxp-pass-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    color: white;
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.winxp-pass-input:focus {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.22);
}

.winxp-go-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    color: white;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.winxp-go-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.winxp-hint-ok  { color: #8df9a0; font-size: 11px; margin: 0; }
.winxp-hint-warn{ color: #ffd055; font-size: 11px; margin: 0; }

.winxp-bottom-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #1a3d80, #0d2b5e);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.winxp-power-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.winxp-footer-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

/* ═══════════════════════════════════════════
   WINDOWS DESKTOP + CMD TERMINAL
   ═══════════════════════════════════════════ */
.win-desktop-area {
    background: #1e3a5f;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 4px;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.win-cmd-window {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 2px solid #6a8fa8;
    border-top-color: #c4d6e4;
    border-left-color: #c4d6e4;
    overflow: hidden;
    min-height: 0;
}

.win-cmd-inner-title {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    padding: 3px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: white;
    flex-shrink: 0;
}

.win-cmd-btns-inner {
    display: flex;
    gap: 3px;
    font-size: 10px;
    color: rgba(255,255,255,0.75);
}

/* Override lt-output inside CMD for proper Windows look */
.win-cmd-output {
    background: #0c0c0c !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
}

.win-cmd-input-row {
    background: #0c0c0c;
    border-top: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.win-taskbar {
    background: linear-gradient(to bottom, #245daa 0%, #1a4c91 100%);
    height: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.win-start-btn {
    background: linear-gradient(to bottom, #4ea84e, #378837);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.win-taskbar-items {
    flex: 1;
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.win-taskbar-item {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 11px;
    padding: 3px 10px;
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.win-taskbar-active {
    background: rgba(0, 0, 0, 0.52);
    border-color: rgba(255, 255, 255, 0.4);
}

.win-systray {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Adjust laptop-win98 to flex-column so taskbar sits at bottom */
.laptop-win98 {
    display: flex;
    flex-direction: column;
}

.win98-body.win98-terminal-mode {
    flex: 1;
    min-height: 0;
}

@media (max-height: 500px) and (orientation: landscape) {
    body { overflow-y: hidden; padding: 0; }
    .monitor-frame { height: 100vh; min-height: unset; border-radius: 0; border: 0; }
    .side-panel { display: none; }
    .tutorial-panel {
        max-height: calc(100% - 76px);
        overflow: auto;
    }
    .d-pad {
        grid-template-columns: repeat(3, 38px);
        grid-template-rows: repeat(3, 38px);
    }
    .a-btn {
        width: 54px;
        height: 54px;
    }
    .ctf-progress {
        top: max(6px, env(safe-area-inset-top));
        width: min(260px, calc(100% - 178px));
        padding: 6px 8px;
    }
    .ctf-clue-row { display: none; }
    .minigame-card {
        max-height: calc(100dvh - 18px);
        padding: 12px;
    }
}

/* ═══════════════════════════════════════════
   UI POLISH — terminal shortcuts, scrollbars,
   pressed states (added v3.3)
   ═══════════════════════════════════════════ */

/* Inline command chips in the help/tutorial panel — were unstyled plain text. */
.terminal-shortcuts-hint {
    font-size: 12px;
    color: var(--clr-muted);
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.text-command {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--clr-green);
    background: rgba(69, 255, 136, 0.1);
    border: 1px solid rgba(69, 255, 136, 0.4);
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.text-command::before { content: "$ "; opacity: 0.55; }

.text-command:hover {
    background: rgba(69, 255, 136, 0.2);
    border-color: var(--clr-green);
    box-shadow: 0 0 8px rgba(69, 255, 136, 0.25);
}

.text-command:active { transform: translateY(1px); }

/* Quick commands in the terminal toolbar — bigger and clearly clickable. */
.quick-command {
    padding: 8px 13px;
    font-size: 13px;
    font-family: var(--font-mono);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}

.quick-command:hover {
    background: rgba(69, 255, 136, 0.2);
    border-color: var(--clr-green);
    color: var(--clr-white);
}

.quick-command:active { transform: translateY(1px); }

/* "Modo guiado" toggle — the prominent way in for non-typers. */
.quick-command.guide-toggle {
    background: rgba(93, 231, 255, 0.18);
    border: 1px solid var(--clr-cyan);
    color: var(--clr-cyan);
    font-weight: 700;
    padding: 8px 15px;
    box-shadow: 0 0 10px rgba(93, 231, 255, 0.22);
}

.quick-command.guide-toggle:hover {
    background: rgba(93, 231, 255, 0.3);
    color: var(--clr-white);
    box-shadow: 0 0 14px rgba(93, 231, 255, 0.4);
}

.quick-command.guide-toggle[aria-pressed="true"] {
    background: var(--clr-cyan);
    color: #04181c;
    box-shadow: 0 0 16px rgba(93, 231, 255, 0.5);
}

/* Themed scrollbars for every scroll area (were default browser bars). */
#terminal-output::-webkit-scrollbar,
.lt-output::-webkit-scrollbar,
.siem-log-stream::-webkit-scrollbar,
.siem-log-terminal::-webkit-scrollbar,
.minigame-card::-webkit-scrollbar,
.mobile-info-panel::-webkit-scrollbar,
.pause-card::-webkit-scrollbar,
.sniffer-table::-webkit-scrollbar,
.ldesktop-window::-webkit-scrollbar,
.readme-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#terminal-output::-webkit-scrollbar-track,
.lt-output::-webkit-scrollbar-track,
.siem-log-stream::-webkit-scrollbar-track,
.siem-log-terminal::-webkit-scrollbar-track,
.minigame-card::-webkit-scrollbar-track,
.mobile-info-panel::-webkit-scrollbar-track,
.pause-card::-webkit-scrollbar-track,
.sniffer-table::-webkit-scrollbar-track,
.ldesktop-window::-webkit-scrollbar-track,
.readme-body::-webkit-scrollbar-track {
    background: rgba(69, 255, 136, 0.04);
    border-radius: 4px;
}

#terminal-output::-webkit-scrollbar-thumb,
.lt-output::-webkit-scrollbar-thumb,
.siem-log-stream::-webkit-scrollbar-thumb,
.siem-log-terminal::-webkit-scrollbar-thumb,
.minigame-card::-webkit-scrollbar-thumb,
.mobile-info-panel::-webkit-scrollbar-thumb,
.pause-card::-webkit-scrollbar-thumb,
.sniffer-table::-webkit-scrollbar-thumb,
.ldesktop-window::-webkit-scrollbar-thumb,
.readme-body::-webkit-scrollbar-thumb {
    background: rgba(69, 255, 136, 0.3);
    border-radius: 4px;
}

#terminal-output::-webkit-scrollbar-thumb:hover,
.lt-output::-webkit-scrollbar-thumb:hover,
.siem-log-stream::-webkit-scrollbar-thumb:hover,
.siem-log-terminal::-webkit-scrollbar-thumb:hover,
.minigame-card::-webkit-scrollbar-thumb:hover,
.mobile-info-panel::-webkit-scrollbar-thumb:hover,
.pause-card::-webkit-scrollbar-thumb:hover,
.sniffer-table::-webkit-scrollbar-thumb:hover,
.ldesktop-window::-webkit-scrollbar-thumb:hover,
.readme-body::-webkit-scrollbar-thumb:hover {
    background: rgba(69, 255, 136, 0.55);
}

.lt-output,
.siem-log-stream,
.siem-log-terminal,
.minigame-card,
.mobile-info-panel,
.pause-card,
.sniffer-table,
.ldesktop-window,
.readme-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(69, 255, 136, 0.35) rgba(69, 255, 136, 0.04);
}

/* Pressed feedback for minigame buttons (they already had hover). */
.lt-qbtn:active,
.siem-triage-btn:not(:disabled):active,
.guide-actions button:active,
.minigame-primary:active,
.choice-grid button:active { transform: translateY(1px); }

.siem-alert-card:active { transform: translateY(0); }

/* ═══════════════════════════════════════════
   LAPTOP INTERACTIVE DESKTOP (minijuego portátil v2)
   ═══════════════════════════════════════════ */
.ldesktop {
    display: flex;
    flex-direction: column;
    height: min(70vh, 560px);
    min-height: 340px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(93, 231, 255, 0.25);
    background: #07101a;
    font-family: var(--font-mono);
}

.ldesktop-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--clr-cyan);
    background: linear-gradient(180deg, #0b2030, #061018);
    border-bottom: 1px solid rgba(93, 231, 255, 0.18);
}
.ldesktop-os { font-weight: bold; }
.ldesktop-sep { opacity: 0.4; }
.ldesktop-net { margin-left: auto; color: var(--clr-green); font-size: 11px; }

.ldesktop-screen {
    flex: 1;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    padding: 10px;
    min-height: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(93, 231, 255, 0.08), transparent 40%),
        radial-gradient(circle at 80% 82%, rgba(69, 255, 136, 0.06), transparent 42%),
        linear-gradient(160deg, #08141d, #04090d);
}

.ldesktop-icons { display: flex; flex-direction: column; gap: 12px; }
.ldesktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--clr-white);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ldesktop-icon:hover { background: rgba(93, 231, 255, 0.1); border-color: rgba(93, 231, 255, 0.3); }
.ldesktop-icon.icon-active { background: rgba(93, 231, 255, 0.16); border-color: rgba(93, 231, 255, 0.5); }
.ldi-glyph { font-size: 28px; line-height: 1; }
.ldi-label { font-size: 10px; text-align: center; word-break: break-word; line-height: 1.2; }

.ldesktop-window { min-height: 0; overflow: auto; border-radius: 8px; }

.ldesktop-taskbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 12px;
    background: linear-gradient(180deg, #0b2030, #061018);
    border-top: 1px solid rgba(93, 231, 255, 0.18);
}
.ldesktop-start {
    border: 1px solid rgba(69, 255, 136, 0.4);
    border-radius: 5px;
    background: rgba(69, 255, 136, 0.1);
    color: var(--clr-green);
    padding: 3px 10px;
    font-family: inherit;
    cursor: default;
}
.ldesktop-taskitems { flex: 1; display: flex; gap: 6px; }
.ldesktop-taskitem { padding: 3px 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); color: var(--clr-muted); }
.ldesktop-taskitem.active { background: rgba(93, 231, 255, 0.16); color: var(--clr-cyan); }
.ldesktop-clock { color: var(--clr-muted); }

/* Generic window chrome inside the laptop desktop */
.lwin {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #020608;
    border: 1px solid rgba(93, 231, 255, 0.22);
    border-radius: 8px;
    overflow: hidden;
}
.lwin-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: bold;
    color: var(--clr-white);
    background: linear-gradient(180deg, #103040, #0a1a26);
    border-bottom: 1px solid rgba(93, 231, 255, 0.2);
}
.lwin-dots { letter-spacing: 3px; opacity: 0.55; font-weight: normal; }
.lwin-body { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lwin-terminal-body .lt-output { flex: 1; max-height: none; }

/* README notepad */
.readme-body { flex: 1; overflow: auto; padding: 12px 14px; background: #0a0f0c; }
.readme-body pre { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--clr-green); white-space: pre-wrap; word-break: break-word; }
.readme-body b { color: var(--clr-cyan); }

/* Network sniffer (Wireshark-style) */
.sniffer-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--clr-muted);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(93, 231, 255, 0.1);
}
.sniffer-toolbar code { color: var(--clr-cyan); }
.sniffer-count { margin-left: auto; }

.sniffer-table { max-height: 200px; overflow-y: auto; font-size: 11.5px; }
.sniffer-row {
    display: grid;
    grid-template-columns: 26px 92px 92px 60px 1fr;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: var(--clr-white);
    font-family: var(--font-mono);
    cursor: pointer;
}
.sniffer-row:not(.sniffer-head):hover { background: rgba(93, 231, 255, 0.08); }
.sniffer-row.row-sel { background: rgba(93, 231, 255, 0.16); }
.sniffer-head {
    color: var(--clr-cyan);
    font-weight: bold;
    cursor: default;
    background: rgba(93, 231, 255, 0.05);
    position: sticky;
    top: 0;
}
.proto { font-weight: bold; }
.proto-telnet { color: var(--clr-red); }
.proto-ssh { color: var(--clr-green); }
.proto-tcp { color: var(--clr-muted); }
.proto-dns { color: var(--clr-amber); }

.sniffer-detail {
    flex: 1;
    min-height: 86px;
    overflow: auto;
    padding: 10px 12px;
    border-top: 1px solid rgba(93, 231, 255, 0.15);
    background: #04090d;
}
.pkt-stream pre { margin: 6px 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--clr-white); }
.pkt-head { font-weight: bold; color: var(--clr-cyan); font-size: 12px; }
.pkt-cleartext .pkt-head { color: var(--clr-red); }
.pkt-finding { margin: 6px 0 0; font-size: 12px; color: var(--clr-amber); border-top: 1px dashed rgba(255, 200, 87, 0.3); padding-top: 6px; }
.pkt-finding .t-warn { font-weight: bold; }

/* ── Pause-menu guided-nav + terminal helper bits ── */
.pause-guide-block { margin: 6px 0 12px; }
.pause-guide-label { display: block; font-size: 12px; color: var(--clr-cyan); margin-bottom: 7px; }

.terminal-helper-hint { font-size: 11px; color: var(--clr-muted); align-self: center; }
.terminal-guide-intro { font-size: 11px; color: var(--clr-muted); margin: 4px 14px; }

/* Inline code chips inside the "?" info panel */
.mobile-info-grid code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--clr-green);
    background: rgba(69, 255, 136, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
}
.mobile-info-grid em { color: var(--clr-cyan); font-style: normal; }

/* /CONTROLES y /COMANDOS: compactos y en azul (chips tipo tecla) */
.mobile-info-grid article.info-tech p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; }
.mobile-info-grid article.info-tech p:first-of-type { margin-top: 2px; }
.mobile-info-grid article.info-tech strong { color: var(--clr-blue); font-weight: 700; }
.mobile-info-grid article.info-tech code {
    color: #bfe0ff;
    background: rgba(106, 169, 255, 0.14);
    border: 1px solid rgba(106, 169, 255, 0.38);
    padding: 1px 5px;
    margin: 1px 1px;
    border-radius: 4px;
    font-size: 11.5px;
    white-space: nowrap;
}
.mobile-info-grid article.info-tech .info-mini {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--clr-muted);
}
.mobile-info-grid article.info-tech .info-mini strong { color: var(--clr-blue); }

/* Notebook mascots — emoji fallback badges. */
.nb-img-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.nb-mascot,
.nb-mascot-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(69, 255, 136, 0.06);
    border: 1px solid rgba(69, 255, 136, 0.18);
}
.nb-mascot { width: 52px; height: 52px; font-size: 30px; }
.nb-mascot-large { width: 72px; height: 72px; font-size: 44px; margin: 6px auto 10px; }

/* Notebook stickers — real logos taped onto the paper like a sketchbook. */
.nb-sticker,
.nb-sticker-large {
    flex-shrink: 0;
    object-fit: contain;
    background: #fffdf2;
    padding: 5px;
    border: 1px solid rgba(52, 39, 24, 0.35);
    border-radius: 4px;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.25);
}
.nb-sticker { width: 88px; height: 88px; }
.nb-sticker-l { transform: rotate(-5deg); }
.nb-sticker-r { transform: rotate(4deg); }
.nb-sticker-large {
    display: block;
    width: 150px;
    height: 150px;
    margin: 8px auto 14px;
    transform: rotate(-3deg);
}

/* ── Tutorial "Ver controles" — was cramped; give it breathing room ── */
.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 14px 0 4px;
}
.tutorial-grid > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(93, 231, 255, 0.12);
    border-radius: 7px;
    background: rgba(93, 231, 255, 0.04);
    font-size: 13px;
}

/* ── Credentials must be selectable so mobile long-press copy works ── */
.nb-credential-box code,
#cred-pass {
    -webkit-user-select: text;
    user-select: text;
}

/* ── Focus mode (PC only): hide the side info frames, widen the game ── */
body.focus-mode {
    grid-template-columns: 1fr;
}
body.focus-mode .side-panel {
    display: none !important;
}
body.focus-mode .monitor-frame {
    width: min(100%, calc(96vh * 1.5));
}
/* The focus toggle only makes sense on PC (side panels already hidden on narrow). */
@media (max-width: 1350px) {
    #toggle-focus-mode { display: none; }
}

/* ═══════════════════════════════════════════
   MOBILE ADAPTATION v2 — la mayoría entra desde el móvil (LinkedIn).
   Escalar terminal, modo guiado, minijuegos y cuaderno a pantallas pequeñas.
   ═══════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Evita el auto-zoom de iOS al enfocar un campo: necesita font-size >= 16px.
       Antes la pantalla se ampliaba al escribir y era un lío salir. */
    #terminal-input,
    .lt-input-row input,
    .winxp-pass-input,
    #contact-name,
    #contact-email,
    #contact-message {
        font-size: 16px;
    }

    /* Terminal: usar casi toda la pantalla, mantener la salida visible */
    #terminal-ui { inset: 2%; }
    .terminal-chrome { padding: 8px 10px; }
    .terminal-helper { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
    .terminal-helper-hint { font-size: 10px; }
    #terminal-output { font-size: 13px; padding: 10px 12px 6px; }
    .terminal-input-wrapper { padding: 8px 10px 10px; }

    /* Modo guiado: panel compacto a 2 columnas con su propio scroll, para que
       NO se coma toda la pantalla (antes tapaba la salida por completo). */
    #terminal-guide {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-height: 38vh;
        max-height: 38dvh;
        overflow-y: auto;
        padding: 8px 10px;
    }
    #terminal-guide button { padding: 9px 8px; font-size: 12px; }
    #terminal-guide p { font-size: 11px; }

    /* Minijuegos: aprovechar la pantalla */
    .minigame-modal { padding: 8px; }
    .minigame-card {
        width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        padding: 12px;
    }
    #minigame-body h3, #minigame-body h4 { font-size: 22px; }

    /* Portátil (escritorio interactivo) escalado a móvil */
    .ldesktop { height: 76vh; height: 76dvh; min-height: 300px; }
    .ldesktop-screen { grid-template-columns: 70px 1fr; gap: 8px; padding: 8px; }
    .ldesktop-topbar { font-size: 10.5px; padding: 5px 8px; }
    .ldesktop-topbar .ldesktop-net { display: none; }
    .ldi-glyph { font-size: 24px; }
    .ldi-label { font-size: 9px; }
    .lwin-titlebar { font-size: 11px; }
    .lwin-body { padding: 8px; }
    .readme-body pre { font-size: 11.5px; }

    /* Sniffer: en móvil ocultamos Origen/Destino (lo clave es el protocolo y el
       contenido) para que la columna Info quepa sin scroll horizontal. */
    .sniffer-row { grid-template-columns: 18px 58px 1fr; gap: 6px; font-size: 11px; padding: 6px 8px; }
    .sniffer-row > span:nth-child(2),
    .sniffer-row > span:nth-child(3) { display: none; }
    .sniffer-toolbar { font-size: 10px; gap: 6px; }
    .sniffer-table { max-height: 30vh; }
    .pkt-stream pre { font-size: 11px; }

    /* Cuaderno legible en móvil */
    .nb-handwritten { font-size: 18px; }
    .nb-ascii-art { font-size: 9px; padding: 7px 6px; }
    .nb-sticker { width: 66px; height: 66px; }
    .nb-sticker-large { width: 120px; height: 120px; }

    /* SIEM rack: una columna para que las alertas se lean */
    .siem-alert-grid { grid-template-columns: 1fr !important; }
    .siem-pro-header { flex-wrap: wrap; gap: 6px; }

    /* Info "?" a tamaño de pantalla */
    .mobile-info-panel { width: calc(100% - 18px); max-height: 88vh; max-height: 88dvh; }

    /* Menú de pausa: que quepa y haga scroll */
    .pause-menu { padding: 10px; }
    .pause-card { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
}

/* XP login del portátil en móvil: la barra lateral fija (130px) + el área de
   login desbordaban a la derecha (se cortaba la contraseña). La ocultamos y
   dejamos que el área ocupe todo el ancho, permitiendo encoger a los hijos flex. */
@media (max-width: 760px) {
    .winxp-login-body { min-height: 220px; }
    .winxp-left-bar { display: none; }
    .winxp-login-area { flex: 1; min-width: 0; padding: 14px 16px; }
    .winxp-instructions { font-size: 12px; }
    .winxp-user-tile { min-width: 0; }
    .winxp-user-tile > div { min-width: 0; }
    .winxp-username { font-size: 14px; }
    .winxp-role { font-size: 10.5px; line-height: 1.3; }
    .winxp-pass-input { min-width: 0; font-size: 13px; }
}

/* Landscape phones: ocupar toda la altura real (dvh) para no perder escena. */
@media (max-height: 500px) and (orientation: landscape) {
    .monitor-frame { height: 100dvh; padding: 0; }
    .minigame-modal { padding: 6px; }
    .minigame-card { max-height: 96dvh; }
    .ldesktop { height: 92dvh; min-height: 220px; }
    /* Modo guiado en horizontal: más ancho disponible → 3 columnas, sin tanto alto */
    #terminal-guide { grid-template-columns: repeat(3, 1fr); max-height: 50dvh; }
}

/* ── ROTATE-TO-PORTRAIT GATE ──────────────────────────────────────────
   La habitación es 3:2 y un móvil apaisado es ~2.2:1: no hay zoom que la
   cuadre sin recortar. DeckBreakout se juega en vertical, así que en móvil
   apaisado tapamos todo y pedimos girar. Oculto por defecto. */
.rotate-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #05080b;
    color: #cfe9d8;
    text-align: center;
    padding: 24px;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
}
.rotate-gate-inner { max-width: 420px; }
.rotate-gate-icon {
    font-size: 56px;
    margin-bottom: 14px;
    animation: rotate-hint 2.4s ease-in-out infinite;
}
@keyframes rotate-hint {
    0%, 55%, 100% { transform: rotate(0deg); }
    20%, 40%      { transform: rotate(-90deg); }
}
.rotate-gate-title {
    font-family: 'VT323', monospace;
    font-size: 30px;
    color: #5fe3a1;
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.rotate-gate-msg { font-size: 16px; line-height: 1.6; margin: 0; opacity: 0.92; }

/* Solo en móvil apaisado (pantalla baja + apuntador táctil): mostrar el aviso. */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    .rotate-gate { display: flex; }
}

/* ═══════════════════════════════════════════
   v4 — pregame subtitle, prominent flag,
   Win11 laptop, phone-chat intro, rack frame
   ═══════════════════════════════════════════ */

.pregame-subtitle {
    margin: 4px 0 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--clr-muted);
}

/* ── Prominent "flag ready" banner (tappable) ───────────────────────── */
/* When the flag is ready the pill grows to hold a multi-line command, so it
   drops the 999px capsule radius (which clipped the wrapped text at the corners)
   and widens to a comfortable, self-contained box that never overflows. */
.ctf-progress.ctf-complete {
    pointer-events: auto;
    opacity: 1;
    /* Stay narrow enough to clear the corner FABs (?, ✉, MENU) on phones. */
    width: min(360px, calc(100% - 178px));
    max-width: none;
    border-radius: 12px;
    border-color: rgba(69, 255, 136, 0.6);
    box-shadow: 0 0 18px rgba(69, 255, 136, 0.28);
    overflow: hidden;
}
.submit-hint-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 6px 4px 2px;
    border: none;
    border-top: 1px dashed rgba(69, 255, 136, 0.4);
    border-radius: 0;
    background: none;
    color: var(--clr-green);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    animation: shb-pulse 1.8s ease-in-out infinite;
}
.submit-hint-banner .shb-flag {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #8dffb0;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.3;
}
.submit-hint-banner .shb-cta {
    font-size: 9px;
    color: var(--clr-amber);
    letter-spacing: 0.04em;
}
.submit-hint-banner:hover { color: #b8ffd0; }
@keyframes shb-pulse {
    0%, 100% { opacity: 0.82; }
    50%      { opacity: 1; }
}

/* ── Notebook: student TO-DO list + wide diagram ────────────────────── */
.nb-todo {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px dashed rgba(255, 176, 0, 0.4);
    border-radius: 6px;
    background: rgba(255, 176, 0, 0.05);
}
.nb-todo-title {
    font-weight: bold;
    font-size: 13px;
    color: #ffce63;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}
.nb-todo-list {
    margin: 0;
    padding-left: 18px;
    list-style: none;
}
.nb-todo-list li {
    position: relative;
    font-size: 13.5px;
    line-height: 1.5;
    padding-left: 4px;
    color: #243018;
}
.nb-todo-list li::before {
    content: "☐";
    position: absolute;
    left: -16px;
    color: #9a7b2e;
}
.nb-todo-list li.nb-todo-done {
    color: #6f7d5a;
    text-decoration: line-through;
    text-decoration-color: rgba(120, 90, 40, 0.7);
}
.nb-todo-list li.nb-todo-done::before { content: "☑"; color: #5a8a3a; }
.nb-diagram-wide { width: 100%; margin: 8px 0 4px; }

/* ── Win 11 laptop lock / login ─────────────────────────────────────── */
.win11-lock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 340px;
    padding: 28px 18px 40px;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 28%, rgba(93, 231, 255, 0.22), transparent 55%),
        linear-gradient(160deg, #1a3a66 0%, #102a4d 45%, #0b1c38 100%);
    font-family: 'Segoe UI', var(--font-mono), sans-serif;
}
.win11-lock-clock { text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.win11-time { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: 0.02em; }
.win11-date { font-size: 15px; opacity: 0.9; margin-top: 4px; }
.win11-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(320px, 100%);
    padding: 22px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}
.win11-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    font-size: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.win11-username { font-size: 22px; font-weight: 600; }
.win11-role { margin: 0 0 6px; font-size: 12px; opacity: 0.78; }
.win11-pass-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}
.win11-pass-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 14px;
    outline: none;
}
.win11-pass-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.win11-pass-input:focus { border-color: #7fd4ff; box-shadow: 0 0 0 2px rgba(127, 212, 255, 0.4); }
.win11-go-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.win11-go-btn:hover { background: rgba(255, 255, 255, 0.3); }
.win11-hint-ok   { margin: 6px 0 0; font-size: 11.5px; color: #9ff5b4; }
.win11-hint-warn { margin: 6px 0 0; font-size: 11.5px; color: #ffd771; }
.win11-osbadge {
    position: absolute;
    bottom: 12px;
    font-size: 11px;
    opacity: 0.7;
}

/* ── Win 11 desktop taskbar (centered, modern) ──────────────────────── */
.ldesktop-taskbar { justify-content: space-between; }
.ldesktop-taskstart { display: flex; gap: 6px; align-items: center; }
.ldesktop-start,
.ldesktop-tasksearch {
    width: 30px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
}
.ldesktop-start:hover,
.ldesktop-tasksearch:hover { background: rgba(255, 255, 255, 0.12); }
.ldesktop-taskitems { flex: 1; justify-content: center; }
.ldesktop-tasktray { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ldesktop-trayicons { font-size: 11px; opacity: 0.85; }

/* ── Phone-chat intro (Jaime) ───────────────────────────────────────── */
.jaime-chat {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: radial-gradient(circle at 50% 40%, rgba(93, 231, 255, 0.1), rgba(0, 0, 0, 0.86));
    backdrop-filter: blur(4px);
}
.jaime-chat.hidden { display: none; }
.jchat-phone {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    height: min(620px, 88vh);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #0c1822, #060d13);
    border: 1px solid rgba(93, 231, 255, 0.28);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 30px rgba(69, 255, 136, 0.08);
}
.jchat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #11212e, #0b1822);
    border-bottom: 1px solid rgba(93, 231, 255, 0.18);
}
.jchat-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 22px;
    border-radius: 50%;
    background: rgba(93, 231, 255, 0.16);
    border: 1px solid rgba(93, 231, 255, 0.3);
}
.jchat-meta { display: flex; flex-direction: column; line-height: 1.2; }
.jchat-name { font-size: 16px; color: var(--clr-white); }
.jchat-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--clr-green); }
.jchat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clr-green); box-shadow: 0 0 6px var(--clr-green); }
.jchat-app { margin-left: auto; font-size: 11px; color: var(--clr-muted); letter-spacing: 0.04em; }
.jchat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 231, 255, 0.05), transparent 30%),
        repeating-linear-gradient(transparent 0 26px, rgba(255, 255, 255, 0.012) 26px 27px);
}
.jchat-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    animation: jchat-pop 0.22s ease-out;
}
.jchat-in {
    align-self: flex-start;
    color: var(--clr-white);
    background: linear-gradient(180deg, #16323f, #102733);
    border: 1px solid rgba(93, 231, 255, 0.22);
    border-bottom-left-radius: 5px;
}
.jchat-in strong { color: var(--clr-cyan); }
.jchat-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 14px;
}
.jchat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(93, 231, 255, 0.7);
    animation: jchat-blink 1.2s infinite ease-in-out;
}
.jchat-typing span:nth-child(2) { animation-delay: 0.18s; }
.jchat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes jchat-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jchat-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.jchat-footer { padding: 12px 14px calc(14px + var(--safe-bottom, 0px)); border-top: 1px solid rgba(93, 231, 255, 0.14); }
.jchat-continue {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--clr-green);
    border-radius: 12px;
    background: rgba(69, 255, 136, 0.14);
    color: var(--clr-green);
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.jchat-continue:hover { background: rgba(69, 255, 136, 0.24); }
.jchat-continue:active { transform: scale(0.98); }
.jchat-continue.hidden { display: none; }

/* ── Rack frame (physical rack alongside the SIEM) ──────────────────── */
.siem-rack-layout { display: flex; gap: 10px; padding: 10px 14px 0; align-items: stretch; }
.siem-rack-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rack-frame {
    flex-shrink: 0;
    width: 138px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 7px;
    background: linear-gradient(180deg, #11181d, #070c0f);
    border: 1px solid rgba(93, 231, 255, 0.2);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
}
.rack-frame-top, .rack-frame-bot {
    font-size: 9px;
    text-align: center;
    letter-spacing: 0.08em;
    color: var(--clr-muted);
    padding: 2px 0;
}
.rack-unit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, #1b2630, #131b22);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.rack-unit-hot  { border-color: rgba(255, 70, 70, 0.5); box-shadow: 0 0 8px rgba(255, 60, 60, 0.25); }
.rack-unit-siem { border-color: rgba(93, 231, 255, 0.45); }
.ru-led { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; }
.ru-led-ok   { background: #45ff88; box-shadow: 0 0 6px #45ff88; animation: ru-blink 2.4s infinite; }
.ru-led-crit { background: #ff4d4d; box-shadow: 0 0 7px #ff4d4d; animation: ru-blink 0.7s infinite; }
.ru-led-siem { background: #5de7ff; box-shadow: 0 0 7px #5de7ff; animation: ru-blink 1.5s infinite; }
.ru-label { font-size: 9.5px; line-height: 1.2; color: var(--clr-white); }
@keyframes ru-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (max-width: 620px) {
    .siem-rack-layout { flex-direction: column; padding: 8px 10px 0; }
    .rack-frame { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 5px; }
    .rack-frame-top, .rack-frame-bot { width: 100%; }
    .rack-unit { flex: 1 1 46%; min-width: 0; }
    .win11-time { font-size: 46px; }
    .win11-lock { min-height: 300px; padding: 22px 14px 34px; }
    .jchat-phone { height: min(640px, 90vh); border-radius: 18px; }
    .jchat-bubble { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════
   v5 — richer side panels, info actions,
   LinkedIn "support" button
   ═══════════════════════════════════════════ */

.panel-prose {
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0 0 8px;
    color: var(--clr-white);
    opacity: 0.92;
}
.panel-prose.t-dim { opacity: 0.7; }
.panel-prose strong { color: var(--clr-cyan); }

.panel-subhead {
    margin: 10px 0 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-green);
    opacity: 0.85;
}
.panel-subhead:first-child { margin-top: 0; }

.panel-hint-tiny {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--clr-muted);
}
.panel-hint-tiny strong { color: var(--clr-cyan); }

/* LinkedIn support button (desktop side panel + info panel) */
.support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    border: 1px solid #0a66c2;
    background: rgba(10, 102, 194, 0.16);
    color: #6cb6ff;
    font-family: var(--font-mono);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.support-btn:hover {
    background: #0a66c2;
    color: #fff;
    box-shadow: 0 0 16px rgba(10, 102, 194, 0.5);
}
.support-in {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #0a66c2;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
}
.support-btn:hover .support-in { background: #fff; color: #0a66c2; }

/* Info panel ("?") actions row */
.info-tip {
    font-size: 12px;
    color: var(--clr-amber);
    opacity: 0.92;
}
.info-tip strong { color: var(--clr-amber); }
.info-actions-card { grid-column: 1 / -1; }
.info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.info-actions .os-button {
    flex: 1 1 180px;
    margin: 0;
}
.os-button-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: #0a66c2 !important;
    color: #6cb6ff !important;
    background: rgba(10, 102, 194, 0.16) !important;
}
.os-button-linkedin:hover {
    background: #0a66c2 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(10, 102, 194, 0.5);
}
.os-button-linkedin .support-in { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════
   v6 — FAB column, in-game guided-mode button
   ═══════════════════════════════════════════ */

/* All on-screen buttons live in one tidy column at the top-right. */
.fab-stack {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 2600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}
.fab-stack .floating-fab {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    width: 42px;
    height: 42px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.fab-stack .floating-fab.fab-active {
    box-shadow: 0 0 0 2px rgba(93, 231, 255, 0.6), 0 0 16px rgba(93, 231, 255, 0.4);
}
/* MENU (☰) neutral so it reads as system, not an accent. */
.fab-stack .pause-fab {
    color: var(--clr-white);
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(10, 16, 20, 0.85);
    letter-spacing: normal;
}
/* Guided-mode (🧭) — cyan, gently pulsing so it's easy to find any time. */
.guide-fab {
    color: var(--clr-cyan);
    border-color: rgba(93, 231, 255, 0.5);
    background: rgba(5, 18, 24, 0.88);
    animation: guidefab-pulse 2.6s ease-in-out infinite;
}
.guide-fab:hover { background: var(--clr-cyan); color: #03161c; }
@keyframes guidefab-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(93, 231, 255, 0); }
    50%      { box-shadow: 0 0 10px 1px rgba(93, 231, 255, 0.45); }
}

/* "Llévame a…" quick menu, anchored beside the FAB column. */
.guide-quick {
    position: absolute;
    top: max(58px, calc(env(safe-area-inset-top, 0px) + 58px));
    right: 62px;
    z-index: 2605;
    width: min(196px, calc(100% - 84px));
    padding: 10px 12px 12px;
    border-radius: 10px;
    color: var(--clr-white);
    background: linear-gradient(180deg, rgba(10, 24, 28, 0.98), rgba(3, 8, 10, 0.97));
    border: 1px solid rgba(93, 231, 255, 0.4);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 18px rgba(93, 231, 255, 0.12);
    animation: jchat-pop 0.18s ease-out;
}
.guide-quick.hidden { display: none; }
.guide-quick-title {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--clr-cyan);
    letter-spacing: 0.04em;
}
.guide-quick .guide-actions { margin-top: 8px; }
/* The next step to do is highlighted amber + pulsing inside the guide menu. */
.guide-quick .guide-next {
    border-color: var(--clr-amber) !important;
    color: var(--clr-amber) !important;
    background: rgba(255, 200, 87, 0.16) !important;
    animation: guidenext-pulse 1.4s ease-in-out infinite;
}
@keyframes guidenext-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
    50%      { box-shadow: 0 0 10px 1px rgba(255, 200, 87, 0.55); }
}

/* ── "Me gusta" (like) button → opens the LinkedIn post ──────────────── */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(10, 102, 194, 0.7);
    background: rgba(10, 102, 194, 0.12);
    color: #8cc4ff;
    font-family: var(--font-mono);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.like-btn .like-thumb { font-size: 17px; line-height: 1; transition: transform 0.15s; }
.like-btn .like-label { font-weight: bold; }
.like-btn .like-on { margin-left: auto; font-size: 11px; opacity: 0.7; }
.like-btn:hover {
    background: #0a66c2;
    color: #fff;
    box-shadow: 0 0 16px rgba(10, 102, 194, 0.5);
}
.like-btn:hover .like-thumb { transform: scale(1.25) rotate(-8deg); }
.like-btn:active { transform: scale(0.97); }

/* Inline variant inside the info "?" actions row (matches .os-button sizing). */
.like-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-color: rgba(10, 102, 194, 0.7) !important;
    color: #8cc4ff !important;
    background: rgba(10, 102, 194, 0.12) !important;
}
.like-btn-inline .like-thumb { font-size: 16px; line-height: 1; transition: transform 0.15s; }
.like-btn-inline:hover {
    background: #0a66c2 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(10, 102, 194, 0.5);
}
.like-btn-inline:hover .like-thumb { transform: scale(1.25) rotate(-8deg); }

/* ═══════════════════════════════════════════
   v7 — compact right panel, smaller toasts
   ═══════════════════════════════════════════ */

.mt-3 { margin-top: 14px; }

/* Compact side panel: tighter headings + dense key/value rows that still hold
   all the info. */
.panel-compact .panel-title { margin-bottom: 4px; }
.panel-compact .panel-content { margin-bottom: 2px; }
.panel-compact .side-guide-actions { margin-top: 4px; }

.kv {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--clr-white);
}
.kv .key {
    flex-shrink: 0;
    min-width: 62px;
}
.kv > span:last-child { color: var(--clr-muted); }

/* Smaller, capped toasts on phones so rack/laptop messages don't eat the screen. */
@media (max-width: 620px) {
    #notification-overlay {
        width: min(300px, calc(100% - 30px));
        bottom: calc(176px + var(--safe-bottom));
    }
    .notification-toast {
        font-size: 11.5px;
        line-height: 1.4;
        padding: 8px 11px;
    }
}

/* ============================================================
   GUIDED MODE · textual "next step" hint (mirrors the in-world arrow)
   ============================================================ */
.guided-hint {
    position: absolute;
    left: 50%;
    top: 46px;
    transform: translateX(-50%);
    z-index: 2450;
    max-width: calc(100% - 180px);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #eaf7ff;
    background: rgba(6, 14, 18, 0.74);
    border: 1px solid rgba(93, 231, 255, 0.30);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    animation: guidedHintIn 0.3s ease both;
}
@keyframes guidedHintIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 620px) {
    .guided-hint { top: 44px; font-size: 11px; padding: 4px 12px; max-width: calc(100% - 150px); }
}

/* ============================================================
   MINIJUEGO 4 · DESBLOQUEO DEL PC (entregar la flag)
   ============================================================ */
.pcu { display: flex; justify-content: center; }
.pcu-screen {
    width: 100%;
    max-width: 560px;
    padding: 18px;
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(69, 255, 136, 0.07), transparent 60%),
        rgba(4, 10, 12, 0.92);
    border: 1px solid rgba(69, 255, 136, 0.28);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
    font-family: var(--font-mono, monospace);
}
.pcu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(93, 231, 255, 0.16);
}
.pcu-lock { font-size: 26px; line-height: 1; }
.pcu-head-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pcu-head-txt strong { color: var(--clr-green); font-size: 15px; letter-spacing: 0.04em; }
.pcu-head-txt small { color: var(--clr-muted); font-size: 11px; }
.pcu-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffcaca;
    border: 1px solid rgba(255, 92, 112, 0.5);
    background: rgba(255, 92, 112, 0.12);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.pcu-sub { color: var(--clr-white); font-size: 13px; line-height: 1.5; margin: 14px 0 12px; }
.pcu-sub strong { color: var(--clr-cyan); }

.pcu-flag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(93, 231, 255, 0.22);
}
.pcu-prefix, .pcu-suffix, .pcu-sep { color: var(--clr-cyan); font-size: 18px; font-weight: 700; }
.pcu-slot {
    min-width: 96px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(93, 231, 255, 0.28);
    background: rgba(93, 231, 255, 0.06);
    color: var(--clr-muted);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.pcu-slot-filled { color: #eafff2; background: rgba(69, 255, 136, 0.12); border-color: rgba(69, 255, 136, 0.5); font-weight: 700; }
.pcu-slot-filled:hover { transform: translateY(-1px); }
.pcu-slot-ok { border-color: var(--clr-green); background: rgba(69, 255, 136, 0.22); cursor: default; }

.pcu-hint { text-align: center; color: var(--clr-muted); font-size: 11px; margin: 8px 0 4px; }

.pcu-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0 16px; }
.pcu-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 200, 87, 0.42);
    background: rgba(255, 200, 87, 0.08);
    color: var(--clr-white);
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.pcu-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.pcu-chip:active { transform: translateY(0); }
.pcu-chip-val { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--clr-amber); }
.pcu-chip-phase { font-size: 10.5px; color: var(--clr-muted); }
.pcu-chip-used { opacity: 0.28; pointer-events: none; }

.pcu-decrypt {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid var(--clr-green);
    background: linear-gradient(180deg, rgba(69, 255, 136, 0.22), rgba(69, 255, 136, 0.1));
    color: #eafff2;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.pcu-decrypt:hover:not(:disabled) { filter: brightness(1.18); }
.pcu-decrypt:disabled { opacity: 0.4; cursor: not-allowed; }

.pcu-progress { height: 6px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.pcu-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--clr-green); animation: pcuDecrypt 1.7s ease forwards; }
@keyframes pcuDecrypt { from { width: 0; } to { width: 100%; } }

.pcu-result { margin-top: 12px; font-size: 13px; line-height: 1.45; min-height: 18px; text-align: center; }
.pcu-result-ok  { color: var(--clr-green); }
.pcu-result-err { color: #ff8a98; }

.pcu-shake { animation: pcuShake 0.4s ease; }
@keyframes pcuShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@media (max-width: 620px) {
    .pcu-screen { padding: 14px; }
    .pcu-slot { min-width: 78px; font-size: 13px; }
    .pcu-prefix, .pcu-suffix, .pcu-sep { font-size: 16px; }
    .pcu-chip-val { font-size: 14px; }
    .pcu-sub { font-size: 12.5px; }
}

/* ============================================================
   v8b — guided highlights, guide hover-grow, side-panel palette
   ============================================================ */

/* Guided mode: pulse the NEXT correct control (copy-pass, PCAP, the password
   packet, rack_control.sh, the right SIEM alerts, the next flag fragment…). */
.guided-glow {
    outline: 2px solid rgba(255, 200, 87, 0.85);
    outline-offset: 1px;
    border-color: var(--clr-amber) !important;
    animation: guidedGlowPulse 1.35s ease-in-out infinite;
}
@keyframes guidedGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
    50%      { box-shadow: 0 0 14px 3px rgba(255, 200, 87, 0.6); }
}

/* Guided menus: buttons grow/stretch when hovered so they feel alive. */
.guide-quick [data-guide-target],
.terminal-guide button {
    transition: transform 0.18s ease, letter-spacing 0.18s ease,
                border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    transform-origin: center;
}
.guide-quick [data-guide-target]:hover,
.terminal-guide button:hover {
    transform: scale(1.06);
    letter-spacing: 0.02em;
    z-index: 1;
}

/* Side panel /CONTROLES and /TERMINAL → compact, blue key chips. */
.right-panel .panel-title { color: var(--clr-blue); }
.panel-compact .kv {
    padding: 1px 0;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.25;
}
.panel-compact .kv .key {
    font-family: var(--font-mono);
    min-width: 54px;
    color: #bfe0ff;
    background: rgba(106, 169, 255, 0.12);
    border: 1px solid rgba(106, 169, 255, 0.34);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    text-align: center;
}
.panel-compact .kv > span:last-child { color: var(--clr-white); opacity: 0.82; }

/* ============================================================
   v8 · Guided BLINK (sequential), pencil notebook drawings,
   phone-intro chrome
   ============================================================ */

/* Guided mode: a clear ON/OFF blink that walks the player step by step
   (copiar contraseña → Wireshark → logs → Terminal → rack_control.sh).
   Distinct from .guided-glow (a soft constant pulse) so the "next" action
   really flashes for attention. */
.guided-blink {
    border-color: var(--clr-amber) !important;
    position: relative;
    z-index: 1;
    animation: guidedBlink 0.8s steps(1, end) infinite;
}
@keyframes guidedBlink {
    0%, 49% {
        outline: 2px solid var(--clr-amber);
        outline-offset: 1px;
        box-shadow: 0 0 16px 3px rgba(255, 200, 87, 0.75);
    }
    50%, 100% {
        outline: 2px solid transparent;
        outline-offset: 1px;
        box-shadow: 0 0 0 0 rgba(255, 200, 87, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .guided-blink { animation: none; outline: 2px solid var(--clr-amber); outline-offset: 1px; }
}

/* Notebook drawings (Tux / Kali dragon) rendered as graphite pencil sketches
   on the tan paper — grayscale + multiply blend so the white of the image
   melts into the page and only the linework reads as pencil. One of each. */
.nb-pencil {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Crisp graphite look: strong contrast + darker linework so it doesn't wash
       out against the tan paper. Full opacity keeps the sketch sharp, not faint. */
    filter: grayscale(1) contrast(1.75) brightness(0.86);
    mix-blend-mode: multiply;
    opacity: 1;
}

/* Phone intro — more "real phone": notch, status bar, mock input bar. */
.jchat-phone { padding-top: 6px; }
.jchat-notch {
    width: 128px;
    height: 20px;
    margin: 0 auto 4px;
    background: #03070a;
    border: 1px solid rgba(93, 231, 255, 0.12);
    border-top: 0;
    border-radius: 0 0 16px 16px;
}
.jchat-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 4px;
    font-size: 12px;
    color: var(--clr-white);
    opacity: 0.85;
}
.jchat-sb-time { font-weight: bold; letter-spacing: 0.03em; }
.jchat-sb-icons { letter-spacing: 2px; font-size: 11px; }
.jchat-back { font-size: 22px; color: var(--clr-cyan); margin-right: -2px; line-height: 1; }
.jchat-footer { display: flex; flex-direction: column; gap: 8px; }
.jchat-inputbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(93, 231, 255, 0.18);
}
.jchat-inputpill { flex: 1; font-size: 13px; color: var(--clr-muted); }
.jchat-sendglyph {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(69, 255, 136, 0.16);
    color: var(--clr-green);
    font-size: 12px;
}
/* ── Global themed scrollbar baseline ───────────────────────────────────────
   Ensures NO scroll area (including the mobile page/panel bars) falls back to
   the raw browser scrollbar. Specific class rules above still override this. */
* { scrollbar-width: thin; scrollbar-color: rgba(69, 255, 136, 0.7) rgba(0, 0, 0, 0.25); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.22); border-radius: 6px; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(rgba(69, 255, 136, 0.7), rgba(48, 200, 255, 0.55));
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.18);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(69, 255, 136, 0.9); }

/* ============ v33: boton Saltar de la intro de chat ============ */
.jchat-skip {
    margin-left: 8px;
    padding: 7px 13px;
    min-height: 34px;            /* comodo de tocar en movil */
    font-family: inherit;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--clr-cyan);
    background: rgba(93, 231, 255, 0.08);
    border: 1px solid rgba(93, 231, 255, 0.35);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;             /* nunca encoger ni recortarse en pantallas estrechas */
    white-space: nowrap;
    touch-action: manipulation; /* sin retardo de 300ms ni doble-tap-zoom */
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.1s ease;
}
.jchat-skip:hover  { background: rgba(93, 231, 255, 0.18); }
.jchat-skip:active { transform: scale(0.96); }
.jchat-skip.hidden { display: none; }
/* La cabecera puede ir justa en moviles estrechos: deja que el nombre se encoja
   y oculta el adorno de llamada para que "Saltar" siempre quepa y sea tocable. */
.jchat-meta { min-width: 0; }
.jchat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-mobile .jchat-app { display: none; }