/* ============================================================
   Bella Ciao · controlV3 — Mobile-first Café/HQ aesthetic
   Persona: 25-40 mobile-first Coinmania users
   Style: La Casa de Papel warm-dark, illustrated, "ma" rhythm
   ============================================================ */

:root {
    /* Café/HQ palette */
    --bg-deep:      #0f0a07;
    --bg-warm:      #1a1410;
    --bg-card:      #261c15;
    --bg-card-hi:   #2e2218;

    /* Cream + gold */
    --text:         #f5e9d4;
    --text-soft:    #c8b89a;
    --text-mute:    #8a7860;
    --gold:         #d4a857;
    --gold-soft:    #a47e3a;

    /* La Casa red accent */
    --red:          #b8442e;
    --red-soft:     #7a2a1c;

    /* Category stream colors (6) */
    --cat-market:   #ff8a3d;  /* 📊 Tokio   orange  */
    --cat-whales:   #5ce5ff;  /* 🐋 Helsinki cyan   */
    --cat-social:   #ff6cb0;  /* 👥 Nairobi  pink   */
    --cat-news:     #b18cff;  /* 📰 Berlin   purple */
    --cat-macro:    #ffd24a;  /* 💧 Denver   yellow */
    --cat-risk:     #ff5560;  /* ⚠️ Marseille red   */

    /* Verdict colors */
    --verdict-bull: #3df58a;
    --verdict-bear: #ff5560;
    --verdict-neut: #d4a857;
    --verdict-watch:#ffd24a;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;

    --shadow-soft: 0 4px 18px rgba(0,0,0,0.35);
    --shadow-card: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);

    --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg-deep);
    color: var(--text);
    font-family: "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    background:
        radial-gradient(ellipse at top center, rgba(212,168,87,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(184,68,46,0.05) 0%, transparent 50%),
        var(--bg-deep);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

button, a { font-family: inherit; }

/* ===================== TOPBAR ===================== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(15,10,7,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212,168,87,0.12);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(212,168,87,0.2);
    background: rgba(38,28,21,0.65);
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s var(--easing);
}

.topbar-btn:hover, .topbar-btn:active {
    background: rgba(212,168,87,0.15);
    color: var(--gold);
    border-color: var(--gold);
}

.topbar-btn.expert {
    background: rgba(184,68,46,0.18);
    border-color: rgba(184,68,46,0.4);
}
.topbar-btn.expert:hover {
    background: rgba(184,68,46,0.35);
    color: var(--text);
    border-color: var(--red);
}

.topbar-title {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
    min-width: 0;
}
.topbar-title strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
}
.topbar-title span {
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ===================== STAGE / ORBIT ===================== */

.stage {
    padding: 8px 14px 24px;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.orbit {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 480;
    max-height: 60vh;
    /* Background "café" ambience */
    background:
        radial-gradient(circle at 50% 22%, rgba(58,140,106,0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 70%, rgba(212,168,87,0.04) 0%, transparent 60%),
        linear-gradient(180deg, rgba(38,28,21,0.4) 0%, rgba(15,10,7,0.85) 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(212,168,87,0.08);
    box-shadow: var(--shadow-card);
}

.streams {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Earth body + glow */
@keyframes earth-spin {
    from { transform: translate(200px, 100px) rotate(0deg); }
    to   { transform: translate(200px, 100px) rotate(360deg); }
}
@keyframes earth-breath {
    0%, 100% { opacity: 0.5; transform: scale(1); transform-origin: 200px 100px; }
    50%      { opacity: 0.75; transform: scale(1.08); transform-origin: 200px 100px; }
}
.earth-group {
    animation: earth-spin 90s linear infinite;
    transform-origin: 0 0;
    transform-box: fill-box;
}
.earth-halo {
    animation: earth-breath 8s ease-in-out infinite;
    transform-box: fill-box;
}

.earth-anchors .anchor {
    fill: var(--text);
    opacity: 0.7;
}
@keyframes anchor-blink {
    0%, 60%, 100% { opacity: 0.4; r: 1.8; }
    70%          { opacity: 1;   r: 2.5; }
}
.earth-anchors .a1 { animation: anchor-blink 7s ease-in-out infinite; }
.earth-anchors .a2 { animation: anchor-blink 9s ease-in-out -1s infinite; }
.earth-anchors .a3 { animation: anchor-blink 11s ease-in-out -2.5s infinite; }
.earth-anchors .a4 { animation: anchor-blink 8s ease-in-out -3s infinite; }
.earth-anchors .a5 { animation: anchor-blink 10s ease-in-out -4s infinite; }
.earth-anchors .a6 { animation: anchor-blink 12s ease-in-out -1.5s infinite; }

/* === Streams: ambient slow flow === */

.stream {
    stroke-dasharray: 6 14;
    stroke-dashoffset: 0;
    opacity: 0.32;
    transition: opacity 0.6s var(--easing), stroke-width 0.5s var(--easing);
    filter: drop-shadow(0 0 4px currentColor);
}
@keyframes flow {
    to { stroke-dashoffset: -200; }
}
.stream.s-market { stroke: var(--cat-market); animation: flow 9s linear infinite; }
.stream.s-whales { stroke: var(--cat-whales); animation: flow 14s linear infinite; }
.stream.s-social { stroke: var(--cat-social); animation: flow 7s linear infinite; }
.stream.s-news   { stroke: var(--cat-news);   animation: flow 16s linear infinite; }
.stream.s-macro  { stroke: var(--cat-macro);  animation: flow 18s linear infinite; }
.stream.s-risk   { stroke: var(--cat-risk);   animation: flow 11s linear infinite; }

/* Pulse state — used for ~1.5s when verdict changes */
.stream.pulse {
    opacity: 0.95;
    stroke-width: 3.5;
}

/* === Particles travelling along streams === */

.particle {
    opacity: 0.85;
    filter: drop-shadow(0 0 5px currentColor);
}
.particle.p-market { fill: var(--cat-market); color: var(--cat-market); }
.particle.p-whales { fill: var(--cat-whales); color: var(--cat-whales); }
.particle.p-social { fill: var(--cat-social); color: var(--cat-social); }
.particle.p-news   { fill: var(--cat-news);   color: var(--cat-news); }
.particle.p-macro  { fill: var(--cat-macro);  color: var(--cat-macro); }
.particle.p-risk   { fill: var(--cat-risk);   color: var(--cat-risk); }

.earth-label {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ===================== AGENT GRID ===================== */

.agents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent {
    position: relative;
    background: linear-gradient(180deg, var(--bg-card-hi) 0%, var(--bg-card) 100%);
    border: 1px solid rgba(212,168,87,0.14);
    border-radius: var(--radius);
    padding: 10px 10px 10px 64px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    min-height: 76px;
    transition: transform 0.18s var(--easing), border-color 0.2s var(--easing), background 0.2s var(--easing);
    box-shadow: var(--shadow-card);
    -webkit-tap-highlight-color: transparent;
}

.agent:hover { border-color: rgba(212,168,87,0.35); }
.agent:active { transform: scale(0.985); }

.agent[data-cat="market"]    { border-left: 3px solid var(--cat-market); }
.agent[data-cat="whales"]    { border-left: 3px solid var(--cat-whales); }
.agent[data-cat="social"]    { border-left: 3px solid var(--cat-social); }
.agent[data-cat="news"]      { border-left: 3px solid var(--cat-news); }
.agent[data-cat="macro"]     { border-left: 3px solid var(--cat-macro); }
.agent[data-cat="risk"]      { border-left: 3px solid var(--cat-risk); }

.agent-portrait {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 48px;
    height: 60px;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    border: 1px solid rgba(212,168,87,0.2);
    background: var(--bg-deep);
}

.agent-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 26px;
}
.agent-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text);
}
.agent-domain {
    font-size: 11px;
    color: var(--text-mute);
    line-height: 1.3;
}

.agent-verdict {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    background: rgba(15,10,7,0.6);
    color: var(--verdict-neut);
    border: 1px solid currentColor;
}
.agent-verdict[data-signal="bull"]    { color: var(--verdict-bull); }
.agent-verdict[data-signal="bear"]    { color: var(--verdict-bear); }
.agent-verdict[data-signal="neutral"] { color: var(--verdict-neut); }
.agent-verdict[data-signal="watch"]   { color: var(--verdict-watch); }

/* Idle pulse on agent cards (subtle, staggered) */
@keyframes agent-idle {
    0%, 100% { box-shadow: var(--shadow-card); }
    50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,168,87,0.18) inset, 0 0 12px rgba(212,168,87,0.05); }
}
.agent { animation: agent-idle 6s ease-in-out infinite; }
.agent[data-agent="tokio"]     { animation-delay: 0s; }
.agent[data-agent="helsinki"]  { animation-delay: -1s; }
.agent[data-agent="nairobi"]   { animation-delay: -2s; }
.agent[data-agent="berlin"]    { animation-delay: -3s; }
.agent[data-agent="denver"]    { animation-delay: -4s; }
.agent[data-agent="marseille"] { animation-delay: -5s; }

/* When agent has a fresh pulse */
.agent.event {
    border-color: currentColor;
}

/* ===================== PROFESSOR BAR ===================== */

.professor {
    display: grid;
    grid-template-columns: 56px 1fr 36px;
    gap: 12px;
    align-items: center;
    padding: 12px 12px 12px 12px;
    background: linear-gradient(135deg, rgba(184,68,46,0.16) 0%, rgba(212,168,87,0.10) 100%);
    border: 1px solid rgba(212,168,87,0.25);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.prof-portrait {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid var(--gold);
    background: var(--bg-deep);
}

.prof-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.prof-label {
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    font-weight: 600;
}
.prof-verdict-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prof-detail {
    font-size: 11px;
    color: var(--text-mute);
    font-family: "JetBrains Mono", monospace;
}

.prof-why {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: rgba(212,168,87,0.12);
    color: var(--gold);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s var(--easing);
}
.prof-why:hover, .prof-why:active {
    background: var(--gold);
    color: var(--bg-deep);
    transform: translateX(2px);
}

.disclaimer {
    text-align: center;
    font-size: 10.5px;
    color: var(--text-mute);
    padding: 6px 12px 0;
    letter-spacing: 0.3px;
}

/* ===================== STORY MODAL ===================== */

.story {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10,7,5,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    animation: story-fade-in 0.28s var(--easing);
}
@keyframes story-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.story[hidden] { display: none !important; }

.story-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(212,168,87,0.18);
    background: rgba(15,10,7,0.7);
}

.story-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(212,168,87,0.25);
    background: rgba(38,28,21,0.7);
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.story-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.story-thumbs::-webkit-scrollbar { display: none; }

.story-thumb {
    flex-shrink: 0;
    width: 38px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: var(--bg-card);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s, transform 0.2s;
}
.story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    opacity: 0.55;
    transition: opacity 0.2s;
}
.story-thumb[aria-selected="true"] { border-color: var(--gold); }
.story-thumb[aria-selected="true"] img { opacity: 1; }

.story-body {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.story-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 1;
}
.story-portrait-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(15,10,7,0.05) 0%, rgba(15,10,7,0.35) 45%, rgba(15,10,7,0.92) 100%);
}

.story-overlay {
    position: relative;
    z-index: 3;
    padding: 18px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.story-domain {
    font-size: 11px;
    color: var(--text-soft);
    letter-spacing: 0.6px;
    background: rgba(15,10,7,0.55);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(212,168,87,0.2);
}
.story-name {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text);
    text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.story-verdict {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(15,10,7,0.7);
    border: 1px solid currentColor;
}
.story-verdict[data-signal="bull"]    { color: var(--verdict-bull); }
.story-verdict[data-signal="bear"]    { color: var(--verdict-bear); }
.story-verdict[data-signal="neutral"] { color: var(--verdict-neut); }
.story-verdict[data-signal="watch"]   { color: var(--verdict-watch); }

.story-bubble {
    position: relative;
    z-index: 3;
    margin: auto 18px 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--bg-card-hi) 0%, var(--bg-card) 100%);
    border: 1px solid rgba(212,168,87,0.22);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    min-height: 80px;
}
.story-bubble-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    display: inline;
}
.story-bubble-text::after {
    content: "▌";
    color: var(--gold);
    opacity: 0;
    animation: cursor-blink 1.1s steps(2) infinite;
    margin-left: 2px;
}
.story-bubble.typing .story-bubble-text::after { opacity: 1; }
@keyframes cursor-blink {
    50% { opacity: 0; }
}

.story-actions {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 12px 14px 18px;
}

.action {
    padding: 10px 6px;
    background: rgba(38,28,21,0.85);
    border: 1px solid rgba(212,168,87,0.25);
    border-radius: 10px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s var(--easing);
    -webkit-tap-highlight-color: transparent;
    line-height: 1.3;
}
.action:hover, .action:active {
    background: rgba(212,168,87,0.18);
    border-color: var(--gold);
    color: var(--gold);
}

.story-hint {
    position: relative;
    z-index: 3;
    text-align: center;
    padding-bottom: 14px;
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 4px;
    opacity: 0.5;
}

/* ===================== LESSON BOTTOM SHEET ===================== */

.lesson {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: var(--bg-warm);
    border-top: 1px solid rgba(212,168,87,0.28);
    border-radius: 22px 22px 0 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -12px 36px rgba(0,0,0,0.55);
    animation: sheet-slide-up 0.32s var(--easing);
}
.lesson[hidden] { display: none !important; }
@keyframes sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.lesson-head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(212,168,87,0.14);
    position: relative;
}
.lesson-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(212,168,87,0.35);
}
.lesson-title {
    grid-column: 2;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-top: 4px;
}
.lesson-close {
    grid-column: 3;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(212,168,87,0.2);
    background: rgba(38,28,21,0.7);
    color: var(--text-soft);
    font-size: 16px;
    cursor: pointer;
    margin-top: 4px;
}

.lesson-body {
    overflow-y: auto;
    padding: 16px 18px 28px;
    -webkit-overflow-scrolling: touch;
}
.lesson-body h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--gold);
    font-weight: 700;
}
.lesson-body h4 {
    font-size: 13px;
    margin-top: 18px;
    margin-bottom: 6px;
    color: var(--text-soft);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.lesson-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 10px;
}
.lesson-body em {
    color: var(--gold);
    font-style: normal;
    font-weight: 600;
}

.lesson-quiz {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(212,168,87,0.18);
    border-radius: 12px;
}
.lesson-quiz-q {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.lesson-quiz-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: var(--bg-card-hi);
    border: 1px solid rgba(212,168,87,0.18);
    border-radius: 8px;
    color: var(--text);
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.18s var(--easing);
}
.lesson-quiz-opt:hover { border-color: var(--gold); }
.lesson-quiz-opt.right { background: rgba(61,245,138,0.18); border-color: var(--verdict-bull); color: var(--verdict-bull); }
.lesson-quiz-opt.wrong { background: rgba(255,85,96,0.14); border-color: var(--verdict-bear); color: var(--verdict-bear); }
.lesson-quiz-feedback {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(212,168,87,0.1);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
}

/* ===================== RESPONSIVE: TABLET / DESKTOP ===================== */

@media (min-width: 720px) {
    .stage {
        max-width: 720px;
        padding: 16px 20px 32px;
        gap: 18px;
    }
    .orbit {
        aspect-ratio: 720 / 380;
        max-height: 380px;
    }
    .agents {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .agent {
        min-height: 90px;
        padding-left: 76px;
    }
    .agent-portrait {
        width: 60px;
        height: 76px;
    }
    .agent-name { font-size: 15px; }
    .agent-domain { font-size: 12px; }
}

@media (min-width: 1100px) {
    .stage {
        max-width: 1080px;
    }
    .orbit {
        aspect-ratio: 1080 / 420;
        max-height: 420px;
    }
}