@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

:root {
  --bg-primary: #2a1b5e;
  --bg-glass: rgba(45, 27, 105, 0.92);
  --bg-card: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  --text-primary: #ffffff;
  --text-dark: #1f1f1f;
  --text-muted: rgba(255,255,255,0.65);
  --tag-mind: #7c8cff;
  --tag-memory: #a78bfa;
  --tag-reaction: #fbbf24;
  --tag-observe: #60a5fa;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 14px rgba(60,30,140,0.3), inset 0 0 0 1px rgba(255,255,255,0.5);
  --shadow-nav: 0 -4px 16px rgba(0,0,0,0.2);
  --font-display: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100vw; height:100vh; height:100dvh;
  overflow:hidden;
  font-family: var(--font-body);
  background: url('../bg.png') no-repeat center center / cover;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

#app {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  position:relative;
}

.hidden { display:none !important; }

/* ---------- Header ---------- */
.header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 2vh 3vw 1vh;
  flex-shrink:0;
  min-height:0;
}

.brand { display:flex; flex-direction:column; gap:0.4vh; flex:0 1 auto; min-width:0; }

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.8vw, 28px);
  font-weight:800;
  letter-spacing:0.08em;
  display:flex; align-items:center; gap:0.6vw;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  white-space:nowrap;
}
.brand-title svg { width: clamp(18px, 2.8vw, 26px); height: clamp(18px, 2.8vw, 26px); flex-shrink:0; }

.brand-sub {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.3vw, 12px);
  color: rgba(255,255,255,0.85);
  display:flex; align-items:center; gap:0.5vw;
  white-space:nowrap;
}
.brand-sub::before, .brand-sub::after {
  content:''; width: clamp(10px, 1.2vw, 16px); height:1px;
  background: rgba(255,255,255,0.35); flex-shrink:0;
}

.user-area {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:0.3vh; flex-shrink:0; margin-left:2vw;
}

.user-top { display:flex; align-items:center; gap:1.2vw; }

.energy-group {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:0.3vh;
}
.energy-text {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.3vw, 12px);
  font-weight:600;
  display:flex; align-items:center; gap:0.3vw;
  white-space:nowrap;
}
.energy-text svg { width: clamp(10px, 1.3vw, 13px); height: clamp(10px, 1.3vw, 13px); flex-shrink:0; }

.energy-bar {
  width: clamp(48px, 7vw, 68px); height: clamp(3px, 0.5vh, 5px);
  background: rgba(255,255,255,0.2); border-radius:3px; overflow:hidden;
}
.energy-bar .fill {
  width:65%; height:100%;
  background: linear-gradient(90deg, #fbbf24, #a78bfa);
  border-radius:3px;
}

.avatar {
  width: clamp(34px, 5.5vw, 46px); height: clamp(34px, 5.5vw, 46px);
  border-radius:50%;
  background: linear-gradient(180deg, #f5d0b5, #e8b89a);
  border: 2px solid rgba(255,255,255,0.5);
  position:relative; overflow:hidden; flex-shrink:0;
}
.avatar svg { width:100%; height:100%; }

.mission {
  display:flex; align-items:center; gap:0.3vw;
  font-family: var(--font-display);
  font-size: clamp(8px, 1.2vw, 11px);
  color: rgba(255,255,255,0.85);
  white-space:nowrap;
}
.mission svg { width: clamp(10px, 1.2vw, 12px); height: clamp(10px, 1.2vw, 12px); flex-shrink:0; }

/* ---------- 游戏大厅 ---------- */
.games-wrap {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding: 0.5vh 3vw 1vh;
  position:relative; z-index:10;
  min-height:0; overflow:hidden;
}

.games-title {
  font-family: var(--font-display);
  text-align:center;
  font-size: clamp(15px, 2.6vw, 24px);
  font-weight:700;
  margin-bottom: 1.5vh;
  letter-spacing:0.15em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  white-space:nowrap;
}
.games-title::after {
  content:''; display:block;
  width: clamp(28px, 4vw, 44px); height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  margin: 0.6vh auto 0; border-radius:2px;
}

.games-grid {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(6px, 1vw, 12px);
  width:100%; max-width: 960px;
  margin:0 auto;
  height: 100%; max-height: 58vh;
  min-height:0;
}

.game-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: clamp(5px, 0.8vh, 10px) clamp(3px, 0.4vw, 6px) clamp(4px, 0.6vh, 8px);
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  box-shadow: var(--shadow-card);
  cursor:pointer; transition: transform 0.12s;
  min-height:0; overflow:hidden;
  aspect-ratio: 1 / 1.05;
}
.game-card:active { transform: scale(0.95); }

.game-tag {
  position:absolute; top:6%; right:7%;
  padding: 0.2vh 0.7vw;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: clamp(7px, 1vw, 10px);
  font-weight:600; color:#fff;
  line-height:1.2; z-index:2; white-space:nowrap;
}

.game-icon-wrap {
  width: 52%; height: 52%;
  margin-top: 4%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:1; min-height:0;
}
.game-icon-wrap svg, .game-icon-wrap img { width:100%; height:100%; object-fit:contain; }

.game-name {
  margin-top:auto;
  font-family: var(--font-display);
  font-size: clamp(9px, 1.3vw, 13px);
  font-weight:700; color: var(--text-dark);
  text-align:center; line-height:1.2;
  padding-top: 0.4vh; white-space:nowrap;
}

/* ---------- 游戏沙箱 ---------- */
#game-sandbox {
  position:fixed; inset:0; z-index:200;
  background: var(--bg-primary);
  display:none; flex-direction:column;
}
#game-sandbox.active { display:flex; }

.sandbox-header {
  flex-shrink:0; height: clamp(42px, 6.5vh, 52px);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 3vw;
  background: var(--bg-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sandbox-title {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.2vw, 20px); font-weight:700;
}
.sandbox-back {
  display:flex; align-items:center; gap:0.6vw;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--text-muted); cursor:pointer;
  padding: 0.8vh 2vw; border-radius: var(--radius-sm);
  transition: background 0.2s; white-space:nowrap;
}
.sandbox-back:hover { background: rgba(255,255,255,0.08); }
.sandbox-back svg { width: clamp(14px, 2vw, 18px); height: clamp(14px, 2vw, 18px); flex-shrink:0; }

.sandbox-body { flex:1; position:relative; overflow:hidden; min-height:0; }
#game-root { width:100%; height:100%; }

/* ---------- 底部导航 ---------- */
.bottom-nav {
  flex-shrink:0; height: clamp(52px, 8vh, 72px);
  background: var(--bg-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 20px 20px 0 0;
  display:flex; justify-content:space-around; align-items:center;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  z-index:100; box-shadow: var(--shadow-nav);
}

.nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 0.4vh; color: var(--text-muted);
  font-family: var(--font-display);
  font-size: clamp(9px, 1.2vw, 12px); font-weight:500;
  transition: color 0.2s; min-width: 60px; height:100%;
  cursor:pointer; text-decoration:none;
}
.nav-item.active { color: var(--text-primary); }

.nav-icon {
  width: clamp(22px, 3.5vw, 30px); height: clamp(22px, 3.5vw, 30px);
  display:flex; align-items:center; justify-content:center;
}
.nav-item.active .nav-icon {
  background: #f5a623; border-radius:50%;
  box-shadow: 0 2px 6px rgba(245,166,35,0.35);
}

/* ---------- 我的页面 ---------- */
.profile-page {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: 2vh 4vw; gap: 1.8vh;
}
.profile-avatar {
  width: clamp(72px, 13vw, 110px); height: clamp(72px, 13vw, 110px);
  border-radius:50%;
  background: linear-gradient(180deg, #f5d0b5, #e8b89a);
  border: 3px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 36px); color: var(--text-dark);
}
.profile-name {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.8vw, 26px); font-weight:700;
}
.profile-stats {
  display:flex; gap: 5vw; margin-top: 0.8vh;
}
.stat-item { text-align:center; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 30px); font-weight:700; color:#fbbf24;
}
.stat-label {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.3vw, 12px); color: var(--text-muted);
  margin-top: 0.2vh;
}

/* ---------- 响应式 ---------- */
@media (max-width: 380px) {
  .games-grid { gap: 5px; }
  .game-card { border-radius: 14px; padding: 4px 3px 3px; }
  .game-name { font-size: 8px; }
  .game-tag { font-size: 7px; padding: 1px 4px; top:4%; right:5%; }
  .brand-title { font-size: 14px; }
  .brand-sub { font-size: 8px; }
}

@media (max-height: 640px) {
  .header { padding: 1.5vh 3vw 0.5vh; }
  .games-title { margin-bottom: 1vh; }
  .games-title::after { margin-top: 0.4vh; }
  .bottom-nav { height: 48px; border-radius: 16px 16px 0 0; }
  .games-grid { max-height: 55vh; }
}

@media (min-aspect-ratio: 2/1) {
  .games-grid { max-height: 48vh; }
  .header { padding: 1vh 3vw 0.5vh; }
}