@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

    :root {
      --bg: #050505;
      --term-green: #00ff88;
      --term-dim: rgba(0, 255, 136, 0.5);
      --term-alert: #ff3b2f;
      --term-remote: #ffaa00; /* Orange for remote sessions */
      --term-edit: #00d4ff; /* Blue for edit mode / Sys messages */
      --term-chat: #00e5ff; /* Cyan for Chat Channels */
	  --ok-badge: #00ff88; /* The highlight thing */
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--term-green);
      font-family: 'Share Tech Mono', monospace;
      font-size: 16px;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }

    /* Scanline */
    body::before {
      content: " "; display: block; position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                  linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
      z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;
    }

    /* Output */
    #output {
      flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
      margin-bottom: 10px; text-shadow: 0 0 5px var(--term-dim);
    }

    /* Target Display */
    #target-display {
        color: var(--term-edit);
        margin-bottom: 5px;
        text-shadow: 0 0 5px var(--term-edit);
        font-weight: bold;
        display: none; 
        padding-left: 2px;
    }

    /* Clickable Elements */
    .click-copy {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-color: rgba(255, 255, 255, 0.3);
        transition: all 0.2s;
    }
    .click-copy:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        text-decoration-style: solid;
    }
    .click-copy:active {
        background: var(--term-green);
        color: #000;
    }

    /* Input */
    #input-line { display: flex; align-items: center; text-shadow: 0 0 5px var(--term-dim); }
    .prompt { margin-right: 10px; color: var(--term-dim); }
    .prompt.remote { color: var(--term-remote); }
    .prompt.chat { color: var(--term-chat); }
    
    #cmd-input {
      background: transparent; border: none; color: inherit;
      font-family: inherit; font-size: inherit; flex: 1;
      outline: none; caret-color: currentColor;
    }
    #cmd-input:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Editor/Viewer Overlays */
    .overlay {
        display: none;
        flex-direction: column;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0; left: 0;
        background: rgba(5, 5, 5, 0.98);
        z-index: 20;
        padding: 20px;
    }
    
    .overlay-header {
        background: var(--term-edit);
        color: #000;
        padding: 5px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        box-shadow: 0 0 10px var(--term-edit);
    }

    #editor-area {
        background: rgba(0,0,0,0.5);
        color: var(--term-edit);
        border: 1px solid var(--term-edit);
        flex: 1;
        font-family: inherit;
        font-size: inherit;
        padding: 10px;
        resize: none;
        outline: none;
    }

    #image-content {
        max-width: 95%;
        max-height: 80%;
        border: 2px solid var(--term-green);
        box-shadow: 0 0 20px var(--term-dim);
        align-self: center;
        margin-top: 20px;
    }

    /* CHAT OVERLAY STYLES */
    .chat-header { background: var(--term-chat) !important; box-shadow: 0 0 10px var(--term-chat) !important; }
    #chat-history {
        flex: 1; overflow-y: auto; padding: 10px; 
        border: 1px solid rgba(0, 229, 255, 0.3); margin-bottom: 10px;
        background: rgba(0, 20, 30, 0.5);
    }
    #chat-input-wrapper { display: flex; gap: 10px; align-items: center; }
    #chat-input-field {
        flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--term-chat);
        color: var(--term-chat); font-family: inherit; padding: 5px; outline: none;
    }
    
    /* CHAT MESSAGE GRID LAYOUT */
    .chat-msg { 
        display: grid; 
        grid-template-columns: 100px 140px 1fr; 
        gap: 8px;
        margin-bottom: 2px; 
        border-bottom: 1px solid rgba(0, 229, 255, 0.1); 
        padding: 4px 0; 
        align-items: baseline;
    }
    .chat-ts { 
        font-size: 0.8em; 
        color: rgba(255,255,255,0.5); 
        font-family: monospace;
        white-space: nowrap;
    }
    .chat-sender { 
        font-weight: bold; 
        color: var(--term-chat); 
        text-align: right; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-content {
        word-wrap: break-word;
        white-space: pre-wrap; 
    }

    /* --- MINIGAME OVERLAY --- */
    #minigame-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.98); z-index: 50;
        display: none; flex-direction: column; align-items: center; justify-content: center;
        font-family: 'Share Tech Mono', monospace;
    }
    .mg-header { color: var(--term-edit); font-size: 1.5em; margin-bottom: 20px; text-align: center; text-shadow: 0 0 10px var(--term-edit); }
    
	/* --- MEMORY MANIPULATION GAME --- */
    .mg-grid.memory-mode {
        display: grid;
        gap: 10px;
        padding: 20px;
        /* Default width, JS will override based on columns */
        max-width: 90vw; 
    }

    .mem-cell {
        background: rgba(0, 20, 0, 0.5);
        border: 1px solid var(--term-dim);
        color: var(--term-green);
        padding: 10px 5px;
        text-align: center;
        font-family: 'Share Tech Mono', monospace;
        cursor: pointer;
        user-select: none;
        transition: all 0.1s;
        text-shadow: 0 0 2px var(--term-dim);
    }

    /* Cursor Hover Effect */
    .mem-cell.active {
        background: var(--term-green);
        color: #000;
        box-shadow: 0 0 15px var(--term-green);
        font-weight: bold;
    }

    /* Selected (First click of a pair) */
    .mem-cell.selected {
        background: var(--term-remote); /* Orange */
        color: #000;
        border-color: var(--term-remote);
        box-shadow: 0 0 10px var(--term-remote);
    }

    /* Matched / Completed */
    .mem-cell.matched {
        opacity: 0.2;
        border-color: #333;
        color: #555;
        box-shadow: none;
        background: #000;
    }

    /* The Final Two (Success State) */
    .mem-cell.key-fragment {
        background: #fff !important;
        color: #000 !important;
        border-color: #fff !important;
        box-shadow: 0 0 20px #fff !important;
        animation: pulse-white 0.5s infinite alternate;
    }

    /* CORRUPTION EFFECT */
    .mem-cell.corrupted {
        background: var(--term-alert) !important;
        color: #fff !important;
        text-decoration: line-through;
        transform: skewX(-10deg);
        animation: glitch 0.1s infinite;
    }
	
	/* Fix for Memory Minigame Cursor Visibility */
	.mem-cell.matched.active {
    opacity: 1 !important; 
    background: var(--term-dim); /* Use a dimmer green to indicate it's already used */
    color: #000;
    box-shadow: 0 0 10px var(--term-dim);
}
	/* --- MINIGAME RESULTS --- */
    #mg-result-bar {
        margin-top: 20px;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        letter-spacing: 2px;
        opacity: 0; /* Hidden by default */
        transition: opacity 0.2s;
        height: 50px; /* Pre-allocate space */
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .mg-lbl { color: #fff; text-shadow: 0 0 5px #fff; }

    /* RED STATE */
    .status-denied {
        color: var(--term-alert);
        text-shadow: 0 0 15px var(--term-alert);
    }

    /* GREEN STATE */
    .status-accepted {
        color: var(--term-green);
        text-shadow: 0 0 15px var(--term-green);
    }

    /* THE FLYING GHOST FRAGMENT */
    .ghost-fragment {
        position: fixed;
        background: #fff;
        color: #000;
        padding: 10px 5px;
        font-family: 'Share Tech Mono', monospace;
        font-weight: bold;
        z-index: 100;
        pointer-events: none;
        box-shadow: 0 0 20px #fff;
        transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); /* Snappy fly animation */
    }
	
    @keyframes pulse-white {
        from { box-shadow: 0 0 10px #fff; }
        to { box-shadow: 0 0 25px #fff; }
    }
	
    /* New Alert Bar Styles */
    .mg-timer-wrapper { width: 300px; margin-bottom: 20px; }
    .mg-timer-label { color: var(--term-alert); font-size: 0.8em; margin-bottom: 5px; display: flex; justify-content: space-between; }
    .mg-timer-bar { width: 100%; height: 12px; border: 1px solid var(--term-alert); background: rgba(50, 0, 0, 0.3); }
    .mg-timer-fill { 
        height: 100%; 
        background: var(--term-alert); 
        width: 0%; 
        transition: width 0.1s linear; /* Smooth linear fill */
        box-shadow: 0 0 10px var(--term-alert); 
    }
    
    .mg-grid { display: grid; gap: 8px; padding: 20px; border: 2px solid var(--term-dim); background: rgba(0,255,136,0.05); }
    .mg-cell { 
        width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; 
        font-size: 1.1em; color: var(--term-dim); cursor: pointer; border: 1px solid transparent;
    }
    .mg-cell.active { background: var(--term-green); color: #000; font-weight: bold; box-shadow: 0 0 15px var(--term-green); }
    .mg-target-info { margin-bottom: 10px; font-size: 1.2em; color: #fff; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 600px; }
    .mg-target-badge { padding: 2px 8px; border: 1px solid var(--term-green); border-radius: 4px; color: var(--term-green); }
    .mg-target-badge.found { background: var(--term-dim); color: #000; text-decoration: line-through; opacity: 0.6; }

    /* --- ALERT & GLITCH STYLES --- */
    .sys-msg { border-left: 3px solid; padding-left: 10px; margin: 10px 0; }
    .success-highlight { color: #ccffcc; text-shadow: 0 0 10px #00ff88; font-weight: bold; }
    
    .glitch-text { animation: glitch 0.1s infinite; }
    @keyframes glitch {
        0% { transform: translate(0) }
        25% { transform: translate(-2px, 1px) }
        50% { transform: translate(1px, -1px) }
        75% { transform: translate(-1px, 2px) }
        100% { transform: translate(0) }
    }
    .corrupted { color: var(--term-alert); opacity: 0.8; font-family: 'Courier New', monospace; }

    /* Hard Message Center Box */
    #hard-msg-box {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: var(--term-alert); color: #000; padding: 40px;
        font-weight: bold; font-size: 2em; text-align: center;
        box-shadow: 0 0 50px rgba(0,0,0,0.8); z-index: 100;
        display: none; border: 4px solid #fff;
        max-width: 80%;
        white-space: pre-wrap;
    }

	/* --- SASM THEME OVERRIDES --- */
	body.theme-sasm {
    --bg: #000009;
	--term-green: #60AAFF; 
    --term-dim: #348DF9; 
    --term-alert: #ef4444; 
    --term-remote: #c084fc; 
    --term-edit: #2dd4bf; 
    --term-chat: #e2e8f0; 
	--success-highlight: #e2e8f0;
	--ok-badge: #DDDDDF;
	}

/* body.theme-sasm::before {
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 5, 10, 0.4) 50%), 
                linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)); */


/* --- ZENITH THEME (MONOCHROME) --- */
	body.theme-zenith {
    --bg: #000000;
    --term-green: #ffffff; 
    --term-dim: #DDDDDD; 
    --term-alert: #A72F2F; 
    --term-remote: #ef4444; 
    --term-edit: #0ea5e9; 
    --term-chat: #ffffff; 
    --ok-badge: #0ea5e9;
}
	body.theme-zenith .error,
	body.theme-zenith .status-denied,
	body.theme-zenith .corrupted {
		text-shadow: none !important;
		filter: none !important;
	body.theme-zenith .error {
		font-weight: bold;

/* Zenith Scanline: Very faint Sky Blue tint to unify the theme */
	body.theme-zenith::before {
		background: linear-gradient(rgba(10, 20, 30, 0.4); 
}

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #000; }
    ::-webkit-scrollbar-thumb { background: var(--term-dim); border-radius: 4px; }

    .error { color: var(--term-alert); }
    .dim { opacity: 0.7; }
    .sys { color: var(--term-edit); }
    .remote-out { color: var(--term-remote); }
    .ok-badge { color: var(--term-green); font-weight: bold; }