@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');
:root{
    --touch-min: 44px;
}
html, body {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Share Tech Mono', monospace;
    background: linear-gradient(to bottom, #0f0f0f, #1a1a1a);
    color: #00ffaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    background-image: url('assets/common/background.png');
    background-size: cover;
    background-position: center;

    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 0 0 10px #ff0000;
}
.container {
    max-width: 700px;
    width: 100%;
    background-color: rgba(10, 10, 10, 0.9);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px #ff000088;
    margin-bottom: 30px;
    border: 1px solid #00ffaa55;
}

/* ── Mission header: XML-style <uppdrag N: name /> — grand terminal billboard ── */
h2.task-title {
    margin: 0 0 clamp(18px, 4vw, 28px);
    padding: 0;
    border: none;
    font-weight: inherit;
    line-height: 1.2;
    text-align: center;
}

.task-title-banner {
    --task-h-accent: #00ffaa;
    --task-h-dim: rgba(0, 255, 170, 0.38);
    --task-h-hot: rgba(255, 40, 40, 0.55);

    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: clamp(16px, 3.8vw, 26px) clamp(18px, 4vw, 32px);
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 0.55rem + 2.8vw, 1.72rem);
    letter-spacing: 0.03em;

    background:
        linear-gradient(145deg, rgba(12, 22, 20, 0.97), rgba(6, 10, 12, 0.92)),
        radial-gradient(120% 80% at 10% -20%, rgba(0, 255, 170, 0.12), transparent 55%);
    border-radius: 10px;

    border: 1px solid rgba(0, 255, 170, 0.35);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.65) inset,
        0 0 40px rgba(255, 0, 60, 0.08),
        0 0 52px rgba(0, 255, 170, 0.12),
        0 12px 36px rgba(0, 0, 0, 0.45);

    position: relative;
    overflow: hidden;
    text-align: center;
}

.task-title-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(
        180deg,
        var(--task-h-accent),
        transparent 42%,
        var(--task-h-hot) 100%
    );
    opacity: 0.85;
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.5);
}

.task-title-banner::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 48%,
        transparent 62%
    );
    animation: task-title-shine 12s ease-in-out infinite;
}

.task-title-banner > * {
    position: relative;
    z-index: 1;
}

@keyframes task-title-shine {
    0%, 100% { opacity: 0; transform: translateX(-12%); }
    45%, 55% { opacity: 1; transform: translateX(12%); }
}

@media (prefers-reduced-motion: reduce) {
    .task-title-banner::after {
        animation: none;
        opacity: 0;
    }
}

.task-title-bracket {
    color: var(--task-h-dim);
    font-weight: 600;
    text-shadow: none;
}

.task-title-bracket--close {
    margin-left: 0.12em;
    letter-spacing: 0.06em;
}

.task-title-xmltag {
    color: var(--task-h-accent);
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.12em;
    margin: 0 0.04em;
    text-shadow:
        0 0 12px rgba(0, 255, 170, 0.55),
        0 0 28px rgba(0, 255, 170, 0.25);
}

.task-title-ws {
    white-space: pre;
}

.task-title-slot {
    font-weight: 600;
}

/* Mission index — readable but visually secondary vs. the name */
.task-title-idx {
    color: #7eefc8;
    font-weight: 600;
    text-shadow:
        0 0 8px rgba(0, 255, 170, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Task name — solid high-contrast (gradient clip was hard to read on the dark panel) */
.task-title-mission {
    display: inline;
    color: #f6fffd;
    font-weight: 800;
    font-size: 1.08em;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.95),
        0 1px 0 rgba(0, 0, 0, 1),
        0 2px 6px rgba(0, 0, 0, 0.85),
        0 0 22px rgba(0, 255, 170, 0.45);
}
input[type="text"], input[type="checkbox"], input[type="password"] {
    width: auto;
    font-size: 1em;
    padding: 12px;
    margin: 10px 0;
    background-color: #0f0f0f;
    border: 1px solid #00ffaa55;
    color: #ffffff;
    border-radius: 5px;
}
button {
    padding: 12px 24px;
    background-color: #00ffaa;
    color: #0d1117;
    border: 2px solid #00ffaa;
    cursor: pointer;
    font-size: 1em;
    border-radius: 6px;
    box-shadow: 0 0 15px #00ffaa;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 10px;
}
button:hover {
    background-color: #0d1117;
    color: #00ffaa;
    border-color: #00ffaa;
}
button:active {
    transform: translateY(1px) scale(0.99);
}

/* =========================================================
   Subtle task UI micro-interactions
   - Used by app.js helpers to flash wrong/ok states.
   ========================================================= */
.cs-anim-target {
    will-change: transform, box-shadow, border-color, filter;
}

.cs-wrong {
    animation: csWrongPulse 0.44s ease-out both, csShakeTiny 0.26s ease-out both;
}

.cs-right {
    animation: csRightPulse 0.38s ease-out both;
}

@keyframes csWrongPulse {
    0% {
        box-shadow: 0 0 0 rgba(255, 70, 70, 0);
        border-color: rgba(0, 255, 170, 0.35);
        filter: saturate(1);
    }
    45% {
        box-shadow: 0 0 22px rgba(255, 70, 70, 0.55);
        border-color: rgba(255, 90, 90, 0.9);
        filter: saturate(1.12);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 70, 70, 0);
        border-color: rgba(0, 255, 170, 0.35);
        filter: saturate(1);
    }
}

@keyframes csRightPulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
        filter: saturate(1);
    }
    55% {
        box-shadow: 0 0 22px rgba(0, 255, 170, 0.55);
        filter: saturate(1.08);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
        filter: saturate(1);
    }
}

@keyframes csShakeTiny {
    0% { transform: translateX(0); }
    30% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    button,
    .cs-wrong,
    .cs-right {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.feedback {
    margin-top: 15px;
    font-weight: bold;
}
.codebox {
    background-color: #101010;
    border-left: 4px solid #00ffaa;
    padding: 10px;
    margin: 10px 0;
    font-family: monospace;
    color: #58a6ff;
}
img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 10px;
}
.next-btn {
    display: block;
    margin: 20px auto 0;
    background-color: #003322;
    color: #00ffaa;
    border: 1px solid #00ffaa99;
}
.next-btn:hover {
    background-color: #00ffaa;
    color: #0f0f0f;
}

/* ---------------------------------------------------------
   Codeword notes (paper + handwriting)
   --------------------------------------------------------- */
#codeword-notes {
    --note-line-height: 28px;
    --note-line-offset: 10px;

    position: fixed;
    left: 18px; /* JS will override */
    top: 130px; /* JS will override */
    width: 320px; /* JS may override */
    min-height: 280px;
    height: min(39vh, 380px);
    max-height: calc(100vh - 120px);
    overflow: auto;
    z-index: 40;

    font-family: "Caveat", cursive;
    color: #1b1b1b;

    background:
        linear-gradient(0deg, rgba(0,0,0,0.035), rgba(0,0,0,0.02)),
        repeating-linear-gradient(
            180deg,
            #fffdf4 0px,
            #fffdf4 calc(var(--note-line-height) - 2px),
            rgba(80, 140, 255, 0.12) calc(var(--note-line-height) - 1px),
            #fffdf4 var(--note-line-height)
        );
    background-position: 0 0, 0 var(--note-line-offset);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.18);
    box-shadow:
        0 18px 45px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.35) inset;
    padding: 16px 16px 14px;
}

#codeword-notes.docked-below {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 700px;
    margin: 18px auto 0;
    max-height: none;
}

#codeword-notes.hidden {
    display: none !important;
}

#codeword-notes .cw-notes-group-block {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.22);
}

#codeword-notes .cw-notes-group-block.hidden {
    display: none !important;
}

#codeword-notes .cw-notes-group-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: var(--note-line-height);
    word-break: break-word;
    color: #ff1a1a;
    text-shadow:
        0 0 1px rgba(180, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.25);
}

#codeword-notes .cw-notes-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: var(--note-line-height);
    margin: 0;
}

#codeword-notes .cw-notes-list {
    list-style: disc;
    padding: 0 0 0 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#codeword-notes .cw-notes-item {
    display: list-item;
    line-height: var(--note-line-height);
    padding: 0;
}

#codeword-notes .cw-notes-word {
    font-size: 1.45rem;
    font-weight: 700;
}

@media (max-width: 1100px) {
    #codeword-notes {
        position: static;
        width: 100%;
        max-width: 700px;
        margin: 0 0 18px;
        max-height: none;
    }
}
.drag-item {
    background-color: #0f0f0f;
    border: 1px solid #00ffaa55;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 5px;
    cursor: grab;
}

.drop-zone {
    border: 2px dashed #00ffaa55;
    min-height: 150px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(15, 15, 15, 0.8);
}
.read-more-btn {
    font-size: 0.8em;
    padding: 2px 6px;
    margin-left: 5px;
    background-color: #003322;
    color: #00ffaa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.read-more-btn:hover {
    background-color: #00ffaa;
    color: #0f0f0f;
}

.info-text {
    font-size: 0.9em;
    margin-top: 5px;
    color: #aaffaa;
}
.link-detective-level {
    border: 1px solid #00ffaa33;
    background:
        radial-gradient(circle at top right, rgba(88, 166, 255, 0.12), transparent 35%),
        rgba(4, 18, 16, 0.72);
    border-radius: 14px;
    padding: 22px;
    margin-top: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.link-detective-level--done {
    border-color: #00ffaa88;
    box-shadow: inset 0 0 0 1px #00ffaa22, 0 0 24px rgba(0, 255, 170, 0.08);
}
.link-detective-level--enter {
    animation: linkDetectivePanelIn 0.9s ease-out both;
}
.link-detective-level-label {
    color: #58a6ff;
    font-size: 0.95em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.link-detective-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
.link-detective-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(88, 166, 255, 0.12);
    background: rgba(6, 16, 24, 0.42);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.link-detective-option:hover {
    transform: translateY(-1px);
    border-color: rgba(88, 166, 255, 0.35);
    box-shadow: 0 0 18px rgba(88, 166, 255, 0.08);
}
.link-detective-option input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}
.link-detective-option-text {
    color: #eafffb;
    font-size: 1rem;
    line-height: 1.45;
}
.link-detective-option-text--hinted {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    text-decoration-color: #00ffaa;
    color: #f7fffd;
    text-shadow: 0 0 16px rgba(0, 255, 170, 0.22);
}
.link-detective-domain {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.28);
    letter-spacing: 0.04em;
    word-break: break-all;
    box-shadow: inset 0 0 14px rgba(88, 166, 255, 0.08);
}
.link-detective-domain-text {
    display: inline-block;
    font-size: 1.12rem;
    font-weight: 700;
    color: #dff3ff;
    clip-path: inset(0 0 0 0);
}
.link-detective-level--enter .link-detective-option {
    animation: linkDetectiveOptionIn 0.56s ease both;
    animation-delay: var(--link-option-delay, 0ms);
}
.link-detective-level--enter .link-detective-domain-text {
    animation: linkDetectiveTypingMask 0.68s steps(24, end) both;
    animation-delay: var(--link-option-delay, 0ms);
}
.link-detective-level--enter .link-detective-option--why .link-detective-option-text {
    animation: linkDetectiveWhyTextIn 0.5s ease both;
    animation-delay: var(--link-option-delay, 0ms);
}
.link-detective-hint-btn {
    margin-left: 10px;
    background: rgba(88, 166, 255, 0.14);
    color: #dff3ff;
    border-color: rgba(88, 166, 255, 0.55);
    box-shadow: 0 0 16px rgba(88, 166, 255, 0.18);
}
.link-detective-hint-btn:hover {
    background: #58a6ff;
    color: #081117;
}
.link-detective-why {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px dashed #00ffaa44;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.link-detective-why--enter {
    animation: linkDetectiveWhyPanelIn 0.72s ease-out both;
}

@keyframes linkDetectivePanelIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        box-shadow: 0 0 0 rgba(88, 166, 255, 0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }
}

@keyframes linkDetectiveOptionIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes linkDetectiveTypingMask {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes linkDetectiveWhyPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes linkDetectiveWhyTextIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#task10 {
    max-width: 980px;
}

.ai-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

/* Kontrollera + tip button side by side, same height */
.ai-image-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-image-actions button {
    margin-top: 0;
    flex: 0 0 auto;
    align-self: stretch;
}
.ai-image-grid--intro .ai-image-card,
.ai-image-grid--reshuffle .ai-image-card {
    will-change: transform, opacity, filter;
}
.ai-image-card {
    position: relative;
    margin-top: 0;
    padding: 0;
    width: 100%;
    border: 1px solid #00ffaa33;
    border-radius: 10px;
    background: rgba(8, 18, 18, 0.9);
    box-shadow: none;
    overflow: hidden;
    text-transform: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ai-image-card:hover {
    background: rgba(8, 18, 18, 0.9);
    border-color: #00ffaa66;
    box-shadow: 0 0 10px #00ffaa33;
    transform: translateY(-1px);
}
.ai-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-top: 0;
    border-radius: 0;
}
.ai-image-card-label {
    display: block;
    padding: 8px 10px 10px;
    color: #c9ffef;
    font-size: 0.9em;
    letter-spacing: 0.04em;
}
.ai-image-card.ai-image-card--intro {
    animation: aiImageMaterialize 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--ai-image-order, 0) * 60ms);
}
.ai-image-card.ai-image-card--reshuffle {
    animation: aiImageReshuffleIn 0.42s ease both;
    animation-delay: calc(var(--ai-image-order, 0) * 24ms);
}
.ai-image-card.is-selected {
    border-color: #00ffaa;
    box-shadow: 0 0 26px #00ffaa99, 0 0 0 2px #00ffaa44 inset;
    transform: translateY(-3px) scale(1.01);
}
.ai-image-card.is-selected .ai-image-card-label {
    color: #00ffaa;
    font-weight: 700;
}
.ai-image-card.is-confirmed-correct {
    border-color: #3fb950;
    box-shadow:
        0 0 0 3px rgba(63, 185, 80, 0.48) inset,
        0 0 28px rgba(63, 185, 80, 0.48),
        0 0 52px rgba(63, 185, 80, 0.14);
    cursor: default;
    transform: translateY(-3px) scale(1.01);
}
.ai-image-card.is-confirmed-correct:hover {
    border-color: #3fb950;
    box-shadow:
        0 0 0 3px rgba(63, 185, 80, 0.56) inset,
        0 0 30px rgba(63, 185, 80, 0.52),
        0 0 54px rgba(63, 185, 80, 0.16);
}
.ai-image-card.is-confirmed-correct:disabled {
    opacity: 1;
    color: inherit;
}
.ai-image-card.is-confirmed-correct .ai-image-card-label {
    color: #7ee787;
    font-weight: 800;
}
.ai-image-card.is-hinted {
    border-color: #58a6ff;
    box-shadow:
        0 0 0 3px rgba(88, 166, 255, 0.28) inset,
        0 0 22px rgba(88, 166, 255, 0.42),
        0 0 42px rgba(88, 166, 255, 0.12);
}
.ai-image-card.is-hinted::after {
    content: "AI";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(88, 166, 255, 0.92);
    color: #081117;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: 0 0 18px rgba(88, 166, 255, 0.38);
}
.ai-image-card.is-confirmed-correct.is-hinted {
    border-color: #3fb950;
    box-shadow:
        0 0 0 3px rgba(63, 185, 80, 0.48) inset,
        0 0 28px rgba(63, 185, 80, 0.48),
        0 0 52px rgba(63, 185, 80, 0.14);
}
.ai-image-card.is-confirmed-correct.is-hinted::after {
    background: rgba(126, 231, 135, 0.94);
    box-shadow: 0 0 18px rgba(126, 231, 135, 0.38);
}

/* Kort felblinkning efter kontroll. Rätt valda AI-bilder ligger kvar gröna. */
.ai-image-card.ai-image-card--flash-wrong {
    border-color: #f85149;
    animation: aiImageFlashWrong 7s ease-out both;
}

@keyframes aiImageFlashWrong {
    0%, 88% {
        border-color: #f85149;
        box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.6) inset, 0 0 24px rgba(248, 81, 73, 0.5);
    }
    100% {
        border-color: #00ffaa33;
        box-shadow: 0 0 0 0 rgba(248, 81, 73, 0), 0 0 0 rgba(248, 81, 73, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-image-card.ai-image-card--flash-wrong {
        animation: none;
    }
    .ai-image-card.ai-image-card--flash-wrong {
        box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.6) inset, 0 0 24px rgba(248, 81, 73, 0.5);
    }
}

@keyframes aiImageMaterialize {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.88);
        filter: blur(12px) saturate(1.6) hue-rotate(-24deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
        filter: blur(0) saturate(1.1) hue-rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes aiImageReshuffleIn {
    0% {
        opacity: 0.25;
        transform: translateY(14px) scale(0.96);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 700px) {
    #task10 {
        max-width: 100%;
    }

    .ai-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#task15 {
    max-width: 920px;
}

.ai-video-briefing {
    margin-bottom: 20px;
}

.ai-video-challenge {
    position: relative;
    border: 1px solid rgba(0, 255, 170, 0.22);
    border-radius: 18px;
    padding: 20px;
    background:
        radial-gradient(circle at top, rgba(88, 166, 255, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(5, 20, 24, 0.96), rgba(8, 12, 18, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 28px rgba(0, 255, 170, 0.08);
}

.ai-video-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.ai-video-scoreboard,
.ai-video-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    min-width: 0;
    border: 1px solid rgba(0, 255, 170, 0.18);
    border-radius: 12px;
    background: rgba(4, 18, 16, 0.72);
}

.ai-video-scoreboard__label,
.ai-video-progress__label,
.ai-video-progress__retry {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
}

.ai-video-scoreboard__label,
.ai-video-progress__retry {
    color: rgba(88, 166, 255, 0.92);
}

.ai-video-scoreboard__value {
    font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.55rem);
    color: #f6fffd;
    text-shadow: 0 0 18px rgba(0, 255, 170, 0.35);
}

.ai-video-progress {
    align-items: flex-end;
}

.ai-video-progress__label {
    color: #d6fff4;
}

.ai-video-progress__retry {
    color: #58a6ff;
}

.ai-video-stage {
    position: relative;
    margin-bottom: 18px;
    border-radius: 18px;
}

.ai-video-stage.ai-video-stage--correct {
    animation: aiVideoGlowSuccess 0.65s ease-out;
}

.ai-video-stage.ai-video-stage--wrong {
    animation: aiVideoGlitchError 0.55s ease-out;
}

.ai-video-frame {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(88, 166, 255, 0.28);
    transition: opacity 0.22s ease, transform 0.22s ease;
    background:
        linear-gradient(135deg, rgba(3, 9, 16, 0.94), rgba(10, 22, 26, 0.96));
    box-shadow:
        inset 0 0 24px rgba(88, 166, 255, 0.1),
        0 14px 34px rgba(0, 0, 0, 0.35);
    min-height: 260px;
}

.ai-video-frame.ai-video-frame--fade-out {
    opacity: 0;
    transform: scale(0.985);
}

.ai-video-frame.ai-video-frame--fade-in {
    animation: aiVideoClipFadeIn 0.32s ease-out;
}

.ai-video-media-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px;
}

.ai-video-media-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.04) 48%, transparent 62%);
    pointer-events: none;
    opacity: 0.55;
}

.ai-video-player {
    display: block;
    width: min(100%, 700px);
    max-height: min(58vh, 520px);
    border-radius: 14px;
    background: #030608;
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.16),
        0 0 28px rgba(88, 166, 255, 0.12);
}

.ai-video-caption {
    position: relative;
    z-index: 1;
    color: #bde8ff;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.ai-video-answer-btn {
    min-height: 64px;
    margin-top: 0;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
}

.ai-video-answer-btn.is-selected {
    background: #0d1117;
    color: #f6fffd;
}

.ai-video-answer-btn.is-correct {
    border-color: #00ffaa;
    box-shadow: 0 0 28px rgba(0, 255, 170, 0.52);
}

.ai-video-answer-btn.is-wrong {
    border-color: #ff5e5e;
    color: #ffd5d5;
    box-shadow: 0 0 24px rgba(255, 94, 94, 0.48);
}

.ai-video-answer-btn:disabled {
    cursor: default;
    opacity: 1;
}

.ai-video-feedback {
    min-height: 1.5em;
    text-align: center;
}

.ai-video-learning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(88, 166, 255, 0.24);
    background: rgba(10, 24, 34, 0.74);
    color: #d7f0ff;
    line-height: 1.55;
}

.ai-video-next-clip-btn {
    min-width: 220px;
}

.ai-video-reference {
    margin-top: 18px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(180, 230, 220, 0.72);
    text-align: center;
}

.ai-video-reference a {
    color: rgba(88, 166, 255, 0.9);
    text-decoration-color: rgba(88, 166, 255, 0.4);
    word-break: break-all;
}

@keyframes aiVideoClipFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes aiVideoGlowSuccess {
    0% {
        transform: translateY(0);
        filter: saturate(1);
    }
    45% {
        transform: translateY(-2px);
        filter: saturate(1.08);
        box-shadow: 0 0 34px rgba(0, 255, 170, 0.34);
    }
    100% {
        transform: translateY(0);
        filter: saturate(1);
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
    }
}

@keyframes aiVideoGlitchError {
    0% {
        transform: translateX(0);
        filter: saturate(1);
    }
    18% {
        transform: translateX(-4px);
        filter: saturate(1.08);
    }
    36% {
        transform: translateX(4px);
    }
    54% {
        transform: translateX(-3px);
        box-shadow: 0 0 28px rgba(255, 94, 94, 0.32);
    }
    72% {
        transform: translateX(3px);
    }
    100% {
        transform: translateX(0);
        filter: saturate(1);
        box-shadow: 0 0 0 rgba(255, 94, 94, 0);
    }
}

@media (max-width: 700px) {
    #task15 {
        max-width: 100%;
    }

    .ai-video-challenge {
        padding: 16px;
    }

    .ai-video-hud,
    .ai-video-actions {
        grid-template-columns: 1fr;
    }

    .ai-video-hud {
        display: grid;
    }

    .ai-video-progress {
        align-items: flex-start;
    }

    .ai-video-answer-btn {
        min-height: 58px;
    }

    .ai-video-player {
        max-height: min(48vh, 420px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-detective-level--enter,
    .link-detective-why--enter,
    .link-detective-level--enter .link-detective-option,
    .link-detective-level--enter .link-detective-domain-text,
    .link-detective-level--enter .link-detective-option--why .link-detective-option-text,
    .ai-image-card.ai-image-card--intro,
    .ai-image-card.ai-image-card--reshuffle {
        animation: none !important;
    }

    .ai-video-frame.ai-video-frame--fade-in,
    .ai-video-stage.ai-video-stage--correct,
    .ai-video-stage.ai-video-stage--wrong {
        animation: none !important;
    }

    .ai-video-frame.ai-video-frame--fade-out {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------
   Task brief / instructions (Dekryptera meddelandet et al.)
   --------------------------------------------------------- */

/* -- Mission briefing banner -- */
.task-briefing {
    position: relative;
    border-left: 3px solid #00ffaa;
    background: linear-gradient(90deg, rgba(0,255,170,0.07) 0%, transparent 100%);
    padding: 14px 18px 14px 20px;
    margin: 18px 0;
    border-radius: 0 8px 8px 0;
}
.task-briefing-tag {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: #00ffaa99;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.task-briefing-text {
    margin: 0;
    color: #d4fff2;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* -- Numbered step list -- */
.task-step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}
.task-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(0, 255, 170, 0.04);
    border: 1px solid #00ffaa22;
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.2s;
}
.task-step-item:hover {
    border-color: #00ffaa55;
}
.task-step-num {
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #00ffaa;
    opacity: 0.35;
    line-height: 1;
    min-width: 2ch;
    letter-spacing: -0.02em;
}
.task-step-body {
    color: #c9ffef;
    font-size: 0.93rem;
    line-height: 1.55;
}
.task-step-body strong {
    color: #ffffff;
}
.task-step-aside {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: #00ffaa88;
    font-style: italic;
}

/* -- Cipher display block -- */
.task-cipher-block {
    margin: 22px 0 10px;
    border: 1px solid #58a6ff44;
    border-radius: 10px;
    overflow: hidden;
}
.task-cipher-tag {
    display: block;
    background: rgba(88, 166, 255, 0.1);
    color: #58a6ff;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-bottom: 1px solid #58a6ff33;
}
.task-cipher-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.6rem;
    letter-spacing: 0.25em;
    color: #58a6ff;
    padding: 16px 20px;
    background: #050e1a;
    text-shadow: 0 0 12px #58a6ff88;
}

/* ── Dekryptera meddelandet (task 1): crypto terminal shell ── */
#task1 .crypto-mission {
    position: relative;
    margin-top: 6px;
    padding: 8px 2px 4px;
    isolation: isolate;
}

#task1 .crypto-mission__fx {
    position: absolute;
    inset: -8px -10px -4px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 14px;
    opacity: 0.88;
}

#task1 .crypto-mission__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 170, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 90% 75% at 50% 35%, black 15%, transparent 72%);
    animation: crypto-grid-drift 24s linear infinite;
}

@keyframes crypto-grid-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-20px, -20px); }
}

#task1 .crypto-mission__sweep {
    position: absolute;
    inset: -35% -20%;
    background: linear-gradient(
        100deg,
        transparent 36%,
        rgba(88, 166, 255, 0.08) 47%,
        rgba(0, 255, 170, 0.06) 50%,
        rgba(88, 166, 255, 0.08) 53%,
        transparent 64%
    );
    animation: crypto-sweep 11s ease-in-out infinite;
}

@keyframes crypto-sweep {
    0%, 100% { transform: translateX(-18%) skewX(-1deg); opacity: 0.4; }
    50% { transform: translateX(14%) skewX(1deg); opacity: 0.9; }
}

#task1 .crypto-mission > .task-briefing {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-left: 3px solid #58a6ff;
    background: linear-gradient(
        115deg,
        rgba(88, 166, 255, 0.12) 0%,
        rgba(0, 255, 170, 0.06) 42%,
        transparent 78%
    );
    border-radius: 0 10px 10px 0;
    box-shadow:
        0 0 28px rgba(88, 166, 255, 0.08),
        inset 0 0 22px rgba(0, 255, 170, 0.04);
    animation: crypto-briefing-edge 5s ease-in-out infinite;
}

@keyframes crypto-briefing-edge {
    0%, 100% { border-left-color: #58a6ff; }
    50% { border-left-color: #00ffaa; }
}

#task1 .crypto-briefing__bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0, 255, 170, 0.5),
        rgba(88, 166, 255, 0.7),
        transparent
    );
    animation: crypto-briefing-scan 4.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes crypto-briefing-scan {
    0%, 100% { transform: translateY(-30%); opacity: 0.3; }
    50% { transform: translateY(30%); opacity: 0.85; }
}

#task1 .crypto-mission > .task-briefing .task-briefing-tag {
    position: relative;
    z-index: 1;
    color: #7ab8ff;
    animation: crypto-tag-glint 6s steps(1, end) infinite;
}

@keyframes crypto-tag-glint {
    0%, 91%, 100% { opacity: 1; }
    93% { opacity: 0.65; }
}

#task1 .crypto-mission > .task-briefing .task-briefing-text {
    position: relative;
    z-index: 1;
}

#task1 .crypto-mission__figure {
    position: relative;
    z-index: 1;
    margin: 20px 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(88, 166, 255, 0.35);
    background: linear-gradient(165deg, rgba(8, 14, 24, 0.95), rgba(4, 10, 8, 0.9));
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.08) inset,
        0 0 32px rgba(88, 166, 255, 0.12);
    animation: crypto-figure-frame 8s ease-in-out infinite;
}

@keyframes crypto-figure-frame {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 255, 170, 0.08) inset,
            0 0 32px rgba(88, 166, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 255, 170, 0.12) inset,
            0 0 44px rgba(88, 166, 255, 0.18);
    }
}

#task1 .crypto-mission__figure-tag {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: rgba(88, 166, 255, 0.65);
    margin-bottom: 10px;
    text-transform: uppercase;
}

#task1 .crypto-mission__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 170, 0.15);
}

#task1 .crypto-mission .task-step-list {
    position: relative;
    z-index: 1;
    margin: 22px 0;
}

#task1 .crypto-mission .task-step-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(88, 166, 255, 0.06), rgba(0, 255, 170, 0.03));
    border-color: rgba(88, 166, 255, 0.28);
    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#task1 .crypto-mission .task-step-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #58a6ff, #00ffaa, transparent);
    opacity: 0.65;
    pointer-events: none;
}

#task1 .crypto-mission .task-step-item:hover {
    border-color: rgba(0, 255, 170, 0.45);
    transform: translateX(3px);
    box-shadow: 0 0 20px rgba(88, 166, 255, 0.12);
}

#task1 .crypto-mission .task-step-num {
    color: #58a6ff;
    opacity: 0.55;
    text-shadow: 0 0 12px rgba(88, 166, 255, 0.35);
    animation: crypto-step-num-pulse 3.5s ease-in-out infinite;
}

#task1 .crypto-mission .task-step-item:nth-child(1) .task-step-num { animation-delay: 0s; }
#task1 .crypto-mission .task-step-item:nth-child(2) .task-step-num { animation-delay: 0.35s; }
#task1 .crypto-mission .task-step-item:nth-child(3) .task-step-num { animation-delay: 0.7s; }

@keyframes crypto-step-num-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.75; }
}

#task1 .crypto-cipher-block.task-cipher-block {
    position: relative;
    z-index: 1;
    margin: 26px 0 12px;
    border: 1px solid rgba(88, 166, 255, 0.45);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(5, 12, 22, 0.65);
    box-shadow:
        0 0 40px rgba(88, 166, 255, 0.12),
        0 0 0 1px rgba(0, 255, 170, 0.08) inset;
    animation: crypto-cipher-frame 7s ease-in-out infinite;
}

@keyframes crypto-cipher-frame {
    0%, 100% {
        box-shadow:
            0 0 40px rgba(88, 166, 255, 0.1),
            0 0 0 1px rgba(0, 255, 170, 0.06) inset;
    }
    50% {
        box-shadow:
            0 0 56px rgba(88, 166, 255, 0.18),
            0 0 72px rgba(0, 255, 170, 0.06),
            0 0 0 1px rgba(0, 255, 170, 0.1) inset;
    }
}

#task1 .crypto-cipher-block .task-cipher-tag {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, rgba(88, 166, 255, 0.18), rgba(0, 255, 170, 0.06));
    letter-spacing: 0.22em;
    animation: crypto-cipher-tag-shine 4.5s ease-in-out infinite;
}

@keyframes crypto-cipher-tag-shine {
    0%, 100% { color: #58a6ff; }
    50% { color: #7af0c7; }
}

#task1 .crypto-cipher-block__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(88, 166, 255, 0.65),
        rgba(0, 255, 170, 0.5),
        transparent
    );
    box-shadow: 0 0 14px rgba(88, 166, 255, 0.35);
    animation: crypto-cipher-scan 6s linear infinite;
    pointer-events: none;
    opacity: 0.75;
}

@keyframes crypto-cipher-scan {
    0% { top: 32px; }
    100% { top: calc(100% - 4px); }
}

#task1 .crypto-cipher-block .task-cipher-text {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #050e1a 0%, #081420 100%);
    letter-spacing: 0.28em;
    animation: crypto-cipher-text-glow 4s ease-in-out infinite;
}

@keyframes crypto-cipher-text-glow {
    0%, 100% {
        color: #58a6ff;
        text-shadow: 0 0 12px #58a6ff66, 0 0 28px rgba(0, 255, 170, 0.15);
    }
    50% {
        color: #79c4ff;
        text-shadow: 0 0 18px #58a6ff99, 0 0 40px rgba(0, 255, 170, 0.22);
    }
}

#task1 .crypto-field-row {
    position: relative;
    z-index: 1;
    margin: 16px 0 12px;
}

#task1 .crypto-field-row input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: #d4f0ff;
    background: rgba(4, 10, 18, 0.92);
    border: 1px solid rgba(88, 166, 255, 0.4);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.06) inset,
        0 0 20px rgba(88, 166, 255, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#task1 .crypto-field-row input[type="text"]::placeholder {
    color: rgba(88, 166, 255, 0.35);
}

#task1 .crypto-field-row input[type="text"]:focus {
    outline: none;
    border-color: rgba(0, 255, 170, 0.5);
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.15) inset,
        0 0 26px rgba(88, 166, 255, 0.2);
}

#task1 .crypto-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

#task1 .crypto-actions button {
    margin: 0;
}

#task1 .crypto-tip {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(88, 166, 255, 0.45);
    background: linear-gradient(
        135deg,
        rgba(88, 166, 255, 0.09) 0%,
        rgba(0, 255, 170, 0.06) 100%
    );
    color: #c9e8ff;
    font-size: 0.9rem;
    line-height: 1.45;
    animation: crypto-tip-halo 5s ease-in-out infinite;
}

@keyframes crypto-tip-halo {
    0%, 100% { box-shadow: 0 0 0 rgba(88, 166, 255, 0); }
    50% { box-shadow: 0 0 18px rgba(88, 166, 255, 0.12); }
}

#task1 .crypto-mission .feedback {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    min-height: 1.2em;
}

/* ---------------------------------------------------------
   Pixelstörning
   --------------------------------------------------------- */
.pixel-brief,
.pixel-mission,
.pixel-agent-feedback,
.pixel-scanner-panel,
.pixel-grid-shell {
    border: 1px solid #00ffaa44;
    background: rgba(4, 18, 16, 0.78);
    border-radius: 12px;
}
.pixel-brief {
    padding: 18px;
    box-shadow: inset 0 0 24px #00ffaa12;
}
.pixel-agent-badge,
.pixel-panel-kicker,
.pixel-grid-label {
    color: #58a6ff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
}
.pixel-mission {
    padding: 14px 16px;
    margin: 16px 0;
    color: #c9ffef;
}
.pixel-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr);
    gap: 18px;
    align-items: stretch;
}
.pixel-grid-shell {
    position: relative;
    padding: 16px;
    overflow: hidden;
}
.pixel-grid-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0,255,170,0.12) 48%, transparent 56%);
    animation: pixelScanGrid 2.4s linear infinite;
}
.pixel-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(36px, 1fr));
    gap: 7px;
    max-width: 440px;
    margin: 12px auto 0;
}
.pixel-cell {
    aspect-ratio: 1 / 1;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    margin-top: 0;
    padding: 0;
    border-radius: 7px;
    border: 1px solid #00ffaa33;
    background: #07100e;
    box-shadow: inset 0 0 12px #000;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    touch-action: manipulation;
}
.pixel-cell:hover,
.pixel-cell:focus-visible {
    border-color: #58a6ff;
    box-shadow: 0 0 14px #58a6ff55, inset 0 0 12px #000;
}
.pixel-cell.is-active {
    background: #00ffaa;
    border-color: #aaffdd;
    box-shadow: 0 0 18px #00ffaaaa, inset 0 0 10px #ffffff77;
}
.pixel-cell.is-flashing {
    animation: pixelCellGlitch 0.32s ease-out;
}
.pixel-scanner-panel {
    position: relative;
    overflow: hidden;
    padding: 18px;
    line-height: 1.75;
    box-shadow: inset 0 0 28px #00ffaa12;
}
.pixel-scanner-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 12px,
        rgba(0, 255, 170, 0.05) 13px,
        transparent 15px
    );
}
.pixel-scanner-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 65%, rgba(255,80,80,0.2) 0 1px, transparent 2px),
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,0.04) 9px);
}
.pixel-scanner-panel.is-unstable::after {
    opacity: 0.65;
    animation: pixelStaticShift 0.22s steps(2) infinite;
}
.pixel-identification {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    border: 1px solid #00ffaa;
    border-radius: 999px;
    color: #0d1117;
    background: #00ffaa;
    box-shadow: 0 0 24px #00ffaa99;
    font-weight: 700;
    letter-spacing: 0.16em;
}
.pixel-prob-list {
    display: grid;
    grid-template-columns: max-content 1fr 42px;
    column-gap: 8px;
    row-gap: 9px;
    align-items: center;
    margin: 14px 0 8px;
}
.pixel-prob-row {
    /* Dissolve the row div into the outer grid so all label cells
       share one max-content column — prevents "Sekundärsymbol" overflow. */
    display: contents;
}
.pixel-prob-row.is-highest .pixel-prob-label,
.pixel-prob-row.is-highest .pixel-prob-value {
    color: #ffffff;
    text-shadow: 0 0 10px currentColor;
}
.pixel-prob-track {
    height: 12px;
    border: 1px solid #00ffaa44;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.pixel-prob-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
}
.pixel-prob-fill--x {
    background: linear-gradient(90deg, #008866, #00ffaa);
    box-shadow: 0 0 16px #00ffaa88;
}
.pixel-prob-fill--o {
    background: linear-gradient(90deg, #244bff, #58a6ff);
    box-shadow: 0 0 16px #58a6ff77;
}
.pixel-prob-fill--triangle {
    background: linear-gradient(90deg, #7a3cff, #d16bff);
    box-shadow: 0 0 16px #d16bff77;
}
.pixel-prob-fill--glyph {
    background: linear-gradient(90deg, #cc7700, #ffd060);
    box-shadow: 0 0 16px #ffb03077;
}
.pixel-prob-fill--unknown {
    background: linear-gradient(90deg, #aa1f2d, #ff6666);
    box-shadow: 0 0 16px #ff444477;
}
.pixel-prob-label,
.pixel-prob-value {
    font-size: 0.88rem;
}
.pixel-status {
    margin: 10px 0 0;
    color: #c9ffef;
}
.pixel-challenge-note,
.pixel-scan-details {
    font-size: 0.86rem;
    color: #aaffaa;
    opacity: 0.9;
}
.pixel-challenge-note {
    margin-top: 2px;
}
.pixel-scan-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #00ffaa22;
}
.pixel-phase2-progress-wrap {
    padding: 12px 14px 13px;
    border: 1px solid rgba(255, 150, 30, 0.35);
    border-radius: 10px;
    background: rgba(28, 10, 4, 0.72);
}
.pixel-phase2-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.82rem;
    color: #ffd060;
    letter-spacing: 0.06em;
    margin-bottom: 9px;
}
.pixel-phase2-progress-goal {
    color: #cc9933;
    font-size: 0.78rem;
}
.pixel-phase2-progress-track {
    height: 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 140, 30, 0.28);
    overflow: hidden;
}
.pixel-phase2-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #cc7700, #ffd060);
    box-shadow: 0 0 12px #ffb03055;
    transition: width 0.35s ease;
}
.pixel-phase2-progress-fill--complete {
    background: linear-gradient(90deg, #008866, #00ffaa);
    box-shadow: 0 0 16px #00ffaa66;
}
.pixel-success-box {
    padding: 12px;
    margin-top: 0;
    border: 1px solid #00ffaa88;
    border-radius: 10px;
    color: #d8fff3;
    background: rgba(0, 255, 170, 0.12);
    box-shadow: 0 0 22px #00ffaa44;
    animation: pixelSuccessPop 0.45s ease-out;
}
.pixel-agent-feedback {
    margin-top: 16px;
    padding: 14px 16px;
    color: #d8fff3;
}
.pixel-scanner-panel.pulse-up {
    animation: pixelScannerGood 0.42s ease-out;
}
.pixel-scanner-panel.pulse-down {
    animation: pixelScannerWarn 0.42s ease-out;
}
.pixel-scanner-panel--phase2.pulse-up {
    animation: pixelScannerGoodPhase2 0.42s ease-out;
}
.pixel-scanner-panel--phase2.pulse-down {
    animation: pixelScannerWarnPhase2 0.42s ease-out;
}
.pixel-scanner-panel.is-locked {
    border-color: #00ffaa;
    box-shadow: 0 0 30px #00ffaa55, inset 0 0 28px #00ffaa18;
}

/* Pixelstörning — övergång lag 1 → lag 2 */
.pixel-layout--bridge-busy .pixel-grid button {
    pointer-events: none;
    cursor: default;
}

.pixel-grid-shell--bridge-exit {
    animation: pixelBridgeShellExit 0.78s ease-in forwards;
}

.pixel-layout--bridge-exit .pixel-grid {
    animation: pixelBridgeGridShake 0.78s ease-in-out infinite;
}

.pixel-grid-shell--bridge-enter {
    animation: pixelBridgeShellEnter 0.64s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pixel-grid-shell--bridge-exit::after,
.pixel-grid-shell--bridge-enter::after {
    opacity: 0.14;
    animation: none;
}

.pixel-phase-bridge-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    border-radius: inherit;
}

.pixel-phase-bridge-overlay--exit {
    background: linear-gradient(155deg, rgba(72, 10, 22, 0.78), rgba(14, 4, 8, 0.62));
    animation: pixelBridgeOverlayPulse 0.78s ease-in-out infinite alternate;
}

.pixel-phase-bridge-overlay--pulse {
    background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255, 55, 75, 0.42), rgba(26, 6, 12, 0.82));
    animation: pixelBridgeRevealSweep 0.64s ease-out forwards;
}

.pixel-phase-bridge-overlay__text {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffb8c4;
    text-shadow: 0 0 22px rgba(255, 60, 80, 0.95);
    text-align: center;
    border: 1px solid rgba(255, 110, 130, 0.55);
    padding: 11px 18px;
    border-radius: 10px;
    background: rgba(12, 3, 6, 0.92);
    max-width: 92%;
    line-height: 1.45;
}

.pixel-bridge-scanner-note {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 120, 120, 0.38);
    background: rgba(42, 12, 20, 0.62);
    color: #ffd4dc;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 14px 0 8px;
    position: relative;
    z-index: 1;
}

.pixel-grid-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
    width: 100%;
    min-width: 0;
}

.pixel-layout--phase2 .pixel-grid-column {
    gap: 14px;
}

.pixel-phase2-alert-section {
    margin: 0;
    padding: 13px 16px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 92, 108, 0.56);
    background: rgba(46, 12, 22, 0.93);
    box-shadow:
        inset 0 0 22px rgba(255, 45, 65, 0.14),
        0 0 16px rgba(160, 28, 48, 0.22);
}

.pixel-phase2-alert-section__title {
    margin: 0 0 9px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ff97a8;
    line-height: 1.35;
}

.pixel-phase2-alert-section__body {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #ecd4d8;
}

@keyframes pixelBridgeShellExit {
    from {
        filter: saturate(1) hue-rotate(0deg);
        box-shadow: inset 0 0 28px #00ffaa12;
    }
    to {
        filter: saturate(0.55) hue-rotate(-28deg) brightness(0.86);
        box-shadow: inset 0 0 52px rgba(140, 18, 38, 0.52);
    }
}

@keyframes pixelBridgeShellEnter {
    from {
        opacity: 0.28;
        transform: scale(0.88);
        filter: blur(6px) brightness(1.35);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes pixelBridgeGridShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-2px, 1px);
    }
    60% {
        transform: translate(2px, -1px);
    }
}

@keyframes pixelBridgeOverlayPulse {
    from {
        opacity: 0.82;
    }
    to {
        opacity: 1;
    }
}

@keyframes pixelBridgeRevealSweep {
    from {
        opacity: 0.55;
    }
    to {
        opacity: 1;
    }
}

/* Pixelstörning — sekundär korruption (lag 2), rött läge */

/* Shift surrounding panels (brief, mission copy, agent feedback) to red theme
   when the phase-2 layout is active, without touching the JS render path. */
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-brief,
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-mission,
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-agent-feedback {
    border-color: rgba(255, 68, 100, 0.28);
    background: rgba(22, 8, 12, 0.78);
}
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-brief {
    box-shadow: inset 0 0 24px rgba(255, 0, 0, 0.06);
}
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-mission {
    color: #ffdce2;
}
#pixelstorning-root:has(.pixel-layout--phase2) .pixel-agent-feedback {
    color: #ffd4dc;
}

.pixel-layout--phase2 {
    align-items: start;
}
.pixel-layout--phase2 .pixel-grid-shell--phase2 {
    align-self: start;
    border-color: #ff444488;
    background: rgba(28, 6, 10, 0.85);
    box-shadow: inset 0 0 28px #ff000018;
    padding: 12px 14px 10px;
}
.pixel-layout--phase2 .pixel-grid-shell--phase2::after {
    background: linear-gradient(180deg, transparent 0%, rgba(255,60,80,0.14) 48%, transparent 56%);
    animation-duration: 1.6s;
}
.pixel-layout--phase2 .pixel-grid {
    margin: 8px auto 0;
    transform-origin: center center;
    animation: pixelPhase2GridPulse 3s ease-in-out infinite;
}
.pixel-layout--phase2 .pixel-cell.is-active {
    animation: pixelPhase2ActiveThrob 2.2s ease-in-out infinite;
}
.pixel-layout--phase2 .pixel-cell.is-active.is-flashing {
    animation: pixelCellGlitch 0.32s ease-out;
}
.pixel-layout--phase2 .pixel-cell:not(.is-active) {
    animation: pixelPhase2QuietFlicker 5.5s ease-in-out infinite;
}
.pixel-layout--phase2 .pixel-grid-label,
.pixel-layout--phase2 .pixel-agent-badge,
.pixel-layout--phase2 .pixel-panel-kicker {
    color: #ff8a8a;
}
.pixel-layout--phase2 .pixel-cell {
    border-color: #ff444466;
    background: #1a0a0c;
}
.pixel-layout--phase2 .pixel-cell:hover,
.pixel-layout--phase2 .pixel-cell:focus-visible {
    border-color: #ff6666;
    box-shadow: 0 0 14px #ff444488, inset 0 0 12px #000;
}
.pixel-layout--phase2 .pixel-cell.is-active {
    background: #ff3355;
    border-color: #ff8899;
    box-shadow: 0 0 18px #ff3355aa, inset 0 0 10px #ffffff55;
}
.pixel-layout--phase2 .pixel-cell.is-hint {
    background: linear-gradient(135deg, #8c5000, #c88000);
    border-color: #ffc94488;
    box-shadow: 0 0 14px #ffaa0066, inset 0 0 8px rgba(255, 200, 60, 0.18);
    cursor: default;
    pointer-events: none;
    animation: none;
}
.pixel-layout--phase2 .pixel-cell.is-hint.is-active {
    background: linear-gradient(135deg, #a86200, #ffd060);
    border-color: #ffd060cc;
    box-shadow: 0 0 18px #ffb030aa, inset 0 0 10px rgba(255, 240, 130, 0.25);
    animation: pixelHintPulse 3s ease-in-out infinite;
}
@keyframes pixelHintPulse {
    0%, 100% { box-shadow: 0 0 14px #ffb03088, inset 0 0 8px rgba(255, 220, 80, 0.2); }
    50%       { box-shadow: 0 0 22px #ffcc44bb, inset 0 0 12px rgba(255, 240, 130, 0.35); }
}
.pixel-scanner-panel--phase2 {
    border-color: #ff444466;
    background: rgba(22, 8, 12, 0.82);
    box-shadow: inset 0 0 28px #ff000014;
    color: #ffd4dc;
}
.pixel-scanner-panel--phase2.is-locked {
    border-color: #ff5566;
    box-shadow: 0 0 30px rgba(255, 60, 80, 0.42), inset 0 0 28px rgba(255, 30, 50, 0.18);
}
.pixel-scanner-panel--phase2 .pixel-scanner-line {
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 12px,
        rgba(255, 80, 100, 0.06) 13px,
        transparent 15px
    );
}
.pixel-scanner-panel--phase2 .pixel-scan-details {
    color: #ffaaaa;
    border-top-color: rgba(255, 68, 100, 0.18);
}
.pixel-scanner-panel--phase2 .pixel-challenge-note {
    color: #ffaaaa;
}
.pixel-scanner-panel--phase2 .pixel-identification {
    border-color: #ff5566;
    background: #ff3355;
    color: #fff0f3;
    box-shadow: 0 0 24px rgba(255, 51, 85, 0.6);
}
.pixel-scanner-panel--phase2 .pixel-success-box {
    border-color: rgba(255, 85, 100, 0.5);
    background: rgba(255, 30, 50, 0.1);
    color: #ffdce2;
    box-shadow: 0 0 22px rgba(255, 60, 80, 0.28);
}
.pixel-signal-redacted {
    letter-spacing: 0.08em;
    color: #ff8888;
    text-transform: uppercase;
    font-size: 0.9em;
}
.pixel-prob-list--phase2-live {
    margin: 14px 0 6px;
}

.pixel-prob-row--glyph-live .pixel-prob-track {
    border-color: rgba(255, 190, 80, 0.55);
}

.pixel-prob-row--glyph-live.is-near-target .pixel-prob-fill--glyph {
    animation: pixelGlyphBarGlow 1.1s ease-in-out infinite alternate;
}

.pixel-prob-row--glyph-live.is-at-target .pixel-prob-fill--glyph {
    animation: none;
    box-shadow: 0 0 22px rgba(255, 200, 90, 0.95);
}

.pixel-phase2-live-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #e8b8a8;
    opacity: 0.92;
}

@keyframes pixelGlyphBarGlow {
    from {
        box-shadow: 0 0 12px rgba(255, 180, 60, 0.45);
    }
    to {
        box-shadow: 0 0 22px rgba(255, 210, 120, 0.85);
    }
}

.pixel-prob-list--masked {
    margin: 14px 0 8px;
}
.pixel-prob-mask-row {
    /* Span all outer-grid columns so this row can define its own internal grid. */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 76px 1fr 42px;
    gap: 8px;
    align-items: center;
    margin-bottom: 9px;
    opacity: 0.85;
}
.pixel-prob-mask-label {
    font-size: 0.82rem;
    color: #cca0a0;
    letter-spacing: 0.06em;
}
.pixel-prob-mask-bar {
    height: 12px;
    border-radius: 999px;
    border: 1px solid #ff444444;
    background: repeating-linear-gradient(
        90deg,
        rgba(40, 20, 24, 0.9) 0 6px,
        rgba(80, 40, 48, 0.95) 6px 12px
    );
    background-size: 12px 100%;
    animation: pixelMaskBarShift 0.8s linear infinite;
    overflow: hidden;
}
.pixel-prob-mask-bar--noise {
    opacity: 0.95;
    animation-duration: 0.45s;
}
.pixel-prob-mask-val {
    font-size: 0.88rem;
    color: #887070;
    font-variant-numeric: tabular-nums;
}
.pixel-phase2-mask-note {
    margin-top: 4px;
    color: #ddaaaa !important;
    opacity: 1 !important;
}

@keyframes pixelMaskBarShift {
    from { background-position: 0 0; }
    to { background-position: 12px 0; }
}

@keyframes pixelPhase2GridPulse {
    0%, 100% {
        transform: scale(1);
        filter: saturate(1);
    }
    40% {
        transform: scale(1.012);
        filter: saturate(1.12);
    }
    70% {
        transform: scale(1.006);
        filter: saturate(1.05);
    }
}

@keyframes pixelPhase2ActiveThrob {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(255, 51, 85, 0.45),
            inset 0 0 10px rgba(255, 255, 255, 0.42);
    }
    50% {
        box-shadow:
            0 0 26px rgba(255, 120, 140, 0.85),
            inset 0 0 14px rgba(255, 255, 255, 0.55);
    }
}

@keyframes pixelPhase2QuietFlicker {
    0%, 92%, 100% {
        opacity: 1;
        border-color: #ff444466;
    }
    94% {
        opacity: 0.82;
        border-color: #66222266;
    }
    96% {
        opacity: 0.95;
        border-color: #ff553344;
    }
}


@media (max-width: 760px) {
    .pixel-layout {
        grid-template-columns: 1fr;
    }

    .pixel-grid {
        gap: 6px;
    }
}

@keyframes pixelScanGrid {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

@keyframes pixelCellGlitch {
    0% { transform: translate(0, 0) scale(1); filter: hue-rotate(0deg); }
    25% { transform: translate(2px, -1px) scale(1.05); filter: hue-rotate(80deg); }
    50% { transform: translate(-2px, 1px) scale(0.96); filter: hue-rotate(-50deg); }
    100% { transform: translate(0, 0) scale(1); filter: hue-rotate(0deg); }
}

@keyframes pixelScannerGood {
    0% { box-shadow: 0 0 0 #00ffaa00, inset 0 0 28px #00ffaa12; }
    45% { box-shadow: 0 0 34px #00ffaa88, inset 0 0 34px #00ffaa33; }
    100% { box-shadow: inset 0 0 28px #00ffaa12; }
}

@keyframes pixelScannerWarn {
    0% { box-shadow: 0 0 0 #ff444400, inset 0 0 28px #00ffaa12; }
    45% { box-shadow: 0 0 28px #ff444499, inset 0 0 30px #ff444433; border-color: #ff6666; }
    100% { box-shadow: inset 0 0 28px #00ffaa12; }
}

@keyframes pixelScannerGoodPhase2 {
    0%   { box-shadow: 0 0 0 rgba(255, 100, 120, 0), inset 0 0 28px #ff000014; }
    45%  { box-shadow: 0 0 28px rgba(255, 120, 145, 0.55), inset 0 0 30px rgba(255, 70, 90, 0.22); }
    100% { box-shadow: inset 0 0 28px #ff000014; }
}

@keyframes pixelScannerWarnPhase2 {
    0%   { box-shadow: 0 0 0 rgba(100, 15, 28, 0), inset 0 0 28px #ff000014; }
    45%  { box-shadow: 0 0 24px rgba(140, 22, 42, 0.65), inset 0 0 26px rgba(200, 20, 42, 0.3); border-color: #cc2244; }
    100% { box-shadow: inset 0 0 28px #ff000014; }
}

@keyframes pixelSuccessPop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pixelStaticShift {
    0% { transform: translate(0, 0); filter: hue-rotate(0deg); }
    50% { transform: translate(3px, -2px); filter: hue-rotate(-20deg); }
    100% { transform: translate(-2px, 2px); filter: hue-rotate(20deg); }
}

.large-codebox {
    font-size: 2em;
    padding: 20px;
    text-align: center;
    line-height: 1.5;
    border-left: 6px solid #00ffaa;
    background-color: #101010;
    margin: 20px 0;
    color: #58a6ff;
    border-radius: 8px;
}

/* ── Morsekoden (task 5): lätt terminal/signal-känsla + lampor ── */
#task5 .morse-mission {
    position: relative;
    margin-top: 8px;
    padding: 18px 16px 20px;
    border-radius: 14px;
    isolation: isolate;
    background: linear-gradient(168deg, rgba(8, 16, 14, 0.9) 0%, rgba(4, 9, 11, 0.94) 100%);
    border: 1px solid rgba(0, 255, 170, 0.22);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.38),
        0 0 48px rgba(0, 255, 170, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#task5 .morse-mission__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
}

#task5 .morse-mission__grid {
    position: absolute;
    inset: -25%;
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(0, 255, 170, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 170, 0.03) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 25%, transparent 75%);
    animation: morse-grid-drift 26s linear infinite;
}

@keyframes morse-grid-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-18px, -18px); }
}

#task5 .morse-mission__lede {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: #c9fff0;
    line-height: 1.55;
    font-size: 0.95rem;
}

#task5 .morse-lanes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(14px, 3.5vw, 32px);
    margin-bottom: 18px;
}

#task5 .morse-lane {
    flex: 1 1 158px;
    max-width: 220px;
    min-width: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px 10px;
    border-radius: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: morse-lane-pop 0.68s cubic-bezier(0.34, 1.15, 0.55, 1) backwards;
    transition: transform 0.28s ease;
}

#task5 .morse-lane:hover {
    transform: translateY(-2px);
}

/* Per kolumn: kort feedback när rätt/fel efter verifiering */
#task5 .morse-lane.morse-lane--flash-ok {
    animation: morse-lane-flash-ok 0.7s cubic-bezier(0.34, 1.1, 0.52, 1) both;
}

#task5 .morse-lane.morse-lane--flash-bad {
    animation: morse-lane-flash-bad 0.55s ease-out both;
}

@keyframes morse-lane-flash-ok {
    0% {
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
    }
    40% {
        filter: brightness(1.12);
        box-shadow:
            0 0 0 1px rgba(0, 255, 170, 0.45),
            0 0 32px rgba(0, 255, 170, 0.35);
    }
    100% {
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
    }
}

@keyframes morse-lane-flash-bad {
    0%,
    100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-7px);
    }
    30% {
        transform: translateX(7px);
    }
    45% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(4px);
    }
}

#task5 .morse-lane--a { animation-delay: 0.05s; }
#task5 .morse-lane--b { animation-delay: 0.13s; }
#task5 .morse-lane--c { animation-delay: 0.21s; }

@keyframes morse-lane-pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#task5 .morse-lane__tag {
    align-self: flex-start;
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    color: rgba(0, 255, 170, 0.42);
    margin-bottom: 10px;
    text-transform: uppercase;
}

#task5 .morse-lamp {
    position: relative;
    width: 76px;
    height: 92px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#task5 .morse-lamp__wire {
    position: absolute;
    top: 2px;
    width: 2px;
    height: 24px;
    background: linear-gradient(180deg, rgba(0, 255, 170, 0.55), rgba(0, 255, 170, 0.08));
    border-radius: 1px;
    opacity: 0.72;
}

#task5 .morse-lamp__wire--left {
    left: 17px;
    transform: rotate(-10deg);
}

#task5 .morse-lamp__wire--right {
    right: 17px;
    transform: rotate(10deg);
}

#task5 .morse-lamp__housing {
    position: absolute;
    bottom: 6px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, rgba(72, 82, 88, 0.95) 0%, rgba(28, 32, 38, 0.96) 52%, #0b0e12 100%);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.07),
        inset 0 -8px 18px rgba(0, 0, 0, 0.7),
        0 5px 14px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

#task5 .morse-lamp__bulb {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background-color: #0f0f0f;
    border: 2px solid rgba(0, 255, 170, 0.7);
    box-sizing: border-box;
    animation: morse-bulb-idle 2.6s ease-in-out infinite;
}

@keyframes morse-bulb-idle {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(0, 255, 170, 0.18),
            inset 0 0 14px rgba(0, 0, 0, 0.8);
    }
    50% {
        box-shadow:
            0 0 22px rgba(0, 255, 170, 0.32),
            inset 0 0 12px rgba(0, 0, 0, 0.65);
    }
}

#task5 .morse-lane > button {
    margin: 0 0 8px;
}

#task5 .morse-lane__input {
    width: 100%;
    max-width: 148px;
    margin: 0;
    padding: 9px 10px;
    text-align: center;
    font-family: inherit;
    font-size: 1rem;
    color: #e8fff6;
    background: rgba(4, 11, 9, 0.94);
    border: 1px solid rgba(0, 255, 170, 0.32);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#task5 .morse-lane__input:focus {
    outline: none;
    border-color: rgba(0, 255, 170, 0.55);
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.12);
}

#task5 .morse-lane__feedback {
    min-height: 22px;
    margin-top: 8px;
    font-size: 0.88rem;
    text-align: center;
}

#task5 .morse-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

#task5 .morse-actions button {
    margin: 0;
}

#task5 .morse-mission__feedback {
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

#task5 .morse-tip-panel {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(0, 255, 170, 0.35);
    background:
        linear-gradient(155deg, rgba(6, 18, 22, 0.96) 0%, rgba(4, 10, 14, 0.98) 48%, rgba(12, 8, 20, 0.94) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5) inset,
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 50px rgba(0, 255, 170, 0.07);
    color: #c9fff0;
    transform-origin: 50% 0%;
}

#task5 .morse-tip-panel.morse-tip-panel--enter {
    animation: morse-tip-panel-enter 0.48s cubic-bezier(0.34, 1.15, 0.48, 1) both;
}

#task5 .morse-tip-panel.morse-tip-panel--exit {
    animation: morse-tip-panel-exit 0.34s ease-in forwards;
    pointer-events: none;
}

@keyframes morse-tip-panel-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.5) inset,
            0 4px 12px rgba(0, 0, 0, 0.2),
            0 0 20px rgba(0, 255, 170, 0.02);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.5) inset,
            0 12px 40px rgba(0, 0, 0, 0.45),
            0 0 50px rgba(0, 255, 170, 0.07);
    }
}

@keyframes morse-tip-panel-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

#task5 .morse-tip-panel__chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 10px,
            rgba(0, 255, 170, 0.025) 10px,
            rgba(0, 255, 170, 0.025) 11px
        );
    opacity: 0.65;
    animation: morse-tip-scan 14s linear infinite;
}

@keyframes morse-tip-scan {
    from { transform: translateY(0); }
    to { transform: translateY(11px); }
}

#task5 .morse-tip-panel__head {
    position: relative;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(0, 255, 170, 0.18);
    background: linear-gradient(90deg, rgba(0, 255, 170, 0.08) 0%, transparent 65%);
}

#task5 .morse-tip-panel__kicker {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: rgba(88, 166, 255, 0.75);
    margin-bottom: 6px;
}

#task5 .morse-tip-panel__title {
    display: block;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: #e8fff8;
    text-shadow: 0 0 18px rgba(0, 255, 170, 0.25);
}

#task5 .morse-tip-panel__hint {
    display: block;
    margin-top: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(0, 255, 170, 0.45);
}

#task5 .morse-alphabet-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 14px 16px 18px;
}

#task5 .morse-alphabet-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(0, 255, 170, 0.05);
    border: 1px solid rgba(0, 255, 170, 0.12);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

#task5 .morse-alphabet-cell:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(0, 255, 170, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 255, 170, 0.12);
    background: rgba(0, 255, 170, 0.09);
}

#task5 .morse-alphabet-cell--num {
    border-color: rgba(88, 166, 255, 0.22);
    background: rgba(88, 166, 255, 0.06);
}

#task5 .morse-alphabet-cell--num:hover {
    border-color: rgba(88, 166, 255, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(88, 166, 255, 0.15);
}

#task5 .morse-alphabet-cell__letter {
    flex: 0 0 auto;
    width: 1.35em;
    height: 1.35em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #00ffcc;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 255, 170, 0.25);
}

#task5 .morse-alphabet-cell--num .morse-alphabet-cell__letter {
    color: #9eccff;
    border-color: rgba(88, 166, 255, 0.35);
}

#task5 .morse-alphabet-cell__code {
    flex: 1 1 auto;
    text-align: right;
    font-family: "Share Tech Mono", monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: #b8ffe8;
    white-space: nowrap;
}

#reset-btn {
    font-size: 0.75em;
    padding: 6px 12px;
    background-color: #002b1f;
    color: #00ffaa;
    border: 1px solid #00ffaa55;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 5px #00ffaa22;
}

#reset-btn:hover {
    background-color: #00ffaa;
    color: #0f0f0f;
    border-color: #00ffaa;
    box-shadow: 0 0 10px #00ffaa;
    transform: scale(1.04);
}
.tip-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #00ffaa;
    color: #0f0f0f;
    font-size: 1.2em;
    font-weight: bold;
    padding: 16px 32px;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 0 30px #00ffaa;
    opacity: 0.95;
    pointer-events: none;
    transition: all 1s ease-in-out;
}

.tip-modal.animate-to-target {
    position: absolute;
    transition: all 1s ease-in-out;
}

.pulsing-tip {
    animation: pulseGlow 1.5s infinite;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

#code-gate.modal-overlay {
    overflow: hidden;
    overscroll-behavior: none;
}

.modal-box {
    background-color: #0f0f0f;
    border: 2px solid #00ffaa;
    color: #00ffaa;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 20px #00ffaaaa;
}

/* =========================================================
   Player code gate styling ("Ange den hemliga koden ...")
   Keep scoped to #code-gate so normal modals are unchanged.
   ========================================================= */
#code-gate .modal-box.code-gate-modal-box,
#code-gate .modal-box {
    max-width: min(1100px, 94vw);
    width: min(1100px, 94vw);
    max-height: 90vh;
    padding: clamp(22px, 3vw, 42px);
    --cg-accent: #00ffaa;
    --cg-accent-soft: rgba(0, 255, 170, 0.14);
    --cg-accent-mid: rgba(0, 255, 170, 0.28);
    --cg-accent-glow: rgba(0, 255, 170, 0.42);
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 255, 170, 0.18), transparent 46%),
        radial-gradient(circle at 88% 12%, rgba(0, 214, 170, 0.12), transparent 48%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 120, 96, 0.14), transparent 55%),
        rgba(8, 11, 12, 0.96);
    box-shadow:
        0 0 24px rgba(0, 255, 170, 0.28),
        0 0 48px rgba(0, 180, 140, 0.12);
    position: relative;
    overflow: hidden;
}

#code-gate .modal-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        110deg,
        transparent 22%,
        rgba(0, 255, 170, 0.18) 40%,
        rgba(0, 210, 175, 0.12) 52%,
        transparent 72%
    );
    transform: translateX(-35%);
    animation: codeGateSweep 6.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.5;
}

#code-gate h2 {
    position: relative; /* keeps it above ::before */
    font-size: 1.55em;
    letter-spacing: 0.3px;
    text-shadow:
        0 0 12px rgba(0, 255, 170, 0.5),
        0 0 28px rgba(0, 200, 160, 0.22);
}

/* =========================================================
   Hidden facilitator shortcut (player page)
   - Small edge hotspot, double-click to open password modal.
   - Password and redirect destination are configured in
     `cyberstorm.html` inline JS.
   ========================================================= */
#facilitator-shortcut {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    z-index: 1000000; /* above code gate overlay */
    opacity: 0.12;
    background: rgba(0, 255, 170, 0.12);
    border: 1px solid rgba(0, 255, 170, 0.22);
    cursor: pointer;
}

#facilitator-modal {
    z-index: 1000001; /* above facilitator hotspot */
}

#facilitator-shortcut:hover,
#facilitator-shortcut:focus {
    opacity: 0.28;
    box-shadow: 0 0 16px rgba(0, 255, 170, 0.28);
    outline: none;
}

#facilitator-modal .modal-box {
    padding: 26px 24px 22px;
}

#facilitator-modal .modal-box button {
    margin-top: 0 !important;
}

/* --- Agent-X modal polish (scoped) --- */
#facilitator-modal .modal-box {
    position: relative;
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 255, 170, 0.18), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(255, 0, 255, 0.14), transparent 52%),
        rgba(10, 10, 10, 0.94);
    box-shadow:
        0 0 26px rgba(0, 255, 170, 0.22),
        0 0 44px rgba(255, 0, 255, 0.14);
}

#facilitator-modal h2 {
    font-size: 1.25em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 2px 0 14px;
    text-shadow: 0 0 14px rgba(0, 255, 170, 0.45);
}

.facilitator-form,
.facilitator-form * {
    box-sizing: border-box;
}

.facilitator-close-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid rgba(0, 255, 170, 0.25);
    background: rgba(0, 255, 170, 0.08);
    color: #00ffaa;
    box-shadow: 0 0 14px rgba(0, 255, 170, 0.12);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.facilitator-close-x:hover,
.facilitator-close-x:focus {
    background: rgba(0, 255, 170, 0.16);
    border-color: rgba(0, 255, 170, 0.45);
    outline: none;
}

.facilitator-form {
    display: grid;
    gap: 14px;
}

.facilitator-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

#facilitator-password-input {
    width: 100%;
    margin: 0;
    height: 44px;
    padding: 12px 14px;
    border-width: 2px; /* keep stable vs focus/hover */
    border-style: solid;
    border-color: rgba(0, 255, 170, 0.25);
}

.facilitator-verify-btn {
    width: 52px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid rgba(0, 255, 170, 0.45); /* stable */
    background: rgba(0, 255, 170, 0.85);
    color: #0d1117;
    font-weight: 900;
    font-size: 18px;
    text-transform: none;
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.35);
    padding: 0;
    line-height: 1;
}

.facilitator-verify-btn:hover {
    background: #0d1117;
    color: #00ffaa;
    /* avoid layout shift: no border-width/padding changes */
}

.facilitator-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.facilitator-btn {
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 0 14px rgba(0, 255, 170, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

.facilitator-btn:focus-visible {
    outline: 2px solid #00ffaa;
    outline-offset: 2px;
}

/* =========================================================
   Facilitator screen switcher (TV/Admin/Player links)
   - Subtle fixed-position UI, shown on player after unlock,
     and always visible on TV + Admin pages.
   ========================================================= */
.facilitator-screen-switcher {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1000002;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.facilitator-screen-link {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2px;
    color: #00ffaa;
    background: rgba(0, 255, 170, 0.08);
    border: 1px solid rgba(0, 255, 170, 0.22);
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.12);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.facilitator-screen-link:hover,
.facilitator-screen-link:focus {
    background: rgba(0, 255, 170, 0.16);
    border-color: rgba(0, 255, 170, 0.45);
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.22);
    outline: none;
}

.code-gate-main-title {
    position: relative;
    margin-bottom: 0.35em;
}

.code-gate-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
    text-align: left;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

/* --- Field blocks: same teal system as header/button (steps differ by structure only) --- */
.code-gate-section {
    position: relative;
    border-radius: 14px;
    padding: 18px 18px 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 170, 0.22);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(0, 255, 170, 0.06);
}

.code-gate-section--secret,
.code-gate-section--group {
    background:
        linear-gradient(155deg, rgba(0, 255, 170, 0.07) 0%, transparent 52%),
        linear-gradient(180deg, rgba(9, 14, 13, 0.98), rgba(6, 10, 10, 0.94));
}

.code-gate-section--secret::before,
.code-gate-section--group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #5cffd4, #00ffaa, #00b88a);
    box-shadow: 0 0 16px rgba(0, 255, 170, 0.38);
}

.code-gate-section__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.code-gate-section__tag {
    flex: 0 0 auto;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid currentColor;
    opacity: 0.85;
}

.code-gate-section--secret .code-gate-section__tag,
.code-gate-section--group .code-gate-section__tag {
    color: #9fffdf;
    background: rgba(0, 255, 170, 0.08);
    border-color: rgba(0, 255, 170, 0.42);
    text-shadow: 0 0 14px rgba(0, 255, 170, 0.35);
}

.code-gate-section__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.code-gate-section--secret .code-gate-section__title,
.code-gate-section--group .code-gate-section__title {
    color: #c8fff0;
    text-shadow:
        0 0 18px rgba(0, 255, 170, 0.35),
        0 0 2px rgba(0, 0, 0, 0.85);
}

.code-gate-hint {
    margin: 10px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    position: relative;
    z-index: 1;
}

.code-gate-hint--secret,
.code-gate-hint--group {
    color: rgba(185, 235, 218, 0.82);
    padding-left: 12px;
    border-left: 2px solid rgba(0, 255, 170, 0.38);
}

.code-gate-feedback {
    min-height: 22px;
    text-align: center;
}

#code-gate #preset-code-input,
#code-gate #group-name-input {
    width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 14px 16px;
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    background: rgba(5, 12, 11, 0.94);
    border: 1px solid rgba(0, 255, 170, 0.32);
    color: #e8fff7;
    box-shadow:
        inset 0 0 0 1px rgba(0, 255, 170, 0.05),
        0 4px 22px rgba(0, 0, 0, 0.35);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#code-gate #preset-code-input::placeholder,
#code-gate #group-name-input::placeholder {
    color: rgba(140, 210, 190, 0.38);
}

#code-gate #preset-code-input:focus,
#code-gate #group-name-input:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.65);
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.28),
        0 0 22px rgba(0, 255, 170, 0.28),
        inset 0 0 18px rgba(0, 255, 170, 0.05);
}

#code-gate #preset-code-submit {
    width: 100%;
    margin-top: 6px;
    padding: 14px 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 170, 0.45);
    background: linear-gradient(180deg, #5dffce 0%, #00ffaa 45%, #00cc99 100%);
    color: #061210;
    box-shadow:
        0 0 22px rgba(0, 255, 170, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#code-gate #preset-code-submit:hover {
    background: linear-gradient(180deg, #062220 0%, #0a2e28 100%);
    color: #00ffaa;
    border-color: rgba(0, 255, 170, 0.65);
}

/* Tall modal content must fit without scrolling — tighten on short viewports */
@media (max-height: 760px) {
    #code-gate .modal-box.code-gate-modal-box,
    #code-gate .modal-box {
        padding: clamp(14px, 2.5vw, 28px);
        max-height: min(94vh, 900px);
    }

    #code-gate h2 {
        font-size: 1.28em;
    }

    .code-gate-fields {
        gap: 12px;
        margin-top: 14px;
    }

    .code-gate-section {
        padding: 12px 14px 11px;
    }

    .code-gate-section__title {
        font-size: 1.08rem;
    }

    .code-gate-hint {
        font-size: 0.82rem;
        margin-top: 8px;
    }

    #code-gate #preset-code-input,
    #code-gate #group-name-input {
        padding: 11px 12px;
        font-size: 1rem;
    }
}

@media (max-height: 640px) {
    #code-gate h2 {
        font-size: 1.12em;
    }

    .code-gate-section__head {
        margin-bottom: 8px;
    }
}

/* =========================================================
   Mission start intro (after manual “Lås upp”)
   ========================================================= */
.mission-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(0, 255, 170, 0.14), transparent 55%),
        radial-gradient(ellipse 60% 50% at 70% 80%, rgba(255, 0, 255, 0.12), transparent 50%),
        #030306;
    pointer-events: auto;
    overflow: hidden;
}

.mission-start-overlay__grid {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(0, 255, 170, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 170, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.35;
    transform-origin: center;
}

.mission-start-overlay__sweep {
    position: absolute;
    left: -30%;
    top: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 170, 0.07),
        rgba(255, 0, 255, 0.12),
        rgba(0, 255, 170, 0.07),
        transparent
    );
    filter: blur(12px);
    opacity: 0;
}

.mission-start-overlay__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 90vw;
}

.mission-start-overlay__kicker {
    margin: 0 0 8px;
    font-family: ui-monospace, "Share Tech Mono", "Cascadia Code", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.55em;
    color: rgba(0, 255, 170, 0.65);
    opacity: 0;
    transform: translateY(12px);
}

.mission-start-overlay__title {
    margin: 0;
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: clamp(1.6rem, 6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #00ffaa;
    text-shadow:
        0 0 20px rgba(0, 255, 170, 0.55),
        0 0 40px rgba(255, 0, 255, 0.25);
    opacity: 0;
    transform: scale(0.92);
}

.mission-start-overlay__sub {
    margin: 14px 0 0;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: rgba(0, 255, 170, 0.55);
    opacity: 0;
}

.mission-start-overlay--animate .mission-start-overlay__grid {
    animation: missionStartGrid 2.6s ease-out forwards;
}

.mission-start-overlay--animate .mission-start-overlay__sweep {
    animation: missionStartSweep 2.4s ease-in-out forwards;
}

.mission-start-overlay--animate .mission-start-overlay__kicker {
    animation: missionStartFadeUp 0.7s ease-out 0.15s forwards;
}

.mission-start-overlay--animate .mission-start-overlay__title {
    animation: missionStartTitle 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.mission-start-overlay--animate .mission-start-overlay__sub {
    animation: missionStartFadeIn 0.9s ease-out 0.55s forwards;
}

@keyframes missionStartGrid {
    0% {
        opacity: 0.15;
        transform: scale(1.08) translateY(8px);
    }
    20% {
        opacity: 0.45;
    }
    100% {
        opacity: 0.28;
        transform: scale(1) translateY(0);
    }
}

@keyframes missionStartSweep {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0.35;
        transform: translateX(220%);
    }
}

@keyframes missionStartFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes missionStartTitle {
    0% {
        opacity: 0;
        transform: scale(0.88);
        filter: blur(6px);
    }
    25% {
        opacity: 1;
        transform: scale(1.02);
        filter: blur(0);
    }
    45% {
        text-shadow:
            0 0 22px rgba(0, 255, 170, 0.65),
            3px 0 rgba(255, 0, 255, 0.35),
            -3px 0 rgba(0, 255, 255, 0.25);
    }
    70% {
        letter-spacing: 0.22em;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        letter-spacing: 0.15em;
        filter: blur(0);
    }
}

@keyframes missionStartFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes codeGateSweep {
    0% { transform: translateX(-35%); opacity: 0.25; }
    50% { transform: translateX(35%); opacity: 0.55; }
    100% { transform: translateX(-35%); opacity: 0.25; }
}

.modal-box h2 {
    margin-top: 0;
    font-size: 1.8em;
}

.modal-box button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #00ffaa;
    color: #0f0f0f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.modal-box button:hover {
    background-color: #0f0f0f;
    color: #00ffaa;
    border: 1px solid #00ffaa;
}

#secret-input-wrapper {
    margin-top: 40px;
    padding: 20px;
    border: 2px solid #00ffaa;
    border-radius: 12px;
    background-color: #0f0f0f;
    box-shadow: 0 0 30px #00ffaaaa, 0 0 15px #ff00ff88;
    animation: secretReveal 1.5s ease-in-out 1, glitch-flicker 2s infinite 1.5s;
    max-width: 400px;
    text-align: center;
    filter: drop-shadow(0 0 4px #00ffaa) contrast(1.2);
}

.glitch-label {
    display: block;
    margin-bottom: 10px;
    color: #00ffaa;
    font-size: 1.2em;
    text-shadow: 0 0 5px #00ffaa, 1px 0 red, -1px 0 blue;
    animation: glitch-label 1.5s infinite alternate;
}

#secret-input {
    padding: 12px;
    font-size: 1em;
    width: 90%;
    background-color: #101010;
    border: 2px solid #00ffaa88;
    border-radius: 8px;
    color: #00ffaa;
    text-align: center;
    box-shadow: 0 0 10px #00ffaa44;
    transition: all 0.3s ease-in-out;
    animation: inputFlash 0.4s ease-out 1;
}

#secret-input:focus {
    outline: none;
    border-color: #ff00ff;
    box-shadow: 0 0 15px #ff00ff88;
}

.reveal-glitch {
    animation: secretReveal 1.2s ease-out 1;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa88;
        background-color: #00ffaa;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px #ff5555, 0 0 40px #ff5555aa;
        background-color: #ff5555;
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa88;
        background-color: #00ffaa;
        transform: scale(1);
    }
}

@keyframes glitch-flicker {
    0%, 100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
    10%, 30%, 50%, 70%, 90% {
        opacity: 0.8;
        transform: skewX(-1.5deg) translateX(-2px);
        filter: drop-shadow(0 0 5px #ff00ff) hue-rotate(30deg);
    }
    20%, 40%, 60%, 80% {
        opacity: 0.6;
        transform: skewX(1.5deg) translateX(2px);
        filter: drop-shadow(0 0 7px #00ffaa) hue-rotate(-30deg);
    }
}

@keyframes glitch-label {
    0% {
        transform: translate(0, 0);
        color: #00ffaa;
        text-shadow: 0 0 5px #00ffaa, 2px 0 red, -2px 0 blue;
    }
    20% {
        transform: translate(-2px, 1px);
        color: #ff00ff;
        text-shadow: 0 0 10px #ff00ff, -1px 0 green, 1px 0 cyan;
    }
    40% {
        transform: translate(2px, -1px);
        color: #00ffff;
        text-shadow: 0 0 8px #00ffaa, 1px 0 red;
    }
    60% {
        transform: translate(-1px, -1px);
        color: #ffaa00;
        text-shadow: 0 0 7px #ffaa00, 1px 0 blue, -1px 0 red;
    }
    80% {
        transform: translate(1px, 1px);
        color: #ff00aa;
        text-shadow: 0 0 6px #ff00aa, 2px 0 green;
    }
    100% {
        transform: translate(0, 0);
        color: #00ffaa;
        text-shadow: 0 0 5px #00ffaa, -2px 0 red, 2px 0 blue;
    }
}

@keyframes secretReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(12deg) translate(-40px, 20px);
        filter: blur(2px) brightness(0.4);
    }
    15% {
        opacity: 1;
        transform: scale(1.2) rotate(-5deg) translate(10px, -8px);
        filter: brightness(1.8) hue-rotate(20deg);
    }
    30% {
        transform: rotate(3deg) translate(-12px, 5px) skewX(3deg);
    }
    45% {
        transform: scale(1.05) translate(6px, -14px) skewY(-4deg);
    }
    60% {
        transform: rotate(-2deg) translate(4px, 2px) skewX(-1deg);
    }
    75% {
        transform: scale(1.03) translate(-6px, 6px) rotate(1deg);
    }
    100% {
        transform: none;
        filter: none;
    }
}

@keyframes inputFlash {
    0% {
        box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffaa;
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 10px #00ffaa44;
        transform: scale(1);
    }
}

/*Explosion*/
#explosion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #00ffaa 0%, #ff00ff 30%, #000000 80%);
    z-index: 999999;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    animation: none;
    mix-blend-mode: screen;
    backdrop-filter: blur(2px) brightness(1.5);
    filter: drop-shadow(0 0 40px #ff00ff) contrast(2);
    -webkit-backdrop-filter: blur(2px) brightness(1.5);
}

@keyframes glitchExplosion {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(0deg);
        filter: hue-rotate(0deg) brightness(2);
    }
    25% {
        opacity: 1;
        transform: scale(1.5) rotate(10deg);
        background: radial-gradient(circle at center, #ff00ff, #00ffaa, #000000);
        filter: hue-rotate(45deg) brightness(2.5) drop-shadow(0 0 80px #ff00ff);
    }
    50% {
        transform: scale(2.2) rotate(-10deg);
        background: radial-gradient(circle at center, #00ffaa, #ff00ff, #000000);
        filter: hue-rotate(-45deg) brightness(1.8) drop-shadow(0 0 100px #00ffaa);
    }
    75% {
        transform: scale(1.8) rotate(5deg);
        background: radial-gradient(circle at center, #ff00ff, #00ffff, #000000);
        filter: hue-rotate(90deg) brightness(2) blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(3) rotate(0deg);
        filter: blur(4px) brightness(0.2);
    }
}

.explosion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    font-weight: bold;
    color: #00ffaa;
    text-shadow:
            0 0 10px #00ffaa,
            2px 2px #ff00ff,
            -2px -2px #00ffff;
    font-family: 'Share Tech Mono', monospace;
    opacity: 0;
    animation: showText 3s ease-in-out forwards;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000000;
    position: absolute;
}

input, textarea, button, label {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

#zoom-container { touch-action: none; overscroll-behavior: contain; }
#zoom-image { pointer-events: none; }


@keyframes showText {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(3px);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
        filter: blur(0);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(3px);
    }
}
/* --- iPad / touch-only adjustments --- */
@media (pointer: coarse) and (hover: none) {
    :root { --touch-min: 56px; }

    /* Buttons: bigger on iPad */
    .read-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 50px;
        min-height: 50px;
        padding: 10px 14px;
        font-size: 1rem;
        border-radius: 10px !important;
        line-height: 1.1;
        touch-action: manipulation;
        background: inherit;
        color: inherit;
        border: inherit;
    }

    /* Prevent iOS zoom on focus without changing desktop */
    input[type="text"] { font-size: 16px; }

    .drag-item { min-height: auto; }

    input[type="checkbox"] {
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;

        width: 28px !important;
        height: 28px !important;
        transform: scale(1.4);
        transform-origin: left center;

        accent-color: #00ffaa;

        padding: 0 !important;
        border: none !important;
        border-radius: 5px !important;
        background: transparent !important;

        margin-right: 10px;
    }

    label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1.4;
        min-height: 44px;
    }
}
/* ===========================
   ADMIN PAGE
   =========================== */

.admin-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    width: 100%;
    padding: 48px 20px;
    overflow-x: hidden;
}

.logo {
    display: block;
    max-width: 220px;
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 8px rgba(0,255,170,.45));
}

.admin-title {
    font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem);
    margin: 0 0 10px;
    letter-spacing: 1px;
    text-shadow:
            0 0 10px #00ffaa,
            0 0 20px #00ffaa55,
            0 0 40px #ff004422;
    position: relative;
}

.admin-title::after {
    content: "";
    display: block;
    height: 3px;
    width: 120px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, #ff2a2a 0%, #00ffaa 60%, transparent 100%);
    box-shadow: 0 0 12px #00ffaaaa;
    border-radius: 999px;
}

.admin-shell {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
}

.admin-card {
    background: linear-gradient(180deg, rgba(10,10,10,.92), rgba(12,12,12,.86));
    border: 1px solid #00ffaa55;
    border-radius: 14px;
    padding: 24px;
    box-shadow:
            0 0 24px #ff000033,
            inset 0 0 0 1px rgba(255,255,255,.02);
    backdrop-filter: blur(2px);
}

.admin-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    /* Override global `button` panel/glow (styles.css top-of-file) */
    box-shadow: none;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
}

.admin-card__toggle:hover,
.admin-card__toggle:active {
    background: transparent;
    color: inherit;
    border: none;
    box-shadow: none;
}

.admin-card__toggle:focus-visible {
    outline: 2px solid #00ffaa;
    outline-offset: 4px;
}

.admin-card--collapsed .admin-card__toggle {
    margin-bottom: 0;
}

.admin-card__toggle .card-title {
    flex: 1;
    min-width: 0;
}

.admin-card__toggle .badges {
    flex-shrink: 0;
}

.admin-card__chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    line-height: 1;
    color: #00ffaa;
    transition: transform 0.2s ease;
}

.admin-card__chevron::before {
    content: "▼";
    font-size: 1.35rem;
}

.admin-card--collapsed .admin-card__chevron {
    transform: rotate(-90deg);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.card-title {
    font-size: 1.1rem;
    letter-spacing: .5px;
    text-shadow: 0 0 8px #00ffaa77;
}

.badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    background: #00ffaa22;
    border: 1px solid #00ffaa66;
    color: #00ffaa;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
    transition: all 0.3s ease, box-shadow 0.3s ease;
}

.pill--timer {
    background: #007bff22;
    border: 1px solid #00aaff;
    color: #00aaff;
    box-shadow: 0 0 12px #00aaff66;
}

.pill--timer.pill--warning {
    background: #ff002222;
    border: 1px solid #ff0022;
    color: #ff4444;
    box-shadow: 0 0 14px #ff000088;
}

.pill--orange {
    background: #ff880022;
    border: 1px solid #ff880066;
    color: #ffaa33;
    box-shadow: 0 0 10px #ff880044;
}

.pill--warning { --glow: #ffb300; }
.pill--danger  { --glow: #ff4d6d; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-input,
#groupForm input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    background-color: #0f0f0f;
    border: 1px solid #00ffaa55;
    color: #e6fff6;
    border-radius: 10px;
    outline: none;
    transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
    box-shadow: 0 0 0 0 rgba(0,255,170,0);
}

.admin-input::placeholder { color: #9fecccaa; }

.admin-input:focus,
#groupForm input[type="text"]:focus {
    border-color: #00ffaa;
    box-shadow: 0 0 16px #00ffaa66, 0 0 2px #00ffaa inset;
    transform: translateY(-1px);
}

#codeword-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
}

@media (min-width: 720px) {
    #codeword-fields {
        grid-template-columns: 1fr 1fr;
    }
}

.btn {
    appearance: none;
    border: 2px solid #00ffaa;
    background: #00ffaa;
    color: #0d1117;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 15px #00ffaa88;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn:hover {
    background: #0d1117;
    color: #00ffaa;
    box-shadow: 0 0 22px #00ffaaaa;
}

.btn:active {
    transform: translateY(1px) scale(.99);
}

.btn.full { width: 100%; }

.btn--danger {
    border-color: #ff4d6d;
    background: #ff4d6d;
    box-shadow: 0 0 15px #ff4d6daa;
}
.btn--danger:hover {
    background: #0d1117;
    color: #ff4d6d;
    box-shadow: 0 0 22px #ff4d6dcc;
}

.btn--ghost {
    background: transparent;
    color: #00ffaa;
    border-color: #00ffaa88;
    box-shadow: 0 0 10px #00ffaa44;
}
.btn--ghost:hover {
    background: #00ffaa;
    color: #0d1117;
}

.subtle {
    font-size: .9rem;
    color: #aaffaa;
    opacity: .9;
}

.hr-glow {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, #00ffaa66 40%, #ff2a2a55 60%, transparent);
    box-shadow: 0 0 8px #00ffaa66;
    margin: 18px 0;
}

:where(.admin-card, .btn, .admin-input) :focus-visible,
:where(.btn, .admin-input):focus-visible {
    outline: 2px solid #00ffaa;
    outline-offset: 2px;
}

@media (pointer: coarse) and (hover: none) {
    .btn { min-height: 48px; border-radius: 14px; }
    .admin-input { font-size: 16px; }
}

#groupForm,
#groupForm * {
    box-sizing: border-box;
}

#codeword-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#codeword-fields input[type="text"] {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    background-color: #0f0f0f;
    border: 1px solid #00ffaa55;
    color: #ffffff;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

#codeword-fields input[type="text"]:hover {
    box-shadow: 0 0 10px #00ffaa44;
}
#codeword-fields input[type="text"]:focus {
    outline: none;
    border-color: #00ffaa;
    box-shadow: 0 0 15px #00ffaa88;
}

@media (max-width: 650px) {
    #codeword-fields {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   CYBERSTORM TV PAGE
   =========================== */

.tv-page {
    font-family: 'Share Tech Mono', monospace;
    background: linear-gradient(to bottom, #0f0f0f, #1a1a1a);
    background-image: url('assets/common/background.png');
    background-size: cover;
    background-position: center;
    color: #00ffaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: clamp(16px, 3vh, 40px) 20px clamp(12px, 2vh, 24px);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.tv-page h1 {
    flex-shrink: 0;
    font-size: 3em;
    margin-bottom: clamp(12px, 2vh, 30px);
    text-shadow: 0 0 20px #00ffaa;
}

.tv-page img.logo {
    max-width: 220px;
    margin-bottom: clamp(12px, 2vh, 30px);
    display: block;
    flex-shrink: 0;
}

#setup {
    margin-top: 20px;
    width: 100%;
    max-width: 900px;
    text-align: center;
    flex-shrink: 0;
}

/* =============================================
   TV Timer — full-width top banner
   ============================================= */
#timer-section {
    width: 100%;
    max-width: min(98vw, 1400px);
    margin: 0 auto clamp(16px, 2.5vh, 36px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 60px);
    background: linear-gradient(160deg, #1a0000 0%, #0d0000 100%);
    border: 2px solid #cc0000;
    border-radius: 12px;
    padding: clamp(8px, 1.2vh, 18px) clamp(16px, 3vw, 40px);
    box-shadow:
        0 0 0 1px #ff000033,
        0 0 30px #cc000066,
        0 0 80px #99000033,
        inset 0 0 40px rgba(200, 0, 0, 0.08);
    position: relative;
    overflow: clip;
    flex-shrink: 0;
}

.timer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timer-col--title {
    border-left: 1px solid #cc000066;
    padding-left: clamp(16px, 3vw, 48px);
}

#timer-section h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2.8rem);
    text-shadow: 0 0 16px #00ffaa88;
    white-space: nowrap;
}

#timer-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 0, 0, 0.025) 3px,
        rgba(255, 0, 0, 0.025) 4px
    );
    pointer-events: none;
}

.timer-warning-label {
    font-size: clamp(0.55rem, 1.2vw, 0.85rem);
    color: #ff4444;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    text-shadow: 0 0 8px #ff0000;
    margin-bottom: clamp(4px, 1vh, 12px);
    animation: timer-warn-blink 1.1s step-start infinite;
    font-weight: bold;
    white-space: nowrap;
}

.timer-sub-label {
    font-size: clamp(0.45rem, 0.9vw, 0.7rem);
    color: #aa2222;
    letter-spacing: 2px;
    margin-top: clamp(6px, 1.2vh, 16px);
    opacity: 0.7;
    white-space: nowrap;
}

@keyframes timer-warn-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

@keyframes timer-pulse-glow {
    0%, 100% {
        text-shadow:
            0 0 20px #ff0000,
            0 0 50px #cc000099,
            0 0 100px #aa000044;
    }
    50% {
        text-shadow:
            0 0 40px #ff2222,
            0 0 90px #ff000099,
            0 0 160px #ff000055;
    }
}

/* Rack area: natural height; page scrolls on .tv-page when stacks exceed the viewport.
   #servers also has .tv-server-rack — layout must stay flex ROW so multiple
   .tv-server-rack__column sit side by side. */
.tv-page #servers:not(.hidden) {
    flex: 0 0 auto;
    width: 100%;
    max-width: min(98vw, 1280px);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    overflow: visible;
}

/* Stacked server rack (TV): single column stays vertically centered; multi-column stacks share a bottom baseline (grid-aligned with the neighbour column). */
.tv-page .tv-server-rack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    flex: 0 0 auto;
    text-align: left;
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.6));
    perspective: 1200px;
}

.tv-page .tv-server-rack:not(.tv-server-rack--single) {
    align-items: flex-end;
}

/* ANALOG2 & ANALOG3: vertical stack only, no horizontal spread */
.tv-page .tv-server-rack--analog-stack {
    flex-direction: column;
    align-items: center;
}

.tv-page .tv-server-rack__column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
}

/* ANALOG2 & ANALOG3 presets: stack from bottom up */
.tv-page .tv-server-rack--analog-stack .tv-server-rack__column {
    flex-direction: column-reverse;
    flex: 0 1 auto;
    width: 100%;
    max-width: min(95vw, 960px);
    margin-left: auto;
    margin-right: auto;
}

/* Single column (1–4 modules): same centered width as before */
.tv-page .tv-server-rack--single .tv-server-rack__column {
    flex: 0 1 auto;
    width: 100%;
    max-width: min(95vw, 960px);
    margin-left: auto;
    margin-right: auto;
}

.tv-page .server-module {
    --sm-edge: #2e3540;
    --sm-face: linear-gradient(168deg, #353c48 0%, #1a1f28 48%, #232933 100%);
    position: relative;
    margin: 0;
    border-radius: 5px;
}

/* Flush vertical stack: inner horizontal edges square */
.tv-page .tv-server-rack__column > .server-module:first-child:not(:only-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tv-page .tv-server-rack__column > .server-module:last-child:not(:only-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tv-page .tv-server-rack__column > .server-module:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* ANALOG2 & ANALOG3: reverse order, so adjust border radius rules */
.tv-page .tv-server-rack--analog-stack .tv-server-rack__column > .server-module:first-child:not(:only-child) {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tv-page .tv-server-rack--analog-stack .tv-server-rack__column > .server-module:last-child:not(:only-child) {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tv-page .tv-server-rack--analog-stack .tv-server-rack__column > .server-module:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Flush between columns: inner vertical edges square */
.tv-page .tv-server-rack:not(.tv-server-rack--single) > .tv-server-rack__column:first-child > .server-module {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tv-page .tv-server-rack:not(.tv-server-rack--single) > .tv-server-rack__column:last-child > .server-module {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tv-page .tv-server-rack:not(.tv-server-rack--single) > .tv-server-rack__column:not(:first-child):not(:last-child) > .server-module {
    border-radius: 0;
}

.tv-page .server-module__front {
    border-radius: inherit;
    padding: 3px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 35%),
        linear-gradient(180deg, #5c6578 0%, #3d4554 18%, #252b36 55%, #161b24 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 4px 0 #080a0e,
        0 10px 24px rgba(0, 0, 0, 0.55);
}

.tv-page .server-module__plate {
    --tv-module-plate-h: clamp(12.5rem, 44vmin, 16rem);
    box-sizing: border-box;
    border-radius: 2px;
    padding: 12px 14px 14px 16px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 8px),
        var(--sm-face);
    border: 1px solid var(--sm-edge);
    border-left: 3px solid #1a222c;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 14px 28px rgba(0, 0, 0, 0.28),
        inset 3px 0 0 rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    height: var(--tv-module-plate-h);
    min-height: var(--tv-module-plate-h);
    max-height: var(--tv-module-plate-h);
    overflow: hidden;
}

.tv-page .server-module__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 6px 8px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(200, 215, 225, 0.72);
    background: linear-gradient(180deg, #2a323e 0%, #1a2028 100%);
    border: 1px solid #0c1016;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.tv-page .server-module__vents {
    height: 11px;
    margin: 0 0 10px;
    border-radius: 2px;
    border: 1px solid #0a0e14;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55) 0 2px,
            rgba(80, 90, 105, 0.12) 2px 4px
        ),
        linear-gradient(180deg, #222831 0%, #12161d 100%);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.tv-page .server-module__sid {
    font-weight: 700;
    color: rgba(160, 175, 190, 0.85);
}

.tv-page .server-module__bays {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
    padding: 5px 6px;
    background: #121820;
    border: 1px solid #0a0d12;
    border-radius: 2px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tv-page .server-module__bay {
    position: relative;
    flex: 1;
    height: 26px;
    border-radius: 1px;
    background: linear-gradient(180deg, #2c3542 0%, #141a22 42%, #1e2630 100%);
    box-shadow:
        inset 0 3px 5px rgba(0, 0, 0, 0.82),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid #05080c;
}

.tv-page .server-module__bay::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #3a4555, #0d1016);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
    opacity: 0.65;
}

.tv-page .server-module__bay::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 46%;
    border-radius: 1px;
    background: linear-gradient(180deg, #0a0c10, #1a222c);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
    opacity: 0.85;
}

.tv-page .server-module__mid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(12px, 2.2vw, 24px);
}

.tv-page .server-module__title-col {
    text-align: left;
    min-width: 0;
    align-self: center;
    max-width: min(38vw, 300px);
    overflow: hidden;
}

.tv-page .server-module__title-col .server-module__state-line {
    text-align: left;
    margin-top: 8px;
    max-width: min(44vw, 360px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.tv-page .server-module__title {
    margin: 0;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #e8f4ff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.tv-page .server-module__status-hub {
    text-align: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.1vh, 11px);
    overflow: hidden;
}

.tv-page .server-module__state-line {
    margin: 0;
    font-size: clamp(0.82rem, 2.2vw, 1rem);
    font-weight: 700;
    line-height: 1.35;
}

.tv-page .server-module__meta {
    margin: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    font-size: clamp(0.74rem, 1.9vw, 0.9rem);
    line-height: 1.38;
    color: rgba(195, 215, 225, 0.92);
    min-height: 0;
    overflow: hidden;
}

.tv-page .server-module__meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    text-align: center;
}

.tv-page .server-module__meta-k {
    font-weight: 600;
    color: rgba(175, 200, 215, 0.88);
}

.tv-page .server-module__meta-k::after {
    content: ":";
}

.tv-page .server-module__meta-v {
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(225, 240, 250, 0.98);
}

.tv-page .server-module__meta-note {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(0.74rem, 1.9vw, 0.9rem);
    line-height: 1.4;
    font-weight: 600;
    color: rgba(195, 215, 225, 0.9);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Saved module: group name is the focal point on TV */
.tv-page .server-module__meta-row--group {
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    width: 100%;
    margin-bottom: 0.15rem;
}

.tv-page .server-module__meta-row--group .server-module__meta-k {
    font-size: clamp(0.65rem, 1.5vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(175, 200, 215, 0.82);
}

.tv-page .server-module__meta-row--group .server-module__meta-v {
    font-size: clamp(1.35rem, 4.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* --- Status: rescued (clear green “saved”) --- */
.tv-page .server-module--rescued {
    --sm-edge: rgba(0, 255, 170, 0.65);
}

.tv-page .server-module--rescued .server-module__front {
    outline: 2px solid rgba(0, 255, 170, 0.95);
    outline-offset: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 0 #0d1016,
        0 0 0 1px rgba(0, 255, 170, 0.35),
        0 0 36px rgba(0, 255, 170, 0.35),
        0 12px 28px rgba(0, 0, 0, 0.55);
}

.tv-page .server-module--rescued .server-module__plate {
    background: linear-gradient(168deg, #1a4a3c 0%, #0d2820 40%, #14382e 100%);
    border: 1px solid rgba(0, 255, 170, 0.85);
    box-shadow:
        inset 0 0 60px rgba(0, 255, 170, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(0, 255, 170, 0.25);
}

.tv-page .server-module--rescued .server-module__unit {
    color: #00ffaa;
    text-shadow: 0 0 12px rgba(0, 255, 170, 0.65);
}

.tv-page .server-module--rescued .server-module__state-line {
    color: #8fffd8;
    text-shadow: 0 0 14px rgba(0, 255, 170, 0.45);
}

.tv-page .server-module--rescued .server-module__meta,
.tv-page .server-module--rescued .server-module__meta-v {
    color: rgba(200, 255, 235, 0.98);
}

.tv-page .server-module--rescued .server-module__meta-k {
    color: rgba(140, 235, 205, 0.88);
}

.tv-page .server-module--rescued .server-module__meta-row--group .server-module__meta-v {
    color: #e8fff6;
    text-shadow:
        0 0 28px rgba(0, 255, 170, 0.45),
        0 2px 14px rgba(0, 0, 0, 0.5);
}

.tv-page .server-module--rescued .server-module__meta-note {
    color: rgba(180, 255, 225, 0.95);
}

.tv-page .server-module--rescued .server-module__bay {
    border-color: rgba(0, 255, 170, 0.15);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 0 12px rgba(0, 255, 170, 0.08);
}

/* --- Status: pending (alert red / needs action) --- */
.tv-page .server-module--pending {
    --sm-edge: rgba(255, 100, 100, 0.5);
}

.tv-page .server-module--pending .server-module__plate {
    box-shadow:
        inset 0 0 44px rgba(255, 70, 70, 0.09),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(255, 60, 60, 0.12);
}

.tv-page .server-module--pending .server-module__unit {
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.55);
}

.tv-page .server-module--pending .server-module__state-line {
    color: #ffb0ae;
    animation: serverModulePendingPulse 2s ease-in-out infinite;
}

.tv-page .server-module--pending .server-module__meta,
.tv-page .server-module--pending .server-module__meta-note {
    color: rgba(255, 200, 200, 0.94);
}

.tv-page .server-module--pending .server-module__meta-v {
    color: #fff5f2;
}

.tv-page .server-module--pending .server-module__bay {
    border-color: rgba(120, 40, 40, 0.55);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.85),
        inset 0 0 10px rgba(255, 60, 60, 0.06);
}

/* --- Status: lost / expired (red, critical) --- */
.tv-page .server-module--lost {
    --sm-edge: rgba(255, 72, 72, 0.55);
}

.tv-page .server-module--lost .server-module__plate {
    background: linear-gradient(168deg, #402428 0%, #1c1214 45%, #281a1c 100%);
    border: 1px solid rgba(255, 90, 90, 0.55);
    box-shadow:
        inset 0 0 55px rgba(255, 60, 60, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        0 0 26px rgba(255, 60, 60, 0.22);
}

.tv-page .server-module--lost .server-module__unit {
    color: #ff6b6b;
    text-shadow: 0 0 14px rgba(255, 80, 80, 0.65);
}

.tv-page .server-module--lost .server-module__state-line {
    color: #ffaaaa;
    animation: serverModuleLostBlink 1.1s ease-in-out infinite;
}

.tv-page .server-module--lost .server-module__meta,
.tv-page .server-module--lost .server-module__meta-note {
    color: rgba(255, 200, 200, 0.94);
}

.tv-page .server-module--lost .server-module__meta-v {
    color: #fff0f0;
}

/* Unlock: one-shot when a slot flips to rescued (TV poll detects new entry) */
@keyframes tvServerUnlockPop {
    0% {
        transform: scale(0.93) translateY(12px);
        filter: brightness(1.4) saturate(1.12);
    }
    50% {
        transform: scale(1.04) translateY(0);
        filter: brightness(1.12) saturate(1.05);
    }
    100% {
        transform: scale(1) translateY(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes tvServerUnlockHalo {
    0% {
        outline: 2px solid rgba(0, 255, 170, 0.35);
        outline-offset: 3px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 4px 0 #0d1016,
            0 0 0 1px rgba(0, 255, 170, 0.2),
            0 0 12px rgba(0, 255, 170, 0.2),
            0 12px 28px rgba(0, 0, 0, 0.55);
    }
    40% {
        outline: 3px solid rgba(160, 255, 230, 1);
        outline-offset: 3px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 4px 0 #0d1016,
            0 0 0 2px rgba(0, 255, 200, 0.85),
            0 0 48px rgba(0, 255, 170, 0.7),
            0 0 72px rgba(0, 255, 200, 0.35),
            0 12px 28px rgba(0, 0, 0, 0.45);
    }
    100% {
        outline: 2px solid rgba(0, 255, 170, 0.95);
        outline-offset: 3px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 4px 0 #0d1016,
            0 0 0 1px rgba(0, 255, 170, 0.35),
            0 0 36px rgba(0, 255, 170, 0.35),
            0 12px 28px rgba(0, 0, 0, 0.55);
    }
}

.tv-page .server-module--unlock-enter {
    animation: tvServerUnlockPop 0.8s cubic-bezier(0.33, 1.4, 0.64, 1) both;
    z-index: 8;
}

.tv-page .server-module--unlock-enter .server-module__front {
    animation: tvServerUnlockHalo 0.95s ease-out both;
}

/* LED stack — compact rack-style indicator strip (no tall empty column) */
.tv-page .server-module__led-col {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px 6px 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #0c1018 0%, #151b24 100%);
    border: 1px solid #1e2632;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
}

.tv-page .server-module__led-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
}

.tv-page .server-module__led-label {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(150, 165, 182, 0.55);
    line-height: 1;
    white-space: nowrap;
}

.tv-page .server-module__led {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.75);
}

.tv-page .server-module--rescued .server-module__led--pwr {
    background: radial-gradient(circle at 30% 30%, #cfffec, #00cc66);
    box-shadow: 0 0 12px rgba(0, 255, 140, 0.85);
}

.tv-page .server-module--rescued .server-module__led--lan {
    background: radial-gradient(circle at 30% 30%, #d4fff4, #00ddaa);
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.65);
    animation: serverLedLanPulse 2.4s ease-in-out infinite;
}

.tv-page .server-module--rescued .server-module__led--act {
    background: radial-gradient(circle at 30% 30%, #eefff8, #00bb88);
    animation: serverLedActBlink 1.8s steps(2, end) infinite;
}

.tv-page .server-module--pending .server-module__led--pwr {
    background: radial-gradient(circle at 30% 30%, #ffc8c8, #cc3333);
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.85);
    animation: serverLedWarnPulse 1.6s ease-in-out infinite;
}

.tv-page .server-module--pending .server-module__led--lan {
    background: #2a3040;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
    opacity: 0.45;
}

.tv-page .server-module--pending .server-module__led--act {
    background: radial-gradient(circle at 30% 30%, #ffb0b0, #dd3333);
    animation: serverLedActBlink 1s steps(2, end) infinite;
}

.tv-page .server-module--lost .server-module__led--pwr,
.tv-page .server-module--lost .server-module__led--lan,
.tv-page .server-module--lost .server-module__led--act {
    background: radial-gradient(circle at 30% 30%, #ffc4c4, #cc2222);
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.85);
    animation: serverLedLostStrobe 0.85s ease-in-out infinite;
}

@keyframes serverModulePendingPulse {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.88; filter: brightness(1.12); }
}

@keyframes serverModuleLostBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes serverLedLanPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(0, 255, 200, 0.65); }
    50% { opacity: 0.75; box-shadow: 0 0 16px rgba(0, 255, 200, 0.95); }
}

@keyframes serverLedActBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@keyframes serverLedWarnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes serverLedLostStrobe {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.35; filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .tv-page .server-module,
    .tv-page .server-module__state-line,
    .tv-page .server-module__led--lan,
    .tv-page .server-module__led--act,
    .tv-page .server-module--lost .server-module__led--pwr {
        animation: none !important;
    }

    .tv-page .server-module--unlock-enter,
    .tv-page .server-module--unlock-enter .server-module__front {
        animation: none !important;
    }
}

#timer {
    font-size: clamp(2rem, 4vw, 5rem);
    color: #ff2020;
    text-shadow:
        0 0 20px #ff0000,
        0 0 50px #cc000099,
        0 0 100px #aa000044;
    letter-spacing: clamp(2px, 0.3vw, 4px);
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    animation: timer-pulse-glow 1.6s ease-in-out infinite;
    word-break: keep-all;
    white-space: nowrap;
}

/* ===========================
   Admin visual timer (TV look)
   =========================== */
.timer-visual {
    font-size: 3.5em;
    color: #ff5555;
    text-shadow: 0 0 20px #ff4444;
    letter-spacing: 2px;
    margin: 8px 0 0;
    text-align: center;
}

#setup {
    background-color: rgba(10, 10, 10, 0.9);
    border: 1px solid #00ffaa55;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 0 20px #00ffaa33;
}

#setup label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #00ffaa;
}

#setup input[type="number"] {
    width: 120px;
    padding: 10px;
    border: 1px solid #00ffaa55;
    background-color: #0f0f0f;
    color: #ffffff;
    border-radius: 8px;
    font-size: 1.1em;
    margin: 10px 0 20px;
    text-align: center;
}

#setup button {
    padding: 14px 28px;
    background-color: #00ffaa;
    color: #0f0f0f;
    font-weight: bold;
    border: 2px solid #00ffaa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px #00ffaa66;
}

#setup button:hover {
    background-color: #0f0f0f;
    color: #00ffaa;
    box-shadow: 0 0 25px #00ffaa99;
}

/* --- TV victory celebration (all servers rescued) --- */
.tv-victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000010;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

.tv-victory-overlay.tv-victory-overlay--visible {
    visibility: visible;
    opacity: 1;
}

.tv-victory-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0, 255, 170, 0.45) 0%, transparent 58%),
        radial-gradient(ellipse 60% 50% at 15% 25%, rgba(255, 210, 80, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 85% 30%, rgba(100, 220, 255, 0.28) 0%, transparent 48%),
        radial-gradient(ellipse 120% 90% at 50% 100%, rgba(0, 80, 60, 0.5) 0%, transparent 55%),
        rgba(4, 12, 10, 0.94);
    animation: tvVictoryBackdropPulse 7s ease-in-out infinite alternate;
}

@keyframes tvVictoryBackdropPulse {
    0% {
        filter: hue-rotate(-8deg) brightness(1);
        transform: scale(1);
    }
    100% {
        filter: hue-rotate(18deg) brightness(1.12);
        transform: scale(1.03);
    }
}

.tv-victory-rays {
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(0, 255, 170, 0.11) 45deg,
        transparent 95deg,
        rgba(255, 220, 120, 0.09) 140deg,
        transparent 185deg,
        rgba(120, 240, 255, 0.08) 230deg,
        transparent 280deg,
        rgba(0, 255, 170, 0.07) 320deg,
        transparent 360deg
    );
    animation: tvVictoryRaysSpin 28s linear infinite;
}

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

.tv-victory-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tv-victory-confetti span {
    position: absolute;
    top: -24px;
    width: 14px;
    height: 22px;
    border-radius: 3px;
    opacity: 0.92;
    animation-name: tvVictoryConfettiFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

@keyframes tvVictoryConfettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.35;
    }
}

.tv-victory-confetti span:nth-child(1) { left: 4%; animation-duration: 9s; animation-delay: 0s; background: linear-gradient(180deg, #00ffaa, #00aa77); }
.tv-victory-confetti span:nth-child(2) { left: 9%; animation-duration: 11s; animation-delay: -2s; background: linear-gradient(180deg, #ffd54a, #ff9f1c); }
.tv-victory-confetti span:nth-child(3) { left: 14%; animation-duration: 8.5s; animation-delay: -4s; background: linear-gradient(180deg, #6ae3ff, #22aadd); }
.tv-victory-confetti span:nth-child(4) { left: 19%; animation-duration: 10s; animation-delay: -1s; background: linear-gradient(180deg, #ff8acb, #dd4488); }
.tv-victory-confetti span:nth-child(5) { left: 24%; animation-duration: 12s; animation-delay: -5s; background: linear-gradient(180deg, #c8ff8c, #66dd44); }
.tv-victory-confetti span:nth-child(6) { left: 29%; animation-duration: 9.5s; animation-delay: -3s; background: linear-gradient(180deg, #00ffaa, #00cc88); }
.tv-victory-confetti span:nth-child(7) { left: 34%; animation-duration: 10.5s; animation-delay: -6s; background: linear-gradient(180deg, #ffe566, #ffb020); }
.tv-victory-confetti span:nth-child(8) { left: 39%; animation-duration: 8s; animation-delay: -2.5s; background: linear-gradient(180deg, #88eeff, #44aaee); }
.tv-victory-confetti span:nth-child(9) { left: 44%; animation-duration: 11.5s; animation-delay: -7s; background: linear-gradient(180deg, #aa88ff, #6644dd); }
.tv-victory-confetti span:nth-child(10) { left: 49%; animation-duration: 9s; animation-delay: -1.5s; background: linear-gradient(180deg, #00ffaa, #00aa99); }
.tv-victory-confetti span:nth-child(11) { left: 54%; animation-duration: 12.5s; animation-delay: -4s; background: linear-gradient(180deg, #ffdd66, #ff8833); }
.tv-victory-confetti span:nth-child(12) { left: 59%; animation-duration: 8.8s; animation-delay: -8s; background: linear-gradient(180deg, #77eeff, #2299cc); }
.tv-victory-confetti span:nth-child(13) { left: 64%; animation-duration: 10.2s; animation-delay: -3.5s; background: linear-gradient(180deg, #ff99cc, #dd5599); }
.tv-victory-confetti span:nth-child(14) { left: 69%; animation-duration: 9.3s; animation-delay: -5.5s; background: linear-gradient(180deg, #d4ff66, #88cc22); }
.tv-victory-confetti span:nth-child(15) { left: 74%; animation-duration: 11s; animation-delay: -0.5s; background: linear-gradient(180deg, #00ffcc, #00aa88); }
.tv-victory-confetti span:nth-child(16) { left: 79%; animation-duration: 8.2s; animation-delay: -6.5s; background: linear-gradient(180deg, #ffd700, #ff8800); }
.tv-victory-confetti span:nth-child(17) { left: 84%; animation-duration: 10.8s; animation-delay: -2s; background: linear-gradient(180deg, #99eeff, #4488dd); }
.tv-victory-confetti span:nth-child(18) { left: 89%; animation-duration: 9.7s; animation-delay: -4.5s; background: linear-gradient(180deg, #ff77bb, #cc3388); }
.tv-victory-confetti span:nth-child(19) { left: 7%; animation-duration: 11.2s; animation-delay: -9s; background: linear-gradient(180deg, #66ffaa, #22aa66); width: 11px; height: 18px; }
.tv-victory-confetti span:nth-child(20) { left: 22%; animation-duration: 9.8s; animation-delay: -3.8s; background: linear-gradient(180deg, #fff3a0, #eeaa33); width: 11px; height: 18px; }
.tv-victory-confetti span:nth-child(21) { left: 52%; animation-duration: 10.4s; animation-delay: -7.2s; background: linear-gradient(180deg, #a8f0ff, #4499cc); width: 11px; height: 18px; }
.tv-victory-confetti span:nth-child(22) { left: 72%; animation-duration: 8.6s; animation-delay: -1.2s; background: linear-gradient(180deg, #ffaadd, #dd6699); width: 11px; height: 18px; }
.tv-victory-confetti span:nth-child(23) { left: 92%; animation-duration: 12.2s; animation-delay: -5.8s; background: linear-gradient(180deg, #ccff99, #66bb33); width: 11px; height: 18px; }
.tv-victory-confetti span:nth-child(24) { left: 97%; animation-duration: 9.1s; animation-delay: -8.5s; background: linear-gradient(180deg, #00ffee, #00aa99); width: 11px; height: 18px; }

.tv-victory-content {
    position: relative;
    z-index: 2;
    max-width: min(96vw, 1100px);
    padding: 24px 28px;
    text-align: center;
    text-shadow: 0 0 40px rgba(0, 255, 170, 0.45), 0 4px 24px rgba(0, 0, 0, 0.85);
}

.tv-victory-kicker {
    margin: 0 0 12px;
    font-size: clamp(1rem, 3.5vw, 1.55rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(200, 255, 230, 0.95);
    font-weight: 700;
    animation: tvVictoryKickerGlow 2.4s ease-in-out infinite alternate;
}

@keyframes tvVictoryKickerGlow {
    from {
        opacity: 0.85;
        letter-spacing: 0.32em;
    }
    to {
        opacity: 1;
        letter-spacing: 0.38em;
        text-shadow: 0 0 28px rgba(0, 255, 170, 0.8);
    }
}

.tv-victory-title {
    margin: 0 0 20px;
    font-size: clamp(2.4rem, 11vw, 6rem);
    line-height: 1.08;
    font-weight: 800;
    color: #f4fff9;
    letter-spacing: -0.02em;
    animation:
        tvVictoryTitleEnter 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        tvVictoryTitlePulse 2.8s ease-in-out 1s infinite alternate;
}

@keyframes tvVictoryTitleEnter {
    0% {
        opacity: 0;
        transform: scale(0.72) translateY(28px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes tvVictoryTitlePulse {
    0% {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(0, 255, 170, 0.9),
            0 0 60px rgba(0, 200, 140, 0.55),
            0 0 100px rgba(255, 220, 100, 0.25);
    }
    100% {
        transform: scale(1.03);
        text-shadow:
            0 0 35px rgba(0, 255, 170, 1),
            0 0 90px rgba(0, 220, 160, 0.65),
            0 0 140px rgba(255, 230, 120, 0.45);
    }
}

.tv-victory-sub {
    margin: 0 auto;
    max-width: 42em;
    font-size: clamp(1.05rem, 3.2vw, 1.75rem);
    line-height: 1.45;
    color: rgba(210, 255, 235, 0.96);
    font-weight: 600;
    animation: tvVictorySubFade 1.2s ease 0.35s both;
}

.tv-victory-sub p {
    margin: 0;
}

.tv-victory-sub p + p {
    margin-top: 0.65em;
}

@keyframes tvVictorySubFade {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-victory-backdrop,
    .tv-victory-rays,
    .tv-victory-confetti span,
    .tv-victory-kicker,
    .tv-victory-title,
    .tv-victory-sub {
        animation: none !important;
    }

    .tv-victory-title {
        transform: none;
        filter: none;
        opacity: 1;
    }

    .tv-victory-sub {
        opacity: 1;
        transform: none;
    }
}

.hidden {
    display: none !important;
}

@media (max-width: 700px) {
    #timer {
        font-size: clamp(1.6rem, 8vw, 2.5rem);
    }

    #timer-section {
        flex-direction: column;
        gap: 10px;
        padding: 14px 20px;
        margin-bottom: 16px;
    }

    .timer-col--title {
        border-left: none;
        border-top: 1px solid #cc000066;
        padding-left: 0;
        padding-top: 10px;
    }

    .timer-visual {
        font-size: 2.5em;
    }

    .tv-page .server-module__plate {
        padding: 12px 14px 14px;
    }

    .tv-page .server-module__bays {
        flex-wrap: wrap;
    }

    .tv-page .server-module__bay {
        flex: 1 1 14%;
        min-width: 48px;
    }
}

.admin-server-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.admin-server-actions .admin-input {
    flex: 1 1 140px;
    min-width: 0;
}

.admin-server-actions .btn {
    flex: 0 0 auto;
}

.right-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 180px;
}

.row-controls.wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.right-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    height: 100%;
}

.gametime-help {
    text-align: center;
    width: 100%;
    margin-top: 12px;
    line-height: 1.3;
}

.btn.active-mode {
    background-color: #00ffaa;
    color: #000;
    box-shadow: 0 0 10px #00ffaaaa;
    font-weight: bold;
    border: 1px solid #00ffaa;
    transform: scale(1.05);
}

.btn.active-mode.btn--ghost {
    background-color: transparent;
    border: 1px solid #00ffaa;
    color: #00ffaa;
    box-shadow: 0 0 8px #00ffaa77;
}

/* Full-width equal columns for admin timer controls */
.row-controls.timer-adjust-row {
    display: grid;
    width: 100%;
    gap: 8px;
    align-items: stretch;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.row-controls.timer-adjust-row .btn {
    min-width: 0;
    width: 100%;
}

.admin-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.admin-preset-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    min-width: 0;
    min-height: 118px;
    margin: 0;
    padding: 12px 14px 34px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease;
    box-sizing: border-box;
    border: 2px solid #00ffaa55;
    background: rgba(8, 14, 12, 0.55);
    color: #00ffaa;
    box-shadow: 0 0 8px #00ffaa22;
    position: relative;
    overflow: visible;
}

.admin-preset-card:hover {
    border-color: #00ffaa99;
    box-shadow: 0 0 14px #00ffaa44;
}

.admin-preset-card:focus-visible {
    outline: 2px solid #00ffaa;
    outline-offset: 2px;
}

.admin-preset-card--active {
    border-color: #00ffaa;
    background: linear-gradient(165deg, #00ffaa 0%, #00cc88 100%);
    color: #0a1210;
    box-shadow:
        0 0 0 2px #0d1117,
        0 0 24px #00ffaa88,
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.admin-preset-card--active:hover {
    filter: brightness(1.04);
}

.admin-preset-card--active .admin-preset-card__title {
    color: #0a1210;
    text-shadow: none;
}

.admin-preset-card--active .admin-preset-card__duration {
    color: rgba(10, 18, 16, 0.88);
}

.admin-preset-card--active .admin-preset-card__counts {
    color: rgba(10, 18, 16, 0.92);
    opacity: 1;
}

.admin-preset-card--active .admin-preset-card__counts li::marker {
    color: #0a1210;
}

.admin-preset-card--active .admin-preset-card__info-icon {
    border-color: rgba(10, 18, 16, 0.35);
    color: rgba(10, 18, 16, 0.85);
    background: rgba(10, 18, 16, 0.08);
}

.admin-preset-card:active {
    transform: translateY(1px) scale(0.99);
}

.admin-preset-card__duration {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #9feccc;
    pointer-events: none;
}

.admin-preset-card__duration-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.admin-preset-card__headline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 56px;
    width: 100%;
}

.admin-preset-card__title {
    font-size: 1rem;
    margin: 0;
    text-shadow: 0 0 10px #00ffaa44;
}

.admin-preset-card__picked {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #00ffaa88;
    background: rgba(13, 17, 23, 0.55);
    color: #00ffcc;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease,
        color 0.2s ease;
    pointer-events: none;
}

.admin-preset-card--active .admin-preset-card__picked {
    opacity: 1;
    transform: scale(1);
    border-color: #0a1210;
    background: rgba(10, 18, 16, 0.2);
    color: #0a1210;
}

.admin-preset-card__counts {
    margin: 0;
    padding-left: 1.1em;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    opacity: 0.92;
    color: #9feccc;
}

.admin-preset-card__counts li {
    margin-bottom: 3px;
}

.admin-preset-card__info {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    cursor: help;
}

.admin-preset-card__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #00ffaa66;
    background: rgba(13, 17, 23, 0.45);
    color: #9feccc;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    text-transform: lowercase;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.admin-preset-card__info:hover .admin-preset-card__info-icon,
.admin-preset-card__info:focus-visible .admin-preset-card__info-icon {
    border-color: #00ffaa;
    color: #00ffcc;
    background: rgba(13, 17, 23, 0.75);
}

.admin-preset-card__tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(280px, 72vw);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #00ffaa55;
    background: rgba(8, 14, 12, 0.97);
    color: #d8ffe8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px #00ffaa22;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.admin-preset-card__info:hover .admin-preset-card__tooltip,
.admin-preset-card__info:focus-visible .admin-preset-card__tooltip,
.admin-preset-card__info:focus-within .admin-preset-card__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-preset-card__tooltip-heading {
    display: block;
    margin: 8px 0 4px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00ffaa;
}

.admin-preset-card__tooltip-heading:first-child {
    margin-top: 0;
}

.admin-preset-card__tooltip-list {
    margin: 0;
    padding-left: 1.1em;
}

.admin-preset-card__tooltip-list li {
    margin-bottom: 2px;
}

@media (max-width: 720px) {
    .row-controls.timer-adjust-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-preset-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .row-controls.timer-adjust-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Uppdrag: Hemliga meddelanden
   Del A: .hem-hidden-text (tom rad / mellan raderna)
   Del B: .hem-embed (bokstäver mellan ord — samma osynlighet + ::selection #ea528e)
   ============================================================ */
.task-hem {
    max-width: 960px;
    user-select: text;
    -webkit-user-select: text;
}

.task-hem .hem-part-a--completed h3#hem-title-a {
    color: #8ecbb0;
}

.task-hem .hem-lead {
    text-align: left;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    color: #c8ffe8;
}

.task-hem .hem-tip-open-wrap {
    margin: 0 0 1.25rem;
}

.task-hem .hem-tip-open-btn {
    padding: 8px 16px;
    font-size: 0.95rem;
    line-height: 1.3;
    background: rgba(0, 255, 170, 0.12);
    border: 1px solid rgba(0, 255, 170, 0.45);
    color: #c8ffe8;
    border-radius: 8px;
    cursor: pointer;
}

.task-hem .hem-tip-open-btn:hover {
    background: rgba(0, 255, 170, 0.2);
    border-color: rgba(0, 255, 170, 0.65);
}

#hem-tip-modal .hem-tip-modal-box {
    max-width: 560px;
    text-align: left;
}

#hem-tip-modal .hem-tip-modal-box > h2 {
    text-align: center;
    margin-top: 0;
}

#hem-tip-modal .hem-tip-section {
    margin: 1.1em 0;
    padding-top: 0.85em;
    border-top: 1px dashed rgba(0, 255, 170, 0.28);
}

#hem-tip-modal .hem-tip-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

#hem-tip-modal .hem-tip-section h3 {
    margin: 0 0 0.5em;
    font-size: 1.05rem;
    color: #e6fff6;
}

#hem-tip-modal .hem-tip-section p {
    margin: 0;
    line-height: 1.55;
    color: #b8e8d4;
    font-size: 0.95rem;
}

#hem-tip-modal .hem-tip-section p + p {
    margin-top: 0.65em;
}

#hem-tip-modal .hem-tip-section h3 + p {
    margin-top: 0.35em;
}

#hem-tip-modal .hem-tip-modal-box > button[type="button"] {
    margin-top: 1rem;
}

.task-hem .hem-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 8px;
}

.task-hem .hem-part {
    text-align: left;
}

.task-hem .hem-part-badge {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a1210;
    background: linear-gradient(90deg, #00ffaa, #00cc88);
    border-radius: 4px;
}

.task-hem .hem-part-badge--b {
    background: linear-gradient(90deg, #ea528e, #ff8ab0);
    color: #1a050c;
}

.task-hem .hem-part-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: #e6fff6;
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
}

.task-hem .hem-part-intro {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #9feccc;
}

/* Dokumentpanel — avlyssnings-/ärende-känsla, skild från övriga .container-rutor */
.task-hem .hem-doc-panel {
    --hem-bg: #0a1210;
    --hem-ink: #d5f5e8;
    --hem-muted: #6a9e8a;
    position: relative;
    background:
        linear-gradient(180deg, rgba(0, 255, 170, 0.06) 0%, transparent 38%),
        var(--hem-bg);
    border: 1px solid rgba(0, 255, 170, 0.35);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 28px rgba(0, 0, 0, 0.45);
    text-align: left;
    overflow: hidden;
}

.task-hem .hem-doc-panel--a {
    border-color: rgba(0, 255, 170, 0.45);
}

.task-hem .hem-doc-panel--b {
    border-color: rgba(234, 82, 142, 0.5);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 32px rgba(234, 82, 142, 0.08);
}

.task-hem .hem-stamp--a {
    background: linear-gradient(135deg, #00ffaa, #00aa77);
    color: #0a1210;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.35);
}

.task-hem .hem-doc-body--interline {
    font-size: 1.05rem;
    line-height: 1.75;
}

.task-hem .hem-doc-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 170, 0.03) 2px,
        rgba(0, 255, 170, 0.03) 3px
    );
    pointer-events: none;
    opacity: 0.5;
}

.task-hem .hem-doc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.task-hem .hem-stamp {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    font-weight: 800;
    color: #0a1210;
    background: linear-gradient(135deg, #ea528e, #ff7eb3);
    border-radius: 4px;
    transform: rotate(-2deg);
    box-shadow: 0 0 14px rgba(234, 82, 142, 0.45);
}

.task-hem .hem-ref {
    font-size: 0.78rem;
    color: var(--hem-muted);
}

.task-hem .hem-doc-header {
    position: relative;
    z-index: 1;
    border-bottom: 1px dashed rgba(0, 255, 170, 0.25);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.task-hem .hem-doc-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: var(--hem-ink);
    text-shadow: 0 0 12px rgba(0, 255, 170, 0.25);
}

.task-hem .hem-doc-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--hem-muted);
}

.task-hem .hem-doc-body {
    position: relative;
    z-index: 1;
    color: var(--hem-ink);
    font-size: 0.95rem;
    line-height: 1.6;
}

.task-hem .hem-doc-body p {
    margin: 0 0 1em;
}

/* Långt interceptat mejl (del A) */
.task-hem .hem-email-panel .hem-email-headers {
    border: 1px solid rgba(0, 255, 170, 0.22);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.86rem;
    line-height: 1.65;
}

.task-hem .hem-email-row {
    margin: 0.2em 0;
}

.task-hem .hem-email-k {
    color: #7ddfb8;
    display: inline-block;
    min-width: 4.2em;
    font-weight: 600;
}

.task-hem .hem-email-body {
    padding-top: 4px;
}

/* Del B: dialog + .hem-embed mellan hela ord */
.task-hem .hem-misstanke-block p {
    margin: 0 0 1em;
}

.task-hem .hem-dialog .hem-line {
    margin: 0 0 1em;
    line-height: 1.65;
}

.task-hem .hem-dialog .hem-line:last-child {
    margin-bottom: 0;
}

.task-hem .hem-speaker {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.task-hem .hem-speaker--sk {
    color: #ff9ec4;
}

.task-hem .hem-speaker--ly {
    color: #7ddfb8;
}

/* Tomma “mellanrum” där dold text bor — ger yta att markera */
.task-hem .hem-between {
    min-height: 2.75em;
    margin: 1rem 0;
    padding: 4px 0;
    border-left: 3px solid rgba(234, 82, 142, 0.25);
    padding-left: 12px;
}

/*
  Dold text: samma färg som panelbakgrund så den inte syns utan markering.
  När spelaren markerar används ::selection med accent #ea528e (krav).
*/
.task-hem .hem-hidden-text {
    color: var(--hem-bg);
    background: transparent;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

/* strong/em inuti får inte bli synliga via annan färg */
.task-hem .hem-hidden-text * {
    color: var(--hem-bg);
    font-weight: inherit;
    font-style: normal;
}

.task-hem .hem-hidden-text::selection {
    background: #ea528e;
    color: #ffffff;
}

.task-hem .hem-hidden-text::-moz-selection {
    background: #ea528e;
    color: #ffffff;
}

/* Dold bokstav mellan hela ord (inte inuti ord): osynlig tills markering (#ea528e) */
.task-hem .hem-embed {
    color: var(--hem-bg);
    background: transparent;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.task-hem .hem-embed::selection {
    background: #ea528e;
    color: #ffffff;
}

.task-hem .hem-embed::-moz-selection {
    background: #ea528e;
    color: #ffffff;
}

.task-hem .hem-doc-footnote {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 255, 170, 0.15);
    font-size: 0.8rem;
    color: var(--hem-muted);
    font-style: italic;
}

/* =========================================================
   Hemliga meddelanden — animations
   ========================================================= */

/* Wrong verify: shake the input/button */
.hem-anim-shake {
    animation: hemShake 0.35s ease;
}

@keyframes hemShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    45%  { transform: translateX(5px); }
    65%  { transform: translateX(-4px); }
    82%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* Correct verify: green flash on button */
.hem-anim-btn-ok {
    animation: hemBtnOk 0.55s ease forwards;
}

@keyframes hemBtnOk {
    0%   { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0);  filter: brightness(1); }
    35%  { box-shadow: 0 0 0 6px rgba(0, 255, 170, 0.45); filter: brightness(1.3); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0);  filter: brightness(1); }
}

/* Part A completion: brief green glow on the wrapper */
.hem-anim-part-complete {
    animation: hemPartComplete 0.7s ease;
}

@keyframes hemPartComplete {
    0%   { box-shadow: none; }
    35%  { box-shadow: 0 0 28px rgba(0, 255, 170, 0.35); }
    100% { box-shadow: none; }
}

/* Part B reveal: slide + fade in */
#hem-part-b.hem-anim-enter {
    animation: hemPartBEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hemPartBEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Divider between A and B: flash when B unlocks */
.hem-anim-divider-flash {
    animation: hemDividerFlash 0.6s ease;
}

@keyframes hemDividerFlash {
    0%   { border-color: rgba(0, 255, 170, 0.15); }
    40%  { border-color: rgba(0, 255, 170, 0.75); box-shadow: 0 1px 8px rgba(0, 255, 170, 0.3); }
    100% { border-color: rgba(0, 255, 170, 0.15); box-shadow: none; }
}

hr.hem-divider {
    border: none;
    border-top: 1px solid rgba(0, 255, 170, 0.15);
    margin: 30px 0;
}

/* =========================================================
   KNÄCK ISEN – Ice Cracking Exercise
   ========================================================= */

/* --- Intro Screen --- */
.ki-intro {
    text-align: center;
    padding: 10px 0 20px;
}
.ki-intro-agent {
    display: inline-block;
    font-size: 2.8rem;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 12px #00ffaa);
}
.ki-intro h3 {
    color: #00ffaa;
    font-size: 1.2rem;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ki-intro-brief {
    background: rgba(0, 255, 170, 0.07);
    border: 1px solid #00ffaa44;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 auto 20px;
    max-width: 540px;
    text-align: left;
    color: #aaffcc;
    font-size: 0.95rem;
    line-height: 1.6;
}
.ki-intro-brief strong {
    color: #00ffaa;
}
.ki-start-btn {
    font-size: 1.1rem;
    padding: 14px 32px;
    background: #00ffaa;
    color: #0d1117;
    border: 2px solid #00ffaa;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px #00ffaa88;
    transition: all 0.25s ease;
    margin-top: 6px;
}
.ki-start-btn:hover {
    background: #0d1117;
    color: #00ffaa;
}

/* --- Game Layout --- */
.ki-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.ki-brief {
    width: 100%;
    max-width: 580px;
    padding: 14px 16px;
    margin-bottom: 10px;
    color: #aaffcc;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
}
.ki-brief strong {
    color: #00ffaa;
}

/* --- Statement (no box) --- */
.ki-statement-wrap {
    width: 100%;
    max-width: 620px;
    text-align: center;
    padding: 6px 6px 2px;
}
.ki-statement {
    font-size: 1.6rem;
    color: #58a6ff;
    line-height: 1.45;
    text-shadow:
        0 0 14px rgba(88, 166, 255, 0.35),
        0 0 30px rgba(0, 255, 170, 0.12);
}

@media (max-width: 420px) {
    .ki-statement {
        font-size: 1.35rem;
    }
}

/* --- Ice Block --- */
.ki-ice-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}
.ki-ice-block {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(77,179,255,0.20) 0%, rgba(45,135,255,0.30) 42%, rgba(10,40,110,0.62) 100%);
    border: 2px solid rgba(77,179,255,0.55);
    box-shadow:
        0 0 30px rgba(77,179,255,0.35),
        0 0 60px rgba(45,135,255,0.18),
        inset 0 0 40px rgba(77,179,255,0.12),
        inset 0 0 10px rgba(255,255,255,0.08);
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}
/* frost texture via pseudo-element */
.ki-ice-block::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(
            47deg,
            transparent 0px,
            transparent 18px,
            rgba(77,179,255,0.05) 18px,
            rgba(77,179,255,0.05) 19px
        ),
        repeating-linear-gradient(
            -47deg,
            transparent 0px,
            transparent 22px,
            rgba(77,179,255,0.035) 22px,
            rgba(77,179,255,0.035) 23px
        );
    border-radius: 18px;
    pointer-events: none;
}
/* inner shimmer */
.ki-ice-block::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 60%;
    height: 60%;
    z-index: 0;
    background: radial-gradient(ellipse, rgba(255,255,255,0.13) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Hidden codeword inside the ice */
.ki-ice-codeword {
    position: absolute;
    inset: 0;
    z-index: 3; /* above cracks + grid */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 4px;
    color: rgba(175, 230, 255, 0.95);
    text-shadow: 0 0 10px rgba(77, 179, 255, 0.95);
    filter: blur(8px);
    transition: filter 0.8s ease, opacity 0.6s ease;
    user-select: none;
}
.ki-ice-codeword.revealed {
    filter: blur(0px);
    text-shadow: 0 0 22px rgba(77, 179, 255, 1), 0 0 44px rgba(77, 179, 255, 0.55);
}

/* Crack layers — each ki-crack-N is revealed at streak N */
.ki-cracks {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
}
.ki-crack-line {
    position: absolute;
    background: rgba(140, 210, 255, 0.75);
    border-radius: 2px;
    transform-origin: top left;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 6px rgba(77,179,255,0.65);
}
.ki-crack-line.visible {
    opacity: 1;
}

/* Repair grid overlay */
.ki-repair-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 18px;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(77,179,255,0.12) 19px, rgba(77,179,255,0.12) 20px),
        repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(77,179,255,0.12) 19px, rgba(77,179,255,0.12) 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ki-repair-grid.active {
    animation: kiRepairGridPulse 0.8s ease-out forwards;
}

/* --- Streak indicator --- */
.ki-streak-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #00ffaa99;
    margin-bottom: 10px;
}
.ki-streak-pips {
    display: flex;
    gap: 5px;
}
.ki-pip {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #00ffaa44;
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ki-pip.filled {
    background: #00ffaa;
    box-shadow: 0 0 6px #00ffaa;
}

/* --- Answer buttons --- */
.ki-answer-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2px;
}
.ki-answer-btn {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    padding: 16px 10px;
    font-size: 1.2rem;
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #00ffaa88;
    background: rgba(0,255,170,0.08);
    color: #00ffaa;
    box-shadow: 0 0 10px rgba(0,255,170,0.15);
    transition: all 0.2s ease;
    margin-top: 0;
}
.ki-answer-btn:hover {
    background: rgba(0,255,170,0.2);
    box-shadow: 0 0 20px rgba(0,255,170,0.4);
    transform: translateY(-2px);
}
.ki-answer-btn:active {
    transform: translateY(0);
}
.ki-answer-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.ki-answer-btn--false {
    border-color: #ff444488;
    color: #ff6666;
    background: rgba(255, 68, 68, 0.08);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.15);
}
.ki-answer-btn--false:hover {
    background: rgba(255, 68, 68, 0.22);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.45);
    color: #ff8888;
    border-color: #ff4444bb;
}

/* --- Feedback banner --- */
.ki-feedback {
    width: 100%;
    max-width: 580px;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    min-height: 56px;
}
.ki-feedback.show {
    opacity: 1;
    transform: translateY(0);
}
.ki-feedback.correct {
    background: rgba(0, 255, 170, 0.12);
    border: 1px solid #00ffaa55;
    color: #aaffcc;
}
.ki-feedback.correct .ki-feedback-icon {
    color: #00ffaa;
}
.ki-feedback.wrong {
    background: rgba(255, 68, 68, 0.10);
    border: 1px solid #ff444455;
    color: #ffbbbb;
}
.ki-feedback.wrong .ki-feedback-icon {
    color: #ff6666;
}
.ki-feedback-icon {
    font-size: 1.1rem;
    margin-right: 6px;
}

/* --- Codeword reveal (in-place, at bottom) --- */
.ki-reveal {
    width: 100%;
    max-width: 580px;
    text-align: center;
    padding: 10px 0 0;
    animation: kiFadeIn 0.6s ease forwards;
}
.ki-codeword-reveal {
    display: inline-block;
    background: rgba(0,255,170,0.1);
    border: 2px solid #00ffaa;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1.6rem;
    letter-spacing: 6px;
    color: #00ffaa;
    text-shadow: 0 0 16px #00ffaa, 0 0 32px #00ffaa88;
    box-shadow: 0 0 30px #00ffaa44;
    margin-bottom: 22px;
    animation: kiGlowPulse 1.8s ease infinite;
}
.ki-codeword-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #00ffaa66;
    display: block;
    margin-bottom: 6px;
}

/* Task 11: right-align next button */
#task11 #next11 {
    display: block;
    margin-left: auto;
}

/* =========================================================
   KNÄCK ISEN – Keyframe Animations
   ========================================================= */

@keyframes kiRepairGridPulse {
    0%   { opacity: 0.8; }
    60%  { opacity: 0.5; }
    100% { opacity: 0; }
}

@keyframes kiFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kiAgentPulse {
    0%, 100% { filter: drop-shadow(0 0 14px #00ffaa); }
    50%       { filter: drop-shadow(0 0 28px #00ffaa) drop-shadow(0 0 10px #fff); }
}

@keyframes kiGlowPulse {
    0%, 100% { box-shadow: 0 0 20px #00ffaa44; text-shadow: 0 0 16px #00ffaa, 0 0 32px #00ffaa88; }
    50%       { box-shadow: 0 0 40px #00ffaa99; text-shadow: 0 0 24px #00ffaa, 0 0 48px #00ffaacc; }
}

@keyframes kiShakeBlock {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-7px) rotate(-1.5deg); }
    30%  { transform: translateX(7px) rotate(1.5deg); }
    45%  { transform: translateX(-5px) rotate(-1deg); }
    60%  { transform: translateX(5px) rotate(1deg); }
    75%  { transform: translateX(-3px); }
    90%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@keyframes kiRepairGlow {
    0%   { box-shadow: 0 0 30px rgba(255,80,80,0.8), inset 0 0 20px rgba(255,60,60,0.3); border-color: #ff4444; }
    50%  { box-shadow: 0 0 50px rgba(255,80,80,0.6), inset 0 0 30px rgba(255,60,60,0.2); }
    100% { box-shadow: 0 0 30px rgba(0,255,170,0.35), inset 0 0 40px rgba(0,255,170,0.10); border-color: rgba(0,255,170,0.55); }
}

@keyframes kiCrackBurst {
    0%   { box-shadow: 0 0 30px rgba(0,255,170,0.35), 0 0 0px rgba(0,255,170,0); }
    30%  { box-shadow: 0 0 50px rgba(0,255,170,0.9), 0 0 80px rgba(0,255,170,0.4); }
    100% { box-shadow: 0 0 30px rgba(0,255,170,0.35), 0 0 60px rgba(0,200,120,0.15); }
}

@keyframes kiFinalBreak {
    0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
    20%  { transform: scale(1.06) rotate(-2deg); filter: brightness(2) saturate(2); }
    35%  { transform: scale(0.97) rotate(2deg); filter: brightness(3); }
    50%  { transform: scale(1.08) rotate(-1deg); filter: brightness(2.5) saturate(3); }
    65%  { transform: scale(0.95) rotate(1.5deg); filter: brightness(4); }
    80%  { transform: scale(1.04) rotate(-0.5deg); filter: brightness(2); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes kiSparkFly {
    0%   { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

@keyframes kiIceShardOut {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0.3); }
}

/* =========================================================
   Minns du? — Cybersecurity Memory Matching Game
   ========================================================= */

/* --- Task briefing: hidden until Skuggan leaves --- */
.md-briefing-pre {
    display: none !important;
}

.md-briefing-reveal {
    animation: mdBriefingIn 0.55s ease-out both;
}

@keyframes mdBriefingIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Skuggan — intro villain at top --- */
.md-skuggan {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 6px 0 10px;
    margin-bottom: 4px;
    animation: mdSkugganAppear 0.4s ease-out both;
}

@keyframes mdSkugganAppear {
    from { opacity: 0; transform: translateY(-18px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.md-skuggan-glow {
    position: absolute;
    top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff000022 0%, transparent 70%);
    animation: mdSkugganGlowPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mdSkugganGlowPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.5; }
    50%       { transform: scale(1.3); opacity: 1; }
}

.md-skuggan-emoji {
    font-size: 4.5rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    animation: mdSkugganWatch 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px #ff000088);
}

@keyframes mdSkugganWatch {
    0%   { transform: scale(1)    rotate(0deg); filter: drop-shadow(0 0 10px #ff000088); }
    25%  { transform: scale(1.04) rotate(-2deg); }
    50%  { transform: scale(1)    rotate(0deg); filter: drop-shadow(0 0 20px #ff0000cc); }
    75%  { transform: scale(1.04) rotate(2deg); }
    100% { transform: scale(1)    rotate(0deg); filter: drop-shadow(0 0 10px #ff000088); }
}

/* Occasional glitch flash */
.md-skuggan-emoji::after {
    content: '🦹';
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: mdSkugganGlitch 6s steps(1) infinite;
    filter: hue-rotate(180deg) saturate(2);
}

@keyframes mdSkugganGlitch {
    0%, 94%, 100% { opacity: 0; transform: translate(0, 0); }
    95%           { opacity: 0.8; transform: translate(-3px, 1px); }
    97%           { opacity: 0.6; transform: translate(3px, -2px); }
}

.md-skuggan-name {
    font-size: 0.62rem;
    letter-spacing: 5px;
    color: #ff000077;
    margin-top: 6px;
    text-shadow: 0 0 8px #ff000055;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* --- Skuggan chat bubble --- */
.md-skuggan-bubble {
    position: relative;
    background: #120808;
    border: 2px solid #cc2222;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 0.78rem;
    font-weight: bold;
    color: #ff9999;
    text-align: center;
    max-width: 280px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    line-height: 1.45;
    box-shadow: 0 0 24px #ff000033, inset 0 0 12px #ff000011;
    /* Animate in with 300ms delay so Skuggan appears first */
    opacity: 0;
    animation: mdBubbleIn 0.4s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Tail pointing down toward Skuggan emoji */
.md-skuggan-bubble::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top-color: #cc2222;
    border-bottom: none;
}

.md-skuggan-bubble::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #120808;
    border-bottom: none;
    z-index: 1;
}

.md-skuggan-bubble.hiding {
    animation: mdBubbleOut 0.35s ease-in forwards !important;
}

@keyframes mdBubbleIn {
    0%   { opacity: 0; transform: scale(0.4) translateY(10px); }
    65%  { transform: scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mdBubbleOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.55) translateY(8px); }
}

/* --- Skuggan exit (normal intro leave) --- */
.md-skuggan.leaving {
    animation: mdSkugganLeave 0.5s ease-in forwards !important;
    pointer-events: none;
}

@keyframes mdSkugganLeave {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-40px) scale(0.8); filter: blur(4px); }
}

/* --- Skuggan panic re-entry (win sequence) --- */
.md-skuggan--panic {
    /* Override the default mdSkugganAppear with a more dramatic bounce-in */
    animation: mdSkugganPanicIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

@keyframes mdSkugganPanicIn {
    from { opacity: 0; transform: translateY(-50px) scale(0.5) rotate(-6deg); }
    70%  { transform: translateY(6px) scale(1.08) rotate(2deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Orange panic bubble */
.md-skuggan-bubble--panic {
    background: #140d00;
    border-color: #ff8800 !important;
    color: #ffd080;
    box-shadow: 0 0 28px #ff880044, inset 0 0 12px #ff880011;
}

.md-skuggan-bubble--panic::after {
    border-top-color: #ff8800 !important;
}

.md-skuggan-bubble--panic::before {
    border-top-color: #140d00 !important;
}

/* Orange glow for panic Skuggan */
.md-skuggan-glow--panic {
    background: radial-gradient(circle, #ff880033 0%, transparent 70%);
    animation: mdSkugganPanicGlow 0.6s ease-in-out infinite alternate;
}

@keyframes mdSkugganPanicGlow {
    from { transform: scale(0.9); opacity: 0.6; }
    to   { transform: scale(1.5); opacity: 1; }
}

/* --- Skuggan glitch-out (win scene) --- */
.md-skuggan.glitching-out {
    animation: mdSkugganGlitchOut 0.85s steps(1) forwards !important;
    pointer-events: none;
}

@keyframes mdSkugganGlitchOut {
    0%   { opacity: 1;    transform: translate(0,   0)   scale(1);    filter: none; }
    10%  { opacity: 0.85; transform: translate(-9px, 0)  scale(1.06); filter: hue-rotate(80deg)  brightness(1.9); }
    20%  { opacity: 0.6;  transform: translate(11px,-3px) scale(0.93); filter: hue-rotate(-100deg); }
    30%  { opacity: 0.25; transform: translate(-13px,2px) scale(1.12); filter: invert(0.6) hue-rotate(160deg); }
    40%  { opacity: 0.8;  transform: translate(9px, 0)  scale(1);    filter: hue-rotate(200deg) brightness(2.2); }
    50%  { opacity: 0.12; transform: translate(-7px,-5px) scale(0.8);  filter: invert(1) brightness(3); }
    60%  { opacity: 0.65; transform: translate(12px, 4px) scale(0.6);  filter: hue-rotate(270deg) saturate(6); }
    70%  { opacity: 0.08; transform: translate(-5px, 0)  scale(0.4) skewX(12deg); filter: brightness(5); }
    80%  { opacity: 0.4;  transform: translate(7px,-8px) scale(0.25) skewX(-8deg); filter: invert(0.9) brightness(4); }
    90%  { opacity: 0.05; transform: translate(0, -15px) scale(0.1) skewX(20deg); filter: brightness(8); }
    100% { opacity: 0;    transform: translate(0, -25px) scale(0)   skewX(25deg); filter: brightness(12); }
}

/* --- Studievy (par grupperade innan spelet) --- */
.md-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: mdPreviewIn 0.5s ease both;
}

@keyframes mdPreviewIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.md-preview-intro {
    color: #c9ffef;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
}

.md-preview-pairs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Each pair: two cards with the arrow absolutely centred on top of both */
.md-preview-pair {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Arrow sits dead-centre, overlapping both cards */
.md-preview-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(8, 30, 60, 0.88);
    border: 2px solid #4499ff;
    border-radius: 50%;
    color: #4499ff;
    font-size: 1.25rem;
    line-height: 1;
    text-shadow: 0 0 10px #4499ffaa;
    box-shadow: 0 0 14px #4499ff55, 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Preview cards reuse .md-card markup — show the front without any flip */
.md-card--preview {
    cursor: default;
    pointer-events: none;
}

.md-card--preview:hover {
    transform: none;
}

/* The inner wrapper sits face-up: no 3D context needed */
.md-card-inner--faceup {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* The front face is not rotated in preview mode */
.md-card-inner--faceup .md-card-front {
    position: absolute;
    inset: 0;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Add the card-back crosshatch + double inner frame to the face-up preview card */
.md-card--preview .md-card-front,
.md-card--preview.md-card--threat .md-card-front,
.md-card--preview.md-card--protection .md-card-front {
    background-image:
        repeating-linear-gradient(45deg,  transparent 0px, transparent 5px, rgba(255,255,255,0.025) 5px, rgba(255,255,255,0.025) 6px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, rgba(255,255,255,0.025) 5px, rgba(255,255,255,0.025) 6px);
    border-width: 2px;
    overflow: hidden;
}

/* Inner double-border frame matching the card back */
.md-card--preview .md-card-front::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}
.md-card--preview.md-card--threat .md-card-front::before {
    border: 1px solid #ff444433;
}
.md-card--preview.md-card--protection .md-card-front::before {
    border: 1px solid #00ffaa33;
}

.md-card--preview .md-card-front::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
.md-card--preview.md-card--threat .md-card-front::after {
    border: 1px dashed #ff444418;
}
.md-card--preview.md-card--protection .md-card-front::after {
    border: 1px dashed #00ffaa14;
}

/* Corner hex marks: match the back-side colour tinted for each card type */
.md-card--preview.md-card--threat .md-cbk-corner {
    color: #ff6666cc;
    text-shadow: 0 0 5px #ff444477;
}
.md-card--preview.md-card--protection .md-cbk-corner {
    color: #00ffaacc;
    text-shadow: 0 0 5px #00ffaa77;
}

/* Make corner marks visible on the face (they normally live on the back) */
.md-card--preview .md-cbk-corner {
    z-index: 3;
}

/* Button inherits the global button + .next-btn styles; just align it */
.md-preview-start-btn {
    align-self: center;
    display: block;
    margin: 4px auto 0;
}

@media (max-width: 560px) {
    .md-preview-pairs {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-preview { animation: none; }
}

/* --- Game layout --- */
.md-game {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.md-header {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.md-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.md-progress-text {
    font-size: 0.82rem;
    color: #4499ffcc;
}

.md-system-text {
    font-size: 0.78rem;
    color: #4499ff77;
    text-align: right;
}

.md-progress-bar {
    height: 5px;
    background: #4499ff18;
    border-radius: 3px;
    overflow: hidden;
}

.md-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0055dd, #4499ff);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px #4499ff88;
}

.md-agent-msg {
    font-size: 0.88rem;
    min-height: 1.5em;
    text-align: center;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(0, 255, 170, 0.05);
    border: 1px solid #00ffaa22;
    color: #99ffdd;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.md-agent-msg.wrong {
    color: #ff7777;
    border-color: #ff444433;
    background: rgba(255, 68, 68, 0.08);
}

.md-agent-msg.right {
    color: #00ffaa;
    border-color: #00ffaa44;
    background: rgba(0, 255, 170, 0.09);
}

/* --- Card grid — 4 columns, 3 rows --- */
.md-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 2px 0;
}

@media (max-width: 500px) {
    .md-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* --- Individual card shell --- */
.md-card {
    perspective: 800px;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    min-height: 96px;
    transition: transform 0.15s ease;
    border-radius: 10px;
}

.md-card:hover:not(.matched):not(.flipped):not(.wrong) {
    transform: translateY(-3px) scale(1.04);
}

/* --- 3D flip inner container --- */
.md-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 10px;
}

.md-card.flipped .md-card-inner,
.md-card.matched .md-card-inner {
    transform: rotateY(180deg);
}

/* --- Back and front shared base --- */
.md-card-back,
.md-card-front {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    text-align: center;
}

/* --- Playing card back — tech edition --- */
.md-card-back {
    /* Classic playing-card diamond crosshatch */
    background-color: #030f06;
    background-image:
        repeating-linear-gradient(45deg,  transparent 0px, transparent 5px, #00ffaa10 5px, #00ffaa10 6px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #00ffaa10 5px, #00ffaa10 6px);
    border: 2px solid #00ffaa99;
    overflow: hidden;
}

/* Inner border frame — classic double-border playing card look */
.md-card-back::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid #00ffaa55;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

/* Second inner frame for depth */
.md-card-back::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px dashed #00ffaa22;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}

/* Corner hex marks */
.md-cbk-corner {
    position: absolute;
    z-index: 2;
    font-size: 0.62rem;
    color: #00ffaacc;
    line-height: 1;
    text-shadow: 0 0 5px #00ffaa77;
}

.md-cbk-tl { top: 6px;    left: 7px;  }
.md-cbk-tr { top: 6px;    right: 7px; }
.md-cbk-bl { bottom: 6px; left: 7px;  }
.md-cbk-br { bottom: 6px; right: 7px; }

/* --- Front face --- */
.md-card-front {
    transform: rotateY(180deg);
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
    user-select: text;
    -webkit-user-select: text;
}

.md-card-front-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.md-card-front-text {
    word-break: break-word;
    hyphens: auto;
}

/* Threat card */
.md-card--threat .md-card-front {
    background: linear-gradient(145deg, #1a0808 0%, #100818 100%);
    border: 1px solid #ff444455;
    color: #ffaaaa;
}

.md-card--threat .md-card-front-icon {
    filter: drop-shadow(0 0 6px #ff4444aa);
}

/* Protection card */
.md-card--protection .md-card-front {
    background: linear-gradient(145deg, #001a0e 0%, #081520 100%);
    border: 1px solid #00ffaa44;
    color: #aaffdd;
}

.md-card--protection .md-card-front-icon {
    filter: drop-shadow(0 0 6px #00ffaa99);
}

/* --- Matched state --- */
.md-card.matched .md-card-front {
    border-color: #00ffaaaa;
    box-shadow: 0 0 0 2px #00ffaa22, 0 0 18px #00ffaa44;
}

.md-card.matched .md-card-inner {
    animation: mdMatchPulse 0.55s ease-out;
}

/* --- Wrong match state --- */
.md-card.wrong {
    animation: mdWrongShake 0.38s ease-out;
}

.md-card.wrong .md-card-front {
    border-color: #ff444499 !important;
    box-shadow: 0 0 14px #ff444455;
}

/* --- Dealing animation — cards fly out from Skuggan at top --- */
.md-card.dealing {
    animation: mdDeal 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mdDeal {
    from {
        opacity: 0;
        transform: translateY(-220px) scale(0.08) rotate(var(--deal-rot, -15deg));
        filter: blur(3px);
    }
    55% {
        opacity: 0.9;
        filter: blur(0.5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

/* --- Dismiss animation — cards fly back up toward Skuggan on win --- */
.md-card.dismissing {
    animation: mdCardDismiss 0.28s ease-in both;
    pointer-events: none;
}

@keyframes mdCardDismiss {
    from {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(-200px) scale(0.05) rotate(var(--deal-rot, 12deg));
        filter: blur(3px);
    }
}

@keyframes mdMatchPulse {
    0%   { box-shadow: 0 0 0   transparent; }
    45%  { box-shadow: 0 0 28px #00ffaa88, 0 0 56px #00ffaa33; }
    100% { box-shadow: 0 0 10px #00ffaa33; }
}

@keyframes mdWrongShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-7px); }
    45%  { transform: translateX(7px); }
    65%  { transform: translateX(-4px); }
    82%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* --- Wider task container --- */
.md-task-wide {
    max-width: 900px;
}

/* --- Codeword footer (shown in-place after win, below the game grid) --- */
.md-codeword-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 20px 0 6px;
    border-top: 1px solid #00ffaa22;
    margin-top: 18px;
    animation: mdWinFadeIn 0.5s ease-out;
}

@keyframes mdWinFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.md-win-title {
    font-size: 1.05rem;
    letter-spacing: 4px;
    color: #00ffaa;
    text-shadow: 0 0 18px #00ffaa;
    animation: mdWinTitleIn 0.7s ease-out;
}

@keyframes mdWinTitleIn {
    from { opacity: 0; letter-spacing: 10px; }
    to   { opacity: 1; letter-spacing: 4px; }
}

.md-codeword-reveal {
    background: linear-gradient(135deg, #001a10 0%, #080020 100%);
    border: 2px solid #00ffaa;
    border-radius: 14px;
    padding: 20px 32px;
    box-shadow: 0 0 40px #00ffaa33, 0 0 80px #00ffaa11, inset 0 0 20px #00ffaa08;
    animation: mdRevealBox 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes mdRevealBox {
    from { opacity: 0; transform: scale(0.75); }
    to   { opacity: 1; transform: scale(1); }
}

.md-codeword-label {
    font-size: 0.72rem;
    letter-spacing: 3px;
    color: #00ffaa77;
    margin-bottom: 10px;
}

.md-codeword-text {
    font-size: 1.7rem;
    letter-spacing: 5px;
    color: #00ffaa;
    text-shadow: 0 0 20px #00ffaa, 0 0 40px #00ffaa55;
    font-family: 'Share Tech Mono', monospace;
    min-width: 8ch;
}

.md-win-text {
    color: #99ffdd;
    font-size: 0.88rem;
    max-width: 340px;
    line-height: 1.55;
}

/* Bonusuppdrag: tydligare att kodordet hör till bonus-kedjan (activeBonusTasks) */
.cs-codeword-footer--bonus {
    border-top-color: rgba(245, 184, 74, 0.4);
}

.cs-codeword-footer--bonus .md-win-title {
    color: #ffc966;
    text-shadow: 0 0 22px rgba(245, 184, 74, 0.55);
}

.cs-codeword-footer--bonus .md-codeword-reveal {
    border-color: rgba(245, 184, 74, 0.85);
    background: linear-gradient(135deg, #1a140c 0%, #120a18 100%);
    box-shadow:
        0 0 36px rgba(245, 184, 74, 0.22),
        0 0 72px rgba(255, 140, 60, 0.08),
        inset 0 0 22px rgba(245, 184, 74, 0.06);
}

.cs-codeword-footer--bonus .md-codeword-label {
    color: rgba(255, 210, 140, 0.82);
}

.cs-codeword-footer--bonus .md-codeword-text {
    color: #ffd18a;
    text-shadow: 0 0 18px rgba(245, 184, 74, 0.55), 0 0 36px rgba(255, 140, 60, 0.25);
}

/* ── Korrupt kodord (Skuggan har saboterat — visas för varianter som inte låst upp än) ── */

.cs-corrupted-footer {
    border-top-color: rgba(255, 68, 68, 0.3);
}

.cs-corrupted-title {
    color: #ff5555;
    text-shadow: 0 0 18px rgba(255, 68, 68, 0.65);
    animation: csCorruptTitleGlitch 2.5s steps(1) infinite;
}

.cs-corrupted-reveal {
    border-color: rgba(255, 68, 68, 0.7);
    background: linear-gradient(135deg, #1a0808 0%, #140010 100%);
    box-shadow:
        0 0 36px rgba(255, 68, 68, 0.2),
        0 0 72px rgba(255, 0, 60, 0.06),
        inset 0 0 22px rgba(255, 68, 68, 0.06);
}

.cs-corrupted-label {
    color: rgba(255, 130, 130, 0.8);
}

.cs-corrupted-hash {
    color: #ff5555;
    text-shadow: 0 0 18px rgba(255, 68, 68, 0.65), 0 0 36px rgba(255, 0, 60, 0.25);
    animation: csCorruptHashGlitch 0.15s steps(1) infinite;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}

/* Stop glitch after the JS settles (~3s) — toggled via class if needed */
.cs-corrupted-hash.settled {
    animation: none;
}

.cs-corrupted-text {
    color: #ff9999;
}

.cs-corrupted-progress {
    display: block;
    margin-top: 6px;
    color: #58a6ff;
    font-weight: 700;
    font-size: 0.92rem;
}

/* Glitch keyframes — slight position/color jitter */
@keyframes csCorruptTitleGlitch {
    0%, 92%, 100% { transform: none; text-shadow: 0 0 18px rgba(255, 68, 68, 0.65); }
    93% { transform: translateX(-2px) skewX(-1deg); text-shadow: -2px 0 #ff0044, 2px 0 #00ffaa; }
    95% { transform: translateX(2px) skewX(1deg);  text-shadow: 2px 0 #ff0044, -2px 0 #00ffaa; }
    96% { transform: none; text-shadow: 0 0 18px rgba(255, 68, 68, 0.65); }
}

@keyframes csCorruptHashGlitch {
    0%, 85% { opacity: 1; transform: none; }
    86% { opacity: 0.7; transform: translateX(-1px); color: #ff0044; }
    90% { opacity: 1; transform: translateX(1px); color: #ff8888; }
    94% { opacity: 0.85; transform: none; color: #ff5555; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-corrupted-title,
    .cs-corrupted-hash {
        animation: none;
    }
}

/* ── UV-skattjakt (task 6): terminal / UV-reveal chrome (logic & IDs unchanged) ── */
#task6 .uv-mission {
    position: relative;
    margin-top: 6px;
    padding: 10px 2px 6px;
    isolation: isolate;
}

#task6 .uv-mission__fx {
    position: absolute;
    inset: -10px -14px -6px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 16px;
    opacity: 0.92;
}

#task6 .uv-mission__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 255, 170, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.065) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 88% 72% at 50% 38%, black 18%, transparent 72%);
    animation: uv-grid-drift 22s linear infinite;
}

@keyframes uv-grid-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-22px, -22px); }
}

#task6 .uv-mission__sweep {
    position: absolute;
    inset: -40% -25%;
    background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(168, 85, 247, 0.06) 47%,
        rgba(0, 255, 170, 0.11) 50%,
        rgba(168, 85, 247, 0.06) 53%,
        transparent 62%
    );
    animation: uv-sweep 8.5s ease-in-out infinite;
}

@keyframes uv-sweep {
    0%, 100% { transform: translateX(-14%) skewX(-1.5deg); opacity: 0.45; }
    50% { transform: translateX(14%) skewX(1.5deg); opacity: 0.95; }
}

#task6 .uv-panel {
    position: relative;
    z-index: 1;
    padding: 22px 22px 20px;
    margin-bottom: 10px;
    border-radius: 12px;
    background:
        linear-gradient(168deg, rgba(14, 10, 26, 0.94) 0%, rgba(5, 14, 12, 0.9) 100%);
    border: 1px solid rgba(0, 255, 170, 0.26);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.1) inset,
        0 0 36px rgba(0, 255, 170, 0.06),
        0 12px 42px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

#task6 .uv-panel--a {
    border-color: rgba(168, 85, 247, 0.32);
    animation: uv-panel-border-pulse 5s ease-in-out infinite;
}

@keyframes uv-panel-border-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, 0.14) inset,
            0 0 44px rgba(168, 85, 247, 0.09),
            0 0 72px rgba(0, 255, 170, 0.04),
            0 12px 42px rgba(0, 0, 0, 0.38);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, 0.22) inset,
            0 0 56px rgba(168, 85, 247, 0.14),
            0 0 80px rgba(0, 255, 170, 0.07),
            0 12px 42px rgba(0, 0, 0, 0.38);
    }
}

#task6 .uv-panel--b {
    border-color: rgba(0, 255, 170, 0.32);
}

#task6 .uv-panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 72px;
    background: radial-gradient(circle at 100% 0%, rgba(0, 255, 170, 0.2) 0%, transparent 62%);
    pointer-events: none;
    opacity: 0.5;
}

#task6 .uv-panel__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 170, 0.45),
        rgba(200, 120, 255, 0.45),
        transparent
    );
    box-shadow: 0 0 14px rgba(0, 255, 170, 0.3);
    animation: uv-panel-scan 5.8s linear infinite;
    pointer-events: none;
    opacity: 0.72;
    z-index: 2;
}

#task6 .uv-panel__scan--slow {
    animation-duration: 9s;
    opacity: 0.48;
}

@keyframes uv-panel-scan {
    0% { top: 0; }
    100% { top: calc(100% - 2px); }
}

#task6 .uv-deco-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 255, 170, 0.14);
}

#task6 .uv-deco-label {
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 255, 170, 0.52);
    text-shadow: 0 0 14px rgba(0, 255, 170, 0.22);
    animation: uv-label-glint 5s steps(1, end) infinite;
}

@keyframes uv-label-glint {
    0%, 88%, 100% { opacity: 1; }
    90% { opacity: 0.62; }
}

#task6 .uv-deco-lamp {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 32% 32%, #f5e8ff 0%, #c084fc 38%, #6d28d9 72%, #1e0a2e 100%);
    box-shadow:
        0 0 16px rgba(192, 132, 252, 0.85),
        0 0 32px rgba(0, 255, 170, 0.35),
        inset 0 0 10px rgba(255, 255, 255, 0.35);
    animation: uv-lamp-glow 2.4s ease-in-out infinite;
}

@keyframes uv-lamp-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 16px rgba(192, 132, 252, 0.8),
            0 0 28px rgba(0, 255, 170, 0.3),
            inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 0 26px rgba(192, 132, 252, 1),
            0 0 48px rgba(0, 255, 170, 0.45),
            inset 0 0 12px rgba(255, 255, 255, 0.45);
    }
}

#task6 .uv-deco-pixel {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: #00ffaa;
    box-shadow:
        12px 0 0 #a855f7,
        0 12px 0 #a855f7,
        12px 12px 0 #00ffaa;
    opacity: 0.9;
    animation: uv-pixel-tick 3.2s ease-in-out infinite;
}

@keyframes uv-pixel-tick {
    0%, 100% { filter: brightness(1) saturate(1); }
    40% { filter: brightness(1.2) saturate(1.15); }
    60% { filter: brightness(0.95) saturate(0.95); }
}

#task6 .uv-panel h3 {
    margin: 0 0 16px;
    font-size: 1.06rem;
    letter-spacing: 0.035em;
    font-weight: inherit;
    color: #c6fff0;
    text-shadow: 0 0 18px rgba(0, 255, 170, 0.32);
}

#task6 .uv-phase-b-heading {
    position: relative;
    z-index: 1;
    margin: 6px 0 16px;
    padding: 14px 18px;
    border-radius: 11px;
    font-size: 1rem;
    letter-spacing: 0.03em;
    font-weight: inherit;
    background: rgba(6, 10, 14, 0.65);
    border: 1px dashed rgba(0, 255, 170, 0.22);
    opacity: 0.4;
    transition: opacity 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
    animation: uv-phase-b-dim 3.5s ease-in-out infinite;
}

@keyframes uv-phase-b-dim {
    0%, 100% { border-color: rgba(0, 255, 170, 0.18); }
    50% { border-color: rgba(168, 85, 247, 0.28); }
}

/* Del B dold tills A är klar; reveal när .uv-mission--b-unlocked sätts (checkUV_A) */
#task6 #uv-part-b {
    display: none;
}

#task6 .uv-mission--b-unlocked .uv-phase-b-heading {
    opacity: 1;
    border-style: solid;
    border-color: rgba(0, 255, 170, 0.32);
    text-shadow: 0 0 18px rgba(0, 255, 170, 0.32);
    animation: uv-b-heading-unlock 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes uv-b-heading-unlock {
    0% {
        opacity: 0.4;
        filter: blur(4px);
        transform: translateY(8px);
        box-shadow: 0 0 0 rgba(0, 255, 170, 0);
    }
    55% {
        filter: blur(0);
        text-shadow: 0 0 28px rgba(0, 255, 170, 0.5);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
        text-shadow: 0 0 18px rgba(0, 255, 170, 0.32);
    }
}

#task6 .uv-mission--b-unlocked #uv-part-b {
    display: block;
    animation: uv-b-panel-reveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes uv-b-panel-reveal {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

#task6 .uv-mission--b-unlocked .uv-mission__divider {
    animation: uv-divider-channel-open 0.85s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes uv-divider-channel-open {
    0% {
        filter: brightness(1);
        opacity: 0.65;
        transform: scaleX(0.92);
    }
    40% {
        filter: brightness(1.45);
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 24px rgba(168, 85, 247, 0.35);
    }
    100% {
        filter: brightness(1);
        opacity: 1;
        transform: scaleX(1);
        box-shadow: none;
    }
}

#task6 .uv-mission__divider {
    position: relative;
    z-index: 1;
    height: 1px;
    margin: 26px 0 20px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 170, 0.15),
        rgba(168, 85, 247, 0.45),
        rgba(0, 255, 170, 0.25),
        transparent
    );
}

#task6 .uv-mission__divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: linear-gradient(135deg, #00ffaa, #a855f7);
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(0, 255, 170, 0.55);
    animation: uv-divider-core 2.8s ease-in-out infinite;
}

@keyframes uv-divider-core {
    0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.85; }
    50% { transform: rotate(45deg) scale(1.15); opacity: 1; }
}

#task6 .uv-field-row {
    margin: 12px 0 14px;
}

#task6 .uv-field-row--after-viewport {
    margin-top: 18px;
}

#task6 .uv-field-row input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: #cfffef;
    background: rgba(4, 12, 10, 0.88);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.08) inset,
        0 0 20px rgba(0, 255, 170, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#task6 .uv-field-row input[type="text"]::placeholder {
    color: rgba(0, 255, 170, 0.35);
}

#task6 .uv-field-row input[type="text"]:focus {
    outline: none;
    border-color: rgba(0, 255, 170, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 255, 170, 0.2) inset,
        0 0 28px rgba(168, 85, 247, 0.2);
}

#task6 .uv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

#task6 .uv-actions button {
    margin: 0;
}

#task6 .uv-tip {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(168, 85, 247, 0.45);
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.08) 0%,
        rgba(0, 255, 170, 0.06) 100%
    );
    color: #b8ffe8;
    font-size: 0.9rem;
    line-height: 1.45;
    animation: uv-tip-pulse 4s ease-in-out infinite;
}

@keyframes uv-tip-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 255, 170, 0); }
    50% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.12); }
}

#task6 .uv-panel .feedback {
    margin-top: 16px;
    min-height: 1.2em;
}

#task6 .uv-zoom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px auto 10px;
    max-width: 600px;
}

#task6 .uv-zoom-toolbar__label {
    font-weight: bold;
    letter-spacing: 0.02em;
}

#task6 #zoom-container.uv-zoom-viewport {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #020204;
    border: 1px solid rgba(0, 255, 170, 0.4);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.2) inset,
        0 0 40px rgba(0, 255, 170, 0.12),
        0 0 80px rgba(168, 85, 247, 0.06);
    cursor: grab;
    animation: uv-viewport-hue 10s ease-in-out infinite;
}

@keyframes uv-viewport-hue {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, 0.2) inset,
            0 0 40px rgba(0, 255, 170, 0.1),
            0 0 72px rgba(168, 85, 247, 0.05);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, 0.28) inset,
            0 0 52px rgba(0, 255, 170, 0.16),
            0 0 90px rgba(168, 85, 247, 0.1);
    }
}

#task6 #zoom-image {
    z-index: 1;
}

#task6 #zoom-container.uv-zoom-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 255, 170, 0.025) 3px,
        rgba(0, 255, 170, 0.025) 6px
    );
    opacity: 0.85;
}

#task6 #zoom-container.uv-zoom-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(168, 85, 247, 0.04) 0%,
        transparent 22%,
        transparent 78%,
        rgba(0, 255, 170, 0.05) 100%
    );
    mix-blend-mode: screen;
    animation: uv-viewport-vignette 6s ease-in-out infinite alternate;
}

@keyframes uv-viewport-vignette {
    from { opacity: 0.55; }
    to { opacity: 0.9; }
}

/* --- Reduced-motion overrides --- */
@media (prefers-reduced-motion: reduce) {
    .md-card,
    .md-card-inner,
    .md-card.dealing,
    .md-card.dismissing,
    .md-card.wrong,
    .md-card.matched .md-card-inner,
    .md-skuggan,
    .md-skuggan.leaving,
    .md-skuggan--panic,
    .md-skuggan.glitching-out,
    .md-skuggan-emoji,
    .md-skuggan-emoji::after,
    .md-skuggan-glow,
    .md-skuggan-glow--panic,
    .md-skuggan-bubble,
    .md-skuggan-bubble.hiding,
    .md-briefing-reveal,
    .md-codeword-footer,
    .md-win-title,
    .md-codeword-reveal,
    .md-progress-fill {
        animation: none !important;
        transition: none !important;
    }
    /* Still show the bubble and briefing instantly for reduced-motion users */
    .md-skuggan-bubble { opacity: 1; }
    .md-briefing-reveal { opacity: 1; }
    .md-card.flipped .md-card-inner,
    .md-card.matched .md-card-inner {
        transform: rotateY(180deg);
    }

    #task6 .uv-mission__grid,
    #task6 .uv-mission__sweep,
    #task6 .uv-panel--a,
    #task6 .uv-panel__scan,
    #task6 .uv-panel__scan--slow,
    #task6 .uv-deco-label,
    #task6 .uv-deco-lamp,
    #task6 .uv-deco-pixel,
    #task6 .uv-phase-b-heading,
    #task6 .uv-mission__divider::before,
    #task6 .uv-tip,
    #task6 #zoom-container.uv-zoom-viewport,
    #task6 #zoom-container.uv-zoom-viewport::after {
        animation: none !important;
    }

    #task6 .uv-deco-lamp {
        transform: none;
    }

    #task6 .uv-mission--b-unlocked .uv-phase-b-heading,
    #task6 .uv-mission--b-unlocked #uv-part-b,
    #task6 .uv-mission--b-unlocked .uv-mission__divider {
        animation: none !important;
    }

    #task1 .crypto-mission__grid,
    #task1 .crypto-mission__sweep,
    #task1 .crypto-mission > .task-briefing,
    #task1 .crypto-briefing__bar,
    #task1 .crypto-mission > .task-briefing .task-briefing-tag,
    #task1 .crypto-mission__figure,
    #task1 .crypto-mission .task-step-num,
    #task1 .crypto-cipher-block.task-cipher-block,
    #task1 .crypto-cipher-block .task-cipher-tag,
    #task1 .crypto-cipher-block__scan,
    #task1 .crypto-cipher-block .task-cipher-text,
    #task1 .crypto-tip {
        animation: none !important;
    }

    #task1 .crypto-cipher-block .task-cipher-text {
        transform: none !important;
    }

    #task1 .crypto-mission .task-step-item {
        transition: border-color 0.2s ease !important;
    }

    #task1 .crypto-mission .task-step-item:hover {
        transform: none !important;
    }

    #task5 .morse-mission__grid,
    #task5 .morse-lane,
    #task5 .morse-lamp__bulb {
        animation: none !important;
    }

    #task5 .morse-tip-panel__chrome {
        animation: none !important;
    }

    #task5 .morse-tip-panel.morse-tip-panel--enter,
    #task5 .morse-tip-panel.morse-tip-panel--exit {
        animation: none !important;
    }

    #task5 .morse-lane.morse-lane--flash-ok,
    #task5 .morse-lane.morse-lane--flash-bad {
        animation: none !important;
        filter: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #task5 .morse-lane:hover {
        transform: none !important;
    }

    #task5 .morse-alphabet-cell:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESULT PAGE  (#result)
   ═══════════════════════════════════════════════════════════════════════════ */

#result {
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* ── Confetti layer ── */
.result-confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.result-confetti-layer span {
    position: absolute;
    top: -12px;
    border-radius: 2px;
    opacity: 0;
    animation: resultConfettiFall linear forwards;
}

@keyframes resultConfettiFall {
    0%   { transform: translateY(0)    rotate(0deg);   opacity: 1; }
    80%  { opacity: 0.9; }
    100% { transform: translateY(110vh) rotate(800deg); opacity: 0; }
}

/* ── Hero section ── */
.result-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.result-badge {
    font-size: 4.5rem;
    line-height: 1;
    display: block;
    margin-bottom: 12px;
    animation: resultBadgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes resultBadgePop {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.result-title {
    font-size: 2.4rem;
    color: #00ffaa;
    margin: 0 0 10px;
    animation: resultTitleIn 0.5s ease-out 0.4s both;
    text-shadow: 0 0 20px #00ffaa88;
}

@keyframes resultTitleIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-subtitle {
    font-size: 1.05rem;
    opacity: 0.75;
    margin: 0;
    animation: resultTitleIn 0.5s ease-out 0.55s both;
}

/* ── Kodord cue box ── */
.result-kodord-cue {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 255, 170, 0.07);
    border: 1px solid rgba(0, 255, 170, 0.35);
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0 0 20px;
    font-size: 1rem;
    color: #e0ffe8;
    animation: resultTitleIn 0.5s ease-out 0.7s both;
}

.result-cue-icon {
    font-size: 1.6rem;
    animation: resultCuePulse 1.8s ease-in-out 1.2s infinite;
}

@keyframes resultCuePulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0px #00ffaa); }
    50%       { transform: scale(1.18); filter: drop-shadow(0 0 8px #00ffaa); }
}

.result-urgent {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffd166;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px #ffaa0066;
    animation:
        resultTitleIn 0.5s ease-out 0.85s both,
        resultUrgentPulse 1.4s ease-in-out 1.5s infinite;
}

@keyframes resultUrgentPulse {
    0%, 100% { transform: scale(1);    text-shadow: 0 0 10px #ffaa0066; }
    50%       { transform: scale(1.04); text-shadow: 0 0 18px #ffaa00cc; }
}

.result-bonus-btn {
    position: relative;
    z-index: 1;
    margin-top: 24px !important;
}

/* ── Mina Kodord attention bounce (triggered by JS) ── */
@keyframes cwNotesAttention {
    0%         { transform: scale(1)    translateY(0);
                 box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.35) inset; }
    12%        { transform: scale(1.07) translateY(-10px);
                 box-shadow: 0 24px 55px rgba(0,0,0,0.6), 0 0 0 3px #00ffaa, 0 0 28px #00ffaa88; }
    24%        { transform: scale(1.04) translateY(-4px); }
    36%        { transform: scale(1.06) translateY(-8px);
                 box-shadow: 0 24px 55px rgba(0,0,0,0.6), 0 0 0 3px #00ffaa, 0 0 28px #00ffaa88; }
    50%        { transform: scale(1.02) translateY(-2px); }
    65%        { transform: scale(1.05) translateY(-6px);
                 box-shadow: 0 22px 50px rgba(0,0,0,0.58), 0 0 0 2px #00ffaa99, 0 0 18px #00ffaa55; }
    100%       { transform: scale(1)    translateY(0);
                 box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.35) inset; }
}

#codeword-notes.cw-notes-attention {
    animation: cwNotesAttention 1.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
    border-color: rgba(0, 255, 170, 0.5) !important;
    z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
    .result-badge  { animation: none; }
    .result-title  { animation: none; }
    .result-subtitle, .result-kodord-cue { animation: none; }
    .result-cue-icon    { animation: none; }
    .result-urgent      { animation: none; }
    .result-confetti-layer span { animation: none; }
    #codeword-notes.cw-notes-attention { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KRYPTOKAOS  (task 14)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Learning box ── */
.kk-learning-box {
    background: rgba(0, 255, 170, 0.04);
    border: 1px solid rgba(0, 255, 170, 0.28);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 22px;
    font-size: 0.88em;
    color: rgba(0, 255, 170, 0.78);
}

.kk-learning-box p {
    margin: 0;
}

.kk-learning-tag {
    display: block;
    font-size: 0.76em;
    letter-spacing: 0.09em;
    opacity: 0.55;
    margin-bottom: 6px;
}

/* ── Panels (encrypted string + output) ── */
.kk-panel {
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(0, 255, 170, 0.22);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.kk-label {
    font-size: 0.72em;
    letter-spacing: 0.11em;
    opacity: 0.5;
    margin-bottom: 10px;
}

/* ── Encrypted string ── */
.kk-encrypted {
    font-size: clamp(1.4rem, 5vw, 2.1rem);
    letter-spacing: 0.08em;
    line-height: 1.7;
    min-height: 3em;
    word-break: break-all;
    color: #ff6699;
    text-shadow: 0 0 8px rgba(255, 80, 130, 0.55);
    user-select: none;
    -webkit-user-select: none;
    animation: kkGlitch 5s ease-in-out infinite;
}

.kk-char {
    display: inline-block;
    transition: color 0.12s;
}

.kk-char-extract {
    animation: kkCharExtract 0.48s ease-in forwards;
    color: #00ffaa !important;
    text-shadow: 0 0 14px #00ffaa !important;
}

.kk-empty {
    font-size: 0.7em;
    color: rgba(0, 255, 170, 0.28);
    letter-spacing: 0.05em;
}

/* ── Instruction text ── */
.kk-instruction {
    font-size: 0.88em;
    opacity: 0.65;
    margin: 0 0 10px;
    text-align: left;
}

/* ── Category buttons (full width) ── */
.kk-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

/* ── Panels row: two message boxes + signal bar ── */
.kk-panels-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.kk-panels-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kk-panels-col .kk-panel {
    margin-bottom: 0;
}

.kk-panels-col .kk-panel + .kk-panel {
    margin-top: 20px;
}

/* ── Signal / Hash-integrity meter ── */
.kk-signal-panel {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.kk-signal-label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: #4ade80;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.kk-signal-track {
    position: relative;
    width: 72px;
    flex: 1;
    min-height: 80px;
    background: #071510;
    border: 1px solid #265c36;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 6px #4ade8033 inset;
}

/* Main fill — grows from bottom */
.kk-signal-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, #16a34a, #4ade80, #22d3ee);
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px #4ade8099;
}

/* Noise shimmer overlay */
.kk-signal-noise {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 5px,
        rgba(0,0,0,0.25) 5px,
        rgba(0,0,0,0.25) 6px
    );
    pointer-events: none;
    animation: kkSignalFlicker 1.8s steps(1) infinite;
}

@keyframes kkSignalFlicker {
    0%, 100% { opacity: 0.6; }
    33%       { opacity: 0.3; }
    66%       { opacity: 0.8; }
}

.kk-signal-pct {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.04em;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* 100 % = rätt ordning: tydlig signal om att man kan gå vidare. */
.kk-signal-pct--complete {
    color: #00ffaa;
    text-shadow: 0 0 12px #00ffaa, 0 0 4px #00ffaa;
}

/* Liten förklaring under mätaren så att procenten inte blir förvirrande. */
.kk-signal-hint {
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: #4ade80;
    opacity: 0.7;
    text-align: center;
    line-height: 1.3;
    max-width: 100px;
}

@media (prefers-reduced-motion: reduce) {
    .kk-signal-noise     { animation: none; }
    .kk-signal-fill      { transition: none; }
}

/* All buttons same width — 3 per row, then 2 */
.kk-buttons .kk-btn {
    flex: 0 0 calc(33.333% - 7px);
    min-height: 44px;
    font-size: 0.88rem;
}

/* shared layout — colors come from per-button --kk-c below */
.kk-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    padding: 14px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    min-height: var(--touch-min, 44px);
    letter-spacing: 0.03em;
    text-align: center;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}

/* Active / toggled-on state */
/* ── Per-button accent colors ── */
#kk-btn-stora {
    --kk-c: #fb923c;   /* orange */
}
#kk-btn-emojis {
    --kk-c: #facc15;   /* yellow */
}
#kk-btn-sma {
    --kk-c: #f472b6;   /* pink */
}
#kk-btn-symboler {
    --kk-c: #a78bfa;   /* violet */
}
#kk-btn-siffror {
    --kk-c: #38bdf8;   /* sky blue */
}

.kk-btn {
    --kk-c: #00ffaa;   /* fallback (overridden per button above) */
    border-color: color-mix(in srgb, var(--kk-c) 70%, transparent);
    color: var(--kk-c);
    background: color-mix(in srgb, var(--kk-c) 8%, transparent);
}

.kk-btn:hover {
    background: color-mix(in srgb, var(--kk-c) 18%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--kk-c) 35%, transparent);
}

.kk-btn.kk-btn-active {
    background: color-mix(in srgb, var(--kk-c) 28%, transparent);
    border-color: var(--kk-c);
    box-shadow: 0 0 16px color-mix(in srgb, var(--kk-c) 50%, transparent),
                0 0 4px  color-mix(in srgb, var(--kk-c) 20%, transparent) inset;
    color: #fff;
}

.kk-btn.kk-btn-active:hover {
    background: color-mix(in srgb, var(--kk-c) 22%, transparent);
}

.kk-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Progress indicator ── */
.kk-progress {
    text-align: center;
    font-size: 0.84em;
    opacity: 0.6;
    margin: 0 0 18px;
}

/* ── Output slots ── */
.kk-output {
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    letter-spacing: 0.1em;
    min-height: 2em;
    word-break: break-all;
    white-space: pre-wrap;
}

/* Small drag-hint tooltip that appears once two or more groups are placed */
.kk-drag-hint {
    margin-top: 8px;
    display: inline-block;
    padding: 5px 11px;
    background: rgba(0, 255, 170, 0.08);
    border: 1px solid rgba(0, 255, 170, 0.35);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: rgba(0, 255, 170, 0.75);
    letter-spacing: 0.04em;
    animation: kkDragHintIn 0.35s ease both;
    pointer-events: none;
}

@keyframes kkDragHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kk-drag-hint { animation: none; }
}

/* Each extracted group spans left-to-right in press order */
.kk-slot--active {
    display: inline;
    color: #00ffaa;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
}

/* When reordering is available the output becomes a flex row — no visual change */
.kk-output--reorderable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Draggable: no border, no background, no padding — just the raw text + grab cursor */
.kk-slot--draggable {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    white-space: pre;
}

/* Subtle scale while dragging — only visual cue */
.kk-slot-dragging {
    cursor: grabbing;
    transform: scale(1.12);
    opacity: 0.75;
}

.kk-output-reordering {
    cursor: grabbing;
}

.kk-output-pulse {
    animation: kkOutputPulse 0.6s ease-out;
}

/* Output panel glows green on mission complete */
.kk-output-panel--success {
    border-color: rgba(0, 255, 170, 0.7);
    box-shadow: 0 0 24px rgba(0, 255, 170, 0.25), 0 0 8px rgba(0, 255, 170, 0.1) inset;
    animation: kkSuccessPanelGlow 2s ease-in-out;
}

/* ── Success banner ── */
.kk-success-banner {
    text-align: center;
    padding: 14px 0 6px;
    margin-bottom: 12px;
}

.kk-success-title {
    font-size: 1.15em;
    color: #00ffaa;
    letter-spacing: 0.14em;
    text-shadow: 0 0 14px #00ffaa;
    animation: kkSuccessTitlePulse 1.8s ease-in-out infinite alternate;
}

/* ── Keyframe animations ── */

@keyframes kkGlitch {
    0%, 88%, 100% {
        text-shadow: 0 0 8px rgba(255, 80, 130, 0.55);
        transform: translateX(0);
    }
    89% {
        text-shadow: -2px 0 rgba(0, 255, 170, 0.55), 2px 0 rgba(255, 0, 100, 0.55);
        transform: translateX(1px);
    }
    90% {
        text-shadow: 2px 0 rgba(0, 255, 170, 0.55), -2px 0 rgba(255, 0, 100, 0.55);
        transform: translateX(-1px);
    }
    91% {
        text-shadow: 0 0 8px rgba(255, 80, 130, 0.55);
        transform: translateX(0);
    }
}

/* Intro scramble — characters still cycling */
.kk-char-scrambling {
    color: rgba(255, 80, 130, 0.45);
    animation: kkScrambleFlicker 0.15s ease-in-out infinite alternate;
}

/* Intro scramble — character just locked in */
.kk-char-locked {
    animation: kkCharLockIn 0.35s ease-out forwards;
}

@keyframes kkScrambleFlicker {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

@keyframes kkCharLockIn {
    0%   { color: #00ffaa; text-shadow: 0 0 18px #00ffaa; transform: scale(1.35); }
    60%  { color: #ffdd44; text-shadow: 0 0 10px #ffdd44; transform: scale(1.1); }
    100% { color: #ff6699; text-shadow: 0 0 8px rgba(255, 80, 130, 0.55); transform: scale(1); }
}

@keyframes kkCharExtract {
    0%   { transform: scale(1);    opacity: 1; }
    35%  { transform: scale(1.45); opacity: 0.9; }
    100% { transform: scale(0);    opacity: 0; }
}

/* Slot exits the output area when toggled off */
.kk-slot-exit {
    display: inline-block;
    animation: kkSlotExit 0.34s ease-in forwards;
}

@keyframes kkSlotExit {
    0%   { transform: scale(1);    opacity: 1;   color: inherit; }
    30%  { transform: scale(1.15); opacity: 0.8; color: #ff6699; text-shadow: 0 0 10px #ff6699; }
    100% { transform: scale(0);    opacity: 0;   color: #ff6699; }
}

/* Chars bounce back into the encrypted string */
.kk-char-return {
    animation: kkCharReturn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes kkCharReturn {
    0%   { transform: scale(0);    opacity: 0;   color: #ff6699; text-shadow: 0 0 12px #ff6699; }
    55%  { transform: scale(1.3);  opacity: 1;   color: #ffaa44; text-shadow: 0 0 8px #ffaa44; }
    100% { transform: scale(1);    opacity: 1;   color: #ff6699; text-shadow: 0 0 8px rgba(255, 80, 130, 0.55); }
}

@keyframes kkOutputPulse {
    0%   { filter: brightness(1); }
    45%  { filter: brightness(1.6) drop-shadow(0 0 8px #00ffaa); }
    100% { filter: brightness(1); }
}

@keyframes kkSuccessPanelGlow {
    0%   { box-shadow: 0 0 12px rgba(0, 255, 170, 0.2); }
    50%  { box-shadow: 0 0 36px rgba(0, 255, 170, 0.5); }
    100% { box-shadow: 0 0 24px rgba(0, 255, 170, 0.25); }
}

@keyframes kkSuccessTitlePulse {
    from { text-shadow: 0 0 8px #00ffaa; }
    to   { text-shadow: 0 0 26px #00ffaa, 0 0 50px rgba(0, 255, 170, 0.3); }
}

/* Reduced-motion: disable all Kryptokaos animations */
@media (prefers-reduced-motion: reduce) {
    .kk-encrypted,
    .kk-char-scrambling,
    .kk-char-locked,
    .kk-char-extract,
    .kk-char-return,
    .kk-slot-exit,
    .kk-output-pulse,
    .kk-output-panel--success,
    .kk-success-title {
        animation: none !important;
        transition: none !important;
    }
}