/* ── Neuro Navigator — Premium Medical Edition ────────────────────────────
   White hero, warm off-white page, near-black anatomical viewer,
   deep teal / warm gold accent palette.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.nn-page {
    background: #f5f4f0;
    min-height: 60vh;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.nn-hero {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #0a1628;
    padding: 72px 24px 68px;
    text-align: center;
    border-bottom: 1px solid #e6e2d9;
}
/* Subtle anatomical grid */
.nn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,109,119,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,109,119,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
/* Soft radial glows */
.nn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 12% 50%, rgba(0,109,119,.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 88% 30%, rgba(201,168,76,.05) 0%, transparent 60%);
    pointer-events: none;
}
.nn-hero > * { position: relative; z-index: 1; }

.nn-hero .eyebrow {
    display: inline-block;
    background: rgba(0,109,119,.08);
    border: 1px solid rgba(0,109,119,.22);
    color: #006d77;
    letter-spacing: .16em;
    font-size: .67rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    margin: 0 0 22px;
}
.nn-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -.035em;
    color: #0a1628;
    line-height: 1.08;
}
.nn-hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, #006d77 0%, #0d9488 60%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nn-hero .nn-tagline {
    color: #4d6282;
    font-size: 1.08rem;
    margin: 0 0 26px;
    font-style: italic;
    letter-spacing: .01em;
}
.nn-hero .nn-intro {
    max-width: 640px;
    margin: 0 auto;
    color: #5a6a7e;
    font-size: .91rem;
    line-height: 1.82;
}

/* ── Mode selector ───────────────────────────────────────────────────────── */
.nn-mode-wrap {
    background: #f5f4f0;
    padding: 26px 24px 0;
    display: flex;
    justify-content: center;
}
.nn-mode-bar {
    background: #ffffff;
    border: 1px solid #dedad2;
    border-radius: 14px;
    padding: 5px;
    display: inline-flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    max-width: 100%;
}
.nn-mode-bar::-webkit-scrollbar { display: none; }
.nn-mode-btn {
    background: none;
    border: none;
    border-radius: 10px;
    color: #6b7280;
    font-size: .77rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}
.nn-mode-btn:hover {
    background: #f0faf9;
    color: #006d77;
}
.nn-mode-btn.active {
    background: linear-gradient(135deg, #006d77 0%, #0d9488 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,109,119,.32);
}

/* ── Main game layout ────────────────────────────────────────────────────── */
.nn-game {
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 20px 68px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .nn-game { grid-template-columns: 1fr; }
}

/* ── Diagram panel ───────────────────────────────────────────────────────── */
.nn-diagram-panel {
    background: #0c1117;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 8px 36px rgba(0,0,0,.24),
        0 2px 8px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.04);
}
.nn-diagram-title {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,109,119,.07);
}
.nn-diagram-title span {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #4dc8c0;
}
.nn-diagram-title small {
    color: #3a4d5e;
    font-size: .64rem;
    margin-left: auto;
    letter-spacing: .05em;
}
.nn-svg-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.nn-svg-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG anatomy elements */
.nn-region { cursor: pointer; outline: none; }
.nn-region:focus-visible .nn-region-fill {
    outline: none;
    stroke: #4dc8c0 !important;
    stroke-width: 2 !important;
}
.nn-region-fill {
    transition: fill .22s, filter .22s, stroke .22s, stroke-width .22s;
}
.nn-region:not(.disabled):hover .nn-region-fill {
    filter: brightness(1.4) drop-shadow(0 0 9px rgba(77,200,192,.38));
}
.nn-region.correct .nn-region-fill {
    fill: #059669 !important;
    filter: drop-shadow(0 0 14px rgba(5,150,105,.65)) drop-shadow(0 0 4px rgba(5,150,105,.4));
}
.nn-region.incorrect .nn-region-fill {
    fill: #dc2626 !important;
    filter: drop-shadow(0 0 12px rgba(220,38,38,.55));
}
.nn-region.disabled { pointer-events: none; opacity: .5; }

/* Signal dot */
.nn-signal {
    fill: #e0fffd;
    filter: drop-shadow(0 0 6px #4dc8c0) drop-shadow(0 0 18px rgba(77,200,192,.55));
    pointer-events: none;
}

/* Pathway lines — stroke-width in SVG user units scaled for 1000-unit viewBox */
.nn-pathway {
    fill: none;
    stroke: rgba(13,148,136,.35);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s, opacity .3s, stroke-width .3s;
}
.nn-pathway.active {
    stroke: #0d9488;
    opacity: 1;
    stroke-width: 7;
    filter: drop-shadow(0 0 4px rgba(13,148,136,.55));
    animation: nn-glow-pulse 2.2s ease-in-out infinite;
}
@keyframes nn-glow-pulse {
    0%, 100% { opacity: .72; }
    50%       { opacity: 1;   }
}

/* SVG text — font-size in SVG user units scaled for 1000-unit viewBox.
   White stroke creates readable halo on both light and dark PNG backgrounds. */
.nn-label-text {
    fill: #0d9488;
    stroke: rgba(255,255,255,.92);
    stroke-width: 8px;
    paint-order: stroke fill;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .03em;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}
.nn-sublabel-text {
    fill: #006d77;
    stroke: rgba(255,255,255,.88);
    stroke-width: 6px;
    paint-order: stroke fill;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
    letter-spacing: .03em;
}

/* ── Side panel ──────────────────────────────────────────────────────────── */
.nn-side-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Progress */
.nn-progress-bar {
    background: #ffffff;
    border: 1px solid #dedad2;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.nn-progress-label {
    font-size: .64rem;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nn-progress-track {
    flex: 1;
    height: 6px;
    background: #ede9df;
    border-radius: 4px;
    overflow: hidden;
}
.nn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #006d77, #0d9488);
    border-radius: 4px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.nn-progress-count {
    font-size: .78rem;
    color: #006d77;
    font-weight: 700;
    white-space: nowrap;
}

/* Score dots */
.nn-score-dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 0 2px;
}
.nn-score-dot {
    flex: 1;
    min-width: 16px;
    max-width: 32px;
    height: 5px;
    border-radius: 3px;
    background: #e6e2d9;
    transition: background .3s, transform .2s;
}
.nn-score-dot.correct   { background: #059669; }
.nn-score-dot.incorrect { background: #dc2626; }

/* Scenario card */
.nn-mission-card {
    background: #ffffff;
    border: 1px solid #dedad2;
    border-radius: 18px;
    padding: 26px 24px 22px;
    box-shadow: 0 2px 14px rgba(0,0,0,.065);
    position: relative;
    overflow: hidden;
}
.nn-mission-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, #006d77 0%, #0d9488 100%);
    border-radius: 4px 0 0 4px;
}
.nn-mission-eyebrow {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #006d77;
    margin: 0 0 8px;
}
.nn-mission-mode-badge {
    display: inline-flex;
    align-items: center;
    background: #f0faf9;
    border: 1px solid #99d4d0;
    color: #005f68;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.nn-mission-title {
    font-size: 1.06rem;
    color: #0a1628;
    margin: 0 0 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.nn-mission-prompt {
    font-size: .93rem;
    line-height: 1.68;
    color: #2d3748;
    margin: 0 0 14px;
}
.nn-mission-hint {
    font-size: .8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #f0ede6;
}

/* Feedback card */
.nn-feedback {
    border-radius: 16px;
    padding: 0;
    display: none;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(0,0,0,.09);
    animation: nn-fade-up .3s cubic-bezier(.4,0,.2,1);
}
.nn-feedback.visible { display: block; }
.nn-feedback.correct  { background: #fff; border: 1px solid #6ee7b7; }
.nn-feedback.incorrect { background: #fff; border: 1px solid #fca5a5; }
@keyframes nn-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nn-feedback-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f5f2ee;
}
.nn-feedback-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.nn-feedback.correct .nn-feedback-icon {
    background: linear-gradient(135deg, #059669, #34d399);
    color: #fff;
    box-shadow: 0 2px 8px rgba(5,150,105,.3);
}
.nn-feedback.incorrect .nn-feedback-icon {
    background: linear-gradient(135deg, #dc2626, #f87171);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,.25);
}
.nn-feedback-title { font-weight: 700; font-size: .9rem; }
.nn-feedback.correct .nn-feedback-title  { color: #064e3b; }
.nn-feedback.incorrect .nn-feedback-title { color: #7f1d1d; }
.nn-feedback-body {
    font-size: .87rem;
    line-height: 1.72;
    color: #374151;
    padding: 14px 18px;
}

/* Controls */
.nn-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.nn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .18s, box-shadow .18s, transform .1s, opacity .2s;
    text-decoration: none;
    letter-spacing: .02em;
    line-height: 1;
}
.nn-btn:active { transform: scale(.97); }
.nn-btn.primary {
    background: linear-gradient(135deg, #006d77 0%, #0d9488 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,109,119,.28);
}
.nn-btn.primary:hover {
    background: linear-gradient(135deg, #005a63 0%, #0b7a72 100%);
    box-shadow: 0 4px 18px rgba(0,109,119,.38);
}
.nn-btn.secondary {
    background: #ffffff;
    color: #006d77;
    border: 1.5px solid #99d4d0;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.nn-btn.secondary:hover { background: #f0faf9; border-color: #4dc8c0; }
.nn-btn:disabled, .nn-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Disclaimer */
.nn-disclaimer {
    background: #f9f8f4;
    border: 1px solid #dedad2;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .74rem;
    color: #9ca3af;
    line-height: 1.68;
}
.nn-disclaimer strong { color: #6b7280; }

/* Completion panel */
.nn-complete-panel {
    background: #ffffff;
    border: 1px solid #dedad2;
    border-radius: 18px;
    padding: 42px 28px;
    text-align: center;
    display: none;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    animation: nn-fade-up .35s cubic-bezier(.4,0,.2,1);
}
.nn-complete-panel.visible { display: block; }
.nn-complete-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006d77 0%, #0d9488 100%);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.7rem;
    color: #fff;
    box-shadow: 0 6px 22px rgba(0,109,119,.32);
}
.nn-complete-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0a1628;
    margin-bottom: 8px;
    letter-spacing: -.02em;
}
.nn-complete-body {
    color: #6b7280;
    font-size: .92rem;
    line-height: 1.68;
    margin-bottom: 22px;
}

/* Signal animation */
.nn-signal-animating {
    animation: nn-signal-pulse .85s ease-in-out infinite alternate;
}
@keyframes nn-signal-pulse {
    from { filter: drop-shadow(0 0 4px #4dc8c0) drop-shadow(0 0 12px rgba(77,200,192,.4)); }
    to   { filter: drop-shadow(0 0 10px #4dc8c0) drop-shadow(0 0 26px rgba(77,200,192,.8)); }
}