/* ============================================================
   VR GAME STYLES
   Only affects the HTML overlay (loading screen, etc.)
   The 3D scene is styled via A-Frame attributes in index.html
   ============================================================ */


/* Inter font — bundled (latin-ext for full Czech glyph coverage)
   per TODO §5 T1.5. Files: assets/fonts/inter/*.woff2 */
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../assets/fonts/inter/inter-latin-ext-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../assets/fonts/inter/inter-latin-ext-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../assets/fonts/inter/inter-latin-ext-700-normal.woff2') format('woff2');
}

body, html {
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ============================================================
   LAUNCH INTRO OVERLAY — appears after auth dismiss, before game
   Mirrors approved mockup (datacore-vr-launch-intro-design.html):
   void space, staggered fade-in text, CTA → blink → game.
   ============================================================ */
#launch-intro-overlay,
#launch-intro-overlay * {
    box-sizing: border-box;
}
#launch-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99500;          /* below auth (999999), above loading/canvas */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, #1a2358 0%, #0a1340 35%, #050818 75%, #02030a 100%);
    /* No fade-in: overlay must be fully opaque from frame 0 so the office
       scene never shows through while auth screen (z-index 999999) fades
       out above it (400ms). Text/particles inside have their own staggered
       animations. */
}
#launch-intro-overlay.li-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
}

/* Particle pin-pricks (CSS dots) */
.li-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.li-particles .li-p {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #1ea7ff;
    border-radius: 50%;
    box-shadow: 0 0 6px #1ea7ff;
    opacity: 0.6;
}
.li-particles .li-p:nth-child(2n) {
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff;
    opacity: 0.5;
}

/* Content column */
.li-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    text-align: center;
}

.li-greeting {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.15;
    margin: 0 0 36px;
    color: #ffffff;
    text-shadow:
        0 0 28px rgba(30, 167, 255, 0.30),
        0 2px 22px rgba(0, 0, 0, 0.85);
}
.li-greeting .li-name {
    color: #1ea7ff;
    text-shadow:
        0 0 18px rgba(30, 167, 255, 0.30),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

.li-line {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.55;
    color: #d4d8e8;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.li-line strong {
    color: #ffffff;
    font-weight: 600;
}
.li-line .li-brand {
    color: #4cc0ff;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 0 16px rgba(30, 167, 255, 0.55);
}
.li-line-dim {
    color: #aab2c8 !important;
    font-style: italic;
    margin-bottom: 38px;
}

.li-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 44px;
    background: #1ea7ff;
    border: none;
    border-radius: 12px;
    color: #001025;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow:
        0 0 32px rgba(30, 167, 255, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.li-cta:hover {
    background: #4cc0ff;
    box-shadow:
        0 0 44px rgba(30, 167, 255, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}
.li-cta:active { transform: translateY(1px); }
.li-cta svg { color: #001025; }

/* Stagger fade-in (per element via --delay) */
.li-anim {
    opacity: 0;
    transform: translateY(14px);
    animation: li-line-in 1.4s cubic-bezier(.2, .9, .3, 1.05) forwards;
    animation-delay: var(--delay, 0s);
    /* Held paused (frozen at opacity 0) until the scene is idle — void-intro
       show() flips this to running on the first idle frame, so a busy main
       thread at game-start can't fast-forward the wall-clock reveal. */
    animation-play-state: paused;
}

/* Blink flash on CTA click */
#launch-intro-blink {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
}
#launch-intro-blink.is-blinking {
    animation: li-blink 0.85s cubic-bezier(.3, .8, .3, 1) forwards;
}

@keyframes li-overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes li-line-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes li-blink {
    0%   { opacity: 0; }
    45%  { opacity: 1; }
    55%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================================
   DEMO DEV SKIP — top-left overlay, dev-only
   Removable for production: delete this block + the HTML markup.
   ============================================================ */
.demo-dev-skip {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(15, 18, 32, 0.88);
    border: 1px solid rgba(255, 184, 74, 0.5);
    border-radius: 6px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #ffb84a;
}
.demo-dev-skip-state {
    padding: 2px 8px;
    background: rgba(255, 184, 74, 0.15);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.12em;
}
.demo-dev-skip button {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid rgba(255, 184, 74, 0.45);
    border-radius: 4px;
    color: #ffb84a;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s;
}
.demo-dev-skip button:hover {
    background: rgba(255, 184, 74, 0.15);
}

/* ============================================================
   AUTH SCREEN — frontend-only login (T7.1 stub)
   Visual language matches docs/dialog/datacore-dialog-design.html:
   cyan border + glow shadow, dark gradient bg, Inter font.
   Skip button (top-right) is dev bypass — remove with backend.
   ============================================================ */
:root {
    --auth-bg-scene:      #050818;
    --auth-bg-panel:      #0d1336;
    --auth-bg-panel-deep: #060a22;
    --auth-border-cyan:   #1ea7ff;
    --auth-border-glow:   rgba(30, 167, 255, .55);
    --auth-border-soft:   rgba(30, 167, 255, .25);
    --auth-text-primary:  #ffffff;
    --auth-text-dim:      #8a93b8;
    --auth-danger:        #ff5e6c;
    --auth-ok:            #56e39f;
}

#auth-screen,
#auth-screen * {
    box-sizing: border-box;
}

#auth-screen {
    position: fixed;
    inset: 0;
    z-index: 999999; /* above loading-screen, dialog test panel AND hint-overlay (99999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background:
        radial-gradient(ellipse at top,    #1a2150 0%, transparent 60%),
        radial-gradient(ellipse at bottom, #0d1336 0%, transparent 70%),
        var(--auth-bg-scene);
    color: var(--auth-text-primary);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: auto;
    animation: auth-fade-in .35s ease-out;
}
#auth-screen.auth-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease-out;
}

/* Faint horizontal scan-lines decor (cybersec vibe) */
.auth-bg-decor {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(30, 167, 255, 0.025) 0px,
        rgba(30, 167, 255, 0.025) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}

#auth-skip-dev {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 8px 14px;
    background: rgba(255, 184, 74, 0.10);
    border: 1px solid rgba(255, 184, 74, 0.5);
    border-radius: 6px;
    color: #ffb84a;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    z-index: 1;
}
#auth-skip-dev:hover {
    background: rgba(255, 184, 74, 0.18);
    border-color: rgba(255, 184, 74, 0.85);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: linear-gradient(180deg, var(--auth-bg-panel) 0%, var(--auth-bg-panel-deep) 100%);
    border: 3px solid var(--auth-border-cyan);
    border-radius: 14px;
    padding: 36px 36px 24px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 36px var(--auth-border-glow),
        0 18px 56px rgba(0, 0, 0, 0.65);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.auth-brand-mark {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: var(--auth-bg-panel-deep);
    border: 2px solid var(--auth-border-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--auth-border-cyan);
    box-shadow: 0 0 14px var(--auth-border-glow);
}
.auth-brand-text h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.auth-brand-text h1 .accent {
    color: var(--auth-border-cyan);
}
.auth-tag {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--auth-text-dim);
    letter-spacing: 0.5px;
}

.auth-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--auth-border-soft);
}
.auth-pill {
    padding: 4px 10px;
    background: rgba(30, 167, 255, 0.12);
    border: 1px solid var(--auth-border-soft);
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--auth-border-cyan);
}
.auth-pill-soft {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--auth-text-dim);
}

.auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--auth-text-dim);
}
.auth-input-wrap {
    position: relative;
    margin-bottom: 16px;   /* D: mezera mezi poli — jméno se lepilo na e-mailový řádek nad ním */
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-border-cyan);
    font-weight: 700;
    font-size: 16px;
    pointer-events: none;
    opacity: 0.7;
}
#auth-email, #auth-name {   /* D: #auth-name přidán — jinak dostal bílý browser-default (styl byl jen v fable.css, ne ve style.css) */
    width: 100%;
    padding: 14px 16px 14px 36px;
    background: var(--auth-bg-panel-deep);
    border: 2px solid var(--auth-border-soft);
    border-radius: 8px;
    color: var(--auth-text-primary);
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 0.3px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#auth-email:focus, #auth-name:focus {
    outline: none;
    border-color: var(--auth-border-cyan);
    box-shadow: 0 0 0 3px rgba(30, 167, 255, 0.18);
}
#auth-email::placeholder, #auth-name::placeholder {
    color: #4a5276;
}
#auth-email.auth-input-error, #auth-name.auth-input-error {
    border-color: var(--auth-danger);
    box-shadow: 0 0 0 3px rgba(255, 94, 108, 0.18);
}

.auth-error {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--auth-danger);
    letter-spacing: 0.2px;
}

.auth-submit {
    margin-top: 18px;
    width: 100%;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--auth-border-cyan);
    border: none;
    border-radius: 8px;
    color: #001025;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow: 0 0 18px var(--auth-border-glow);
}
.auth-submit:hover {
    background: #4cc0ff;
    box-shadow: 0 0 28px var(--auth-border-glow);
}
.auth-submit:active {
    transform: translateY(1px);
}

.auth-help {
    margin: 18px 0 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--auth-border-soft);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: var(--auth-text-dim);
    line-height: 1.5;
}

.auth-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--auth-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: var(--auth-text-dim);
    letter-spacing: 0.4px;
}
.auth-dot { opacity: 0.5; }

@keyframes auth-fade-in {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   DIALOG TEST PANEL (HTML overlay)
   Stakeholder review tool. Per docs/dialog/ch1-review.md
   "Frontend test panel" section. Toggle via 'D' key or chevron.
   ============================================================ */
.dt-panel {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9000;
    width: 380px;
    max-height: 88vh;
    display: flex;
    align-items: stretch;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #e0e0e8;
    pointer-events: auto;
    transition: transform 0.25s ease, right 0.25s ease;
}
.dt-panel.dt-collapsed {
    right: -342px; /* leave the toggle tab sticking out (~38 px) */
}

#dt-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: linear-gradient(180deg, #1f2840, #131a2c);
    border: 1px solid #2d3a5e;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #88ccff;
    cursor: pointer;
    padding: 16px 0;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: background 0.15s, color 0.15s;
}
#dt-toggle:hover {
    background: linear-gradient(180deg, #2a3656, #1a2240);
    color: #aaddff;
}
.dt-toggle-icon {
    writing-mode: horizontal-tb;
    margin-bottom: 6px;
    transform: rotate(0deg);
    transition: transform 0.25s;
}
.dt-panel:not(.dt-collapsed) .dt-toggle-icon {
    transform: rotate(180deg);
}

.dt-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(15, 18, 32, 0.96);
    border: 1px solid #2d3a5e;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 0 16px rgba(0,0,0,0.5);
    overflow: hidden;
}

.dt-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #232a44;
    background: rgba(20, 26, 44, 0.6);
}
.dt-header h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #88ccff;
}
.dt-subtitle {
    margin: 0 0 10px;
    font-size: 11px;
    color: #888;
}
.dt-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.dt-action {
    flex: 1;
    padding: 6px 10px;
    background: #1e3a4a;
    border: 1px solid #2d5a72;
    color: #aaddff;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.dt-action:hover { background: #28506a; }
.dt-action-secondary {
    background: #3a1e1e;
    border-color: #722d2d;
    color: #ffaaaa;
    flex: 0 0 70px;
}
.dt-action-secondary:hover { background: #502828; }

.dt-stats {
    font-size: 10px;
    color: #667;
    letter-spacing: 0.04em;
}

.dt-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}
.dt-list::-webkit-scrollbar { width: 8px; }
.dt-list::-webkit-scrollbar-track { background: #0f1220; }
.dt-list::-webkit-scrollbar-thumb { background: #2d3a5e; border-radius: 4px; }

.dt-section-header {
    padding: 8px 10px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #88ccff;
    border-top: 1px solid #1a2138;
    margin-top: 4px;
}
.dt-section-header:first-child { border-top: none; margin-top: 0; }

.dt-line {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(30, 36, 54, 0.5);
    border: 1px solid #232a44;
    border-radius: 5px;
    color: inherit;
    font-family: inherit;
    padding: 8px 10px;
    margin: 4px 0;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.dt-line:hover {
    background: rgba(50, 70, 110, 0.45);
    border-color: #3a4a72;
}
.dt-line:active { transform: translateY(1px); }
.dt-line.dt-playing {
    background: rgba(0, 255, 136, 0.12);
    border-color: #00ff88;
}

.dt-line-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    gap: 6px;
}
.dt-npc {
    font-weight: 600;
    color: #ffd479;
    font-size: 12px;
}
.dt-state {
    font-size: 9px;
    color: #667;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    letter-spacing: 0.02em;
}
.dt-line-text {
    font-size: 11px;
    color: #c0c0d0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dt-line-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 9px;
    color: #556;
}

.dt-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.dt-status-draft         { background: #3a3520; color: #ffd479; }
.dt-status-approved      { background: #1f3a25; color: #88ff99; }
.dt-status-recorded      { background: #1a3a4a; color: #88ddff; }
.dt-status-needs_rerecord{ background: #4a1f1f; color: #ff9988; }

.dt-line-stub {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed;
}
.dt-line-stub:hover {
    background: rgba(30, 36, 54, 0.5);
    border-color: #232a44;
}
.dt-stub-badge {
    background: #2d2d3a;
    color: #888;
    font-style: italic;
}

.dt-footer {
    padding: 8px 16px;
    border-top: 1px solid #232a44;
    background: rgba(15, 20, 35, 0.85);
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #556;
}
.dt-footer code, .dt-footer kbd {
    background: #1a2138;
    padding: 1px 5px;
    border-radius: 3px;
    color: #88ccff;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10px;
}

/* Loading screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    /* fable D-598: never intercept pointer/laser even if the node survives into
       immersive — avoids dead clicks / the "purple circle" raycast intercept. */
    pointer-events: none;
}

#loading-screen h1 {
    font-size: 28px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#loading-screen p {
    color: #888;
    font-size: 14px;
}

#loading-screen .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-top: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-screen.hidden {
    display: none;
}

/* ============================================================
   HINT OVERLAY — kontextový popisek u předmětu (hover bubble)
   Triggered by vrgame-hint-source component (js/components.js).
   Position: world-to-screen projection of hovered entity origin.
   ============================================================ */
#hint-overlay {
    position: fixed;
    top: 0; left: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
    padding: 12px 18px;
    max-width: 360px;
    min-width: 0;
    background: #0d1336;
    border: 2.5px solid #1ea7ff;
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: .2px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 24px rgba(30,167,255,.55),
        0 8px 32px rgba(0,0,0,.5);
    transform: translateY(0);
    animation: hint-in .25s cubic-bezier(.2,.9,.3,1.2);
    white-space: nowrap;
}
/* Speech-bubble tail — visually connects the hint to its source entity.
   JS sets data-tail attribute (down|up|left|right) to choose direction.
   --tail-offset (px) shifts tail along the bubble edge to better aim
   at the source entity's projected position. */
#hint-overlay::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #0d1336;
    border-right: 2.5px solid #1ea7ff;
    border-bottom: 2.5px solid #1ea7ff;
    box-shadow: 4px 4px 12px rgba(30,167,255,.4);
    pointer-events: none;
    display: none;
}
#hint-overlay[data-tail="down"]::after {
    display: block;
    bottom: -10px;
    left: calc(50% + var(--tail-offset, 0px));
    margin-left: -8px;
    transform: rotate(45deg);
}
#hint-overlay[data-tail="up"]::after {
    display: block;
    top: -10px;
    left: calc(50% + var(--tail-offset, 0px));
    margin-left: -8px;
    transform: rotate(225deg);
}
#hint-overlay[data-tail="left"]::after {
    display: block;
    top: 50%;
    left: -10px;
    margin-top: -8px;
    transform: rotate(135deg);
}
#hint-overlay[data-tail="right"]::after {
    display: block;
    top: 50%;
    right: -10px;
    margin-top: -8px;
    transform: rotate(-45deg);
}
#hint-overlay .hint__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
#hint-overlay .hint__icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #1ea7ff;
    color: #001025;
}
#hint-overlay .hint__icon svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#hint-overlay .hint__body {
    display: flex; flex-direction: column; gap: 2px;
}
#hint-overlay .hint__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1ea7ff;
    line-height: 1;
}
#hint-overlay .hint__label:empty { display: none; }
#hint-overlay .hint__text {
    color: #fff;
    font-size: 14px;
}

/* tone modifiers (re-color border / icon / label) */
#hint-overlay.tone-warn   { border-color: #ffb84a; box-shadow: 0 0 24px rgba(255,184,74,.55), 0 8px 32px rgba(0,0,0,.5); }
#hint-overlay.tone-warn   .hint__icon  { background: #ffb84a; color: #1a0d00; }
#hint-overlay.tone-warn   .hint__label { color: #ffb84a; }
#hint-overlay.tone-danger { border-color: #ff5e6c; box-shadow: 0 0 24px rgba(255,94,108,.55), 0 8px 32px rgba(0,0,0,.5); }
#hint-overlay.tone-danger .hint__icon  { background: #ff5e6c; color: #1a0000; }
#hint-overlay.tone-danger .hint__label { color: #ff5e6c; }
#hint-overlay.tone-ok     { border-color: #56e39f; box-shadow: 0 0 24px rgba(86,227,159,.55), 0 8px 32px rgba(0,0,0,.5); }
#hint-overlay.tone-ok     .hint__icon  { background: #56e39f; color: #001a0c; }
#hint-overlay.tone-ok     .hint__label { color: #56e39f; }

/* subtle — pro velké objekty (monitor, stůl) — méně výrazné */
#hint-overlay.tone-subtle {
    padding: 7px 12px;
    background: rgba(13, 19, 54, .80);
    border-color: rgba(138, 147, 184, .45);
    border-width: 1.5px;
    box-shadow:
        0 0 12px rgba(30, 167, 255, .12),
        0 4px 16px rgba(0,0,0,.4);
    opacity: .85;
}
#hint-overlay.tone-subtle .hint__icon {
    width: 20px; height: 20px;
    background: rgba(138, 147, 184, .25);
    color: #b3c0e0;
}
#hint-overlay.tone-subtle .hint__icon svg { width: 12px; height: 12px; stroke-width: 1.8; }
#hint-overlay.tone-subtle .hint__label { color: #8a93b8; font-size: 9px; }
#hint-overlay.tone-subtle .hint__text { color: #c8d0e8; font-size: 12px; }

@keyframes hint-in {
    from { opacity: 0; transform: translateY(4px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ============================================================
   RANSOMWARE ISOLATION TOOLTIPS — persistent screen-projected
   bubbles anchored to 3D objects (router/PC/keyboard).
   E1.3: PHONE HOLOGRAM BLUE palette — matches Katka's call UI.
   Border #1ea7ff, translucent dark-blue interior (#0d1230).
   Controlled by ransom-tips module in components.js.
   ============================================================ */
.ransom-tip {
    position: fixed;
    top: 0; left: 0;
    z-index: 999900;
    display: none;
    /* 2026-05-21 — REVERSED: bubbles are PURE VISUAL hints. The 3D
       object underneath (router box / PC power button / keyboard plane)
       is the click target so the VR gaze cursor works without exiting
       pointer-lock. Bubble must not swallow clicks. */
    pointer-events: none !important;
    cursor: default;
    padding: 20px 26px;
    max-width: 360px;
    background: rgba(13, 18, 48, 0.92);
    border: 3px solid #1ea7ff;
    border-radius: 12px;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .2px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 24px rgba(30, 167, 255, .65),
        0 8px 32px rgba(0, 0, 0, .5);
    transform: translate(-50%, -100%) translateY(-26px);
    animation: ransom-tip-pulse 2.2s ease-in-out infinite;
    white-space: nowrap;
}
.ransom-tip.is-visible {
    display: block;
    /* pointer-events stay none — bubble is visual only, 3D object handles clicks */
}
.ransom-tip:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12) inset,
        0 0 38px rgba(30, 167, 255, .95),
        0 12px 36px rgba(0, 0, 0, .6);
    transform: translate(-50%, -100%) translateY(-26px) scale(1.04);
    filter: brightness(1.15);
}
.ransom-tip:active {
    transform: translate(-50%, -100%) translateY(-22px) scale(0.98);
}
@keyframes ransom-tip-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .04) inset,
            0 0 24px rgba(30, 167, 255, .55),
            0 8px 32px rgba(0, 0, 0, .5);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .08) inset,
            0 0 38px rgba(30, 167, 255, .9),
            0 8px 32px rgba(0, 0, 0, .5);
    }
}
/* Speech-bubble tail (always pointing down at the source object) */
.ransom-tip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #0d1230;
    border-right: 2.5px solid #1ea7ff;
    border-bottom: 2.5px solid #1ea7ff;
    box-shadow: 4px 4px 12px rgba(30, 167, 255, .4);
    margin-left: -8px;
    transform: rotate(45deg);
}
.ransom-tip .ransom-tip__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ransom-tip .ransom-tip__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #1ea7ff;
    color: #0d1230;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(30, 167, 255, 0.65);
}
.ransom-tip .ransom-tip__body {
    display: flex; flex-direction: column; gap: 4px;
}
.ransom-tip .ransom-tip__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #5ec8ff;
    font-weight: 700;
    line-height: 1;
}
.ransom-tip .ransom-tip__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 12px;
    flex-shrink: 0;
    border-radius: 7px;
    background: #1ea7ff;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.18) inset,
        0 0 12px rgba(30, 167, 255, .6),
        0 2px 6px rgba(0,0,0,.5);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ransom-tip .ransom-tip__text {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

/* ============================================================
   DAVID DIALOG CHOICES — 3 clickable buttons stacked above the
   monitor. Shown when Katka asks "Nevíš jak se to mohlo stát?"
   Player picks one of 3 explanations (truth / deflection / red
   herring). Visibility toggled by .is-visible class.
   ============================================================ */
/* 2026-05-22 v11 — Flexbox column, larger cards, tighter spacing.
   The choices are the focus during dialog; no reason to leave gaps
   for the monitor behind. Cards fill the available area. */
#david-dialog-choices {
    position: fixed;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
#david-dialog-choices.is-visible { display: flex; }
.ddc__row {
    display: flex;
    pointer-events: auto;
}
.ddc__row--top {
    justify-content: center;
}
.ddc__row--bottom {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
}
@keyframes ddc-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#david-dialog-choices .ddc__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(440px, 32vw);
    margin: 0;
    padding: 16px 22px;
    background: linear-gradient(180deg, #0d1336 0%, #060a22 100%);
    border: 2.5px solid #1ea7ff;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 28px rgba(30, 167, 255, .55),
        0 10px 28px rgba(0, 0, 0, .65);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    animation: ddc-in .35s cubic-bezier(.2,.9,.3,1.1) both;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
#david-dialog-choices .ddc__btn[data-choice="redHerring"] { animation-delay: 0s; }
#david-dialog-choices .ddc__btn[data-choice="truth"]      { animation-delay: .08s; }
#david-dialog-choices .ddc__btn[data-choice="deflection"] { animation-delay: .16s; }
#david-dialog-choices .ddc__btn:hover {
    border-color: #56e3ff;
    transform: scale(1.03);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 40px rgba(30, 167, 255, .8),
        0 10px 28px rgba(0, 0, 0, .65);
}
#david-dialog-choices .ddc__btn em {
    font-style: normal;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.2px;
}
#david-dialog-choices .ddc__key {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(30, 167, 255, .18);
    border: 1.5px solid #1ea7ff;
    color: #1ea7ff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 0 6px rgba(30,167,255,.7);
    box-shadow: 0 0 10px rgba(30,167,255,.35);
}
#david-dialog-choices .ddc__btn em { flex: 1; text-align: left; }

/* ============================================================
   CHAPTER CLOSE SCREEN — full-screen overlay shown at end of
   chapter 1 (state 29). Score + recap + continue button.
   ============================================================ */
/* ============================================================
   CH.2 INTRO SCREEN — blue void shown AFTER ch.1 recap continue,
   BEFORE teleporting into the small meeting room.
   "13:00 · Pár hodin po incidentu" + CTA.
   Mirrors #launch-intro-overlay aesthetic for visual continuity.
   ============================================================ */
#ch2-intro-screen, #ch3-intro-screen, #ch4-intro-screen,
#ch2-intro-screen *, #ch3-intro-screen *, #ch4-intro-screen * { box-sizing: border-box; }
#ch2-intro-screen, #ch3-intro-screen, #ch4-intro-screen {
    position: fixed;
    inset: 0;
    z-index: 999996;            /* below chapter-close-screen (999998) and announce (999997) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, #1a2358 0%, #0a1340 35%, #050818 75%, #02030a 100%);
}
#ch2-intro-screen.is-visible, #ch3-intro-screen.is-visible, #ch4-intro-screen.is-visible { display: flex; }
#ch2-intro-screen.is-hidden, #ch3-intro-screen.is-hidden, #ch4-intro-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}
#ch2-intro-screen .ch2i-content,
#ch3-intro-screen .ch2i-content,
#ch4-intro-screen .ch2i-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    text-align: center;
}
#ch2-intro-screen .ch2i-eyebrow,
#ch3-intro-screen .ch2i-eyebrow,
#ch4-intro-screen .ch2i-eyebrow {
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #4cc0ff;
    font-weight: 600;
    margin-bottom: 28px;
    text-shadow: 0 0 16px rgba(30, 167, 255, 0.55);
}
#ch2-intro-screen .ch2i-time,
#ch3-intro-screen .ch2i-time,
#ch4-intro-screen .ch2i-time {
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 80px;
    font-weight: 800;
    color: #1ea7ff;
    line-height: 1;
    letter-spacing: 6px;
    margin-bottom: 20px;
    text-shadow:
        0 0 32px rgba(30, 167, 255, 0.5),
        0 0 80px rgba(30, 167, 255, 0.25);
}
#ch2-intro-screen .ch2i-title,
#ch3-intro-screen .ch2i-title,
#ch4-intro-screen .ch2i-title {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.18;
    margin: 0 0 36px;
    color: #ffffff;
    text-shadow:
        0 0 28px rgba(30, 167, 255, 0.30),
        0 2px 22px rgba(0, 0, 0, 0.85);
}
#ch2-intro-screen .ch2i-sub,
#ch3-intro-screen .ch2i-sub,
#ch4-intro-screen .ch2i-sub {
    margin: 0 auto 38px;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: #c8cee0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
#ch2-intro-screen .ch2i-cta,
#ch3-intro-screen .ch2i-cta,
#ch4-intro-screen .ch2i-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 44px;
    background: #1ea7ff;
    border: none;
    border-radius: 12px;
    color: #001025;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow:
        0 0 32px rgba(30, 167, 255, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
#ch2-intro-screen .ch2i-cta:hover,
#ch3-intro-screen .ch2i-cta:hover,
#ch4-intro-screen .ch2i-cta:hover {
    background: #4cc0ff;
    box-shadow:
        0 0 44px rgba(30, 167, 255, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}
#ch2-intro-screen .ch2i-cta:active,
#ch3-intro-screen .ch2i-cta:active,
#ch4-intro-screen .ch2i-cta:active { transform: translateY(1px); }

/* Stagger fade-in for elements */
#ch2-intro-screen .ch2i-anim,
#ch3-intro-screen .ch2i-anim,
#ch4-intro-screen .ch2i-anim {
    opacity: 0;
    transform: translateY(14px);
    animation: ch2i-line-in 1.2s cubic-bezier(.2, .9, .3, 1.05) forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes ch2i-line-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CH.2 FADE-TO-BLACK OVERLAY — used for the teleport from intro
   screen into the 3D meeting room scene.
   ============================================================ */
#ch2-fade-overlay {
    position: fixed;
    inset: 0;
    z-index: 999995;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
#ch2-fade-overlay.is-on { opacity: 1; pointer-events: auto; }

/* ============================================================
   DEV SKIP PANEL — dev-only shortcuts. Mirrors .demo-dev-skip
   styling (amber/orange = dev tooling). Sits outside the locked
   #auth-screen block as a sibling. Auto-hides once the player
   has entered the game (after launch intro CTA or via skipToCh2).
   PRODUCTION: remove this block + the HTML markup.
   ============================================================ */
#dev-skip-panel {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(15, 18, 32, 0.92);
    border: 1px solid rgba(255, 184, 74, 0.5);
    border-radius: 8px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #ffb84a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#dev-skip-panel .dsp-label {
    align-self: center;
    padding: 2px 8px;
    background: rgba(255, 184, 74, 0.15);
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 9.5px;
    margin-bottom: 2px;
}
#dev-skip-panel button {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(255, 184, 74, 0.45);
    border-radius: 5px;
    color: #ffb84a;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: left;
    min-width: 160px;
}
#dev-skip-panel button:hover {
    background: rgba(255, 184, 74, 0.12);
    border-color: #ffb84a;
    color: #ffd680;
}
#dev-skip-panel.is-hidden { display: none; }

/* ============================================================
   CHAPTER END ANNOUNCE — fullscreen blue-void overlay shown BEFORE
   the recap evaluation. Same visual language as #launch-intro-overlay
   so the "konec kapitoly" beat mirrors the "začátek kapitoly" beat.
   ============================================================ */
#chapter-end-announce,
#chapter-end-announce * { box-sizing: border-box; }
#chapter-end-announce {
    position: fixed;
    inset: 0;
    z-index: 999997;            /* just below #chapter-close-screen (999998) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, #1a2358 0%, #0a1340 35%, #050818 75%, #02030a 100%);
}
#chapter-end-announce.is-visible { display: flex; }
#chapter-end-announce.is-hidden  {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

#chapter-end-announce .cea-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    text-align: center;
}
#chapter-end-announce .cea-eyebrow {
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #4cc0ff;
    font-weight: 600;
    margin-bottom: 28px;
    text-shadow: 0 0 16px rgba(30, 167, 255, 0.55);
}
#chapter-end-announce .cea-title {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.15;
    margin: 0 0 36px;
    color: #ffffff;
    text-shadow:
        0 0 28px rgba(30, 167, 255, 0.30),
        0 2px 22px rgba(0, 0, 0, 0.85);
}
#chapter-end-announce .cea-title .cea-num { color: #1ea7ff; }
#chapter-end-announce .cea-sub {
    margin: 0 0 38px;
    font-size: 22px;
    line-height: 1.55;
    color: #d4d8e8;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
#chapter-end-announce .cea-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 44px;
    background: #1ea7ff;
    border: none;
    border-radius: 12px;
    color: #001025;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow:
        0 0 32px rgba(30, 167, 255, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
#chapter-end-announce .cea-cta:hover {
    background: #4cc0ff;
    box-shadow:
        0 0 44px rgba(30, 167, 255, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}
#chapter-end-announce .cea-cta:active { transform: translateY(1px); }

/* Stagger fade-in for content (matches launch-intro li-anim pattern) */
#chapter-end-announce .cea-anim {
    opacity: 0;
    transform: translateY(14px);
    animation: cea-line-in 1.2s cubic-bezier(.2, .9, .3, 1.05) forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes cea-line-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CHAPTER RECAP COMPONENT — reusable end-of-chapter screen.
   Data-driven via VRGame._chapterRecapData[N]. Renders:
     hero animation (prev + new → total) → 10 chapter dots
     → N section boxes (stats + entries with dialog HUD clones + commentary)
     → continue button.
   Updated 2026-05-22 — replaces old .ccs__ single-screen layout.
   ============================================================ */
#chapter-close-screen {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: none;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%);
    backdrop-filter: blur(8px);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    animation: ccs-fade .4s ease-out;
    overflow-y: auto;
    color: #e8eaf0;
}
#chapter-close-screen.is-visible { display: block; }
@keyframes ccs-fade { from { opacity: 0; } to { opacity: 1; } }

#chapter-close-screen .ccr-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 32px 80px;
}

/* HEAD */
#chapter-close-screen .ccr-head { text-align: center; margin-bottom: 16px; }
#chapter-close-screen .ccr-eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: #6a7088; font-weight: 600; margin-bottom: 6px;
}
#chapter-close-screen .ccr-title {
    font-size: 30px; font-weight: 800; letter-spacing: -0.5px;
    color: #fff; margin: 0;
}

/* SCORE HERO */
#chapter-close-screen .ccr-hero {
    text-align: center; margin: 40px 0 56px; padding: 30px 0;
}
#chapter-close-screen .ccr-hero-label {
    font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: #6a7088; margin-bottom: 14px; font-weight: 700;
}
#chapter-close-screen .ccr-plus {
    display: block; font-size: 38px; font-weight: 800; color: #5cc998;
    line-height: 1; margin-bottom: 14px; height: 38px;
    opacity: 0; transform: translateY(-12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-shadow: 0 0 24px rgba(92, 201, 152, 0.6);
}
#chapter-close-screen .ccr-plus.visible { opacity: 1; transform: translateY(0); }
#chapter-close-screen .ccr-plus.fading {
    opacity: 0; transform: scale(0.6) translateY(36px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.4, .8, .2, 1);
}
#chapter-close-screen .ccr-num {
    font-size: 140px; font-weight: 900; color: #fff; line-height: 1;
    letter-spacing: -6px; display: inline-block;
    transition: color 0.6s ease, text-shadow 0.6s ease, transform 0.6s ease;
}
#chapter-close-screen .ccr-num.settled {
    color: #5cc998;
    text-shadow: 0 0 56px rgba(92, 201, 152, 0.5);
    animation: ccr-settle .5s ease-out;
}
@keyframes ccr-settle {
    0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); }
}
#chapter-close-screen .ccr-of {
    margin-top: 10px; font-size: 16px; color: #6a7088; letter-spacing: 1px;
}
#chapter-close-screen .ccr-progress {
    margin-top: 22px; font-family: 'Consolas', monospace; font-size: 12px;
    letter-spacing: 2px; text-transform: uppercase; color: #6a7088;
}
#chapter-close-screen .ccr-progress strong { color: #5ea0e6; font-weight: 800; }

#chapter-close-screen .ccr-dots {
    margin-top: 14px; display: flex; justify-content: center; gap: 8px;
}
#chapter-close-screen .ccr-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #262c3d; transition: background 0.3s, transform 0.3s;
}
#chapter-close-screen .ccr-dot.done {
    background: #5cc998; box-shadow: 0 0 8px rgba(92,201,152,0.5);
}
#chapter-close-screen .ccr-dot.now {
    background: #5ea0e6; transform: scale(1.4);
    box-shadow: 0 0 12px rgba(94,160,230,0.7);
}

/* SECTION BOX */
#chapter-close-screen .ccr-box {
    background: #161b27; border: 1px solid #262c3d;
    border-radius: 10px; margin-bottom: 22px; overflow: hidden;
}
#chapter-close-screen .ccr-box-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; border-bottom: 1px solid #262c3d;
    background: #1d2333;
}
#chapter-close-screen .ccr-box-head h2 {
    font-size: 17px; font-weight: 700; color: #fff; margin: 0;
}
#chapter-close-screen .ccr-box-meta { font-size: 12px; color: #9ea4b5; }
#chapter-close-screen .ccr-box-meta strong { color: #e8eaf0; font-weight: 700; }

#chapter-close-screen .ccr-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #262c3d; background: rgba(0,0,0,0.2);
}
#chapter-close-screen .ccr-stat {
    padding: 12px 18px; text-align: center;
    border-right: 1px solid #262c3d;
}
#chapter-close-screen .ccr-stat:last-child { border-right: none; }
#chapter-close-screen .ccr-stat-v {
    font-size: 20px; font-weight: 800; color: #fff;
    line-height: 1; margin-bottom: 4px;
}
#chapter-close-screen .ccr-stat-v.good { color: #5cc998; }
#chapter-close-screen .ccr-stat-v.mid  { color: #ffaa00; }
#chapter-close-screen .ccr-stat-lbl {
    font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
    color: #6a7088; font-weight: 600;
}

/* ENTRY */
#chapter-close-screen .ccr-entry {
    padding: 20px 22px; border-bottom: 1px solid #262c3d;
}
#chapter-close-screen .ccr-entry:last-child { border-bottom: none; }
#chapter-close-screen .ccr-entry-q {
    font-size: 13px; color: #9ea4b5; margin-bottom: 12px;
}
#chapter-close-screen .ccr-entry-q strong { color: #e8eaf0; font-weight: 700; }

/* DIALOG HUD CLONE (matches in-game #dialog-hud) */
#chapter-close-screen .ccr-hud {
    --acc: #1ea7ff; --glow: rgba(30, 167, 255, .50);
    background: #0d1336; border: 2.5px solid var(--acc);
    border-radius: 14px; padding: 14px 20px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 24px var(--glow),
        0 10px 30px rgba(0, 0, 0, .55);
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
}
/* D-291: barvy NPC sladěné s _speakerPalette (meeting / call). */
#chapter-close-screen .ccr-hud.katka  { --acc: #ffd866; --glow: rgba(255, 216, 102, .50); }
#chapter-close-screen .ccr-hud.machac { --acc: #a3e3ff; --glow: rgba(163, 227, 255, .50); }
#chapter-close-screen .ccr-hud.akce   { --acc: #1ea7ff; --glow: rgba(30, 167, 255, .50); }
#chapter-close-screen .ccr-hud.david  { --acc: #1ea7ff; --glow: rgba(30, 167, 255, .50); }
#chapter-close-screen .ccr-hud.tomas  { --acc: #6cc4ff; --glow: rgba(108, 196, 255, .50); }
#chapter-close-screen .ccr-hud.pavel  { --acc: #5cc998; --glow: rgba(92, 201, 152, .50); }
#chapter-close-screen .ccr-hud.petra  { --acc: #ffa657; --glow: rgba(255, 166, 87, .50); }
#chapter-close-screen .ccr-hud.lukas  { --acc: #b0a0ff; --glow: rgba(176, 160, 255, .50); }
#chapter-close-screen .ccr-hud.marketa{ --acc: #f78fb3; --glow: rgba(247, 143, 179, .50); }
#chapter-close-screen .ccr-hud.attacker,
#chapter-close-screen .ccr-hud.datacore { --acc: #ff5e6c; --glow: rgba(255, 94, 108, .50); }
#chapter-close-screen .ccr-hud.system { --acc: #b388ff; --glow: rgba(179, 136, 255, .50); }
#chapter-close-screen .ccr-hud-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--acc); color: #001025;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 19px;
    box-shadow: 0 0 14px var(--glow);
}
#chapter-close-screen .ccr-hud-body { min-width: 0; }
#chapter-close-screen .ccr-hud-speaker {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px;
    color: var(--acc); font-weight: 600; line-height: 1; margin-bottom: 4px;
}
#chapter-close-screen .ccr-hud-text {
    /* D-293: text v barvě NPC + tmavý stín (ne bílý obrys). */
    font-size: 15px; color: var(--acc, #fff); line-height: 1.45; letter-spacing: 0.2px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .85);
}
#chapter-close-screen .ccr-hud-speaker {
    text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}

/* COMMENT */
#chapter-close-screen .ccr-comment {
    display: grid; grid-template-columns: 1fr auto;
    gap: 14px; align-items: start;
    padding: 12px 16px;
    background: rgba(255,255,255,0.025);
    border-left: 3px solid #262c3d; border-radius: 0 6px 6px 0;
}
#chapter-close-screen .ccr-comment.good { border-left-color: #5cc998; }
#chapter-close-screen .ccr-comment.mid  { border-left-color: #ffaa00; }
#chapter-close-screen .ccr-comment.bad  { border-left-color: #e57082; }
#chapter-close-screen .ccr-comment-text {
    font-size: 13.5px; color: #e8eaf0; line-height: 1.65;
}
#chapter-close-screen .ccr-comment-text .lbl { font-weight: 700; }
#chapter-close-screen .ccr-comment.good .ccr-comment-text .lbl { color: #5cc998; }
#chapter-close-screen .ccr-comment.mid  .ccr-comment-text .lbl { color: #ffaa00; }
#chapter-close-screen .ccr-comment.bad  .ccr-comment-text .lbl { color: #e57082; }

#chapter-close-screen .ccr-chip {
    font-family: 'Consolas', monospace; font-size: 13px; font-weight: 800;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(92,201,152,0.14); color: #5cc998;
    border: 1px solid rgba(92,201,152,0.4);
    white-space: nowrap; align-self: start;
}
#chapter-close-screen .ccr-chip.mid { background: rgba(255,170,0,0.14); color: #ffaa00; border-color: rgba(255,170,0,0.4); }
#chapter-close-screen .ccr-chip.bad { background: rgba(229,112,130,0.14); color: #e57082; border-color: rgba(229,112,130,0.4); }

/* CONTINUE */
#chapter-close-screen .ccr-btn {
    display: block; width: 100%; margin-top: 32px;
    padding: 16px;
    background: #5ea0e6; color: #0c1018;
    border: none; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
}
#chapter-close-screen .ccr-btn:hover { transform: translateY(-1px); opacity: 0.92; }

/* ============================================================
   RECAP — PUZZLE RETROSPECTIVE (ch.2+)
   Mirrors in-game .ch2-sev__* / .ch2-pb__ visual language so the
   player sees the SAME graphics they saw during the puzzle.
   ============================================================ */
#chapter-close-screen .ccr-retro-title {
    font-family: 'Consolas', monospace;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6a7088;
    font-weight: 700;
    margin: 14px 0 10px;
}

/* Severity buckets — 1D classification (JISTÉ / PRAVDĚPODOBNÉ / MOŽNÉ) */
#chapter-close-screen .ccr-sev-buckets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: #0d1336;
    border: 1.5px solid rgba(30, 167, 255, .35);
    border-radius: 12px;
    padding: 14px;
}
#chapter-close-screen .ccr-sev-bucket {
    border: 1.5px dashed rgba(30, 167, 255, .25);
    border-radius: 12px;
    background: rgba(13, 19, 54, .55);
    padding: 14px 10px 10px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 220px;
}
#chapter-close-screen .ccr-sev-bucket--cer { background: rgba( 45, 214, 131, .06); }
#chapter-close-screen .ccr-sev-bucket--lik { background: rgba(255, 181,  71, .06); }
#chapter-close-screen .ccr-sev-bucket--pos { background: rgba(255,  92,  92, .06); }
#chapter-close-screen .ccr-sev-bucket-head {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    margin-bottom: 4px;
}
#chapter-close-screen .ccr-sev-glyph {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    color: #001025;
}
#chapter-close-screen .ccr-sev-bucket--cer .ccr-sev-glyph { background: #2dd683; }
#chapter-close-screen .ccr-sev-bucket--lik .ccr-sev-glyph { background: #ffb547; }
#chapter-close-screen .ccr-sev-bucket--pos .ccr-sev-glyph { background: #ff8888; color: #2a0000; }
#chapter-close-screen .ccr-sev-bucket-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #fff;
}
#chapter-close-screen .ccr-sev-bucket-sub {
    font-size: 10.5px;
    color: #8a99c8;
    text-align: center;
    line-height: 1.3;
}
#chapter-close-screen .ccr-sev-chip {
    display: block;
    padding: 8px 10px;
    background: #111a44;
    border: 1.5px solid #1ea7ff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    position: relative;
}
#chapter-close-screen .ccr-sev-chip.is-correct {
    border-color: #2dd683;
    box-shadow: 0 0 10px rgba(45, 214, 131, .25);
}
#chapter-close-screen .ccr-sev-chip.is-wrong {
    border-color: #ff5e6c;
    background: #2a0a14;
    box-shadow: 0 0 10px rgba(255, 94, 108, .45);
}
#chapter-close-screen .ccr-sev-mark {
    position: absolute;
    top: -7px; right: -6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
}
#chapter-close-screen .ccr-sev-chip.is-correct .ccr-sev-mark { background: #2dd683; color: #001025; }
#chapter-close-screen .ccr-sev-chip.is-wrong   .ccr-sev-mark { background: #ff5e6c; color: #fff; }

/* Playbook ordering — vertical numbered steps */
#chapter-close-screen .ccr-proc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#chapter-close-screen .ccr-proc-step {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    background: rgba(92,201,152,0.06);
    border: 1px solid rgba(92,201,152,0.3);
    border-radius: 5px;
}
#chapter-close-screen .ccr-proc-step.is-wrong {
    background: rgba(229,112,130,0.07);
    border-color: rgba(229,112,130,0.45);
}
#chapter-close-screen .ccr-proc-num {
    width: 24px; height: 24px;
    background: #5cc998;
    color: #001025;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Consolas', monospace;
    font-weight: 800;
    font-size: 12px;
}
#chapter-close-screen .ccr-proc-step.is-wrong .ccr-proc-num { background: #e57082; color: #2a0000; }
#chapter-close-screen .ccr-proc-label { font-size: 13px; color: #e8eaf0; font-weight: 600; }
#chapter-close-screen .ccr-proc-label small {
    display: block;
    font-size: 10.5px;
    color: #6a7088;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-top: 1px;
}
#chapter-close-screen .ccr-proc-mark { color: #5cc998; font-size: 14px; font-weight: 800; }
#chapter-close-screen .ccr-proc-step.is-wrong .ccr-proc-mark { color: #e57082; }
#chapter-close-screen .ccr-proc-empty {
    padding: 14px;
    background: rgba(229,112,130,0.07);
    border: 1px dashed rgba(229,112,130,0.35);
    border-radius: 6px;
    text-align: center;
    color: #9ea4b5;
    font-size: 12.5px;
    font-style: italic;
}

/* ============================================================
   RECAP CH.3 — Process Explorer mini retro + Quarantine mini.
   Used inside .ccr-entry / .ccr-comment retro slots.
   ============================================================ */
#chapter-close-screen .ccr-pe-mini {
    border: 1px solid #262c3d;
    border-radius: 8px;
    overflow: hidden;
    background: #0a1018;
    margin-bottom: 8px;
}
#chapter-close-screen .ccr-pe-mini-head {
    background: linear-gradient(180deg, #1a2030 0%, #14182a 100%);
    padding: 6px 12px;
    border-bottom: 1px solid #262c3d;
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: #9ea4b5;
}
#chapter-close-screen .ccr-pe-mini-head strong { color: #e8eaf0; font-weight: 700; }
#chapter-close-screen .ccr-pe-mini-cols {
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-bottom: 1px solid #262c3d;
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1.5fr;
    gap: 8px;
    font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: #6a7088;
    font-weight: 700;
}
#chapter-close-screen .ccr-pe-mini-row {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1.5fr;
    gap: 8px;
    font-size: 12px; color: #9ea4b5;
    align-items: center;
}
#chapter-close-screen .ccr-pe-mini-row:last-child { border-bottom: none; }
#chapter-close-screen .ccr-pe-mini-row.is-correct {
    background: rgba(92, 201, 152, 0.12);
    border-left: 3px solid #5cc998;
    padding-left: 9px;
    color: #e8eaf0;
    font-weight: 600;
}
#chapter-close-screen .ccr-pe-mini-row .pe-name {
    font-weight: 600; color: #e8eaf0;
    display: flex; align-items: center; gap: 6px;
}
#chapter-close-screen .ccr-pe-mini-row .pe-name::before {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    background: linear-gradient(135deg, #1ea7ff 0%, #0a4080 100%);
    border-radius: 2px;
}
#chapter-close-screen .ccr-pe-mini-row.is-correct .pe-name { color: #5cc998; }
#chapter-close-screen .ccr-pe-mini-row.is-correct .pe-name::before {
    background: linear-gradient(135deg, #888 0%, #444 100%);
}
#chapter-close-screen .ccr-pe-mini-row .pe-mark { color: #5cc998; font-weight: 800; margin-left: 4px; }
#chapter-close-screen .ccr-pe-mini-row .pe-path {
    font-family: 'Consolas', monospace; font-size: 11px;
}
#chapter-close-screen .ccr-pe-mini-row .pe-signer { font-size: 11px; }
#chapter-close-screen .ccr-pe-mini-row.is-correct .pe-signer {
    color: #e57082; font-weight: 700;
}
#chapter-close-screen .ccr-pe-mini-row .pe-parent {
    font-family: 'Consolas', monospace; font-size: 11px;
}

/* Score scale legend at bottom of the identify entry */
#chapter-close-screen .ccr-score-scale {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid #262c3d;
    border-radius: 0 6px 6px 0;
    font-size: 12px; color: #6a7088;
}
#chapter-close-screen .ccr-score-scale strong { font-weight: 700; color: #e8eaf0; }
#chapter-close-screen .ccr-score-scale strong.good { color: #5cc998; }
#chapter-close-screen .ccr-score-scale strong.mid  { color: #ffaa00; }
#chapter-close-screen .ccr-score-scale strong.bad  { color: #e57082; }

/* Quarantine mini — decorative outcome shown in "Co následovalo" */
#chapter-close-screen .ccr-qrt-mini {
    background: rgba(255, 181, 71, 0.06);
    border: 1px solid rgba(255, 181, 71, 0.35);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
#chapter-close-screen .ccr-qrt-mini-head {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    color: #ffaa00; font-weight: 700;
    margin-bottom: 8px;
}
#chapter-close-screen .ccr-qrt-mini-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3); border-radius: 5px;
    font-size: 13px;
}
#chapter-close-screen .ccr-qrt-icon { font-size: 18px; }
#chapter-close-screen .ccr-qrt-name { font-weight: 600; color: #e8eaf0; }
#chapter-close-screen .ccr-qrt-name small {
    display: block; font-weight: 400;
    color: #6a7088; font-size: 11px;
    font-family: 'Consolas', monospace; margin-top: 2px;
}
#chapter-close-screen .ccr-qrt-attr {
    font-family: 'Consolas', monospace; font-size: 11px;
    color: #e57082; font-weight: 700;
    padding: 2px 7px;
    background: rgba(229, 112, 130, 0.12);
    border: 1px solid rgba(229, 112, 130, 0.35);
    border-radius: 4px;
}

/* ============================================================
   DEMO END — shown after ch.2 recap CTA. Simple thank-you card.
   ============================================================ */
#demo-end-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, #0e2a52 0%, #04081a 70%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12000;
    color: #e8eaf0;
    font-family: 'Inter', system-ui, sans-serif;
    animation: dem-fade-in .8s ease-out;
}
#demo-end-overlay.is-visible { display: flex; }
@keyframes dem-fade-in { from { opacity: 0; } to { opacity: 1; } }
#demo-end-overlay .dem-card {
    text-align: center;
    padding: 48px 40px;
    max-width: 540px;
}
#demo-end-overlay .dem-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5ea0e6;
    font-weight: 700;
    margin-bottom: 16px;
}
#demo-end-overlay .dem-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    margin-bottom: 18px;
}
#demo-end-overlay .dem-sub {
    font-size: 15px;
    line-height: 1.6;
    color: #9ea4b5;
}

/* ============================================================
   EMAIL SENDING OVERLAY — modern loading card shown during the
   3 s reply wait. Matches the dialog HUD visual language (cyan
   border + navy bg + animated spinner) — replaces the old
   A-Frame "ODESÍLÁNÍ ODPOVĚDI" framed box.
   ============================================================ */
#email-sending-overlay {
    position: fixed;
    /* JS sets top/left each frame via screen-projection of #monitor-screen
       so the loader is anchored ON the monitor (in-screen feel), not
       floating in front of the player's face. */
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    z-index: 99700;          /* above scene, below hint/auth */
    display: none;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
#email-sending-overlay.is-visible { display: block; }
#email-sending-overlay .es-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    min-width: 320px;
    background: #0d1336;
    border: 2.5px solid #1ea7ff;
    border-radius: 14px;
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 28px rgba(30, 167, 255, .50),
        0 10px 36px rgba(0, 0, 0, .60);
    animation: es-card-in .28s cubic-bezier(.2, .9, .3, 1.2);
}
#email-sending-overlay .es-spinner {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 3px solid rgba(30, 167, 255, 0.22);
    border-top-color: #1ea7ff;
    border-radius: 50%;
    animation: es-spin 0.9s linear infinite;
    box-shadow: 0 0 18px rgba(30, 167, 255, 0.45);
}
#email-sending-overlay .es-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#email-sending-overlay .es-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #1ea7ff;
    font-weight: 600;
    line-height: 1;
}
#email-sending-overlay .es-text {
    font-size: 17px;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
@keyframes es-spin {
    to { transform: rotate(360deg); }
}
@keyframes es-card-in {
    /* card is inside #email-sending-overlay (already centered via parent
       transform), so scale-in animates only the inner card. */
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   DIALOG HUD — NPC subtitle bar, matches hint-overlay design.
   Bottom-center desktop overlay. Populated by VRGame.showSubtitle.
   Speaker-color CSS vars set inline by JS per palette entry.
   ============================================================ */
#dialog-hud {
    position: fixed;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99998;             /* below hint (99999), above scene */
    display: none !important;   /* !important so nothing overrides it */
    pointer-events: none;
    padding: 18px 28px;
    min-width: 420px;
    max-width: 760px;
    background: #0d1336;
    border: 2.5px solid var(--dialog-accent, #1ea7ff);
    border-radius: 14px;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 28px var(--dialog-glow, rgba(30, 167, 255, .50)),
        0 10px 36px rgba(0, 0, 0, .60);
    animation: dialog-in .28s cubic-bezier(.2, .9, .3, 1.2);
}
#dialog-hud.is-visible { display: block !important; }

#dialog-hud .dialog-hud__inner {
    display: flex;
    align-items: center;
    gap: 18px;
}
#dialog-hud .dialog-hud__avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dialog-accent, #1ea7ff);
    color: #001025;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 0 18px var(--dialog-glow, rgba(30, 167, 255, .55));
}
#dialog-hud .dialog-hud__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
#dialog-hud .dialog-hud__speaker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--dialog-accent, #1ea7ff);
    font-weight: 600;
    line-height: 1;
}
#dialog-hud .dialog-hud__speaker:empty { display: none; }
#dialog-hud .dialog-hud__text {
    font-size: 17px;
    /* D-293: text v barvě NPC + TMAVÝ STÍN (ne bílý obrys). */
    color: var(--dialog-accent, #1ea7ff);
    text-shadow: 0 2px 5px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .85);
    line-height: 1.45;
    letter-spacing: 0.2px;
}
#dialog-hud .dialog-hud__speaker {
    text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}
/* Blinking caret while typewriter is writing — same as mockup */
#dialog-hud .dialog-hud__text.is-typing::after {
    content: '_';
    margin-left: 2px;
    animation: dialog-caret-blink 0.6s steps(1) infinite;
    color: var(--dialog-accent, #1ea7ff);
}

/* "SKRYT DIALOG  Q" footer hint, bottom-edge, faint */
/* 2026-06-04 — D-161: footer hidden for good (again). Manual dialog
   hide was removed per stakeholder — auto-minimize (chip) is the only
   dismissal. Keep !important so locked showActionPrompt class toggles
   can't resurface it. */
#dialog-hud-footer,
#dialog-hud-footer.is-visible {
    display: none !important;
}
#dialog-hud-footer {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99997;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    color: #6b7396;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
/* D-161: footer button styles removed with the manual hide. */
#dialog-hud-footer kbd {
    background: rgba(30, 167, 255, 0.18);
    border: 1px solid rgba(30, 167, 255, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 11px;
    color: #1ea7ff;
    margin: 0 4px;
    letter-spacing: 0;
}

/* D-155: auto-minimized NPC speech.
   .dialog-collapsed on #dialog-hud hides the bubble (chip takes over);
   must sit AFTER the #dialog-hud.is-visible rules to win the cascade. */
#dialog-hud.dialog-collapsed,
#dialog-hud.dialog-collapsed.is-visible {
    display: none;
}
#dialog-hud-chip {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99996;
    display: none;
    pointer-events: auto;
    cursor: pointer;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: 0.6px;
    color: #cfe7ff;
    background: rgba(13, 19, 54, 0.92);
    border: 1px solid rgba(30, 167, 255, 0.55);
    border-radius: 999px;
    padding: 7px 16px;
    transition: background .15s ease-out;
}
#dialog-hud-chip.is-visible {
    display: block;
}
#dialog-hud-chip:hover {
    background: rgba(30, 167, 255, 0.30);
}

/* D-163 (reverts D-162): left dock didn't read well in the headset —
   dialog is back at bottom-center POV. Blue frame removed.
   D-165: NO box at all — background and avatar gone, text floats free
   with a shadow (parity with the VR canvas paint). Additive override
   of the locked styles — keep AFTER. */
#dialog-hud,
#dialog-hud.is-visible {
    border: none;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
}
#dialog-hud .dialog-hud__inner {
    background: transparent;
    border: none;
    box-shadow: none;
}
#dialog-hud-avatar {
    display: none;
}
#dialog-hud-speaker,
#dialog-hud-text {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
}

@keyframes dialog-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes dialog-caret-blink {
    50% { opacity: 0; }
}

/* ============================================================
   HTML DOCUMENT CLOSE BUTTON — matches Dialog HUD design exactly.
   Stakeholder rule 2026-05-18: no rounded-pill / square blue boxes
   anywhere — every actionable overlay reuses this component shape.
   ============================================================ */
#html-doc-close {
    position: fixed;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    display: none;
    pointer-events: auto;
}
#html-doc-close.is-visible,
#html-doc-close[style*="display: block"] { display: block; }
#html-doc-close-btn {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px 14px 18px;
    min-width: 360px;
    background: #0d1336;
    border: 2.5px solid #1ea7ff;
    border-radius: 14px;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 28px rgba(30, 167, 255, .50),
        0 10px 36px rgba(0, 0, 0, .60);
    transition: transform 0.12s ease-out, box-shadow 0.18s ease-out;
}
#html-doc-close-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 0 36px rgba(30, 167, 255, .65),
        0 14px 42px rgba(0, 0, 0, .65);
}
#html-doc-close-btn .hdc__avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1ea7ff;
    color: #001025;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 0 18px rgba(30, 167, 255, .55);
}
#html-doc-close-btn .hdc__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    flex: 1;
}
#html-doc-close-btn .hdc__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #1ea7ff;
    font-weight: 600;
    line-height: 1;
}
#html-doc-close-btn .hdc__text {
    font-size: 17px;
    color: #ffffff;
    line-height: 1.45;
    letter-spacing: 0.2px;
}
#html-doc-close-btn .hdc__kbd {
    background: rgba(30, 167, 255, 0.18);
    border: 1px solid rgba(30, 167, 255, 0.55);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    color: #1ea7ff;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 600;
}

/* DUPLICATE #email-sending-overlay rules REMOVED 2026-05-19 — the new
   monitor-anchored card+spinner version is defined above (~line 1054).
   These older rules were overriding it due to source-order specificity. */

/* ============================================================
   CABLE PUZZLE — full-screen overlay shown when player picks
   the ROUTER bubble (chooseIsolateRouter). 4 cables hang from
   a wall-mounted router; only ETHERNET (cyan, RJ-45) is correct.
   Wrong picks remove that cable + red feedback; ethernet → pull
   animation + continue endgame dialog.
   All classes prefixed .cp- to avoid global collisions.
   ============================================================ */
#cable-puzzle-overlay {
    position: fixed;
    inset: 0;
    z-index: 999997;
    display: none;
    background:
        radial-gradient(ellipse at 50% 25%, rgba(30,167,255,.05) 0%, transparent 60%),
        linear-gradient(180deg, #1a2148 0%, #0a0e22 60%, #050818 100%);
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #eef2ff;
}
#cable-puzzle-overlay.is-visible { display: block; animation: cp-fade .35s ease-out; }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Header strip */
.cp-header {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    pointer-events: none;
}
.cp-header__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1ea7ff;
    font-weight: 800;
    margin-bottom: 4px;
}
.cp-header__sub {
    font-size: 13px;
    color: #9098c0;
}

/* ===== Router body — close-up wall-mounted unit ===== */
.cp-router {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%) perspective(2000px) rotateX(2deg);
    transform-origin: center top;
    width: 86%;
    max-width: 1300px;
    height: 460px;
    background:
        linear-gradient(180deg, #2a2a32 0%, #1a1a22 50%, #0a0a14 100%);
    border-radius: 10px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.10),
        inset 0 -4px 8px rgba(0,0,0,.7),
        0 16px 48px rgba(0,0,0,.7),
        0 0 80px rgba(0,0,0,.4);
    z-index: 2;
}
.cp-router__antenna {
    position: absolute;
    top: -340px;
    width: 28px;
    height: 400px;
    background: linear-gradient(180deg, #6a6a6a 0%, #2a2a2a 100%);
    border-radius: 999px;
    transform-origin: bottom center;
    box-shadow:
        inset 4px 0 6px rgba(255,255,255,.15),
        inset -4px 0 6px rgba(0,0,0,.5),
        3px 0 12px rgba(0,0,0,.7);
}
.cp-router__antenna--left  { left: 27%;  transform: translateX(-50%) rotate(-10deg); }
.cp-router__antenna--right { right: 27%; transform: translateX(50%)  rotate(10deg); }
.cp-router__front {
    position: absolute;
    inset: 24px 36px;
    background: radial-gradient(ellipse at center, #2a2a38 0%, #161620 100%);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 60px 40px 36px;
    box-shadow: inset 0 4px 20px rgba(0,0,0,.6);
}
.cp-router__leds {
    display: flex;
    gap: 70px;
    flex-shrink: 0;
}
.cp-router__led {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ccffdd, #00ff66 50%, #006633 100%);
    box-shadow:
        0 0 36px rgba(0,255,128,.7),
        0 0 72px rgba(0,255,128,.3),
        inset 0 -8px 16px rgba(0,80,40,.6);
    animation: cp-led-blink 2.4s ease-in-out infinite;
}
.cp-router__led:nth-child(2) { animation-delay: 0.3s; }
.cp-router__led:nth-child(3) { animation-delay: 0.6s; }
.cp-router__led:nth-child(4) { animation-delay: 0.9s; }
@keyframes cp-led-blink {
    0%, 70%, 100% { opacity: 1; }
    80%, 90%      { opacity: 0.5; }
}

/* ===== Cables wrapper ===== */
.cp-cables {
    position: absolute;
    top: 550px;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    max-width: 1300px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    z-index: 1;
}
.cp-cable {
    flex: 1;
    background: transparent;
    border: none;
    cursor: grab;
    padding: 0;
    text-align: center;
    transition: filter 0.2s;
    position: relative;
    font-family: inherit;
    color: inherit;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.cp-cable:hover { filter: brightness(1.25); }
.cp-cable:active { cursor: grabbing; }
.cp-cable.is-wrong .cp-cable__cord { animation: cp-shake .5s; }
.cp-cable.is-correct .cp-cable__top-plug,
.cp-cable.is-correct .cp-cable__boot-top,
.cp-cable.is-correct .cp-cable__cord,
.cp-cable.is-correct .cp-cable__boot-bottom,
.cp-cable.is-correct .cp-cable__plug,
.cp-cable.is-pulled .cp-cable__top-plug,
.cp-cable.is-pulled .cp-cable__boot-top,
.cp-cable.is-pulled .cp-cable__cord,
.cp-cable.is-pulled .cp-cable__boot-bottom,
.cp-cable.is-pulled .cp-cable__plug {
    animation: cp-cable-pull 1.8s ease-out forwards;
}
.cp-cable.is-pulled { pointer-events: none; }

/* ===== Cable parts ===== */
.cp-cable__top {
    width: 90px;
    height: 76px;
    margin: 0 auto;
    background: linear-gradient(180deg, #1a1a22 0%, #0a0a10 50%, #050508 100%);
    border-radius: 3px 3px 0 0;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,.8),
        inset 2px 0 4px rgba(0,0,0,.6),
        inset -2px 0 4px rgba(0,0,0,.6),
        inset 0 -2px 0 rgba(255,255,255,.05),
        0 4px 8px rgba(0,0,0,.5);
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4px 8px 0;
}
.cp-cable__top-plug {
    width: 100%;
    height: 88%;
    border-radius: 2px;
    margin-bottom: -8px;
    box-shadow:
        inset 0 4px 2px rgba(255,255,255,.28),
        inset 3px 0 4px rgba(255,255,255,.12),
        inset -3px 0 4px rgba(0,0,0,.5),
        inset 0 -6px 12px rgba(0,0,0,.55),
        0 4px 8px rgba(0,0,0,.5);
    position: relative;
    z-index: 2;
}
.cp-cable__boot-top {
    width: 72px;
    height: 22px;
    margin: 0 auto -4px;
    background: linear-gradient(180deg, #707080 0%, #4a4a55 100%);
    clip-path: polygon(5% 0%, 95% 0%, 70% 100%, 30% 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,.6);
    position: relative;
    z-index: 1;
}
.cp-cable__boot-top::before {
    content: '';
    position: absolute;
    inset: 2px 0;
    background: repeating-linear-gradient(0deg,
        rgba(255,255,255,.06) 0px,
        rgba(255,255,255,.06) 1px,
        transparent 1px,
        transparent 4px);
}
.cp-cable__cord {
    width: 22px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow:
        inset 4px 0 6px rgba(255,255,255,.14),
        inset -4px 0 6px rgba(0,0,0,.5),
        4px 0 12px rgba(0,0,0,.45);
    position: relative;
    z-index: 1;
}
.cp-cable__cord::after {
    content: '';
    position: absolute;
    left: 28%;
    top: 0;
    bottom: 0;
    width: 22%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.cp-cable__boot-bottom {
    width: 72px;
    height: 20px;
    margin: -4px auto -2px;
    background: linear-gradient(180deg, #4a4a55 0%, #707080 100%);
    clip-path: polygon(30% 0%, 70% 0%, 92% 100%, 8% 100%);
    box-shadow: 0 -4px 8px rgba(0,0,0,.55);
    position: relative;
    z-index: 2;
}
.cp-cable__boot-bottom::before {
    content: '';
    position: absolute;
    inset: 2px 0;
    background: repeating-linear-gradient(0deg,
        rgba(255,255,255,.06) 0px,
        rgba(255,255,255,.06) 1px,
        transparent 1px,
        transparent 4px);
}
.cp-cable__plug {
    width: 72px;
    height: 58px;
    margin: 0 auto;
    border-radius: 3px;
    box-shadow:
        inset 0 4px 2px rgba(255,255,255,.28),
        inset 3px 0 4px rgba(255,255,255,.14),
        inset -3px 0 4px rgba(0,0,0,.5),
        inset 0 -8px 14px rgba(0,0,0,.7),
        0 12px 26px rgba(0,0,0,.75),
        0 4px 8px rgba(0,0,0,.55);
    position: relative;
    z-index: 3;
}
.cp-cable__plug::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85));
    border-radius: 2px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}

/* Cable label below — dialog-HUD style */
.cp-cable__label {
    display: inline-block;
    margin-top: 22px;
    padding: 8px 14px;
    background: #0d1336;
    border: 2px solid #1ea7ff;
    border-radius: 6px;
    font-size: 13px;
    color: #1ea7ff;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 14px rgba(30,167,255,.4),
        0 4px 10px rgba(0,0,0,.5);
}

/* Hover hint */
.cp-cable__hint {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d1336;
    border: 2px solid #1ea7ff;
    color: #1ea7ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 10;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 14px rgba(30,167,255,.4),
        0 4px 10px rgba(0,0,0,.5);
}
.cp-cable:hover .cp-cable__hint { opacity: 1; }

/* ===== Per-cable styling ===== */
.cp-cable--power .cp-cable__top-plug { background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }
.cp-cable--power .cp-cable__boot-top    { width: 72px; }
.cp-cable--power .cp-cable__cord   { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); width: 34px; height: 520px; }
.cp-cable--power .cp-cable__boot-bottom { width: 86px; }
.cp-cable--power .cp-cable__plug   { background: linear-gradient(135deg, #2a2a2a 0%, #050505 100%); width: 86px; height: 68px; }
.cp-cable--power .cp-cable__plug::before { width: 40px; height: 10px; }

.cp-cable--ethernet .cp-cable__top-plug {
    background: linear-gradient(180deg, #7dd0ff 0%, #0a72b3 100%);
    box-shadow:
        inset 0 4px 2px rgba(255,255,255,.4),
        inset 3px 0 4px rgba(255,255,255,.2),
        inset -3px 0 4px rgba(0,0,0,.4),
        inset 0 -6px 12px rgba(0,0,0,.5),
        0 0 24px rgba(30,167,255,.8);
}
.cp-cable--ethernet .cp-cable__boot-top    { width: 72px; }
.cp-cable--ethernet .cp-cable__cord{ background: linear-gradient(180deg, #1ea7ff 0%, #0a72b3 100%); width: 26px; height: 520px; box-shadow: 3px 0 18px rgba(30,167,255,.6); }
.cp-cable--ethernet .cp-cable__boot-bottom { width: 80px; }
.cp-cable--ethernet .cp-cable__plug{ background: linear-gradient(180deg, #7dd0ff 0%, #0a72b3 100%); width: 80px; height: 66px; box-shadow: 0 0 40px rgba(30,167,255,.9); }
.cp-cable--ethernet .cp-cable__plug::before { width: 56px; height: 30px; background: rgba(8,40,70,.7); border-radius: 2px; }
.cp-cable--ethernet .cp-cable__plug::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 6px;
    background: repeating-linear-gradient(90deg, #ffd700 0px, #ffd700 4px, transparent 4px, transparent 7px);
    border-radius: 1px;
}

.cp-cable--usb .cp-cable__top-plug { background: linear-gradient(180deg, #f0f4f8, #6a7488); }
.cp-cable--usb .cp-cable__boot-top    { width: 72px; }
.cp-cable--usb .cp-cable__cord     { background:
    repeating-linear-gradient(45deg, #7a8498 0px, #7a8498 4px, #3a4458 4px, #3a4458 8px),
    repeating-linear-gradient(-45deg, transparent 0px, transparent 4px, rgba(0,0,0,.15) 4px, rgba(0,0,0,.15) 8px);
    width: 18px; height: 520px; }
.cp-cable--usb .cp-cable__boot-bottom { width: 58px; }
.cp-cable--usb .cp-cable__plug     { background: linear-gradient(180deg, #f0f4f8, #6a7488); width: 58px; height: 48px; }
.cp-cable--usb .cp-cable__plug::before { width: 38px; height: 14px; background: rgba(20,20,30,.7); top: 65%; }

.cp-cable--lan .cp-cable__top-plug {
    background: linear-gradient(180deg, #ffe14a 0%, #b08a00 100%);
    box-shadow:
        inset 0 4px 2px rgba(255,255,255,.4),
        inset 3px 0 4px rgba(255,255,255,.2),
        inset -3px 0 4px rgba(0,0,0,.4),
        inset 0 -6px 12px rgba(0,0,0,.5);
}
.cp-cable--lan .cp-cable__boot-top    { width: 72px; }
.cp-cable--lan .cp-cable__cord     { background: linear-gradient(180deg, #ffd700 0%, #b08a00 100%); width: 26px; height: 520px; }
.cp-cable--lan .cp-cable__boot-bottom { width: 80px; }
.cp-cable--lan .cp-cable__plug     { background: linear-gradient(180deg, #ffe14a 0%, #b08a00 100%); width: 80px; height: 66px; }
.cp-cable--lan .cp-cable__plug::before { width: 56px; height: 30px; background: rgba(70,50,0,.7); border-radius: 2px; }
.cp-cable--lan .cp-cable__plug::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 6px;
    background: repeating-linear-gradient(90deg, #4a3a00 0px, #4a3a00 4px, transparent 4px, transparent 7px);
    border-radius: 1px;
}

/* Floor line */
.cp-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, #1a1f3a 0%, #0a0e22 100%);
    border-top: 1px solid rgba(255,255,255,.04);
}

/* Feedback toast — INSIDE the router's dark screen area, sits as a
   flex child below the LEDs. 2026-05-22 v4 (user request) — message
   goes into the grey router panel, not floating above the LEDs.
   --cp-fb-accent / --cp-fb-glow switch per state (cyan → green/red). */
.cp-feedback {
    width: min(640px, 78%);
    margin: 28px auto 0;
    padding: 14px 20px;
    background: #0d1336;
    border: 2.5px solid var(--cp-fb-accent, #1ea7ff);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 28px var(--cp-fb-glow, rgba(30, 167, 255, .50)),
        0 10px 28px rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    z-index: 5;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #fff;
}
.cp-feedback.is-correct,
.cp-feedback.is-wrong { display: flex; animation: cp-fb-in .28s cubic-bezier(.2,.9,.3,1.2); }
.cp-feedback.is-correct {
    --cp-fb-accent: #56e39f;
    --cp-fb-glow: rgba(86, 227, 159, .55);
}
.cp-feedback.is-wrong {
    --cp-fb-accent: #ff3b4a;
    --cp-fb-glow: rgba(255, 59, 74, .55);
}
@keyframes cp-fb-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* The router__front needs to be a flex column so LEDs sit on top
   and the feedback toast sits below them inside the dark panel. */
.cp-router__front {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cp-router__leds {
    display: flex;
    flex-shrink: 0;
}
.cp-feedback__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 2px solid var(--cp-fb-accent, #1ea7ff);
    color: var(--cp-fb-accent, #1ea7ff);
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 0 12px var(--cp-fb-glow, rgba(30, 167, 255, .35));
}
.cp-feedback__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cp-feedback__speaker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--cp-fb-accent, #1ea7ff);
    font-weight: 800;
}
.cp-feedback__text {
    font-size: 15px;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.cp-feedback__text strong { color: var(--cp-fb-accent, #1ea7ff); font-weight: 800; }

/* Once a cable is committed (correct or pulled), suppress its hover
   hint so the cyan label doesn't linger in the empty slot area. */
.cp-cable.is-correct,
.cp-cable.is-pulled {
    pointer-events: none;
}
.cp-cable.is-correct .cp-cable__hint,
.cp-cable.is-pulled  .cp-cable__hint { opacity: 0 !important; }
/* Older translucent-box overrides removed 2026-05-22 v3 — feedback
   now uses the unified dialog-HUD style defined above. */

@keyframes cp-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-8px); }
    75%      { transform: translateX(8px); }
}
@keyframes cp-cable-pull {
    0%   { transform: translateY(0);   opacity: 1; }
    20%  { transform: translateY(30px); opacity: 1; }
    30%  { transform: translateY(26px); opacity: 1; }
    40%  { transform: translateY(30px); opacity: 1; }
    70%  { transform: translateY(30px); opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}

/* ============================================================
   KEYBOARD CAD PUZZLE — shown when player picks KEYBOARD bubble.
   Hologram keyboard appears above the physical keyboard area.
   Player must click Ctrl + Alt + Del (any order). After all 3:
   hologram fades, red "!" SYSTEM UNRESPONSIVE overlay appears,
   then _runCadWrongLoop (Katka feedback + back to bubbles).
   All classes prefixed .kp- (keyboard puzzle).
   ============================================================ */
/* 2026-05-21 — overlay now screen-projects onto a 3D anchor above the
   physical keyboard (CadKbOverlay controller in components.js). Position
   set via JS each frame; no full-screen background anymore. */
#keyboard-puzzle-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999997;
    display: none;
    pointer-events: none; /* container is pointer-transparent; hologram inner gets auto */
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #eef2ff;
}
#keyboard-puzzle-overlay.is-visible { display: block; animation: kp-fade .35s ease-out; }
#keyboard-puzzle-overlay .kp-hologram { pointer-events: auto; }
#keyboard-puzzle-overlay .kp-key       { pointer-events: auto; }
@keyframes kp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Header now sits ABOVE hologram (relative flow). No fixed position. */
.kp-header {
    text-align: center;
    margin-bottom: 12px;
    pointer-events: none;
}
.kp-header__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1ea7ff;
    font-weight: 800;
    margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(30,167,255,.6);
}
.kp-header__sub {
    font-size: 13px;
    color: #9098c0;
    text-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* Hologram keyboard panel — sits inside overlay container, perspective only */
.kp-hologram {
    position: relative;
    transform: perspective(1000px) rotateX(28deg);
    transform-origin: center bottom;
    width: 720px;
    max-width: 86vw;
    padding: 22px 20px 18px;
    background:
        linear-gradient(180deg,
            rgba(30,167,255,.12) 0%,
            rgba(30,167,255,.06) 100%);
    border: 2px solid rgba(30,167,255,.55);
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(30,167,255,.2) inset,
        0 0 60px rgba(30,167,255,.5),
        0 0 120px rgba(30,167,255,.25);
    animation: kp-flicker 4s ease-in-out infinite;
    transition: opacity 0.6s, transform 0.6s;
}
.kp-hologram.is-fading { opacity: 0; transform: perspective(1000px) rotateX(28deg) scale(0.95); transition: opacity 0.6s, transform 0.6s; }
@keyframes kp-flicker {
    0%, 90%, 100% { opacity: 1; }
    92%           { opacity: 0.92; }
    94%           { opacity: 1; }
    96%           { opacity: 0.88; }
}
.kp-hologram::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 2px,
        rgba(30,167,255,.06) 2px,
        rgba(30,167,255,.06) 3px
    );
    border-radius: 12px;
    pointer-events: none;
}
.kp-hologram::after {
    content: 'HOLOGRAM \00b7 KEYBOARD INPUT REQUIRED';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 2px;
    color: #1ea7ff;
    background: #060a22;
    padding: 2px 10px;
    border: 1px solid #1ea7ff;
    border-radius: 4px;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(30,167,255,.5);
}

/* Progress chips */
.kp-progress {
    text-align: center;
    margin-bottom: 12px;
}
.kp-need {
    display: inline-block;
    padding: 4px 11px;
    margin: 0 4px;
    background: rgba(0,0,0,.3);
    border: 1.5px solid rgba(30,167,255,.4);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1ea7ff;
    transition: all 0.2s;
}
.kp-need.is-pressed {
    background: rgba(86, 227, 159, .15);
    border-color: #56e39f;
    color: #56e39f;
}
.kp-need.is-pressed::before { content: '\2713 '; }

/* Keyboard layout */
.kp-keyboard { display: flex; flex-direction: column; gap: 4px; }
.kp-row { display: flex; gap: 4px; justify-content: center; }
.kp-key {
    min-width: 38px;
    height: 36px;
    background: rgba(30,167,255,.08);
    border: 1px solid rgba(30,167,255,.4);
    border-radius: 4px;
    color: #1ea7ff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 6px;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 6px rgba(30,167,255,.7);
}
.kp-key:hover {
    background: rgba(30,167,255,.2);
    box-shadow: 0 0 10px rgba(30,167,255,.6);
    transform: translateY(-1px);
}
.kp-key.is-pressed {
    background: rgba(243,169,58,.3);
    border-color: #f3a93a;
    color: #f3a93a;
    text-shadow: 0 0 8px rgba(243,169,58,.7);
    box-shadow: 0 0 14px rgba(243,169,58,.5);
}
.kp-key--wide  { min-width: 56px; }
.kp-key--xwide { min-width: 80px; }
.kp-key--space { min-width: 200px; }

/* Red "!" SYSTEM UNRESPONSIVE state */
.kp-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: 6;
}
.kp-error.is-visible { opacity: 1; }
.kp-error__bg {
    position: absolute;
    inset: -120px -240px;
    background: radial-gradient(ellipse at center, rgba(255,59,74,.55) 0%, rgba(170,14,30,0) 70%);
    border-radius: 50%;
    animation: kp-error-pulse 0.9s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}
@keyframes kp-error-pulse {
    from { opacity: 0.7; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.06); }
}
.kp-error__mark {
    font-size: 220px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 0 40px rgba(255,80,90,.95),
        0 0 80px rgba(255,80,90,.6);
    animation: kp-mark-flash 0.5s ease-in-out infinite alternate;
}
@keyframes kp-mark-flash {
    from { opacity: 0.85; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.04); }
}
.kp-error__caption {
    margin-top: 14px;
    font-size: 22px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,80,90,.6);
}
.kp-error__sub {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
}

/* ============================================================
   CAD DECODER PUZZLE OVERLAY — v2 per mockup-4. Fictive QWERTY
   keyboard shown as progress tracker; 4 Quest buttons (X/Y/A/B)
   are randomly mapped — 3 to Ctrl/Alt/Del, 1 to decoy. Each
   correct press lights the matching key on the fictive keyboard.
   ============================================================ */
#cad-buttons-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999997;
    display: none;
    padding: 24px 30px 20px;
    width: 96%;
    max-width: 980px;
    background: linear-gradient(180deg, #0d1336 0%, #060a22 100%);
    border: 2.5px solid #1ea7ff;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 28px rgba(30,167,255,.55),
        0 12px 36px rgba(0,0,0,.6);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #fff;
    text-align: center;
}
#cad-buttons-overlay.is-visible { display: block; animation: cb-in .35s cubic-bezier(.2,.9,.3,1.1); }
@keyframes cb-in {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.cb-header { margin-bottom: 16px; }
.cb-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1ea7ff;
    font-weight: 800;
    margin-bottom: 4px;
}
.cb-sub {
    font-size: 13px;
    color: #b6bee0;
}

/* === FICTIVE KEYBOARD (decorative progress tracker) === */
.fkb {
    margin: 0 auto 14px;
    padding: 12px;
    background: rgba(6,10,34,0.75);
    border: 1.5px solid rgba(30,167,255,.45);
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(30,167,255,.18) inset;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.fkb-row { display: flex; gap: 3px; justify-content: center; }
.fkb-key {
    min-width: 28px;
    height: 26px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(30,167,255,.07);
    border: 1px solid rgba(30,167,255,.30);
    color: rgba(30,167,255,.55);
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.fkb-key--w  { min-width: 42px; }
.fkb-key--xw { min-width: 56px; }
.fkb-key--sp { min-width: 140px; }
.fkb-key.is-target {
    color: #1ea7ff;
    border-color: #1ea7ff;
    background: rgba(30,167,255,.15);
    box-shadow: 0 0 8px rgba(30,167,255,.4);
    font-weight: 800;
}
.fkb-key.is-lit {
    color: #56e39f;
    border-color: #56e39f;
    background: rgba(86,227,159,.25);
    box-shadow: 0 0 14px rgba(86,227,159,.85), 0 0 28px rgba(86,227,159,.4);
    text-shadow: 0 0 6px rgba(86,227,159,.9);
    animation: fkb-pulse 1.8s ease-in-out infinite;
}
@keyframes fkb-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(86,227,159,.85), 0 0 28px rgba(86,227,159,.4); }
    50%      { box-shadow: 0 0 22px rgba(86,227,159,1), 0 0 40px rgba(86,227,159,.6); }
}
.fkb-key.is-shake { animation: fkb-shake .35s ease-in-out; }
@keyframes fkb-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* === Header (shared label classes — same dialog-HUD vibe) === */
.ws-header { text-align: center; margin-bottom: 14px; }
.ws-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1ea7ff;
    font-weight: 800;
    margin-bottom: 4px;
}
.ws-sub { font-size: 13px; color: #b6bee0; }

/* === Target chips (CTRL / ALT / DEL list) === */
.ws-targets {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 8px 0 12px;
    font-size: 13px;
    letter-spacing: 1.5px;
}
.ws-target {
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(30,167,255,.10);
    border: 1.5px solid rgba(30,167,255,.55);
    color: #1ea7ff;
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 800;
}
.ws-target.is-found {
    background: rgba(86,227,159,.25);
    border-color: #56e39f;
    color: #56e39f;
    text-decoration: line-through;
    text-decoration-color: rgba(86,227,159,.6);
}

/* === Word search grid === */
.ws-grid {
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: repeat(12, 38px);
    grid-template-rows: repeat(8, 38px);
    gap: 4px;
    justify-content: center;
    user-select: none;
    touch-action: none;
}
.ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30,167,255,.06);
    border: 1.5px solid rgba(30,167,255,.30);
    border-radius: 4px;
    color: rgba(30,167,255,.85);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.ws-cell:hover {
    background: rgba(30,167,255,.15);
    border-color: rgba(30,167,255,.65);
    transform: scale(1.06);
}
.ws-cell.is-start {
    background: rgba(243,169,58,.32);
    border-color: #f3a93a;
    color: #f3a93a;
    box-shadow: 0 0 12px rgba(243,169,58,.6);
}
.ws-cell.is-preview {
    background: rgba(30,167,255,.30);
    border-color: #1ea7ff;
    color: #fff;
    box-shadow: 0 0 10px rgba(30,167,255,.55);
}
.ws-cell.is-found-ctrl {
    background: rgba(86,227,159,.30);
    border-color: #56e39f;
    color: #56e39f;
    box-shadow: 0 0 10px rgba(86,227,159,.5);
    cursor: default;
}
.ws-cell.is-found-alt {
    background: rgba(30,167,255,.35);
    border-color: #5fc3ff;
    color: #5fc3ff;
    box-shadow: 0 0 10px rgba(95,195,255,.5);
    cursor: default;
}
.ws-cell.is-found-del {
    background: rgba(255,202,40,.30);
    border-color: #ffca28;
    color: #ffca28;
    box-shadow: 0 0 10px rgba(255,202,40,.5);
    cursor: default;
}
.ws-cell.is-flash-bad { animation: ws-bad .35s ease-out; }
@keyframes ws-bad {
    0%, 100% { background: rgba(255,59,74,.30); border-color: #ff3b4a; }
    50%      { background: rgba(255,59,74,.6);  border-color: #ff3b4a; }
}

/* === Status / hint === */
.ws-status {
    text-align: center;
    margin: 8px 0 6px;
    min-height: 22px;
    font-size: 14px;
    font-weight: 700;
    color: #b6bee0;
}
.ws-status.is-found { color: #56e39f; }
.ws-status.is-bad   { color: #ff3b4a; }
.ws-status.is-win   { color: #56e39f; text-transform: uppercase; letter-spacing: 1.5px; }
.ws-hint {
    font-size: 11px;
    color: #9098c0;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: center;
}



/* ============================================================ */
/* OUTLET PUZZLE OVERLAY — PC shutdown sub-puzzle (2026-05-22)  */
/* Ported from the standalone design-first mockup. The overlay  */
/* is hidden by default; VRGame._showOutletPuzzle adds the      */
/* .is-visible class to bring it on screen.                     */
/* ============================================================ */
#outlet-puzzle-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9000;
    background:
        radial-gradient(ellipse 65% 50% at 50% 35%, rgba(135, 160, 220, .08) 0%, transparent 70%),
        linear-gradient(180deg, #2a3050 0%, #232a47 55%, #1a2040 100%);
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#outlet-puzzle-overlay.is-visible { display: block; }
#outlet-puzzle-overlay::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 30%, rgba(20, 25, 50, .55) 70%, rgba(10, 15, 35, .8) 100%);
    pointer-events: none; z-index: 1;
}
#outlet-puzzle-overlay .po-field { position: absolute; inset: 0; z-index: 5; }

#outlet-puzzle-overlay .po-strip {
    position: absolute; top: 44%; left: 50%;
    transform: translate(-50%, -50%) perspective(2800px) rotateX(18deg);
    transform-origin: center center;
    width: 940px; height: 210px;
    background: radial-gradient(ellipse at 25% 30%, #ffffff 0%, #f6f6f3 40%, #d9d6cc 100%);
    border-radius: 20px;
    box-shadow: 14px 30px 50px rgba(0,0,0,.65), 2px 6px 14px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(0,0,0,.12), inset 2px 0 4px rgba(255,255,255,.25), inset -2px 0 4px rgba(0,0,0,.08);
    z-index: 5;
}
#outlet-puzzle-overlay .po-strip::before {
    content: ''; position: absolute; top: 50%; right: 100%; margin-right: -10px;
    transform: translateY(-50%); width: 90vw; height: 14px;
    background: linear-gradient(180deg, #f5f3eb 0%, #d2cfc1 100%);
    border-radius: 7px 0 0 7px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -2px 2px rgba(0,0,0,.15), 0 3px 5px rgba(0,0,0,.45);
}
#outlet-puzzle-overlay .po-strip::after {
    content: ''; position: absolute; top: 50%; left: -8px;
    transform: translateY(-50%); width: 22px; height: 30px;
    background: linear-gradient(180deg, #d8d5c8 0%, #a8a59a 100%);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 3px rgba(0,0,0,.3);
}

#outlet-puzzle-overlay .po-switch {
    position: absolute; top: 50%; left: 36px;
    transform: translateY(-50%); width: 78px; height: 108px;
    background: linear-gradient(180deg, #1a1a22 0%, #0a0a14 100%);
    border-radius: 7px; border: 1.5px solid #000;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 7;
}
#outlet-puzzle-overlay .po-switch__rocker {
    position: relative; width: 56px; height: 80px;
    background: linear-gradient(180deg, #ff3b4a 0%, #cc1822 60%, #8a0a14 100%);
    border-radius: 5px;
    box-shadow: inset 0 3px 4px rgba(255,255,255,.3), inset 0 -4px 6px rgba(0,0,0,.4), 0 0 18px rgba(255,59,74,.6);
    transition: transform .25s cubic-bezier(.4,1.6,.5,1), filter .25s;
}
#outlet-puzzle-overlay .po-switch__rocker::before,
#outlet-puzzle-overlay .po-switch__rocker::after {
    position: absolute; left: 50%; transform: translateX(-50%);
    color: rgba(0,0,0,.55); font-weight: 900;
}
#outlet-puzzle-overlay .po-switch__rocker::before { content: 'I'; top: 4px; font-size: 13px; }
#outlet-puzzle-overlay .po-switch__rocker::after  { content: 'O'; bottom: 4px; font-size: 11px; }
#outlet-puzzle-overlay .po-switch__glow {
    position: absolute; inset: -6px; border-radius: 11px;
    box-shadow: 0 0 22px rgba(255,59,74,.65);
    animation: po-switch-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes po-switch-pulse {
    0%, 100% { opacity: .4; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.06); }
}
#outlet-puzzle-overlay .po-switch.is-off .po-switch__rocker {
    transform: rotateX(180deg);
    filter: saturate(.3) brightness(.55);
}
#outlet-puzzle-overlay .po-switch.is-off .po-switch__glow { display: none; }

#outlet-puzzle-overlay .po-sockets {
    position: absolute; top: 50%; left: 150px; transform: translateY(-50%);
    display: flex; gap: 38px;
}
#outlet-puzzle-overlay .po-socket { position: relative; width: 138px; height: 138px; }
#outlet-puzzle-overlay .po-socket__recess {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #1a1a22 0%, #0a0a14 60%, #050810 100%);
    box-shadow: inset 0 6px 14px rgba(0,0,0,.85), inset 0 -3px 6px rgba(255,255,255,.04), inset 0 0 0 3px #e8e4d8, inset 0 0 0 5px rgba(0,0,0,.12);
}
#outlet-puzzle-overlay .po-socket__hole {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    top: 50%; transform: translateY(-50%);
    background: radial-gradient(circle, #000 30%, #1a1d28 100%);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.9);
}
#outlet-puzzle-overlay .po-socket__hole--left  { left: calc(50% - 22px); }
#outlet-puzzle-overlay .po-socket__hole--right { right: calc(50% - 22px); }
#outlet-puzzle-overlay .po-socket__earth {
    position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: #555;
    box-shadow: inset 0 0 0 .5px rgba(0,0,0,.6);
}

#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch {
    position: absolute; inset: 4px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 32%, #f7f4ec 0%, #ddd9cb 50%, #b8b3a3 92%, #9a9586 100%);
    box-shadow: inset 0 10px 18px rgba(0,0,0,.35), inset 0 -3px 6px rgba(255,255,255,.45), inset 0 0 0 3px #e8e4d8, inset 0 0 0 5px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.25);
}
#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch::before,
#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch::after {
    content: ''; position: absolute; width: 32px; height: 5px;
    background: linear-gradient(180deg, #aaa 0%, #6a6a6a 50%, #4a4a4a 100%);
    left: 50%; transform: translateX(-50%); border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.25);
}
#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch::before { top: 12px; }
#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch::after  { bottom: 12px; }
#outlet-puzzle-overlay .po-socket__sketch-hole {
    position: absolute; width: 10px; height: 20px; border-radius: 5px;
    background: radial-gradient(ellipse at 50% 30%, #050505 0%, #1a1a1a 70%, #2a2a2a 100%);
    top: 50%; transform: translateY(-50%);
    box-shadow: inset 0 3px 4px rgba(0,0,0,.95), inset 0 -1px 1px rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.25);
}
#outlet-puzzle-overlay .po-socket__sketch-hole--left  { left: calc(50% - 18px); }
#outlet-puzzle-overlay .po-socket__sketch-hole--right { right: calc(50% - 18px); }
#outlet-puzzle-overlay .po-socket--empty .po-socket__sketch .po-socket__sketch-earth {
    position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #888 0%, #3a3a3a 70%, #1a1a1a 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -1px 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.25);
}

#outlet-puzzle-overlay .po-plug {
    position: absolute; width: 150px; height: 165px;
    z-index: 20; cursor: grab; transition: filter .2s;
}
#outlet-puzzle-overlay .po-plug.is-locked { cursor: not-allowed; filter: brightness(.85); }
#outlet-puzzle-overlay .po-plug:hover:not(.is-locked):not(.is-dropped) { filter: brightness(1.12); }
#outlet-puzzle-overlay .po-plug.is-dragging { cursor: grabbing; transition: none; }
#outlet-puzzle-overlay .po-plug.is-dropped  { cursor: default; }
#outlet-puzzle-overlay .po-plug__body {
    position: absolute; inset: 12px 18px 8px;
    background: radial-gradient(ellipse at 35% 22%, #5a5a62 0%, #2a2a30 30%, #0a0a0c 100%);
    border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
    box-shadow: inset 0 5px 0 rgba(255,255,255,.15), inset 0 -10px 18px rgba(0,0,0,.65), inset 6px 0 8px rgba(255,255,255,.06), inset -6px 0 8px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.25);
}
#outlet-puzzle-overlay .po-plug__body::before {
    content: ''; position: absolute; top: 6%; left: 18%; right: 18%; height: 14%;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
    border-radius: 50%; filter: blur(1.5px);
}
#outlet-puzzle-overlay .po-plug__body::after {
    content: ''; position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    width: 22px; height: 14px; background: rgba(0,0,0,.4);
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
}
#outlet-puzzle-overlay .po-plug__pins {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 22px; opacity: 0; transition: opacity .15s;
}
#outlet-puzzle-overlay .po-plug.is-dragging .po-plug__pins,
#outlet-puzzle-overlay .po-plug.is-pulled-out .po-plug__pins,
#outlet-puzzle-overlay .po-plug.is-dropped .po-plug__pins { opacity: 1; }
#outlet-puzzle-overlay .po-plug__label {
    position: absolute; top: 38%; left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    background: #fafaf2; color: #111;
    font-family: 'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
    font-weight: 800; font-size: 20px;
    padding: 3px 9px; border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.05);
    letter-spacing: .5px; line-height: 1; z-index: 6;
    pointer-events: none; user-select: none;
}
#outlet-puzzle-overlay .po-plug__pin {
    width: 12px; height: 32px;
    background: linear-gradient(180deg, #e8e8ee 0%, #b8b8c0 40%, #8a8a90 100%);
    border-radius: 6px;
    box-shadow: inset -2px 0 3px rgba(0,0,0,.4), inset 2px 0 2px rgba(255,255,255,.35), 0 2px 3px rgba(0,0,0,.5);
}
#outlet-puzzle-overlay .po-plug__boot {
    position: absolute; top: calc(100% - 16px); left: 50%;
    width: 38px; height: 32px;
    background: linear-gradient(180deg, #2a2a2a 0%, #111 40%, #000 80%, #000 100%);
    border-radius: 7px 7px 14px 14px / 5px 5px 18px 18px;
    transform: translateX(-50%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.65), inset 3px 0 4px rgba(255,255,255,.05), inset -3px 0 4px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.55);
    z-index: 5; pointer-events: none;
}
#outlet-puzzle-overlay .po-plug__boot::before {
    content: ''; position: absolute; top: 8px; left: 6px; right: 6px; height: 1px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 4px 0 rgba(255,255,255,.08), 0 8px 0 rgba(255,255,255,.07), 0 12px 0 rgba(255,255,255,.06);
}
#outlet-puzzle-overlay .po-plug__boot::after {
    content: ''; position: absolute; top: 4px; left: 30%; width: 4px; height: 70%;
    background: linear-gradient(180deg, rgba(255,255,255,.14), transparent);
    border-radius: 3px; filter: blur(.4px);
}

#outlet-puzzle-overlay .po-cables {
    position: absolute; inset: 0; pointer-events: none; z-index: 10;
}
#outlet-puzzle-overlay .po-cable-path {
    fill: none; stroke: #000; stroke-width: 18;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
}

#outlet-puzzle-overlay .po-feedback {
    position: absolute; top: 40px; left: 50%;
    transform: translateX(-50%);
    width: min(620px, 80%); padding: 16px 22px;
    background: #0d1336;
    border: 2.5px solid var(--po-fb-accent, #1ea7ff);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 28px var(--po-fb-glow, rgba(30,167,255,.50)), 0 10px 28px rgba(0,0,0,.55);
    display: none; align-items: center; gap: 14px; color: #fff; z-index: 30;
}
#outlet-puzzle-overlay .po-feedback.is-correct,
#outlet-puzzle-overlay .po-feedback.is-wrong,
#outlet-puzzle-overlay .po-feedback.is-info {
    display: flex; animation: po-fb-in .28s cubic-bezier(.2,.9,.3,1.2);
}
#outlet-puzzle-overlay .po-feedback.is-correct { --po-fb-accent: #56e39f; --po-fb-glow: rgba(86,227,159,.55); }
#outlet-puzzle-overlay .po-feedback.is-wrong   { --po-fb-accent: #ff3b4a; --po-fb-glow: rgba(255,59,74,.55); }
#outlet-puzzle-overlay .po-feedback.is-info    { --po-fb-accent: #ffd76a; --po-fb-glow: rgba(255,215,106,.55); }
@keyframes po-fb-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
#outlet-puzzle-overlay .po-feedback__avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    border: 2px solid var(--po-fb-accent);
    color: var(--po-fb-accent);
    font-size: 22px; font-weight: 900;
    box-shadow: 0 0 12px var(--po-fb-glow);
}
#outlet-puzzle-overlay .po-feedback__body { display: flex; flex-direction: column; gap: 3px; }
#outlet-puzzle-overlay .po-feedback__speaker {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--po-fb-accent); font-weight: 800;
}
#outlet-puzzle-overlay .po-feedback__text { font-size: 15px; color: #fff; line-height: 1.4; }
#outlet-puzzle-overlay .po-feedback__text strong { color: var(--po-fb-accent); font-weight: 800; }

/* 2026-05-23 — Ch.2 fallback "Open notebook" button. */
#ch2-open-notebook-btn {
    position: fixed;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    z-index: 99998;
    padding: 14px 28px;
    background: linear-gradient(180deg, #1ea7ff 0%, #0a78d4 100%);
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2.5px solid #56e3ff;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(30, 167, 255, .55), 0 8px 22px rgba(0,0,0,.55);
    transition: transform .12s, box-shadow .12s;
    animation: ch2-btn-pulse 1.6s ease-in-out infinite;
}
#ch2-open-notebook-btn.is-visible { display: block; }
#ch2-open-notebook-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 0 36px rgba(30, 167, 255, .85), 0 8px 22px rgba(0,0,0,.6);
}
@keyframes ch2-btn-pulse {
    0%, 100% { box-shadow: 0 0 24px rgba(30, 167, 255, .55), 0 8px 22px rgba(0,0,0,.55); }
    50%      { box-shadow: 0 0 36px rgba(86, 227, 255, .85), 0 8px 22px rgba(0,0,0,.55); }
}

/* ============================================================ */
/* CH.2 TEAMS MEETING — invitation card + meeting room (2026-05-23) */
/* Ported from teams-meeting-mockup.html on Desktop. */
/* ============================================================ */

/* ----- Invitation tooltip — 2026-05-23 v4: single compact button
   styled as a tooltip/toast at the bottom of the viewport. Full card
   visual is on the laptop screen canvas; this is purely the action
   confirm. ----- */
#ch2-invitation {
    position: fixed;
    left: 0; right: 0; bottom: 6%;
    z-index: 9500;
    display: none;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    justify-content: center;
    align-items: center;
}
#ch2-invitation.is-visible { display: flex; }
.ch2-invite__actions--floating {
    display: inline-flex;
    pointer-events: auto;
    animation: ch2-invite-in .4s cubic-bezier(.2,.9,.3,1.1);
}
/* Tooltip-shaped action prompt — mirrors #dialog-hud (navy + cyan accent
   + cyan glow + uppercase letter-spaced label). 2026-05-23. */
.ch2-invite__actions--floating .ch2-invite__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 22px;
    border-radius: 14px;
    border: 2.5px solid #1ea7ff;
    background: #0d1336;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 28px rgba(30, 167, 255, .50),
        0 10px 36px rgba(0, 0, 0, .60);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .12s;
    text-align: left;
}
.ch2-invite__actions--floating .ch2-invite__btn:hover {
    transform: translateY(-2px);
    background: #111a44;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 0 34px rgba(30, 167, 255, .75),
        0 14px 40px rgba(0, 0, 0, .65);
}
.ch2-invite__btn-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ch2-invite__btn-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #1ea7ff;
    font-weight: 600;
    line-height: 1;
}
.ch2-invite__btn-text {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
}
/* X key cap — round circle, ch1 prompt style */
.ch2-invite__keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(30, 167, 255, 0.18);
    border: 1.5px solid rgba(30, 167, 255, 0.55);
    border-radius: 50%;
    color: #56e3ff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow:
        0 0 12px rgba(30, 167, 255, .35),
        0 2px 0 rgba(0, 0, 0, .35) inset;
    animation: ch2-keycap-pulse 1.6s ease-in-out infinite;
}
@keyframes ch2-keycap-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(30, 167, 255, .35), 0 2px 0 rgba(0, 0, 0, .35) inset; }
    50%      { box-shadow: 0 0 22px rgba(30, 167, 255, .75), 0 2px 0 rgba(0, 0, 0, .35) inset; }
}
@keyframes ch2-invite-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ch2-invite-card::before {
    content: ''; position: absolute; inset: -3px;
    border-radius: 21px;
    border: 2px solid rgba(30, 167, 255, .4);
    pointer-events: none;
    animation: ch2-invite-pulse 1.6s ease-in-out infinite;
}
@keyframes ch2-invite-pulse {
    0%, 100% { opacity: .25; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.02); }
}
.ch2-invite__header { text-align: center; margin-bottom: 24px; }
.ch2-invite__app {
    font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    color: #5a7aaa; margin-bottom: 4px; font-weight: 600;
}
.ch2-invite__title { font-size: 14px; color: #b8c0d6; font-weight: 500; }
.ch2-invite__title strong { color: #fff; font-weight: 700; }
.ch2-invite__caller { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.ch2-invite__avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, #ff6a4a 0%, #cc3322 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; font-weight: 800; color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    border: 3px solid rgba(255, 255, 255, .15);
    margin-bottom: 14px;
    animation: ch2-avatar-bounce 1.6s ease-in-out infinite;
}
@keyframes ch2-avatar-bounce {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 106, 74, .5); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(255, 106, 74, 0); }
}
.ch2-invite__name { font-size: 22px; font-weight: 800; letter-spacing: .5px; margin-bottom: 4px; color:#fff; }
.ch2-invite__role { font-size: 13px; color: #8a99c8; letter-spacing: .5px; }
.ch2-invite__meeting {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 24px;
}
.ch2-invite__row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; line-height: 1.6;
}
.ch2-invite__label { color: #6a7aa0; font-weight: 600; letter-spacing: .5px; }
.ch2-invite__value { color: #fff; font-weight: 500; }
.ch2-invite__actions { display: flex; gap: 12px; }
.ch2-invite__btn {
    flex: 1; padding: 14px 20px; border: none; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .12s, box-shadow .12s;
}
.ch2-invite__btn--accept {
    background: linear-gradient(180deg, #2dd683 0%, #1aa860 100%);
    color: #fff;
    box-shadow: 0 0 20px rgba(45, 214, 131, .55), 0 6px 18px rgba(0, 0, 0, .5);
}
.ch2-invite__btn--accept:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 30px rgba(45, 214, 131, .8), 0 10px 22px rgba(0, 0, 0, .5); }
.ch2-invite__btn--decline {
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    color: #c8d0e8;
    border: 1px solid rgba(255, 100, 100, .35);
}
.ch2-invite__btn--decline:hover { background: linear-gradient(180deg, #3a2a3e 0%, #2a1a2e 100%); color: #fff; }

/* ============================================================ */
/* CH.2 PUZZLE 1 — SEVERITY MATRIX overlay (2026-05-23)         */
/* Player drags 5 incident indicators into a 3×3 matrix, then   */
/* clicks "Sdílet s týmem" → matrix is mirrored on laptop       */
/* canvas + meeting tiles react via dialog HUD subtitles.       */
/* ============================================================ */
#ch2-severity {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 3vw;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: rgba(5, 7, 20, .45);
    backdrop-filter: blur(2px);
}
#ch2-severity.is-visible { display: flex; }

.ch2-sev__panel {
    pointer-events: auto;
    width: min(960px, 96vw);
    max-height: 92vh;
    background: #0d1336;
    border: 2.5px solid #1ea7ff;
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 40px rgba(30, 167, 255, .35),
        0 18px 60px rgba(0, 0, 0, .7);
    display: flex; flex-direction: column;
    animation: ch2-sev-in .35s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes ch2-sev-in {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ch2-sev__header {
    padding: 20px 28px 16px;
    border-bottom: 1px solid rgba(30, 167, 255, .18);
}
.ch2-sev__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #1ea7ff;
    font-weight: 600;
}
.ch2-sev__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-top: 6px;
    letter-spacing: -.2px;
}
.ch2-sev__hint {
    font-size: 13px;
    color: #8a99c8;
    margin-top: 6px;
}

.ch2-sev__body {
    flex: 1;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 22px 28px;
    overflow: auto;
}
@media (max-width: 780px) {
    .ch2-sev__body { grid-template-columns: 1fr; }
}

.ch2-sev__pool {
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(30, 167, 255, .25);
    border-radius: 12px;
    padding: 14px;
    min-height: 280px;
}
.ch2-sev__pool-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #5a6a99;
    margin-bottom: 12px;
}
.ch2-sev__chip {
    display: block;
    padding: 10px 14px;
    background: #111a44;
    border: 1.5px solid #1ea7ff;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
    cursor: grab;
    user-select: none;
    transition: transform .12s, box-shadow .12s, opacity .12s, border-color .12s;
}
.ch2-sev__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(30, 167, 255, .45);
}
.ch2-sev__chip:active { cursor: grabbing; }
.ch2-sev__chip.is-placed {
    border-color: rgba(86, 227, 255, .65);
    box-shadow: 0 0 12px rgba(30, 167, 255, .45);
}
.ch2-sev__chip.is-selected {
    border-color: #ffb547;
    background: #2a2010;
    box-shadow: 0 0 18px rgba(255, 181, 71, .8);
    transform: scale(1.04);
    animation: ch2-sel-pulse 1.1s ease-in-out infinite;
}
@keyframes ch2-sel-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 181, 71, .8); }
    50%      { box-shadow: 0 0 26px rgba(255, 181, 71, 1); }
}

/* 1D buckets (Jisté / Pravděpodobné / Možné) */
.ch2-sev__buckets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-height: 320px;
}
.ch2-sev__bucket {
    border: 1.5px dashed rgba(30, 167, 255, .25);
    border-radius: 12px;
    background: rgba(13, 19, 54, .55);
    padding: 14px 10px 10px;
    display: flex; flex-direction: column; gap: 8px;
    transition: background .15s, border-color .15s;
}
.ch2-sev__bucket--cer { background: rgba( 45, 214, 131, .06); }
.ch2-sev__bucket--lik { background: rgba(255, 181,  71, .06); }
.ch2-sev__bucket--pos { background: rgba(255,  92,  92, .06); }
.ch2-sev__bucket.is-target {
    background: rgba(30, 167, 255, .14);
    border-color: #56e3ff;
    border-style: solid;
}
.ch2-sev__bucket-header {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    margin-bottom: 4px;
}
.ch2-sev__bucket-glyph {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    color: #001025;
    margin-bottom: 2px;
}
.ch2-sev__bucket--cer .ch2-sev__bucket-glyph { background: #2dd683; }
.ch2-sev__bucket--lik .ch2-sev__bucket-glyph { background: #ffb547; }
.ch2-sev__bucket--pos .ch2-sev__bucket-glyph { background: #ff8888; color: #2a0000; }
.ch2-sev__bucket-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #fff;
}
.ch2-sev__bucket-sub {
    font-size: 10.5px;
    color: #8a99c8;
    text-align: center;
    line-height: 1.3;
}
.ch2-sev__bucket .ch2-sev__chip {
    margin: 0;
    padding: 8px 10px;
    font-size: 12.5px;
    border-width: 1.5px;
}

.ch2-sev__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-top: 1px solid rgba(30, 167, 255, .18);
    background: rgba(0, 0, 0, .25);
    border-radius: 0 0 16px 16px;
}
.ch2-sev__counter {
    font-size: 13px;
    color: #8a99c8;
    font-weight: 600;
    letter-spacing: .3px;
}
.ch2-sev__counter span {
    color: #56e3ff;
    font-weight: 800;
    font-size: 15px;
}
.ch2-sev__share {
    background: linear-gradient(180deg, #56e3ff 0%, #1ea7ff 100%);
    color: #001025;
    border: none;
    border-radius: 12px;
    padding: 12px 26px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(30, 167, 255, .55);
    transition: transform .12s, opacity .12s;
}
.ch2-sev__share:not(:disabled):hover { transform: translateY(-2px); }
.ch2-sev__share:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================ */
/* CH.2 PUZZLE 2 — PLAYBOOK CARDS (na stole před Davidem)       */
/* ============================================================ */
#ch2-playbook {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 3vw;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: rgba(5, 7, 20, .45);
    backdrop-filter: blur(2px);
}
#ch2-playbook.is-visible { display: flex; }

/* Classic navy/cyan styling — matches severity puzzle + dialog HUD */
.ch2-pb__body {
    padding: 22px 28px;
}
.ch2-pb__slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 22px;
    min-height: 130px;
}
.ch2-pb__slot {
    border: 1.5px dashed rgba(30, 167, 255, .35);
    border-radius: 10px;
    background: rgba(13, 19, 54, .55);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px;
    position: relative;
    min-height: 130px;
    transition: border-color .12s, background .12s;
}
.ch2-pb__slot.is-target {
    border-color: #56e3ff;
    background: rgba(30,167,255,.14);
    border-style: solid;
}
.ch2-pb__pool {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 16px 0 4px;
    border-top: 1px dashed rgba(30, 167, 255, .22);
    min-height: 130px;
    position: relative;
}
.ch2-pb__pool:empty::after,
.ch2-pb__pool:not(:has(.ch2-pb__card))::after {
    content: 'Volné karty — sem můžeš vrátit kartu pro přerovnání';
    position: absolute;
    inset: 16px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a6a99;
    font-size: 12px;
    letter-spacing: .5px;
    pointer-events: none;
    font-style: italic;
}
@media (max-width: 880px) {
    .ch2-pb__pool { grid-template-columns: repeat(3, 1fr); }
}
.ch2-pb__card {
    background: #111a44;
    color: #fff;
    border: 1.5px solid #1ea7ff;
    border-radius: 10px;
    padding: 10px 8px;
    box-shadow: 0 0 14px rgba(30, 167, 255, .25);
    cursor: grab;
    user-select: none;
    transition: transform .12s, box-shadow .12s, opacity .12s, border-color .12s, background .12s;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    min-height: 110px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ch2-pb__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(30, 167, 255, .55);
    border-color: #56e3ff;
}
.ch2-pb__card:active { cursor: grabbing; }
.ch2-pb__card.in-slot {
    width: 100%;
    border-color: rgba(86, 227, 255, .65);
    box-shadow: 0 0 14px rgba(30, 167, 255, .45);
}
.ch2-pb__card.is-selected {
    background: #2a2010;
    border-color: #ffb547;
    box-shadow: 0 0 22px rgba(255, 181, 71, .9);
    transform: translateY(-3px) scale(1.04);
    animation: ch2-sel-pulse 1.1s ease-in-out infinite;
}
.ch2-pb__card-glyph {
    font-size: 22px;
    margin-bottom: 4px;
    line-height: 1;
}
.ch2-pb__card-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.2;
    color: #fff;
}
.ch2-pb__card-desc {
    font-size: 9.5px;
    color: #8a99c8;
    margin-top: 3px;
    line-height: 1.25;
}

/* ----- Meeting room overlay ----- */
#ch2-meeting {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    flex-direction: column;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(30, 80, 140, .25) 0%, transparent 70%), linear-gradient(180deg, #0a0e2a 0%, #050714 100%);
    color: #fff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
#ch2-meeting.is-visible { display: flex; }
.ch2-meeting__topbar {
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.ch2-meeting__title {
    font-size: 14px; font-weight: 700; letter-spacing: .5px;
    display: flex; align-items: center; gap: 10px;
}
.ch2-meeting__title::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: #ff4040; box-shadow: 0 0 8px #ff4040;
    animation: ch2-rec-blink 1.2s ease-in-out infinite;
}
@keyframes ch2-rec-blink {
    0%, 100% { opacity: 1; } 50% { opacity: .4; }
}
.ch2-meeting__time {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px; color: #8a99c8; letter-spacing: 1px;
}
.ch2-meeting__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px 24px;
}
@media (min-width: 900px) {
    .ch2-meeting__grid { grid-template-columns: repeat(3, 1fr); }
}
.ch2-tile {
    position: relative;
    background: linear-gradient(180deg, #1a2150 0%, #0d1336 100%);
    border: 2px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 180px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: border-color .25s, box-shadow .25s;
}
.ch2-tile.is-speaking {
    border-color: #56e3ff;
    box-shadow: 0 0 0 1px rgba(86, 227, 255, .35), 0 0 28px rgba(86, 227, 255, .55), 0 6px 18px rgba(0, 0, 0, .35);
    animation: ch2-speak-glow 1.4s ease-in-out infinite;
}
@keyframes ch2-speak-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(86, 227, 255, .35), 0 0 22px rgba(86, 227, 255, .45), 0 6px 18px rgba(0, 0, 0, .35); }
    50%      { box-shadow: 0 0 0 2px rgba(86, 227, 255, .65), 0 0 38px rgba(86, 227, 255, .75), 0 6px 18px rgba(0, 0, 0, .35); }
}
.ch2-tile__avatar {
    width: 82px; height: 82px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800; color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    border: 3px solid rgba(255, 255, 255, .14);
    transition: transform .25s, border-color .25s;
}
.ch2-tile.is-speaking .ch2-tile__avatar { transform: scale(1.06); border-color: rgba(86, 227, 255, .65); }
/* D-399: skutečné fotky avatarů v meeting dlaždicích (cover = ořez do kolečka);
   iniciála skrytá (color transparent) jen tam, kde fotka je. David obrázek nemá → zůstává gradient + "D". */
.ch2-tile[data-speaker="machackova"] .ch2-tile__avatar { background: #11203a url("../assets/avatars/machackova.jpg") center/cover no-repeat; color: transparent; text-shadow: none; }
.ch2-tile[data-speaker="katka"]      .ch2-tile__avatar { background: #11203a url("../assets/avatars/katka.jpg") center/cover no-repeat; color: transparent; text-shadow: none; }
.ch2-tile[data-speaker="tomas"]      .ch2-tile__avatar { background: #11203a url("../assets/avatars/tomas.jpg") center/cover no-repeat; color: transparent; text-shadow: none; }
.ch2-tile[data-speaker="david"]      .ch2-tile__avatar { background: linear-gradient(135deg, #c08aff 0%, #6a3acc 100%); }
.ch2-tile[data-speaker="david"]      { border-color: rgba(192, 138, 255, .3); }
.ch2-tile__name { font-size: 14px; font-weight: 700; letter-spacing: .3px; color: #fff; margin-bottom: 2px; }
.ch2-tile__role { font-size: 11px; color: #8a99c8; letter-spacing: .6px; text-transform: uppercase; }
.ch2-tile__mic {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #6a7aa0;
}
.ch2-tile.is-speaking .ch2-tile__mic {
    background: rgba(86, 227, 255, .25); border-color: #56e3ff; color: #fff;
    animation: ch2-mic-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes ch2-mic-bounce { from { transform: scale(1); } to { transform: scale(1.18); } }
.ch2-tile__wave {
    display: flex; align-items: flex-end; gap: 3px;
    height: 16px; margin-top: 8px;
    opacity: 0; transition: opacity .2s;
}
.ch2-tile.is-speaking .ch2-tile__wave { opacity: 1; }
.ch2-tile__bar { width: 3px; background: #56e3ff; border-radius: 2px; box-shadow: 0 0 6px rgba(86, 227, 255, .8); }
.ch2-tile.is-speaking .ch2-tile__bar:nth-child(1) { animation: ch2-wave 0.45s ease-in-out infinite alternate; }
.ch2-tile.is-speaking .ch2-tile__bar:nth-child(2) { animation: ch2-wave 0.32s ease-in-out infinite alternate; }
.ch2-tile.is-speaking .ch2-tile__bar:nth-child(3) { animation: ch2-wave 0.55s ease-in-out infinite alternate; }
.ch2-tile.is-speaking .ch2-tile__bar:nth-child(4) { animation: ch2-wave 0.38s ease-in-out infinite alternate; }
@keyframes ch2-wave { from { height: 3px; } to { height: 16px; } }

.ch2-meeting__subtitle {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .75) 100%);
    padding: 22px 32px 18px; text-align: center; min-height: 70px;
}
.ch2-meeting__speaker {
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
    color: #56e3ff; font-weight: 800; margin-bottom: 4px;
}
.ch2-meeting__text { font-size: 16px; color: #fff; line-height: 1.5; font-weight: 500; }
.ch2-meeting__controls {
    background: rgba(0, 0, 0, .55);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: center; gap: 14px;
}
.ch2-meeting__ctlbtn {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #c8d0e8; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.ch2-meeting__ctlbtn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.ch2-meeting__ctlbtn--leave {
    background: linear-gradient(180deg, #d04040 0%, #a02020 100%);
    color: #fff; border-color: rgba(255, 80, 80, .55);
    width: auto; padding: 0 22px; border-radius: 24px;
    font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.ch2-meeting__ctlbtn--leave:hover { background: linear-gradient(180deg, #ff5050 0%, #c02020 100%); }


/* ============================================================ */
/* CH.3 PUZZLE 0 — ZASUNOUT USB (DC-IR-KIT into PC tower)        */
/* Front-view closeup of the desktop PC tower. Player picks up   */
/* the USB stick lying on the desk, drags it to one of three     */
/* USB ports. 1st attempt ALWAYS fails (USB returns to desk).    */
/* Player presses B / "↻ Otočit" to flip → 2nd attempt OK.       */
/* No Pavel HUD during the puzzle — visuals do the talking.      */
/* ============================================================ */
#ch3-usb {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: none;
    background:
        radial-gradient(ellipse 35% 28% at 45% 75%, rgba(220, 50, 50, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0c0d18 0%, #161528 40%, #1a1830 55%, #15162a 70%, #08080f 100%);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #e8eaf0;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
#ch3-usb.is-visible { display: block; }

/* Desk surface — very dark navy/black with horizontal laminate joints */
#ch3-usb::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32%;
    background:
        linear-gradient(180deg, #14152a 0%, #0d0e1c 30%, #07070f 100%);
    border-top: 2px solid #000;
    box-shadow:
        inset 0 4px 14px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(120, 120, 160, 0.08);
}
#ch3-usb::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32%;
    background:
        repeating-linear-gradient(180deg,
            transparent 0px, transparent 22px,
            rgba(255, 255, 255, 0.04) 22px, rgba(255, 255, 255, 0.04) 23px,
            transparent 23px, transparent 45px,
            rgba(0, 0, 0, 0.4) 45px, rgba(0, 0, 0, 0.4) 46px);
    pointer-events: none;
    opacity: 0.7;
}

/* Top-left title + top-right attempt counter */
.ch3-usb__title-bar {
    position: absolute; top: 16px; left: 16px;
    font-family: 'Consolas', monospace;
    font-size: 10.5px;
    color: #6a7088;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    z-index: 100;
}
.ch3-usb__title-bar strong { color: #1ea7ff; }
.ch3-usb__attempt-bar {
    position: absolute; top: 16px; right: 16px;
    display: flex; gap: 14px;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #6a7088;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    z-index: 100;
}
.ch3-usb__attempt-bar strong { color: #5cc998; font-size: 14px; }

/* PC TOWER — strict front view, centered */
.ch3-usb__tower {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 460px;
    height: 760px;
    background:
        linear-gradient(135deg, #2b2f48 0%, #1f2236 18%, #14172a 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 1px 0 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        inset -1px 0 0 rgba(0, 0, 0, 0.5),
        0 18px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.ch3-usb__front {
    position: absolute;
    top: 14px; left: 14px; right: 14px; bottom: 14px;
    background: #060810;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.9),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Power button — cyan ring + ⏻ SVG (matches in-game pc-power-button) */
.ch3-usb__power {
    position: absolute;
    top: 90px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 100px;
    background: #060810;
    border: 5px solid #1ea7ff;
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(30, 167, 255, 0.5),
        inset 0 0 14px rgba(30, 167, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
}
.ch3-usb__power svg {
    width: 56px; height: 56px;
    filter: drop-shadow(0 0 6px rgba(30, 167, 255, 0.7));
}
.ch3-usb__power svg circle {
    fill: none; stroke: #1ea7ff; stroke-width: 4; stroke-linecap: round;
}
.ch3-usb__power svg line {
    stroke: #1ea7ff; stroke-width: 4; stroke-linecap: round;
}

/* Green power LED + small blue network LED */
.ch3-usb__led {
    position: absolute;
    top: 230px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 26px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow:
        0 0 16px #00ff88,
        0 0 32px rgba(0, 255, 136, 0.55);
}
.ch3-usb__net-led {
    position: absolute;
    top: 286px; left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 14px;
    background: #88ccff;
    border-radius: 50%;
    box-shadow:
        0 0 10px #88ccff,
        0 0 20px rgba(136, 204, 255, 0.5);
    opacity: 0.9;
}

/* 3 USB-A ports in a row (mid-low on the front) */
.ch3-usb__port-row {
    position: absolute;
    top: 540px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 28px;
}
.ch3-usb__port {
    width: 80px;
    height: 42px;
    background:
        linear-gradient(180deg, #d8dae0 0%, #b0b4bc 50%, #c4c8d0 100%);
    border: 1.5px solid #555a66;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease;
}
.ch3-usb__port::before {
    content: '';
    position: absolute;
    top: 8px; left: 5px; right: 5px;
    height: 22px;
    background: #08090f;
    border-radius: 0.5px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.95);
}
.ch3-usb__port::after {
    content: '';
    position: absolute;
    top: 13px; left: 10px; right: 10px;
    height: 10px;
    background: linear-gradient(180deg, #d8d8d8 0%, #888 100%);
    border-radius: 0.5px;
    box-shadow:
        inset 0 -3px 0 0 #c9a32a,
        0 1px 2px rgba(0, 0, 0, 0.5);
}
.ch3-usb__port.is-target {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 0 0 2px #1ea7ff,
        0 0 16px rgba(30, 167, 255, 0.7);
}

/* Bottom wide slot — SD card / extended port with gold pin row */
.ch3-usb__bottom-slot {
    position: absolute;
    bottom: 90px; left: 50%;
    transform: translateX(-50%);
    width: 330px;
    height: 38px;
    background:
        linear-gradient(180deg, #cfd2da 0%, #9aa0ac 60%, #b8bcc6 100%);
    border: 2px solid #555a66;
    border-radius: 19px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.ch3-usb__bottom-slot::before {
    content: '';
    position: absolute;
    top: 8px; left: 24px; right: 24px;
    height: 20px;
    background: #060810;
    border-radius: 10px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.95);
}
.ch3-usb__bottom-slot::after {
    content: '';
    position: absolute;
    top: 17px; left: 32px; right: 32px;
    height: 3px;
    background: repeating-linear-gradient(90deg,
        #ffd34a 0px, #ffd34a 4px,
        transparent 4px, transparent 8px);
    box-shadow: 0 0 6px rgba(255, 211, 74, 0.5);
}

/* USB STICK — two visuals toggled by .is-held class */
.ch3-usb__stick {
    position: absolute;
    left: 18%; top: 75%;
    width: 170px;
    height: 52px;
    cursor: grab;
    transition: transform 0.4s cubic-bezier(.3, .9, .3, 1), left 0.3s ease, top 0.3s ease;
    z-index: 10;
    transform-origin: center center;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.ch3-usb__stick.is-held {
    width: 100px;
    height: 38px;
    cursor: grabbing;
}
.ch3-usb__stick.is-dragging {
    transition: none;
}
.ch3-usb__stick.is-inserted {
    cursor: default;
}

/* Side view — visible on desk, hidden when held */
.ch3-usb__side {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(.4, .8, .2, 1);
}
.ch3-usb__stick.is-held .ch3-usb__side { display: none; }
.ch3-usb__stick.is-flipped .ch3-usb__side {
    transform: scaleX(-1);
}

/* Keyring loop (back end) */
.ch3-usb__keyring {
    position: absolute;
    left: -2px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background:
        radial-gradient(circle at center, transparent 0 4px, #b8bcc4 4px 8px, transparent 8px);
    border-radius: 50%;
}
/* Plastic body */
.ch3-usb__plastic {
    position: absolute;
    left: 14px; top: 0;
    width: 102px;
    height: 100%;
    background:
        linear-gradient(180deg, #d0d2d8 0%, #a8acb4 50%, #c0c4cc 100%);
    border: 1.5px solid #6a6e78;
    border-radius: 6px 4px 4px 6px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}
.ch3-usb__plastic::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #6a6e78;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ch3-usb__plastic::after {
    content: '';
    position: absolute;
    top: 50%; left: 30px; right: 6px;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
}
/* Metal connector */
.ch3-usb__connector {
    position: absolute;
    left: 114px; top: 10px;
    width: 56px; height: 32px;
    background:
        linear-gradient(180deg, #e0e2e8 0%, #b8bcc4 50%, #d0d4dc 100%);
    border: 1.5px solid #6a6e78;
    border-radius: 1px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}
.ch3-usb__connector::before {
    content: '';
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 18px; height: 10px;
    background: #08090f;
    border-radius: 0.5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* End-on view — visible only when held (the butt of the plug) */
.ch3-usb__end {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, #d8dae0 0%, #a8acb4 50%, #c0c4cc 100%);
    border: 1.5px solid #6a6e78;
    border-radius: 19px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(0, 0, 0, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch3-usb__stick.is-held .ch3-usb__end { display: block; }
.ch3-usb__end-slot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 30%;
    background: #08090f;
    border-radius: 1.5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}
.ch3-usb__end-tongue {
    position: absolute;
    left: 18%; right: 18%;
    top: 18%;
    height: 24%;
    background: linear-gradient(180deg, #c8c8c8 0%, #888 100%);
    border-radius: 0.5px;
    transition: top 0.35s cubic-bezier(.4, .8, .2, 1),
                bottom 0.35s cubic-bezier(.4, .8, .2, 1);
}
.ch3-usb__stick.is-flipped .ch3-usb__end-tongue {
    top: auto;
    bottom: 18%;
}

/* Wiggle on wrong insert */
.ch3-usb__stick.wiggle {
    animation: ch3-usb-wiggle 0.45s ease-in-out;
}
@keyframes ch3-usb-wiggle {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-8px, 0); }
    40%      { transform: translate(8px, 0); }
    60%      { transform: translate(-5px, 0); }
    80%      { transform: translate(5px, 0); }
}

/* Flip hint — cyan circular button + cyan dialog-style label, both
   positioned next to the USB on the desk. Matches the in-game blue UI
   theme (#1ea7ff border, #0d1336 navy bg, glow). Shown only after the
   first failed insert (stakeholder: "až teprve to odmítne na poprvé"). */
.ch3-usb__hint {
    position: absolute;
    top: 66%;
    left: 14%;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 100;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.ch3-usb__hint.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ch3-usb__hint-btn {
    width: 54px; height: 54px;
    background: #0d1336;
    border: 2.5px solid #1ea7ff;
    border-radius: 50%;
    color: #1ea7ff;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    box-shadow:
        0 0 16px rgba(30, 167, 255, 0.45),
        inset 0 0 12px rgba(30, 167, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    line-height: 1;
}
.ch3-usb__hint-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 24px rgba(30, 167, 255, 0.7),
        inset 0 0 16px rgba(30, 167, 255, 0.3);
}
.ch3-usb__hint-label {
    padding: 10px 18px;
    background: #0d1336;
    border: 2px solid #1ea7ff;
    border-radius: 12px;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    box-shadow:
        0 0 14px rgba(30, 167, 255, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex; align-items: center; gap: 8px;
}
.ch3-usb__hint-label kbd {
    background: rgba(30, 167, 255, 0.18);
    border: 1px solid #1ea7ff;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    font-weight: 700;
}

/* Success state — port glows green, network LED turns green */
.ch3-usb__tower.is-inserted .ch3-usb__port.is-target {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.9),
        0 0 0 1.5px #5cc998,
        0 0 22px rgba(92, 201, 152, 0.55);
}
.ch3-usb__tower.is-inserted .ch3-usb__net-led {
    background: #5cc998;
    box-shadow: 0 0 6px #5cc998, 0 0 14px rgba(92, 201, 152, 0.6);
}


/* ============================================================ */
/* CH.3 PUZZLE 1 — DC-IR-KIT BOOT DIAGNOSTIC                     */
/* Overlay that RENDERS ON the in-game #monitor-screen. JS sets  */
/* top/left/width/height each frame to track the 3D monitor's    */
/* projected screen rect. NO fullscreen background — the player  */
/* sees the puzzle as if it's running on the real PC monitor.    */
/* ============================================================ */
#ch3-boot {
    position: fixed;
    top: 0; left: 0; width: 0; height: 0;   /* JS sets per-frame */
    z-index: 9700;
    display: none;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #e8eaf0;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
#ch3-boot.is-visible { display: block; }
.ch3-boot__monitor {
    position: relative;
    width: 100%;
    height: 100%;
    background: #050709;
    border-radius: 2px;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.6),
        inset 0 0 120px rgba(0, 200, 100, 0.04);
    overflow: hidden;
}
.ch3-boot__monitor::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 2px,
        rgba(0, 255, 100, 0.025) 2px, rgba(0, 255, 100, 0.025) 3px);
    pointer-events: none;
    z-index: 50;
}
.ch3-boot__monitor::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 49;
}
.ch3-boot__screen {
    position: relative;
    width: 100%; height: 100%;
    padding: 3% 4%;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #c8e8d8;
    font-size: 11px;
    line-height: 1.45;
    box-sizing: border-box;
    overflow: hidden;
}
.ch3-boot__head {
    border-bottom: 1px solid #1a3025;
    padding-bottom: 8px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.ch3-boot__logo { display: flex; align-items: center; gap: 12px; }
.ch3-boot__logo-box {
    width: 20px; height: 20px;
    border: 1.5px solid #2dd683;
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #2dd683;
    box-shadow: 0 0 6px rgba(45, 214, 131, 0.4);
}
.ch3-boot__logo-text { color: #2dd683; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; }
.ch3-boot__logo-text .dim { color: #6a8878; font-weight: 400; margin-left: 6px; font-size: 9.5px; }
.ch3-boot__meta { font-size: 9px; color: #6a8878; letter-spacing: 0.8px; }
.ch3-boot__meta strong { color: #c8e8d8; }
.ch3-boot__progress-wrap { margin-bottom: 14px; }
.ch3-boot__progress-label {
    font-size: 9px; color: #6a8878;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 4px;
    display: flex; justify-content: space-between;
}
.ch3-boot__progress-label strong { color: #c8e8d8; }
.ch3-boot__progress {
    height: 11px;
    background: #0a1410;
    border: 1px solid #1a3025;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ch3-boot__progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #1a8050 0%, #2dd683 50%, #1a8050 100%);
    transition: width 0.6s ease-out;
    box-shadow: 0 0 10px rgba(45, 214, 131, 0.5);
}
.ch3-boot__progress-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    animation: ch3-boot-shimmer 1.5s linear infinite;
}
@keyframes ch3-boot-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ch3-boot__stages { margin-bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.ch3-boot__stage {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; color: #6a8878;
    transition: color 0.3s;
}
.ch3-boot__stage.done { color: #c8e8d8; }
.ch3-boot__stage.active {
    color: #2dd683;
    animation: ch3-boot-pulse-text 1s ease-in-out infinite;
}
@keyframes ch3-boot-pulse-text {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.ch3-boot__stage-mark { width: 16px; text-align: center; font-weight: 800; }
.ch3-boot__stage.done .ch3-boot__stage-mark { color: #2dd683; }
.ch3-boot__stage.active .ch3-boot__stage-mark { color: #ffb547; }
.ch3-boot__stage-detail {
    margin-left: auto;
    font-size: 9px; color: #6a8878;
    font-style: italic;
}
.ch3-boot__log {
    margin-top: 8px;
    height: 78px;
    overflow: hidden;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #1a3025;
    border-radius: 2px;
    font-size: 9.5px;
    color: #6a8878;
    line-height: 1.5;
}
.ch3-boot__log-line {
    opacity: 0;
    animation: ch3-boot-log-in 0.4s ease forwards;
}
.ch3-boot__log .ts   { color: #4a6858; }
.ch3-boot__log .ok   { color: #2dd683; }
.ch3-boot__log .info { color: #1ea7ff; }
.ch3-boot__log .warn { color: #ffb547; }
@keyframes ch3-boot-log-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ch3-boot__ready {
    display: none;
    text-align: center;
    margin-top: 20px;
}
.ch3-boot__ready.is-visible { display: block; animation: ch3-boot-fade-in 0.6s ease; }
@keyframes ch3-boot-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ch3-boot__ready-title {
    font-size: 20px; color: #2dd683;
    letter-spacing: 3px; font-weight: 800;
    text-shadow: 0 0 14px rgba(45, 214, 131, 0.6);
    margin-bottom: 8px;
}
.ch3-boot__ready-sub {
    font-size: 10px; color: #c8e8d8;
    letter-spacing: 1.2px;
}


/* ============================================================ */
/* CH.3 PUZZLE 2 — PROCESS TRIAGE (Process Explorer)             */
/* Like #ch3-boot — renders ON the in-game monitor. JS sets      */
/* per-frame top/left/width/height. Pointer events on content    */
/* so player can click rows + flag button.                       */
/* ============================================================ */
#ch3-pe {
    position: fixed;
    top: 0; left: 0; width: 0; height: 0;   /* JS sets per-frame */
    z-index: 9700;
    display: none;
    pointer-events: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #e8eaf0;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
#ch3-pe.is-visible { display: block; }
.ch3-pe__monitor {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;   /* let the player click rows + flag button */
    overflow: hidden;
    border-radius: 2px;
}
.ch3-pe__window {
    position: relative;
    width: 100%; height: 100%;
    background: #f0f0f0;
    color: #1a1a22;
    font-family: 'Segoe UI', 'Tahoma', sans-serif;
    font-size: 10px;
    display: flex; flex-direction: column;
}
.ch3-pe__title {
    background: linear-gradient(180deg, #d8d8e0 0%, #b8b8c5 100%);
    padding: 3px 8px;
    border-bottom: 1px solid #888;
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; color: #1a1a22;
}
.ch3-pe__title-icon {
    width: 11px; height: 11px;
    background: #1ea7ff;
    border: 1px solid #0a4080;
    border-radius: 1px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7.5px; font-weight: 800; color: #fff;
}
.ch3-pe__title strong { font-weight: 700; }
.ch3-pe__title-path { margin-left: 4px; color: #5a5a66; font-size: 9px; font-family: 'Consolas', monospace; }
.ch3-pe__title-close {
    margin-left: auto;
    width: 16px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #666;
}
.ch3-pe__menu {
    background: #ebebeb;
    border-bottom: 1px solid #c8c8c8;
    padding: 2px 8px;
    font-size: 9px; color: #2a2a2a;
    display: flex; gap: 10px;
}
.ch3-pe__toolbar {
    background: #f4f4f4;
    border-bottom: 1px solid #d8d8d8;
    padding: 2px 8px;
    display: flex; align-items: center; gap: 5px;
    font-size: 9px; color: #5a5a66;
}
.ch3-pe__tool-icon {
    width: 16px; height: 16px;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #5a5a66;
}
.ch3-pe__tool-icon.active { border-color: #aaa; background: #e8e8e8; }
.ch3-pe__tool-divider { width: 1px; height: 14px; background: #c8c8c8; margin: 0 3px; }
.ch3-pe__tool-status { margin-left: auto; font-size: 8.5px; color: #5a5a66; }
.ch3-pe__table-wrap { flex: 1; overflow-y: auto; background: #f0f0f0; }
.ch3-pe__table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.ch3-pe__table thead th {
    position: sticky; top: 0;
    background: #d8d8e0;
    border-bottom: 1px solid #b0b0b8;
    border-right: 1px solid #c8c8c8;
    padding: 3px 6px;
    text-align: left;
    font-weight: 600; font-size: 9px;
    color: #2a2a2a; white-space: nowrap;
    z-index: 5;
}
.ch3-pe__table thead th:last-child { border-right: none; }
.ch3-pe__table tbody tr {
    border-bottom: 1px solid #e6e6ec;
    cursor: pointer;
    transition: background 0.1s;
}
.ch3-pe__table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.ch3-pe__table tbody tr:hover { background: #cce0ff; }
.ch3-pe__table tbody tr.is-selected { background: #99c2ff; color: #001025; }
.ch3-pe__table tbody tr.is-correct {
    background: rgba(255, 70, 90, 0.35);
    box-shadow: inset 0 0 0 2px #ff3a4d;
}
.ch3-pe__table tbody tr.is-legit {
    background: rgba(30, 167, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(30, 167, 255, 0.40);
}
.ch3-pe__table tbody tr.is-wrong {
    background: rgba(229, 112, 130, 0.30);
    box-shadow: inset 0 0 0 2px #e57082;
}
.ch3-pe__table td {
    padding: 3px 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.ch3-pe__table td.proc-name {
    font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.ch3-pe__proc-icon {
    width: 11px; height: 11px;
    border-radius: 1px; flex-shrink: 0;
}
.ch3-pe__proc-icon.win      { background: linear-gradient(135deg, #1ea7ff 0%, #0a4080 100%); }
.ch3-pe__proc-icon.app      { background: linear-gradient(135deg, #aab 0%, #556 100%); }
.ch3-pe__proc-icon.user     { background: linear-gradient(135deg, #ffd866 0%, #c98800 100%); }
.ch3-pe__proc-icon.unsigned { background: linear-gradient(135deg, #999 0%, #444 100%); }
.ch3-pe__table td.path   { font-family: 'Consolas', monospace; font-size: 9px; color: #2a2a2a; }
.ch3-pe__table td.signer { font-size: 9px; }
.ch3-pe__table td.signer.unsigned { color: #e57082; font-weight: 600; }
.ch3-pe__table td.parent { font-family: 'Consolas', monospace; font-size: 9px; color: #4a4a52; }
.ch3-pe__table td.cpu, .ch3-pe__table td.mem { text-align: right; font-family: 'Consolas', monospace; }
.ch3-pe__table td.mark { width: 18px; text-align: center; font-weight: 800; }
.ch3-pe__table tr.is-correct td.mark { color: #ff3a4d; }
.ch3-pe__table tr.is-correct td.mark::after { content: '⚠'; font-size: 12px; }
.ch3-pe__table tr.is-wrong td.mark { color: #e57082; }
.ch3-pe__table tr.is-wrong td.mark::after { content: '✗'; font-size: 12px; }
.ch3-pe__bottom {
    background: linear-gradient(180deg, #f0f0f0 0%, #dadae0 100%);
    border-top: 1px solid #b0b0b8;
    padding: 5px 10px;
    display: flex; align-items: center; gap: 10px;
    font-size: 9px; color: #5a5a66;
}
.ch3-pe__selected-info { flex: 1; font-family: 'Consolas', monospace; font-size: 9px; }
.ch3-pe__selected-info strong { color: #1a1a22; }
.ch3-pe__flag-btn {
    padding: 4px 10px;
    background: linear-gradient(180deg, #ff9292 0%, #cc3030 100%);
    color: #fff;
    border: 1px solid #802020;
    border-radius: 2px;
    font-family: inherit;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ch3-pe__flag-btn:disabled {
    background: linear-gradient(180deg, #c8c8d0 0%, #989898 100%);
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.7;
}
.ch3-pe__flag-btn:hover:not(:disabled) {
    box-shadow: 0 0 8px rgba(204, 48, 48, 0.5);
}