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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #0c1210;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #eaf3ea;
  user-select: none;
  touch-action: none;
}

#game {
  position: fixed; inset: 0;
  width: 100%; height: 100vh; height: 100dvh;
  display: block;
}

/* ---------- 遮罩层 ---------- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 12, 10, .78);
  z-index: 20;
  padding: 20px;
}
.overlay.hidden { display: none; }

.panel {
  width: min(380px, 92vw);
  background: linear-gradient(180deg, #1d2a24, #141d19);
  border: 1px solid #2f4438;
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

h1 {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: 2px;
  color: #8fe08a;
  text-shadow: 0 2px 0 #1b2a20;
}
h1.win { color: #9fe8a0; }
h1.lose { color: #ef7d74; }

.sub { margin: 0 0 16px; color: #8fa89b; font-size: 14px; }

.hint {
  list-style: none; padding: 0; margin: 0 0 20px;
  text-align: left; font-size: 13px; color: #b7c9bd; line-height: 1.9;
}
.hint li::before { content: "· "; color: #6fd06a; }

.info { font-size: 15px; line-height: 1.9; color: #cfe3d4; margin: 10px 0 20px; }

.btn {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #10201a;
  background: linear-gradient(180deg, #9fe89a, #61c463);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); filter: brightness(.95); }

/* ---------- 升级三选一 ---------- */
.levelup {
  width: min(720px, 96vw);
  text-align: center;
}
.ltitle {
  font-size: 20px;
  color: #ffd98a;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  background: linear-gradient(180deg, #22332b, #18241e);
  border: 1px solid #37503f;
  border-radius: 14px;
  padding: 18px 12px;
  cursor: pointer;
  min-height: 116px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.card:active { transform: scale(.98); border-color: #6fd06a; }
.cname { font-size: 17px; font-weight: 700; color: #a8ec9f; }
.cdesc { font-size: 13px; color: #c5d8ca; line-height: 1.5; }
.clv { font-size: 11px; color: #6f8a78; }

.portrait {
  width: 116px;
  height: 116px;
  object-fit: contain;
  display: block;
  margin: -6px auto 6px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}

/* ---------- 角色选择 ---------- */
.chars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}
.char {
  border: 2px solid #2f4438;
  border-radius: 12px;
  background: #16211c;
  padding: 8px 4px 10px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.char.sel { border-color: #7fe07a; background: #1d2e25; transform: translateY(-2px); }
.char img { width: 58px; height: 58px; object-fit: contain; display: block; margin: 0 auto 4px; }
.char .cname2 { font-size: 13px; font-weight: 700; color: #b6e8ae; }
.char .cdesc2 { font-size: 10px; color: #8ba394; line-height: 1.35; margin-top: 3px; padding: 0 2px; }

/* ---------- 伪横屏：整个 #app 转 90° ---------- */
body.pseudo-landscape #app {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100dvh;
  height: 100dvw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

body.pseudo-landscape #game { position: absolute; inset: 0; width: 100%; height: 100%; }