/*
  模块说明：弹窗（modal）与轻提示（toast）样式。
  被谁使用：public/js/components/modal.js（.modal-*）与 public/js/components/toast.js（.toast-*）。
  关键约束：
  - 强制弹窗（进牌桌前合规声明、欢乐豆不足）必须"点按钮才能关"，所以遮罩默认不响应点击，
    只有 modal.js 显式加 is-mask-closable 类时才会把点击当作关闭意图。
  - 结算弹窗、签到弹窗内容较多，正文区独立滚动，避免在手机上把按钮挤出屏幕。
*/

/* ============ 1. 遮罩层 ============ */
.modal-mask {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: var(--c-overlay);
  backdrop-filter: blur(3px);
  animation: mask-in 0.16s ease-out;
}
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
.modal-mask.is-closing { animation: mask-out 0.14s ease-in forwards; }
@keyframes mask-out { to { opacity: 0; } }

/* ============ 2. 弹窗本体 ============ */
.modal {
  width: 100%; max-width: 480px;
  max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gold-500);
  background: linear-gradient(180deg, rgba(16, 84, 60, 0.98), rgba(6, 40, 28, 0.99));
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.modal.is-closing { animation: modal-out 0.14s ease-in forwards; }
@keyframes modal-out { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
.modal--wide { max-width: 620px; }
.modal--sm { max-width: 380px; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.02));
}
.modal__title { font-size: 16px; font-weight: 800; color: var(--c-gold-200); }
.modal__close {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--c-line-soft);
  background: rgba(0, 0, 0, 0.25); color: var(--c-text-dim);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.modal__close:hover { color: var(--c-white); border-color: var(--c-gold-500); }
.modal__close.hidden { display: none; }

.modal__body { padding: 16px; overflow-y: auto; flex: 1 1 auto; }
.modal__foot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--c-line);
  background: rgba(0, 0, 0, 0.2);
}
.modal__foot .btn { min-width: 100px; }
.modal__foot--center { justify-content: center; }

/* ============ 3. 弹窗内常用块 ============ */
.modal-text { font-size: 14px; line-height: 1.7; color: var(--c-text); }
.modal-text strong { color: var(--c-gold-400); }
.modal-note { margin-top: 10px; font-size: 12px; color: var(--c-text-dim); }

.result-hero { text-align: center; padding: 6px 0 12px; }
.result-hero__label { font-size: 13px; color: var(--c-text-dim); }
.result-hero__amount { font-size: 34px; font-weight: 900; letter-spacing: 1px; margin-top: 2px; }
.result-hero__amount.is-win { color: var(--c-gold-400); text-shadow: 0 0 16px rgba(212, 175, 55, 0.5); }
.result-hero__amount.is-lose { color: #ff9d9d; }
.result-hero__amount.is-even { color: var(--c-text-dim); }
.result-hero__hand { margin-top: 6px; font-size: 13px; color: var(--c-gold-200); }

.result-board { display: flex; gap: 6px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.result-players { display: flex; flex-direction: column; gap: 8px; }
.result-player {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft); background: rgba(0, 0, 0, 0.24);
}
.result-player.is-winner { border-color: var(--c-green-300); background: rgba(87, 199, 155, 0.12); }
.result-player.is-folded { opacity: 0.6; }
.result-player__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.result-player__name { font-size: 13px; font-weight: 700; color: var(--c-white); }
.result-player__hand { font-size: 11.5px; color: var(--c-text-dim); }
.result-player__cards { display: flex; gap: 3px; }
.result-player__right { text-align: right; white-space: nowrap; }

/* 强制弹窗的顶部警示条（合规声明 / 防沉迷 / 欢乐豆不足） */
.force-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-md); margin-bottom: 12px;
  font-size: 13px; font-weight: 700;
  border: 1px solid rgba(217, 74, 74, 0.5); background: rgba(217, 74, 74, 0.14); color: #ffc9c9;
}
.force-banner--warn { border-color: var(--c-gold-600); background: rgba(212, 175, 55, 0.14); color: var(--c-gold-200); }

/* 签到弹窗：基础奖励 + 阶梯列表 */
.signin-base {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border-radius: var(--r-md); margin-bottom: 12px;
  border: 1px solid var(--c-gold-600); background: rgba(212, 175, 55, 0.12);
}
.signin-base__num { font-size: 20px; font-weight: 900; color: var(--c-gold-400); }
.tier-list { display: flex; flex-direction: column; gap: 8px; }
.tier-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft); background: rgba(0, 0, 0, 0.22);
}
.tier-item.is-hit { border-color: var(--c-green-300); background: rgba(87, 199, 155, 0.12); }
.tier-item.is-next { border-color: var(--c-gold-500); background: rgba(212, 175, 55, 0.1); }
.tier-item__day { font-weight: 800; color: var(--c-white); font-size: 13.5px; }
.tier-item__reward { font-weight: 800; color: var(--c-gold-400); }
.tier-item__flag { font-size: 11px; color: var(--c-text-dim); }

/* ============ 4. Toast 轻提示 ============ */
.toast-root {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(92vw, 440px);
  pointer-events: none; /* 提示不拦截点击，避免挡住牌桌操作按钮 */
}
.toast {
  width: 100%;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: rgba(6, 40, 28, 0.96);
  color: var(--c-text);
  font-size: 13.5px;
  box-shadow: var(--sh-2);
  animation: toast-in 0.2s ease-out;
  word-break: break-word;
}
.toast.is-leaving { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
.toast__icon { flex: 0 0 auto; line-height: 1.5; }
.toast--success { border-color: var(--c-green-300); }
.toast--success .toast__icon { color: var(--c-green-300); }
.toast--error { border-color: rgba(217, 74, 74, 0.7); background: rgba(58, 18, 18, 0.96); }
.toast--error .toast__icon { color: #ff9d9d; }
.toast--warn { border-color: var(--c-gold-600); }
.toast--warn .toast__icon { color: var(--c-gold-400); }
.toast--info .toast__icon { color: var(--c-info); }

/* 弹窗打开时禁止背后滚动（modal.js 会在 body 上加 is-modal-open） */
body.is-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .modal { max-height: 90vh; }
  .modal__body { padding: 13px; }
  .modal__foot { padding: 10px 13px; }
  .modal__foot .btn { flex: 1 1 42%; min-width: 0; }
  .result-hero__amount { font-size: 28px; }
}