/* ============================================================
   HAKAI PROTOCOL V2 — COMPLETE DESIGN SYSTEM
   Solo Leveling inspired | Professional dark RPG aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --bg-deep:#020308; --bg-base:#05070f;
  --bg-panel:rgba(5,8,22,0.92); --bg-card:rgba(8,12,32,0.88); --bg-card-hover:rgba(14,20,50,0.95);
  --blue:#3b82f6; --blue-bright:#60a5fa; --blue-glow:rgba(59,130,246,0.5);
  --cyan:#22d3ee; --cyan-dim:rgba(34,211,238,0.25); --purple:#7c3aed; --violet:#a78bfa;
  --rank-e:#94a3b8; --rank-d:#4ade80; --rank-c:#60a5fa; --rank-b:#c084fc;
  --rank-a:#fb923c; --rank-s:#fbbf24; --rank-ss:#f87171; --rank-sss:#e879f9;
  --text-primary:#e2e8f0; --text-dim:#64748b;
  --border-dim:rgba(59,130,246,0.18); --border-mid:rgba(59,130,246,0.4); --border-bright:rgba(59,130,246,0.75);
  --sidebar:240px; --header-h:58px; --radius:12px; --radius-sm:8px;
  --copyright-h:34px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow-x:hidden;}
body{background:var(--bg-deep);color:var(--text-primary);font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:500;line-height:1.5;
  /* the copyright bar is fixed to the bottom, so the document has to end
     above it or it covers whatever the last element happens to be */
  padding-bottom:calc(var(--copyright-h) + env(safe-area-inset-bottom,0px));}

#copyright-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;pointer-events:none;
  text-align:center;font-size:11px;font-weight:600;letter-spacing:.3px;
  color:rgba(255,255,255,.25);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));}

.game-bg{position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 50% -5%,rgba(124,58,237,0.22) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 90%,rgba(59,130,246,0.15) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at 5% 60%,rgba(139,92,246,0.10) 0%,transparent 50%),
    url('hakai_world.png') center/cover no-repeat;
  opacity:0.45;animation:bg-breathe 10s ease-in-out infinite;}
.game-scanlines{position:fixed;inset:0;z-index:-9;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.09) 3px,rgba(0,0,0,0.09) 4px);}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:4px;}

/* ── INTRO ───────────────────────────────────────────────── */
#screen-intro{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse 80% 60% at 50% 30%,#0a0520 0%,#000 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;}
.intro-system-tag{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:4px;
  color:var(--cyan);text-shadow:0 0 20px var(--cyan);margin-bottom:24px;opacity:.8;}
.intro-title{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,6vw,4.5rem);font-weight:900;letter-spacing:6px;
  color:var(--text-primary);
  text-shadow:0 0 40px rgba(124,58,237,.6),0 0 80px rgba(124,58,237,.3),0 0 120px rgba(59,130,246,.2);
  margin-bottom:12px;opacity:0;
  animation:fadeIn 1.2s ease .5s forwards,title-glitch 7s ease 4s infinite;}
.intro-subtitle{font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:6px;color:var(--cyan);text-shadow:0 0 16px rgba(34,211,238,.4);
  opacity:0;animation:fadeIn 1s ease 1.5s forwards;margin-bottom:60px;}
.intro-lines{font-family:'Orbitron',sans-serif;font-size:.82rem;font-weight:400;color:#a5f3fc;
  letter-spacing:2px;max-width:620px;min-height:60px;line-height:2;text-shadow:0 0 12px rgba(34,211,238,.4);}
.intro-lines .blink{border-right:2px solid var(--cyan);animation:blink .7s step-end infinite;}
.intro-btn-row{margin-top:50px;display:flex;gap:20px;opacity:0;animation:fadeIn .8s ease 1s forwards;}
.intro-btn{font-family:'Orbitron',sans-serif;font-size:.75rem;letter-spacing:3px;
  background:transparent;border:1px solid var(--blue);color:var(--text-primary);padding:14px 32px;cursor:pointer;transition:.3s;}
.intro-btn:hover{background:rgba(59,130,246,.15);box-shadow:0 0 20px var(--blue-glow);}
.intro-btn.skip{border-color:var(--border-dim);color:var(--text-dim);font-size:.7rem;}
.intro-btn.skip:hover{background:rgba(255,255,255,.03);}

/* ── CHARACTER SELECT ────────────────────────────────────── */
#screen-select{position:fixed;inset:0;z-index:900;background:radial-gradient(ellipse 80% 60% at 50% 20%,#0e0630 0%,#030510 40%,#000 100%);
  display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* Own scroll container -- see --cbar-h in index.html. Without this the
   second hunter's SELECT button sat under the fixed copyright bar at full
   scroll and could not be tapped. The literal is only the no-script
   fallback. */
#screen-select{padding-bottom:calc(40px + var(--cbar-h,34px));}
#screen-select.visible > .select-tag{margin-top:auto;}
#screen-select.visible > .select-grid{margin-bottom:auto;}
#screen-select.visible{display:flex;animation:fadeIn .6s ease;}
.select-tag{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:6px;color:var(--blue-bright);margin-bottom:8px;}
.select-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.2rem,3vw,2rem);font-weight:700;letter-spacing:4px;
  color:var(--text-primary);text-shadow:0 0 30px var(--blue-glow);margin-bottom:50px;text-align:center;}
.select-lore{font-family:'Rajdhani',sans-serif;font-size:.9rem;color:rgba(226,232,240,.5);letter-spacing:1px;
  max-width:600px;text-align:center;line-height:1.7;margin:8px auto 36px;padding:0 20px;}
.select-grid{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;}
.char-card{width:260px;cursor:pointer;border:1px solid var(--border-dim);border-radius:var(--radius);
  background:var(--bg-card);overflow:hidden;transition:all .35s cubic-bezier(.25,.8,.25,1);position:relative;}
.char-card::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(59,130,246,.15) 100%);z-index:1;pointer-events:none;}
.char-card:hover{border-color:var(--blue-bright);
  box-shadow:0 0 40px var(--blue-glow),0 0 80px rgba(59,130,246,.2);transform:translateY(-8px);}
.char-card img{width:100%;height:300px;object-fit:cover;display:block;}
.char-info{padding:18px;position:relative;z-index:2;}
.char-name{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;letter-spacing:3px;
  color:var(--text-primary);margin-bottom:4px;}
.char-class{font-size:.8rem;color:var(--cyan);letter-spacing:2px;margin-bottom:12px;}
.char-stats{display:flex;gap:8px;flex-wrap:wrap;}
.char-stat-pill{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:1px;padding:3px 10px;
  border-radius:20px;background:rgba(59,130,246,.15);border:1px solid var(--border-dim);color:var(--blue-bright);}
.char-select-label{margin-top:14px;text-align:center;font-family:'Orbitron',sans-serif;font-size:.65rem;
  letter-spacing:3px;color:var(--text-dim);transition:color .3s;}
.char-card:hover .char-select-label{color:var(--cyan);text-shadow:0 0 10px var(--cyan);}

/* ── HEADER ──────────────────────────────────────────────── */
.game-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  background:rgba(2,3,8,.96);border-bottom:1px solid var(--border-dim);backdrop-filter:blur(20px);
  display:flex;align-items:center;padding:0 24px;gap:20px;}
.header-logo{font-family:'Orbitron',sans-serif;font-size:.95rem;font-weight:900;letter-spacing:4px;
  color:var(--text-primary);text-shadow:0 0 20px var(--blue-glow);white-space:nowrap;}
.header-logo span{color:var(--cyan);}
.header-divider{width:1px;height:24px;background:var(--border-dim);}
.header-stat{display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;}
.header-stat .label{color:var(--text-dim);}
.header-stat .value{color:var(--text-primary);}
.header-streak{color:#fb923c;font-weight:700;}
.header-spacer{flex:1;}
.header-rank-badge{font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:3px;
  padding:5px 14px;border-radius:4px;border:1px solid currentColor;}
.header-date{font-family:'Rajdhani',sans-serif;font-size:.75rem;letter-spacing:2px;color:var(--text-dim);}

/* ── LAYOUT ──────────────────────────────────────────────── */
#screen-game{display:none;min-height:100vh;flex-direction:column;}
#screen-game.visible{display:flex;}
.game-body{display:flex;flex:1;padding-top:var(--header-h);min-height:100vh;}

.game-sidebar{width:var(--sidebar);flex-shrink:0;position:fixed;top:var(--header-h);bottom:0;left:0;
  background:rgba(3,5,14,.96);border-right:1px solid var(--border-dim);overflow-y:auto;
  padding:20px 16px;display:flex;flex-direction:column;gap:16px;backdrop-filter:blur(20px);}
.sidebar-avatar{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--border-mid);display:block;box-shadow:0 0 20px rgba(59,130,246,.2);}
.sidebar-rank-badge{display:inline-block;font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:3px;padding:4px 12px;border-radius:4px;border:1px solid currentColor;text-align:center;}
.sidebar-name{font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:3px;color:var(--text-primary);}
.sidebar-class{font-size:.75rem;color:var(--text-dim);letter-spacing:1px;}
.sidebar-level-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.sidebar-level{font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:600;color:var(--cyan);}
.sidebar-xp-label{font-size:.7rem;color:var(--text-dim);}
.xp-bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;margin-top:4px;}
.xp-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:6px;
  transition:width .8s cubic-bezier(.25,.8,.25,1);box-shadow:0 0 8px var(--blue-glow);}
.sidebar-section-label{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:4px;
  color:var(--text-dim);margin-top:4px;margin-bottom:8px;}

/* STAT BARS */
.stat-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.stat-label{font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:1px;width:28px;flex-shrink:0;}
.stat-bar-wrap{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:4px;transition:width .6s ease;}
.stat-value{font-family:'Orbitron',sans-serif;font-size:.6rem;color:var(--text-dim);width:24px;text-align:right;flex-shrink:0;}
.stat-STR .stat-label{color:#f87171;} .stat-STR .stat-bar-fill{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,.5);}
.stat-INT .stat-label{color:#60a5fa;} .stat-INT .stat-bar-fill{background:#60a5fa;box-shadow:0 0 6px rgba(96,165,250,.5);}
.stat-AGI .stat-label{color:#4ade80;} .stat-AGI .stat-bar-fill{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5);}
.stat-VIT .stat-label{color:#a78bfa;} .stat-VIT .stat-bar-fill{background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,.5);}
.stat-SEN .stat-label{color:#fbbf24;} .stat-SEN .stat-bar-fill{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.5);}

/* GATE WIDGET */
.sidebar-gate{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius-sm);padding:12px;}
.gate-label{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:3px;color:var(--text-dim);margin-bottom:8px;}
.gate-title{font-family:'Orbitron',sans-serif;font-size:.75rem;color:var(--cyan);margin-bottom:6px;}
.gate-days-mini{display:flex;gap:4px;margin-bottom:8px;}
.gate-day-mini{width:22px;height:22px;border-radius:4px;background:rgba(255,255,255,.04);
  border:1px solid var(--border-dim);display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:.5rem;color:var(--text-dim);}
.gate-day-mini.done{background:rgba(59,130,246,.2);border-color:var(--blue);color:var(--blue-bright);}
.gate-day-mini.today{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px var(--cyan-dim);}
.gate-progress-text{font-size:.7rem;color:var(--text-dim);}
.gate-progress-text span{color:var(--cyan);font-weight:600;}

.sidebar-reset-btn{margin-top:auto;font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:2px;
  background:transparent;border:1px solid rgba(248,113,113,.2);color:rgba(248,113,113,.4);
  padding:8px;width:100%;cursor:pointer;border-radius:var(--radius-sm);transition:.3s;}
.sidebar-reset-btn:hover{border-color:#f87171;color:#f87171;}

.game-content{flex:1;min-width:0;margin-left:var(--sidebar);padding:28px;min-height:calc(100vh - var(--header-h));}

/* ── TABS ────────────────────────────────────────────────── */
.tab-nav{display:flex;gap:4px;margin-bottom:28px;border-bottom:1px solid var(--border-dim);overflow-x:auto;}
.tab-btn{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;background:transparent;
  border:none;color:var(--text-dim);padding:12px 20px;cursor:pointer;transition:all .25s;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tab-btn:hover{color:var(--text-primary);}
.tab-btn.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.tab-panel{display:none;animation:fadeIn .3s ease;}
.tab-panel.active{display:block;}

.panel-header{margin-bottom:24px;}
.panel-title{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:4px;
  color:var(--text-primary);text-shadow:0 0 20px var(--blue-glow);}
.panel-subtitle{font-size:.8rem;color:var(--text-dim);letter-spacing:1px;margin-top:4px;}
.panel-date{font-family:'Orbitron',sans-serif;font-size:.7rem;color:var(--cyan);letter-spacing:2px;}

/* ── QUEST CARDS ─────────────────────────────────────────── */
.quest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px;}
.quest-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);
  padding:20px;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden;}
.quest-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0;transition:opacity .3s;}
.quest-card:hover::before{opacity:1;}
.quest-card:hover{border-color:var(--border-mid);box-shadow:0 4px 24px rgba(59,130,246,.12);}
.quest-card.done{border-color:rgba(34,211,238,.35);background:rgba(8,16,40,.92);box-shadow:0 0 20px rgba(34,211,238,.08);}
.quest-card.done::before{opacity:1;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
.quest-card-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.quest-icon-wrap{width:44px;height:44px;flex-shrink:0;background:rgba(59,130,246,.1);
  border:1px solid var(--border-dim);border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;transition:.3s;}
.quest-card.done .quest-icon-wrap{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.3);}
.quest-meta{flex:1;}
.quest-name{font-family:'Orbitron',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:2px;
  color:var(--text-primary);margin-bottom:3px;}
.quest-card.done .quest-name{color:var(--cyan);}.quest-card.done .quest-meta{padding-right:90px;}
.quest-desc{font-size:.78rem;color:var(--text-dim);line-height:1.4;}
.quest-card.done .quest-desc{color:rgba(34,211,238,.6);}
.quest-status-badge{position:absolute;top:14px;right:14px;font-family:'Orbitron',sans-serif;
  font-size:.55rem;letter-spacing:2px;padding:3px 10px;border-radius:20px;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);color:var(--cyan);display:none;}
.quest-card.done .quest-status-badge{display:block;}
.quest-reward{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.reward-pill{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:1px;padding:4px 12px;
  border-radius:20px;background:rgba(59,130,246,.1);border:1px solid var(--border-dim);color:var(--blue-bright);transition:.3s;}
.quest-card.done .reward-pill{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.25);color:var(--cyan);}
.quest-btn{width:100%;padding:10px;font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;
  border:1px solid var(--border-mid);background:rgba(59,130,246,.08);color:var(--text-primary);
  cursor:pointer;border-radius:var(--radius-sm);transition:all .25s;}
.quest-btn:hover{background:rgba(59,130,246,.2);border-color:var(--blue-bright);box-shadow:0 0 16px var(--blue-glow);}
.quest-btn.done-btn{border-color:rgba(34,211,238,.25);background:rgba(34,211,238,.05);color:var(--text-dim);}
.quest-btn.done-btn:hover{border-color:rgba(248,113,113,.3);color:#f87171;background:rgba(248,113,113,.05);}
@keyframes card-complete-flash{0%{box-shadow:none;}50%{box-shadow:0 0 40px rgba(34,211,238,.5);border-color:var(--cyan);}100%{box-shadow:0 0 20px rgba(34,211,238,.08);}}
.quest-card.completing{animation:card-complete-flash .5s ease;}

/* ── DAILY PROGRESS ──────────────────────────────────────── */
.daily-progress-section{margin-top:8px;margin-bottom:28px;}
.daily-progress-header{display:flex;justify-content:space-between;margin-bottom:8px;}
.daily-progress-label{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;color:var(--text-dim);}
.daily-progress-value{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;color:var(--cyan);}
.daily-bar-wrap{height:8px;background:rgba(255,255,255,.04);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 10px rgba(0,0,0,.5);}
.daily-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:8px;
  transition:width .6s cubic-bezier(.25,.8,.25,1);box-shadow:0 0 10px var(--blue-glow);}
.daily-bar-fill.full{background:linear-gradient(90deg,var(--cyan),#4ade80);box-shadow:0 0 16px rgba(34,211,238,.6);}

/* STREAK */
.streak-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 18px;
  background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius-sm);margin-bottom:24px;}
.streak-item{text-align:center;}
.streak-num{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:700;color:var(--cyan);display:block;line-height:1;}
.streak-num.fire{color:#fb923c;}
.streak-lbl{font-size:.65rem;color:var(--text-dim);letter-spacing:1px;}
.streak-divider{width:1px;height:36px;background:var(--border-dim);}

/* ── ASCENSION TOWER ─────────────────────────────────────── */
.tower-container{display:flex;flex-direction:column;}
.floor-item{display:flex;align-items:center;gap:16px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.03);transition:all .25s;position:relative;}
.floor-item.unlocked{cursor:pointer;}
.floor-item.unlocked:hover{background:rgba(59,130,246,.06);}
.floor-item.locked{opacity:.3;}
.floor-item.current{background:rgba(59,130,246,.06);border-left:2px solid var(--cyan);}
.floor-num{font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:600;letter-spacing:2px;
  color:var(--text-dim);width:60px;flex-shrink:0;}
.floor-item.unlocked .floor-num{color:var(--cyan);}
.floor-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:.3s;}
.floor-item.locked   .floor-dot{background:rgba(255,255,255,.08);}
.floor-item.unlocked .floor-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.floor-item.current  .floor-dot{background:var(--blue-bright);box-shadow:0 0 12px var(--blue);animation:pulse-dot 1.5s ease infinite;}
.floor-arc{font-size:.7rem;color:var(--text-dim);width:130px;flex-shrink:0;}
.floor-title-text{font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:1px;color:var(--text-primary);flex:1;}
.floor-item.locked .floor-title-text{color:var(--text-dim);}
.floor-status{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:2px;padding:3px 10px;border-radius:20px;}
.floor-status.done{background:rgba(34,211,238,.1);color:var(--cyan);border:1px solid rgba(34,211,238,.25);}
.floor-status.next{background:rgba(59,130,246,.1);color:var(--blue-bright);border:1px solid var(--border-mid);animation:pulse-border 2s ease infinite;}
.floor-status.locked{background:transparent;color:var(--text-dim);border:1px solid var(--border-dim);}

/* ── GATES ───────────────────────────────────────────────── */
.gates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.gate-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);padding:20px;transition:.3s;}
.gate-card.active-gate{border-color:var(--border-mid);box-shadow:0 0 24px rgba(59,130,246,.12);}
.gate-card.cleared-gate{border-color:rgba(74,222,128,.3);}
.gate-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.gate-card-title{font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:2px;color:var(--text-primary);}
.gate-rank-badge{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;padding:3px 12px;border-radius:4px;border:1px solid currentColor;}
.gate-week-dots{display:flex;gap:6px;margin-bottom:14px;}
.gate-dot{flex:1;height:28px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--border-dim);
  display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:.5rem;color:var(--text-dim);transition:.3s;}
.gate-dot.complete{background:rgba(59,130,246,.15);border-color:var(--blue);color:var(--blue-bright);}
.gate-dot.today{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan-dim);color:var(--cyan);}
.gate-dot.missed{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2);color:rgba(248,113,113,.5);}
.gate-bar-wrap{height:4px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;}
.gate-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:4px;transition:width .6s;}
.gate-footer{display:flex;justify-content:space-between;margin-top:10px;}
.gate-footer-text{font-size:.7rem;color:var(--text-dim);}
.gate-footer-text span{color:var(--cyan);}

/* ── SHADOW ARMY ─────────────────────────────────────────── */
.shadows-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.shadow-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);
  padding:20px;text-align:center;transition:.3s;position:relative;overflow:hidden;}
.shadow-card.locked{opacity:.4;}
.shadow-card.unlocked{border-color:rgba(167,139,250,.3);box-shadow:0 0 20px rgba(124,58,237,.1);}
.shadow-card.unlocked:hover{box-shadow:0 0 32px rgba(124,58,237,.2);transform:translateY(-4px);}
.shadow-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(167,139,250,.08) 0%,transparent 60%);pointer-events:none;}
.shadow-icon{font-size:2.2rem;margin-bottom:12px;display:block;}
.shadow-card.locked .shadow-icon{filter:grayscale(1);opacity:.5;}
.shadow-name{font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:2px;
  color:var(--text-primary);margin-bottom:4px;}
.shadow-card.unlocked .shadow-name{color:var(--violet);}
.shadow-stat-badge{display:inline-block;font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:1px;
  padding:2px 10px;border-radius:20px;margin-bottom:10px;
  background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.2);color:var(--violet);}
.shadow-desc{font-size:.72rem;color:var(--text-dim);line-height:1.5;}
.shadow-locked-label{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;color:var(--text-dim);display:block;margin-top:8px;}
.shadow-card.unlocked .shadow-locked-label{display:none;}

/* ── CALENDAR ────────────────────────────────────────────── */
.calendar-section{margin-bottom:28px;}
.calendar-label{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;color:var(--text-dim);margin-bottom:12px;}
.heatmap-grid{display:flex;flex-wrap:wrap;gap:4px;}
.heatmap-day{width:14px;height:14px;border-radius:3px;cursor:default;transition:transform .15s;title:attr(title);}
.heatmap-day:hover{transform:scale(1.4);}
.heatmap-day[data-level="0"]{background:rgba(255,255,255,.04);}
.heatmap-day[data-level="1"]{background:rgba(59,130,246,.2);}
.heatmap-day[data-level="2"]{background:rgba(59,130,246,.45);}
.heatmap-day[data-level="3"]{background:rgba(59,130,246,.7);}
.heatmap-day[data-level="4"]{background:var(--cyan);box-shadow:0 0 6px var(--cyan-dim);}
.heatmap-legend{display:flex;align-items:center;gap:6px;margin-top:10px;}
.heatmap-legend-text{font-size:.65rem;color:var(--text-dim);}
.heatmap-swatch{width:12px;height:12px;border-radius:2px;}

/* ── STORY MODAL ─────────────────────────────────────────── */
.story-modal-bg{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:40px;backdrop-filter:blur(10px);}
.story-modal-bg.open{display:flex;animation:fadeIn .3s ease;}
.story-modal{max-width:700px;width:100%;background:var(--bg-panel);border:1px solid var(--border-mid);
  border-radius:var(--radius);padding:40px;box-shadow:0 0 60px rgba(59,130,246,.2);position:relative;
  max-height:85vh;overflow-y:auto;}
.story-modal-floor{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:5px;color:var(--cyan);margin-bottom:8px;}
.story-modal-arc{font-size:.75rem;color:var(--text-dim);letter-spacing:2px;margin-bottom:16px;}
.story-modal-title{font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:3px;
  color:var(--text-primary);text-shadow:0 0 20px var(--blue-glow);margin-bottom:24px;}
.story-modal-text{font-size:1rem;color:rgba(226,232,240,.85);line-height:1.9;
  border-left:2px solid var(--border-mid);padding-left:20px;}
.story-modal-close{position:absolute;top:20px;right:20px;font-family:'Orbitron',sans-serif;font-size:.65rem;
  letter-spacing:2px;background:transparent;border:1px solid var(--border-dim);color:var(--text-dim);
  padding:6px 16px;cursor:pointer;border-radius:var(--radius-sm);transition:.25s;}
.story-modal-close:hover{border-color:var(--border-mid);color:var(--text-primary);}

/* ── SYSTEM NOTIFICATION ─────────────────────────────────── */
.system-notif-bg{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.88);
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.system-notif-bg.open{display:flex;animation:fadeIn .25s ease;}
.system-notif{max-width:520px;width:100%;background:rgba(4,10,30,.98);border:1px solid var(--blue-bright);
  border-radius:4px;padding:36px 40px;box-shadow:0 0 80px var(--blue-glow),0 0 160px rgba(59,130,246,.1);
  text-align:center;position:relative;}
.system-notif::before{content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg,var(--blue),transparent,var(--cyan),transparent);
  border-radius:4px;z-index:-1;opacity:.4;}
.system-notif-tag{font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:6px;
  color:var(--cyan);text-shadow:0 0 16px var(--cyan);margin-bottom:20px;display:block;}
.system-notif-icon{font-size:2.5rem;margin-bottom:16px;display:block;}
.system-notif-title{font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:4px;
  color:var(--text-primary);text-shadow:0 0 20px var(--blue-glow);margin-bottom:10px;}
.system-notif-body{font-size:.9rem;color:rgba(226,232,240,.75);line-height:1.7;margin-bottom:28px;letter-spacing:.5px;}
.system-notif-btn{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:4px;
  background:rgba(59,130,246,.12);border:1px solid var(--blue-bright);color:var(--text-primary);
  padding:12px 36px;cursor:pointer;border-radius:4px;transition:all .25s;}
.system-notif-btn:hover{background:rgba(59,130,246,.25);box-shadow:0 0 20px var(--blue-glow);}

/* ── LEVEL-UP ────────────────────────────────────────────── */
.levelup-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.96);
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.levelup-overlay.open{display:flex;}
.levelup-ring{position:absolute;width:300px;height:300px;border-radius:50%;
  border:2px solid var(--blue-bright);box-shadow:0 0 60px var(--blue-glow),inset 0 0 60px var(--blue-glow);
  animation:expand-ring 1.2s ease-out forwards;}
.levelup-ring-2{position:absolute;width:200px;height:200px;border-radius:50%;
  border:1px solid var(--cyan);animation:expand-ring 1s ease-out .2s forwards;}
.levelup-tag{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:8px;
  color:var(--cyan);margin-bottom:12px;animation:fadeIn .5s ease .3s both;text-shadow:0 0 20px var(--cyan);}
.levelup-title{font-family:'Orbitron',sans-serif;font-size:clamp(2.5rem,8vw,5rem);font-weight:900;letter-spacing:8px;
  color:var(--text-primary);text-shadow:0 0 40px var(--blue-glow),0 0 80px var(--blue-glow);
  animation:fadeIn .5s ease .5s both;position:relative;z-index:2;}
.levelup-num{font-family:'Orbitron',sans-serif;font-size:clamp(1rem,3vw,1.5rem);font-weight:600;letter-spacing:6px;
  color:var(--cyan);margin-top:10px;animation:fadeIn .5s ease .8s both;position:relative;z-index:2;}
.levelup-stats-gained{display:flex;gap:20px;margin-top:24px;flex-wrap:wrap;justify-content:center;
  animation:fadeIn .5s ease 1s both;position:relative;z-index:2;}
.levelup-stat-pill{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;padding:6px 18px;
  border-radius:20px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:var(--cyan);}
.levelup-close-hint{position:absolute;bottom:40px;font-family:'Orbitron',sans-serif;font-size:.6rem;
  letter-spacing:3px;color:var(--text-dim);cursor:pointer;animation:fadeIn .5s ease 1.5s both;}

.rankup-overlay{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.98);
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.rankup-overlay.open{display:flex;}
.rankup-badge-old{font-family:'Orbitron',sans-serif;font-size:3rem;font-weight:700;letter-spacing:6px;
  opacity:.4;animation:fadeOut .5s ease .2s forwards;}
.rankup-arrow{font-size:2rem;margin:12px;color:var(--cyan);animation:fadeIn .4s ease .7s both;}
.rankup-badge-new{font-family:'Orbitron',sans-serif;font-size:5rem;font-weight:900;letter-spacing:8px;
  animation:rankReveal 1s ease .8s both;text-shadow:0 0 60px currentColor;}
.rankup-title{font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:8px;
  color:var(--text-primary);margin-top:20px;animation:fadeIn .5s ease 1.5s both;}
.rankup-desc{font-size:.85rem;color:var(--text-dim);margin-top:8px;letter-spacing:2px;animation:fadeIn .5s ease 1.8s both;}
.rankup-close{position:absolute;bottom:40px;font-family:'Orbitron',sans-serif;font-size:.6rem;
  letter-spacing:3px;color:var(--text-dim);cursor:pointer;animation:fadeIn .5s ease 2.2s both;}

/* ── SETTINGS ────────────────────────────────────────────── */
.settings-section{margin-bottom:32px;max-width:600px;}
.settings-title{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;color:var(--text-dim);margin-bottom:16px;}
.settings-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.settings-btn{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;background:var(--bg-card);
  border:1px solid var(--border-dim);color:var(--text-primary);padding:10px 20px;cursor:pointer;
  border-radius:var(--radius-sm);transition:.25s;}
.settings-btn:hover{border-color:var(--border-mid);box-shadow:0 0 14px var(--blue-glow);}
.settings-btn.danger{border-color:rgba(248,113,113,.2);color:#f87171;}
.settings-btn.danger:hover{background:rgba(248,113,113,.06);border-color:#f87171;}

/* ── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:30px;right:30px;z-index:700;background:var(--bg-panel);
  border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:12px 20px;
  font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;color:var(--cyan);
  box-shadow:0 4px 24px var(--blue-glow);animation:slideDown .3s ease,fadeOut .4s ease 2.5s forwards;}
.divider{height:1px;background:var(--border-dim);margin:24px 0;}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeOut{to{opacity:0;}}
@keyframes blink{50%{border-color:transparent;}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 8px var(--blue);}50%{box-shadow:0 0 20px var(--blue),0 0 40px rgba(59,130,246,.4);}}
@keyframes pulse-border{0%,100%{box-shadow:none;}50%{box-shadow:0 0 12px var(--blue-glow);}}
@keyframes expand-ring{0%{opacity:1;transform:scale(.2);}100%{opacity:0;transform:scale(3.5);}}
@keyframes rankReveal{0%{opacity:0;transform:scale(.3) rotate(-10deg);}60%{opacity:1;transform:scale(1.15) rotate(2deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes bg-breathe{0%,100%{opacity:0.42;}50%{opacity:0.52;}}
@keyframes title-glitch{
  0%,88%,100%{transform:none;text-shadow:0 0 40px rgba(124,58,237,.6),0 0 80px rgba(124,58,237,.3),0 0 120px rgba(59,130,246,.2);}
  89%{transform:skewX(2deg) translateX(-3px);text-shadow:-3px 0 #f87171,3px 0 #22d3ee,0 0 40px rgba(124,58,237,.6);}
  90%{transform:skewX(-1deg) translateX(3px);text-shadow:3px 0 #f87171,-3px 0 #22d3ee,0 0 40px rgba(124,58,237,.6);}
  91%{transform:none;text-shadow:0 0 40px rgba(124,58,237,.6),0 0 80px rgba(124,58,237,.3);}
  92%{transform:translateY(-2px);text-shadow:-2px 0 #22d3ee,2px 0 #7c3aed;}
  93%{transform:none;text-shadow:0 0 40px rgba(124,58,237,.6),0 0 80px rgba(124,58,237,.3),0 0 120px rgba(59,130,246,.2);}
}

/* ── HAMBURGER + SIDEBAR OVERLAY (mobile) ──────────────────── */
.hamburger-btn{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:36px;height:36px;background:transparent;border:1px solid var(--border-dim);
  border-radius:var(--radius-sm);cursor:pointer;padding:7px 6px;flex-shrink:0;transition:border-color .2s;}
.hamburger-btn:hover{border-color:var(--border-mid);}
.hamburger-btn span{display:block;width:18px;height:2px;background:var(--cyan);border-radius:2px;transition:all .25s;}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:8500;
  background:rgba(0,0,0,.65);backdrop-filter:blur(3px);}
.sidebar-overlay.active{display:block;}

/* ── ARMY SUB NAV ─────────────────────────────────────── */
.army-sub-nav{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--border-dim);border-radius:var(--radius-sm);overflow:hidden;}
.army-sub-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;background:transparent;
  border:none;color:var(--text-dim);padding:10px 16px;cursor:pointer;transition:.25s;}
.army-sub-btn.active{background:rgba(59,130,246,.12);color:var(--cyan);}
.army-sub-btn:hover:not(.active){background:rgba(255,255,255,.03);color:var(--text-primary);}
.army-panel{display:none;} .army-panel.active{display:block;}

/* ── CREATURE GRID ────────────────────────────────────── */
.creature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}

/* ── CREATURE CARD (base) ─────────────────────────────── */
.creature-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);
  cursor:pointer;transition:all .3s;position:relative;overflow:hidden;}
.creature-card.unlocked{border-color:color-mix(in srgb,var(--card-tier-color,var(--blue)) 50%,transparent);}
.creature-card.unlocked:hover{box-shadow:0 0 32px color-mix(in srgb,var(--card-tier-color,var(--blue)) 40%,transparent);transform:translateY(-5px);}
.creature-card.locked{opacity:.6;filter:saturate(.35);}
.creature-card.locked:hover{opacity:.75;transform:translateY(-2px);}

/* ── PORTRAIT ART CARD ────────────────────────────────── */
.creature-card.has-art{padding:0;}
.creature-art-wrap{position:relative;width:100%;height:220px;overflow:hidden;}
.creature-art{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .4s ease;}
.creature-card.has-art:hover .creature-art{transform:scale(1.05);}
.creature-art-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.0) 40%,rgba(5,8,22,.85) 80%,rgba(5,8,22,1) 100%);}
.creature-art-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2;}
.creature-art-nameplate{position:absolute;bottom:10px;left:14px;right:14px;z-index:2;}
.creature-art-nameplate .creature-name{font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:2px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);margin-bottom:2px;}
.creature-art-nameplate .creature-species{font-size:.67rem;color:rgba(226,232,240,.7);letter-spacing:1px;}

.creature-card-body{padding:14px;}
.creature-lore{font-size:.7rem;color:rgba(226,232,240,.6);line-height:1.6;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.creature-abilities{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.ability-tag{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:1px;padding:3px 9px;
  border-radius:20px;background:rgba(59,130,246,.1);border:1px solid var(--border-dim);color:var(--blue-bright);}
.creature-card.unlocked .ability-tag{background:color-mix(in srgb,var(--card-tier-color,var(--blue)) 12%,transparent);
  border-color:color-mix(in srgb,var(--card-tier-color,var(--blue)) 35%,transparent);
  color:var(--card-tier-color,var(--blue));}
.passive-tag{background:rgba(167,139,250,.1)!important;border-color:rgba(167,139,250,.25)!important;color:var(--violet)!important;}
.creature-obtain-row{display:flex;align-items:center;gap:8px;}
.creature-obtain-text{font-size:.65rem;color:var(--text-dim);flex:1;}
.creature-army-bonus{margin-top:10px;padding:7px 10px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.2);
  border-radius:var(--radius-sm);font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:1px;color:var(--cyan);}

/* ── EMOJI FALLBACK CARD (no image) ───────────────────── */
.creature-card:not(.has-art){padding:18px;}
.creature-card:not(.has-art)::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--card-tier-color,var(--blue)),transparent);opacity:.6;}
.creature-card-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.creature-icon-big{font-size:2.2rem;flex-shrink:0;line-height:1;filter:drop-shadow(0 0 8px var(--card-tier-color,var(--blue)));}
.creature-card.locked .creature-icon-big{filter:grayscale(1);opacity:.4;}
.creature-card-meta{flex:1;}

/* ── SHARED BADGE / PILL ──────────────────────────────── */
.creature-tier-badge{display:inline-block;font-family:'Orbitron',sans-serif;font-size:.52rem;letter-spacing:2px;
  padding:2px 10px;border-radius:3px;border:1px solid currentColor;color:var(--card-tier-color,var(--blue));
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);}
.creature-name{font-family:'Orbitron',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:2px;color:var(--text-primary);}
.creature-card.unlocked .creature-name{color:var(--card-tier-color,var(--cyan));}
.creature-species{font-size:.68rem;color:var(--text-dim);letter-spacing:1px;}
.creature-status-pill{font-family:'Orbitron',sans-serif;font-size:.52rem;letter-spacing:2px;
  padding:2px 10px;border-radius:20px;flex-shrink:0;backdrop-filter:blur(4px);}
.creature-status-pill.in-army{background:rgba(34,211,238,.15);border:1px solid rgba(34,211,238,.4);color:var(--cyan);}
.creature-status-pill.locked{background:rgba(0,0,0,.4);border:1px solid var(--border-dim);color:var(--text-dim);}

/* ── CREATURE DETAIL MODAL ────────────────────────────── */
.creature-modal-bg{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(12px);}
.creature-modal-bg.open{display:flex;animation:fadeIn .3s ease;}
.creature-modal{max-width:720px;width:100%;max-height:90vh;overflow-y:auto;
  background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:var(--radius);
  position:relative;box-shadow:0 0 60px var(--blue-glow);}
/* Art header for modal */
.cm-art-header{position:relative;width:100%;height:260px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.cm-art-img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.cm-art-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(5,8,22,1));}
.cm-art-overlay-text{position:absolute;bottom:20px;left:24px;right:80px;}
.cm-body{padding:24px 28px 28px;}
/* No-art modal header */
.cm-header{display:flex;gap:18px;align-items:flex-start;padding:28px 28px 0;margin-bottom:24px;}
.cm-icon{font-size:3.5rem;line-height:1;filter:drop-shadow(0 0 16px var(--cm-color,var(--cyan)));}
.cm-meta{flex:1;}
.cm-tier{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:4px;color:var(--cm-color,var(--cyan));margin-bottom:4px;}
.cm-name{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:3px;
  color:var(--text-primary);text-shadow:0 0 20px var(--cm-color,var(--blue-glow));}
.cm-lore{font-size:.86rem;color:rgba(226,232,240,.8);line-height:1.9;padding:14px 16px;
  background:rgba(0,0,0,.3);border-left:2px solid var(--cm-color,var(--border-mid));
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:20px;}
.cm-section-label{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:4px;
  color:var(--text-dim);margin-bottom:10px;margin-top:16px;}
.cm-abilities-grid{display:flex;flex-direction:column;gap:10px;}
.cm-ability{padding:12px 16px;background:rgba(0,0,0,.3);border:1px solid var(--border-dim);border-radius:var(--radius-sm);}
.cm-ability-name{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;
  color:var(--cm-color,var(--cyan));margin-bottom:4px;}
.cm-ability-type{display:inline-block;font-size:.55rem;padding:2px 8px;border-radius:20px;
  margin-bottom:6px;background:var(--bg-card);border:1px solid var(--border-dim);color:var(--text-dim);}
.cm-ability-desc{font-size:.77rem;color:rgba(226,232,240,.7);line-height:1.6;}
.cm-passive{padding:12px 16px;background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.2);border-radius:var(--radius-sm);}
.cm-passive-name{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;color:var(--violet);margin-bottom:4px;}
.cm-obtain-section{padding:14px 16px;background:rgba(0,0,0,.3);border:1px solid var(--border-dim);
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:12px;}
.cm-obtain-icon{font-size:1.4rem;}
.cm-obtain-label{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;color:var(--text-dim);margin-bottom:2px;}
.cm-obtain-cond{font-size:.82rem;color:var(--text-primary);}
.cm-army-bonus{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;
  color:var(--cm-color,var(--cyan));padding:10px 14px;background:rgba(34,211,238,.05);
  border:1px solid rgba(34,211,238,.15);border-radius:var(--radius-sm);margin-top:8px;}
.cm-close{position:absolute;top:14px;right:14px;z-index:10;font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;
  background:rgba(0,0,0,.6);border:1px solid var(--border-dim);color:var(--text-dim);padding:5px 14px;
  cursor:pointer;border-radius:var(--radius-sm);transition:.25s;backdrop-filter:blur(6px);}
.cm-close:hover{border-color:var(--border-mid);color:var(--text-primary);}

/* ── WEAPON CARDS ─────────────────────────────────────── */
.weapon-progression{background:var(--bg-card);border:1px solid var(--border-dim);
  border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.weapon-prog-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.weapon-prog-icon{font-size:1.8rem;}
.weapon-prog-habit{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;color:var(--text-dim);}
.weapon-prog-name{font-family:'Orbitron',sans-serif;font-size:.88rem;font-weight:600;letter-spacing:2px;color:var(--text-primary);}
.weapon-prog-name.equipped{color:var(--cyan);}
.weapon-tiers{display:flex;gap:8px;flex-wrap:wrap;}
.weapon-tier-dot{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-dim);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;transition:.25s;}
.weapon-tier-dot.unlocked{background:rgba(59,130,246,.12);}
.weapon-tier-dot.active{background:rgba(34,211,238,.12);}
.weapon-tier-dot.locked{opacity:.3;cursor:default;}
.weapon-skill-box{margin-top:12px;padding:14px;background:rgba(0,0,0,.3);border:1px solid var(--border-dim);border-radius:var(--radius-sm);}
.weapon-skill-name{font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:2px;color:var(--cyan);margin-bottom:4px;}
.weapon-skill-desc{font-size:.76rem;color:rgba(226,232,240,.7);line-height:1.6;}
.weapon-prog-bar-wrap{height:3px;background:rgba(255,255,255,.05);border-radius:4px;margin:10px 0 6px;overflow:hidden;}
.weapon-prog-bar-fill{height:100%;border-radius:4px;transition:width .6s;}
.weapon-completions{font-size:.67rem;color:var(--text-dim);}
.weapon-completions span{color:var(--blue-bright);}

/* ── BOSS CARDS ───────────────────────────────────────── */
.boss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.boss-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;}
.boss-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#f87171,transparent);opacity:.5;}
.boss-card.active-boss{border-color:rgba(248,113,113,.4);box-shadow:0 0 28px rgba(248,113,113,.12);}
.boss-card.defeated{border-color:rgba(74,222,128,.25);}
.boss-card.defeated::before{background:linear-gradient(90deg,transparent,#4ade80,transparent);}
.boss-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.boss-level-badge{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;
  padding:3px 12px;border-radius:4px;border:1px solid #f87171;color:#f87171;}
.boss-card.defeated .boss-level-badge{border-color:#4ade80;color:#4ade80;}
.boss-icon{font-size:2.2rem;text-align:center;margin:8px 0;display:block;}
.boss-name{font-family:'Orbitron',sans-serif;font-size:.88rem;font-weight:700;letter-spacing:2px;color:var(--text-primary);margin-bottom:4px;}
.boss-species{font-size:.72rem;color:var(--text-dim);margin-bottom:10px;}
.boss-lore{font-size:.74rem;color:rgba(226,232,240,.65);line-height:1.6;margin-bottom:8px;}
.boss-hp-label{display:flex;justify-content:space-between;margin-bottom:6px;}
.boss-hp-text{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;color:var(--text-dim);}
.boss-hp-value{font-family:'Orbitron',sans-serif;font-size:.6rem;color:#f87171;}
.boss-hp-wrap{height:6px;background:rgba(255,255,255,.05);border-radius:6px;overflow:hidden;}
.boss-hp-fill{height:100%;background:linear-gradient(90deg,#f87171,#fb923c);border-radius:6px;transition:width .6s;}
.boss-card.defeated .boss-hp-fill{background:linear-gradient(90deg,#4ade80,#22d3ee);width:100%!important;}
.boss-reward{margin-top:12px;font-size:.72rem;color:var(--text-dim);}
.boss-reward span{color:var(--cyan);}
.boss-defeated-badge{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:2px;
  padding:3px 12px;border-radius:20px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:#4ade80;}

/* ── QUEST MANAGEMENT ─────────────────────────────────── */
.quest-mgmt-toggle{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;
  background:transparent;border:1px solid var(--border-dim);color:var(--text-dim);
  padding:10px 20px;cursor:pointer;border-radius:var(--radius-sm);transition:.25s;}
.quest-mgmt-toggle:hover{border-color:var(--border-mid);color:var(--text-primary);}
.quest-mgmt-section{margin-top:16px;background:var(--bg-card);border:1px solid var(--border-dim);
  border-radius:var(--radius);padding:20px;}
.quest-mgmt-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.quest-mgmt-item{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:rgba(0,0,0,.25);border:1px solid var(--border-dim);border-radius:var(--radius-sm);}
.quest-mgmt-icon{font-size:1.1rem;}
.quest-mgmt-name{flex:1;font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;}
.quest-mgmt-stat{font-size:.65rem;color:var(--text-dim);padding:2px 10px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid var(--border-dim);}
.quest-mgmt-del{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:1px;
  background:transparent;border:1px solid rgba(248,113,113,.2);color:rgba(248,113,113,.5);
  padding:4px 12px;cursor:pointer;border-radius:var(--radius-sm);transition:.25s;}
.quest-mgmt-del:hover{border-color:#f87171;color:#f87171;}
.add-quest-form{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border-dim);}
.add-quest-input{background:var(--bg-deep);border:1px solid var(--border-dim);color:var(--text-primary);
  padding:8px 14px;font-family:'Rajdhani',sans-serif;font-size:.88rem;border-radius:var(--radius-sm);
  outline:none;flex:1;min-width:140px;}
.add-quest-input:focus{border-color:var(--border-mid);}
.add-quest-select{background:var(--bg-deep);border:1px solid var(--border-dim);color:var(--text-primary);
  padding:8px 12px;font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:1px;
  border-radius:var(--radius-sm);cursor:pointer;outline:none;}
.add-quest-btn{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:2px;
  background:rgba(59,130,246,.12);border:1px solid var(--border-mid);color:var(--text-primary);
  padding:8px 18px;cursor:pointer;border-radius:var(--radius-sm);transition:.25s;white-space:nowrap;}
.add-quest-btn:hover{background:rgba(59,130,246,.2);box-shadow:0 0 14px var(--blue-glow);}

/* ── WEAPON DROP NOTIF ────────────────────────────────── */
.weapon-drop-bg{position:fixed;inset:0;z-index:850;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);}
.weapon-drop-bg.open{display:flex;animation:fadeIn .3s ease;}
.weapon-drop{max-width:500px;width:100%;background:rgba(4,8,24,.98);border-radius:8px;padding:36px 40px;
  text-align:center;position:relative;border:1px solid rgba(251,191,36,.2);box-shadow:0 0 60px rgba(251,191,36,.15);}
.wd-tag{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:6px;
  color:#fbbf24;text-shadow:0 0 16px #fbbf24;margin-bottom:16px;display:block;}
.wd-rarity{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;margin-bottom:12px;display:block;}
.wd-icon{font-size:3rem;margin-bottom:12px;display:block;}
.wd-name{font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:4px;
  color:var(--text-primary);margin-bottom:6px;}
.wd-skill-name{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;color:var(--cyan);margin-bottom:8px;}
.wd-skill-desc{font-size:.82rem;color:rgba(226,232,240,.7);line-height:1.6;margin-bottom:24px;}
.wd-btn{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:4px;
  background:rgba(251,191,36,.1);border:1px solid #fbbf24;color:var(--text-primary);
  padding:12px 32px;cursor:pointer;border-radius:4px;transition:.25s;}
.wd-btn:hover{background:rgba(251,191,36,.2);box-shadow:0 0 20px rgba(251,191,36,.3);}

/* ── ANIMATED BACKGROUND ──────────────────────────────── */
.game-bg{animation:bg-breathe 10s ease-in-out infinite alternate;}
@keyframes bg-breathe{from{opacity:.3;}to{opacity:.48;}}

/* ── SIDEBAR WEAPONS ──────────────────────────────────── */
.sidebar-weapons{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.weapon-equip-chip{display:flex;align-items:center;gap:4px;padding:3px 8px;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:20px;
  font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:1px;color:#fbbf24;cursor:pointer;}

/* ── EMPTY STATE ──────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;font-family:'Orbitron',sans-serif;
  font-size:.75rem;letter-spacing:3px;color:var(--text-dim);line-height:2;}

/* ── PULSE ANIMATION ──────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── WEAPON IMAGE TIER SLOTS ──────────────────────────── */
.weapon-tiers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.weapon-tier-slot{width:80px;height:100px;border-radius:8px;border:1px solid var(--border-dim);
  overflow:hidden;cursor:pointer;transition:all .3s;position:relative;flex-shrink:0;}
.weapon-tier-slot.unlocked{border-color:rgba(59,130,246,.4);}
.weapon-tier-slot.active{transform:scale(1.06);z-index:1;}
.weapon-tier-slot.active:hover{transform:scale(1.1);}
.weapon-tier-slot:hover:not(.locked){box-shadow:0 0 16px rgba(59,130,246,.3);}
.weapon-tier-slot.locked{opacity:.35;cursor:default;}
.weapon-slot-img{width:100%;height:80px;object-fit:cover;object-position:top center;display:block;}
.weapon-slot-img.locked-img{filter:grayscale(1) brightness(.4);}
.weapon-slot-label{font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:1px;
  text-align:center;padding:3px 4px;background:rgba(0,0,0,.7);width:100%;}

/* ── ACTIVE WEAPON ART ROW ────────────────────────────── */
.weapon-art-row{margin-bottom:14px;}
.weapon-art-frame{position:relative;width:100%;height:120px;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--border-dim);}
.weapon-art-img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
.weapon-art-gradient{position:absolute;inset:0;pointer-events:none;}
.weapon-art-info{position:absolute;top:50%;left:14px;transform:translateY(-50%);}

/* ── WEAPON DROP MODAL — ART IMAGE ────────────────────── */
.wd-art-img{width:160px;height:200px;object-fit:contain;object-position:center;margin:0 auto 12px;
  display:block;filter:drop-shadow(0 0 20px rgba(251,191,36,.4));}

/* ============================================================
   EPIC BOSS CARDS
   ============================================================ */

/* Grid layout */
#boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding: 8px 0 24px;
}

/* Main card */
.boss-card-epic {
  --boss-color: #f87171;
  --boss-glow: rgba(248,113,113,0.5);
  background: #0d0d14;
  border: 1.5px solid var(--boss-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 24px var(--boss-glow), 0 4px 32px rgba(0,0,0,0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.boss-card-epic:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 0 48px var(--boss-glow), 0 8px 48px rgba(0,0,0,0.8);
}
.boss-card-epic.boss-locked {
  border-color: #374151;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  opacity: 0.7;
  filter: grayscale(0.6);
}
.boss-card-epic.boss-active {
  animation: boss-border-pulse 2.5s ease-in-out infinite;
}
.boss-card-epic.boss-defeated {
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(74,222,128,0.3);
}

/* Art area */
.boss-art-wrap {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #111827;
}
.boss-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.boss-card-epic:hover .boss-art-img {
  transform: scale(1.05);
}
.boss-art-locked .boss-art-img {
  filter: blur(3px) grayscale(0.8);
}
.boss-art-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 80px;
  background: linear-gradient(160deg,#1a1a2e,#0d0d14);
}

/* Vignette overlay */
.boss-art-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.4) 70%,
    rgba(13,13,20,0.95) 100%);
  pointer-events: none;
}

/* Active pulsing ring */
.boss-active-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 3px solid var(--boss-color);
  animation: boss-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes boss-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); box-shadow: 0 0 10px var(--boss-glow); }
  50% { opacity: 1; transform: scale(1.02); box-shadow: 0 0 30px var(--boss-glow); }
}
@keyframes boss-border-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--boss-glow); }
  50% { box-shadow: 0 0 50px var(--boss-glow), 0 0 80px var(--boss-glow); }
}

/* Scanning line for active bosses */
.boss-card-epic.boss-active .boss-art-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--boss-color), transparent);
  animation: boss-scan 3s linear infinite;
  pointer-events: none;
}
@keyframes boss-scan {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Defeated overlay */
.boss-defeated-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.boss-vanquished-text {
  font-family: 'Cinzel Decorative', 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #4ade80;
  letter-spacing: 6px;
  text-shadow: 0 0 20px #4ade80;
}
.boss-vanquished-check {
  font-size: 48px;
  color: #4ade80;
  text-shadow: 0 0 30px #4ade80;
}

/* Locked overlay */
.boss-locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.boss-locked-text {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 3px;
  border: 1px solid #374151;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0,0,0,0.5);
}

/* Art badges (top of art area) */
.boss-art-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.boss-level-pill {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border: 1px solid;
  border-radius: 20px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}
.boss-status-pill {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 20px;
  padding: 3px 10px;
}
.boss-status-pill.active  { background: rgba(248,113,113,0.2); color: #fca5a5; border: 1px solid rgba(248,113,113,0.5); }
.boss-status-pill.defeated{ background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.boss-status-pill.locked  { background: rgba(55,65,81,0.3);    color: #6b7280; border: 1px solid #374151; }

/* Nameplate (bottom of art area) */
.boss-nameplate {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 16px 16px 12px;
  pointer-events: none;
}
.boss-epic-name {
  font-family: 'Cinzel Decorative', 'Orbitron', monospace;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}
.boss-epic-species {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 3px;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Card body */
.boss-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.boss-lore-text {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid var(--boss-color);
  padding-left: 10px;
}
.boss-section-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-top: 2px;
}
.boss-abilities-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.boss-ability-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 2px solid;
  padding: 4px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 0 6px 6px 0;
}
.boss-ability-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.boss-ability-text {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.5px;
}

/* HP section */
.boss-hp-section { display: flex; flex-direction: column; gap: 6px; }
.boss-hp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.boss-hp-label-txt {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.boss-hp-counter {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
}
.boss-hp-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.boss-hp-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  box-shadow: 0 0 8px var(--boss-glow);
}
.boss-hp-complete {
  background: linear-gradient(90deg,#4ade80,#22c55e);
  width: 100%;
  opacity: 0.25;
}
.boss-dmg-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.5px;
}

/* Reward row */
.boss-reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}
.boss-reward-label {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
}
.boss-reward-text {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* ============================================================
   CREATURE MODAL — SCROLL FIX + ART ANIMATIONS
   ============================================================ */

/* Fix modal bg to scroll from top instead of centering tall content */
.creature-modal-bg {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: 32px 20px !important;
}

/* Taller art area so full creature is visible */
.cm-art-header {
  height: 340px !important;
  overflow: hidden;
}

/* Ken Burns — slow zoom + slight drift on unlocked creatures */
.cm-art-alive {
  animation: cm-ken-burns 9s ease-in-out infinite alternate;
  transform-origin: center 30%;
}
@keyframes cm-ken-burns {
  0%   { transform: scale(1)    translateY(0px); }
  50%  { transform: scale(1.06) translateY(-8px); }
  100% { transform: scale(1.1)  translateY(-4px); }
}

/* Scan line sweeping down the art */
.cm-art-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: cm-scan 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes cm-scan {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Glowing color bar at bottom of art */
.cm-art-glow-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.7;
  z-index: 4;
  animation: cm-glow-pulse 2s ease-in-out infinite;
}
@keyframes cm-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* Nameplate slides up on open */
.cm-art-entrance {
  animation: cm-entrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cm-entrance {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal border glows with creature color on open */
.creature-modal {
  animation: cm-modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes cm-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Creature modal — show full creature with contain */
.cm-art-img {
  object-fit: contain !important;
  object-position: center center !important;
  background: radial-gradient(ellipse at center, #0d0d1e 0%, #060610 100%);
}
.cm-art-header {
  background: radial-gradient(ellipse at 50% 30%, #111128 0%, #060610 100%) !important;
}

/* ============================================================
   MOBILE RESPONSIVE — FULL OVERHAUL
   ============================================================ */
@media (max-width: 768px) {

  /* === HEADER === */
  .hamburger-btn { display: flex; }
  .header-date { display: none; }
  .game-header { gap: 12px; padding: 0 14px; }

  /* === SIDEBAR — slide-in drawer === */
  .game-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -290px !important;
    width: 270px !important;
    z-index: 9000 !important;
    padding-top: calc(var(--header-h) + 8px) !important;
    transition: left .3s cubic-bezier(.4,0,.2,1) !important;
  }
  .game-sidebar.sidebar-open {
    left: 0 !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.9) !important;
  }

  /* === CONTENT — full width === */
  .game-content { margin-left: 0 !important; padding: 12px 10px !important; }

  /* === QUEST GRID — single column === */
  .quest-grid { grid-template-columns: 1fr !important; }

  /* COMPLETE badge stays in corner — reduce meta right-padding */
  .quest-card.done .quest-meta { padding-right: 72px; }

  /* Quest button — bigger touch target */
  .quest-btn { padding: 12px !important; min-height: 44px; }

  /* === TABS — scrollable, touch-friendly === */
  nav.tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px !important;
  }
  nav.tab-nav::-webkit-scrollbar { display: none; }
  /* fade the right edge so it reads as scrollable */
  nav.tab-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  nav.tab-nav.at-end {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .tab-btn { font-size: 9px !important; padding: 10px 12px !important; white-space: nowrap; min-height: 44px; }

  /* === OTHER GRIDS === */
  #boss-grid { grid-template-columns: 1fr !important; }
  .creature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .creature-card { min-height: 200px !important; }
  .armory-grid { grid-template-columns: 1fr !important; }

  /* === MODALS === */
  .boss-modal, .creature-modal { margin: 0 !important; border-radius: 12px !important; }
  #boss-modal-bg, .creature-modal-bg { padding: 10px !important; }

  /* === CHARACTER SELECT === */
  #screen-select { padding: 24px 14px calc(32px + var(--cbar-h,34px)) !important; }
  .select-tag { font-size: .55rem !important; letter-spacing: 3px !important; text-align: center; }
  .select-title { margin-bottom: 18px !important; }
  .select-lore { font-size: .8rem !important; margin: 8px auto 22px !important; }
  .select-grid { gap: 20px !important; width: 100%; }
  .char-card { width: 100% !important; max-width: 340px; }
  .char-card img { height: 200px !important; }
  .char-info { padding: 14px !important; }

  /* === DEV / AUDIO === */
  #dev-toggle { bottom: 14px; right: 14px; }
  #dev-panel { width: calc(100vw - 28px); right: 14px; }
  #audio-toggle-btn { right: 80px !important; top: 11px !important; }
}

@media (max-width: 480px) {
  .intro-title { font-size: 2rem !important; }
  .boss-epic-name { font-size: 14px !important; }
  .bm-boss-name { font-size: 1.3rem !important; }
  .game-content { padding: 8px !important; }
  .header-logo { font-size: .8rem !important; letter-spacing: 2px !important; }
  .header-stat .label { display: none; }
}

/* ── Clickable gate dots (past days) ── */
.gate-dot-clickable {
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.gate-dot-clickable:hover {
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(139,92,246,0.7);
  background: rgba(139,92,246,0.35) !important;
  border-color: #7c3aed !important;
}
.gate-dot-clickable:active {
  transform: scale(0.95);
}

/* ══════════════════════════════════════════════
   DATE PICKER STRIP — Daily Quests
══════════════════════════════════════════════ */
.date-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: #3b2060 transparent;
  margin-bottom: 4px;
}
.date-strip::-webkit-scrollbar { height: 4px; }
.date-strip::-webkit-scrollbar-track { background: transparent; }
.date-strip::-webkit-scrollbar-thumb { background: #3b2060; border-radius: 4px; }

.date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  padding: 8px 6px 6px;
  background: rgba(20,10,40,.6);
  border: 1px solid rgba(59,32,96,.5);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.date-chip:hover { background: rgba(124,58,237,.2); border-color: #7c3aed; transform: translateY(-2px); }
.date-chip.selected { background: rgba(124,58,237,.35); border-color: #7c3aed; box-shadow: 0 0 10px rgba(124,58,237,.4); }
.date-chip.is-today { border-color: #22d3ee; }
.date-chip.is-today .ds-daynum { color: #22d3ee; }
.date-chip.future { opacity: 0.45; }
.date-chip.selected.is-today { border-color: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,.4); }

.ds-dayname { font-size: .55rem; color: #64748b; letter-spacing: .05em; font-weight: 700; }
.ds-daynum  { font-size: .95rem; color: #e2e8f0; font-weight: 800; line-height: 1; }
.ds-month   { font-size: .5rem;  color: #475569; letter-spacing: .04em; }
.ds-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: #64748b; font-weight: 700; margin-top: 2px;
}
.ds-dot.partial { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; }
.ds-dot.full    { background: rgba(34,197,94,.2);   border-color: #22c55e; color: #22c55e; }

/* Quest date label */
.quest-date-label { margin: 6px 0 10px; min-height: 24px; }
.qdl-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  padding: 4px 12px; border-radius: 6px;
}
.qdl-tag.today  { background: rgba(34,211,238,.15); color: #22d3ee; border: 1px solid rgba(34,211,238,.3); }
.qdl-tag.past   { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.qdl-tag.future { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }

/* Future quest button */
.quest-btn.future-btn { opacity: .4; cursor: not-allowed; background: rgba(100,116,139,.2) !important; }

/* ══════════════════════════════════════════════
   CALENDAR GRID — Daily Quests date picker
══════════════════════════════════════════════ */
#quest-date-strip { padding: 8px 0 4px; }

.cal-year-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.cal-year-btn {
  padding: 5px 14px; border-radius: 8px; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; cursor: pointer;
  background: rgba(20,10,40,.6); border: 1px solid rgba(59,32,96,.5); color: #64748b;
  transition: all .15s;
}
.cal-year-btn:hover { border-color: #7c3aed; color: #a78bfa; }
.cal-year-btn.active { background: rgba(124,58,237,.3); border-color: #7c3aed; color: #e2e8f0; }

.cal-month-row {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px;
}
.cal-month-btn {
  padding: 4px 10px; border-radius: 6px; font-size: .65rem; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
  background: rgba(20,10,40,.6); border: 1px solid rgba(59,32,96,.4); color: #64748b;
  transition: all .15s;
}
.cal-month-btn:hover { border-color: #7c3aed; color: #a78bfa; }
.cal-month-btn.active { background: rgba(124,58,237,.25); border-color: #7c3aed; color: #c4b5fd; }

.cal-month-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  color: #a78bfa; margin-bottom: 8px;
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 12px;
}
.cal-hdr {
  text-align: center; font-size: .6rem; font-weight: 700;
  color: #475569; letter-spacing: .06em; padding: 2px 0 4px;
}
.cal-empty { min-height: 52px; }
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 8px; cursor: pointer; min-height: 52px;
  background: rgba(20,10,40,.5); border: 1px solid rgba(59,32,96,.3);
  transition: all .15s;
}
.cal-day:hover { background: rgba(124,58,237,.2); border-color: #7c3aed; transform: translateY(-1px); }
.cal-day.selected { background: rgba(124,58,237,.35); border-color: #7c3aed; box-shadow: 0 0 10px rgba(124,58,237,.4); }
.cal-day.is-today { border-color: #22d3ee; }
.cal-day.is-today .cal-day-num { color: #22d3ee; }
.cal-day.future { opacity: .35; pointer-events: none; }
.cal-day.all-done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); }
.cal-day.partial  { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.3); }
.cal-day.selected.is-today { box-shadow: 0 0 12px rgba(34,211,238,.4); }

.cal-day-num { font-size: .8rem; font-weight: 800; color: #e2e8f0; line-height: 1; }
.cal-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; color: #475569; font-weight: 700;
}
.cal-dot.partial { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; }
.cal-dot.full    { background: rgba(34,197,94,.2);   border-color: #22c55e; color: #22c55e; }

/* ══════════════════════════════════════════════
   GATE SYSTEM — Year sections 2024-2028
══════════════════════════════════════════════ */
.gate-year-section { margin-bottom: 8px; }

.gate-year-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 6px;
  background: rgba(20,10,40,.7); border: 1px solid rgba(59,32,96,.5);
  border-radius: 10px; cursor: pointer; transition: all .15s;
}
.gate-year-header:hover { border-color: #7c3aed; background: rgba(124,58,237,.15); }
.gate-year-label {
  font-size: 1rem; font-weight: 900; letter-spacing: .15em; color: #a78bfa;
}
.gate-year-stats { font-size: .65rem; color: #64748b; letter-spacing: .06em; flex: 1; }
.gate-year-chevron { font-size: .75rem; color: #7c3aed; font-weight: 700; }

.gate-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; padding: 4px 0 8px;
}
.future-gate { opacity: .45; }

/* ══════════════════════════════════════════════
   CALENDAR GRID — Daily Quests date picker
══════════════════════════════════════════════ */
#quest-date-strip { padding: 6px 0 4px; }

.cal-year-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.cal-year-btn {
  padding: 5px 14px; border-radius: 8px; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; cursor: pointer;
  background: rgba(15,8,30,.8); border: 1px solid rgba(59,32,96,.5); color: #64748b;
  transition: all .15s;
}
.cal-year-btn:hover { border-color: #7c3aed; color: #a78bfa; }
.cal-year-btn.active { background: rgba(124,58,237,.35); border-color: #7c3aed; color: #e2e8f0; }

.cal-month-row {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;
}
.cal-month-btn {
  padding: 4px 10px; border-radius: 6px; font-size: .65rem; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
  background: rgba(15,8,30,.8); border: 1px solid rgba(59,32,96,.4); color: #64748b;
  transition: all .15s;
}
.cal-month-btn:hover { border-color: #7c3aed; color: #a78bfa; }
.cal-month-btn.active { background: rgba(124,58,237,.3); border-color: #7c3aed; color: #c4b5fd; }

/* Solid panel wrapping the grid */
.cal-panel {
  background: rgba(8,4,20,.92);
  border: 1px solid rgba(59,32,96,.6);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(12px);
}
.cal-month-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: #a78bfa; margin-bottom: 8px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-hdr {
  text-align: center; font-size: .58rem; font-weight: 700;
  color: #475569; letter-spacing: .05em; padding: 2px 0 5px;
}
.cal-empty { min-height: 36px; }

.cal-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 4px 2px; border-radius: 6px; cursor: pointer;
  min-height: 36px; min-width: 0;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: all .12s; position: relative;
}
.cal-day:hover { background: rgba(124,58,237,.25); border-color: #7c3aed; }
.cal-day.selected { background: rgba(124,58,237,.4); border-color: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,.5); }
.cal-day.is-today  { border-color: #22d3ee; }
.cal-day.is-today .cal-day-num { color: #22d3ee; font-weight: 900; }
.cal-day.future    { opacity: .3; pointer-events: none; }
.cal-day.all-done  { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.5); }
.cal-day.partial   { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }

.cal-day-num { font-size: .75rem; font-weight: 800; color: #cbd5e1; line-height: 1; }
.cal-check   { font-size: .55rem; color: #22c55e; font-weight: 900; line-height: 1; }
.cal-partial { font-size: .5rem;  color: #fbbf24; font-weight: 800; line-height: 1; }

/* Quest date label */
.quest-date-label { margin: 8px 0 10px; min-height: 22px; }
.qdl-tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  padding: 4px 12px; border-radius: 6px;
}
.qdl-tag.today  { background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.3); }
.qdl-tag.past   { background: rgba(139,92,246,.1);  color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.qdl-tag.future { background: rgba(100,116,139,.1); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.quest-btn.future-btn { opacity: .4; cursor: not-allowed; }


/* ══════════════════════════════════════════════
   CALENDAR TOGGLE BUTTON + COLLAPSIBLE
══════════════════════════════════════════════ */
.cal-toggle-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  background: rgba(15,8,30,.85);
  border: 1px solid rgba(124,58,237,.35);
  border-radius: 10px; cursor: pointer;
  transition: all .2s; margin-bottom: 4px;
}
.cal-toggle-btn:hover {
  background: rgba(124,58,237,.2);
  border-color: #7c3aed;
  box-shadow: 0 0 12px rgba(124,58,237,.25);
}
.cal-toggle-icon  { font-size: 1rem; }
.cal-toggle-label {
  flex: 1; text-align: left;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; color: #a78bfa;
}
.cal-chevron {
  font-size: .7rem; color: #7c3aed; font-weight: 700;
  transition: transform .2s;
}

.cal-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}

/* Fix calendar panel sizing — max-width + compact cells */
.cal-panel { max-width: 420px; }
.cal-grid  { gap: 4px; }
.cal-day   { min-height: 38px; max-height: 42px; }

/* ══════════════════════════════════════════════
   ACHIEVEMENTS TAB
══════════════════════════════════════════════ */
.ach-header { margin-bottom:14px; }
.ach-count-label { font-size:.7rem; font-weight:800; letter-spacing:.1em; color:#7c3aed; }
.achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.ach-card {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:rgba(15,8,30,.7); border:1px solid rgba(59,32,96,.4); border-radius:10px;
  opacity:.5; transition:all .2s;
}
.ach-card.unlocked { opacity:1; border-color:rgba(124,58,237,.5); background:rgba(124,58,237,.08); }
.ach-icon { font-size:1.6rem; min-width:32px; text-align:center; }
.ach-body { flex:1; }
.ach-name { font-size:.72rem; font-weight:800; letter-spacing:.1em; color:#e2e8f0; margin-bottom:2px; }
.ach-desc { font-size:.63rem; color:#64748b; }
.ach-xp  { font-size:.6rem; color:#a78bfa; margin-top:4px; font-weight:700; }
.ach-badge { font-size:.8rem; color:#22c55e; font-weight:900; }

/* ══════════════════════════════════════════════
   STATS RADAR CHART
══════════════════════════════════════════════ */
.radar-wrap {
  display:flex; flex-direction:column; align-items:center;
  background:rgba(8,4,20,.85); border:1px solid rgba(59,32,96,.5);
  border-radius:12px; padding:16px; margin-bottom:20px;
  max-width:320px;
}
.radar-title {
  font-size:.68rem; font-weight:800; letter-spacing:.12em;
  color:#a78bfa; margin-bottom:10px;
}
#stats-radar { display:block; }

/* ══════════════════════════════════════════════
   DAY COMPLETE OVERLAY
══════════════════════════════════════════════ */
.day-complete-overlay {
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.day-complete-overlay.open { opacity:1; pointer-events:all; }
.dc-box {
  background:rgba(8,4,20,.97); border:2px solid #7c3aed;
  border-radius:16px; padding:32px 40px; text-align:center;
  box-shadow:0 0 60px rgba(124,58,237,.5);
  animation:dc-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dc-pop { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.dc-title { font-family:'Orbitron',sans-serif; font-size:1.4rem; font-weight:900; color:#a78bfa; letter-spacing:.15em; margin-bottom:4px; }
.dc-subtitle { font-size:.65rem; letter-spacing:.2em; color:#64748b; margin-bottom:20px; }
.dc-stat { font-size:.85rem; font-weight:800; letter-spacing:.1em; color:#e2e8f0; margin:6px 0; }
.dc-stat.highlight { font-size:1.1rem; color:#22d3ee; }
.dc-bonus { font-size:.7rem; color:#fbbf24; font-weight:700; letter-spacing:.08em; margin:3px 0; min-height:1em; }
.dc-hint { font-size:.55rem; color:#334155; margin-top:18px; letter-spacing:.1em; }

/* ══════════════════════════════════════════════
   WEEKLY RECAP OVERLAY
══════════════════════════════════════════════ */
.weekly-recap-overlay {
  position:fixed; inset:0; z-index:9400;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.weekly-recap-overlay.open { opacity:1; pointer-events:all; }
.wr-box {
  background:rgba(8,4,20,.97); border:2px solid #0ea5e9;
  border-radius:16px; padding:28px 36px; text-align:center; min-width:280px;
  box-shadow:0 0 50px rgba(14,165,233,.4);
  animation:dc-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.wr-title { font-family:'Orbitron',sans-serif; font-size:1rem; font-weight:900; color:#38bdf8; letter-spacing:.15em; margin-bottom:4px; }
.wr-week { font-size:.65rem; color:#64748b; letter-spacing:.1em; margin-bottom:16px; }
.wr-grid { display:grid; gap:8px; margin-bottom:16px; }
.wr-stat { font-size:.75rem; font-weight:700; letter-spacing:.08em; color:#e2e8f0; padding:6px 12px; background:rgba(255,255,255,.04); border-radius:8px; }
.wr-stat.rank { color:#fbbf24; }
.wr-stat.best { color:#22c55e; }
.wr-stat.worst { color:#f87171; }

/* ══════════════════════════════════════════════
   STREAK PILLS ON QUEST CARDS
══════════════════════════════════════════════ */
.reward-pill.habit-streak { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:#f87171; }
.reward-pill.streak-mult  { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.3); color:#fbbf24; font-weight:900; }

/* ═══════════════════════════════════════════════
   QUEST COMPLETE — STAT GAIN VISUAL FEEDBACK
═══════════════════════════════════════════════ */
.stat-gain-fly{position:fixed;z-index:9000;font-family:"Orbitron",sans-serif;font-weight:700;font-size:.85rem;pointer-events:none;transition:transform 0.85s cubic-bezier(.2,.8,.3,1),opacity 0.85s ease;opacity:1;text-shadow:0 0 12px currentColor;}
.stat-gain-fly.flying{transform:var(--fly-transform);opacity:0;}

.stat-row.stat-pulse{animation:statPulse .6s ease;}
@keyframes statPulse{
  0%{transform:scale(1);}
  30%{transform:scale(1.08);}
  60%{transform:scale(0.98);}
  100%{transform:scale(1);}
}
.stat-row.stat-pulse .stat-bar-fill{filter:brightness(1.6);}
.stat-row.stat-pulse .stat-value{transform:scale(1.3);transition:transform .3s ease;}
.stat-row .stat-value{display:inline-block;transition:transform .3s ease;}

.stat-bar-fill{position:relative;overflow:visible;}
.stat-row.stat-pulse .stat-bar-wrap{box-shadow:0 0 12px 2px currentColor;}

.quest-card.completing{animation:questPop .5s ease;}
@keyframes questPop{
  0%{transform:scale(1);}
  35%{transform:scale(1.025);box-shadow:0 0 24px rgba(34,211,238,.35);}
  100%{transform:scale(1);}
}

.xp-burst{position:fixed;z-index:9000;pointer-events:none;font-family:"Orbitron",sans-serif;font-size:.9rem;font-weight:800;color:#facc15;text-shadow:0 0 14px rgba(250,204,21,.8);animation:xpBurstFloat 1s ease forwards;}
@keyframes xpBurstFloat{
  0%{opacity:0;transform:translateY(0) scale(.7);}
  15%{opacity:1;transform:translateY(-6px) scale(1.15);}
  70%{opacity:1;transform:translateY(-38px) scale(1);}
  100%{opacity:0;transform:translateY(-56px) scale(.9);}
}

/* ═══════════════════════════════════════════════
   GATE CARD — enhanced with shimmer + progress glow
═══════════════════════════════════════════════ */
.gate-card{position:relative;overflow:hidden;}
.gate-card::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(34,211,238,.08),transparent);transition:left 1.2s ease;pointer-events:none;}
.gate-card:hover::before{left:130%;}
.gate-card.active-gate{border-color:var(--cyan);animation:gateActivePulse 2.4s ease-in-out infinite;}
@keyframes gateActivePulse{
  0%,100%{box-shadow:0 0 18px rgba(34,211,238,.15);}
  50%{box-shadow:0 0 34px rgba(34,211,238,.35),0 0 60px rgba(34,211,238,.1);}
}
.gate-card.cleared-gate{position:relative;}
.gate-card.cleared-gate::after{content:"✓";position:absolute;top:14px;right:16px;color:#4ade80;font-size:1.1rem;font-weight:900;text-shadow:0 0 10px rgba(74,222,128,.6);}
.gate-progress-fill,.gate-days-mini .gate-day-mini.done{transition:.3s;}
.gate-card.active-gate .gate-card-title{text-shadow:0 0 12px rgba(34,211,238,.5);}
.gate-day-mini{transition:transform .2s ease,box-shadow .2s ease;}
.gate-day-mini.done{box-shadow:0 0 8px rgba(34,211,238,.5);}
.gate-day-mini.today{animation:gateTodayBlink 1.6s ease-in-out infinite;}
@keyframes gateTodayBlink{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ═══════════════════════════════════════════════
   DAY COMPLETE / WEEKLY RECAP — shimmer polish
═══════════════════════════════════════════════ */
.dc-box,.wr-box{position:relative;}
.dc-box::before,.wr-box::before{content:"";position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent);background-size:200% 100%;animation:boxShimmer 2.6s linear infinite;pointer-events:none;opacity:.5;}
@keyframes boxShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.dc-title{animation:dcTitleGlow 1.8s ease-in-out infinite;}
@keyframes dcTitleGlow{
  0%,100%{text-shadow:0 0 12px rgba(167,139,250,.4);}
  50%{text-shadow:0 0 26px rgba(167,139,250,.8),0 0 46px rgba(167,139,250,.3);}
}
.dc-stat.highlight{animation:dcNumPop .5s cubic-bezier(.34,1.56,.64,1) .3s both;}
@keyframes dcNumPop{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
.wr-title{animation:dcTitleGlow 1.8s ease-in-out infinite;}
.wr-stat{transition:transform .2s ease;}
.wr-stat:hover{transform:translateY(-2px);}

/* Weapon drop shimmer too */
.weapon-drop{position:relative;}
.weapon-drop::before{content:"";position:absolute;inset:-2px;border-radius:8px;background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent);background-size:200% 100%;animation:boxShimmer 2.6s linear infinite;pointer-events:none;}

/* ============================================================
   RETENTION SYSTEMS  (systems.js)
   Daily directive, streak shields, shadow caches, proximity scan.
   Appended as its own section -- no selector above this line is
   touched, so the original design system is unaffected.
   ============================================================ */

#sx-top{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}

/* ── streak at risk ── */
.sx-risk{background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.45);
  border-left:3px solid #fb7185;border-radius:var(--radius-sm);padding:10px 14px;
  font-family:'Rajdhani',sans-serif;font-size:.85rem;letter-spacing:.5px;color:#fda4af;}
.sx-risk b{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:2px;color:#fb7185;}

/* ── daily directive ── */
.sx-directive{background:linear-gradient(135deg,rgba(124,58,237,.16) 0%,rgba(8,12,32,.92) 55%);
  border:1px solid rgba(167,139,250,.38);border-radius:var(--radius);padding:14px 16px;
  position:relative;overflow:hidden;}
.sx-directive::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 0% 0%,rgba(167,139,250,.18),transparent 60%);}
.sx-directive.done{border-color:rgba(74,222,128,.5);
  background:linear-gradient(135deg,rgba(74,222,128,.13) 0%,rgba(8,12,32,.92) 55%);}
.sx-d-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  position:relative;z-index:1;}
.sx-d-tag{font-family:'Orbitron',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:4px;
  color:var(--violet);}
.sx-directive.done .sx-d-tag{color:#4ade80;}
.sx-d-timer{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:2px;
  color:var(--text-dim);border:1px solid var(--border-dim);border-radius:20px;padding:3px 10px;}
.sx-d-body{display:flex;align-items:center;gap:14px;position:relative;z-index:1;}
.sx-d-icon{font-size:1.9rem;flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.16);border:1px solid rgba(167,139,250,.32);}
.sx-d-main{flex:1;min-width:0;}
.sx-d-name{font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:2px;
  color:var(--text-primary);}
.sx-d-desc{font-size:.85rem;color:rgba(226,232,240,.62);margin:2px 0 8px;}
.sx-d-bar{height:6px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;}
.sx-d-fill{height:100%;border-radius:6px;transition:width .5s cubic-bezier(.25,.8,.25,1);
  background:linear-gradient(90deg,#7c3aed,#a78bfa,#22d3ee);box-shadow:0 0 12px rgba(167,139,250,.6);}
.sx-directive.done .sx-d-fill{background:linear-gradient(90deg,#22c55e,#4ade80);
  box-shadow:0 0 12px rgba(74,222,128,.6);}
.sx-d-reward{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:3px;}
.sx-d-xp{font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1px;color:#fbbf24;}
.sx-d-cache{font-size:.72rem;color:rgba(255,255,255,.55);}
.sx-d-count{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:2px;color:var(--text-dim);}

/* ── status chips ── */
.sx-status{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;}
.sx-chip{flex:1 1 0;min-width:96px;background:var(--bg-card);border:1px solid var(--border-dim);
  border-radius:var(--radius-sm);padding:9px 12px;display:flex;flex-direction:column;gap:2px;}
.sx-chip.live{border-color:rgba(251,191,36,.6);box-shadow:0 0 18px rgba(251,191,36,.16);}
.sx-chip.rebuild{border-color:rgba(34,211,238,.6);}
.sx-chip.rebuild .sx-chip-n{color:#22d3ee;}
.sx-chip-n{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:1px;}
.sx-chip-l{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:2px;color:var(--text-dim);}
.sx-open-btn{flex:0 0 auto;align-self:stretch;}

.sx-btn{font-family:'Orbitron',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:2px;
  padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;
  background:transparent;border:1px solid var(--border-mid);color:var(--text-primary);min-height:44px;}
.sx-btn:hover{border-color:var(--border-bright);}
.sx-btn-primary{background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(34,211,238,.22));
  border-color:rgba(167,139,250,.6);}
.sx-btn-primary:hover{box-shadow:0 0 24px rgba(124,58,237,.45);}

/* ── proximity scan ── */
.sx-scan{margin-top:22px;}
.sx-scan-head{font-family:'Orbitron',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:4px;
  color:var(--text-dim);margin-bottom:10px;}
.sx-scan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sx-scan-item{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius-sm);
  padding:12px;text-align:center;transition:all .25s;}
.sx-scan-item:hover{border-color:var(--border-mid);transform:translateY(-2px);}
.sx-scan-icon{font-size:1.4rem;margin-bottom:6px;}
.sx-scan-name{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:1.5px;
  color:var(--text-primary);line-height:1.5;min-height:2.4em;}
.sx-scan-need{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;color:var(--cyan);margin-top:6px;}
.sx-scan-need span{font-size:.5rem;letter-spacing:1.5px;color:var(--text-dim);display:block;margin-top:2px;}

/* ── cache reward overlay ── */
.sx-cache-overlay{position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.94);
  display:none;align-items:center;justify-content:center;padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));}
.sx-cache-overlay.open{display:flex;animation:fadeIn .25s ease;}
.sx-cache-card{background:var(--bg-panel);border:2px solid var(--border-mid);border-radius:var(--radius);
  padding:34px 30px;text-align:center;max-width:340px;width:100%;
  box-shadow:0 0 60px rgba(124,58,237,.4);}
.sx-cache-glyph{font-size:3.6rem;animation:sx-pop .55s cubic-bezier(.2,1.5,.4,1);}
.sx-cache-tier{font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:4px;
  margin:14px 0 8px;}
.sx-cache-reward{font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:2px;
  color:#fbbf24;line-height:1.5;margin-bottom:22px;}
.sx-cache-reward span{font-size:.75rem;letter-spacing:2px;}
@keyframes sx-pop{0%{transform:scale(0) rotate(-25deg);opacity:0}
  60%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

@media (max-width: 768px) {
  .sx-d-body{gap:10px;}
  .sx-d-icon{width:44px;height:44px;font-size:1.5rem;}
  .sx-d-name{font-size:.72rem;}
  .sx-d-desc{font-size:.8rem;}
  .sx-d-reward{display:none;}            /* the count lives in the bar on mobile */
  .sx-d-timer{font-size:.5rem;}
  .sx-status{gap:8px;}
  .sx-chip{min-width:0;flex:1 1 30%;padding:8px 10px;}
  .sx-chip-n{font-size:.78rem;}
  .sx-open-btn{flex:1 1 100%;}
  .sx-scan-grid{grid-template-columns:1fr;gap:8px;}
  .sx-scan-item{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;}
  .sx-scan-icon{margin:0;font-size:1.2rem;}
  .sx-scan-name{flex:1;min-height:0;}
  .sx-scan-need{margin:0;font-size:.9rem;text-align:right;}
  .sx-scan-need span{display:inline;margin:0;}
}