:root {
    --bg-color: #F9F8F4;
    --ink-color: #1E1E1C;
    --node-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --accent-color: #6366F1;
    --tooltip-color: #4F46E5;
    
    /* Flat Sketch Colors */
    --color-hw: #FFD1AA;
    --color-sw: #AEE1CD;
    --color-trends: #FFB8D0;
    --color-players: #D9C8FF;
    --color-why: #FBE49D;
    --color-root: #E5E5E5;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-color: #121210;
    --ink-color: #F9F8F4;
    --node-bg: #1E1E1C;
    --sidebar-bg: #1A1A18;
    --accent-color: #818CF8;
    --tooltip-color: #A5B4FC;

    --color-hw: #A67C52;
    --color-sw: #527A6B;
    --color-trends: #8C5266;
    --color-players: #66528C;
    --color-why: #8C7A52;
    --color-root: #404040;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-color);
    font-family: 'Outfit', sans-serif;
    color: var(--ink-color);
    transition: background-color var(--transition), color var(--transition);
}

/* Ambient Sketch Background Noise */
body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(var(--ink-color) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

#ui-layer {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 100;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#ui-layer * {
    pointer-events: auto;
}

h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.subtitle {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: #666;
    margin-top: -5px;
}

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

.btn-toggle {
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    color: var(--ink-color);
    box-shadow: 3px 3px 0px var(--ink-color);
    transition: transform 0.1s;
}

.btn-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--ink-color);
}

.hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Caveat', cursive;
    font-size: 24px;
    color: #888;
    z-index: 90;
    pointer-events: none;
}

footer {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 100;
    text-align: right;
    font-family: 'Caveat', cursive;
    font-size: 20px;
    color: #666;
    opacity: 0.9;
    pointer-events: auto;
}
footer a {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* The Interactive Canvas */
#viewport {
    width: 100vw;
    height: 100vh;
    position: relative;
    cursor: grab;
    z-index: 10;
}

#viewport:active {
    cursor: grabbing;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

#svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

#html-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* SVG Paths (The Road) */
.path {
    fill: none;
    stroke: var(--ink-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.3s ease,
                stroke-width 0.3s ease;
}

.path.dim { opacity: 0.28; }
.path.active-branch { opacity: 1; stroke-width: 3.5; }

/* Nodes */
.node {
    position: absolute;
    width: 260px;
    transform-origin: center center;
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    border-radius: 4px 15px 4px 15px / 15px 4px 15px 4px;
    box-shadow: 5px 5px 0px rgba(30, 30, 28, 0.1);
    padding: 20px;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.4s ease, 
                box-shadow 0.2s ease,
                background-color var(--transition);
}

.node.reveal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.node:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 7px 7px 0px rgba(30, 30, 28, 0.15);
}

.node.active {
    border-color: var(--accent-color);
    box-shadow: 5px 5px 0px var(--accent-color);
}

/* Depth-based visual hierarchy */
.node.depth-0 { width: 280px; }
.node.depth-0.reveal { transform: scale(1.05) translateY(0); }
.node.depth-0:hover { transform: scale(1.07) translateY(-2px); }
.node.depth-3.reveal { transform: scale(0.94) translateY(0); }
.node.depth-3:hover { transform: scale(0.96) translateY(-2px); }
.node.depth-4.reveal,
.node.depth-5.reveal { transform: scale(0.88) translateY(0); }
.node.depth-4:hover,
.node.depth-5:hover { transform: scale(0.9) translateY(-2px); }

.node .tag {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px 10px 4px 10px / 10px 4px 10px 4px;
    border: 1.5px solid var(--ink-color);
    margin-bottom: 10px;
    transition: background-color var(--transition);
}

.node h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.node p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--ink-color);
    opacity: 0.8;
}

/* Tooltip decoration */
.term {
    text-decoration: underline wavy var(--tooltip-color);
    text-underline-offset: 4px;
    cursor: help;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

/* Custom Tooltip Popup */
#custom-tooltip {
    position: fixed;
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 8px 8px 0px var(--ink-color);
    z-index: 1000;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), 
                transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

#custom-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#custom-tooltip::before {
    content: '💡';
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
}

/* Sidebar Base */
#sidebar {
    position: fixed;
    top: 0;
    right: -550px;
    width: 550px;
    height: 100vh;
    background: var(--sidebar-bg);
    border-left: 3px solid var(--ink-color);
    z-index: 200;
    padding: 60px 40px;
    overflow-y: auto;
    transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -20px 0 50px rgba(0,0,0,0.1);
}

#sidebar.open {
    right: 0;
}

.sidebar-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--ink-color);
    transition: transform 0.2s;
}

.sidebar-close:hover {
    transform: rotate(90deg);
    color: var(--accent-color);
}

/* Sidebar Enhancements */
.sidebar-content h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -1px;
    margin-bottom: 25px;
    color: var(--accent-color);
}

.sidebar-content p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 30px;
    color: var(--ink-color);
}

.quiz-option {
    display: block;
    width: 100%;
    padding: 15px 20px;
    margin-top: 12px;
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s;
    box-shadow: 4px 4px 0px var(--ink-color);
}

.quiz-option:hover {
    background: var(--accent-color);
    color: white;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--ink-color);
}

.quiz-option:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--ink-color);
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

#sidebar .resource-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--node-bg);
    color: var(--ink-color);
    text-decoration: none;
    border-radius: 12px;
    border: 2px solid var(--ink-color);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 5px 5px 0px var(--ink-color);
    transition: all 0.2s;
}

#sidebar .resource-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px var(--accent-color);
    border-color: var(--accent-color);
}

.quiz-container {
    background: var(--bg-color);
    border: 3px solid var(--ink-color);
    padding: 30px;
    border-radius: 20px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.quiz-container::after {
    content: '?';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 120px;
    font-weight: 900;
    opacity: 0.05;
    pointer-events: none;
}

/* Scrollbar for sidebar */
#sidebar::-webkit-scrollbar {
    width: 6px;
}
#sidebar::-webkit-scrollbar-thumb {
    background: var(--ink-color);
    border-radius: 3px;
}

/* Sidebar sections */
.sidebar-section {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(127, 127, 127, 0.25);
}
.sidebar-section:last-of-type { border-bottom: none; }
.section-label {
    font-family: 'Caveat', cursive;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.sidebar-section p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-color);
    opacity: 0.92;
}
.sidebar-section.use-case {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), transparent);
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px dashed var(--accent-color);
    border-bottom: 1.5px dashed var(--accent-color);
}
.sidebar-section.use-case .section-label { margin-bottom: 6px; }
.sidebar-section.use-case p { font-style: italic; }

.resource-arrow {
    margin-left: auto;
    font-weight: 700;
    opacity: 0.6;
    transition: transform 0.2s;
}
#sidebar .resource-link:hover .resource-arrow { transform: translateX(4px); opacity: 1; }

/* Quiz progress + states */
.quiz-progress {
    height: 6px;
    width: 100%;
    background: rgba(127, 127, 127, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 18px;
}
.quiz-progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.quiz-step-label {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--accent-color);
    margin-bottom: 4px;
}
.quiz-question { margin: 8px 0 12px 0; font-size: 16px; line-height: 1.5; }
.quiz-option.correct {
    background: #10B981 !important;
    color: white;
    border-color: #065F46 !important;
}
.quiz-option.wrong {
    background: #EF4444 !important;
    color: white;
    border-color: #7F1D1D !important;
}
.quiz-option:disabled { cursor: default; }
.quiz-feedback { margin-top: 14px; font-weight: 700; min-height: 22px; }
.quiz-score { font-size: 20px; margin: 10px 0 6px; }
.quiz-verdict { font-size: 15px; opacity: 0.85; margin-bottom: 14px; }
.quiz-restart { margin-top: 12px; text-align: center; }

/* Profile panel — floating left */
#profile-panel {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 120;
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 5px 5px 0px var(--ink-color);
    width: 200px;
    font-family: 'Outfit', sans-serif;
}
.profile-title {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--accent-color);
}
.profile-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-btn {
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-color);
    cursor: pointer;
    text-align: left;
    box-shadow: 3px 3px 0px var(--ink-color);
    transition: all 0.15s;
}
.profile-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--accent-color);
}
.profile-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--ink-color);
    box-shadow: 3px 3px 0px var(--ink-color);
}
.profile-hint {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 10px;
    opacity: 0.75;
    font-style: italic;
}

/* Profile highlight on nodes */
.node.profile-recommended {
    box-shadow: 5px 5px 0px var(--accent-color), 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.node.profile-recommended::before {
    content: '★';
    position: absolute;
    top: -12px;
    left: -10px;
    width: 26px; height: 26px;
    background: var(--accent-color);
    color: white;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid var(--ink-color);
    font-weight: 700;
}
.node.profile-dimmed { opacity: 0.35; }
.node.profile-dimmed:hover { opacity: 0.6; }

/* Ask-a-question button (lives inside #action-stack .action-row) */
#ask-btn {
    background: var(--node-bg);
    color: var(--ink-color);
    border: 2px solid var(--ink-color);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--ink-color);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
#ask-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px var(--accent-color);
}
#ask-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--ink-color);
}

/* Ask modal */
#ask-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}
#ask-modal.open { display: flex; }
.ask-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}
.ask-modal-card {
    position: relative;
    background: var(--sidebar-bg);
    border: 2.5px solid var(--ink-color);
    border-radius: 20px;
    padding: 36px 36px 28px;
    box-shadow: 10px 10px 0px var(--ink-color);
    width: min(540px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    animation: askPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes askPop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.ask-modal-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-color);
    letter-spacing: -0.5px;
}
.ask-modal-sub {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
}
.ask-modal-card label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.75;
}
.ask-modal-card input,
.ask-modal-card textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    border: 2px solid var(--ink-color);
    border-radius: 10px;
    background: var(--node-bg);
    color: var(--ink-color);
    box-sizing: border-box;
    resize: vertical;
}
.ask-modal-card input:focus,
.ask-modal-card textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.ask-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}
.ask-cancel, .ask-send {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid var(--ink-color);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ask-cancel {
    background: var(--node-bg);
    color: var(--ink-color);
    box-shadow: 3px 3px 0px var(--ink-color);
}
.ask-send {
    background: var(--accent-color);
    color: white;
    box-shadow: 3px 3px 0px var(--ink-color);
}
.ask-cancel:hover, .ask-send:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px var(--ink-color);
}
.ask-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--ink-color);
    line-height: 1;
    transition: transform 0.2s;
}
.ask-modal-close:hover { transform: rotate(90deg); color: var(--accent-color); }

/* Reset button — put in the top controls area */
#reset-btn { font-size: 14px; }

/* The Call to Action Pulse */
.pulse {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--ink-color);
    border-radius: 50%;
    animation: pulseAnim 2s infinite;
}

@keyframes pulseAnim {
    0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(129, 140, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}

/* === Action stack: enroll CTA + ask + share, grouped bottom-right === */
#action-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 130;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: min(380px, calc(100vw - 48px));
}

#enroll-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    border: 2px solid var(--ink-color);
    border-radius: 16px;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    text-align: left;
    box-shadow: 5px 5px 0px var(--ink-color);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: enrollGlow 3.2s ease-in-out infinite;
}
#enroll-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px var(--ink-color);
    animation-play-state: paused;
}
#enroll-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--ink-color);
}
#enroll-cta .enroll-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
#enroll-cta .enroll-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
#enroll-cta .enroll-line-1 {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 16px;
    opacity: 0.9;
}
#enroll-cta .enroll-line-2 {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
}
#enroll-cta .enroll-arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s;
}
#enroll-cta:hover .enroll-arrow { transform: translateX(4px); }

@keyframes enrollGlow {
    0%, 100% { box-shadow: 5px 5px 0px var(--ink-color); }
    50%      { box-shadow: 5px 5px 0px var(--ink-color), 0 0 0 6px rgba(99, 102, 241, 0.18); }
}

.action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Share button + dropdown (anchored off the wrapper, not the viewport) */
.share-wrap { position: relative; }
#share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--node-bg);
    color: var(--ink-color);
    border: 2px solid var(--ink-color);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--ink-color);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
#share-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px var(--accent-color);
}
#share-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--ink-color);
}
.share-dd {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--node-bg);
    border: 2px solid var(--ink-color);
    border-radius: 12px;
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    box-shadow: 5px 5px 0px var(--ink-color);
    z-index: 1;
}
.share-dd.open { display: flex; }
.share-opt {
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink-color);
}
.share-opt:hover { background: rgba(99, 102, 241, 0.12); }

/* === Footer: small, centered, never blocks clicks === */
.ep-footer {
    position: fixed;
    bottom: 4px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    padding: 4px 0;
    opacity: 0.45;
    z-index: 10;
    pointer-events: none;
}

/* === mobile responsive === */
@media (max-width: 720px) {
    #ui-layer { top: 14px; left: 14px; right: 14px; }
    .header h1 { font-size: 22px; }
    .subtitle { font-size: 18px; }
    .controls { margin-top: 6px; }
    .btn-toggle { padding: 6px 10px; font-size: 13px; }

    /* Hint moves up near the header so the bottom is reserved for actions */
    .hint {
        font-size: 16px;
        bottom: auto;
        top: 96px;
        left: 14px;
        right: 14px;
        transform: none;
        text-align: center;
    }

    /* Profile panel becomes a compact horizontal strip below the hint.
       Beginners can still pick a profile; it no longer hogs the side of the screen. */
    #profile-panel {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        padding: 8px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        top: 138px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .profile-title { font-size: 16px; margin: 0; flex-shrink: 0; }
    .profile-buttons { flex-direction: row; gap: 6px; flex: 1; flex-wrap: nowrap; }
    .profile-btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; box-shadow: 2px 2px 0px var(--ink-color); }
    .profile-hint { display: none; }

    /* Action stack becomes full width at the bottom */
    #action-stack {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
        align-items: stretch;
    }
    #enroll-cta {
        justify-content: center;
        padding: 12px 14px;
        border-radius: 14px;
    }
    #enroll-cta .enroll-line-1 { font-size: 14px; }
    #enroll-cta .enroll-line-2 { font-size: 14px; }

    .action-row {
        justify-content: space-between;
        gap: 8px;
    }
    #ask-btn, #share-btn {
        padding: 9px 14px;
        font-size: 13px;
    }

    /* Hide the copyright footer on mobile — the action stack owns the bottom area */
    .ep-footer { display: none; }

    .sidebar-close { font-size: 36px; padding: 4px 10px; }
    #sidebar { width: 100%; padding: 56px 22px 24px; }
}

@media (max-width: 420px) {
    .header h1 { font-size: 20px; }
    .hint { font-size: 14px; top: 92px; }
    #profile-panel { top: 130px; padding: 6px 8px; gap: 6px; }
    .profile-title { font-size: 14px; }
    .profile-btn { padding: 5px 8px; font-size: 11px; }

    /* Shrink share label to icon, keep ask label for clarity */
    #share-btn .share-label { display: none; }
    #share-btn { padding: 9px 12px; }
    #enroll-cta .enroll-icon { font-size: 18px; }
    #enroll-cta .enroll-line-1 { font-size: 13px; }
    #enroll-cta .enroll-line-2 { font-size: 13px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #enroll-cta { animation: none; }
}

/* === Footer link === */
.ep-footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    pointer-events: auto;
    font-weight: 600;
}
.ep-footer a:hover { color: var(--accent-color); }
.ep-footer { pointer-events: none; }
.ep-footer a { pointer-events: auto; }

/* === Sidebar-aware action stack ===
   When the sidebar is open, push the action stack left of the sidebar so
   nothing overlaps. The selector works because both elements are direct
   siblings in the document order (sidebar precedes action-stack). */
#action-stack {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    will-change: transform;
}
#sidebar.open ~ #action-stack {
    transform: translateX(-570px); /* sidebar width (550) + 20px breathing room */
}

/* Between mobile and desktop the 550px sidebar eats most of the viewport.
   Hide the action stack while it's open so the buttons never get squeezed
   off-screen or onto the sidebar. */
@media (max-width: 1100px) {
    #sidebar.open ~ #action-stack {
        transform: translateX(0);
        opacity: 0;
        pointer-events: none;
    }
}

/* === Teaser modal (mirrors free-mission acts modal) === */
.modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.open { display: flex; animation: modalFade 0.3s ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 30, 28, 0.55);
    backdrop-filter: blur(4px);
}
.modal-card {
    position: relative;
    background: var(--node-bg);
    color: var(--ink-color);
    border-radius: 18px;
    padding: 28px 30px;
    max-width: 540px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 2px solid var(--ink-color);
    box-shadow: 8px 8px 0px var(--ink-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-color);
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.2s;
}
.modal-close:hover { opacity: 1; transform: rotate(90deg); color: var(--accent-color); }
.modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Shared eyebrow label used inside the modal */
.acts-card .eyebrow {
    font-family: 'Caveat', cursive;
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: block;
}

/* Acts modal specifics */
.acts-modal .modal-card.acts-card {
    max-width: 980px;
    width: calc(100vw - 40px);
    padding: 28px 32px 24px;
}
.acts-head h2 {
    font-size: 30px;
    font-weight: 800;
    margin: 6px 0 8px;
    letter-spacing: -0.5px;
    color: var(--ink-color);
}
.acts-lede {
    color: var(--ink-color);
    opacity: 0.75;
    max-width: 640px;
    line-height: 1.55;
    font-size: 14.5px;
    margin: 0;
}
.acts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 6px;
}
@media (max-width: 820px) { .acts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .acts-grid { grid-template-columns: 1fr; } }
.act-tile {
    background: var(--bg-color);
    border: 1.5px solid var(--ink-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.act-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 3px 3px 0 var(--accent-color);
}
.act-tile.free { border-color: var(--accent-color); box-shadow: 2px 2px 0 var(--accent-color); }
.act-tile.locked { border-color: var(--ink-color); box-shadow: 2px 2px 0 var(--ink-color); }
.act-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.act-tile-num {
    font-family: 'Caveat', cursive;
    color: var(--tooltip-color);
    font-size: 18px;
    font-weight: 700;
}
.act-tile-state {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ink-color);
    color: var(--bg-color);
    font-weight: 700;
}
.act-tile.free .act-tile-state { background: var(--accent-color); color: #fff; }
.act-tile-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink-color);
}
.act-tile-ships {
    font-size: 12.5px;
    color: var(--ink-color);
    opacity: 0.85;
    line-height: 1.5;
}
.act-tile-label { font-weight: 700; opacity: 1; }

.acts-inventory {
    margin-top: 10px;
    border-top: 1px dashed rgba(127, 127, 127, 0.35);
    padding-top: 16px;
}
.acts-inventory .eyebrow { margin-bottom: 10px; }
.acts-inv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 820px) { .acts-inv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .acts-inv-grid { grid-template-columns: 1fr; } }
.inv-tile {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--bg-color);
    border: 1px solid rgba(127, 127, 127, 0.2);
    border-radius: 10px;
}
.inv-tile-icon {
    color: var(--accent-color);
    flex: 0 0 28px;
    line-height: 1;
}
.inv-tile-icon .inv-ic { width: 28px; height: 28px; }
.inv-tile-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-color);
}
.inv-tile-line {
    font-size: 12px;
    color: var(--ink-color);
    opacity: 0.75;
    line-height: 1.45;
    margin-top: 2px;
}

.acts-actions {
    margin-top: 16px;
    justify-content: space-between;
    align-items: center;
}

/* Modal buttons — match existing experience visual language */
.modal-card .btn-primary {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    border: 2px solid var(--ink-color);
    border-radius: 12px;
    padding: 12px 22px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--ink-color);
    transition: transform 0.15s, box-shadow 0.15s;
}
.modal-card .btn-primary:hover {
    transform: translate(-1px, -2px);
    box-shadow: 6px 6px 0px var(--ink-color);
}
.modal-card .btn-secondary {
    background: var(--node-bg);
    color: var(--ink-color);
    border: 2px solid var(--ink-color);
    border-radius: 12px;
    padding: 11px 20px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--ink-color);
    transition: transform 0.15s, box-shadow 0.15s;
}
.modal-card .btn-secondary:hover {
    transform: translate(-1px, -2px);
    box-shadow: 5px 5px 0px var(--accent-color);
}

/* Mobile tweaks for the teaser modal */
@media (max-width: 720px) {
    .acts-modal .modal-card.acts-card {
        padding: 24px 18px 18px;
    }
    .acts-head h2 { font-size: 24px; }
    .acts-lede { font-size: 13.5px; }
    .acts-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .modal-card .btn-primary,
    .modal-card .btn-secondary { width: 100%; text-align: center; }

    /* On mobile the sidebar is full-width — hide the action stack entirely
       when it's open rather than trying to squeeze the buttons beside it. */
    #sidebar.open ~ #action-stack {
        transform: translateX(0);
        opacity: 0;
        pointer-events: none;
    }
}