/* DOSSORA THEME STYLES 
   Based on 'Endless Adventures' & 'Guidebook' aesthetics 
*/

:root {
    --dossora-bg: #fdf1dc; /*#e0ddd5; /* Board Background */
    --dossora-paper: #ffffff; /* Card Background */
    --dossora-ink: #383838; /* Main Text */
    --dossora-red: #b22222; /* Stamps/Accents */
    --dossora-orange: #e67e22; /* Buttons */
    --dossora-blue: #1a3c5a; /* Blueprint Blue */
    --font-head: 'Crete Round', serif;
    --font-body: 'Crimson Text', serif;
    --font-typewriter: 'Special Elite', monospace;
    --font-hand: 'Patrick Hand', cursive;
}

/* --- MAIN WRAPPER --- */
.dossora-wrapper {
    background-color: var(--dossora-bg);
    /* Noise texture similar to your guidebook index */
    background-image: radial-gradient(#d1cdbc 1.5px, transparent 0);
    background-size: 30px 30px;
    min-height: 100vh;
    padding: 60px 20px;
    font-family: var(--font-body);
    color: var(--dossora-ink);
    box-sizing: border-box;
}

.dossora-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.dossora-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.dossora-title {
    font-family: var(--font-typewriter);
    font-size: 3rem;
    margin: 0;
    color: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.5);
}

.dossora-meta {
    font-family: var(--font-typewriter);
    color: #666;
    font-size: 0.9rem;
    margin-top: 10px;
    letter-spacing: 1px;
}

.dossora-stamp {
    position: absolute;
    right: 20px;
    border: 4px solid var(--dossora-red);
    color: var(--dossora-red);
    padding: 5px 15px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.2rem;
    transform: rotate(15deg);
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* --- CARDS & PANELS --- */
.dossora-card {
    background: var(--dossora-paper);
    padding: 30px;
    border: 1px solid #d1cdbc;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.05); /* Classic DD Drop Shadow */
    margin-bottom: 30px;
    position: relative;
    border-radius: 2px;
}

.briefing-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(-0.5deg);
}

.auth-card {
    max-width: 500px;
    margin: 40px auto;
    text-align: center;
    border-top: 5px solid var(--dossora-red);
}

/* --- TYPOGRAPHY INSIDE CARDS --- */
.dossora-h2 {
    font-family: var(--font-head);
    font-size: 1.8rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-top: 0;
    color: var(--dossora-blue);
}

.dossora-h3 {
    font-family: var(--font-typewriter);
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-top: 0;
}

.dossora-text {
    font-size: 1.1rem;
    line-height: 1.6;
}

.dossora-link {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: var(--dossora-blue);
    text-decoration: none;
    border-bottom: 1px dashed var(--dossora-blue);
}

/* --- DEPUTY GRID SYSTEM --- */
.deputy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.deputy-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
    background-image: linear-gradient(#fcfcfc 1px, transparent 1px);
    background-size: 100% 25px; /* Notebook paper lines */
}

.deputy-card:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 15px rgba(0,0,0,0.1);
}

.recruit-card {
    background-color: #fdfaf5; /* Slightly darker manila */
    border: 2px dashed #ccc;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deputy-name {
    font-family: var(--font-hand);
    font-size: 2rem;
    margin: 0 0 5px 0;
}

.deputy-rank {
    font-family: var(--font-typewriter);
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
}

.deputy-stats {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.card-footer-links {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
}
.card-footer-links a { color: #888; text-decoration: none; }

/* --- FORMS & INPUTS --- */
.recruit-form {
    margin-top: 15px;
}

.dossora-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    font-family: var(--font-typewriter);
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
}

/* --- BUTTONS --- */
.dossora-btn {
    display: inline-block;
    padding: 12px 25px;
    font-family: var(--font-head);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--dossora-orange);
    color: #fff;
    box-shadow: 0 4px 0 #d35400; /* 3D Click effect */
}
.btn-primary:hover { background-color: #d35400; transform: translateY(2px); box-shadow: 0 2px 0 #d35400; }

.btn-secondary {
    background-color: var(--dossora-ink);
    color: #fff;
    box-shadow: 0 4px 0 #000;
}
.btn-secondary:hover { transform: translateY(2px); box-shadow: 0 2px 0 #000; }

.full-width { width: 100%; text-align: center; }

.dossora-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* --- DECORATIVE ELEMENTS (Tape Strips) --- */
.tape-strip {
    position: absolute;
    height: 35px;
    width: 140px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    backdrop-filter: blur(2px);
    z-index: 5;
}
.tape-strip.top-center {
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(1deg);
}

.paperclip {
    position: absolute;
    top: -15px;
    right: 20px;
    width: 15px;
    height: 40px;
    border-radius: 10px;
    border: 4px solid #aaa;
    border-bottom: none;
    z-index: 2;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    .dossora-header { margin-bottom: 30px; }
    .dossora-title { font-size: 2rem; }
    .dossora-card { padding: 20px; }
}

/* --- PHASE 2: INTEL FEED STYLES --- */

/* Session Header (The 'Spy Bar') */
.dossora-session-header {
    background: #2b2b2b;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--dossora-red);
    font-family: var(--font-typewriter);
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Avatar Circle */
.avatar-circle {
    width: 40px; height: 40px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid var(--dossora-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* Coin Display */
.coin-display {
    background: #000;
    border: 1px solid #444;
    padding: 5px 15px;
    border-radius: 20px;
    color: #ffd700;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-typewriter);
}

.session-label { color: #888; margin-right: 5px; font-size: 0.75rem; }
.session-value { color: #fff; font-weight: bold; letter-spacing: 1px; }

/* Tabs */
.dossora-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.dossora-tabs .tab {
    background: transparent;
    border: 2px solid var(--dossora-ink);
    padding: 8px 16px;
    font-family: var(--font-head);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--dossora-ink);
}
.dossora-tabs .tab.active {
    background: var(--dossora-ink);
    color: #fff;
}

/* Intel Grid Layout */
.intel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
}

/* Intel Card */
.intel-card {
    padding: 15px; /* Less padding than layout cards */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* For the blur effect */
    background: #fff;
}

.intel-visual {
    height: 180px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    position: relative;
}

.intel-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--dossora-blue);
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 8px;
    font-family: var(--font-typewriter);
}

.intel-title {
    font-family: var(--font-head);
    font-size: 1.3rem;
    margin: 0 0 5px 0;
    color: var(--dossora-ink);
}

.intel-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1; /* Pushes button to bottom */
}

/* --- LOCKED STATES --- */
.intel-card.locked, 
.intel-card.locked-secret {
    border: 1px dashed #999;
    background: #f9f9f9;
}

.intel-visual.blurred {
    filter: blur(4px);
    opacity: 0.6;
}

.lock-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75); /* Dark overlay */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.lock-icon { font-size: 2.5rem; margin-bottom: 10px; }
.lock-title { 
    font-family: var(--font-typewriter); 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: var(--dossora-red); 
    letter-spacing: 2px;
    border: 2px solid var(--dossora-red);
    padding: 2px 8px;
    transform: rotate(-5deg);
    margin-bottom: 10px;
}

.lock-msg {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    margin-bottom: 15px;
    color: #ddd;
}

.dossora-btn.btn-small {
    padding: 5px 15px;
    font-size: 0.8rem;
    background: #fff;
    color: #000;
}
.btn-outline {
    background: transparent; border: 1px solid #666; color: #ccc;
}
.btn-outline:hover {
    background: var(--dossora-red); color: #fff; border-color: var(--dossora-red);
}

/* Code Input for Top Secret */
.code-input {
    background: #000;
    border: 1px solid var(--dossora-red);
    color: var(--dossora-red);
    font-family: monospace;
    text-align: center;
    padding: 8px;
    width: 80%;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* --- PHASE 3: DASHBOARD / DESK GRID --- */

.desk-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.desk-polaroid {
    background: #fff;
    padding: 15px 15px 40px 15px;
    box-shadow: 3px 5px 15px rgba(0,0,0,0.15);
    width: 220px;
    text-decoration: none;
    color: var(--dossora-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    transform: rotate(var(--tilt));
    cursor: pointer;
    text-align: center;
}

.desk-polaroid:hover {
    transform: scale(1.05) rotate(0deg) !important;
    box-shadow: 5px 10px 25px rgba(0,0,0,0.25);
    z-index: 10;
}

.polaroid-image {
    width: 100%;
    background: #f4f4f4;
    border: 1px solid #eee;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    overflow: hidden;
}

.polaroid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.polaroid-caption {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: #333;
    line-height: 1.1;
    margin-top: 5px;
}

.polaroid-sub {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}

/* Decorations */
.notify-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: var(--dossora-red); color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-family: sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 5;
}

.paperclip-side {
    position: absolute;
    top: 30%; right: -12px;
    width: 12px; height: 35px;
    border-radius: 10px; border: 3px solid #999; border-left: none;
}

/* --- PHASE 4: DINO DIAMONDS (BADGES) --- */

/* Badge Grid Layout */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    justify-items: center;
    margin-top: 40px;
}

/* Individual Badge Card */
.badge-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.badge-card:hover {
    transform: scale(1.05);
}

/* Visual styling for the circular badge */
.badge-visual {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 15px;
    position: relative;
    background: #eee; /* Placeholder bg */
}

.badge-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-name {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--dossora-ink);
}

/* --- LOCKED/UNEARNED STATE --- */
.badge-card.locked .badge-visual {
    /* Grayscale and dim the image */
    filter: grayscale(100%) contrast(80%);
    opacity: 0.7;
    border-color: #ccc;
}

.badge-card.locked .badge-name {
    color: #888;
}

.lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

/* =========================================
   MODAL STYLES
   ========================================= */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Modal Content Box (Reuses card styling) */
.modal-content {
    /* Inherits .dossora-card & .briefing-card styles */
    margin: 0; /* Reset margin */
    max-width: 800px;
    width: 100%;
    transform: rotate(0deg); /* Reset rotation for readability */
    animation: slideDown 0.3s ease-out;
}

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

/* Close 'X' Button */
.close-modal-btn {
    color: #aaa;
    float: right;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10;
    font-family: sans-serif;
}

.close-modal-btn:hover { color: var(--dossora-red); }

/* Modal Header & Stamps */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

.status-stamp {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 15px;
    border: 3px solid;
    transform: rotate(-8deg);
    mix-blend-mode: multiply;
}
.status-stamp.earned {
    color: #27ae60; /* Green */
    border-color: #27ae60;
}
.status-stamp.pending {
    color: var(--dossora-red);
    border-color: var(--dossora-red);
}

/* Modal Body Layout */
.modal-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left Column: Images */
.badge-showcase {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.badge-view {
    text-align: center;
}
.badge-view img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.badge-view span {
    display: block;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

/* Right Column: Intel & Actions */
.badge-intel {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intel-block p {
    font-family: var(--font-typewriter);
    margin-top: 5px;
}

/* Requisition Box */
.requisition-box {
    background: #f9f9f9;
    border: 2px dashed #ccc;
    padding: 20px;
    margin-top: auto; /* Push to bottom */
    text-align: center;
}

.requisition-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-top: 15px;
}

.cost-display {
    font-family: var(--font-typewriter);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Responsive Modal */
@media (max-width: 700px) {
    .modal-body { flex-direction: column; }
    .badge-showcase { flex-direction: row; justify-content: center; width: 100%; }
    .badge-view img { width: 100px; height: 100px; }
}

/* --- PHASE 5: SECURITY CLEARANCE ZONE (DASHBOARD FOOTER) --- */

.security-zone {
    margin-top: 60px;
    margin-bottom: 40px;
    position: relative;
}

/* The dashed divider line */
.zone-divider {
    text-align: center;
    border-bottom: 2px dashed #aaa;
    line-height: 0.1em;
    margin-bottom: 30px;
}

.zone-divider span {
    background: var(--dossora-bg); /* Matches page bg to hide line behind text */
    padding: 0 15px;
    color: #888;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* The ID Card Container */
.clearance-card {
    background: #fff;
    border: 1px solid #d1cdbc;
    border-left: 8px solid #ccc; /* Default Border */
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    border-radius: 4px;
}

/* COLOR THEMES BASED ON LEVEL */
/* Level 1: Public */
.clearance-card.level-public { border-left-color: #95a5a6; }
.clearance-card.level-public .rank-badge-icon { background: #95a5a6; }

/* Level 2: Classified (The one in mockup) */
.clearance-card.level-classified { border-left-color: var(--dossora-blue); }
.clearance-card.level-classified .rank-badge-icon { background: var(--dossora-blue); }
.clearance-card.level-classified .clearance-title { color: var(--dossora-blue); }

/* Level 3: Top Secret */
.clearance-card.level-top-secret { border-left-color: var(--dossora-red); }
.clearance-card.level-top-secret .rank-badge-icon { background: var(--dossora-red); }
.clearance-card.level-top-secret .clearance-title { color: var(--dossora-red); }

/* Left Column: Visuals */
.clearance-visual {
    text-align: center;
    flex: 0 0 100px;
}

.rank-badge-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    color: #fff;
    font-size: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px auto;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.clearance-status {
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    background: #333;
    color: #fff;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 1px;
}

/* Middle Column: Info */
.clearance-intel {
    flex: 1;
}

.clearance-label {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

.clearance-title {
    font-family: var(--font-head);
    font-size: 1.8rem;
    margin: 5px 0 15px 0;
    text-transform: uppercase;
}

.clearance-perks {
    display: flex;
    gap: 15px;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
}

.perk-check.locked {
    color: #aaa;
    text-decoration: line-through;
}

/* Progress Bar */
.clearance-progress {
    background: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
}

.progress-label {
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    margin-bottom: 5px;
    color: #666;
}

.progress-track {
    background: #ddd;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--dossora-orange),
        var(--dossora-orange) 10px,
        #d35400 10px,
        #d35400 20px
    );
}

/* Right Column: Actions */
.clearance-actions {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.barcode {
    font-family: 'Libre Barcode 39', cursive; /* Fallback if not loaded is fine */
    font-size: 2rem;
    color: #333;
    opacity: 0.5;
    letter-spacing: -2px;
    transform: scaleY(0.5);
}

/* Mobile Responsive */
@media (max-width: 700px) {
    .clearance-card { flex-direction: column; text-align: center; }
    .clearance-perks { justify-content: center; flex-wrap: wrap; }
    .clearance-intel { width: 100%; }
}

/* --- PHASE 6: PARENT COMMAND TERMINAL --- */

.command-center-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.deputy-command-card {
    padding: 0; /* Reset padding to handle internal sections */
    overflow: hidden;
}

/* --- TOP SECTION: DEPLOYMENT AREA --- */
.command-header {
    background: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    border-bottom: 2px dashed #ddd;
}

.deputy-badge-large {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 4px solid var(--dossora-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    background: #fdfaf5;
    color: var(--dossora-orange);
    flex-shrink: 0;
}

.deputy-identity-block {
    flex-grow: 1;
}

.command-name {
    font-family: var(--font-head);
    font-size: 2rem;
    margin: 0;
    color: var(--dossora-ink);
    text-transform: uppercase;
    line-height: 1;
}

.command-rank {
    font-family: var(--font-typewriter);
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    letter-spacing: 1px;
}

.deploy-action {
    flex-shrink: 0;
}

.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* --- MIDDLE SECTION: THE SNAPSHOT --- */
.command-snapshot {
    background: #fdfaf5; /* Slightly darker manila */
    padding: 25px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.snapshot-col {
    position: relative;
}

/* Vertical Divider Lines between cols */
.snapshot-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 10%;
    height: 80%;
    border-right: 1px solid #e0e0e0;
}

.snap-title {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    color: #999;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 1. Trophy Case */
.mini-trophy-grid {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mini-diamond {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}

.mini-diamond.locked {
    background: #e0e0e0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond shape */
    width: 14px; height: 14px; /* Smaller when locked */
    margin: 3px;
}

.snap-meta {
    font-family: var(--font-hand);
    font-size: 1rem;
    color: #555;
    line-height: 1.3;
    margin: 0;
}

/* 2. Active Mission */
.mission-name {
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: var(--dossora-blue);
    margin: 0 0 10px 0;
}

.progress-track.small {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}

/* 3. Quick Ops */
.ops-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ops-list li {
    margin-bottom: 8px;
}

.ops-list a {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--dossora-ink);
    border-bottom: 1px dotted #ccc;
    transition: color 0.2s;
}

.ops-list a:hover {
    color: var(--dossora-orange);
    border-bottom-style: solid;
}

/* Responsive Parent Dashboard */
@media (max-width: 800px) {
    .command-header {
        flex-direction: column;
        text-align: center;
    }
    
    .command-snapshot {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .snapshot-col:not(:last-child)::after {
        display: none; /* Remove vertical dividers on mobile */
    }

    .snapshot-col {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 20px;
    }
    .snapshot-col:last-child {
        border-bottom: none;
    }
}

/* --- PHASE 7: BOOKMARK INTEL HUB --- */

/* 1. Hero Card Layout */
.bookmark-hero-card {
    padding: 40px;
}

.bookmark-layout {
    display: flex;
    gap: 40px;
}

.bookmark-visual {
    flex: 1;
    max-width: 300px;
}

.bookmark-intel {
    flex: 1.5;
}

/* Polaroid Frame */
.polaroid-frame {
    background: #fff;
    padding: 10px 10px 40px 10px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
    transform: rotate(-2deg);
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.polaroid-caption {
    font-family: var(--font-typewriter);
    text-align: center;
    margin-top: 10px;
    color: #333;
    font-weight: bold;
}

/* Audio Player Mockup */
.audio-log-box {
    background: #2b2b2b;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid var(--dossora-orange);
}

.audio-label {
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.audio-player-mock {
    display: flex;
    align-items: center;
    gap: 10px;
}

.play-btn {
    background: var(--dossora-orange);
    border: none;
    color: white;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
}

.waveform {
    font-family: monospace;
    letter-spacing: -1px;
    color: #666;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
}

.time {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
}

/* Stats Grid */
.dino-stats-grid {
    margin: 20px 0;
    background: #fcfcfc;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.stat-label {
    width: 80px;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.stat-bar {
    flex-grow: 1;
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.stat-bar .fill {
    height: 100%;
    background: var(--dossora-blue);
}

/* Claim Helper */
.claim-helper {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.helper-text { font-family: var(--font-hand); color: #666; }

/* 2. Rewards Section */
.rewards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.reward-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    border-radius: 4px;
}

.reward-item.highlight {
    background: #fff8e1; /* Light yellow highlight */
    border-color: var(--dossora-orange);
}

.reward-icon { font-size: 2rem; }

.reward-info h4 {
    margin: 0 0 5px 0;
    font-family: var(--font-head);
    font-size: 1.1rem;
}

.reward-info p {
    font-size: 0.9rem;
    margin: 0 0 10px 0;
    color: #666;
    line-height: 1.3;
}

.price-tag {
    font-family: var(--font-typewriter);
    font-weight: bold;
    color: var(--dossora-ink);
    margin-bottom: 8px;
}

.collection-confirm {
    text-align: center;
    margin-top: 15px;
    color: #27ae60;
    font-family: var(--font-typewriter);
    font-size: 0.9rem;
}

/* 3. Hall of Heroes (Footer) */
.hall-of-heroes {
    margin-top: 50px;
    margin-bottom: 50px;
}

.hero-scroll-track {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    overflow-x: auto;
}

.hero-slot {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.6;
    transition: all 0.2s;
}

.hero-slot.active {
    opacity: 1;
    transform: scale(1.1);
}

.hero-img, .hero-silhouette {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hero-img img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff;
}

.hero-silhouette {
    background: #ddd;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #aaa;
    border: 3px solid #ccc;
}

.hero-month {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.slot-badge {
    background: var(--dossora-orange);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 5px;
    font-family: sans-serif;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 700px) {
    .bookmark-layout { flex-direction: column; }
    .bookmark-visual { max-width: 100%; }
    .rewards-grid { grid-template-columns: 1fr; }
}

/* --- PHASE 8: DETECTIVE LAB (CASE FILES) --- */

/* 1. Case File Hero (The Folder Look) */
.case-file-hero {
    background-color: #f4e7d3; /* Manila Folder */
    border-left: 15px solid #c5b08b; /* Folded spine */
    padding: 40px;
    position: relative;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    margin-bottom: 40px;
    border-radius: 0 4px 4px 0;
}

.file-folder-tab {
    position: absolute;
    top: -30px;
    left: 0;
    background: #c5b08b;
    padding: 8px 25px;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    color: #fff;
    border-radius: 5px 5px 0 0;
    font-size: 0.9rem;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
}

.classified-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 4px solid #b22222;
    color: #b22222;
    padding: 5px 15px;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    font-size: 1.5rem;
    transform: rotate(15deg);
    opacity: 0.6;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.case-layout {
    display: flex;
    gap: 40px;
}

.case-visual {
    flex: 0 0 200px;
}

.case-intel {
    flex: 1;
}

/* Book Mockup */
.book-mockup {
    position: relative;
    perspective: 600px;
    transform: rotateY(-15deg);
    transition: transform 0.3s;
}
.book-mockup:hover { transform: rotateY(0deg); }

.book-cover {
    width: 180px;
    height: 260px;
    background: #333;
    border-radius: 2px 5px 5px 2px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.book-shadow {
    position: absolute;
    bottom: 5px; right: -10px;
    width: 20px; height: 95%;
    background: #999;
    transform: skewY(45deg);
    z-index: 1;
}

.case-meta {
    font-family: 'Special Elite', monospace;
    color: #666;
    margin-bottom: 15px;
    border-bottom: 1px dashed #bbb;
    padding-bottom: 10px;
}

/* Preview Strip (The Teaser) */
.preview-strip {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.preview-page {
    width: 100px;
    height: 130px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    position: relative;
}

.preview-page.locked {
    background: #f0f0f0;
    color: #999;
}

.page-label {
    font-family: 'Patrick Hand', cursive;
    font-size: 0.9rem;
    line-height: 1.1;
}

/* 2. Evidence Submission Zone */
.evidence-submission {
    background: #fff;
    border: 2px dashed #ccc;
    padding: 40px;
    margin-top: 50px;
    position: relative;
    text-align: center;
    background-image: linear-gradient(#fcfcfc 1px, transparent 1px);
    background-size: 100% 25px;
}

.submission-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.coin-reward-badge {
    background: var(--dossora-orange);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.upload-zone {
    border: 2px dashed var(--dossora-blue);
    background: rgba(26, 60, 90, 0.05);
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    margin: 0 auto;
    cursor: pointer;
    transition: background 0.2s;
}

.upload-zone:hover {
    background: rgba(26, 60, 90, 0.1);
}

.upload-icon {
    font-size: 3rem;
    color: var(--dossora-blue);
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 700px) {
    .case-layout { flex-direction: column; align-items: center; }
    .case-visual { margin-bottom: 20px; }
    .rewards-grid { grid-template-columns: 1fr; }
}

/* --- PHASE 9: DOSSORA TRAILS (SUBSCRIPTION) --- */

.trails-hero {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 2px dashed #aaa;
    padding-bottom: 30px;
}

.compass-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: spinCompass 10s infinite linear;
}

@keyframes spinCompass { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Grid Layout */
.trails-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    justify-items: center;
}

/* Card Base Styles */
.trail-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.trail-card:hover { transform: translateY(-5px); }

/* Month Badge */
.trail-month-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #333;
    color: #fff;
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 5;
}

.trail-month-badge.current {
    background: var(--dossora-orange);
}

/* Visual Area (Map Texture) */
.trail-visual {
    height: 150px;
    position: relative;
    background-color: #e8f5e9; /* Light Green Base */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

/* CSS Topographic Pattern Generator */
.topo-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.3;
    background-image: 
        repeating-radial-gradient(#2e7d32 0, #2e7d32 1px, transparent 1px, transparent 100%);
    background-size: 60px 60px;
}

.trail-icon {
    font-size: 4rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

/* Card Info Area */
.trail-info {
    padding: 20px;
    text-align: center;
}

.trail-title {
    font-family: var(--font-head);
    font-size: 1.3rem;
    margin: 0 0 5px 0;
    color: var(--dossora-ink);
}

.trail-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* STATES */

/* 1. Active Focus (Current Month) */
.trail-card.active-focus {
    border: 2px solid var(--dossora-orange);
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.2);
}

.trail-card.active-focus .trail-visual {
    background-color: #fff3e0; /* Warm Orange Tint */
}

/* Pulse Animation for Current Location */
.pulse-marker {
    position: absolute;
    width: 20px; height: 20px;
    background: var(--dossora-red);
    border-radius: 50%;
    border: 2px solid #fff;
    top: 20px; right: 20px;
    z-index: 10;
    box-shadow: 0 0 0 rgba(178, 34, 34, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(178, 34, 34, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(178, 34, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(178, 34, 34, 0); }
}

/* 2. Archived (Past) */
.trail-card.archived {
    background: #f9f9f9;
}
.trail-card.archived .trail-visual {
    filter: grayscale(80%);
}
.trail-status.completed {
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    color: #27ae60;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 3. Locked (Future) */
.trail-card.locked {
    opacity: 0.7;
    pointer-events: none; /* Can't click */
}

.trail-card.locked .lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lock-msg {
    font-family: var(--font-typewriter);
    font-weight: bold;
    background: #333;
    color: #fff;
    padding: 2px 8px;
    font-size: 0.8rem;
}

/* --- GUEST VIEW UPDATES --- */

/* Hero Section */
.guest-hero {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto 60px auto;
    padding: 40px 20px;
}

.guest-hero-content {
    flex: 1;
    text-align: left; /* Left align for professional feel */
}

.dossora-title-large {
    font-family: var(--font-head);
    font-size: 3.5rem;
    line-height: 1.1;
    color: var(--dossora-ink);
    margin: 10px 0 20px 0;
}

.highlight-text {
    color: var(--dossora-orange);
    font-family: var(--font-typewriter); /* Or maintain font-head if preferred */
    font-style: italic;
}

.hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.btn-large {
    padding: 18px 40px;
    font-size: 1.2rem;
    box-shadow: 0 6px 0 #d35400;
}

.btn-large-secondary {
    padding: 18px 40px;
    font-size: 1.2rem;
    box-shadow: 0 6px 0 #d35400;
}

.login-link {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--dossora-ink);
    text-decoration: none;
    margin-left: 10px;
}
.login-link strong { border-bottom: 1px dashed #333; }

/* Hero Visual (Polaroid Stack) */
.guest-hero-visual {
    flex: 1;
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
}

.polaroid-stack {
    position: relative;
    width: 300px;
    height: 300px;
}

.polaroid {
    background: #fff;
    padding: 10px 10px 40px 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: absolute;
    width: 400px;
    transition: transform 0.3s;
}

.polaroid img { width: 100%; height: auto; display: block; border: 1px solid #eee; }

.p1 { transform: rotate(-5deg); top: 0; left: 0; z-index: 1; }
.p2 { transform: rotate(10deg); top: 40px; left: 80px; z-index: 2; }

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.feature-card {
    background: #fff;
    border: 1px solid #d1cdbc; /* Matches theme border */
    padding: 30px 20px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--dossora-blue);
    margin: 0 0 10px 0;
}

.feature-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Overview Link */
.overview-link-container {
    text-align: center;
    font-family: var(--font-typewriter);
    color: #888;
    margin-bottom: 40px;
}

/* Responsive */
@media (max-width: 800px) {
    .guest-hero { flex-direction: column-reverse; text-align: center; padding-top: 20px; }
    .guest-hero-content { text-align: center; }
    .hero-actions { align-items: center; }
    .features-grid { grid-template-columns: 1fr; }
    .guest-hero-visual { height: 300px; margin-bottom: 20px; }
}

/* --- PHASE 10: ORIENTATION / TOUR PAGE --- */

/* 1. The GrimLove Intro */
.tour-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.character-cutout {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    overflow: hidden;
    background: #e74c3c; /* Fallback color for GrimLove */
    flex-shrink: 0;
}

.character-cutout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Optional: Scale up slightly to focus on face if needed */
    object-position: top center; 
}

/* UPDATED FRIENDLY SPEECH BUBBLE */
.speech-bubble {
    background: #fff;
    padding: 30px; /* More breathing room */
    border-radius: 15px; /* Softer, rounder corners */
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 2px solid var(--dossora-orange); /* Friendly Orange border */
    max-width: 500px;
}

/* The triangle pointer (Updated color) */
.speech-bubble::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--dossora-orange); /* Match border */
}

.bubble-title {
    font-family: var(--font-hand); /* Handwriting font feels more personal */
    font-size: 2rem;
    color: var(--dossora-blue); /* Trustworthy Blue */
    margin: 0 0 15px 0;
}

/* 2. The Tour Deck (Slideshow) */
.tour-deck {
    max-width: 1000px;
    margin: 0 auto;
}

/* Hide Radio Inputs */
input[name="tour"] { display: none; }

/* Tabs Navigation */
.tour-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.tour-tab {
    background: #e0e0e0;
    padding: 15px 25px;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    font-family: var(--font-head);
    color: #666;
    transition: all 0.2s;
    border: 1px solid #ccc;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tour-tab:hover { background: #eee; }

.tab-icon { font-size: 1.2rem; }

/* Active Tab Styling based on Radio Check */
#tab1:checked ~ .tour-nav label[for="tab1"],
#tab2:checked ~ .tour-nav label[for="tab2"],
#tab3:checked ~ .tour-nav label[for="tab3"] {
    background: #fff;
    color: var(--dossora-ink);
    border-top: 3px solid var(--dossora-orange);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    font-weight: bold;
    transform: translateY(1px); /* Connects to content below */
    z-index: 2;
}

/* Slides Container */
.tour-slides {
    background: #fff;
    border: 1px solid #d1cdbc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 0 0 5px 5px;
    position: relative;
    overflow: hidden;
    min-height: 400px; /* Ensure height consistency */
}

/* Individual Slide */
.slide-content {
    display: none; /* Hidden by default */
    padding: 50px;
    gap: 50px;
    animation: fadeIn 0.5s ease;
}

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

/* Show Slide based on Radio Check */
#tab1:checked ~ .tour-slides .slide-1,
#tab2:checked ~ .tour-slides .slide-2,
#tab3:checked ~ .tour-slides .slide-3 {
    display: flex;
}

/* Slide Layout */
.slide-visual { flex: 1; display: flex; justify-content: center; align-items: center; }
.slide-text { flex: 1.2; position: relative; }

.slide-text h3 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    margin: 0 0 10px 0;
    color: var(--dossora-ink);
}

.slide-lead {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--dossora-orange);
    margin-bottom: 20px;
    font-weight: bold;
}

.feature-list {
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.feature-list li {
    font-family: var(--font-typewriter);
    margin-bottom: 12px;
    font-size: 1rem;
    color: #555;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

/* Visual Cards inside Slides */
.visual-card {
    background: #fff;
    padding: 10px 10px 40px 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: rotate(0deg);
}
.visual-card.rotated { transform: rotate(-3deg); }
.visual-card.rotated-right { transform: rotate(3deg); }

/* 3. CTA Footer */
.tour-cta {
    text-align: center;
    margin-top: 60px;
    background: #2b2b2b;
    color: #fff;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.tour-cta h3 {
    font-family: var(--font-head);
    font-size: 2rem;
    margin-bottom: 10px;
    color: #fff;
}

/* Responsive */
@media (max-width: 800px) {
    .tour-intro { flex-direction: column; text-align: center; }
    .speech-bubble::after { 
        /* Move triangle to top for mobile vertical stack */
        left: 50%; top: -12px; transform: translateX(-50%); 
        border-right: 12px solid transparent; 
        border-left: 12px solid transparent; 
        border-bottom: 12px solid #333; 
        border-top: none;
    }
    
    .tour-nav { flex-direction: column; gap: 0; }
    .tour-tab { border-radius: 0; text-align: center; justify-content: center; }
    
    .slide-content { flex-direction: column; padding: 30px; }
    .slide-visual { margin-bottom: 20px; }
}

/* Feature Highlight Box inside Slides */
.feature-highlight-box {
    background: #fdfaf5;
    border-left: 4px solid var(--dossora-orange);
    padding: 15px;
    margin-top: 20px;
    font-size: 0.95rem;
    color: #555;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.feature-highlight-box strong {
    display: block;
    color: var(--dossora-ink);
    margin-bottom: 5px;
    font-family: var(--font-head);
}

.feature-highlight-box p {
    margin: 0;
}

/* --- PHASE 11: EXPEDITION MAP (TRAIL VIEW) --- */

.map-hero {
    text-align: center;
    background: #fff;
    padding: 30px;
    border: 1px solid #d1cdbc;
    margin-bottom: 50px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.map-stamp {
    display: inline-block;
    border: 2px solid var(--dossora-orange);
    color: var(--dossora-orange);
    padding: 4px 12px;
    font-family: var(--font-typewriter);
    font-weight: bold;
    transform: rotate(-2deg);
    margin-bottom: 10px;
}

.map-briefing {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: #555;
    max-width: 700px;
    margin: 15px auto 0;
}

/* Path Container */
.expedition-path {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
}

/* The Vertical Dashed Line */
.expedition-path::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px; /* Aligns with icons */
    width: 4px;
    background-image: linear-gradient(to bottom, #ccc 50%, transparent 50%);
    background-size: 4px 20px;
    z-index: 0;
}

/* Zone Markers */
.zone-marker {
    background: #d4b483; /* Earthy Tan */
    color: #fff;
    font-family: var(--font-typewriter);
    padding: 8px 15px;
    margin: 40px 0 20px 0;
    position: relative;
    z-index: 2;
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-left: 20px; /* Indent slightly */
}

.zone-marker.blue { background: #5d8aa8; }
.zone-marker.dark { background: #2c3e50; }
.zone-marker.gold { background: #d4ac0d; }

/* Map Node */
.map-node {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
    opacity: 1;
    transition: transform 0.2s;
}

.map-node.locked {
    opacity: 0.7;
}

/* The Icon Bubble on the Line */
.node-icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 4px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    z-index: 2; /* Sits on top of line */
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.map-node.completed .node-icon {
    border-color: #27ae60;
    background: #e8f8f5;
}

.map-node.active .node-icon {
    border-color: var(--dossora-orange);
    background: #fff8e1;
}

/* The Pulse Animation for Active Node */
.node-icon.pulse {
    animation: mapPulse 2s infinite;
}

@keyframes mapPulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(230, 126, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

/* The Content Card */
.node-card {
    flex-grow: 1;
    background: #fff;
    border: 1px solid #d1cdbc;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.05);
    position: relative;
}

.map-node.locked .node-card {
    background: #f9f9f9;
    border-style: dashed;
}

.check-mark {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Typography inside Node */
.area-name {
    display: block;
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: var(--dossora-ink);
    margin-bottom: 5px;
}

.quest-name {
    display: block;
    font-family: var(--font-typewriter);
    font-size: 0.85rem;
    color: var(--dossora-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.node-body {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.legend-text {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    color: #555;
    margin-bottom: 15px;
}

.task-box {
    background: #f4f4f4;
    padding: 10px;
    font-size: 0.9rem;
    border-left: 3px solid #ccc;
}

.task-box.active {
    background: #fff3e0;
    border-color: var(--dossora-orange);
    color: #d35400;
}

.task-box.completed {
    background: #e8f8f5;
    border-color: #27ae60;
    color: #27ae60;
}

.action-row {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* Locked Overlay */
.lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 2rem;
}

.reward-preview {
    margin-top: 10px;
    font-family: var(--font-typewriter);
    color: var(--dossora-red);
    font-weight: bold;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .expedition-path::before { left: 20px; } /* Shift line */
    .map-node { gap: 15px; }
    .node-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .zone-marker { margin-left: 0; }
}

/* --- PHASE 12: QUEST DETAIL PAGE (FIELD REPORT) --- */

.quest-file-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.file-id-tab {
    display: inline-block;
    background: #333;
    color: #fff;
    font-family: var(--font-typewriter);
    padding: 5px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.8rem;
}

.quest-title {
    font-family: var(--font-head);
    font-size: 3rem;
    color: var(--dossora-ink);
    margin: 0 0 10px 0;
}

.quest-meta {
    font-family: var(--font-typewriter);
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.meta-item { margin: 0 10px; }

.divider-dashed {
    border: 0;
    border-top: 2px dashed #ccc;
    max-width: 200px;
    margin: 0 auto;
}

/* Layout */
.quest-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.quest-visuals { flex: 1; }
.quest-mission { flex: 1.2; }

/* Visuals Column */
.polaroid-stack.single {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.lore-box {
    background: rgba(255,255,255,0.6);
    border-left: 4px solid #ccc;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.lore-box.character-highlight {
    background: #e8f8f5; /* Light Cyan */
    border-color: #2c5e4f;
}

.lore-title {
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Mission Column */
.mission-paper {
    background: #fff;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    border: 1px solid #d1cdbc;
    background-image: linear-gradient(#f9f9f9 1px, transparent 1px);
    background-size: 100% 30px; /* Notebook lines */
}

.mission-brief {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.task-directive {
    background: #fff;
    border: 2px dashed var(--dossora-orange);
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.directive-icon { font-size: 2.5rem; }

.directive-text h3 {
    margin: 0 0 5px 0;
    font-family: var(--font-head);
    color: var(--dossora-orange);
}

.video-placeholder {
    background: #000;
    color: #fff;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-typewriter);
    margin-bottom: 30px;
    border-radius: 4px;
    cursor: pointer;
}

/* Completion Zone */
.completion-zone {
    background: #fdf1dc; /* Match main BG */
    padding: 20px;
    text-align: center;
    border: 1px solid #d4b483;
}

/* Custom Checkbox */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: var(--font-hand);
    user-select: none;
    text-align: left;
    display: inline-block;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}

.checkmark {
    position: absolute;
    top: 0; left: 0;
    height: 25px; width: 25px;
    background-color: #fff;
    border: 2px solid #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--dossora-orange);
    border-color: var(--dossora-orange);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 9px; top: 5px;
    width: 5px; height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Mobile */
@media (max-width: 800px) {
    .quest-layout { flex-direction: column; }
    .quest-title { font-size: 2.2rem; }
}

/* --- PHASE 13: BASE CAMP & DIGITAL ASSETS --- */

.base-camp-section {
    background: #fdfaf5;
    border: 2px dashed #d1cdbc;
    padding: 30px;
    margin-bottom: 50px;
    position: relative;
    border-radius: 4px;
}

.camp-title {
    font-family: var(--font-typewriter);
    font-size: 1.5rem;
    color: var(--dossora-ink);
    text-align: center;
    margin: 0 0 5px 0;
    letter-spacing: 2px;
}

.camp-subtitle {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
}

.camp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.camp-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.camp-item:hover { transform: translateY(-3px); }

/* Visuals */
.camp-visual {
    width: 100px;
    height: 120px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Magazine Icon CSS */
.book-stack {
    perspective: 500px;
}
.book-cover-art {
    width: 80px; height: 110px;
    background: var(--dossora-blue);
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    font-family: sans-serif;
    padding-top: 20px;
    border-radius: 0 4px 4px 0;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    transform: rotateY(-15deg);
    z-index: 2;
    position: relative;
}
.book-spine {
    position: absolute;
    left: 8px; top: 5px;
    width: 15px; height: 110px;
    background: #122b40;
    transform: rotateY(-60deg);
}

/* Card Fan CSS */
.card-fan { position: relative; }
.card {
    width: 70px; height: 100px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.c1 { transform: rotate(-10deg) translateX(-10px); background: #eee; }
.c2 { transform: rotate(0deg); background: #fff; z-index: 2; }
.c3 { transform: rotate(10deg) translateX(10px); background: #ddd; }

.camp-details h3 {
    font-family: var(--font-head);
    font-size: 1.2rem;
    margin: 0 0 5px 0;
}

.camp-details p {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.3;
}

.text-link {
    font-size: 0.8rem;
    color: #666;
    text-decoration: underline;
    margin-left: 10px;
}

/* Modal Card Gallery */
.card-gallery-scroll {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    background: #333;
    border-radius: 8px;
    /* Custom Scrollbar styling if desired */
}

.trading-card {
    min-width: 200px;
    height: 300px;
    background: #fff;
    border-radius: 10px;
    color: #000;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-align: center;
    flex-shrink: 0; /* Prevent squishing */
}

.tc-inner {
    border: 2px solid var(--dossora-orange);
    height: 100%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fdfaf5;
}

.tc-img-placeholder {
    font-size: 4rem;
    margin-bottom: 10px;
}

.tc-quote {
    font-family: var(--font-hand);
    font-style: italic;
    color: #555;
    padding: 0 10px;
}

/* Mobile */
@media (max-width: 700px) {
    .camp-grid { grid-template-columns: 1fr; }
    .camp-item { flex-direction: column; text-align: center; }
}

/* --- PHASE 14: DIGITAL FIELD GUIDE (MAGAZINE) --- */

/* Hero Section */
.mag-hero {
    display: flex;
    gap: 40px;
    align-items: center;
    background: #fff;
    padding: 40px;
    border: 1px solid #d1cdbc;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.mag-cover-visual {
    width: 200px;
    height: 260px;
    background: var(--dossora-blue);
    position: relative;
    flex-shrink: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    border-radius: 4px 8px 8px 4px;
}

.mag-binder-rings {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    border-left: 2px dashed rgba(255,255,255,0.3);
}

.mag-art { text-align: center; padding: 20px; }
.mag-art h1 { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; margin-bottom: 10px; }
.mag-art p { font-family: var(--font-hand); font-size: 0.9rem; }
.mag-issue-badge {
    background: var(--dossora-orange);
    color: #fff;
    padding: 2px 8px;
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    display: inline-block;
    margin-top: 10px;
}

.mag-intro-text { flex-grow: 1; }

/* Navigation Tabs */
.mag-nav-tabs {
    margin-top: 30px;
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #ccc;
}

.mag-tab {
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 10px 20px;
    font-family: var(--font-head);
    color: #666;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: all 0.2s;
}

.mag-tab.active {
    background: var(--dossora-bg); /* Match page bg */
    border-color: #ccc;
    border-bottom: 2px solid var(--dossora-bg); /* Hides the line */
    margin-bottom: -2px;
    color: var(--dossora-ink);
    font-weight: bold;
}

/* Article Styles */
.mag-article {
    background: #fff;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
    border: 1px solid #e0e0e0;
}

.genre-tag {
    font-family: var(--font-typewriter);
    font-size: 0.7rem;
    background: #333;
    color: #fff;
    padding: 2px 6px;
    text-transform: uppercase;
}

.article-header h2 {
    font-family: var(--font-head);
    font-size: 2.5rem;
    margin-top: 10px;
    color: var(--dossora-ink);
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.article-body {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
}

.float-img-right {
    float: right;
    margin: 0 0 20px 30px;
    width: 300px;
}

.drop-cap {
    float: left;
    font-size: 3.5rem;
    line-height: 0.8;
    padding-right: 10px;
    padding-top: 5px;
    font-family: var(--font-head);
    color: var(--dossora-orange);
}

.interaction-box {
    background: #fdfaf5;
    border: 2px dashed #d1cdbc;
    padding: 20px;
    margin-top: 30px;
    clear: both;
}

.interaction-box h3 {
    font-family: var(--font-typewriter);
    font-size: 1rem;
    margin: 0 0 10px 0;
    color: var(--dossora-blue);
}

/* Craft Grid */
.craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.craft-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.craft-preview {
    background: #f0f0f0;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
}

.craft-preview h3 {
    font-family: var(--font-head);
    margin-top: 10px;
    font-size: 1.2rem;
}

.craft-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }

.materials-list {
    margin: 10px 0 15px 0;
    font-family: var(--font-typewriter);
    color: #888;
}

/* Coloring Grid */
.coloring-section { margin-top: 50px; }
.coloring-grid { display: flex; gap: 20px; justify-content: center; }
.coloring-sheet {
    text-align: center;
}
.sheet-preview {
    width: 150px; height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* Fun Grid */
.intel-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Responsive */
@media (max-width: 700px) {
    .mag-hero { flex-direction: column; text-align: center; }
    .float-img-right { float: none; width: 100%; margin: 20px 0; }
    .intel-grid-layout { grid-template-columns: 1fr; }
    .coloring-grid { flex-wrap: wrap; }
}

/* =========================================
   PHASE 13: DINO TALES (STORIES)
   ========================================= */

/* --- TALES INDEX GRID --- */
.tales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.tale-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tale-visual {
    background: #e8e6df; /* Soft shelf color */
    padding: 40px 0;
    display: flex;
    justify-content: center;
    border-bottom: 2px dashed #ccc;
    position: relative;
}

.tale-badge-new {
    position: absolute;
    top: 15px;
    right: -25px;
    background: var(--dossora-red);
    color: #fff;
    padding: 5px 30px;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(45deg);
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.tale-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tale-title {
    font-family: var(--font-head);
    font-size: 1.6rem;
    color: var(--dossora-ink);
    margin: 0 0 10px 0;
}

.tale-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1;
}

.tale-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-typewriter);
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 20px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}


/* --- STORY READER (OPEN BOOK) --- */
.open-book-container {
    max-width: 1000px;
    margin: 40px auto;
    background: #fdfaf5; /* Pages color */
    border-radius: 8px;
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.15),
        inset 0 0 0 1px #d1cdbc, /* Book edge */
        inset 0 0 0 6px #fff; /* White page border */
    display: flex;
    position: relative;
    min-height: 600px;
}

/* Spiral Binding Effect */
.book-binding-rings {
    display: none; /* Only visible on mobile, see media query */
}

/* The dark fold in the middle of the book */
.book-spine-fold {
    width: 60px;
    background: linear-gradient(
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.05) 40%, 
        rgba(0,0,0,0.15) 50%, 
        rgba(0,0,0,0.05) 60%, 
        rgba(0,0,0,0) 100%
    );
    flex-shrink: 0;
    border-left: 1px solid rgba(0,0,0,0.05);
    border-right: 1px solid rgba(0,0,0,0.05);
}

.book-page {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

/* Left Page (Image) */
.story-image-frame {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.story-heading {
    font-family: var(--font-head);
    font-size: 2.2rem;
    color: var(--dossora-ink);
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

/* --- UPDATED STORY READER CSS (Handles Long Text) --- */

.open-book-container {
    /* Keep existing settings, but ensure height is controlled */
    max-width: 1000px;
    margin: 40px auto;
    background: #fdfaf5;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), inset 0 0 0 1px #d1cdbc, inset 0 0 0 6px #fff;
    display: flex;
    position: relative;
    height: 650px; /* Lock the height of the book */
}

.story-text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent breaking the book bounds */
}

.story-body-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #333;
    /* Removed overflow-y and scrollbar styling */
}

.story-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    /* NEW: Adds a slow, smooth camera pan effect! */
    transition: transform 1.2s ease-in-out, object-position 1.2s ease-in-out; 
}

/* Add a fade-in animation for the text so it feels like a real page turn */
@keyframes textFadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.text-animating {
    animation: textFadeIn 0.5s ease forwards;
}

.image-crop-box {
    width: 100%;
    height: 100%;
    overflow: hidden; /* This is the magic line that cuts off the overflow */
    border-radius: 2px;
}

/* Custom Dossora Scrollbar for the text area */
.story-body-text::-webkit-scrollbar {
    width: 8px;
}
.story-body-text::-webkit-scrollbar-track {
    background: #f0eadd; /* Light paper color */
    border-radius: 4px;
    border: 1px solid #e3dec9;
}
.story-body-text::-webkit-scrollbar-thumb {
    background: var(--dossora-orange);
    border-radius: 4px;
}
.story-body-text::-webkit-scrollbar-thumb:hover {
    background: #cf6d18;
}

/* Ensure the image stays proportionate */
.story-image-frame {
    width: 100%;
    height: 100%; /* Take up the full locked height */
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-body-text .drop-cap {
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    padding-right: 10px;
    padding-top: 5px;
    font-family: var(--font-head);
    color: var(--dossora-orange);
}

/* Pagination Controls */
.story-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}

.page-counter {
    font-family: var(--font-typewriter);
    color: #888;
    font-size: 0.9rem;
}

.reading-progress-wrapper {
    max-width: 1000px;
    margin: 20px auto 60px auto;
}


/* --- RESPONSIVE MOBILE VIEW (STACKED PAGES) --- */
@media (max-width: 850px) {
    .open-book-container {
        flex-direction: column;
        border-radius: 4px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .book-spine-fold {
        display: none; /* Remove vertical spine */
    }

    /* Add horizontal spiral binding */
    .book-binding-rings {
        display: block;
        width: 100%;
        height: 30px;
        background-image: radial-gradient(circle, #333 4px, transparent 5px);
        background-size: 20px 30px;
        background-position: center;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #f0f0f0;
    }

    .book-page {
        padding: 30px 20px;
    }

    .left-page {
        padding-bottom: 10px;
    }

    .story-heading {
        font-size: 1.8rem;
    }
    
    .story-image-frame {
        height: 250px; /* Constrain image height on mobile */
    }
}

/* =========================================
   NEW DOSSIER MISSION LAYOUT (CLEAN)
   ========================================= */

/* FIX: Restores auto margins so the page is centered again */
.quest-container { max-width: 1100px; margin: 40px auto 60px auto; }

/* Top Zone: Briefing Room */
.quest-top-zone { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 50px; }
.quest-visuals { flex: 0 0 320px; margin: 0 auto; }
.quest-lore { flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center; }

/* FIX: Overrides the global 'position: absolute' from the guest page polaroid */
.quest-visuals .polaroid-stack { width: 100%; height: auto; }
.quest-visuals .polaroid { 
    position: relative; 
    width: 100%; 
    max-width: 320px;
    box-sizing: border-box; 
    transform: rotate(-2deg); 
    margin: 0 auto; 
}

/* Lore Text Styling */
.lore-body-text { font-family: var(--font-body); font-size: 1.1rem; margin: 10px 0 0 0; color: #444; line-height: 1.5; }
.lore-legend-text { font-family: var(--font-hand); font-size: 1.2rem; margin: 10px 0 0 0; }
.split-title { display: flex; justify-content: space-between; align-items: center; }
.read-together-tag { font-size: 0.7rem; color: var(--dossora-orange); font-weight: bold; }
.mission-polaroid-img { background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 4rem; height: 280px; overflow: hidden; }
.mission-polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-caption { text-transform: capitalize; }

/* Bottom Zone: Action Desk */
.quest-bottom-zone { margin-bottom: 60px; }
.quest-bottom-zone .mission-paper { width: 100%; padding: 40px; box-sizing: border-box; }

/* Task Directive */
.quest-bottom-zone .task-directive { border: none; background: transparent; padding: 0; box-shadow: none; margin-bottom: 40px; display: flex; gap: 20px; align-items: flex-start; }

/* FIX: Forces the star icon to stay full size even if the text is long */
.task-directive .directive-icon { font-size: 3.5rem; margin-top: -10px; flex-shrink: 0; }
.task-directive .directive-text h3 { font-size: 2rem; margin-bottom: 10px; }
.directive-desc { margin: 0; font-family: var(--font-typewriter); font-size: 1.3rem; line-height: 1.6; color: #333; }

/* --- THE NEW PROTOCOL TIMELINE --- */
.mission-protocol-wrapper { width: 100%; background: #fdfaf5; padding: 30px; border: 2px dashed #ccc; border-radius: 4px; }
.protocol-heading { color: var(--dossora-blue); margin: 0 0 25px 0; font-family: var(--font-head); font-size: 1.5rem; border-bottom: 2px solid #eee; padding-bottom: 10px; }

.protocol-timeline { display: flex; flex-direction: column; gap: 20px; position: relative; }

/* Vertical connecting line */
.protocol-timeline::before {
    content: '';
    position: absolute;
    top: 15px; bottom: 15px; left: 18px;
    width: 2px;
    background: #e0e0e0;
    z-index: 1;
}

.protocol-step { display: flex; gap: 20px; align-items: flex-start; position: relative; z-index: 2; }

.step-number {
    background: var(--dossora-orange); color: #fff; font-family: var(--font-head); font-size: 1.1rem;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #fdfaf5; /* Creates a cutout effect over the line */
}

.step-text {
    background: #fff; padding: 15px 20px; border: 1px solid #eee; border-radius: 4px;
    font-family: var(--font-body); font-size: 1.2rem; line-height: 1.5; color: #333;
    flex-grow: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Tear-Off Slip Completion Zone */
.quest-bottom-zone .completion-zone { margin-top: 50px; padding-top: 40px; border-top: 4px dashed #d1cdbc; background: transparent; text-align: center; border-bottom: none; border-left: none; border-right: none; }
.completion-heading { font-family: var(--font-head); font-size: 1.8rem; color: var(--dossora-ink); margin-top: 0; }
.completion-subtext { font-family: var(--font-hand); color: #666; margin-bottom: 25px; font-size: 1.4rem; }
.checkbox-wrapper { display: inline-block; background: #fff; padding: 20px 40px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.completion-checkbox { margin: 0; font-size: 1.3rem; color: var(--dossora-ink); }
.large-checkmark { top: -2px; height: 30px; width: 30px; }

/* Success States & Loaders */
.success-reveal { margin-top: 30px; animation: slideDown 0.5s ease; }
.success-msg { color: #27ae60; font-weight: bold; font-family: var(--font-typewriter); font-size: 1.1rem; margin-bottom: 15px; }
.earned-stamp-wrapper { margin-top: 30px; }
.large-stamp { display: inline-block; font-size: 2rem; padding: 10px 30px; }
.loader-screen, .error-screen { display: flex; flex-direction: column; gap: 15px; height: 100vh; align-items: center; justify-content: center; font-family: var(--font-typewriter); color: var(--dossora-orange); font-weight: bold; font-size: 1.2rem; }

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .quest-top-zone { gap: 20px; flex-direction: column; align-items: center; }
    .quest-bottom-zone .mission-paper { padding: 20px; }
    .quest-bottom-zone .task-directive { flex-direction: column; align-items: center; text-align: center; }
    .protocol-timeline::before { left: 15px; } /* Adjust line for mobile */
    .step-number { width: 32px; height: 32px; font-size: 1rem; }
    .step-text { padding: 12px 15px; font-size: 1.1rem; }
}

/* =========================================
   HYBRID STEP CARDS (ALTERNATING LAYOUT)
   ========================================= */

.mission-cards-wrapper {
    width: 100%;
    margin-top: 20px;
}

.step-cards-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between steps */
    margin-top: 30px;
}

.step-card {
    display: flex;
    flex-direction: row;
    background: #fdfaf5; /* Subtle paper background */
    border: 1px solid #d1cdbc;
    border-radius: 6px;
    padding: 25px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.05);
    gap: 30px;
    align-items: center;
}

/* Reverse layout for even-numbered steps */
.step-card.step-card-reverse {
    flex-direction: row-reverse;
}

/* Image Container */
.step-card-image {
    flex: 0 0 400px;
    border-radius: 4px;
    overflow: hidden;
    background: #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.step-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.step-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #bbb;
    background: #f4f4f4;
}

/* Content Container */
.step-card-content {
    flex: 1;
}

.step-card-badge {
    display: inline-block;
    background: var(--dossora-orange);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.step-card-heading {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: var(--dossora-blue);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.step-card-text {
    font-family: var(--font-body);
    font-size: 1.3rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .step-card, .step-card.step-card-reverse {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 20px;
    }
    
    .step-card-image {
        flex: 0 0 auto;
        width: 100%;
        height: 250px;
    }
}

.demo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2c3e50;
  font-family: var(--font-body);
}
.demo-card {
  background: #fff;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-top: 5px solid var(--dossora-orange);
}
.demo-title {
  font-family: var(--font-typewriter);
  color: #333;
  margin-bottom: 20px;
}
.demo-btn {
  display: inline-block;
  background: var(--dossora-orange);
  color: #fff;
  padding: 15px 30px;
  font-family: var(--font-head);
  font-size: 1.2rem;
  border-radius: 4px;
  margin-top: 20px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 0 #d35400;
  transition: all 0.2s;
}
.demo-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #d35400;
}