/* ===== 彝海歃血 · 视觉规范：彝族三色（黑/红/黄） ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  background:#140505;
  color:#f3e6cf;
  overflow:hidden;
  user-select:none;
}

/* 顶部/底部纹样带 */
.pattern-band {
  position:fixed; left:0; right:0; height:14px; z-index:50;
  background:repeating-linear-gradient(135deg,#d4a24c 0 10px,#8c1f1f 10px 20px,#1a1a1a 20px 30px);
  opacity:.85;
}
.pattern-band.top{ top:0; } .pattern-band.bottom{ bottom:0; }

/* ===== 屏幕切换 ===== */
.screen {
  position:fixed; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:24px 16px;
  background:radial-gradient(ellipse at 50% 30%, #3a0d0d 0%, #140505 70%);
  overflow-y:auto;
}
.screen.active{ display:flex; }

/* ===== 卡片 ===== */
.card {
  background:linear-gradient(160deg,#2b0d0d,#1c0707);
  border:1px solid #d4a24c55; border-radius:14px;
  padding:26px 22px; width:min(92vw,420px);
  box-shadow:0 8px 40px #000a;
  text-align:center;
}

/* ===== 按钮 ===== */
.btn {
  display:block; width:100%; margin-top:14px; padding:13px 0;
  border:none; border-radius:10px; font-size:16px; font-weight:600;
  cursor:pointer; letter-spacing:2px;
}
.btn-primary {
  background:linear-gradient(135deg,#c0392b,#8c1f1f);
  color:#ffe9c9; border:1px solid #d4a24c88;
  box-shadow:0 4px 16px #c0392b55;
}
.btn-primary:active{ transform:scale(.97); }
.btn-ghost { background:transparent; color:#d4a24c; border:1px solid #d4a24c66; }
.btn-small { width:auto; padding:8px 18px; font-size:13px; display:inline-block; margin:6px; }

/* ===== 开始页 ===== */
.start-inner{ text-align:center; width:min(92vw,420px); }
.emblem {
  width:84px; height:84px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e0563f, #8c1f1f);
  border:3px solid #d4a24c; display:flex; align-items:center; justify-content:center;
  font-size:42px; font-family:"STKaiti","KaiTi",serif; color:#ffe9c9;
  box-shadow:0 0 30px #c0392b88;
}
.game-title {
  font-family:"STKaiti","KaiTi",serif; font-size:44px; color:#f3d9a0;
  letter-spacing:8px; text-shadow:0 2px 12px #c0392b;
}
.game-sub { color:#d4a24c; margin:8px 0 18px; letter-spacing:3px; font-size:14px; }
.game-desc { color:#cbb99a; font-size:14px; line-height:1.9; margin-bottom:8px; }
.credit { margin-top:22px; font-size:11px; color:#8a7561; letter-spacing:1px; }
.level-select { display:flex; gap:8px; justify-content:center; margin-top:18px; }
.ls-item {
  flex:1; max-width:110px; padding:10px 4px; border-radius:8px; font-size:12px;
  border:1px solid #d4a24c44; color:#d4a24c; cursor:pointer; background:#00000033;
}
.ls-item.locked{ opacity:.35; pointer-events:none; }
.ls-item .ls-stars{ display:block; margin-top:4px; color:#f3d9a0; font-size:13px; }

/* ===== 关卡剧情页 ===== */
.intro-card h2{ font-family:"STKaiti","KaiTi",serif; color:#f3d9a0; letter-spacing:3px; }
.intro-time{ color:#d4a24c; font-size:12px; margin:8px 0 14px; letter-spacing:2px; }
.intro-story{ color:#d8c8ac; font-size:14px; line-height:2; text-align:left; }
.intro-goal{
  margin-top:14px; padding:12px; border-radius:8px; font-size:13px; line-height:1.8;
  background:#d4a24c18; border:1px dashed #d4a24c66; color:#f3d9a0; text-align:left;
}

/* ===== 游戏页 ===== */
#screen-game{ justify-content:flex-start; padding-top:30px; }
.hud { width:min(94vw,480px); margin-bottom:10px; }
.hud-title{ font-family:"STKaiti","KaiTi",serif; color:#f3d9a0; font-size:18px; letter-spacing:2px; text-align:center; }
.hud-stats{ display:flex; justify-content:space-around; margin-top:8px; font-size:13px; color:#d4a24c; }
.board-wrap{ width:min(94vw,480px); }
.board {
  position:relative; width:100%; aspect-ratio:1;
  background:#e8d5b0; border-radius:10px; border:3px solid #d4a24c;
  box-shadow:0 6px 30px #000c, inset 0 0 40px #b9965f44;
  overflow:hidden;
}
.cell {
  position:absolute; width:12.5%; height:12.5%;
  border:1px solid #b9965f55;
}
.cell.c-dark{ background:#dfc79c; }
.cell.yihai{ background:linear-gradient(135deg,#4a7fb5,#35608f); }
.cell.ring{ background:#cfe0d4; }
.cell.exit{ background:linear-gradient(135deg,#d4a24c,#b8862e); }
.cell .exit-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#5c3a08; font-weight:700; letter-spacing:1px;
}
.cell .clue-badge {
  position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%;
  background:#8c1f1f; color:#f3d9a0; font-size:10px; display:flex;
  align-items:center; justify-content:center; border:1px solid #d4a24c;
}
.cell.hl::after {
  content:""; position:absolute; inset:26%; border-radius:50%;
  background:#c0392b55; border:2px solid #c0392b; animation:pulse 1s infinite;
}
@keyframes pulse { 50%{ transform:scale(.75); opacity:.6; } }

.piece {
  position:absolute; width:10.5%; height:10.5%; margin:1%;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:min(5vw,26px); font-family:"STKaiti","KaiTi",serif; font-weight:700;
  transition:left .25s ease, top .25s ease; z-index:5; cursor:pointer;
}
.piece.red  { background:radial-gradient(circle at 35% 30%,#e0563f,#a02418); color:#ffe9c9; border:2px solid #d4a24c; box-shadow:0 2px 8px #0008; }
.piece.black{ background:radial-gradient(circle at 35% 30%,#3d3d3d,#111); color:#f3d9a0; border:2px solid #d4a24c; box-shadow:0 2px 8px #0008; }
.piece.kmt  { background:radial-gradient(circle at 35% 30%,#5a6b8c,#2f3b52); color:#dfe6f3; border:2px solid #8fa3c8; }
.piece.spy  { background:radial-gradient(circle at 35% 30%,#4a2440,#1c0a18); color:#e8b4d4; border:2px solid #a04a80; }
.piece.sel  { box-shadow:0 0 0 3px #ffe9c9, 0 0 18px #ffe9c9; }
.piece.shake{ animation:shake .4s; }
@keyframes shake { 25%{transform:translateX(-4px);} 50%{transform:translateX(4px);} 75%{transform:translateX(-3px);} }

.game-tip{ margin-top:12px; font-size:13px; color:#d4a24c; min-height:20px; text-align:center; padding:0 16px; }
.game-actions{ margin-top:8px; }

/* ===== 弹窗 ===== */
.modal {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:#000c; z-index:100; padding:20px;
}
.modal.show{ display:flex; }
.clue-card{ animation:pop .3s; }
@keyframes pop { from{ transform:scale(.8); opacity:0; } }
.clue-badge {
  width:52px; height:52px; margin:0 auto 10px; border-radius:50%;
  background:#8c1f1f; color:#f3d9a0; border:2px solid #d4a24c;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  font-family:"STKaiti","KaiTi",serif;
}
.clue-card h3{ color:#f3d9a0; font-family:"STKaiti","KaiTi",serif; letter-spacing:2px; }
.clue-card p{ color:#d8c8ac; font-size:14px; line-height:1.9; margin-top:10px; }
.help-card ul{ text-align:left; color:#d8c8ac; font-size:13px; line-height:2; padding-left:18px; }
.help-card h3{ color:#f3d9a0; margin-bottom:10px; }
.help-card b{ color:#f3d9a0; }

/* ===== 结算 / 失败 / 胜利 ===== */
.stars{ font-size:34px; color:#d4a24c; letter-spacing:6px; margin:10px 0; text-shadow:0 0 12px #d4a24c88; }
.stars.big{ font-size:44px; }
.stars .off{ color:#5c4a2a; text-shadow:none; }
.complete-card h2, .victory-card h2{ font-family:"STKaiti","KaiTi",serif; color:#f3d9a0; letter-spacing:2px; }
.complete-detail{ color:#cbb99a; font-size:13px; margin-bottom:12px; }
.reward-box{
  margin-top:10px; padding:12px; border-radius:10px; text-align:left;
  background:#00000044; border:1px solid #d4a24c44;
}
.reward-box h4{ color:#d4a24c; font-size:13px; margin-bottom:8px; letter-spacing:1px; }
.reward-box video{ width:100%; border-radius:8px; background:#000; }
.reward-box .reward-ph{
  padding:22px 10px; text-align:center; color:#8a7561; font-size:12px; line-height:1.8;
  border:1px dashed #d4a24c44; border-radius:8px;
}
.fail-card h2{ color:#e0563f; font-family:"STKaiti","KaiTi",serif; }
.fail-card p{ color:#cbb99a; font-size:14px; line-height:1.9; margin-top:10px; }

.cert-box{ margin:14px 0; padding:16px; border:2px solid #d4a24c; border-radius:10px; background:#f3e6cf10; }
.cert-title{ font-family:"STKaiti","KaiTi",serif; color:#f3d9a0; font-size:18px; letter-spacing:4px; }
#cert-name{
  margin-top:12px; width:70%; padding:8px; text-align:center; font-size:15px;
  background:transparent; border:none; border-bottom:1px solid #d4a24c; color:#ffe9c9; outline:none;
}
.cert-text{ margin-top:12px; font-size:13px; color:#cbb99a; line-height:1.9; }
.history-note{ font-size:12px; color:#8a7561; line-height:1.9; margin:8px 0; }

/* ===== 结盟动画 ===== */
.overlay{
  position:fixed; inset:0; display:none; z-index:200;
  background:radial-gradient(ellipse at 50% 60%, #5c1010, #0e0303);
  align-items:center; justify-content:center;
}
.overlay.show{ display:flex; }
.alliance-scene{ text-align:center; position:relative; }
.lake{
  width:70vw; max-width:340px; height:90px; margin:0 auto 30px;
  border-radius:50%; background:radial-gradient(ellipse,#4a7fb5,#1a3a5c);
  filter:blur(2px); animation:lakeGlow 2s infinite alternate;
}
@keyframes lakeGlow{ to{ box-shadow:0 0 60px #4a7fb5; } }
.token-merge{ display:flex; justify-content:center; gap:20px; margin-bottom:26px; }
.mtoken{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-family:"STKaiti","KaiTi",serif; border:2px solid #d4a24c;
  animation:merge 2.2s ease forwards;
}
.mtoken.red{ background:radial-gradient(circle at 35% 30%,#e0563f,#a02418); color:#ffe9c9; }
.mtoken.black{ background:radial-gradient(circle at 35% 30%,#3d3d3d,#111); color:#f3d9a0; }
@keyframes merge{ to{ transform:translateX(30px); } }
.mtoken.black{ animation-name:mergeB; }
@keyframes mergeB{ to{ transform:translateX(-30px); } }
.seal{
  width:110px; height:110px; margin:10px auto 20px; border:4px solid #c0392b; border-radius:12px;
  color:#e0563f; font-family:"STKaiti","KaiTi",serif; font-size:34px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1.2;
  transform:rotate(-8deg) scale(3); opacity:0; animation:stamp .5s 2s ease forwards;
  text-shadow:0 0 20px #e0563f;
}
@keyframes stamp{ to{ transform:rotate(-8deg) scale(1); opacity:1; } }
.oath{ color:#f3d9a0; font-family:"STKaiti","KaiTi",serif; font-size:17px; line-height:2.2; opacity:0; animation:fadein 1s 2.6s forwards; }
.skill-unlock{ margin-top:16px; color:#d4a24c; font-size:13px; letter-spacing:2px; opacity:0; animation:fadein 1s 3.4s forwards; }
@keyframes fadein{ to{ opacity:1; } }

/* ===== 海报弹窗 ===== */
.poster-wrap{ text-align:center; max-width:92vw; }
#poster-img{ max-width:min(86vw,380px); border-radius:10px; border:2px solid #d4a24c; box-shadow:0 8px 40px #000; }
.poster-tip{ color:#d4a24c; font-size:12px; margin-top:10px; }
.poster-wrap .btn{ max-width:200px; margin-left:auto; margin-right:auto; }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; top:18%; transform:translateX(-50%);
  background:#1c0707ee; color:#f3d9a0; border:1px solid #d4a24c;
  padding:10px 22px; border-radius:24px; font-size:14px; z-index:300;
  opacity:0; pointer-events:none; transition:opacity .3s; white-space:nowrap;
}
.toast.show{ opacity:1; }