/* ═══════════════════════════════════════════════════════════
   不容易 · 五行用色体系

   土 → 地基     warm stone   · 占 70%
   火 → 行动     terracotta   · 占 5%，仅 CTA
   水 → 深度     deep navy    · 占 15%，正文+时间
   木 → 正面     sage green   · 占 5%，吉兆
   金 → 精炼     warm ivory   · 占 5%，微妙高亮

   原则：极度克制 · typography 驱动 · 大留白 · 无线框
   ═══════════════════════════════════════════════════════════ */

:root {
  --earth-50:  #FBFAF7;
  --earth-100: #F5F2EB;
  --earth-150: #EFEBE1;
  --earth-200: #E6E0D4;
  --earth-300: #D4CCBD;
  --earth-500: #A09888;

  --fire-300: #E2B8A0;
  --fire-400: #C27A5D;
  --fire-500: #B06040;
  --fire-600: #8E4530;

  --water-900: #141E28;
  --water-800: #1A2632;
  --water-700: #2A3A48;
  --water-600: #445A6E;
  --water-500: #5A7A94;
  --water-200: #D8E4EE;
  --water-100: #EDF3F7;

  --wood-400: #8BA78E;
  --wood-500: #6B8A6F;
  --wood-100: #EAF0EA;

  --metal-100: #FBF8F3;
  --metal-200: #F0E8DA;
  --metal-300: #D9C9B2;
  --metal-500: #B89870;

  --bg-page:        var(--earth-50);
  --bg-card:        var(--earth-100);
  --bg-input:       var(--earth-150);
  --bg-hover:       var(--earth-200);

  --text-primary:   var(--water-800);
  --text-secondary: var(--water-600);
  --text-muted:     var(--earth-500);
  --text-inverse:   var(--earth-50);
  --text-time:      var(--water-500);
  --text-positive:  var(--wood-500);

  --border-subtle:  var(--earth-200);
  --border-accent:  var(--metal-300);

  --btn-primary:    var(--fire-400);
  --btn-hover:      var(--fire-500);
  --btn-active:     var(--fire-600);
  --btn-disabled:   var(--fire-300);

  --ratio-phi: 1.618;
  --ratio-phi-inverse: 0.618;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", ui-monospace, monospace;
  --font-display: "Noto Serif SC", "STSong", "Georgia", "Songti SC", serif;

  --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
  --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem;
  --text-xl: 1.625rem; --text-2xl: 2rem; --text-3xl: 2.625rem; --text-4xl: 3.25rem;

  --leading-compact: 1; --leading-tight: 1.15; --leading-title: 1.24;
  --leading-body: 1.618; --leading-reading: 1.8;

  --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.625rem;
  --radius-lg: 1rem; --radius-xl: 1.625rem;

  --space-2xs: 0.25rem; --space-xs: 0.375rem; --space-sm: 0.625rem;
  --space-md: 1rem; --space-lg: 1.625rem; --space-xl: 2.625rem;
  --space-2xl: 4.25rem; --space-3xl: 6.875rem;

  --layout-narrow: 26.25rem; --layout-readable: 42.5rem;
  --layout-wide: 60rem; --layout-max: 77.5rem; --layout-home-grid: 48.75rem;

  --control-height-sm: 2rem; --control-height: 2.625rem; --control-height-lg: 3.25rem;
  --control-padding-x: var(--space-lg); --control-padding-y: var(--space-sm);
  --icon-size-sm: 2rem; --icon-size-md: 3.25rem; --icon-size-lg: 4.25rem; --icon-size-xl: 5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms; --duration-normal: 290ms; --duration-slow: 470ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--text-primary); background: var(--bg-page);
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }

/* ── Typography ── */
h1, h2, h3, h4 { font-weight: 400; line-height: var(--leading-title); color: var(--text-primary); }
h1 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); color: var(--text-secondary); }
.display { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); font-size: var(--text-sm); }
.text-muted { color: var(--text-muted); }
.text-time  { color: var(--text-time); }

/* ── Layout ── */
.container { max-width: var(--layout-wide); margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: var(--layout-readable); margin: 0 auto; padding: 0 var(--space-lg); }

/* ── Top Nav (desktop) ── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-page);
  position: sticky; top: 0; z-index: 100;
}
.nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text-primary); }
.nav-brand-logo { display: block; width: auto; height: 2.25rem; object-fit: contain; }
.nav-back-link {
  min-height: 2.25rem;
  padding: 0 var(--space-xs);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  cursor: pointer;
}
.nav-back-link::before {
  content: '←';
  margin-right: var(--space-2xs);
  color: var(--text-muted);
}
.nav-back-link:hover { color: var(--text-primary); }
.nav-links { display: flex; gap: var(--space-xl); align-items: center; }
.nav-links a { color: var(--text-muted); font-size: var(--text-sm); transition: color var(--duration-fast); letter-spacing: 0.03em; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }

/* ── Hamburger menu (mobile only) ── */
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  font-size: var(--text-xl); line-height: var(--leading-compact); color: var(--text-primary); padding: var(--space-2xs);
}
.hamburger-dropdown {
  display: none; position: absolute; top: 100%; right: var(--space-md);
  background: var(--bg-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown); min-width: 7.5rem; z-index: 200;
  flex-direction: column; padding: var(--space-xs) 0;
}
.hamburger-dropdown.open { display: flex; }
.hamburger-dropdown a {
  display: block; padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
}
.hamburger-dropdown a:hover, .hamburger-dropdown a.active { color: var(--text-primary); background: var(--bg-hover); }

/* ── Bottom Tabs (deprecated) ── */
.bottom-tabs { display: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--control-height); padding: var(--control-padding-y) var(--control-padding-x); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: var(--font-sans);
}
.btn-primary { background: var(--btn-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:active { background: var(--btn-active); }
.btn-primary:disabled { background: var(--btn-disabled); cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-ghost { background: transparent; color: var(--text-muted); padding: var(--space-sm) var(--space-md); }
.btn-lg { min-height: var(--control-height-lg); padding: var(--space-sm) var(--space-xl); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-sm { min-height: var(--control-height-sm); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }

/* ── Cards ── */
.card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); }
.card-accent { background: var(--metal-100); border-radius: var(--radius-lg); padding: var(--space-lg); }

/* ── Forms ── */
.input {
  width: 100%; padding: var(--control-padding-y) var(--space-md); font-size: var(--text-base);
  font-family: var(--font-sans); color: var(--text-primary);
  background: var(--bg-input); border: none; border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}
.input:focus { outline: none; background: var(--surface-elevated); }
.input::placeholder { color: var(--text-muted); }
.input-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.05em; }
.label { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: var(--space-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.form-group { margin-bottom: var(--space-lg); }

/* form aliases — used by liuyao-coin */
.form-input { width: 100%; padding: var(--control-padding-y) var(--space-md); font-size: var(--text-base); font-family: var(--font-sans); color: var(--water-600); background: var(--bg-input); border: none; border-radius: var(--radius-md); transition: background var(--duration-fast); }
.form-input:focus { outline: none; background: var(--surface-elevated); color: var(--water-700); }
.form-input::placeholder { color: var(--text-muted); }
.form-label { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: var(--space-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.select-input { width: 100%; padding: var(--control-padding-y) var(--space-md); font-size: var(--text-base); font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-input); border: none; border-radius: var(--radius-md); appearance: none; }

/* ── Input tabs ── */
.input-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-xl); }
.input-tab-btn { flex: 1; padding: var(--space-md) 0; font-size: var(--text-lg); font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans); letter-spacing: 0.03em; }
.input-tab-btn.active { color: var(--fire-400); border-bottom-color: var(--fire-400); }

/* ── Category chips ── */
.category-chip { padding: var(--space-sm) var(--space-2xs); font-size: var(--text-sm); text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans); }
.category-chip.active { border-color: var(--fire-400); background: var(--tone-fire-soft); color: var(--fire-600); font-weight: 500; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }

/* ── Gender radio ── */
.gender-radio-group { display: flex; align-items: center; gap: var(--space-lg); }
.gender-radio { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-base); color: var(--text-secondary); cursor: pointer; font-family: var(--font-sans); }
.gender-radio input[type="radio"] { appearance: none; width: 1.125rem; height: 1.125rem; border: 1.5px solid var(--border-subtle); border-radius: 50%; margin: 0; cursor: pointer; transition: all var(--duration-fast); position: relative; }
.gender-radio input[type="radio"]:checked { border-color: var(--fire-400); }
.gender-radio input[type="radio"]:checked::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--fire-400); }
.gender-radio.checked { color: var(--text-primary); }
.gender-clear-btn { border: none; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-sans); padding: 0 var(--space-2xs); cursor: pointer; }
.gender-clear-btn:hover { color: var(--fire-400); }

/* ── Section header ── */
.section-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-xs); }

/* ── True solar ── */
.true-solar-row { display: flex; align-items: center; justify-content: space-between; }
.true-solar-info { font-size: var(--text-xs); color: var(--text-time); line-height: var(--leading-body); margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--water-100); border-radius: var(--radius-md); }
.toggle-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-bg { position: absolute; inset: 0; border-radius: 0.75rem; transition: background 0.3s; }
.toggle-knob { position: absolute; top: 0.125rem; width: 1.25rem; height: 1.25rem; background: var(--color-white); border-radius: 50%; transition: left 0.3s; box-shadow: var(--shadow-knob); }

/* ── GPS status ── */
.gps-status { font-size: var(--text-xs); margin-bottom: var(--space-xs); }
.pick-city-btn { font-size: var(--text-sm); color: var(--text-secondary); padding: 0; background: none; border: none; cursor: pointer; font-family: var(--font-sans); }
.city-picker-panel { margin-top: var(--space-xs); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.city-picker-panel .cols { display: flex; }
.city-picker-panel .col { flex: 1; max-height: clamp(180px, 40vh, 300px); overflow-y: auto; }
.city-picker-panel .col + .col { border-left: 1px solid var(--border-subtle); }
.pick-opt { padding: var(--space-sm) var(--space-md); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); transition: background var(--duration-fast); }
.pick-opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.pick-opt.active { background: var(--tone-fire-soft); color: var(--fire-600); font-weight: 600; }
.pick-opt.muted { color: var(--text-muted); cursor: default; }
.pick-opt.muted:hover { background: transparent; color: var(--text-muted); }
.pick-coord { color: var(--text-muted); font-size: var(--text-xs); }

/* ── Shake section ── */
.page-shaking { position: relative; }
.sound-toggle { position: absolute; top: var(--space-md); right: var(--space-md); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; z-index: 2; }
.sound-toggle:hover { color: var(--text-secondary); }
.sound-toggle.is-muted { color: var(--earth-300); }
.shake-section { text-align: center; padding: var(--space-2xl) 0; display: flex; flex-direction: column; align-items: center; }
.shake-hint { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-2xl); }
.coins { display: flex; gap: clamp(1rem, 5vw, var(--space-xl)); justify-content: center; margin-bottom: var(--space-xl); }
.coin { width: clamp(3.5rem, 12vw, 5rem); height: clamp(3.5rem, 12vw, 5rem); border-radius: 50%; background: var(--metal-200); border: max(2px, 0.35vw) solid var(--metal-300); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, var(--text-2xl)); color: var(--metal-500); cursor: pointer; transition: transform var(--duration-fast); user-select: none; }
.coin:hover { transform: scale(1.08); background: var(--metal-300); }
.coin.spinning { animation: coinFlip 0.3s ease-out; }
@keyframes coinFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.throw-dots { display: flex; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-md); }
.throw-dots span { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--border-subtle); transition: background var(--duration-fast); }
.throw-dots span.done { background: var(--fire-400); }
.throw-results { font-size: var(--text-sm); color: var(--text-secondary); min-height: 8rem; text-align: left; }

/* ── Start button ── */
.btn-start { width: 100%; min-height: var(--control-height-lg); padding: var(--space-sm) 0; font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-2xl); box-shadow: var(--shadow-action); }

/* ── Interpretation ── */
.interp { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); }
.interp-head { margin-bottom: var(--space-md); }
.interp-body { font-size: var(--text-base); line-height: var(--leading-reading); color: var(--text-primary); }
.interp-body p { margin-bottom: var(--space-sm); }
.chase-row { display: flex; gap: var(--space-sm); }
.chase-row .form-input { flex: 1; }

/* ── Error state ── */
.err-state { text-align: center; padding: var(--space-3xl) var(--space-lg); }
.err-state p { color: var(--text-muted); margin-bottom: var(--space-md); }

/* ── Loading ── */
.loader-dots { display: flex; gap: var(--space-xs); justify-content: center; }
.loader-dots span { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--earth-300); animation: dotPulse 1.4s ease-in-out infinite both; }
.loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.loader-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes dotPulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.progress-wrap { max-width: 280px; width: 100%; }
.progress-bar { height: 3px; background: var(--earth-200); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-xs); }
.progress-bar .fill { height: 100%; background: var(--fire-400); border-radius: 2px; transition: width 0.3s; }
.progress-info { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); }

/* ── Coin 3D flip animation ── */
.coin-3d { width: var(--icon-size-lg); height: var(--icon-size-lg); border-radius: 50%; cursor: pointer; user-select: none; perspective: 12.5rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xl); }
.coin-3d .coin-face { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform 0.4s; }
.coin-flipping .coin-face { animation: coinFlip3D 0.8s linear infinite; }
@keyframes coinFlip3D {
  0%   { transform: rotateY(0deg) scaleX(1); }
  25%  { transform: rotateY(90deg) scaleX(0.3); }
  50%  { transform: rotateY(180deg) scaleX(1); }
  75%  { transform: rotateY(270deg) scaleX(0.3); }
  100% { transform: rotateY(360deg) scaleX(1); }
}

/* ── Throw progress dots ── */
.throw-progress { display: flex; gap: var(--space-sm); justify-content: center; margin: var(--space-lg) 0; }
.throw-dot { width: var(--control-height); height: var(--control-height); border-radius: 50%; border: 2px solid var(--fire-400); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600; transition: all var(--duration-fast); }
.throw-dot.done { background: var(--fire-400); color: var(--color-white); }
.throw-dot.current { background: var(--state-warning); border-color: var(--state-warning); color: var(--color-white); }
.throw-dot.pending { background: var(--earth-100); border-color: var(--border-subtle); color: var(--text-muted); }

/* ── Throw results ── */
.throw-result-item { padding: var(--space-2xs) 0; font-size: var(--text-sm); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-sm); }
.throw-result-item .dong-yao { color: var(--fire-600); font-weight: 600; }

/* ── Shake action button ── */
.btn-shake { width: 100%; height: var(--control-height-lg); font-size: var(--text-lg); font-weight: 600; background: var(--fire-400); color: var(--color-white); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast); font-family: var(--font-sans); margin-bottom: var(--space-md); }
.btn-shake:hover { background: var(--fire-500); }
.btn-shake:disabled { background: var(--fire-300); cursor: not-allowed; }

/* ── Hexagram result card ── */
.rcard { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid var(--border-subtle); margin-bottom: var(--space-lg); }
.rcard h3 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--space-md); }
.info-purpose, .info-status, .info-gender { color: var(--wood-500); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.info-time { color: var(--info-time); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.info-sun { color: var(--info-sun); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.info-ganzhi { color: var(--info-ganzhi); font-weight: 600; font-size: var(--text-sm); }
.info-xunkong { color: var(--info-xunkong); font-weight: 600; font-size: var(--text-sm); }

/* ── Hexagram two-table layout — always side-by-side ── */
.gua-pair { display: flex; gap: var(--space-sm); align-items: flex-start; flex-wrap: nowrap; }
.gua-col.ben { flex: 55 55 55%; min-width: 0; }
.gua-col.bian { flex: 45 45 45%; min-width: 0; }

.gua-label { font-size: clamp(0.65rem, 1.5vw, var(--text-sm)); color: var(--hexagram-accent); font-weight: 500; margin-bottom: 2px; }
.gua-name-line { margin-bottom: var(--space-xs); overflow: hidden; }
.gua-name-line .name { font-size: clamp(0.65rem, 1.5vw, var(--text-sm)); font-weight: 700; color: var(--text-primary); }
.gua-name-line .palace { font-size: clamp(0.6rem, 1.4vw, var(--text-xs)); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

.gua-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.gua-table th {
  font-size: clamp(0.55rem, 1.3vw, var(--text-xs)); font-weight: 700;
  color: var(--text-muted); text-align: center; padding: 2px 0;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.gua-table td {
  font-size: clamp(0.55rem, 1.3vw, var(--text-xs)); text-align: center;
  padding: 1px 0; height: clamp(20px, 3.5vw, 26px); vertical-align: middle;
  white-space: nowrap; overflow: hidden;
}

/* Column widths — 本卦 */
.gt-yao      { width: 18%; }
.gt-najia    { width: 38%; }
.gt-dong     { width: 8%;  color: var(--hexagram-accent); font-weight: 700; }
.gt-shiying  { width: 16%; color: var(--hexagram-accent); }
.gt-fuxiang  { width: 20%; }

/* Column widths — 变卦 */
.gua-col.bian .gt-yao      { width: 20%; }
.gua-col.bian .gt-najia    { width: 38%; }
.gua-col.bian .gt-fuxiang  { width: 20%; }
.gua-col.bian .gt-liushen  { width: 22%; font-weight: 700; }
.gt-liushen.ql { background: transparent; color: var(--auspicious-qinglong); border-radius: 0; font-weight: 700; }
.gt-liushen.bh { background: transparent; color: var(--auspicious-baihu); border-radius: 0; font-weight: 700; }

.gua-table tr.changed td { background: var(--hexagram-changed-bg); }
.fushen-text { font-size: 0.6rem; color: var(--text-muted); }

/* ── Mobile: stack gua columns ── */
@media (max-width: 640px) {
  .coin-3d { width: 56px; height: 56px; font-size: var(--text-lg); }
  .throw-dot { width: 34px; height: 34px; font-size: var(--text-xs); }
}

/* ── Badges ── */
.badge-time {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; font-size: var(--text-xs);
  color: var(--text-time); background: var(--water-100); border-radius: 20px; font-family: var(--font-mono);
}

/* ── Pills ── */
.pill {
  display: inline-flex; align-items: center; padding: 2px 10px;
  font-size: var(--text-xs); border-radius: 20px; font-weight: 500; letter-spacing: 0.02em;
}
.pill-earth { background: var(--earth-200); color: var(--earth-500); }
.pill-fire  { background: var(--tone-fire-soft); color: var(--fire-600); }
.pill-water { background: var(--water-100); color: var(--water-600); }
.pill-wood  { background: var(--wood-100); color: var(--wood-500); }
.pill-metal { background: var(--metal-200); color: var(--metal-500); }

/* ── Utilities ── */
.gap-xs{ gap:var(--space-xs) } .gap-sm{ gap:var(--space-sm) } .gap-md{ gap:var(--space-md) } .gap-lg{ gap:var(--space-lg) }
.flex{ display:flex } .flex-col{ display:flex;flex-direction:column }
.items-center{ align-items:center } .justify-between{ justify-content:space-between }
.text-center{ text-align:center }
.mt-sm{ margin-top:var(--space-sm) } .mt-md{ margin-top:var(--space-md) }
.mt-lg{ margin-top:var(--space-lg) } .mt-xl{ margin-top:var(--space-xl) }
.mb-sm{ margin-bottom:var(--space-sm) } .mb-md{ margin-bottom:var(--space-md) } .mb-lg{ margin-bottom:var(--space-lg) }
.p-sm{ padding:var(--space-sm) } .p-md{ padding:var(--space-md) } .p-lg{ padding:var(--space-lg) }
.w-full{ width:100% } .hidden{ display:none }

.show-mobile { display: none !important; }
.show-desktop { display: block; }

/* ═══════════════════════════════════════════════════════════
   MOBILE ≤ 640px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --text-xl: 1.5rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2rem;
    --text-4xl: 2.625rem;
    --space-xl: 2rem;
    --space-2xl: 3.25rem;
    --space-3xl: 5.25rem;
  }

  .container, .container-narrow { padding: 0 var(--space-lg); }

  .show-mobile { display: block !important; }
  .show-desktop { display: none !important; }

  /* Mobile: show hamburger, hide links, keep nav bar */
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav { padding: var(--space-sm) var(--space-md); position: relative; }

  .btn-mobile-full { width: 100%; justify-content: center; }

  /* bigger tap targets */
  .input { padding: 14px 14px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   五行字色（基础设计原则：五行字符必须带颜色）
   ═══════════════════════════════════════════════════════════ */
.wx-mu   { color: var(--wood-500); }  /* 木 */
.wx-huo  { color: var(--fire-400); }  /* 火 */
.wx-tu   { color: var(--earth-500); } /* 土 */
.wx-jin  { color: var(--metal-500); } /* 金 */
.wx-shui { color: var(--water-500); } /* 水 */

.nj-mu   { color: var(--wuxing-mu); font-weight: 700; } /* 木 */
.nj-huo  { color: var(--wuxing-huo); font-weight: 700; } /* 火 */
.nj-tu   { color: var(--wuxing-tu); font-weight: 700; } /* 土 */
.nj-jin  { color: var(--wuxing-jin); font-weight: 700; } /* 金 */
.nj-shui { color: var(--wuxing-shui); font-weight: 700; } /* 水 */