/* ============================================================
   POP ISLAND — 波普视觉系统
   规则：纯色平涂 + 粗黑描边 + 硬投影，禁止柔和阴影与渐变。
   ============================================================ */

:root {
  --ink: #141414;
  --paper: #fff6e9;
  --cyan: #00c2e0;
  --magenta: #ff2d78;
  --yellow: #ffd400;
  --green: #3ddc6b;
  --orange: #ff7a1a;
  --purple: #8a4fff;
  --border: 4px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Arial Black", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 全局网点底纹：让纯色背景也有印刷质感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 标题 ---------- */

.masthead { text-align: center; }

.logo {
  margin: 0;
  display: inline-flex;
  gap: 10px;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1;
  letter-spacing: 2px;
  transform: rotate(-2deg);
}

.logo span {
  padding: 6px 16px;
  border: var(--border);
  box-shadow: var(--shadow);
  display: inline-block;
}

.logo-pop { background: var(--magenta); color: #fff; }
.logo-island { background: var(--cyan); color: var(--ink); }

.tagline {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: 3px;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  padding: 4px 14px;
}

/* ---------- HUD ---------- */

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.res-card, .stat {
  background: var(--paper);
  border: var(--border);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 固定 108px 在 390px 窄屏下会让一行放不下两张卡，导致横向溢出被裁切。
     改用 flex-basis + min-width:0，让卡片可收缩且文字不被挤出容器。 */
  flex: 1 1 104px;
  min-width: 0;
  max-width: 160px;
}

.res-value, .stat-value {
  font-size: 20px;
  margin-left: auto;
  /* 数值可能增长到四位数，固定宽度会导致卡片抖动 */
  font-variant-numeric: tabular-nums;
}

.res-card { border-width: 4px; }
.res-wood { background: #ffe0b8; }
.res-stone { background: #e2dcea; }
.res-crystal { background: #ffd0e2; }

.res-icon { font-size: 20px; }
.res-label { font-size: 13px; letter-spacing: 1px; }

.stat { background: var(--green); }

/* ---------- 舞台 ---------- */

.stage {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 8px;
}

#board {
  display: block;
  width: 100%;
  height: min(60vh, 520px);
  cursor: crosshair;
  image-rendering: -webkit-optimize-contrast;
}

/* ---------- 提示 ---------- */

.hint {
  margin: 0;
  text-align: center;
  font-size: 14px;
  background: var(--paper);
  border: var(--border);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 14px;
}

/* ---------- 工具栏 ---------- */

.toolbar-title {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: 3px;
  text-align: center;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.build-btn {
  font-family: inherit;
  cursor: pointer;
  background: var(--cyan);
  border: var(--border);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
}

.build-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.build-btn.active {
  background: var(--magenta);
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}

.build-btn.unaffordable { background: #b9b2c4; color: #55505e; }

.btn-emoji { font-size: 22px; line-height: 1; }
.btn-name { font-size: 13px; }
.btn-cost { font-size: 11px; opacity: 0.85; }

/* ---------- 页脚 ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.ghost-btn {
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 12px;
}

.ghost-btn:hover { background: var(--yellow); }
.ghost-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.credit { font-size: 12px; opacity: 0.65; letter-spacing: 1px; }

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .build-btn { transition: none; }
}

/* ---------- 窄屏适配 ---------- */

@media (max-width: 520px) {
  .app { padding: 12px 10px 28px; gap: 10px; }

  /* 双色块标题在窄屏会超出视口，缩小字号与内边距 */
  .logo { font-size: clamp(26px, 8vw, 40px); gap: 6px; letter-spacing: 1px; }
  .logo span { padding: 4px 10px; border-width: 3px; }
  .tagline { font-size: 12px; letter-spacing: 1px; padding: 3px 10px; }

  /* HUD 卡片在窄屏改为两列网格，避免 flex 换行后出现单张独占整行 */
  .hud {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .res-card, .stat {
    max-width: none;
    padding: 7px 10px;
    gap: 6px;
  }
  .res-label, .stat-label { font-size: 12px; }
  .res-value, .stat-value { font-size: 18px; }

  .stage { padding: 6px; }
  #board { height: min(56vh, 420px); }

  .hint { font-size: 13px; padding: 8px 10px; }
  .toolbar-title { letter-spacing: 2px; }
  .build-btn { min-width: 84px; padding: 7px 9px; }
  .btn-emoji { font-size: 20px; }
}

/* 超窄屏（如 320px）：改为两列——三列时每列仅约 95px，
   装不下「图标+标签+四位数」，会撑破网格导致整体横向溢出。 */
@media (max-width: 360px) {
  .hud { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .res-card, .stat {
    padding: 6px 8px;
    gap: 5px;
    min-width: 0;
  }
  .res-label, .stat-label { font-size: 11px; letter-spacing: 0; }
  .res-value, .stat-value { font-size: 16px; }
  .res-icon { font-size: 15px; }

  /* 标题双色块在 320px 下会超宽，改为纵向堆叠 */
  .logo { flex-direction: column; gap: 4px; font-size: 30px; }
  .logo span { padding: 3px 14px; }

  .stage { padding: 5px; }
  #board { height: min(52vh, 360px); }
  .hint { font-size: 12px; }
  .build-btn { min-width: 76px; padding: 6px 7px; }
  .btn-name { font-size: 12px; }
  .btn-cost { font-size: 10px; }
  .foot { gap: 6px; }
  .ghost-btn { font-size: 12px; padding: 5px 9px; }
}