/* ─────────────────────────────────────────────────────────────────────────
   福慧大富翁 Dashboard — 禪意水彩 reskin (part 2)
   Modals · setup · dice · draw-card · catalog · history · toast · responsive
   ───────────────────────────────────────────────────────────────────────── */

/* ───────────── Modal ───────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(45,56,42,0.40);
}
.modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  background: var(--surface);
  border-radius: var(--r-card);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes modalIn {
  from { transform: translateY(14px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; }
.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  contain: paint;
}
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 28px; border-top: 1px solid var(--line);
}

/* Version label parked on the far left of a modal footer */
.app-version {
  margin-right: auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.app-version:empty { display: none; }

/* Inline version tag riding alongside the brand subtitle */
.ver-tag {
  opacity: 0.7;
  letter-spacing: 0.12em;
}

/* Confirm dialog — compact centered panel */
.confirm-panel { width: min(400px, 100%); padding: 26px 28px; gap: 12px; }
.confirm-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.confirm-message { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-dim); white-space: pre-line; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.btn-danger {
  background: var(--danger); border-color: transparent; color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(161,77,58,0.30);
}
.btn-danger:hover { background: #8B4332; border-color: transparent; }

.setup-section { border: none; padding: 0 0 24px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.setup-section:last-of-type { border-bottom: none; padding-bottom: 4px; margin-bottom: 0; }
.setup-section legend {
  padding: 0; margin-bottom: 14px;
  font-size: 11px; color: var(--ink-dim); font-weight: 700;
  letter-spacing: 0.22em; display: block; width: 100%;
}

.player-count-pick { display: flex; gap: 10px; }
.chip {
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 9px 20px; border-radius: var(--r-pill);
  cursor: pointer; font-size: 13px; font-weight: 600; min-height: 44px;
  letter-spacing: 0.04em; box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.chip:hover { background: var(--surface-2); transform: translateY(-1px); }
.chip.active {
  background: linear-gradient(165deg, #8BBB82, var(--primary));
  border-color: transparent; color: #243024;
  box-shadow: 0 6px 16px rgba(123,174,115,0.34);
}

.setup-players { display: grid; grid-template-columns: 1fr; gap: 10px; }
.setup-player-row {
  display: grid;
  grid-template-columns: 1.4fr auto 56px auto 56px;
  gap: 10px; align-items: center; padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.setup-player-row.top {
  border-color: var(--fortune-soft);
  background: var(--fortune-tint);
  box-shadow: 0 0 0 3px rgba(216,169,78,0.12);
}
.setup-player-row input[type="text"] {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 16px; min-height: 44px; letter-spacing: 0.02em;
}
.setup-player-row input[type="text"]:focus { outline: none; border-color: var(--wisdom); }
.setup-player-row .roll-out {
  font-size: 18px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--surface); border-radius: var(--r-sm);
  padding: 8px 0; border: 1px solid var(--line);
  min-height: 40px; display: grid; place-items: center; color: var(--ink);
}
.setup-player-row .roll-out.fortune { color: var(--fortune-ink); }
.setup-player-row .roll-out.wisdom  { color: var(--wisdom-ink);  }
.setup-player-row input.roll-out {
  -webkit-appearance: none; appearance: none; display: block; width: 100%;
  padding: 8px 4px; cursor: text;
}
.setup-player-row input.roll-out::-webkit-outer-spin-button,
.setup-player-row input.roll-out::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.setup-player-row input.roll-out { -moz-appearance: textfield; }
.setup-player-row input.roll-out::placeholder { color: var(--ink-mute); font-weight: 500; }
.setup-player-row input.roll-out:focus { outline: none; border-color: var(--wisdom); background: var(--surface); }
.setup-player-row .mini-btn {
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 8px 12px; border-radius: var(--r-pill);
  cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap;
  min-height: 44px; letter-spacing: 0.06em; box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.setup-player-row .mini-btn:hover { background: var(--surface-2); transform: translateY(-1px); }

.setup-civ-info {
  font-size: 13px; color: var(--ink-dim); margin-bottom: 14px;
  padding: 13px 15px; background: var(--wisdom-tint);
  border-radius: var(--r-md); line-height: 1.65;
}
.setup-civ-info strong { color: var(--ink); font-weight: 700; }
.civ-dice-inputs { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.civ-dice-inputs .civ-input-row { margin-bottom: 0; }
.civ-dice-inputs input[type="number"] { width: 84px; font-size: 16px; font-weight: 700; }
.civ-goal-calc {
  font-size: 14px; color: var(--ink-dim); line-height: 1.6;
  padding: 12px 15px; background: var(--fortune-tint);
  border-radius: var(--r-md); letter-spacing: 0.02em;
}
.civ-goal-calc strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
#civ-calc-goal { font-size: 17px; color: var(--fortune-ink); }

.row { display: flex; gap: 12px; align-items: center; }
.row > span { color: var(--ink-dim); font-size: 13px; letter-spacing: 0.04em; }
.row input[type="number"] {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 16px; width: 96px; min-height: 44px; font-variant-numeric: tabular-nums;
}
.row input[type="number"]:focus { outline: none; border-color: var(--wisdom); }

.hint { color: var(--ink-mute); font-size: 11px; margin: 12px 0 0; line-height: 1.6; letter-spacing: 0.03em; }
.hint.inline { margin: 0; }
.civ-input-row { margin-bottom: 8px; }
.civ-input-row input[type="number"] { width: 110px; font-size: 16px; font-weight: 700; }

/* ───────────── Virtual 3D die ───────────── */
.dice-stage {
  display: grid; justify-items: center; gap: 12px;
  padding: 24px 18px 18px; margin-bottom: 16px;
  background:
    radial-gradient(80% 60% at 50% 30%, var(--wisdom-tint) 0%, rgba(233,244,241,0) 70%),
    var(--surface-2);
  border-radius: var(--r-md);
}
.dice-scene { width: 130px; height: 140px; perspective: 540px; display: grid; place-items: center; }
.die10 {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-54deg);
  color: var(--ink);
}
.die10.fortune { color: var(--fortune); }
.die10.wisdom  { color: var(--wisdom);  }
.d-face {
  position: absolute; width: 120px; height: 120px; left: -60px; top: -60px;
  transform-origin: 50% 50%; backface-visibility: hidden;
}
.d-face svg { width: 100%; height: 100%; overflow: visible; }
.kface { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.die10-num {
  font-family: inherit; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; fill: currentColor;
}
.dice-caption {
  font-size: 12px; letter-spacing: 0.05em; color: var(--ink-dim);
  text-align: center; min-height: 16px;
}

/* ───────────── Card draw — printed-card look ───────────── */
.card-panel { width: min(560px, 100%); }

.card-display {
  position: relative;
  border-radius: var(--r-md);
  padding: 30px 30px 28px;
  background:
    radial-gradient(120% 50% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
/* soft starburst emblem echoing the board's golden star */
.card-display::before {
  content: "★";
  display: block;
  margin: 2px auto 14px;
  width: 64px; height: 64px; line-height: 64px;
  font-size: 30px; color: var(--fortune);
  border-radius: 50%;
  background: radial-gradient(circle, var(--fortune-tint) 0%, rgba(250,243,223,0) 72%);
  text-shadow: 0 2px 10px rgba(216,169,78,0.45);
}
.card-category {
  font-size: 12px; letter-spacing: 0.18em; color: var(--ink-mute);
  margin-bottom: 6px; font-weight: 600;
}
.card-category::before { content: "［"; }
.card-category::after  { content: "］"; }
.card-name {
  font-size: 26px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink); margin: 0 0 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.card-desc {
  font-size: 14.5px; line-height: 1.9; color: var(--ink);
  margin: 0 0 16px; letter-spacing: 0.02em; text-wrap: pretty;
}
.card-section { margin-bottom: 14px; text-align: left; }
.card-section-label {
  font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute);
  margin-bottom: 6px; font-weight: 700;
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--wisdom-tint); color: var(--wisdom-ink);
}
.card-section-text { font-size: 14.5px; line-height: 1.85; color: var(--ink); margin: 6px 0 0; letter-spacing: 0.02em; text-wrap: pretty; }
.card-side {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-dim);
  margin: 0 0 16px; padding: 11px 14px; text-align: left;
  background: var(--surface-2); border-radius: var(--r-sm); letter-spacing: 0.02em;
}
.card-side-x2 {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--danger); color: var(--danger-deep); font-weight: 700;
}
.card-reward {
  align-self: center;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: linear-gradient(165deg, #FBEFCB, var(--fortune-soft));
  font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
  color: #8A6A1E; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(216,169,78,0.22);
}
.card-reward.sprint {
  background: linear-gradient(165deg, #FBE0D2, #F6CDBC);
  color: var(--danger-deep);
  box-shadow: 0 4px 12px rgba(204,126,110,0.26);
}
.card-reward-base {
  margin-left: 10px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink-dim);
}

/* Card foot stacks: player score reference, then recipient + action buttons. */
#card-foot { flex-direction: column; align-items: stretch; gap: 14px; }

/* Read-only player score reference inside the card modal (判斷對象用). */
.card-players-ref { padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); }
.cpr-label { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); margin-bottom: 8px; }
.cpr-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cpr-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 11px; background: var(--surface); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.cpr-item.graduated { box-shadow: 0 0 0 1.5px var(--fortune-soft), var(--shadow-sm); }
.cpr-name { font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.cpr-stats b { font-weight: 400; color: var(--ink-mute); margin-left: 2px; }
.cpr-tot { color: var(--ink); font-weight: 700; }

.card-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.card-actions .row { justify-content: flex-start; }
.card-actions select {
  flex: 1; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 16px; min-height: 44px; letter-spacing: 0.02em;
}
.card-actions select:focus { outline: none; border-color: var(--wisdom); }
.card-buttons { display: flex; gap: 10px; justify-content: flex-end; }

/* ───────────── Deck manager ───────────── */
.dm-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.dm-section:first-child { padding-top: 4px; }
.dm-section:last-child  { border-bottom: none; padding-bottom: 4px; }
.dm-section h3 {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.24em;
  color: var(--ink-dim); font-weight: 700;
}
.dm-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.65; margin: 0 0 12px; letter-spacing: 0.02em; }
.dm-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; gap: 16px; }
.dm-row:last-child { margin-bottom: 0; }
.dm-label { color: var(--ink-dim); letter-spacing: 0.06em; }
.dm-row > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-row strong { font-weight: 700; }
#dm-paste {
  display: block; width: 100%; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; line-height: 1.55; resize: vertical;
  background: var(--surface-2); color: var(--ink); margin: 12px 0; letter-spacing: 0;
}
#dm-paste:focus { outline: none; border-color: var(--wisdom); }
#dm-paste::placeholder { color: var(--ink-mute); }
.dm-paste-section { margin-top: 14px; }

/* ───────────── Card catalog ───────────── */
.catalog-panel { width: min(820px, 100%); }
.catalog-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--surface); padding: 0 12px; }
.catalog-tab {
  flex: 1; padding: 14px 16px; background: transparent; border: none;
  border-bottom: 3px solid transparent; color: var(--ink-dim);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease; min-height: 46px;
}
.catalog-tab:hover { color: var(--ink); }
.catalog-tab.active { color: var(--primary-deep); border-bottom-color: var(--primary); }

.catalog-group { margin-bottom: 28px; }
.catalog-group:last-child { margin-bottom: 0; }
.catalog-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ink-dim); gap: 12px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line-strong);
}
.catalog-group-name { color: var(--ink); }
.catalog-group-reward { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--primary-deep); }

.catalog-card { border-radius: var(--r-md); padding: 15px 17px; background: var(--surface-2); margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.catalog-card:last-child { margin-bottom: 0; }
.cc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cc-name { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); margin: 0; }
.cc-reward {
  font-size: 10px; letter-spacing: 0.08em; color: #8A6A1E;
  padding: 4px 11px; background: var(--fortune-tint); border-radius: var(--r-pill);
  white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700;
}
.cc-desc, .cc-line { font-size: 13px; line-height: 1.7; margin: 0 0 8px; color: var(--ink); letter-spacing: 0.02em; }
.cc-line:last-of-type { margin-bottom: 0; }
.cc-section-label { display: block; font-size: 9px; letter-spacing: 0.2em; color: var(--wisdom-ink); font-weight: 700; margin-bottom: 3px; }
.cc-side { font-size: 11px; color: var(--ink-dim); margin: 8px 0 0; padding: 7px 11px; background: var(--surface); border-radius: var(--r-sm); letter-spacing: 0.02em; }

/* ───────────── History list ───────────── */
.history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.history-empty {
  text-align: center; padding: 48px 20px; color: var(--ink-mute);
  font-size: 12px; letter-spacing: 0.04em; line-height: 1.7;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
}
.history-item { border-radius: var(--r-md); padding: 17px 19px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.history-item .hi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.history-item .hi-title { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.history-item .hi-time { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.history-item .hi-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.history-item .hi-player { padding: 11px 13px; background: var(--surface); border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 4px; position: relative; box-shadow: var(--shadow-sm); }
.history-item .hi-player.graduated { box-shadow: 0 0 0 2px var(--fortune-soft), var(--shadow-sm); }
.history-item .hi-player .hp-name { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: baseline; }
.history-item .hi-player.graduated .hp-name::after {
  content: "★ 畢業"; font-size: 9px; letter-spacing: 0.12em; color: #8A6A1E;
  background: var(--fortune-tint); padding: 2px 8px; border-radius: var(--r-pill);
  font-weight: 700; margin-left: 6px;
}
.history-item .hi-player .hp-scores { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.history-item .hi-player .hp-total { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.1em; margin-top: 2px; }
.history-item .hi-player .hp-total strong { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; margin-left: 4px; }
.history-item .hi-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Read-only round detail (non-destructive 查看) */
.history-list.hidden { display: none; }
.history-detail { display: flex; flex-direction: column; gap: 16px; }
.history-detail.hidden { display: none; }
.hd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd-readonly { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; }
.hd-title { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.hd-meta { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; margin-top: -10px; }
.hd-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hd-sum { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 13px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); }
.hd-sum span { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.14em; }
.hd-sum strong { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hd-sum.reached strong { color: var(--primary-deep); }
.hd-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.hd-player { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); position: relative; }
.hd-player.graduated { box-shadow: 0 0 0 2px var(--fortune-soft), var(--shadow-sm); }
.hd-pname { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.hd-player.graduated .hd-pname::after {
  content: "★ 畢業"; font-size: 9px; letter-spacing: 0.12em; color: #8A6A1E;
  background: var(--fortune-tint); padding: 2px 8px; border-radius: var(--r-pill);
  font-weight: 700; margin-left: 6px;
}
.hd-pstats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-dim); letter-spacing: 0.03em; }
.hd-pstats span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.hd-pstats b { color: var(--ink); font-weight: 700; }
.hd-pstats .dot { width: 7px; height: 7px; }
.hd-ptotal { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.1em; }
.hd-ptotal strong { font-size: 16px; color: var(--ink); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hd-log-label { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; margin-bottom: 8px; }
.hd-loglist { max-height: 260px; overflow-y: auto; }

/* ───────────── Toast ───────────── */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  padding: 14px 26px; background: rgba(57,65,58,0.96); color: #FCFBF6;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; z-index: 200;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw; text-align: center; box-shadow: var(--shadow-lg);
}
.toast.hidden { display: none; }
.toast.grad {
  background: linear-gradient(165deg, #FBEFCB, var(--fortune-soft));
  color: #7E6520; font-weight: 700;
  box-shadow: 0 10px 30px rgba(216,169,78,0.34);
}

/* ───────────── Responsive ───────────── */
@media (min-width: 1300px) and (orientation: landscape) {
  .meta-value { font-size: 25px; }
  .pc-name    { font-size: 21px; }
  .stat-row .stat-num { font-size: 30px; }
  .pc-total strong { font-size: 26px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dashboard { grid-template-columns: 1fr; }
  .players-grid { grid-template-columns: repeat(2, 1fr); }
  .tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tool-card.danger-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .meta { gap: 0; }
  .meta-item { min-width: 0; padding: 2px 13px; }
  .actions .btn { padding: 9px 14px; font-size: 12px; letter-spacing: 0.04em; min-height: 40px; }
  .dashboard { padding: 18px 20px 32px; gap: 18px; }
  .topbar {
    padding:
      calc(14px + var(--sa-top))
      calc(20px + var(--sa-right))
      14px
      calc(20px + var(--sa-left));
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "meta meta";
    gap: 12px;
    padding:
      calc(12px + var(--sa-top))
      calc(16px + var(--sa-right))
      12px
      calc(16px + var(--sa-left));
  }
  .brand   { grid-area: brand; gap: 10px; }
  .actions { grid-area: actions; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .meta    { grid-area: meta; justify-content: space-between; }
  .logo { width: 40px; height: 40px; }
  .logo svg { width: 30px; height: 30px; }
  .brand-text .title    { font-size: 17px; letter-spacing: 0.08em; }
  .brand-text .subtitle { display: none; }
  .meta-item { padding: 2px 4px; min-width: 0; flex: 1; }
  .meta-item + .meta-item::before { display: none; }
  .meta-item label { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 2px; }
  .meta-value { font-size: 17px; }
  .meta-cap   { display: none; }
  .civ-progress { padding: 14px 16px 0; max-width: none; }
  .dashboard    { padding: 14px 16px 24px; gap: 16px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
  .stat-row { grid-template-columns: 48px 1fr 40px 56px 40px; gap: 8px; }
  .stat-row .stat-num { font-size: 22px; min-width: 56px; }
  .pc-name { font-size: 17px; }
  .player-card { padding: 20px 18px 14px; }
  .setup-player-row { grid-template-columns: 1fr; }
  .empty-state { padding: 48px 20px; }
  .modal { padding: 12px; }
  .modal-head, .modal-foot { padding: 14px 18px; }
  .modal-body { padding: 18px 18px; }
  .modal-head h2 { font-size: 15px; letter-spacing: 0.1em; }
  .card-display { padding: 24px 18px; }
  .card-name { font-size: 22px; margin-bottom: 12px; padding-bottom: 12px; letter-spacing: 0.08em; }
  .card-desc, .card-section-text { font-size: 14px; line-height: 1.8; }
  .history-item { padding: 14px 16px; }
  .history-item .hi-players { grid-template-columns: 1fr; }
  .catalog-tab { padding: 12px 10px; font-size: 12px; letter-spacing: 0.06em; }
  .catalog-card { padding: 13px 15px; }
  .cc-name { font-size: 14px; }
}
@media (max-width: 380px) {
  .topbar {
    padding:
      calc(10px + var(--sa-top))
      calc(12px + var(--sa-right))
      10px
      calc(12px + var(--sa-left));
  }
  .actions .btn { padding: 7px 11px; font-size: 11px; min-height: 36px; }
  .meta-value { font-size: 16px; }
  .meta-item label { font-size: 8.5px; }
  .stat-row { grid-template-columns: 44px 1fr 36px 50px 36px; gap: 6px; }
  .tap { width: 36px; height: 36px; font-size: 18px; }
  .stat-row .stat-num { font-size: 20px; min-width: 50px; }
  .pc-name { font-size: 16px; }
  .player-card { padding: 18px 15px 12px; }
  .card-display { padding: 20px 15px; }
  .card-name { font-size: 20px; }
}

/* Prevent iOS auto-zoom on form inputs */
input[type="number"], input[type="text"], select { font-size: 16px; }
@media (min-width: 768px) { .stat-row .stat-num { font-size: 28px; } }

/* ───────────── Floating quick-draw bar ─────────────
   Only at widths where the tools column drops below the player grid; on wider
   screens the sidebar draw buttons are already in view. Must stay after the
   720/640 .dashboard rules above so the reserved bottom padding wins. */
.quick-draw { display: none; }
@media (max-width: 1024px) {
  .quick-draw {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 60; /* above the sticky topbar (50), beneath modals (100) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .quick-draw .btn {
    background: rgba(252,251,246,0.96);
    box-shadow: var(--shadow-lg);
    border-color: var(--line);
  }
  /* keep the last row of cards / danger zone tappable above the bar */
  .dashboard { padding-bottom: 150px; }
}
.quick-draw.hidden { display: none; }