/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #000;
    color: #fff;
}

/* ── Educational banner ─────────────────────────────────────── */
#edu-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    height: 26px;
    background: linear-gradient(90deg, #155724 0%, #1b6e30 50%, #155724 100%);
    color: #b7dfc0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #23903d;
    user-select: none;
}

/* ── Phase management ───────────────────────────────────────── */
.phase {
    position: fixed;
    top: 26px; left: 0; right: 0; bottom: 0;
    display: none;           /* JS overrides to flex */
    flex-direction: column;
}

/* ============================================================
   PHASE 1 — DESKTOP
   ============================================================ */

#phase-desktop {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(30,100,200,.35) 0%, transparent 60%),
        linear-gradient(160deg, #0d2540 0%, #1565c0 55%, #0a1e38 100%);
}

/* Desktop icon area */
.desktop-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 18px;
    overflow: hidden;
}

.d-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 78px;
    padding: 8px 4px 6px;
    border-radius: 6px;
    cursor: default;
    position: relative;
    user-select: none;
    transition: background 0.15s;
}

/* Email icon is the only one that reacts */
#icon-email {
    cursor: pointer;
}

#icon-email:hover  { background: rgba(255,255,255,.20); }
#icon-email:active { background: rgba(255,255,255,.32); }

.d-icon-img {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
}

.d-icon-label {
    font-size: 11px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    line-height: 1.3;
}

/* Notification badge on email icon */
.d-badge {
    position: absolute;
    top: 5px; right: 5px;
    background: #e53935;
    color: #fff;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    animation: badgePulse 1.1s ease-in-out infinite;
    border: 1.5px solid rgba(255,255,255,.25);
}

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

/* Taskbar */
.taskbar {
    flex-shrink: 0;
    height: 44px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.tb-start {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}
.tb-start:hover { background: rgba(255,255,255,.14); }

.tb-spacer { flex: 1; }

.tb-tray {
    display: flex; align-items: center; gap: 14px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    padding-right: 6px;
}

#clock { min-width: 42px; text-align: right; }

/* ── Email notification popup ──────────────────────────────── */
#email-notif {
    position: absolute;
    bottom: 56px; right: 16px;
    background: rgba(18,18,18,.97);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 3px solid #1976d2;
    border-radius: 6px;
    padding: 11px 15px;
    display: flex; align-items: center; gap: 11px;
    max-width: 290px;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(0,0,0,.7);
    animation: slideInRight 0.38s cubic-bezier(.2,.8,.4,1);
    z-index: 200;
}
#email-notif.hidden { display: none; }

@keyframes slideInRight {
    from { transform: translateX(115%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.notif-icon { font-size: 28px; flex-shrink: 0; }

.notif-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
}

/* ── Email window ───────────────────────────────────────────── */
#email-win {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; max-width: 96vw;
    height: 460px;
    background: #1c1c1c;
    border-radius: 8px;
    box-shadow: 0 28px 90px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
    display: flex; flex-direction: column;
    z-index: 300;
    animation: winOpen 0.22s ease;
}
#email-win.hidden { display: none; }

@keyframes winOpen {
    from { transform: translate(-50%, -47%) scale(0.95); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

.win-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px;
    background: #2a2a2a;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #363636;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    flex-shrink: 0;
    user-select: none;
}

.win-btns { display: flex; gap: 3px; }

.wb {
    width: 28px; height: 26px;
    border: none; border-radius: 4px;
    background: transparent;
    color: rgba(255,255,255,.55);
    cursor: pointer; font-size: 12px;
    transition: background 0.15s, color 0.15s;
}
.wb:hover      { background: rgba(255,255,255,.1); color: #fff; }
.wb.wb-x:hover { background: #c42b1c; color: #fff; }

.win-body {
    display: flex; flex: 1; overflow: hidden;
    border-radius: 0 0 8px 8px;
}

/* Mail list sidebar */
.mail-list {
    width: 175px; flex-shrink: 0;
    background: #161616;
    border-right: 1px solid #272727;
    overflow-y: auto;
}

.mail-item {
    padding: 10px 11px;
    border-bottom: 1px solid #1f1f1f;
    cursor: pointer;
}
.mail-item.selected { background: rgba(21,101,192,.3); }

.mi-from {
    font-size: 11px; font-weight: 700; color: #fff;
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-prev {
    font-size: 10.5px; color: rgba(255,255,255,.38);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mail content area */
.mail-content { flex: 1; padding: 14px; overflow-y: auto; }

.mail-meta {
    background: #141414;
    border-radius: 4px; padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 12px; color: rgba(255,255,255,.65);
    line-height: 1.85;
    border: 1px solid #232323;
}
.meta-lbl { color: rgba(255,255,255,.35); margin-right: 4px; }

.mail-body {
    font-size: 13px; color: rgba(255,255,255,.88);
    line-height: 1.65;
}
.mail-body p { margin-bottom: 9px; }

.attachment-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px; padding: 9px 13px;
    margin-top: 14px;
}
.att-icon { font-size: 20px; flex-shrink: 0; }
.att-name { flex: 1; font-size: 12.5px; font-weight: 700; color: #64b5f6; }
.att-size { font-size: 11px; color: rgba(255,255,255,.3); }

.att-btn {
    background: #1565c0; color: #fff;
    border: none; border-radius: 4px;
    padding: 6px 14px; font-size: 12.5px;
    font-weight: 700; cursor: pointer;
    transition: background 0.18s, transform 0.1s;
    white-space: nowrap;
}
.att-btn:hover  { background: #0d47a1; }
.att-btn:active { transform: scale(0.97); }


/* ============================================================
   PHASE 2 — SPREADING
   ============================================================ */

#phase-spreading {
    background: #000;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

#terminal-wrap {
    width: 840px; max-width: 96vw;
    height: 340px;
    background: #000;
    border: 1px solid #1c1c1c;
    border-radius: 5px;
    padding: 14px 18px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12.5px;
    color: #00e676;
    overflow-y: auto;
    box-shadow:
        0 0 0 1px #111,
        0 0 40px rgba(0,230,118,.08),
        inset 0 0 30px rgba(0,0,0,.4);
}

#terminal-output { white-space: pre; }

.t-line { display: block; line-height: 1.55; }
.t-red    { color: #ff5252; }
.t-yellow { color: #ffd740; }
.t-white  { color: #fff; }
.t-dim    { color: #3a3a3a; }
.t-green  { color: #00e676; }

#term-cursor {
    display: inline-block;
    color: #00e676;
    animation: blink .65s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Shared progress bar section ───────────────────────────── */
.bar-section {
    width: 840px; max-width: 96vw;
    display: flex; flex-direction: column; gap: 5px;
}
.bar-section.wide { width: 900px; max-width: 96vw; }

.bar-label {
    font-family: 'Courier New', monospace;
    font-size: 13px; color: #ff5252;
    animation: pulse .9s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

.progress-bg {
    width: 100%; height: 6px;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #1f1f1f;
}
.progress-bg.thick { height: 10px; }

.progress-fill {
    height: 100%; width: 0;
    border-radius: 3px;
    transition: width 0.12s linear;
}

.fill-orange {
    background: linear-gradient(90deg, #ff6d00, #ff8a00);
    box-shadow: 0 0 8px rgba(255,138,0,.55);
}
.fill-red {
    background: linear-gradient(90deg, #ff1744, #d50000);
    box-shadow: 0 0 12px rgba(255,23,68,.65);
}

.bar-pct {
    font-family: 'Courier New', monospace;
    font-size: 11.5px; color: #ff8a00;
    text-align: right;
}
.red-pct {
    color: #ff1744;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin-top: 3px;
}


/* ============================================================
   PHASE 3 — ENCRYPTING
   ============================================================ */

#phase-encrypting {
    background: #040404;
    align-items: center;
    justify-content: flex-start;
    padding: 22px 20px 16px;
    gap: 16px;
    overflow-y: auto;
}

#enc-title {
    font-size: 20px; font-weight: 700;
    color: #ff1744;
    text-shadow: 0 0 18px rgba(255,23,68,.65);
    animation: pulse .75s ease-in-out infinite;
    flex-shrink: 0;
    text-align: center;
}

#files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 10px;
    width: 900px; max-width: 96vw;
}

/* File card */
.file-card {
    background: #0f0f0f;
    border: 1px solid #1e1e1e;
    border-radius: 7px;
    padding: 11px 9px;
    text-align: center;
    transition: border-color .25s, background .25s;
}

.file-card.fc-encrypting {
    border-color: #ff8a00;
    background: #130c00;
    animation: fshake .22s ease-in-out infinite;
}

.file-card.fc-encrypted {
    border-color: #ff1744;
    background: #0d0000;
    animation: none;
}

@keyframes fshake {
    0%, 100% { transform: translateX(0); }
    33%       { transform: translateX(-2px) rotate(-.3deg); }
    66%       { transform: translateX(2px)  rotate(.3deg); }
}

.fc-icon {
    font-size: 28px; display: block;
    margin-bottom: 6px; line-height: 1;
}

.fc-name {
    font-size: 9.5px;
    color: rgba(255,255,255,.6);
    word-break: break-all;
    line-height: 1.3;
    margin-bottom: 6px;
}
.file-card.fc-encrypted .fc-name {
    color: #ff5252; font-size: 9px;
}

.fc-bar-bg {
    height: 3px; background: #1a1a1a;
    border-radius: 2px; overflow: hidden;
}
.fc-bar {
    height: 100%; width: 0;
    background: #ff8a00;
    transition: width .04s linear;
    border-radius: 2px;
}
.file-card.fc-encrypted .fc-bar { background: #ff1744; width: 100%; }


/* ============================================================
   PHASE 4 — RANSOM NOTE
   ============================================================ */

#phase-ransom {
    background: #000;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 24px 16px 48px;
}

#ransom-box {
    width: 820px; max-width: 96vw;
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    animation: ransomIn .5s ease;
}

@keyframes ransomIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Skull */
#skull {
    font-size: 96px; line-height: 1;
    margin-bottom: 12px;
    animation: skullPulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(255,0,0,.85));
}

@keyframes skullPulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 20px rgba(255,0,0,.75)); }
    50%       { transform: scale(1.07); filter: drop-shadow(0 0 45px rgba(255,0,0,1)); }
}

/* Title */
#r-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 28px; font-weight: 900;
    color: #ff0000;
    text-shadow: 0 0 22px rgba(255,0,0,.95);
    letter-spacing: 2px; text-align: center;
    margin-bottom: 5px;
    animation: flicker 5s infinite;
}

@keyframes flicker {
    0%,93%,100% { opacity: 1; }
    94%          { opacity: .6; }
    95%          { opacity: 1; }
    97%          { opacity: .3; }
    98%          { opacity: 1; }
}

#r-sub {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11.5px; color: rgba(255,255,255,.25);
    letter-spacing: 4px; text-align: center;
    margin-bottom: 30px;
}

/* Content grid — 2 cols, timer spans both */
#r-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%; margin-bottom: 14px;
}

.r-card {
    background: rgba(255,0,0,.06);
    border: 1px solid rgba(255,0,0,.22);
    border-radius: 7px; padding: 16px 18px;
    color: rgba(255,255,255,.82);
    font-size: 13px; line-height: 1.75;
}

.r-card strong { color: #ff5252; }

.r-card h3 {
    color: #ffd740;
    font-size: 13px; margin-bottom: 10px;
}

.r-card ol { padding-left: 16px; }
.r-card li { margin-bottom: 5px; }

/* Timer card */
#r-timer {
    grid-column: 1 / -1;
    background: rgba(255,0,0,.1);
    border: 2px solid #ff0000;
    text-align: center;
    padding: 20px 24px;
}

#timer-label {
    color: rgba(255,255,255,.6);
    font-size: 12px; letter-spacing: 1px;
    margin-bottom: 10px;
}

#countdown {
    font-family: 'Courier New', Courier, monospace;
    font-size: 60px; font-weight: 900;
    color: #ff0000;
    text-shadow: 0 0 32px rgba(255,0,0,.9);
    letter-spacing: 4px;
    line-height: 1;
}

.colon {
    animation: colonBlink 1s step-start infinite;
    display: inline-block;
    padding: 0 3px;
}
@keyframes colonBlink { 50% { opacity: 0; } }

#timer-warn {
    color: #ffd740; font-size: 12px;
    margin-top: 9px;
    animation: pulse 1.6s ease-in-out infinite;
}

/* Wallet */
#r-wallet {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px; padding: 15px;
    text-align: center; margin-bottom: 14px;
}
#wallet-lbl {
    color: rgba(255,255,255,.35);
    font-size: 10px; letter-spacing: 3px;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}
#wallet-addr {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; color: #64b5f6;
    letter-spacing: 1.5px; word-break: break-all;
}
#wallet-fake {
    color: #66bb6a; font-size: 11px;
    margin-top: 6px; opacity: .85;
}

/* Warning bar */
#r-warning {
    width: 100%;
    background: rgba(255,145,0,.09);
    border: 1px solid rgba(255,145,0,.28);
    color: #ffa000;
    border-radius: 6px; padding: 10px 18px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11.5px; letter-spacing: 1px;
    text-align: center; margin-bottom: 20px;
}

/* Educational takeaway at bottom of ransom screen */
#edu-panel {
    width: 100%;
    background: rgba(21,87,36,.18);
    border: 1px solid rgba(76,175,80,.35);
    border-radius: 7px; padding: 18px 20px;
    color: rgba(255,255,255,.78);
    font-size: 13px; line-height: 1.75;
}
#edu-panel h4 {
    color: #81c784; margin-bottom: 10px;
    font-size: 13.5px; letter-spacing: .3px;
}
#edu-panel ul { padding-left: 18px; }
#edu-panel li { margin-bottom: 5px; }
#edu-panel strong { color: #a5d6a7; }


/* ============================================================
   GLOBAL OVERLAYS
   ============================================================ */

/* Glitch overlay — RGB-shift flash */
#glitch-overlay {
    position: fixed; inset: 0; z-index: 9990;
    pointer-events: none;
    animation: glitch .55s forwards;
}

@keyframes glitch {
    0%   { background: rgba(255,0,0,.4);  clip-path: inset(0 0 0 0);    transform: skewX(0deg); }
    12%  { background: rgba(0,255,0,.2);  clip-path: inset(0 0 65% 0);  transform: skewX(3deg)  translateX(7px); }
    24%  { background: rgba(0,0,255,.2);  clip-path: inset(65% 0 0 0);  transform: skewX(-3deg) translateX(-7px); }
    40%  { background: rgba(255,0,0,.15); clip-path: inset(30% 0 35% 0); transform: skewX(1.5deg); }
    70%  { background: rgba(255,0,0,.08); transform: skewX(0deg); }
    100% { background: transparent;       transform: skewX(0deg); }
}

#glitch-overlay.hidden { display: none; }

/* CRT scanlines */
#scanlines {
    position: fixed; inset: 0; z-index: 9989;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 2px,
        rgba(0,0,0,.045) 2px, rgba(0,0,0,.045) 4px
    );
}
#scanlines.hidden { display: none; }

/* Screen-shake keyframes (applied via JS to body) */
@keyframes screenShake {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    10%     { transform: translate(-5px, 3px)  rotate(-.4deg); }
    20%     { transform: translate(5px, -4px)  rotate(.4deg); }
    30%     { transform: translate(-4px, 4px)  rotate(-.3deg); }
    40%     { transform: translate(4px, -3px)  rotate(.3deg); }
    55%     { transform: translate(-2px, 2px); }
    70%     { transform: translate(2px, -2px); }
    85%     { transform: translate(-1px, 1px); }
}


/* ============================================================
   TEACHER PANEL
   ============================================================ */

#teacher-panel {
    position: fixed;
    top: 26px; right: 0;
    z-index: 9998;
    display: flex;
    gap: 0;
    align-items: center;
}

/* Shared base style for both teacher buttons */
#fullscreen-btn,
#reset-btn {
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.4);
    border: none;
    border-left: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-radius: 0 0 0 5px;   /* only bottom-left corner rounded */
    padding: 5px 13px;
    height: 26px;               /* matches edu-banner height exactly */
    font-size: 11px; cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1;
    display: flex; align-items: center; gap: 5px;
}

/* Fullscreen btn sits to the left of reset — no left border between them */
#fullscreen-btn {
    border-radius: 0 0 0 5px;
    border-right: 1px solid rgba(255,255,255,.07);
}

#reset-btn {
    border-radius: 0;           /* flush against fullscreen btn and right edge */
}

#fullscreen-btn:hover {
    background: rgba(100,60,200,.55);
    color: #fff;
}

#reset-btn:hover {
    background: rgba(25,118,210,.5);
    color: #fff;
}

/* When fullscreen is active: slightly highlight the exit button */
#fullscreen-btn.is-fullscreen {
    color: rgba(200,170,255,.7);
}

/* ── Fullscreen adjustments ─────────────────────────────────── */

/* Hide edu-banner in fullscreen so every pixel belongs to the sim */
:fullscreen #edu-banner,
:-webkit-full-screen #edu-banner {
    display: none;
}

/* Panel sits at very top when banner is gone */
:fullscreen #teacher-panel,
:-webkit-full-screen #teacher-panel {
    top: 0;
}

/* Phases start from top (no banner offset) when fullscreen */
:fullscreen .phase,
:-webkit-full-screen .phase {
    top: 0;
}


/* ============================================================
   UTILITIES
   ============================================================ */

.hidden { display: none !important; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #252525; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #353535; }