/* 《忙什么呢？》网页原型 · 弈伴品牌主题（浅色 = 宣纸 + 朱红 + 墨；深色 = 黑底朱红）。颜色只用 token。 */
:root {
  /* 品牌色（「弈伴」品牌手册：朱红 + 墨 + 黑；点缀酒红、金） */
  --brand: #F05129;          /* 朱红 */
  --brand-ink: #1E0500;      /* 墨 */
  --brand-paper: #F8F1E7;    /* 宣纸 */
  --brand-wine: #7E0029;     /* 酒红 */
  --gold: #D4B24A;           /* 金 */
  --red: #B3122E;
  --jade: #03673B;
  --graphite: #2A1A12;
  --numeral: #282268;
  --res-fund: #C8A540;
  --res-qual: #5FC3AD;
  --res-infl: #98A5D4;

  /* 浅色主题：宣纸底、墨字、朱红强调 */
  --bg: #EFE6DA;
  --bg-glow: #FBF6EF;
  --surface: rgba(253, 250, 245, .94);
  --surface-2: #F6EEE3;
  --surface-3: #EADCCB;
  --raised: #FFFDFA;
  --text: #24150D;
  --text-2: #4A3528;
  --muted: #8A7264;
  --line: rgba(74, 40, 26, .16);
  --line-2: rgba(74, 40, 26, .32);
  --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 22px rgba(40, 14, 4, .10);
  --shadow-lg: 0 30px 70px rgba(30, 8, 0, .26);
  --overlay: rgba(30, 10, 2, .5);
  --accent: #F05129;
  --accent-2: #FF7650;
  --accent-ink: #B8341A;     /* 浅底上的朱红文字（加深保证可读） */
  --on-accent: #1E0500;      /* 朱红底上用墨色字，和标志一致 */
  --accent-soft: rgba(240, 81, 41, .12);
  --good: #03673B;
  --good-fill: #5FC3AD;
  --good-soft: rgba(3, 103, 59, .1);
  --bad: #B3122E;
  --bad-fill: #E8607A;
  --bad-soft: rgba(179, 18, 46, .09);
  --info: #24708F;
  --info-fill: #74CEE2;
  --info-soft: rgba(36, 112, 143, .1);
  --violet-ink: #4E5A92;
  --hi: #B8341A;            /* 强调数字 */
  --chip: rgba(74, 40, 26, .06);
  --dark-chip: #1E0500;     /* 浮层提示（印章 / 横幅 / toast）在两种主题里都用深色底 */
  --dark-chip-text: #FBEFE6;
  --pip-on: #F05129;
  --pip-off: rgba(74, 40, 26, .16);
  --card-back: #F05129;
  --card-back-line: rgba(30, 5, 0, .5);

  /* 兼容旧样式名 */
  --amber: var(--accent);
  --amber-d: var(--accent-ink);
  --gold-hi: var(--hi);
  --coral: var(--bad);
  --mint: var(--good-fill);
  --mint-d: var(--good);
  --violet: var(--res-infl);
  --violet-d: var(--violet-ink);
  --sky: var(--info-fill);
  --sky-d: var(--info);
  --steel: #7FA6B5;
  --fog: var(--muted);
  --peach: #FF8A65;
  --night: var(--graphite);
  --paper: var(--brand-paper);
  --paper-2: #EFE3D3;
  --ink: var(--graphite);
  --ink-2: #6A5246;

  --radius: 12px;
  --cw: 92px;
  --ch: 132px;
  --display: "Ma Shan Zheng", "ZCOOL XiaoWei", "STKaiti", "KaiTi", "楷体", serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --condensed: "Anton", "Oswald", "Impact", "Arial Narrow", sans-serif;
  --tap: 40px;
}
:root[data-theme="dark"] {
  /* 深色主题：品牌手册的黑底朱红 */
  --bg: #0B0908;
  --bg-glow: #2A0E06;
  --surface: rgba(22, 17, 14, .94);
  --surface-2: #1C1612;
  --surface-3: #2A201A;
  --raised: #221A15;
  --text: #F6EEE7;
  --text-2: #D9CBC0;
  --muted: #A8968A;
  --line: rgba(240, 81, 41, .18);
  --line-2: rgba(240, 81, 41, .38);
  --shadow: 0 10px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .65);
  --overlay: rgba(0, 0, 0, .7);
  --accent: #F05129;
  --accent-2: #FF7650;
  --accent-ink: #FF6E47;
  --on-accent: #120300;
  --accent-soft: rgba(240, 81, 41, .16);
  --good: #75D1B0;
  --good-fill: #75D1B0;
  --good-soft: rgba(117, 209, 176, .14);
  --bad: #FF7A8E;
  --bad-fill: #E8607A;
  --bad-soft: rgba(232, 96, 122, .16);
  --info: #6EC3F4;
  --info-fill: #6EC3F4;
  --info-soft: rgba(110, 195, 244, .14);
  --violet-ink: #B7A2FF;
  --hi: #FF8A5C;
  --chip: rgba(255, 255, 255, .05);
  --dark-chip: rgba(10, 6, 4, .96);
  --pip-on: #F05129;
  --pip-off: rgba(255, 255, 255, .12);
  --card-back: #7E0029;
  --card-back-line: rgba(212, 178, 74, .55);
  --steel: #8FB8C9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 50% 30%, var(--bg-glow) 0%, transparent 70%),
    radial-gradient(900px 500px at 50% 115%, var(--accent-soft), transparent 70%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .8s;
  -webkit-tap-highlight-color: transparent;
}
/* 世界事件 / 经济周期给牌桌一层淡色 */
body[data-world="bull"] { background-color: color-mix(in srgb, var(--bg) 88%, #2f9e6a); }
body[data-world="bear"] { background-color: color-mix(in srgb, var(--bg) 88%, #c11d25); }
body[data-world="gray"] { background-color: color-mix(in srgb, var(--bg) 85%, #777); }
body[data-world="spark"] { background-color: color-mix(in srgb, var(--bg) 88%, #8b6bff); }
body[data-world="calm"] { background-color: color-mix(in srgb, var(--bg) 90%, #3fa7c9); }
/* 浅色主题：极淡的六边形格做桌布肌理（弈伴标志的六边形） */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16V48L28 64L0 48V16Z M28 64V97 M0 48L-28 64 M56 48L84 64' fill='none' stroke='%234A281A' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
}
:root[data-theme="dark"] body::before { background: none; box-shadow: inset 0 0 160px rgba(0, 0, 0, .55); opacity: 1; }
button { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--raised); color: var(--text); cursor: pointer; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 0 var(--line), 0 4px 10px rgba(40, 14, 4, .08);
  transition: transform .12s, background .2s, border-color .2s, box-shadow .2s, opacity .2s;
  white-space: nowrap; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent) 70%, #000);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn.danger { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn.mint { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 60%, transparent); color: var(--good); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.big { min-height: 50px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.btn.glow { animation: glow 1.6s ease-in-out infinite; }
.btn .ico { width: 18px; height: 18px; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
  .btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 11px; border: 1px solid var(--line); background: var(--chip);
  display: inline-grid; place-items: center; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--text); touch-action: manipulation;
}
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.icon-btn .ico { width: 18px; height: 18px; }
@media (hover: hover) { .icon-btn:hover { border-color: var(--accent); } }

/* ---------- 品牌标志 ---------- */
.logo {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; flex: none; color: var(--brand-ink);
  background: var(--brand); box-shadow: 0 10px 24px rgba(240, 81, 41, .35);
}
.logo .yb-logo { width: 82%; height: 82%; }
.logo.sm { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 4px 10px rgba(240, 81, 41, .3); }
.logo.sm .yb-logo { width: 86%; height: 86%; }
/* ---------- 弹窗 ---------- */
.modal-back { position: fixed; inset: 0; z-index: 70; background: var(--overlay); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; backdrop-filter: blur(2px); }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 20px; box-shadow: var(--shadow-lg); animation: pop .28s cubic-bezier(.2, .9, .3, 1.3); color: var(--text);
}
.modal.wide { width: min(820px, 100%); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.modal h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--accent-ink); display: flex; align-items: center; gap: 8px; }
.modal h2 .ico { width: 24px; height: 24px; }
.modal p { margin: 6px 0; color: var(--text-2); }
.modal .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.modal .row.end { justify-content: flex-end; position: sticky; bottom: -20px; margin-bottom: -20px; padding: 10px 0 20px; background: linear-gradient(to bottom, transparent, var(--raised) 12px); z-index: 1; }
.modal .countdown { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 14px; }
.modal .countdown i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.toasts { position: fixed; right: 16px; bottom: 110px; z-index: 80; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { padding: 10px 14px; border-radius: 12px; background: var(--dark-chip); color: var(--dark-chip-text); border: 1px solid rgba(218, 172, 109, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: fadeUp .25s; font-size: 13px; }
.toast.error { border-color: #FF8A80; color: #FFD3CD; }
.toast.info { border-color: var(--gold); }