:root {
  --ink: #0a0b0d;
  --paper: #efe3c0;
  --dim: #8d8271;
  --acid: #d8e04a;
  --rust: #c2542e;
  --line: #3a3329;
  --panel: #14110d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: grid;
  place-items: center;
  height: 100dvh;
}

#stage {
  position: relative;
  overflow: hidden;
  background: #0a0b0d;
  box-shadow: 0 0 0 1px #1c1a16, 0 18px 60px rgba(0, 0, 0, 0.8);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------- 击杀播报 ----------
   下移到 19%：画面顶部 5%~17% 留给 canvas 画的「幕名 + 收缩倒计时」状态条 */
#feed {
  position: absolute;
  top: 26%;
  right: 3%;
  left: auto;
  transform: none;
  text-align: right;
  font-size: clamp(10px, 1.85vmin, 15px);
  line-height: 1.5;
  pointer-events: none;
  max-width: 42%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  opacity: 0.92;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
  opacity: 0.95;
  width: 70%;
}

/* ---------- 三选一 ----------
   不再是全屏遮罩：只在屏幕下半部留一条很淡的渐变（上方全透明，越往下越暗），
   三张卡横排贴在画面下方。选词条时人物被冻住，但战场必须看得见——
   尤其是屏幕正中央的自己。
   底部留 8vmin（横屏时 vmin≈视口高）：卡片行落在约 62%~92% 的高度区间。 */
#cards {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.75vmin;
  padding: 0 6vmin 8vmin;
  background: linear-gradient(
    to bottom,
    rgba(4, 5, 7, 0) 0%,
    rgba(4, 5, 7, 0) 52%,
    rgba(4, 5, 7, 0.16) 66%,
    rgba(4, 5, 7, 0.42) 82%,
    rgba(4, 5, 7, 0.68) 100%
  );
}

/* 幽灵态提示：选择期间舞台四边一圈很淡的亮色内阴影，
   告诉玩家「现在打不到你，慢慢选」。由 js/main.js 挂/摘 .choosing。 */
#stage.choosing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px rgba(216, 224, 74, 0.2),
    inset 0 0 16px rgba(216, 224, 74, 0.1);
}

.card {
  position: relative;
  width: 26vmin;
  max-width: 210px;
  min-height: 30vmin;
  padding: 2.2vmin 1.8vmin 3vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1vmin;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--paper);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s ease, border-color 0.1s ease;
}

.card:active { transform: scale(0.97); }

/* 稀有度：白牌就是原来的暗金边框；蓝牌蓝边 + 顶部一条蓝色标记 + 淡内发光。
   BOSS / 商店也按这个 tier 发奖励，所以视觉上必须一眼分得出来。 */
.card.tier-common { border-color: #4b4436; }

.card.tier-rare {
  border-color: #4a86d8;
  box-shadow:
    inset 0 0 20px rgba(74, 134, 216, 0.18),
    0 0 14px rgba(74, 134, 216, 0.16);
}

.card.tier-rare::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2f6bd0, #9fd0ff, #2f6bd0);
}

/* 卡头：左「白/蓝」，右六系。单字颜色由 --fam 注入（六系配色见 main.js） */
.card .head {
  display: flex;
  align-items: center;
  gap: 0.9vmin;
  line-height: 1;
}

.card .tier-tag {
  font-size: 1.5vmin;
  line-height: 1.35;
  padding: 0 0.55vmin;
  letter-spacing: 0.1em;
  color: #8f8573;
  border: 1px solid #3a3329;
}

.card.tier-rare .tier-tag {
  color: #d8ecff;
  border-color: #4a86d8;
  background: rgba(74, 134, 216, 0.22);
}

.card .fam-tag {
  font-size: 1.5vmin;
  line-height: 1.35;
  color: var(--fam, var(--acid));
  opacity: 0.95;
}

.card .glyph {
  font-size: 4.6vmin;
  line-height: 1;
  color: var(--fam, var(--acid));
}

.card.tier-rare .glyph {
  text-shadow: 0 0 14px currentColor;
}

.card .name {
  font-size: 2.4vmin;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.card .desc {
  font-size: 1.85vmin;
  line-height: 1.5;
  color: var(--dim);
}

.card .key {
  position: absolute;
  top: 0.8vmin;
  right: 1vmin;
  font-size: 1.7vmin;
  color: #5a5245;
}

.timerbar {
  position: absolute;
  left: 6vmin;
  right: 6vmin;
  bottom: 6vmin;
  height: 3px;
  background: var(--acid);
  transform-origin: left center;
  opacity: 0.7;
}

/* ---------- 全屏页面 ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(40, 34, 24, 0.55), rgba(5, 6, 8, 0.96) 68%),
    var(--ink);
  padding: 3vmin;
  overflow: auto;
}

.panel {
  width: min(90%, 720px);
  text-align: center;
}

h1 {
  margin: 0 0 0.4em;
  font-size: clamp(28px, 9vmin, 84px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--paper);
  text-shadow: 0 0 24px rgba(216, 224, 74, 0.18);
}

.sub {
  margin: 0 0 2.2vmin;
  color: var(--acid);
  font-size: clamp(10px, 1.9vmin, 16px);
  letter-spacing: 0.18em;
}

.pitch {
  color: var(--dim);
  font-size: clamp(11px, 2vmin, 17px);
  line-height: 1.85;
  margin: 0 0 2.4vmin;
}

.howto {
  list-style: none;
  padding: 0;
  margin: 0 auto 3vmin;
  max-width: 460px;
  text-align: left;
  font-size: clamp(10px, 1.85vmin, 15px);
  line-height: 2.05;
  color: #a99c86;
}

.howto b { color: var(--paper); font-weight: 600; }

button#begin, #end button {
  font-family: inherit;
  font-size: clamp(13px, 2.5vmin, 20px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  padding: 1.2vmin 4vmin;
  background: var(--acid);
  color: #14140c;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

button#begin:active, #end button:active { background: #b6bd3a; }

.foot {
  margin: 2vmin 0 0;
  font-size: clamp(9px, 1.5vmin, 12px);
  color: #5e574a;
}

/* ---------- 结算 ---------- */
#end {
  flex-direction: column;
  gap: 2vmin;
}

#end h2 {
  margin: 0;
  font-size: clamp(16px, 3.4vmin, 30px);
  letter-spacing: 0.12em;
}

#end table {
  border-collapse: collapse;
  font-size: clamp(10px, 1.9vmin, 16px);
  min-width: min(80vw, 520px);
}

#end tr.me { background: rgba(216, 224, 74, 0.08); }

#end td {
  padding: 0.8vmin 1.6vmin;
  border-bottom: 1px solid #24201a;
  text-align: left;
}

#end td.rk { color: #5e574a; width: 3ch; }
#end td.kv { text-align: right; color: #cbbfa5; }
#end td.kv.dim { color: #6f6656; }

/* ---------- 竖屏提示 ---------- */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: #0a0b0d;
  text-align: center;
  padding: 10vmin;
}

#rotate .phone {
  font-size: 16vmin;
  color: var(--acid);
  transform: rotate(90deg);
  line-height: 1;
  margin-bottom: 4vmin;
}

#rotate p {
  margin: 0.4em 0;
  font-size: 4.4vmin;
  letter-spacing: 0.15em;
}

#rotate .dim { color: #6f6656; font-size: 3.2vmin; letter-spacing: 0.06em; }