/* Rondo rounds (rounds.mjs). Colours come from variables so the Telegram app can theme them. */
.rr {
  --rr-panel: var(--rondo-panel, #180b21);
  --rr-panel-2: var(--rondo-panel-2, #1f102a);
  --rr-line: var(--rondo-line, #2c1938);
  --rr-ink: var(--rondo-ink, #fbf8ff);
  --rr-muted: var(--rondo-muted, #bca4d1);
  --rr-faint: var(--rondo-faint, #6b5578);
  --rr-green: var(--rondo-green, #00ff87);
  --rr-wrong: var(--rondo-wrong, #ff8db4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--rr-ink);
}
.rr button { font: inherit; color: inherit; cursor: pointer; padding: 0 12px; min-height: 44px; border-radius: 14px; text-align: center; }
.rr button:disabled { cursor: default; opacity: 0.8; }
.rr button.is-right, .rr button.is-wrong, .rr button.is-picked { opacity: 1; }
.rr-context { margin: 0; font-size: 13px; color: var(--rr-muted); }
.rr-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rr-stats div { padding: 12px; border-radius: 14px; background: var(--rr-panel-2); text-align: center; }
.rr-stats dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rr-muted); }
.rr-stats dd { color: var(--rr-ink); margin: 4px 0 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rr-choices { display: grid; gap: 8px; }
.rr-choices button, .rr-suggest button {
  min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--rr-line);
  background: var(--rr-panel); font-size: 16px; font-weight: 700; text-align: left;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.rr-choices button:not(:disabled):hover, .rr-suggest button:hover { border-color: var(--rr-green); transform: translateY(-1px); }
.is-right { border-color: var(--rr-green) !important; background: rgba(0, 255, 135, 0.1) !important; }
.is-wrong { border-color: var(--rr-wrong) !important; background: rgba(255, 141, 180, 0.1) !important; }

.rr-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: var(--rr-panel); border: 1px solid var(--rr-line); }
.rr-card-hot { border-color: var(--rr-green); }
.rr-who { font-size: 15px; color: var(--rr-muted); }
.rr-big { display: flex; align-items: baseline; gap: 10px; }
.rr-big b { font-size: 54px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rr-big small { font-size: 15px; color: var(--rr-muted); }
.rr-mystery { color: var(--rr-faint); }
.rr-pop { animation: rr-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rr-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.rr-hint { font-size: 13px; color: var(--rr-muted); }
.rr-vs { align-self: center; margin: -18px 0; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #0d0012; border: 1px solid var(--rr-line); font-size: 12px; font-weight: 800; color: var(--rr-muted); }
.rr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rr-pair button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border-radius: 16px; border: 1px solid var(--rr-line); background: var(--rr-panel-2); font-size: 18px; font-weight: 800; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rr-pair button:not(:disabled):hover { border-color: var(--rr-green); transform: translateY(-2px); }
.rr-pair button:not(:disabled):active { transform: scale(0.96); }
.rr-pair button.is-picked { border-color: var(--rr-ink); }
.rr-ghost { font-size: 15px !important; font-weight: 700 !important; }

.rr-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rr-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 8px 0 12px; border-radius: 16px; background: var(--rr-panel); border: 1px solid var(--rr-line); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.rr-row.is-lifted { position: relative; z-index: 2; border-color: var(--rr-green); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55); transition: none; }
.rr-snap { animation: rr-snap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rr-snap { 0% { transform: scale(1.04); } 100% { transform: none; } }
.rr-pos { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: var(--rr-panel-2); display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--rr-muted); }
.rr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 700; cursor: grab; touch-action: none; user-select: none; }
.rr-name small { font-size: 12px; font-weight: 500; color: var(--rr-muted); }
.rr-moves { display: flex; gap: 4px; }
.rr-moves button { width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--rr-line); background: var(--rr-panel-2); display: grid; place-items: center; }
.rr-moves button:disabled { opacity: 0.35; }

.rr-worth { display: flex; justify-content: space-between; align-items: flex-end; }
.rr-worth span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rr-muted); }
.rr-worth b { font-size: 28px; font-weight: 800; color: #d8b4fe; line-height: 1; }
.rr-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rr-rung { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: 14px; background: var(--rr-panel); border: 1px solid var(--rr-line); font-size: 15px; }
.rr-rung.is-new { border-color: #c084fc; animation: rr-pop 0.35s ease; }
.rr-rung.is-locked { border-style: dashed; background: transparent; color: var(--rr-faint); }
.rr-rung.is-locked svg { margin-left: auto; width: 16px; height: 16px; }
.rr-pts { width: 36px; font-size: 13px; font-weight: 800; color: var(--rr-faint); }
.rr-label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rr-muted); }
.rr-input { min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1px solid #c084fc; background: var(--rr-panel); color: var(--rr-ink); font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; outline: none; }
.rr-suggest { display: grid; gap: 6px; }
.rr-suggest:empty { display: none; }

.rr-question { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; }
.rr-dial { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 4px; }
.rr-dial button { width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--rr-line); background: var(--rr-panel-2); font-size: 24px; font-weight: 800; }
.rr-readout { min-width: 110px; text-align: center; font-size: 64px; font-weight: 800; color: #fcd34d; font-variant-numeric: tabular-nums; line-height: 1; }
.rr-slider { width: 100%; accent-color: #fbbf24; height: 32px; }
.rr-target { align-self: center; width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--rr-line); box-shadow: inset 0 0 0 22px var(--rr-panel), inset 0 0 0 24px #fbbf24; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rr-target b { font-size: 46px; font-weight: 800; color: #fcd34d; line-height: 1; }
.rr-target small { font-size: 12px; color: #fcd34d; }
.rr-track { position: relative; height: 10px; margin: 14px 10px; border-radius: 999px; background: var(--rr-panel-2); }
.rr-mark { position: absolute; top: -9px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; box-sizing: border-box; }
.rr-mark-guess { background: var(--rr-ink); border: 4px solid var(--rr-faint); }
.rr-mark-truth { background: var(--rr-green); border: 4px solid #0d0012; animation: rr-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

.rr-primary { min-height: 58px; border-radius: 16px; border: 0; background: var(--rr-green); color: #0d0012 !important; font-size: 17px !important; font-weight: 800 !important; }
.rr-feedback { margin: 0; font-size: 14px; color: var(--rr-muted); }
@media (prefers-reduced-motion: reduce) {
  .rr *, .rr-pop, .rr-snap, .rr-mark-truth, .rr-rung.is-new { animation: none !important; transition: none !important; }
}