/* Shared components: buttons, sheets, toasts, avatars, the seat ring, cards, timers. */

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 16.500px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.12s var(--ease-out), filter 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.btn-label { overflow: hidden; text-overflow: ellipsis; }
.btn:active { transform: translateY(2px) scale(0.985); }
.btn[disabled] { pointer-events: none; opacity: 0.5; }
.btn-primary[disabled], .btn-danger[disabled] { opacity: 1; color: var(--text-faint); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line-soft); }
.btn-block { width: 100%; }
.btn-primary {
  color: #2b1a07;
  background: linear-gradient(180deg, #fbe7ae 0%, #e8c476 46%, #c8974d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(122, 74, 22, 0.32), 0 3px 0 #7d5722, 0 12px 26px rgba(214, 160, 80, 0.28);
}
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(122, 74, 22, 0.32), 0 1px 0 #7d5722, 0 6px 14px rgba(214, 160, 80, 0.22); }
.btn-ghost { color: var(--gold-3); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost:active { background: rgba(255, 255, 255, 0.12); }
.btn-quiet { color: var(--text-dim); min-height: 44px; }
.btn-danger {
  color: #fff3ee;
  background: linear-gradient(180deg, #e0666a 0%, #b8383f 50%, #8c2230 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(60, 8, 16, 0.4), 0 3px 0 #5a1420, 0 12px 26px rgba(200, 60, 70, 0.3);
}
.btn-sm { min-height: 38px; padding: 0 13px; border-radius: 12px; font-size: 13.500px; font-weight: 600; letter-spacing: 0.03em; gap: 6px; }
.btn-hold .hold-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: rgba(255, 255, 255, 0.42); transition: transform linear; pointer-events: none; }
.btn-hold.is-holding .hold-fill { transform: scaleX(1); }
.btn-hold > * { position: relative; }
.btn-hold > .hold-fill { position: absolute; }
.hold-hint { flex: none; margin-left: 2px; padding: 2px 6px; border-radius: 6px; font-size: 10.500px; font-weight: 600; letter-spacing: 0.08em; opacity: 0.62; box-shadow: inset 0 0 0 1px currentColor; }
.btn[disabled] .hold-hint { display: none; }

.icon-btn {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform 0.12s, background 0.2s;
}
.icon-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.14); }
.icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font: 700 10.500px/17px var(--font-body);
  font-style: normal;
  text-align: center;
  color: #2b1a07;
  background: var(--gold-3);
}

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > .btn { flex: 1; min-width: 0; }
.row.tight { gap: 6px; }
.row.tight > .btn, .row.center > .btn { flex: none; }
.row.center { justify-content: center; }

/* ── fields ──────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field-label { font-size: 12px; letter-spacing: 0.12em; color: var(--text-dim); }
.input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  color: var(--parch-ink);
  background: linear-gradient(180deg, #fbf3e0, #ecdfc0);
  box-shadow: inset 0 2px 5px rgba(90, 60, 20, 0.28), 0 0 0 1px rgba(236, 208, 143, 0.5);
  outline: none;
}
.input::placeholder { color: rgba(70, 52, 30, 0.45); }
.input:focus { box-shadow: inset 0 2px 5px rgba(90, 60, 20, 0.28), 0 0 0 2px var(--gold-3), 0 0 22px rgba(236, 208, 143, 0.35); }
.inline-edit { display: flex; gap: 8px; align-items: center; }
.inline-edit .input { min-height: 42px; font-size: 16px; } /* 16px keeps iOS from zooming on focus */

.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px var(--line-soft); }
.segmented button { flex: 1; min-width: 0; min-height: 38px; padding: 0 6px; border-radius: 10px; font-size: 13.500px; font-weight: 600; color: var(--text-dim); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.segmented button.is-on { color: #2b1a07; background: linear-gradient(180deg, #f6dfa2, #d9b060); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }

.toggle { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; cursor: pointer; }
.toggle + .toggle { border-top: 1px solid var(--line-soft); }
.toggle-text { flex: 1; min-width: 0; display: grid; }
.toggle-text b { font-size: 15px; font-weight: 600; }
.toggle-text small { font-size: 12px; color: var(--text-faint); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-knob { flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background 0.25s; }
.toggle-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #d9cfc0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition: transform 0.25s var(--ease-spring), background 0.25s; }
.toggle input:checked + .toggle-knob { background: linear-gradient(180deg, #d9b060, #a97a34); }
.toggle input:checked + .toggle-knob::after { transform: translateX(18px); background: #fff7df; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.500px; font-weight: 700; letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.1); }
.pill-blue { color: #dbe9ff; background: rgba(70, 120, 200, 0.42); box-shadow: inset 0 0 0 1px rgba(156, 194, 255, 0.5); }
.pill-red { color: #ffe1dc; background: rgba(190, 60, 66, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 154, 143, 0.5); }
.pill-amber { color: #fff0cf; background: rgba(200, 150, 50, 0.4); box-shadow: inset 0 0 0 1px rgba(240, 200, 110, 0.55); }
.pill-violet { color: #f0e2ff; background: rgba(130, 90, 180, 0.42); box-shadow: inset 0 0 0 1px rgba(190, 150, 235, 0.5); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13.500px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line-soft); transition: transform 0.12s, background 0.2s; }
.chip-btn:active { transform: scale(0.95); }
.chip-btn.is-on { color: #2b1a07; background: linear-gradient(180deg, #f6dfa2, #d9b060); }

.empty { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--accent); }
.empty b { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.empty p { max-width: 270px; font-size: 13.500px; color: var(--text-dim); }

/* ── sheets ──────────────────────────────────────────────────────────────── */
.sheet-layer { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(6, 4, 7, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in 0.25s both; }
.sheet {
  position: relative;
  width: 100%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #2b2024 0%, #1a1418 60%, #141014 100%);
  box-shadow: 0 -1px 0 rgba(236, 208, 143, 0.4), 0 -24px 60px rgba(0, 0, 0, 0.6);
  animation: sheet-up 0.38s var(--ease-out) both;
}
.sheet-tall { height: 88%; }
.sheet-layer.is-closing { pointer-events: none; }
.sheet-layer.is-closing .sheet { animation: sheet-down 0.24s ease-in both; }
.sheet-layer.is-closing .sheet-backdrop { animation: fade-out 0.24s both; }
.sheet-grip { flex: none; display: grid; place-items: center; height: 22px; cursor: pointer; }
.sheet-grip i { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 18px 12px 20px; }
.sheet-head h2 { font-size: 22px; margin-top: 2px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 18px calc(var(--safe-bottom) + 22px) 20px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sub-title { margin-top: 6px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); }
.sticky-foot { position: sticky; bottom: -22px; margin: auto -18px -22px -20px; padding: 14px 18px calc(var(--safe-bottom) + 18px) 20px; background: linear-gradient(180deg, transparent, #141014 38%); }

/* ── toasts and the phase banner ─────────────────────────────────────────── */
.toasts { position: absolute; z-index: 90; left: 0; right: 0; top: calc(var(--safe-top) + 62px); display: grid; justify-items: center; gap: 8px; padding: 0 20px; pointer-events: none; }
.toast { max-width: 100%; padding: 10px 16px; border-radius: 14px; font-size: 13.500px; font-weight: 600; text-align: center; color: var(--parch-ink); background: linear-gradient(180deg, #fbf3e0, #e7d8b6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.5); animation: drop-in 0.35s var(--ease-spring) both; }
.toast-error { color: #fff0ec; background: linear-gradient(180deg, #b8454a, #8c2530); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 180, 170, 0.4); }

.announce { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; animation: announce-veil 1.9s ease both; background: rgba(8, 5, 8, 0.5); }
.announce-band { width: 100%; display: grid; justify-items: center; gap: 10px; padding: 30px 24px; text-align: center; animation: announce-band 1.9s var(--ease-out) both;
  background: linear-gradient(180deg, transparent, rgba(8, 5, 8, 0.92) 22%, rgba(8, 5, 8, 0.92) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.announce-band h2 { font-size: 38px; letter-spacing: 0.16em; color: var(--gold-4); text-shadow: 0 0 34px rgba(236, 208, 143, 0.6), 0 3px 0 rgba(0, 0, 0, 0.5); }
.announce-band p { font-size: 14px; letter-spacing: 0.08em; color: var(--text-dim); }
.announce-rule { width: 62%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); animation: rule-grow 1.9s var(--ease-out) both; }
.announce-red h2 { color: #ffd0c8; text-shadow: 0 0 34px rgba(255, 110, 100, 0.7), 0 3px 0 rgba(0, 0, 0, 0.5); }
.announce-red .announce-rule { background: linear-gradient(90deg, transparent, var(--red-glow), transparent); }
.announce-night h2 { color: #dfe9ff; text-shadow: 0 0 34px rgba(150, 180, 255, 0.7), 0 3px 0 rgba(0, 0, 0, 0.5); }
.announce-night .announce-rule { background: linear-gradient(90deg, transparent, #c6d8ff, transparent); }
.announce-dawn h2 { color: #fff0d0; text-shadow: 0 0 40px rgba(255, 180, 90, 0.8), 0 3px 0 rgba(0, 0, 0, 0.4); }

.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

/* ── avatars and the seat ring ───────────────────────────────────────────── */
.avatar {
  --size: 52px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 26%, var(--a), var(--b) 82%);
  box-shadow: inset 0 0 0 1.500px rgba(255, 255, 255, 0.3), inset 0 calc(var(--size) * -0.1) calc(var(--size) * 0.2) rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.avatar b { font-family: var(--font-display); font-size: calc(var(--size) * 0.46); font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

.ring {
  --seat: 58px;
  position: relative;
  flex: none;
  width: min(100%, 42vh, 390px);
  aspect-ratio: 1 / 0.98;
  margin: 4px auto 0;
}
.ring-mid { --seat: 52px; }
.ring-tight { --seat: 46px; }
.ring-packed { --seat: 41px; }
.ring-compact { --seat: 50px; width: min(100%, 35vh, 330px); }
.ring-compact.ring-tight, .ring-compact.ring-packed { --seat: 40px; }
.ring-table {
  position: absolute;
  inset: 19% 18%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.14), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.07) 0 3px, transparent 3px 9px),
    radial-gradient(circle at 50% 40%, var(--table-a), var(--table-b) 88%);
  box-shadow: inset 0 0 0 2px rgba(236, 208, 143, 0.55), inset 0 0 0 7px rgba(0, 0, 0, 0.28), inset 0 0 0 8px rgba(236, 208, 143, 0.2), inset 0 -18px 40px rgba(0, 0, 0, 0.45), 0 22px 44px rgba(0, 0, 0, 0.5);
}
.ring-center { width: 86%; display: grid; place-items: center; text-align: center; }
.ring-info { display: grid; justify-items: center; gap: 1px; color: var(--accent); }
.ring-info strong { font-family: var(--font-num); font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--text); }
.ring-info strong small { margin-left: 2px; font-size: 18px; font-weight: 600; color: var(--text-dim); }
.ring-info em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.ring-info.is-danger { color: var(--red-glow); }
.ring-info.is-button { padding: 10px; border-radius: 18px; }

.seat {
  position: absolute;
  z-index: 2;
  width: calc(var(--seat) + 30px);
  display: grid;
  justify-items: center;
  gap: 3px;
  transform: translate(-50%, -50%);
  transition: left 0.6s var(--ease-out), top 0.6s var(--ease-out), opacity 0.3s, filter 0.3s;
}
.seat .avatar { --size: var(--seat); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s; }
.seat-name {
  max-width: 100%;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11.500px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  background: rgba(8, 6, 9, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seat-host { margin-left: 4px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 9.500px; color: #2b1a07; background: var(--gold-3); }
.seat-tag { padding: 0 6px; border-radius: 7px; font-size: 10px; font-weight: 700; color: var(--text-dim); background: rgba(255, 255, 255, 0.1); }
.seat.is-me .avatar { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--gold-3), 0 4px 10px rgba(0, 0, 0, 0.5); }
.seat.is-me .seat-name { color: #2b1a07; background: var(--gold-3); text-shadow: none; }
.seat.is-pickable { cursor: pointer; }
.seat.is-pickable:active .avatar { transform: scale(0.92); }
.seat.is-pickable .avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.500px dashed rgba(236, 208, 143, 0.45); animation: spin 14s linear infinite; }
.seat.is-selected .avatar, .seat.is-picked .avatar { transform: scale(1.1); box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4.500px var(--gold-4), 0 0 22px rgba(236, 208, 143, 0.6); }
.seat.is-selected .avatar::after, .seat.is-picked .avatar::after { display: none; }
.seat.is-speaking { z-index: 3; }
.seat.is-speaking .avatar { transform: scale(1.14); box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4.500px var(--gold-4), 0 0 0 0 rgba(236, 208, 143, 0.7); animation: speak-pulse 1.6s ease-out infinite; }
.seat.is-dim { opacity: 0.42; }
.seat.is-out { filter: grayscale(1); opacity: 0.5; }
.seat.is-offline .avatar { filter: saturate(0.25) brightness(0.72); }
.seat.is-offline .seat-name::after { content: " · 离线"; opacity: 0.7; }
.seat-crown, .seat-shield, .seat-check, .seat-done, .seat-order, .seat-cross { position: absolute; display: grid; place-items: center; font-style: normal; }
.seat-crown { top: -18px; left: 50%; margin-left: -11px; width: 22px; height: 22px; color: var(--gold-4); filter: drop-shadow(0 0 6px rgba(236, 208, 143, 0.9)); animation: bob 2.4s ease-in-out infinite; }
.seat-shield { right: -5px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; color: #2b1a07; background: linear-gradient(180deg, #fbe7ae, #c8974d); box-shadow: 0 0 0 2px var(--ink-1); animation: pop 0.35s var(--ease-spring) both; }
.seat-check { right: -5px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; color: #2b1a07; background: var(--gold-4); box-shadow: 0 0 0 2px var(--ink-1); animation: pop 0.3s var(--ease-spring) both; }
.seat-done { right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; color: #08301f; background: #7fdcae; box-shadow: 0 0 0 2px var(--ink-1); animation: pop 0.3s var(--ease-spring) both; }
.seat-order { left: -5px; top: -4px; width: 18px; height: 18px; border-radius: 50%; font: 700 10.500px/1 var(--font-num); color: var(--text); background: rgba(8, 6, 9, 0.85); box-shadow: inset 0 0 0 1px var(--line); }
.seat-cross { inset: 0; color: #ff9a8f; }

.people { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.people-label { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-dim); }
.people.tone-red .people-label { color: var(--red-glow); }
.people.tone-gold .people-label { color: var(--gold-3); }
.person { display: grid; justify-items: center; gap: 3px; width: 50px; }
.person em { max-width: 100%; font-style: normal; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.people-none { font-size: 13px; color: var(--text-faint); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card3d { --w: 150px; position: relative; flex: none; width: var(--w); aspect-ratio: 2 / 3; perspective: 1400px; }
.card-lg { --w: min(62vw, 37vh, 268px); }
.card-md { --w: 118px; }
.card-sm { --w: 84px; }
.card3d.is-tappable { cursor: pointer; }
.card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.75s var(--ease-spring); }
.card3d.is-open .card-inner { transform: rotateY(180deg); }
.card3d.is-tappable:active .card-inner { transition-duration: 0.15s; transform: scale(0.97); }
.card3d.is-tappable.is-open:active .card-inner { transform: rotateY(180deg) scale(0.97); }
.card-face { position: absolute; inset: 0; border-radius: calc(var(--w) * 0.075); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 calc(var(--w) * 0.08) calc(var(--w) * 0.2) rgba(0, 0, 0, 0.55); }
.card-rear { box-shadow: 0 0 0 1.500px rgba(236, 208, 143, 0.7), 0 0 calc(var(--w) * 0.14) rgba(236, 208, 143, 0.18), 0 calc(var(--w) * 0.08) calc(var(--w) * 0.2) rgba(0, 0, 0, 0.55); }
.card-front { transform: rotateY(180deg); background: #1a1210; }
.card-front img { width: 100%; height: 100%; object-fit: cover; }
.card-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--w) * 0.012 + 1px) rgba(236, 208, 143, 0.85), inset 0 0 0 calc(var(--w) * 0.03 + 2px) rgba(20, 12, 8, 0.5), inset 0 0 0 calc(var(--w) * 0.035 + 2.500px) rgba(236, 208, 143, 0.35); pointer-events: none; }
.card-caption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: calc(var(--w) * 0.3) calc(var(--w) * 0.09) calc(var(--w) * 0.085); background: linear-gradient(180deg, transparent, rgba(8, 5, 6, 0.75) 46%, rgba(8, 5, 6, 0.94)); text-align: left; }
.card-sub { font-size: calc(var(--w) * 0.048 + 2px); letter-spacing: 0.18em; color: var(--gold-3); }
.card-name { font-family: var(--font-display); font-size: calc(var(--w) * 0.135); font-weight: 900; line-height: 1.15; letter-spacing: 0.04em; color: #fff7e4; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.card-word { justify-self: center; margin-top: 2px; padding: 0 0.3em; font-family: var(--font-display); font-size: calc(var(--w) * 0.19); font-weight: 900; line-height: 1.2; letter-spacing: 0.08em; color: #fff7e4; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.card3d:has(.card-word) .card-caption { text-align: center; }
.card-badge { position: absolute; top: calc(var(--w) * 0.06); left: calc(var(--w) * 0.06); padding: 2px calc(var(--w) * 0.04 + 3px); border-radius: 999px; font-size: calc(var(--w) * 0.04 + 3px); font-weight: 700; letter-spacing: 0.1em; color: #fff; background: rgba(8, 5, 6, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.card3d.tone-blue .card-badge { background: rgba(40, 80, 160, 0.78); }
.card3d.tone-red .card-badge { background: rgba(160, 40, 50, 0.8); }
.card3d.tone-amber .card-badge { background: rgba(160, 110, 30, 0.82); }
.card3d.tone-violet .card-badge { background: rgba(100, 60, 150, 0.8); }
.card-md .card-badge, .card-sm .card-badge { display: none; }
.card-hint { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-size: 12.500px; letter-spacing: 0.2em; color: var(--gold-3); animation: breathe 2s ease-in-out infinite; }

.card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--gold-3);
  background:
    repeating-linear-gradient(45deg, rgba(236, 208, 143, 0.1) 0 1.500px, transparent 1.500px 11px),
    repeating-linear-gradient(-45deg, rgba(236, 208, 143, 0.1) 0 1.500px, transparent 1.500px 11px),
    radial-gradient(circle at 50% 42%, #8a3345, #4a1826 60%, #2c0e17);
}
.card-back::before { content: ""; position: absolute; inset: 5.500%; border-radius: 7% / 5%; box-shadow: inset 0 0 0 1.500px rgba(236, 208, 143, 0.75), inset 0 0 0 4px rgba(0, 0, 0, 0.25), inset 0 0 0 5px rgba(236, 208, 143, 0.3); }
.back-night { background: repeating-linear-gradient(45deg, rgba(198, 216, 255, 0.1) 0 1.500px, transparent 1.500px 11px), repeating-linear-gradient(-45deg, rgba(198, 216, 255, 0.1) 0 1.500px, transparent 1.500px 11px), radial-gradient(circle at 50% 42%, #34488a, #1a2452 60%, #0e1430); }
.back-avalon { background: repeating-linear-gradient(45deg, rgba(236, 208, 143, 0.11) 0 1.500px, transparent 1.500px 11px), repeating-linear-gradient(-45deg, rgba(236, 208, 143, 0.11) 0 1.500px, transparent 1.500px 11px), radial-gradient(circle at 50% 42%, #2f4d96, #182a5c 60%, #0d1736); }
.back-masque { background: repeating-linear-gradient(45deg, rgba(236, 208, 143, 0.11) 0 1.500px, transparent 1.500px 11px), repeating-linear-gradient(-45deg, rgba(236, 208, 143, 0.11) 0 1.500px, transparent 1.500px 11px), radial-gradient(circle at 50% 42%, #2f7a5e, #164434 60%, #0b241c); }
.back-frame { position: relative; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, 0.35), transparent 72%); }
.back-frame .emblem { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(236, 208, 143, 0.45)); }
.back-label { position: absolute; bottom: 10%; font-family: var(--font-num); font-size: 16px; font-weight: 700; }

.role-chip { position: relative; display: grid; justify-items: center; gap: 4px; width: 62px; text-align: center; transition: transform 0.14s, opacity 0.2s, filter 0.2s; }
button.role-chip:active { transform: scale(0.93); }
.role-chip-art { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: visible; }
.role-chip-art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 16%; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3.500px var(--chip, var(--gold-2)), 0 4px 10px rgba(0, 0, 0, 0.45); }
.role-chip-art i { position: absolute; right: -6px; bottom: -3px; min-width: 22px; padding: 0 4px; border-radius: 10px; font: 700 11px/18px var(--font-num); font-style: normal; color: #2b1a07; background: var(--gold-3); box-shadow: 0 0 0 2px var(--ink-2); }
.role-chip-name { max-width: 100%; font-size: 11.500px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-chip-sub { margin-top: -3px; font-size: 10px; color: var(--text-faint); }
.role-chip.tone-blue { --chip: var(--blue); }
.role-chip.tone-red { --chip: var(--red); }
.role-chip.tone-amber { --chip: var(--amber); }
.role-chip.tone-violet { --chip: var(--violet); }
.role-chip.is-dim { opacity: 0.5; filter: saturate(0.5); }
.role-chip.is-on .role-chip-art img { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--gold-4), 0 0 16px rgba(236, 208, 143, 0.55); }
.role-chip.is-on .role-chip-sub { color: var(--gold-3); }

/* ── timers ──────────────────────────────────────────────────────────────── */
.timer-ring { --size: 132px; position: relative; flex: none; width: var(--size); height: var(--size); display: grid; place-items: center; }
.timer-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.timer-track { fill: rgba(8, 6, 9, 0.5); stroke: rgba(255, 255, 255, 0.12); stroke-width: 5; }
.timer-arc { fill: none; stroke: var(--gold-3); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear, stroke 0.4s; filter: drop-shadow(0 0 5px rgba(236, 208, 143, 0.6)); }
.timer-face { position: relative; display: grid; justify-items: center; gap: 0; }
.timer-label { font-size: calc(var(--size) * 0.085 + 2px); letter-spacing: 0.14em; color: var(--text-dim); }
.timer-digits { font-family: var(--font-num); font-size: calc(var(--size) * 0.3); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text); }
.timer-ring.is-tappable { cursor: pointer; }
.timer-ring.is-urgent .timer-arc { stroke: var(--red-glow); filter: drop-shadow(0 0 7px rgba(255, 120, 110, 0.85)); }
.timer-ring.is-urgent .timer-digits { color: #ffd0c8; animation: pulse 1s ease-in-out infinite; }
.timer-ring.is-done .timer-digits { color: var(--red-glow); }
.timer-ring.is-done { animation: shake 0.5s 2; }
.timer-ring.is-paused .timer-arc { stroke: var(--text-faint); filter: none; }
.timer-pill { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 12px; color: var(--gold-3); background: rgba(8, 6, 9, 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.timer-pill b { font-family: var(--font-num); font-size: 15px; font-variant-numeric: tabular-nums; }
.timer-pill.is-urgent { color: #ffd0c8; box-shadow: inset 0 0 0 1px rgba(255, 154, 143, 0.7); animation: pulse 1s ease-in-out infinite; }
.timer-pill.is-done { color: #fff; background: rgba(184, 56, 63, 0.85); }
.timer-pill.is-paused { color: var(--text-dim); }
.timer-sheet { display: grid; justify-items: center; gap: 16px; }
.timer-sheet .row, .timer-sheet .chip-grid { width: 100%; justify-content: center; }
.timer-sheet .row .btn { padding: 0 8px; font-size: 15px; letter-spacing: 0.02em; }
.timer-sheet .sub-title { justify-self: start; }

/* ── panels ──────────────────────────────────────────────────────────────── */
.panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: rise 0.45s var(--ease-out) both;
}
.panel h3 { font-size: 18.500px; }
.panel p { font-size: 13.500px; color: var(--text-dim); }
.panel p b { color: var(--gold-3); }
.panel-danger { box-shadow: inset 0 0 0 1px rgba(255, 154, 143, 0.5), 0 0 40px rgba(200, 50, 60, 0.22); background: rgba(60, 12, 20, 0.6); }
.panel-turn { box-shadow: inset 0 0 0 1.500px var(--gold-3), 0 0 34px rgba(236, 208, 143, 0.2); }
.panel-timer { position: absolute; right: 12px; top: 10px; }
.panel:has(.panel-timer) > h3, .panel:has(.panel-timer) > p { padding-right: 92px; }
.alert { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; font-size: 12.500px !important; color: #ffd9d2 !important; background: rgba(184, 56, 63, 0.3); }
.alert .icon { margin-top: 2px; }

.waiting { display: grid; gap: 4px; }
.waiting b { display: flex; align-items: center; gap: 2px; font-family: var(--font-display); font-size: 17px; }
.waiting p { font-size: 13.500px; color: var(--text-dim); }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-head h3 { font-size: 19px; }
.section-head span { font-size: 12px; color: var(--text-faint); }