/* ==========================================================================
   摇色子 · 样式
   --------------------------------------------------------------------------
   依赖全局变量与共享组件（.mode-tabs / .btn / .panel / .room-* 等），
   只补充本游戏自己的部分，亮色主题（body.theme-light）下自动适配。
   ========================================================================== */

.ysz-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.ysz { width: min(94vw, 720px); display: flex; flex-direction: column; gap: 16px; }

.ysz-slot { width: 100%; }
.ysz-slot:empty { display: none; }

/* 用 hidden 属性控制显示的元素，避免被 display 覆盖 */
.ysz-banner[hidden], .ysz-notice[hidden], .ysz-left[hidden] { display: none; }

/* ------------------------------ 设置区 ------------------------------ */

.ysz-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.ysz-setting { display: flex; align-items: flex-start; gap: 12px; }
.ysz-setting-label {
  flex: 0 0 auto;
  width: 88px;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--text-mute);
}

.ysz-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.ysz-chip {
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-dim);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .12s;
}
.ysz-chip:hover { color: var(--text); border-color: rgba(139, 92, 246, 0.5); transform: translateY(-1px); }
.ysz-chip.is-active {
  color: #fff;
  font-weight: 700;
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -12px rgba(139, 92, 246, 0.9);
}

.ysz-setting-hint { margin: 0; font-size: 11.5px; color: var(--text-mute); }

/* ------------------------------ 状态栏 ------------------------------ */

.ysz-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.ysz-turn { display: flex; align-items: center; gap: 10px; min-width: 0; }

.ysz-turn-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-mute);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.ysz-turn-dot.is-s0 { background: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18); }
.ysz-turn-dot.is-s1 { background: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
.ysz-turn-dot.is-s2 { background: #fb7185; box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.18); }
.ysz-turn-dot.is-s3 { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.ysz-turn-dot.is-s4 { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
.ysz-turn-dot.is-s5 { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18); }

.ysz-turn-text { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ysz-left { font-size: 12.5px; color: var(--text-dim); flex: 0 0 auto; }

/* ------------------------------ 结束横幅 ------------------------------ */

.ysz-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: linear-gradient(140deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.1));
}
.ysz-banner-title { font-size: 17px; font-weight: 800; }
.ysz-banner-detail { font-size: 12.5px; color: var(--text-dim); }
.ysz-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.ysz-banner-actions:empty { margin-top: 0; }

/* ------------------------------ 骰子台 ------------------------------ */

.ysz-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(139, 92, 246, 0.16), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

.ysz-dice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 82px;
}

.ysz-die {
  display: grid;
  place-items: center;
  min-width: 62px;
  height: 62px;
  padding: 0 10px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(150deg, #6d28d9, #0e7490);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ysz-die.is-coin { border-radius: 50%; min-width: 62px; font-size: 22px; }

body.theme-light .ysz-die {
  color: #fff;
  box-shadow: 0 14px 26px -18px rgba(30, 41, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ysz-dice.is-rolling .ysz-die { animation: ysz-shake .16s linear infinite alternate; }

@keyframes ysz-shake {
  from { transform: translateY(-5px) rotate(-4deg) scale(0.98); }
  to { transform: translateY(4px) rotate(5deg) scale(1.02); }
}

.ysz-dice.is-empty { min-height: 82px; }
.ysz-dice-empty { font-size: 13px; color: var(--text-mute); }

.ysz-stage-note { font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* ------------------------------ 提示 / 控制区 ------------------------------ */

.ysz-notice {
  padding: 10px 16px;
  font-size: 12.5px;
  text-align: center;
  border-radius: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.ysz-notice.is-error {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.1);
}

.ysz-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.ysz-controls:empty { display: none; }
.ysz-controls .btn { flex: 1 1 160px; }

/* ------------------------------ 记录区 ------------------------------ */

.ysz-records {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.ysz-record {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: border-color .2s, background .2s, transform .2s;
}
.ysz-record.is-active { border-color: rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.1); }
.ysz-record.is-last { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.5); }

.ysz-record-head { display: flex; align-items: center; gap: 8px; }
.ysz-record-head b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ysz-record-head small { margin-left: auto; font-size: 11.5px; color: var(--text-mute); flex: 0 0 auto; }

.ysz-record-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-mute); }
.ysz-record.is-s0 .ysz-record-dot { background: #8b5cf6; }
.ysz-record.is-s1 .ysz-record-dot { background: #22d3ee; }
.ysz-record.is-s2 .ysz-record-dot { background: #fb7185; }
.ysz-record.is-s3 .ysz-record-dot { background: #34d399; }
.ysz-record.is-s4 .ysz-record-dot { background: #fbbf24; }
.ysz-record.is-s5 .ysz-record-dot { background: #60a5fa; }

.ysz-rolls { display: flex; flex-direction: column; gap: 5px; }

.ysz-roll {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}
.ysz-roll-seq { font-size: 11.5px; color: var(--text-mute); flex: 0 0 auto; }
.ysz-faces { margin-left: auto; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ysz-roll-empty { font-size: 12px; color: var(--text-mute); }

/* ------------------------------ 玩法说明 ------------------------------ */

.ysz-rules { width: 100%; }
.ysz-rules .panel-body ul { margin: 0 0 10px; padding-left: 20px; }
.ysz-rules .panel-body li { font-size: 13px; line-height: 1.75; color: var(--text-dim); }
.ysz-rules .panel-body h4 { margin: 14px 0 6px; font-size: 13.5px; }
.ysz-rules .panel-body h4:first-child { margin-top: 0; }
.ysz-rules .panel-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.75; color: var(--text-dim); }

/* ------------------------------ 房间模式大厅 ------------------------------ */

.ysz-lobby .room-card { background: var(--surface); }
.ysz-lobby .field input { background: var(--surface); }
.ysz-lobby .ysz-settings { padding: 0; border: none; background: none; }
.ysz-lobby .ysz-setting { flex-direction: column; gap: 6px; }
.ysz-lobby .ysz-setting-label { width: auto; padding-top: 0; }

/* 房间内座位按座位号着色（与状态栏圆点、记录区圆点一致） */
.room-seat.is-s0 .room-seat-mark { color: #8b5cf6; background: rgba(139, 92, 246, 0.16); }
.room-seat.is-s1 .room-seat-mark { color: #22d3ee; background: rgba(34, 211, 238, 0.16); }
.room-seat.is-s2 .room-seat-mark { color: #fb7185; background: rgba(251, 113, 133, 0.16); }
.room-seat.is-s3 .room-seat-mark { color: #34d399; background: rgba(52, 211, 153, 0.16); }
.room-seat.is-s4 .room-seat-mark { color: #fbbf24; background: rgba(251, 191, 36, 0.16); }
.room-seat.is-s5 .room-seat-mark { color: #60a5fa; background: rgba(96, 165, 250, 0.16); }
.room-seat.is-offline { opacity: 0.55; }

@media (max-width: 640px) {
  .ysz-setting { flex-direction: column; gap: 6px; }
  .ysz-setting-label { width: auto; padding-top: 0; }
  .ysz-records { grid-template-columns: 1fr; }
  .ysz-stage { padding: 22px 14px; }
  .ysz-die { min-width: 54px; height: 54px; font-size: 22px; }
  .ysz-lobby .room-grid { grid-template-columns: 1fr; }
}