/* ============================================================
   style.css —— 桌面清理大师 · 像素风
   方角、像素描边、阶梯配色、像素字体
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Press Start 2P", "PingFang SC", "Microsoft YaHei", "SimHei", monospace;
  background: #2a2e3a;
  color: #e8dcb8;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  image-rendering: pixelated;
  /* 像素背景棋盘格 */
  background-image:
    linear-gradient(45deg, #2e3240 25%, transparent 25%, transparent 75%, #2e3240 75%),
    linear-gradient(45deg, #2e3240 25%, transparent 25%, transparent 75%, #2e3240 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  background-color: #2a2e3a;
}

#app { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* 手机动态视口：避免地址栏滚动时底部被遮挡 */ }

/* ---------- HUD ---------- */
#hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1f2330;
  color: #e8dcb8;
  border: 3px solid #000;
  flex-wrap: wrap;
  box-shadow: 0 4px 0 #000;
}
.hud-item {
  font-size: 12px;
  letter-spacing: 1px;
  background: #12151f;
  padding: 6px 10px;
  border: 2px solid #3a4152;
  box-shadow: inset 2px 2px 0 #3a4152;
  color: #e8dcb8;
}
#hudCoins { color: #ffd54a; }
#hudTimer { color: #ff8a65; }
#hudCombo { color: #ffd54a; }
#hudPower { color: #7fd4ff; }
#hudAuto { color: #7dff9e; }
/* HUD 动效：金币入账放大闪 / 计时与连击高压橙色脉动 */
.hud-pop { animation: hudPop 0.3s steps(3); }
@keyframes hudPop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hud-warn { animation: hudWarn 0.5s steps(2) infinite; }
@keyframes hudWarn { 0%,100% { color: #ff5a2a; transform: scale(1); } 50% { color: #ffd54a; transform: scale(1.18); } }

/* ---------- 桌面 ---------- */
#boardWrap { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; padding: 14px; min-height: 0; }
/* 桌面同时受宽高约束：横屏下按高度缩放完整落入可视区，任何方向都保持 3:2 比例且不被裁剪 */
#board {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  cursor: pointer;
  border: 4px solid #000;
  box-shadow: 0 6px 0 #000, 0 10px 24px rgba(0,0,0,0.5);
  image-rendering: pixelated;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#toolbar { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); }
#btnScreen {
  font-size: 13px; padding: 10px 22px; border: 3px solid #000;
  background: #ff5a2a; color: #fff;
  cursor: pointer; box-shadow: 0 4px 0 #000;
  letter-spacing: 1px;
}
#btnScreen:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

/* ---------- 底栏 ---------- */
#footer { display: flex; justify-content: center; gap: 14px; padding: 12px; }
#footer button {
  font-size: 12px; padding: 10px 20px; border: 3px solid #000;
  background: #3a4152; color: #e8dcb8; cursor: pointer; box-shadow: 0 4px 0 #000;
  letter-spacing: 1px;
}
#footer button:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

/* ---------- 属性面板 ---------- */
.stat-list { text-align: left; margin-bottom: 16px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; margin-bottom: 6px;
  background: #12151f; border: 2px solid #3a4152;
  color: #e8dcb8; font-size: 12px;
}
.stat-row .stat-name { color: #9aa4bd; letter-spacing: 1px; }
.stat-row .stat-val { color: #ffd54a; font-weight: bold; }
.stat-row .stat-val.have { color: #7dff9e; }
.stat-row .stat-val.none { color: #6a6f7d; }
.stat-sub {
  font-size: 11px; color: #6a6f7d; padding: 2px 10px 8px; letter-spacing: 1px;
}
.stat-divider {
  margin: 10px 0; height: 3px; background: #2a2e3a; border: 1px solid #000;
}

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; justify-content: center; align-items: center; z-index: 100;
}
.modal-box {
  background: #1f2330; border: 4px solid #000; padding: 26px;
  max-width: 460px; width: 92%; text-align: center;
  box-shadow: 0 8px 0 #000, 0 16px 40px rgba(0,0,0,0.6);
  color: #e8dcb8;
}
.modal-box h2 { margin-bottom: 14px; color: #ffd54a; font-size: 16px; letter-spacing: 2px; }
.modal-box p { margin: 8px 0; font-size: 12px; line-height: 1.8; }
.modal-box b { color: #ffd54a; font-size: 14px; }
.modal-box button {
  margin-top: 16px; font-size: 12px; padding: 10px 26px; border: 3px solid #000;
  background: #ff8a00; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #000;
  letter-spacing: 1px;
}
.modal-box button:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

/* ---------- 抽卡 ---------- */
.draft-box { max-width: 720px; }
.draft-price { color: #8a8f9c; }
.draft-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.card {
  width: 170px; min-height: 200px; border: 4px solid #000; padding: 14px;
  cursor: pointer; position: relative; overflow: hidden;
  background: #2a2e3a; transition: transform 0.12s;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 6px 0 #000;
  color: #e8dcb8;
  animation: cardIn 0.4s steps(4) both;
}
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.25s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card:hover { transform: translateY(-6px); }
.card:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
/* 扫光 */
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25), transparent 70%);
  transform: translateX(-130%); animation: shine 3.2s steps(8) infinite;
}
@keyframes shine {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
.card-rarity { font-size: 10px; letter-spacing: 1px; }
.card-name { font-size: 13px; letter-spacing: 1px; }
.card-desc { font-size: 10px; color: #b8b3a0; flex: 1; line-height: 1.7; }
.card-flow { font-size: 9px; color: #8a8f9c; text-align: right; }

/* 稀有度光效（像素色块） */
.rarity-common { border-color: #bdbdbd; }
.rarity-rare { border-color: #3f9bff; box-shadow: 0 6px 0 #000, 0 0 0 2px #3f9bff; }
.rarity-epic { border-color: #b45bff; box-shadow: 0 6px 0 #000, 0 0 0 2px #b45bff; animation: glowStep 1s steps(2) infinite; }
.rarity-legendary { border-color: #ffb300; box-shadow: 0 6px 0 #000, 0 0 0 2px #ffb300; animation: glowStep 0.6s steps(2) infinite; }
@keyframes glowStep {
  0%, 100% { box-shadow: 0 6px 0 #000, 0 0 0 2px #ffb300; }
  50%      { box-shadow: 0 6px 0 #000, 0 0 0 3px #fff; }
}
.rarity-common .card-rarity   { color: #bdbdbd; }
.rarity-rare .card-rarity     { color: #6fb7ff; }
.rarity-epic .card-rarity     { color: #d08bff; }
.rarity-legendary .card-rarity{ color: #ffb300; }
.draft-empty { color: #8a8f9c; padding: 30px; }
.draft-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.draft-actions button { margin-top: 0; }

.win-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.win-actions button { margin-top: 16px; }
.win-actions .danger { background: #d33; }
.win-actions .danger:hover { background: #e44; }

/* ---------- 图鉴 ---------- */
.book-box { max-width: 760px; max-height: 86vh; overflow-y: auto; }
.book-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.book-tabs .tab {
  background: #2a2e3a; color: #8a8f9c; padding: 6px 18px; border: 3px solid #000; cursor: pointer; font-size: 10px;
  box-shadow: 0 3px 0 #000;
}
.book-tabs .tab.active { background: #ff8a00; color: #fff; }
.book-tabs .tab:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.book-card {
  border: 3px solid #1a1d28; padding: 10px; text-align: left;
  display: flex; flex-direction: column; gap: 5px; position: relative; background: #2a2e3a;
  box-shadow: 0 4px 0 #000;
}
.book-card:hover { transform: translateY(-3px); }
.book-card.rarity-rare:not(.locked)      { border-color: #3f9bff; }
.book-card.rarity-epic:not(.locked)      { border-color: #b45bff; }
.book-card.rarity-legendary:not(.locked) { border-color: #ffb300; }
.book-card.locked { opacity: 0.5; filter: grayscale(0.7); }
.book-card.owned { background: #383d2c; }
.book-rarity { font-size: 9px; letter-spacing: 1px; }
.book-name { font-size: 12px; letter-spacing: 1px; color: #ffd54a; }
.book-desc { font-size: 9px; color: #b8b3a0; line-height: 1.7; }
.book-flow { font-size: 8px; color: #8a8f9c; }
.book-count { position: absolute; top: 6px; right: 8px; color: #ffd54a; font-size: 10px; }
.book-lock { font-size: 9px; color: #e66; margin-top: 4px; }
.book-empty { color: #8a8f9c; padding: 30px; }

/* ---------- 成就 ---------- */
.ach-box { max-width: 520px; max-height: 86vh; overflow-y: auto; }
.ach-item { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px; background: #2a2e3a; margin-bottom: 10px; border: 3px solid #1a1d28; box-shadow: 0 3px 0 #000; }
.ach-item.done { border-color: #ffb300; background: #383d2c; }
.ach-icon { font-size: 24px; }
.ach-name { font-size: 11px; letter-spacing: 1px; color: #ffd54a; }
.ach-desc { font-size: 9px; color: #b8b3a0; line-height: 1.7; }
.ach-progress { font-size: 9px; color: #8a8f9c; margin-top: 3px; }
.ach-item.done .ach-progress { color: #ffd54a; }

/* ---------- 通关 ---------- */
.win-box { background: #38304a; }
.win-box h2 { color: #ffd54a; font-size: 20px; }
.win-box p { font-size: 12px; }

/* ---------- Toast ---------- */
#toastWrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1f2330; color: #ffd54a; padding: 10px 20px; border: 3px solid #000;
  box-shadow: 0 4px 0 #000; font-size: 11px; transition: opacity 0.4s; letter-spacing: 1px;
}
.toast.fade { opacity: 0; }

.hidden { display: none !important; }

/* ---------- 新手引导 ---------- */
.tutorial {
  position: fixed; inset: 0; background: rgba(0,0,0,0.82);
  display: flex; justify-content: center; align-items: center; z-index: 300;
}
.tutorial-box {
  background: #1f2330; border: 4px solid #000; padding: 28px;
  max-width: 420px; width: 90%; text-align: center;
  box-shadow: 0 8px 0 #000, 0 16px 40px rgba(0,0,0,0.6);
  color: #e8dcb8; animation: cardIn 0.4s steps(4) both;
}
.tutorial-box h2 { color: #ffd54a; font-size: 15px; letter-spacing: 1px; margin-bottom: 12px; }
.tutorial-box p { font-size: 12px; line-height: 1.9; margin-bottom: 16px; }
.tutorial-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.tut-dot { width: 10px; height: 10px; border: 2px solid #3a4152; background: #12151f; }
.tut-dot.active { background: #ffd54a; border-color: #ffd54a; }
.tutorial-actions { display: flex; gap: 12px; justify-content: center; }
.tutorial-actions button {
  font-size: 12px; padding: 10px 20px; border: 3px solid #000;
  background: #3a4152; color: #e8dcb8; cursor: pointer; box-shadow: 0 4px 0 #000;
  letter-spacing: 1px;
}
.tutorial-actions button:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
#tutNext { background: #ff8a00; color: #fff; }