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

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

:root{
  --bg:#070b1a;
  --card:rgba(12,20,50,0.75);
  --card-border:rgba(100,160,255,0.12);
  --cyan:#00d4ff;
  --purple:#a855f7;
  --green:#22c55e;
  --amber:#f59e0b;
  --text:#e2e8f0;
  --muted:#7088a8;
  --glow-cyan:0 0 30px rgba(0,212,255,0.15);
  --glow-purple:0 0 30px rgba(168,85,247,0.15);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

#stars{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
}

.container{
  position:relative;z-index:1;
  max-width:920px;margin:0 auto;
  padding:24px 16px 60px;
}

/* ---- Header ---- */
header{text-align:center;margin-bottom:32px}

.logo{display:flex;align-items:center;justify-content:center;gap:12px}
.logo h1{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.2rem,4vw,2.2rem);
  font-weight:900;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo-icon{font-size:1.5rem}
.logo-icon.flip{display:inline-block;transform:scaleX(-1)}

.subtitle{
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;color:var(--muted);
  letter-spacing:3px;text-transform:uppercase;
  margin-top:6px;
}

/* ---- Profile Cards ---- */
.profiles{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-bottom:28px;
}

.profile-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;padding:20px;
  text-align:center;
  backdrop-filter:blur(12px);
  transition:transform 0.25s,box-shadow 0.25s;
}
.profile-card:hover{transform:translateY(-3px)}
.profile-card.glow-cyan{box-shadow:var(--glow-cyan)}
.profile-card.glow-purple{box-shadow:var(--glow-purple)}

.avatar{font-size:2.2rem;margin-bottom:4px}
.profile-card h2{
  font-family:'Orbitron',sans-serif;
  font-size:1.1rem;margin-bottom:6px;
}
.glow-cyan h2{color:var(--cyan)}
.glow-purple h2{color:var(--purple)}

.rank{
  font-size:0.65rem;color:var(--amber);
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;margin-bottom:8px;
}
.crystals{font-size:1rem;font-weight:600;margin-bottom:10px}
.crystal-icon{margin-right:4px}

.pbar{
  height:6px;background:rgba(255,255,255,0.08);
  border-radius:3px;overflow:hidden;margin-bottom:4px;
}
.pbar-fill{
  height:100%;border-radius:3px;
  transition:width 0.6s ease;
}
.glow-cyan .pbar-fill{background:linear-gradient(90deg,var(--cyan),#22d3ee)}
.glow-purple .pbar-fill{background:linear-gradient(90deg,var(--purple),#c084fc)}

.pbar-label{font-size:0.55rem;color:var(--muted)}

/* ---- Station Boxes ---- */
.stations{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-bottom:28px;
}

.station-box{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;padding:12px;
  text-align:center;
  backdrop-filter:blur(12px);
}
.station-title{
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:8px;
}
.station-title.cyan{color:var(--cyan)}
.station-title.purple{color:var(--purple)}

.station-box canvas{
  display:block;margin:0 auto;
  max-width:100%;height:auto;
  border-radius:8px;
}
.station-label{
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;color:var(--muted);
  margin-top:8px;letter-spacing:1px;
  line-height:1.6;
}

/* ---- Mission Board ---- */
.mission-board{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;padding:24px;
  backdrop-filter:blur(12px);
  margin-bottom:28px;
}
/* Month Navigation */
.month-nav{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.month-arrow{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text);width:32px;height:32px;
  border-radius:8px;cursor:pointer;
  font-size:0.7rem;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;
}
.month-arrow:hover:not(:disabled){background:rgba(255,255,255,0.12)}
.month-arrow:disabled{opacity:0.25;cursor:default}

.month-tabs{
  display:flex;gap:4px;flex-wrap:wrap;justify-content:center;
}
.month-tab{
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;letter-spacing:1px;
  padding:6px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:transparent;color:var(--muted);
  cursor:pointer;transition:all 0.2s;
}
.month-tab:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}
.month-tab.active{
  background:rgba(0,212,255,0.12);
  border-color:var(--cyan);color:var(--cyan);
}

.month-add{
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;letter-spacing:1px;
  padding:6px 14px;border-radius:8px;
  border:1px dashed rgba(34,197,94,0.4);
  background:transparent;color:var(--green);
  cursor:pointer;transition:all 0.2s;
}
.month-add:hover{background:rgba(34,197,94,0.1);border-style:solid}

.mission-hdr{text-align:center;margin-bottom:20px}
.mission-hdr h2{
  font-family:'Orbitron',sans-serif;
  font-size:1rem;color:var(--amber);
}
.mission-hdr p{
  font-size:0.65rem;color:var(--muted);
  font-family:'Orbitron',sans-serif;
  letter-spacing:2px;margin-top:4px;
}

.tasks-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tasks-col h3{
  font-family:'Orbitron',sans-serif;
  font-size:0.7rem;color:var(--cyan);
  margin-bottom:10px;
}

.task-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;margin-bottom:8px;
  transition:all 0.3s;
  cursor:default;
}
.task-item.admin-active{cursor:pointer}
.task-item.admin-active:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.15);
}

.task-check{
  width:22px;height:22px;border-radius:6px;
  border:2px solid rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.3s;
  font-size:0.7rem;
}
.task-item.done .task-check{
  background:var(--green);border-color:var(--green);
  box-shadow:0 0 10px rgba(34,197,94,0.3);
}

.task-info{flex:1}
.task-name{font-size:0.75rem;font-weight:600}
.task-desc{font-size:0.55rem;color:var(--muted);margin-top:2px}
.task-reward{
  font-size:0.6rem;color:var(--amber);
  font-weight:600;white-space:nowrap;
}
.task-item.done .task-name{text-decoration:line-through;opacity:0.5}
.task-item.done .task-reward{color:var(--green)}

.bonus-bar{
  text-align:center;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.6rem;color:var(--muted);
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
}
.bonus-bar .active{color:var(--green)}

/* ---- Info Section ---- */
.info-section{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.info-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;padding:20px;
  backdrop-filter:blur(12px);
}
.info-card h3{
  font-family:'Orbitron',sans-serif;
  font-size:0.8rem;margin-bottom:12px;
}
.info-desc{font-size:0.6rem;color:var(--muted);margin-bottom:10px}

.rank-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;font-size:0.6rem;
  opacity:0.35;transition:opacity 0.3s;
}
.rank-row.unlocked{opacity:1}
.rank-row .r-icon{font-size:1rem;width:24px;text-align:center}
.rank-row .r-name{flex:1;font-weight:600}
.rank-row .r-cost{color:var(--muted);font-size:0.5rem}

.creature-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;font-size:0.6rem;
  opacity:0.25;transition:opacity 0.3s;
}
.creature-row.unlocked{opacity:1}
.creature-row .c-dot{
  width:12px;height:12px;border-radius:50%;
  flex-shrink:0;
}
.creature-row.unlocked .c-dot{
  box-shadow:0 0 8px currentColor;
}
.creature-row .c-name{flex:1;font-weight:500}
.creature-row .c-req{color:var(--muted);font-size:0.5rem}

/* ---- Admin ---- */
.admin-btn{
  position:fixed;bottom:16px;right:16px;z-index:50;
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(12,20,50,0.85);
  color:var(--text);font-size:1.2rem;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background 0.2s;
}
.admin-btn:hover{background:rgba(20,30,70,0.9)}

.admin-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:49;
  padding:10px 20px;
  background:rgba(34,197,94,0.12);
  border-top:1px solid rgba(34,197,94,0.3);
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.65rem;color:var(--green);
  font-family:'Orbitron',sans-serif;
  backdrop-filter:blur(12px);
}
.admin-bar button{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:var(--text);padding:6px 14px;
  border-radius:8px;font-size:0.6rem;
  font-family:'Orbitron',sans-serif;
  cursor:pointer;
}
.admin-bar button:hover{background:rgba(255,255,255,0.12)}
.hidden{display:none!important}

/* ---- Event Banner ---- */
.event-banner{
  background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(0,212,255,0.15));
  border:1px solid rgba(168,85,247,0.3);
  border-radius:16px;padding:16px 20px;
  text-align:center;margin-bottom:20px;
  backdrop-filter:blur(12px);
}
.event-banner .ev-icon{font-size:1.6rem;display:block;margin-bottom:4px}
.event-banner .ev-name{
  font-family:'Orbitron',sans-serif;font-size:0.85rem;
  color:var(--purple);font-weight:700;
}
.event-banner .ev-desc{font-size:0.6rem;color:var(--muted);margin-top:4px}
.event-banner .ev-bonus{
  font-size:0.55rem;color:var(--amber);margin-top:6px;
  font-family:'Orbitron',sans-serif;letter-spacing:1px;
}

/* ---- Battle Result ---- */
.battle-result{
  text-align:center;padding:14px;margin-bottom:16px;
  border:1px solid rgba(255,68,68,0.2);
  border-radius:12px;background:rgba(255,68,68,0.06);
}
.battle-result .br-icon{font-size:1.4rem}
.battle-result .br-text{
  font-family:'Orbitron',sans-serif;font-size:0.65rem;
  color:var(--amber);margin-top:4px;letter-spacing:1px;
}
.battle-result .br-detail{font-size:0.55rem;color:var(--muted);margin-top:2px}

/* ---- Coop Result ---- */
.coop-result{
  text-align:center;padding:14px;margin-bottom:16px;
  border:1px solid rgba(34,197,94,0.2);
  border-radius:12px;background:rgba(34,197,94,0.06);
}
.coop-result .co-icon{font-size:1.4rem}
.coop-result .co-text{
  font-family:'Orbitron',sans-serif;font-size:0.65rem;
  color:var(--green);margin-top:4px;letter-spacing:1px;
}
.coop-result .co-detail{font-size:0.55rem;color:var(--muted);margin-top:2px}

/* ---- Section Titles ---- */
.section-title{
  font-family:'Orbitron',sans-serif;
  font-size:1rem;text-align:center;
  margin-bottom:16px;color:var(--amber);
}

/* ---- Shop ---- */
.shop-section{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:16px;padding:24px;
  backdrop-filter:blur(12px);margin-bottom:28px;
}
.shop-tabs{
  display:flex;gap:6px;justify-content:center;
  flex-wrap:wrap;margin-bottom:16px;
}
.shop-tab{
  font-family:'Orbitron',sans-serif;font-size:0.55rem;
  letter-spacing:1px;padding:6px 16px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:transparent;color:var(--muted);
  cursor:pointer;transition:all 0.2s;
}
.shop-tab:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}
.shop-tab.active{
  background:rgba(245,158,11,0.12);
  border-color:var(--amber);color:var(--amber);
}
.shop-who{
  display:flex;gap:6px;justify-content:center;
  align-items:center;margin-bottom:14px;flex-wrap:wrap;
}
.shop-who-btn{
  font-family:'Orbitron',sans-serif;font-size:0.5rem;
  padding:5px 12px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.1);
  background:transparent;color:var(--muted);
  cursor:pointer;transition:all 0.2s;
}
.shop-who-btn.active{
  background:rgba(0,212,255,0.12);
  border-color:var(--cyan);color:var(--cyan);
}
.shop-avail{
  font-size:0.55rem;color:var(--amber);
  font-family:'Orbitron',sans-serif;margin-left:8px;
}
.shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.shop-item{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:14px 10px;
  text-align:center;cursor:pointer;
  transition:all 0.25s;
}
.shop-item:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-2px);
}
.shop-item.owned{
  border-color:rgba(34,197,94,0.3);
  background:rgba(34,197,94,0.06);
}
.shop-item.active-item{
  border-color:var(--cyan);
  box-shadow:0 0 12px rgba(0,212,255,0.2);
}
.shop-item .si-icon{font-size:1.6rem;display:block;margin-bottom:6px}
.shop-item .si-name{font-size:0.65rem;font-weight:600;margin-bottom:4px}
.shop-item .si-price{font-size:0.55rem;color:var(--amber)}
.shop-item.owned .si-price{color:var(--green)}
.color-dot{
  width:20px;height:20px;border-radius:50%;
  display:inline-block;margin-bottom:6px;
  border:2px solid rgba(255,255,255,0.15);
}

/* ---- Achievements ---- */
.achieve-section{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:16px;padding:24px;
  backdrop-filter:blur(12px);margin-bottom:28px;
}
.achieve-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.achieve-item{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;padding:14px 8px;
  text-align:center;opacity:0.3;
  transition:all 0.3s;
}
.achieve-item.unlocked{
  opacity:1;
  border-color:rgba(245,158,11,0.3);
  background:rgba(245,158,11,0.06);
}
.achieve-item .ai-icon{font-size:1.4rem;display:block;margin-bottom:4px}
.achieve-item .ai-name{
  font-family:'Orbitron',sans-serif;
  font-size:0.5rem;font-weight:700;
  letter-spacing:0.5px;margin-bottom:2px;
}
.achieve-item .ai-desc{font-size:0.5rem;color:var(--muted)}
.achieve-item .ai-who{
  font-size:0.45rem;color:var(--green);
  margin-top:4px;font-family:'Orbitron',sans-serif;
}

/* ---- Mini-game ---- */
.mg-btn{
  position:fixed;bottom:16px;left:16px;z-index:50;
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(12,20,50,0.85);
  color:var(--text);font-size:1.2rem;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background 0.2s;
}
.mg-btn:hover{background:rgba(20,30,70,0.9)}

.mg-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,0.85);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}
.mg-container{
  position:relative;text-align:center;
}
.mg-close{
  position:absolute;top:-12px;right:-12px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--text);font-size:1.2rem;
  cursor:pointer;display:flex;
  align-items:center;justify-content:center;
}
.mg-close:hover{background:rgba(255,255,255,0.2)}
.mg-canvas{
  display:block;border-radius:12px;
  border:1px solid rgba(0,212,255,0.2);
  background:#070b1a;
}
.mg-hud{
  font-family:'Orbitron',sans-serif;
  font-size:0.6rem;color:var(--cyan);
  letter-spacing:1px;margin-top:10px;
  min-height:1.2em;
}
.mg-controls{
  display:flex;gap:12px;justify-content:center;
  margin-top:12px;
}
.mg-ctrl-btn{
  font-family:'Orbitron',sans-serif;
  font-size:0.6rem;letter-spacing:1px;
  padding:10px 24px;border-radius:10px;
  border:1px solid rgba(0,212,255,0.3);
  background:rgba(0,212,255,0.08);
  color:var(--cyan);cursor:pointer;
  transition:all 0.2s;
  -webkit-user-select:none;user-select:none;
}
.mg-ctrl-btn:hover{background:rgba(0,212,255,0.15)}
.mg-ctrl-btn:active{background:rgba(0,212,255,0.25);transform:scale(0.95)}

/* ---- Animations ---- */
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.avatar{animation:float 3s ease-in-out infinite}
.glow-purple .avatar{animation-delay:0.5s}

/* ---- Responsive ---- */
@media(max-width:640px){
  .profiles,.stations,.tasks-grid,.info-section{
    grid-template-columns:1fr;
  }
  .container{padding:16px 10px 60px}
  .station-box canvas{max-height:280px}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .achieve-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .mg-canvas{max-width:90vw}
  .mg-ctrl-btn{padding:12px 28px;font-size:0.7rem}
}