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

body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
    font-family: 'Quicksand', 'Trebuchet MS', sans-serif;
    color: #ffd27a;
    user-select: none;
}

/* The operator console keeps its clipboard-and-teletype look. */
#admin-screen { font-family: 'Share Tech Mono', monospace; }

/* Global UI text scaling — bumps every text-bearing UI region by ~10%
   without touching the 3D scene. Each puzzle is drawn inside its own
   .puzzle-panel inside #puzzle-overlay; the lobby + login + HUD use
   their own root ids. The Three.js canvas lives in #game-container
   and is intentionally excluded so the perspective isn't squashed. */
#login-screen,
#lobby-screen,
#hud,
#puzzle-overlay {
    zoom: 1.10;
}

/* ────────────────────────────────────────────────────────────────────
   GLOBAL "PUZZLE SOLVED" FEEDBACK
   Every puzzle root has class .puzzle-panel. When the puzzle's JS
   adds the .solved class to the same element, we paint a uniform
   green halo + flip any red error indicators inside it to green.
   This standardises success feedback across all 12 puzzles.
   ──────────────────────────────────────────────────────────────────── */
.puzzle-panel.solved {
    border-color: #00ff88 !important;
    box-shadow:
        0 0 60px rgba(0, 255, 136, 0.45),
        0 0 120px rgba(0, 255, 136, 0.22),
        inset 0 0 40px rgba(0, 255, 136, 0.12) !important;
    animation: puzzle-solved-pulse 2.4s ease-in-out infinite;
}
@keyframes puzzle-solved-pulse {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(0, 255, 136, 0.45),
            0 0 120px rgba(0, 255, 136, 0.22),
            inset 0 0 40px rgba(0, 255, 136, 0.12);
    }
    50% {
        box-shadow:
            0 0 90px rgba(0, 255, 136, 0.65),
            0 0 160px rgba(0, 255, 136, 0.35),
            inset 0 0 60px rgba(0, 255, 136, 0.2);
    }
}
/* Force any error/err-coloured status indicators to green when solved.
   Uses [class*=] so it catches .error, .nav-error-label, .ws-error-bar,
   .lb-status-err, .sg-status-err, .cp-readout-err, .freq-error-label
   etc. without needing to enumerate every prefix. */
.puzzle-panel.solved [class*="error"],
.puzzle-panel.solved [class*="-err"],
.puzzle-panel.solved [class*="_err"],
.puzzle-panel.solved .error {
    color: #00ff88 !important;
    text-shadow: 0 0 8px #00ff88 !important;
    border-color: #00ff88 !important;
    background-color: rgba(0, 255, 136, 0.1) !important;
    animation: none !important;
}
.puzzle-panel.solved [class*="error-bar"],
.puzzle-panel.solved [class*="err-bar"] {
    background: #00ff88 !important;
    box-shadow: 0 0 8px #00ff88 !important;
}

#game-container {
    width: 100vw;
    height: 100vh;
    display: block;
}

#hud {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Let clicks pass through to 3D */
    z-index: 10;
}

/* Crystal-collection HUD counter (only on screen during phase 3 in outdoors) */
#crystal-counter {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: rgba(4, 14, 28, 0.85);
    border: 1px solid #4dafff;
    border-radius: 4px;
    color: #cfe6ff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 4px;
    text-shadow: 0 0 8px rgba(120, 200, 255, 0.6);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.25), inset 0 0 14px rgba(255, 210, 122, 0.08);
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
#crystal-counter.hidden { display: none; }
#crystal-counter .cc-icon {
    color: #c46dff;
    text-shadow: 0 0 8px #c46dff;
    font-size: 16px;
}
#crystal-counter.cc-complete {
    border-color: #00ff88;
    color: #b6ffd8;
    text-shadow: 0 0 8px #00ff88;
    box-shadow: 0 0 22px rgba(0, 255, 136, 0.4);
}

#status-msg {
    font-size: 24px;
    align-self: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}

.hidden {
    display: none !important;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #111;
}

.auth-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    padding: 40px 56px;
    width: min(520px, 90vw);
    text-align: center;
}

.auth-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 28px 0;
    color: #111;
}

.auth-subtitle {
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 12px 0;
    color: #111;
}

.auth-body {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 24px 0;
    color: #111;
    text-align: left;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font-size: 18px;
    border: 2px solid #a9b3ff;
    border-radius: 10px;
    outline: none;
    color: #111;
    background: #fff;
    font-family: inherit;
}

.auth-input::placeholder {
    color: #b29d7f;
}

.auth-input:focus {
    border-color: #c9a35c;
}

.auth-btn {
    margin-top: 22px;
    background: #ffffff;
    color: #3a2715;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-family: inherit;
}

.auth-btn:hover:not(:disabled) {
    background: #f2f4ff;
}

.auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.player-list {
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
}

.player-list .player-entry {
    display: inline-flex;
    align-items: baseline;
}

.player-list .player-entry + .player-entry::before {
    content: ",\00a0";
    color: #111;
    font-weight: 400;
}

.player-list .player-you {
    color: #b29d7f;
    font-weight: 400;
    margin-left: 6px;
}

.remote-cursor .cursor-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#puzzle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(32, 20, 10, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

#puzzle-content {
    position: relative;
    width: 100%; /* It seems to stretch the whole overlay in the image, or hide its own borders */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #ff0000;
    color: white;
    border: none;
    font-size: 16px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: darkred;
}

.puzzle-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Inheritance from hologram-panel in puzzles.css */
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    position: relative;
    overflow: hidden;
}

/* SENSOR ARRAY STYLES */
.sensor-board {
    background: transparent;
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid #333;
    text-align: center;
}

.puzzle-panel h2 {
    color: #ffd27a;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-size: 20px;
}

.status-lights {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.light.round {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #333;
    border: 2px solid #000;
}

.light.red { background-color: #b30000; }
.light.red.on {
    background-color: #ff2e2e;
    box-shadow: 0 0 28px #ff2e2e, inset 0 0 14px #ff6666;
    border-color: #ff8a8a;
    animation: sensor-light-pulse 1.6s infinite;
}
.light.orange { background-color: #b36b00; }
.light.orange.on {
    background-color: #ffaa00;
    box-shadow: 0 0 28px #ffaa00, inset 0 0 14px #ffd066;
    border-color: #ffd066;
    animation: sensor-light-pulse 1.6s infinite;
}
.light.blue { background-color: #004488; }
.light.blue.on {
    background-color: #0099ff;
    box-shadow: 0 0 28px #ffb347, inset 0 0 14px #ffdf9e;
    border-color: #ffdf9e;
    animation: sensor-light-pulse 1.6s infinite;
}
.light.yellow { background-color: #806b00; }
.light.yellow.on {
    background-color: #ffe833;
    box-shadow: 0 0 28px #ffe833, inset 0 0 14px #fff599;
    border-color: #fff599;
    animation: sensor-light-pulse 1.6s infinite;
}
@keyframes sensor-light-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.35); }
}

/* HINT button + modal for sensor puzzles */
.sensor-hint-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2px solid var(--hologram-cyan, #ffd27a);
    background: radial-gradient(circle at 30% 30%, rgba(255,210,122,0.18), rgba(4,14,28,0.9));
    color: var(--hologram-cyan, #ffd27a);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 0 10px var(--hologram-cyan, #ffd27a);
    box-shadow: 0 0 18px rgba(255,210,122,0.3), inset 0 0 12px rgba(255,210,122,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.sensor-hint-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 26px rgba(255,210,122,0.55), inset 0 0 16px rgba(255,210,122,0.25);
}

.sensor-hint-modal {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(26,16,8,0.93);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.sensor-hint-modal.visible { display: flex; }
.sensor-hint-box {
    background: linear-gradient(180deg, #07111f, #040b18);
    border: 1px solid var(--hologram-cyan, #ffd27a);
    border-radius: 6px;
    padding: 24px 28px;
    max-width: 480px;
    color: #cde7ff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    line-height: 1.75;
    box-shadow: 0 0 40px rgba(255,210,122,0.35), inset 0 0 30px rgba(255,210,122,0.05);
    position: relative;
}
.sensor-hint-box::before, .sensor-hint-box::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid var(--hologram-cyan, #ffd27a);
}
.sensor-hint-box::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.sensor-hint-box::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.sensor-hint-box h3 {
    color: var(--hologram-cyan, #ffd27a);
    margin: 0 0 14px;
    letter-spacing: 4px;
    font-size: 14px;
    text-shadow: 0 0 12px var(--hologram-cyan, #ffd27a);
}
.sensor-hint-box p { margin: 6px 0; }
.sensor-hint-box strong { color: var(--hologram-cyan, #ffd27a); }
.sensor-hint-close {
    margin-top: 14px;
    padding: 8px 18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    background: rgba(255,210,122,0.08);
    color: var(--hologram-cyan, #ffd27a);
    border: 1px solid var(--hologram-cyan, #ffd27a);
    cursor: pointer;
    transition: background 0.15s;
}
.sensor-hint-close:hover { background: rgba(255,210,122,0.2); }

/* Protocol label — shows the sensor's color code in text + accent */
.sensor-protocol-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 18px;
    padding: 6px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}
.sensor-protocol-label::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.sensor-protocol-label.protocol-blue   { color: #ffdf9e; text-shadow: 0 0 8px #ffb347; }
.sensor-protocol-label.protocol-red    { color: #ff8a8a; text-shadow: 0 0 8px #ff2e2e; }
.sensor-protocol-label.protocol-yellow { color: #fff599; text-shadow: 0 0 8px #ffe833; }
.sensor-protocol-label.protocol-orange { color: #ffd066; text-shadow: 0 0 8px #ffaa00; }
.sensor-protocol-label.protocol-mixed {
    color: #cce6ff;
    background: linear-gradient(90deg, rgba(0,170,255,0.18), rgba(255,232,51,0.18));
    border-image: linear-gradient(90deg, #ffdf9e, #fff599) 1;
    text-shadow: 0 0 8px #ffdf9e;
}
.sensor-protocol-label.protocol-mixed::before {
    background: linear-gradient(90deg, #ffb347 50%, #ffe833 50%);
    box-shadow: 0 0 8px #ffdf9e, 0 0 8px #fff599;
}

.switches-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.switch {
    width: 14px;
    height: 35px;
    background-color: #666;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.sensor-submit-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
    background-color: #222;
    color: #ccc;
    cursor: pointer;
    border: 1px solid #444;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.sensor-submit-btn:hover {
    background-color: #333;
    color: #fff;
}

.sensor-feedback {
    min-height: 20px;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 1px;
}

/* GENERIC PUZZLE STYLES */
.generic-puzzle-placeholder {
    position: relative;
    text-align: center;
    border: 1px solid rgba(255, 210, 122, 0.1);
    padding: 60px;
    border-radius: 4px;
    overflow: hidden;
}

.generic-bg-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    filter: hue-rotate(180deg) brightness(1.5); /* Match holographic cyan look */
}

.generic-bg-hint img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sensor-puzzle-container {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.sensor-hint {
    width: 300px;
    height: 220px;
    border: 1px solid rgba(255, 210, 122, 0.2);
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

.sensor-hint::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 210, 122, 0.05) 3px,
        rgba(255, 210, 122, 0.05) 3px
    );
    pointer-events: none;
}

.sensor-hint img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.8) contrast(1.2);
}

.progress-bar {
    width: 60%;
    height: 100%;
    background: #ffd27a;
    animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* MEDICAL STATION UI */
#puzzle-medical-station {
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    background: radial-gradient(circle at 50% 50%, #0a0a20 0%, #050510 100%);
    border: 1px solid rgba(255, 210, 122, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(255, 210, 122, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    font-family: 'Share Tech Mono', monospace;
    overflow: hidden;
    position: relative;
    color: #ffd27a;
}

/* SCANLINES EFFECT */
.scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    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));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 1000;
}

.medical-console {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduced gap for compact layout */
}

.medical-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 210, 122, 0.2);
    padding-bottom: 10px; /* Reduced from 20px */
}

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

.hint-btn {
    padding: 8px 20px;
    border: 1px solid #ffd27a;
    cursor: pointer;
    background: rgba(255, 210, 122, 0.1);
    transition: 0.3s;
}

.hint-btn:hover { background: #ffd27a; color: #000; }

.error-display {
    color: #ff4d4d;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #ff4d4d;
    animation: flash 1s infinite alternate;
}

@keyframes flash {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.header-title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
}

.medical-panels-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; /* Reduced gap */
    min-height: 0; /* Allow shrinking if needed */
}

.medical-patient-panel {
    background: rgba(255, 210, 122, 0.05);
    border: 1px solid rgba(255, 210, 122, 0.2);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    transition: 0.3s;
}

.medical-patient-panel:hover {
    background: rgba(255, 210, 122, 0.1);
    border-color: rgba(255, 210, 122, 0.5);
}

.panel-header {
    font-size: 10px;
    text-align: center;
    opacity: 0.7;
    border-bottom: 1px solid rgba(255, 210, 122, 0.2);
    padding-bottom: 5px;
}

.procedure-icons {
    display: flex;
    justify-content: center;
    gap: 5px;
    height: 30px;
}

.procedure-icons .tool-icon {
    width: 32px;
    height: 32px;
    opacity: 1;
    filter: drop-shadow(0 0 10px #ffd27a) brightness(1.8);
    margin: 0 5px;
}

.tool-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8; 
    filter: drop-shadow(0 0 2px rgba(255, 210, 122, 0.4));
}

/* Tool SVGs */
.tool-icon.syringe { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19,3L15.3,6.7L16,7.4L18.4,5L19.4,6L17,8.4L17.7,9.1L21.4,5.4L19,3M14.6,7.4L12.3,9.7L9.4,6.8L11.7,4.5L10.3,3.1L3.8,9.5L5.2,11L7.3,8.9L12,13.6L9.9,15.7L11.3,17.1L17.7,10.7L16.3,9.3L14.6,7.4M8.7,12.2L6.6,10.1L9,7.7L11.1,9.8L8.7,12.2Z"/></svg>'); }
.tool-icon.scalpel { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21,3L3,21L4.4,22.4L22.4,4.4L21,3Z M19.6,4.4L4.4,19.6L5.8,21L21,5.8L19.6,4.4Z"/></svg>'); }
.tool-icon.bone { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17,10.5V7A3,3 0 0,0 14,4A3,3 0 0,0 11,7V10.5A4,4 0 0,0 15,14.5A4,4 0 0,0 19,10.5M15,12.5A2,2 0 0,1 13,10.5V7A1,1 0 0,1 14,6A1,1 0 0,1 15,7V10.5A2,2 0 0,1 15,12.5M10.5,19H7A3,3 0 0,1 4,16A3,3 0 0,1 7,13H10.5A4,4 0 0,1 14.5,17A4,4 0 0,1 10.5,19M8.5,15A2,2 0 0,0 10.5,17H7A1,1 0 0,0 6,17A1,1 0 0,0 7,18H10.5A2,2 0 0,0 10.5,15Z"/></svg>'); }
.tool-icon.stitches { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4.5,3.75L3.75,4.5L6,6.75L4.5,8.25L5.25,9L6.75,7.5L9,9.75L9.75,9L7.5,6.75L9,5.25L8.25,4.5L6.75,6L4.5,3.75Z M14.5,13.75L13.75,14.5L16,16.75L14.5,18.25L15.25,19L16.75,17.5L19,19.75L19.75,19L17.5,16.75L19,15.25L18.25,14.5L16.75,16L14.5,13.75Z"/></svg>'); }
.tool-icon.heart { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3,11H5L7,15L11,5L13,11H15V13H12L10,7L6,17L4,11H3V11Z"/></svg>'); }

.medical-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px; /* Increased padding */
    aspect-ratio: 1/1;
    border: 1px solid rgba(255, 210, 122, 0.3);
    flex: 1; /* Make grid grow */
}

.medical-cell {
    border: 1px solid rgba(255, 210, 122, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.medical-cell:hover {
    background: rgba(255, 210, 122, 0.1);
}

.medical-cell.target-area {
    /* Alapból láthatatlan, csak a HINT gomb fedi fel */
}

.medical-cell.cured {
    background: rgba(255, 210, 122, 0.4) !important;
    box-shadow: 0 0 20px rgba(255, 210, 122, 0.6), inset 0 0 10px rgba(255, 210, 122, 0.8);
    border-color: #ffd27a;
    z-index: 2;
}

.medical-cell .cell-symbol {
    opacity: 0.6; /* Increased for readability */
    transition: 0.3s;
    font-weight: bold;
    font-size: 18px; /* Larger symbols */
    text-shadow: 0 0 5px rgba(255, 210, 122, 0.3);
}

.medical-cell.cured .cell-symbol {
    opacity: 1;
    color: #ffd27a; /* Reverted to cyan but brighter */
    text-shadow: 0 0 10px #ffd27a, 0 0 20px #ffd27a;
}

.panel-vitals {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
}

.vital-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 210, 122, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #ffd27a;
    box-shadow: 0 0 5px #ffd27a;
}

.graph-placeholder {
    height: 30px;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 210, 122, 0.1) 10px, rgba(255, 210, 122, 0.1) 11px);
    border: 1px solid rgba(255, 210, 122, 0.1);
    position: relative;
    overflow: hidden;
}

.graph-placeholder::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 2px;
    background: #ffd27a;
    box-shadow: 0 0 10px #ffd27a;
    animation: heartrate 2s linear infinite;
}

@keyframes heartrate {
    0% { transform: translateY(-50%) translateX(-100%); }
    100% { transform: translateY(-50%) translateX(100%); }
}

.medical-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255, 210, 122, 0.2);
    padding-top: 15px;
}

.tool-legend {
    display: flex;
    gap: 15px;
}

.tool-select-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.3s;
    background: rgba(255, 210, 122, 0.05);
    border-radius: 4px;
}

.tool-symbol-header {
    font-size: 20px;
    font-weight: bold;
    color: #ffd27a;
    text-shadow: 0 0 10px rgba(255, 210, 122, 0.5);
    margin-bottom: -5px;
}

.tool-select-item:hover { background: rgba(255, 210, 122, 0.1); }
.tool-select-item.selected {
    background: rgba(255, 210, 122, 0.1);
    border-color: rgba(255, 210, 122, 0.8);
    box-shadow: 0 0 25px rgba(255, 210, 122, 0.1);
}

.tool-icon.big { width: 56px; height: 56px; opacity: 1; }

.stamp-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 24px;
    height: 24px;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 210, 122, 0.2);
    position: relative;
}

.mini-grid .dot {
    background: rgba(255, 210, 122, 0.8);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: none;
}

/* Position dots in mini-grid */
.mini-grid .dot.center { grid-area: 2 / 2; display: block; }
.mini-grid .dot.top { grid-area: 1 / 2; display: block; }
.mini-grid .dot.bottom { grid-area: 3 / 2; display: block; }
.mini-grid .dot.left { grid-area: 2 / 1; display: block; }
.mini-grid .dot.right { grid-area: 2 / 3; display: block; }
.mini-grid .dot.top-left { grid-area: 1 / 1; display: block; }
.mini-grid .dot.bottom-left { grid-area: 3 / 1; display: block; }
.mini-grid .dot.mid-left { grid-area: 2 / 1; display: block; }
.mini-grid .dot.mid-right { grid-area: 2 / 3; display: block; }

.stamp-legend .arrow {
    font-size: 14px;
    opacity: 0.6;
}

.medical-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.keypad-input-container {
    display: flex;
    gap: 10px;
}

#medical-code-input {
    background: #000;
    border: 1px solid #ffd27a;
    color: #ffd27a;
    padding: 10px;
    font-family: inherit;
    font-size: 18px;
    width: 140px;
    text-align: center;
    letter-spacing: 5px;
}

.medical-action-btn {
    background: #ffd27a;
    border: none;
    color: #000;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.medical-action-btn:hover {
    background: #fff;
    box-shadow: 0 0 15px #fff;
}

.medical-action-btn.reset {
    background: transparent;
    border: 1px solid #ff4d4d;
    color: #ff4d4d;
}

.medical-action-btn.reset:hover {
    background: #ff4d4d;
    color: #fff;
}



/* MULTIPLAYER REMOTE CURSORS */
.remote-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.1s linear, top 0.1s linear;
}

.cursor-pointer {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid currentColor;
    filter: drop-shadow(0 0 5px currentColor);
    transform: rotate(-30deg);
}

.cursor-label {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid currentColor;
    color: #fff;
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 3px;
    margin-top: 4px;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
    backdrop-filter: blur(4px);
}

/* Remote attempt fail flash — used by all puzzle panels */
@keyframes remoteAttemptFail {
    0%   { box-shadow: inset 0 0 0 0 transparent; }
    25%  { box-shadow: inset 0 0 0 3px rgba(255,60,60,0.9), 0 0 40px rgba(255,60,60,0.45); }
    75%  { box-shadow: inset 0 0 0 3px rgba(255,60,60,0.5), 0 0 20px rgba(255,60,60,0.2); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}
.remote-attempt-fail { animation: remoteAttemptFail 0.65s ease !important; }

.cursor-context {
    background: rgba(30, 19, 10, 0.85);
    border: 1px solid rgba(255, 210, 122, 0.45);
    color: #ffd27a;
    padding: 1px 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    border-radius: 2px;
    margin-top: 2px;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(255, 210, 122, 0.6);
    display: none;
}

/* === HOTSPOT HOVER PROMPT (injected by controls.js) ===
   Player-facing accent — retheme per game alongside the rest of this
   file. Also doubles as the readout in /#place placement mode. */
#hotspot-hover-prompt {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    background: rgba(30, 19, 10, 0.88);
    border: 1px solid rgba(255, 210, 122, 0.55);
    color: #ffd27a;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    padding: 8px 22px;
    border-radius: 3px;
    text-shadow: 0 0 10px rgba(255, 210, 122, 0.7);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.25);
    pointer-events: none;
    z-index: 9999;
    animation: thp-pulse 1.4s ease-in-out infinite;
}
@keyframes thp-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 210, 122, 0.25); }
    50%      { box-shadow: 0 0 28px rgba(255, 210, 122, 0.55); }
}
/* Rattle when a sealed door is clicked (controls.js re-adds the class). */
#hotspot-hover-prompt.thp-shake {
    animation: thp-shake 0.4s ease-in-out, thp-pulse 1.4s ease-in-out 0.4s infinite;
}
@keyframes thp-shake {
    0%, 100% { transform: translateX(-50%); }
    20%      { transform: translateX(calc(-50% - 7px)); }
    40%      { transform: translateX(calc(-50% + 7px)); }
    60%      { transform: translateX(calc(-50% - 5px)); }
    80%      { transform: translateX(calc(-50% + 5px)); }
}

/* === PHASE COMPLETE BANNER === */
#phase-banner {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-align: center;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}
#phase-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.phase-banner-inner {
    background: linear-gradient(180deg, rgba(46,29,15,0.92), rgba(26,16,8,0.92));
    border: 2px solid #ffd27a;
    border-radius: 6px;
    padding: 28px 60px;
    box-shadow:
        0 0 40px rgba(255,210,122,0.5),
        inset 0 0 30px rgba(255,210,122,0.1);
}
.phase-banner-title {
    color: #ffd27a;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 8px;
    text-shadow: 0 0 14px #ffd27a;
}
.phase-banner-sub {
    color: #e8c9a0;
    font-size: 13px;
    letter-spacing: 4px;
    margin-top: 10px;
    opacity: 0.85;
}

/* === OPTIONAL PHASE-INTRO VIDEO OVERLAY (media.js) === */
#media-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500; /* above phase banner, below final ending */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#media-video-overlay.visible {
    opacity: 1;
}
#media-video-overlay video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#media-video-overlay .media-skip-btn {
    position: absolute;
    right: 28px;
    bottom: 28px;
    background: rgba(30, 19, 10, 0.85);
    border: 1px solid rgba(255, 210, 122, 0.55);
    color: #ffd27a;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    padding: 10px 24px;
    border-radius: 3px;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 210, 122, 0.7);
}
#media-video-overlay .media-skip-btn:hover {
    background: rgba(255, 210, 122, 0.15);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.35);
}
#media-video-overlay .media-unmute-btn {
    position: absolute;
    left: 28px;
    bottom: 28px;
    background: rgba(30, 19, 10, 0.85);
    border: 1px solid rgba(255, 170, 68, 0.55);
    color: #ffaa44;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    padding: 10px 24px;
    border-radius: 3px;
    cursor: pointer;
}

/* === FINAL ENDING OVERLAY === */
#final-ending {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: radial-gradient(ellipse at center, rgba(46,28,12,0.95), rgba(2,6,12,0.98) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}
#final-ending.visible { opacity: 1; }
.ending-inner {
    text-align: center;
    padding: 60px 80px;
    border: 2px solid #ffd27a;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(46,29,15,0.85), rgba(26,16,8,0.9));
    box-shadow:
        0 0 80px rgba(255,210,122,0.4),
        inset 0 0 60px rgba(255,210,122,0.05);
    position: relative;
    max-width: 720px;
}
.ending-corner {
    position: absolute;
    width: 24px; height: 24px;
    border: 3px solid #ffd27a;
    filter: drop-shadow(0 0 8px #ffd27a);
}
.ending-tl { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.ending-tr { top: -3px; right: -3px; border-left: none; border-bottom: none; }
.ending-bl { bottom: -3px; left: -3px; border-right: none; border-top: none; }
.ending-br { bottom: -3px; right: -3px; border-left: none; border-top: none; }
.ending-title {
    color: #ffd27a;
    font-size: 56px;
    font-weight: bold;
    letter-spacing: 14px;
    text-shadow: 0 0 24px #ffd27a, 0 0 48px #ffd27a;
    margin: 0 0 12px;
    animation: ending-glow 2.5s ease-in-out infinite;
}
@keyframes ending-glow {
    0%,100% { text-shadow: 0 0 24px #ffd27a, 0 0 48px #ffd27a; }
    50%     { text-shadow: 0 0 36px #ffd27a, 0 0 72px #ffd27a, 0 0 100px rgba(255,210,122,0.4); }
}
.ending-sub {
    color: #00ff88;
    font-size: 18px;
    letter-spacing: 8px;
    text-shadow: 0 0 14px #00ff88;
    margin: 0 0 36px;
}
.ending-body {
    color: #e8c9a0;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 2px;
    margin: 0 0 30px;
}
.ending-stats {
    color: #ffd27a;
    font-size: 12px;
    letter-spacing: 6px;
    opacity: 0.7;
    border-top: 1px solid rgba(255,210,122,0.3);
    padding-top: 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   ADMIN CONSOLE
   /#admin route. Login card matches the .auth-card aesthetic from the
   regular login screen. Panel itself is a wider clean white card with
   per-phase sections, per-puzzle toggle buttons, and a sticky header.
   ───────────────────────────────────────────────────────────────────── */
#admin-screen {
    /* same .auth-overlay base as login — full-screen light backdrop */
    background: #f6f5f0;
    overflow: auto;
}
/* Once auth succeeds and admin-panel is rendered, drop the centered-
   overlay flex layout (the panel is much taller than the viewport;
   centering would push its header above the top edge). Switch to a
   top-aligned scrollable container. */
#admin-screen.admin-panel-mode {
    align-items: flex-start;
    justify-content: stretch;
    overflow-y: auto;
    padding: 0;
}
#admin-screen.admin-panel-mode #admin-panel {
    width: 100%;
}
#admin-screen .auth-card {
    /* match login: clean rounded white card */
    text-align: left;
}
#admin-screen .auth-title {
    text-align: center;
    color: #ff6c1f;
    letter-spacing: 4px;
    text-transform: uppercase;
}
#admin-screen .auth-body {
    text-align: center;
    color: #ff8c44;
    font-size: 14px !important;
    letter-spacing: 2px;
}

/* Admin control panel (post-auth) */
#admin-panel {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 28px 32px 60px;
}
.adm-panel-shell {
    width: min(1320px, 96vw);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    color: #3a2715;
    font-family: 'Share Tech Mono', monospace;
}
.adm-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 2px solid #f0eee8;
    gap: 12px;
}
.adm-h-left { display: flex; flex-direction: column; }
.adm-h-tag {
    font-size: 11px;
    color: #ff6c1f;
    letter-spacing: 5px;
    font-weight: 700;
}
.adm-h-title {
    font-size: 22px;
    color: #3a2715;
    letter-spacing: 4px;
    font-weight: 700;
    margin-top: 2px;
}
.adm-h-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.adm-h-stat {
    font-size: 11px;
    color: #c9a35c;
    letter-spacing: 4px;
    font-weight: 700;
}
.adm-current-phase {
    font-size: 28px;
    color: #3a2715;
    font-weight: 700;
    padding: 0 14px;
    background: #fff5e6;
    border-radius: 8px;
    border: 1px solid #ffd9a8;
    line-height: 1.1;
    min-width: 38px;
    text-align: center;
}

/* Admin buttons */
.adm-btn {
    background: #ffffff;
    border: 1.5px solid #f0dfc0;
    color: #3a2715;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.adm-btn:hover { background: #f4f6ff; border-color: #c9a35c; color: #c9a35c; }
.adm-btn-warn { border-color: #ffb46b; color: #ff6c1f; }
.adm-btn-warn:hover { background: #fff3e6; border-color: #ff6c1f; color: #ff6c1f; }
.adm-btn-danger { border-color: #ff7979; color: #c92a2a; background: #fff5f5; }
.adm-btn-danger:hover { background: #ffe3e3; border-color: #c92a2a; color: #a51616; }
.adm-btn-end { border-color: #9b6bff; color: #8a5a2c; background: #f5f0ff; }
.adm-btn-end:hover { background: #ebdfff; border-color: #8a5a2c; color: #4019a8; }
.adm-h-divider {
    width: 1px;
    height: 26px;
    background: #f0dfc0;
    margin: 0 4px;
}

/* ── Players section ── */
.adm-players-section {
    border-top: 2px solid #f0eee8;
    padding: 18px 26px;
    background: #fbfaf6;
}
.adm-players-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.adm-players-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #c9a35c;
}
.adm-players-count {
    font-size: 14px;
    font-weight: 700;
    color: #3a2715;
    padding: 2px 10px;
    background: #eef0ff;
    border: 1px solid #f0dfc0;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
}
.adm-players-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 8px;
}
.adm-players-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9ba0b8;
    font-style: italic;
    padding: 12px;
    letter-spacing: 2px;
    font-size: 12px;
}
.adm-player-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #f0dfc0;
    border-radius: 8px;
    min-width: 0;
}
.adm-player-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    align-self: center;
}
.adm-player-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.adm-player-name {
    font-size: 14px;
    font-weight: 700;
    color: #3a2715;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-player-meta {
    font-size: 11px;
    color: #a08560;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-player-meta-k {
    color: #b29d7f;
    font-weight: 700;
    margin-left: 6px;
    margin-right: 2px;
}
.adm-player-meta-k:first-child { margin-left: 0; }
.adm-player-ready {
    color: #00a86b;
    font-weight: 700;
    margin-left: 8px;
}
.adm-btn-kick {
    font-size: 11px;
    padding: 7px 14px;
    letter-spacing: 2px;
}

.adm-phases {
    padding: 8px 0;
}
.adm-phase-group {
    border-top: 1px solid #f0eee8;
    padding: 18px 26px;
    transition: background 0.2s;
}
.adm-phase-group.adm-phase-current {
    background: linear-gradient(180deg, rgba(107,120,255,0.06), rgba(107,120,255,0.02));
}
.adm-phase-group.adm-phase-locked .adm-puzzles { opacity: 0.55; }
.adm-phase-group.adm-phase-locked .adm-toggle { cursor: not-allowed; }

.adm-phase-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}
.adm-btn-jump {
    margin-left: auto;
    border-color: #c9a35c;
    color: #c9a35c;
    font-size: 12px;
    padding: 7px 12px;
    letter-spacing: 1.5px;
}
.adm-btn-jump:hover {
    background: #eef0ff;
    color: #4a55cc;
    border-color: #4a55cc;
}
.adm-phase-num {
    background: #3a2715;
    color: #fff;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 1px;
    min-width: 36px;
    text-align: center;
}
.adm-phase-current .adm-phase-num { background: #ff6c1f; }
.adm-phase-titles { display: flex; flex-direction: column; line-height: 1.2; }
.adm-phase-title {
    font-size: 16px;
    font-weight: 700;
    color: #3a2715;
    letter-spacing: 1.5px;
}
.adm-phase-sub {
    font-size: 12px;
    color: #a08560;
    letter-spacing: 2px;
}
.adm-phase-flag {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #f0dfc0;
    color: #a08560;
}
.adm-phase-flag.adm-flag-done    { color: #00a86b; border-color: #b6efce; background: #e8f9ee; }
.adm-phase-flag.adm-flag-current { color: #ff6c1f; border-color: #ffd9a8; background: #fff5e6; }
.adm-phase-flag.adm-flag-locked  { color: #a08560; border-color: #f0dfc0; background: #f7f9ff; }

.adm-puzzles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}
.adm-puz-row {
    display: grid;
    /* button | info (flexes) | answer (capped). The info column has
       min-width so long answer strings don't squash labels into single
       columns of 1 char per line. */
    grid-template-columns: 56px minmax(150px, 1fr) minmax(0, 220px);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #f9f8f3;
    border: 1px solid #efeadd;
    border-radius: 10px;
    transition: all 0.15s;
    min-width: 0; /* allow children to shrink below their intrinsic width */
}
.adm-phase-current .adm-puz-row {
    background: #ffffff;
    border-color: #f0dfc0;
}
.adm-puz-row:hover {
    box-shadow: 0 2px 8px rgba(107,120,255,0.12);
}

.adm-puz-info { display: flex; flex-direction: column; min-width: 0; gap: 4px; overflow: hidden; }
.adm-puz-label {
    font-size: 14px;
    font-weight: 700;
    color: #3a2715;
    letter-spacing: 1px;
    /* keep on one line — wrapping mid-word looks broken */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-puz-progress {
    font-size: 12px;
    color: #a08560;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    /* allow wrapping at spaces but never split a token across lines */
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}
.adm-puz-progress b { color: #00a86b; font-weight: 700; }

.adm-puz-answer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    border-left: 1px dashed #f0dfc0;
    padding-left: 12px;
    min-width: 0;
    overflow: hidden;
}
.adm-puz-answer-tag {
    font-size: 9px;
    letter-spacing: 3px;
    color: #ff6c1f;
    font-weight: 700;
}
.adm-puz-answer-val {
    font-size: 13px;
    color: #3a2715;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
    text-align: right;
    /* wrap on space, never inside a word */
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
    line-height: 1.35;
}

/* Solve toggle button: red X by default, green ✓ when solved */
.adm-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid #ff4444;
    background: #ffeaea;
    color: #ff4444;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    transition: all 0.18s;
    line-height: 1;
}
.adm-toggle:hover { transform: scale(1.05); }
.adm-toggle .adm-toggle-x-mark { display: block; }
.adm-toggle .adm-toggle-v-mark { display: none; }
.adm-toggle.adm-toggle-on {
    border-color: #00a86b;
    background: #e8f9ee;
    color: #00a86b;
}
.adm-toggle.adm-toggle-on .adm-toggle-x-mark { display: none; }
.adm-toggle.adm-toggle-on .adm-toggle-v-mark { display: block; }
.adm-phase-locked .adm-toggle {
    opacity: 0.6;
    pointer-events: none;
}

.adm-footer {
    padding: 14px 26px;
    border-top: 2px solid #f0eee8;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: 3px;
    color: #a08560;
}
.adm-foot-conn {
    color: #00a86b;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL SMALL-TEXT FLOOR + HINT BUMPS
   The scattered 8/9/10/11px font-sizes across puzzle CSS files were
   often unreadable. This section bumps the smallest classes globally
   to a comfortable floor (12-13px) without touching every file.
   Applies inside .puzzle-panel and the HUD only — not the 3D scene.
   ───────────────────────────────────────────────────────────────────── */

/* Hint modal body text — was 12-13px in most puzzles, bump to 14px and
   relax the line-height for easier reading. */
.puzzle-panel [class*="hint-box"] p,
.puzzle-panel [class*="-hint-box"] p,
.puzzle-panel [class*="hint-modal"] p {
    font-size: 14px !important;
    line-height: 1.85 !important;
}
.puzzle-panel [class*="hint-box"] h3,
.puzzle-panel [class*="-hint-box"] h3,
.puzzle-panel [class*="hint-modal"] h3 {
    font-size: 16px !important;
}

/* Tiny telemetry / readout / log labels: anything class-named *-label,
   *-readout-label, *-tel-k, *-tel-v, *-section-stat etc. that was
   sub-12px gets pushed up. */
.puzzle-panel .sg-tel-row,
.puzzle-panel .sg-readout-label,
.puzzle-panel .sg-readout-value,
.puzzle-panel .sg-tel-k,
.puzzle-panel .sg-tel-v,
.puzzle-panel .sg-log-header,
.puzzle-panel .sg-section-stat,
.puzzle-panel .sg-section-title,
.puzzle-panel .sg-code-label,
.puzzle-panel .sg-grid-col-label,
.puzzle-panel .sg-grid-row-label {
    font-size: 12px !important;
}
.puzzle-panel .sg-cell-marker {
    font-size: 10px !important; /* still smaller because in-cell, but +1 */
}

/* Generic floor: any element with font-size below ~10px in puzzles is
   bumped. We target the common small-class naming patterns used across
   every puzzle (label, sub, meta, readout, telemetry-row keys/values,
   short-name keys, dim-text). */
.puzzle-panel [class$="-label"],
.puzzle-panel [class*="-label "],
.puzzle-panel [class$="-sub"],
.puzzle-panel [class$="-mini"],
.puzzle-panel [class$="-tiny"],
.puzzle-panel [class$="-meta"],
.puzzle-panel [class$="-key"],
.puzzle-panel [class$="-tel-k"],
.puzzle-panel [class$="-tel-v"],
.puzzle-panel [class$="-tel-key"],
.puzzle-panel [class$="-tel-val"],
.puzzle-panel [class$="-readout-value"],
.puzzle-panel [class$="-readout-label"],
.puzzle-panel [class$="-name"],
.puzzle-panel [class$="-dim"],
.puzzle-panel [class*="-readout-label"] {
    font-size: max(12px, 0.82em) !important;
}

/* Telemetry rows / status rows often contain tiny labels — bump the
   row container as a whole. */
.puzzle-panel [class$="-tel-row"],
.puzzle-panel [class*="-tel-row "],
.puzzle-panel [class$="-tel"],
.puzzle-panel [class$="-readout"] {
    font-size: max(12px, 0.82em);
}

/* Status strip / bottom status text in puzzles */
.puzzle-panel [class$="-status"],
.puzzle-panel [class*="-status "] {
    font-size: 13px !important;
}

/* HUD readouts (top of screen): ensure ≥ 13px regardless of zoom */
#hud, #crystal-counter, #status-msg {
    font-size: max(13px, 1em);
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE / SMALL-VIEWPORT HANDLING
   The previous design hard-coded `zoom: 1.10` on every UI container,
   which broke when the user shrank the browser, played at higher OS
   zoom, or used a small laptop screen — content overflowed.
   We now scale that zoom factor by viewport size and let puzzle panels
   shrink their own padding/gap on small screens.
   ───────────────────────────────────────────────────────────────────── */

/* Small height (laptops, browser-zoom users): reduce zoom + tighten
   padding so puzzles fit in viewport. */
@media (max-height: 820px) {
    #login-screen, #lobby-screen, #hud, #puzzle-overlay {
        zoom: 1.0;
    }
    .puzzle-panel {
        max-height: 96vh !important;
    }
}

/* Very narrow / mobile-laptop widths */
@media (max-width: 1100px) {
    #login-screen, #lobby-screen, #hud, #puzzle-overlay {
        zoom: 0.95;
    }
}

/* Very small viewports: drop zoom and let puzzles scroll if needed */
@media (max-width: 900px), (max-height: 680px) {
    #login-screen, #lobby-screen, #hud, #puzzle-overlay {
        zoom: 0.88;
    }
    .puzzle-panel {
        overflow-y: auto !important;
    }
}

/* Wide / 4K screens: bump zoom slightly so the UI doesn't look tiny */
@media (min-width: 2000px) {
    #login-screen, #lobby-screen, #hud, #puzzle-overlay {
        zoom: 1.18;
    }
}

/* Extremely tall (portrait or huge vertical) */
@media (min-height: 1300px) {
    #login-screen, #lobby-screen, #hud, #puzzle-overlay {
        zoom: 1.15;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Session dashboard (admin /#admin — level above the room console)
   ══════════════════════════════════════════════════════════════════ */
.adm-create-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 18px 26px;
    border-bottom: 2px solid #f0eee8;
    background: #fbfaf6;
}
.adm-create-row > .adm-input { flex: 2 1 200px; }
.adm-create-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: #a08560;
    letter-spacing: 2px;
    font-weight: 700;
}
.adm-create-field .adm-input { width: 110px; }
.adm-input {
    background: #ffffff;
    border: 1.5px solid #f0dfc0;
    color: #3a2715;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    border-radius: 8px;
    box-sizing: border-box;
}
.adm-input:focus { outline: none; border-color: #c9a35c; }

.adm-sess-list { padding: 14px 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.adm-sess-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #e7e4da;
    border-radius: 10px;
    padding: 12px 16px;
    background: #ffffff;
}
.adm-sess-code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 5px;
    color: #3a2715;
    background: #fff5e6;
    border: 1px solid #ffd9a8;
    border-radius: 8px;
    padding: 4px 12px;
}
.adm-sess-code-small { font-size: 15px; letter-spacing: 3px; padding: 3px 10px; }
.adm-h-session { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.adm-btn-back { padding: 5px 10px; font-size: 11px; }

.adm-chip {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
    padding: 4px 12px;
    border: 1px solid #f0dfc0;
    color: #a08560;
    background: #f7f9ff;
}
.adm-chip-created   { color: #2b6cb0; border-color: #bcd8f5; background: #ebf5ff; }
.adm-chip-active    { color: #00a86b; border-color: #b6efce; background: #e8f9ee; }
.adm-chip-completed { color: #8a5a2c; border-color: #d9c8ff; background: #f5f0ff; }
.adm-chip-expired   { color: #c92a2a; border-color: #ffc9c9; background: #fff5f5; }
.adm-chip-cancelled { color: #a08560; border-color: #f0dfc0; background: #f2f4fa; }

.adm-sess-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.adm-sess-label { font-size: 14px; color: #3a2715; font-weight: 700; letter-spacing: 1px; }
.adm-sess-meta { font-size: 11px; color: #a08560; letter-spacing: 1px; }
.adm-sess-live { color: #00a86b; font-weight: 700; }
.adm-sess-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-sess-actions .adm-btn { padding: 7px 12px; font-size: 11px; }