/* ==========================================
   SCARBOROUGH SPICE — REDESIGN STYLESHEET
   Palette: SPICE Gold / Deep Navy / Bluffs Clay / Forest / Creek
   ========================================== */

:root {
  /* SPICE Brand */
  --gold:         #FAD001;
  --gold-dim:     #C9A800;
  --gold-glow:    rgba(250,208,1,0.15);

  /* Scarborough Palette */
  --navy:         #0D1117;
  --navy-light:   #161B22;
  --navy-mid:     #1C2333;
  --clay:         #C2623F;
  --clay-light:   #D4845F;
  --forest:       #2D6A4F;
  --forest-light: #40916C;
  --creek:        #1A7AA1;
  --creek-light:  #2196C8;
  --meadow:       #E9A84B;

  /* Surfaces */
  --surface-1:    #0D1117;
  --surface-2:    #161B22;
  --surface-3:    #1C2333;
  --surface-4:    #21293A;
  --border:       rgba(250,208,1,0.08);
  --border-strong:rgba(250,208,1,0.18);

  /* Text */
  --text:         #E6EDF3;
  --text-muted:   #8B949E;
  --text-dim:     #484F58;
  --text-dark:    #0D1117;

  /* Dashboard (warm cream) */
  --dash-bg:      #F7F4EF;
  --dash-surface: #FDFCF8;
  --dash-border:  #D8D0C4;
  --dash-text:    #26231D;
  --dash-muted:   #6D6A63;
  --dash-primary: #2D6A4F;
  --dash-success: #2F6D2D;
  --dash-danger:  #9D2F54;

  /* Game */
  --game-danger:  #EF4444;
  --game-success: #4ADE80;
  --game-warn:    #EAB308;
  --game-lav:     #818CF8;

  /* Type */
  --font-head:    'Space Grotesk', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'Fira Code', monospace;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;

  /* Transition */
  --ease: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--text);background:var(--navy);overflow-x:hidden;line-height:1.7}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:var(--font-body);cursor:pointer}

/* Particle canvas */
#particleCanvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.25}

/* ==========================================
   NAVBAR
   ========================================== */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(13,17,23,0.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;height:64px}
.nav-logo-btn{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;flex-shrink:0}
.nav-logo-btn:hover{opacity:0.85}
.nav-logo-img{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--border-strong)}
.nav-logo-text{display:flex;flex-direction:column;gap:1px}
.nav-logo-title{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--gold);line-height:1}
.nav-logo-sub{font-size:0.62rem;color:var(--text-muted);letter-spacing:0.04em}
.nav-tabs-wrap{display:flex;gap:4px;margin-left:auto}
.nav-tab{background:transparent;border:none;color:var(--text-muted);font-size:0.85rem;font-weight:600;padding:8px 16px;border-radius:100px;transition:all var(--ease)}
.nav-tab:hover{color:var(--text);background:rgba(255,255,255,0.06)}
.nav-tab.active{color:var(--text);background:rgba(255,255,255,0.1)}
.nav-tab-play{background:linear-gradient(135deg,var(--gold),var(--meadow))!important;color:var(--text-dark)!important;font-weight:700;box-shadow:0 4px 16px rgba(250,208,1,0.3)}
.nav-tab-play:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(250,208,1,0.4)!important}
.nav-xp{display:flex;align-items:center;gap:6px;background:var(--gold-glow);border:1px solid var(--border-strong);border-radius:100px;padding:5px 14px;flex-shrink:0}
.xp-icon{font-size:0.85rem}
.xp-val{font-family:var(--font-head);font-weight:800;font-size:0.9rem;color:var(--gold)}
.xp-label{font-size:0.68rem;color:var(--text-muted);font-weight:600}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem}
.mobile-menu{display:none;flex-direction:column;background:rgba(13,17,23,0.98);padding:12px 24px 20px;border-top:1px solid var(--border)}
.mobile-menu.open{display:flex}
.mobile-menu button{background:none;border:none;color:var(--text-muted);font-size:1rem;font-weight:600;padding:14px 0;text-align:left;border-bottom:1px solid var(--border)}
.mobile-menu button:hover{color:var(--text)}
.mobile-menu .mob-play{color:var(--gold)!important}

/* ==========================================
   VIEW SWITCHING
   ========================================== */
.view{display:none;min-height:100vh}
.view.active-view{display:block}
.view-game{background:var(--navy)}
.view-dash{background:var(--dash-bg)}

/* ==========================================
   UTILITIES
   ========================================== */
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.container-narrow{max-width:780px}
.section{position:relative;z-index:1;padding:100px 0}
.section-dark{background:var(--surface-1)}
.section-dark-alt{background:var(--surface-2)}
.section-gold{background:var(--gold);position:relative;padding:100px 0}
.section-cta{background:var(--surface-1);padding:120px 0;position:relative;overflow:hidden}

.gold{color:var(--gold)}
.gold-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.gold-link:hover{color:var(--meadow)}

.label-pill{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);background:var(--gold-glow);border:1px solid var(--border-strong);padding:6px 16px;border-radius:100px;margin-bottom:20px}
.label-dark{color:var(--text-dark);background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.15)}
.label-light{color:var(--gold)}

.section-heading{font-family:var(--font-head);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;line-height:1.2;letter-spacing:-0.02em;color:var(--text);margin-bottom:24px}
.heading-dark{color:var(--text-dark)}

.body-text{font-size:1rem;color:var(--text-muted);max-width:640px;margin-bottom:18px;line-height:1.8}
.body-dark{color:rgba(13,17,23,0.75)}
.body-muted{color:var(--text-dim);font-style:italic}

/* Buttons */
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),var(--meadow));color:var(--text-dark);font-weight:700;font-size:0.95rem;padding:14px 28px;border-radius:100px;border:none;transition:all var(--ease);box-shadow:0 6px 20px rgba(250,208,1,0.3);letter-spacing:0.01em}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(250,208,1,0.45)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);font-weight:600;font-size:0.95rem;padding:14px 28px;border-radius:100px;border:1.5px solid rgba(255,255,255,0.25);transition:all var(--ease)}
.btn-outline:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5)}
.btn-lg{padding:18px 36px;font-size:1.05rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ==========================================
   HOME
   ========================================== */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);animation:heroZoom 25s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1.15)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(13,17,23,0.92) 0%,rgba(45,106,79,0.5) 50%,rgba(194,98,63,0.4) 100%)}
.hero-content{position:relative;z-index:2;max-width:720px;padding:120px 32px 80px}
.hero-badge{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:6px 14px;border-radius:100px;margin-bottom:24px;animation:fadeUp 0.8s ease both}
.hero-title{font-family:var(--font-head);font-size:clamp(2rem,5.5vw,3.8rem);font-weight:800;line-height:1.1;color:var(--text);letter-spacing:-0.02em;margin-bottom:24px;animation:fadeUp 0.9s 0.1s ease both}
.hero-dim{color:var(--text-muted);font-weight:400;font-size:0.65em}
.hero-sub{font-size:1rem;color:rgba(255,255,255,0.75);max-width:560px;animation:fadeUp 1s 0.2s ease both;margin-bottom:12px}
.hero-sub strong{color:var(--gold)}
.hero-sub-sm{font-size:0.88rem;color:var(--text-muted);font-style:italic}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;animation:fadeUp 1s 0.3s ease both}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;animation:fadeUp 1s 0.8s ease both;transition:opacity 0.4s}
.scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,var(--text-dim),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Acronym Reveal */
.acronym-reveal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:28px}
.acronym-word{font-family:var(--font-head);font-size:clamp(1.6rem,4vw,2.8rem);font-weight:300;color:var(--text-muted);letter-spacing:-0.02em;line-height:1.2}
.acronym-letter{font-weight:900;color:var(--gold);font-size:1.15em}
.acronym-desc{font-size:1rem;color:var(--text-muted);max-width:680px;line-height:1.8}

/* Place Cards */
.place-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.place-card{background:var(--surface-3);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);transition:transform var(--ease),box-shadow var(--ease)}
.place-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.4)}
.place-img{height:200px;background-size:cover;background-position:center;position:relative}
.place-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,var(--surface-3))}
.place-body{padding:24px}
.place-body h3{font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:10px}
.place-body p{font-size:0.85rem;color:var(--text-muted);line-height:1.7;margin-bottom:14px}
.place-tag{font-size:0.7rem;color:var(--gold);font-weight:600;letter-spacing:0.05em}

/* Gold section */
.zero-strike{position:relative;color:var(--text-dark)}
.zero-strike::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:4px;background:var(--clay);border-radius:2px;transform:rotate(-3deg)}
.spice-quote{border-left:4px solid rgba(13,17,23,0.3);padding:20px 24px;margin-top:28px;font-style:italic;font-size:1.05rem;color:rgba(13,17,23,0.7);line-height:1.7}
.spice-quote cite{display:block;margin-top:10px;font-size:0.78rem;font-style:normal;font-weight:700;color:rgba(13,17,23,0.5)}

/* Way Cards */
.way-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.way-card{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 26px;cursor:pointer;transition:all var(--ease);position:relative;overflow:hidden}
.way-card:hover{transform:translateY(-6px);border-color:var(--border-strong)}
.way-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:height var(--ease)}
.way-learn::before{background:var(--creek)}
.way-play::before{background:var(--gold)}
.way-dash::before{background:var(--forest)}
.way-card:hover::before{height:6px}
.way-icon{font-size:2rem;margin-bottom:14px}
.way-card h3{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:10px}
.way-card p{font-size:0.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:16px}
.way-cta{font-weight:700;font-size:0.82rem;color:var(--creek-light)}
.way-cta-gold{color:var(--gold)}

/* About / Equity */
.about-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:60px;align-items:center}
.about-raccoon{width:260px;height:260px;object-fit:contain;filter:drop-shadow(0 16px 48px rgba(250,208,1,0.2));margin:0 auto;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* CTA */
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(250,208,1,0.06),transparent)}
.cta-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-heading{font-family:var(--font-head);font-size:clamp(1.8rem,5vw,3rem);font-weight:800;color:var(--text)}
.cta-sub{color:var(--text-muted);font-size:1rem}
.cta-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ==========================================
   LEARN
   ========================================== */
.learn-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;overflow:hidden}
.learn-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.learn-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--navy) 25%,rgba(13,17,23,0.4))}
.learn-hero-content{position:relative;z-index:2;padding-bottom:52px;padding-top:100px}
.learn-hero-title{font-family:var(--font-head);font-size:clamp(1.8rem,5vw,3.2rem);font-weight:800;color:var(--text);line-height:1.15;margin-bottom:14px}
.learn-hero-sub{color:var(--text-muted);font-size:1rem;max-width:580px}

/* Concept Cards */
.concept-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:36px}
.concept-card{border-radius:var(--r-md);padding:28px 22px;transition:transform var(--ease);position:relative;overflow:hidden}
.concept-card:hover{transform:translateY(-6px) scale(1.02)}
.card-clay{background:linear-gradient(135deg,var(--clay),#a04e30);color:#fff}
.card-creek{background:linear-gradient(135deg,var(--creek),#156080);color:#fff}
.card-gold{background:linear-gradient(135deg,var(--gold),var(--meadow));color:var(--text-dark)}
.card-forest{background:linear-gradient(135deg,var(--forest),#1B4332);color:#fff}
.concept-icon{font-size:1.8rem;margin-bottom:12px}
.concept-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:8px}
.concept-card p{font-size:0.85rem;opacity:0.9;line-height:1.7}
.concept-card strong{opacity:1}

/* Invoice Grid */
.invoice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:36px}
.invoice-card{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:28px 22px;text-align:center;transition:transform var(--ease);position:relative;overflow:hidden}
.invoice-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--forest),var(--creek))}
.invoice-card:hover{transform:translateY(-6px)}
.invoice-emoji{font-size:2rem;margin-bottom:10px}
.invoice-val{font-family:var(--font-head);font-size:2rem;font-weight:900;color:var(--gold);margin-bottom:6px}
.invoice-val small{font-size:0.5em;color:var(--text-muted)}
.invoice-site{font-family:var(--font-head);font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:6px}
.invoice-service{font-size:0.78rem;color:var(--text-muted);line-height:1.6}

/* Steps */
.steps{display:flex;flex-direction:column;margin-top:36px}
.step{display:flex;align-items:flex-start;gap:24px;padding:20px 0;position:relative}
.step-num{font-family:var(--font-head);font-size:2.4rem;font-weight:900;color:var(--gold);opacity:0.2;min-width:64px;line-height:1;transition:opacity var(--ease)}
.step:hover .step-num{opacity:1}
.step-body{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:22px 26px;flex:1;transition:border-color var(--ease)}
.step:hover .step-body{border-color:var(--border-strong)}
.step-body h3{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:6px}
.step-body p{color:var(--text-muted);font-size:0.88rem}
.step-body strong{color:var(--gold)}

/* Quiz */
.quiz-box{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 32px}
.quiz-progress{height:4px;background:rgba(250,208,1,0.08);border-radius:100px;margin-bottom:32px;overflow:hidden}
.quiz-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--forest));border-radius:100px;transition:width 0.5s;width:0%}
.quiz-q-label{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.quiz-question{font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:20px;line-height:1.45}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{display:flex;align-items:center;gap:12px;background:var(--surface-4);border:2px solid transparent;border-radius:var(--r-sm);padding:12px 16px;cursor:pointer;font-size:0.88rem;font-weight:500;transition:all var(--ease);text-align:left;color:var(--text)}
.quiz-option:hover{border-color:var(--gold);background:var(--gold-glow)}
.quiz-option.correct{border-color:var(--game-success);background:rgba(74,222,128,0.1);color:#4ADE80}
.quiz-option.wrong{border-color:var(--game-danger);background:rgba(239,68,68,0.08);color:#EF4444}
.quiz-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--text-muted);flex-shrink:0;transition:all var(--ease)}
.quiz-option:hover .quiz-dot{border-color:var(--gold);background:var(--gold)}
.quiz-option.correct .quiz-dot{border-color:var(--game-success);background:var(--game-success)}
.quiz-option.wrong .quiz-dot{border-color:var(--game-danger);background:var(--game-danger)}
.quiz-fb{margin-top:14px;padding:10px 14px;border-radius:var(--r-sm);font-size:0.82rem;font-weight:500}
.quiz-fb.fb-correct{background:rgba(74,222,128,0.08);color:var(--game-success);border-left:3px solid var(--game-success)}
.quiz-fb.fb-wrong{background:rgba(239,68,68,0.06);color:var(--game-danger);border-left:3px solid var(--game-danger)}
.quiz-next{margin-top:18px;display:inline-flex;gap:8px;background:linear-gradient(135deg,var(--gold),var(--meadow));color:var(--text-dark);font-weight:700;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;transition:all var(--ease);font-size:0.88rem;font-family:var(--font-body)}
.quiz-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(250,208,1,0.35)}
.quiz-result{text-align:center;padding:20px 0;animation:fadeUp 0.5s ease}
.quiz-result .result-emoji{font-size:3rem;margin-bottom:12px;display:block}
.quiz-result h3{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:8px}
.quiz-result p{color:var(--text-muted);font-size:0.9rem;margin-bottom:16px}
.quiz-result .score-badge{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--meadow));color:var(--text-dark);font-size:1.6rem;font-weight:900;padding:8px 26px;border-radius:var(--r-md);margin-bottom:16px}
.quiz-restart{display:inline-flex;gap:8px;background:var(--surface-4);color:var(--text);padding:10px 20px;border-radius:100px;font-weight:600;font-size:0.82rem;border:none;cursor:pointer;transition:all var(--ease);font-family:var(--font-body)}
.quiz-restart:hover{background:var(--gold);color:var(--text-dark)}
.quiz-bridge{margin-top:24px;background:var(--gold-glow);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.quiz-bridge p{color:var(--text);font-weight:600;flex:1}
.hidden{display:none!important}

/* ==========================================
   GAME
   ========================================== */
.game-header{padding:14px 32px;background:rgba(0,0,0,0.5);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:64px}
.game-header-left{display:flex;align-items:center;gap:12px}
.game-logo-sm{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--border-strong)}
.game-title-text{font-family:var(--font-head);font-size:0.95rem;font-weight:800;color:var(--game-success);text-transform:uppercase;letter-spacing:1px}
.game-sub-text{font-size:0.75rem;color:var(--text-muted);margin-top:2px;max-width:380px}
.game-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh-badge{background:var(--game-lav);color:#fff;padding:5px 12px;border-radius:6px;font-weight:700;text-transform:uppercase;font-size:0.68rem;letter-spacing:1px;box-shadow:0 0 12px rgba(129,140,248,0.3)}
.game-level-ind{color:var(--text-muted);font-family:var(--font-mono);font-size:0.78rem}
.game-xp-badge{color:var(--gold);font-family:var(--font-mono);font-size:0.82rem;font-weight:600;background:var(--gold-glow);border:1px solid var(--border-strong);padding:4px 12px;border-radius:100px}
.game-arena{display:grid;grid-template-columns:1.1fr 0.9fr;gap:18px;padding:18px 32px;height:calc(100vh - 64px - 66px);min-height:480px}

.boss-panel{background:var(--surface-2);border:2px solid var(--game-danger);border-radius:12px;padding:24px;display:flex;flex-direction:column;box-shadow:0 0 24px rgba(239,68,68,0.1);transition:all 0.5s;position:relative;overflow:hidden}
.boss-panel.defeated{border-color:var(--game-success);box-shadow:0 0 32px rgba(74,222,128,0.15)}
.boss-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:16px}
.boss-status{font-size:0.75rem;font-weight:800;color:var(--game-danger);text-transform:uppercase;letter-spacing:1.5px}
.boss-id{font-family:var(--font-mono);color:var(--text-muted);font-size:0.72rem}
.asset-name{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-0.3px}
.ledger-type{color:var(--text-muted);font-size:0.78rem;margin-bottom:18px}
.ledger-rows{display:flex;flex-direction:column;gap:2px}
.ledger-row{display:flex;justify-content:space-between;font-family:var(--font-mono);margin-bottom:10px;font-size:0.78rem;color:var(--text-muted);border-bottom:1px dashed rgba(255,255,255,0.04);padding-bottom:8px}
.ledger-val{color:var(--text);font-weight:600}
.val-warn{color:var(--game-warn);font-weight:600}
.total-row{display:flex;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:2px dashed var(--game-danger);font-size:1.3rem;font-weight:800;color:var(--game-danger)}
.total-row.defeated{border-top-color:var(--game-success);color:var(--game-success)}
.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg) scale(5);opacity:0;color:#fff;background:var(--gold);padding:6px 20px;font-size:clamp(24px,4vw,44px);font-weight:900;border-radius:8px;text-transform:uppercase;pointer-events:none;text-shadow:2px 2px 0 #000;border:3px solid #000;z-index:10;white-space:nowrap;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
.stamp.show{transform:translate(-50%,-50%) rotate(-15deg) scale(1);opacity:1}

.terminal{background:#000;border:1px solid var(--border);border-radius:12px;padding:20px;font-family:var(--font-mono);display:flex;flex-direction:column;box-shadow:inset 0 0 16px rgba(0,0,0,0.8);overflow-y:auto}
.term-top{color:var(--game-success);font-size:0.68rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #222;padding-bottom:8px}
.lore-text{font-size:0.75rem;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
.lore-text .highlight{color:var(--gold);font-weight:bold}
.lore-text .impact-highlight{color:var(--game-lav);font-weight:bold}
.eq-builder{background:#111;border:1px solid #333;padding:14px;border-radius:8px;margin-bottom:14px}
.eq-label{font-size:0.65rem;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.formula{font-size:1.1rem;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:10px;justify-content:center;flex-wrap:wrap}
.op{color:var(--text-dim);font-size:1.2rem}
.drop-slot{width:96px;height:40px;border:1px dashed var(--text-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:var(--text-muted);background:rgba(255,255,255,0.03);text-align:center;line-height:1.2;cursor:pointer;padding:0 5px;transition:all 0.2s}
.drop-slot.filled{border-style:solid;border-color:var(--game-success);color:var(--game-success);background:rgba(74,222,128,0.08)}
.drop-slot:hover{border-color:var(--gold)}
.databank{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;overflow-y:auto;max-height:140px}
.databank::-webkit-scrollbar{width:4px}
.databank::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
.data-pill{background:var(--surface-2);border:1px solid var(--border);padding:8px;border-radius:6px;font-size:0.65rem;cursor:pointer;transition:all 0.2s;user-select:none;line-height:1.4;color:var(--text)}
.data-pill:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.data-pill.used{opacity:0.25;pointer-events:none}
.game-btn{background:transparent;border:2px solid var(--game-success);color:var(--game-success);padding:12px;width:100%;font-family:var(--font-mono);font-size:0.78rem;font-weight:600;text-transform:uppercase;cursor:pointer;transition:all 0.2s;border-radius:6px;margin-top:auto;letter-spacing:0.5px}
.game-btn:hover{background:var(--game-success);color:#000;box-shadow:0 0 12px var(--game-success)}
.game-btn:disabled{opacity:0.35;cursor:not-allowed;border-color:var(--text-dim);color:var(--text-dim);box-shadow:none}
.game-btn:disabled:hover{background:transparent;color:var(--text-dim)}

.level-overlay{position:fixed;inset:0;background:rgba(13,17,23,0.96);z-index:200;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:opacity 0.5s;text-align:center;padding:32px}
.level-overlay.hidden{opacity:0;pointer-events:none}
.overlay-logo{width:72px;height:72px;border-radius:14px;object-fit:cover;margin-bottom:6px}
.level-overlay h2{font-size:clamp(2.2rem,7vw,4rem);color:var(--gold);margin:0;text-transform:uppercase;text-shadow:0 0 20px rgba(250,208,1,0.4);font-family:var(--font-head);font-weight:800}
.level-overlay p{font-size:1rem;color:var(--text);margin:0}
.overlay-sh{color:var(--game-lav);font-family:var(--font-mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:1.5px}
.overlay-tip{color:var(--text-muted);font-size:0.75rem;margin-top:6px}
.victory-overlay{background:rgba(10,14,20,0.98)}
.overlay-logo-lg{width:100px;height:100px;border-radius:18px}
.victory-title{font-family:var(--font-head);font-weight:900;color:var(--gold);font-size:clamp(1.6rem,4.5vw,3rem);text-align:center}
.victory-sub{color:var(--text);font-size:0.95rem;text-align:center;max-width:460px}
.victory-xp{background:var(--gold-glow);border:1px solid var(--border-strong);color:var(--gold);font-family:var(--font-mono);font-weight:700;font-size:0.95rem;padding:10px 24px;border-radius:100px;letter-spacing:1px}

/* ==========================================
   DASHBOARD
   ========================================== */
.dash-topbar{background:rgba(247,244,239,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--dash-border);padding:0 32px;margin-top:64px;position:sticky;top:64px;z-index:50}
.dash-brand{display:flex;align-items:center;gap:14px;padding:14px 0 8px}
.dash-logo{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--dash-border)}
.dash-title{margin:0;font-size:1.2rem;font-weight:800;font-family:var(--font-head);color:var(--dash-text)}
.dash-subtitle{margin:2px 0 0;color:var(--dash-muted);font-size:0.78rem;font-style:italic}
.dash-demo-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(250,208,1,0.1);border:1px solid rgba(250,208,1,0.2);color:#7C6400;font-size:0.72rem;font-weight:600;padding:5px 12px;border-radius:100px;margin-bottom:8px}
.dash-demo-badge a{color:var(--dash-primary);text-decoration:underline}

.impact-box{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--r-md);padding:18px 22px;margin-bottom:12px}
.impact-box h4{font-family:var(--font-head);font-size:0.9rem;font-weight:700;color:var(--dash-text);margin-bottom:6px}
.impact-box p{font-size:0.82rem;color:var(--dash-muted);line-height:1.6;margin-bottom:10px}
.impact-box strong{color:var(--dash-text)}
.impact-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:0.75rem;color:var(--dash-muted)}
.impact-stats strong{color:var(--dash-primary)}

.dash-tabs{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:12px}
.dash-tab{background:var(--dash-surface);border:1px solid var(--dash-border);color:var(--dash-muted);padding:8px 14px;border-radius:100px;font-size:0.78rem;font-weight:600;transition:all var(--ease)}
.dash-tab:hover{color:var(--dash-text);border-color:#bdb6aa}
.dash-tab.active{background:var(--dash-primary);border-color:var(--dash-primary);color:#fff}
.dash-body{max-width:1360px;margin:0 auto;padding:24px 32px}
.dash-hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:20px}
.dash-card{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--r-lg);padding:28px;box-shadow:0 8px 24px rgba(28,24,18,0.06)}
.dash-card h2{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--dash-text);margin-bottom:8px;line-height:1.3}
.dash-card h3{font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--dash-text);margin-bottom:12px}
.dash-card p{color:var(--dash-muted);font-size:0.85rem}
.status-strip{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;border:1px solid var(--dash-border);background:#fff;color:var(--dash-text);font-size:0.72rem;font-weight:600}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--dash-primary)}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.metric{padding:16px;border:1px solid var(--dash-border);border-radius:12px;background:#fff}
.metric-label{font-size:0.7rem;color:var(--dash-muted);margin-bottom:4px}
.metric-value{font-size:1.6rem;font-weight:800;font-family:var(--font-head);color:var(--dash-text)}

.panel{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--r-lg);padding:24px;box-shadow:0 8px 24px rgba(28,24,18,0.06);margin-bottom:20px}
.panel h3{font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--dash-text);margin-bottom:4px}
.panel-sub{color:var(--dash-muted);font-size:0.78rem;margin-bottom:16px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:0.72rem;font-weight:700;color:var(--dash-muted)}
input,select,textarea{width:100%;border:1px solid var(--dash-border);background:#fff;border-radius:10px;padding:10px 12px;font-size:0.88rem;color:var(--dash-text);font-family:var(--font-body);outline:none;transition:border-color var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--dash-primary);box-shadow:0 0 0 3px rgba(45,106,79,0.1)}
textarea{min-height:90px;resize:vertical}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{border:0;border-radius:100px;padding:10px 16px;font-size:0.78rem;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all var(--ease)}
.btn.btn-primary{background:var(--dash-primary);color:#fff}
.btn.btn-primary:hover{background:#245a42}
.btn.btn-secondary{background:#fff;color:var(--dash-text);border:1px solid var(--dash-border)}
.btn.btn-secondary:hover{background:var(--dash-surface)}
.status-msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:0.78rem;display:none}
.status-msg.show{display:block}
.status-success{background:rgba(47,109,45,0.08);color:var(--dash-success)}
.status-error{background:rgba(157,47,84,0.08);color:var(--dash-danger)}
.status-info{background:rgba(45,106,79,0.08);color:var(--dash-primary)}
.table-wrap{overflow-x:auto;border:1px solid var(--dash-border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:10px;border-bottom:1px solid #ece8df;vertical-align:top;font-size:0.78rem}
th{color:var(--dash-muted);font-size:0.68rem;letter-spacing:0.04em;text-transform:uppercase;background:#faf8f3;font-weight:700}
.queue-actions{display:flex;gap:5px;flex-wrap:wrap}
.mini-btn{border:1px solid var(--dash-border);background:#fff;color:var(--dash-text);padding:5px 9px;border-radius:100px;font-size:0.68rem;font-weight:700;cursor:pointer;transition:all var(--ease)}
.mini-btn.approve{color:var(--dash-success);border-color:rgba(47,109,45,0.2)}
.mini-btn.approve:hover{background:var(--dash-success);color:#fff}
.mini-btn.reject{color:var(--dash-danger);border-color:rgba(157,47,84,0.2)}
.mini-btn.reject:hover{background:var(--dash-danger);color:#fff}
.empty-state{padding:24px;text-align:center;color:var(--dash-muted);font-size:0.85rem}
.audit-box{padding:10px;border:1px dashed var(--dash-border);border-radius:10px;background:#f7f6f2;color:var(--dash-muted);font-size:0.75rem;margin-bottom:12px}
.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ref-label{color:var(--dash-muted);font-size:0.75rem;margin-bottom:6px}
.list-grid{display:grid;gap:8px}
.list-item{background:#fff;border:1px solid var(--dash-border);border-radius:10px;padding:10px}
.list-item strong{display:block;margin-bottom:3px;font-size:0.82rem;color:var(--dash-text)}
.list-item .muted{color:var(--dash-muted);font-size:0.72rem}
.loading{color:var(--dash-muted);font-size:0.78rem}

/* ==========================================
   FOOTER
   ========================================== */
#footer{background:var(--navy);padding:52px 0 24px;border-top:1px solid var(--border)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-logo-img{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--border-strong)}
.footer-title{font-family:var(--font-head);font-weight:800;font-size:1rem;color:var(--gold);display:block}
.footer-sub{font-size:0.65rem;color:var(--text-muted);display:block;margin-top:1px}
.footer-quote{max-width:520px;font-style:italic;font-size:0.82rem;color:var(--text-muted);line-height:1.7;border-left:3px solid var(--gold);padding-left:16px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.footer-links a{color:var(--text-dim);font-size:0.75rem;padding:5px 12px;border-radius:100px;border:1px solid var(--border);transition:all var(--ease)}
.footer-links a:hover{color:var(--gold);border-color:var(--border-strong)}
.footer-copy{color:var(--text-dim);font-size:0.68rem}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:900px){
  .nav-tabs-wrap{gap:2px}.nav-tab{padding:7px 10px;font-size:0.76rem}.nav-logo-sub{display:none}
  .game-arena{grid-template-columns:1fr;height:auto}.place-cards,.way-cards{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:32px}.dash-hero-grid{grid-template-columns:1fr}
  .controls{grid-template-columns:1fr}.ref-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav-tabs-wrap{display:none}.menu-toggle{display:block}.nav-xp{display:none}
  .game-header{padding:10px 16px;margin-top:64px}.game-arena{padding:12px 16px}
  .hero-content{padding:100px 20px 60px}.place-cards,.way-cards,.concept-cards,.invoice-grid{grid-template-columns:1fr}
  .section{padding:72px 0}.dash-topbar{padding:0 16px}.dash-body{padding:18px 16px}
  .quiz-box{padding:28px 18px}.cta-buttons{flex-direction:column;align-items:center}
  .step{flex-direction:column;gap:8px}.about-raccoon{width:180px;height:180px}
  .impact-stats{flex-direction:column}
}

/* Community XP Bar */
.community-xp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(250,208,1,0.06);
  border: 1px solid rgba(250,208,1,0.12);
  border-radius: 8px;
  margin: 16px 0;
  font-size: 0.82rem;
}
.community-xp-label {
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  white-space: nowrap;
}
.community-xp-value {
  color: var(--text-muted);
}
.community-xp-value span {
  color: var(--gold);
  font-weight: 700;
  font-family: 'Fira Code', monospace;
}

/* Join Form */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.join-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.join-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(250,208,1,0.1);
}
.join-input option {
  background: var(--surface-2);
  color: var(--text);
}