.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-chip { height: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
.tr-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.tr-players summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 40px; display: flex; align-items: center; color: var(--text-2); }
.tr-players[open] summary { margin-bottom: 8px; }
.tr-players .btn-sm { margin-top: 8px; }

.tr-person { display: flex; justify-content: center; }
.tr-banner { font-size: 18px; animation: bb-pop .3s ease-out; }
.tr-pass-left { font-size: 13px; font-weight: 700; color: var(--text-3); padding-left: 8px; border-left: 1px solid var(--border); }

/* 카드 뒤집기 */
.tr-card {
  display: block; width: 100%; max-width: 560px; margin: 0 auto; height: clamp(240px, 62vw, 300px);
  perspective: 1200px; cursor: pointer; border-radius: var(--radius-lg); -webkit-tap-highlight-color: transparent;
}
.tr-card:focus-visible { box-shadow: var(--focus); }
.tr-inner {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, 1.25, .5, 1);
}
.tr-card.is-flipped .tr-inner { transform: rotateY(180deg); }
.tr-card.is-flipped { cursor: default; }
.tr-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 20px; border-radius: var(--radius-lg); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: var(--shadow); text-align: center;
}
.tr-back {
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--tr-c), color-mix(in srgb, var(--tr-c) 60%, #1c1f2b));
}
.tr-back-mark {
  width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 52px; font-weight: 900;
  background: rgba(255, 255, 255, .18); border: 3px solid rgba(255, 255, 255, .55);
}
.tr-back-level { font-weight: 900; font-size: 20px; }
.tr-back-hint { font-size: 14px; opacity: .85; font-weight: 700; }
.tr-card:hover:not(.is-flipped) .tr-back-mark { animation: bb-pulse 1s ease-in-out infinite; }
.tr-front { transform: rotateY(180deg); background: var(--surface); border: 3px solid var(--tr-c); color: var(--text); }
.tr-front-head { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.tr-front-tag { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tr-c) 16%, var(--surface)); color: var(--tr-c); }
.tr-front-num { font-family: var(--font-num); font-weight: 900; color: var(--text-3); font-size: 14px; }
.tr-q { display: block; font-size: clamp(22px, 6vw, 30px); font-weight: 900; line-height: 1.45; letter-spacing: -0.03em; margin-top: 18px; overflow-wrap: anywhere; }
.tr-q.is-long { font-size: clamp(19px, 5vw, 26px); }

.tr-actions .btn-xl { padding: 0 22px; }
.tr-sub { justify-content: center; }
.game-shell.is-full .tr-wrap { flex: 1; justify-content: center; max-width: 820px; margin: 0 auto; }
.game-shell.is-full .tr-card { height: clamp(260px, 42vh, 420px); max-width: 760px; }
.game-shell.is-full .tr-q { font-size: clamp(26px, 3.6vw, 44px); }