/* ═══════════════════════════════════════════════════════════════
   GRAM КНБ — Design System
   Deep black · dark gold · cold blue · Liquid Glass (nav, sheets)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg: #050608;
  --surface-1: #0b0d11;
  --surface-2: #11141a;
  --surface-3: #171b23;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  /* Text */
  --text: #f2f3f5;
  --text-2: #a3a9b6;
  --text-3: #6b7280;

  /* Accents */
  --gold: #d9a441;
  --gold-hi: #f2c76b;
  --gold-lo: #a87a26;
  --gold-tint: rgba(217, 164, 65, 0.12);
  --gold-line: rgba(217, 164, 65, 0.28);
  --blue: #5aa9ff;
  --blue-ice: #8cc8ff;
  --blue-tint: rgba(90, 169, 255, 0.12);
  --blue-line: rgba(90, 169, 255, 0.28);
  --green: #3ecf8e;
  --red: #f0616d;
  --silver: #c3cad6;
  --bronze: #c98a55;

  /* Legacy aliases (used by inline styles in app.js) */
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-1);
  --bg-card: var(--surface-2);
  --bg-card-hover: var(--surface-3);
  --border-color: var(--hairline);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --accent-blue: var(--blue);
  --accent-cyan: var(--blue-ice);
  --accent-gold: var(--gold);
  --accent-emerald: var(--green);
  --accent-rose: var(--red);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* Radii — one scale, used everywhere */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-spring: cubic-bezier(0.3, 1.3, 0.5, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* Glass */
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100%);
  --glass-edge: rgba(255, 255, 255, 0.11);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 12px 32px rgba(0, 0, 0, 0.5);

  /* Layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  --nav-gap: 10px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 20px);
}

/* One quiet ambient light — gives the glass something to refract */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(90% 45% at 50% -8%, rgba(90, 169, 255, 0.10), transparent 70%),
    radial-gradient(70% 35% at 50% 108%, rgba(217, 164, 65, 0.07), transparent 70%);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input {
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}

code {
  font-family: var(--mono);
}

svg.ic,
.ic {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ── App shell ── */
#app {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
}

/* ── Top bar ── */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px var(--s4);
  background: rgba(5, 6, 8, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #1a1206;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(217, 164, 65, 0.22);
}

.brand-icon .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-title span {
  color: var(--gold);
}

.header-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s;
}

.header-balance .ic {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.header-balance .unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}

.header-balance:active {
  transform: scale(0.95);
}

.header-balance .hb-plus {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  margin-right: -6px;
  border-radius: 50%;
  color: #1b1307;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.header-balance .hb-plus .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.8;
  color: inherit;
}

/* ── Views & transitions ── */
.view-section {
  display: none;
  padding: var(--s4) var(--s4) var(--s2);
}

.view-section.active {
  display: block;
  animation: viewIn 0.28s var(--ease) both;
}

.view-section.active > * {
  animation: riseIn 0.38s var(--ease) both;
}
.view-section.active > *:nth-child(2) { animation-delay: 0.04s; }
.view-section.active > *:nth-child(3) { animation-delay: 0.08s; }
.view-section.active > *:nth-child(4) { animation-delay: 0.12s; }
.view-section.active > *:nth-child(n + 5) { animation-delay: 0.16s; }

@keyframes viewIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s1) 2px var(--s4);
}

.page-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.page-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-3);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.section-label,
.card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.card-title {
  display: block;
  margin: 0 2px var(--s2);
}

.section-gap {
  height: var(--s5);
}

/* ── Cards (solid, not glass) ── */
.card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* ── Buttons ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.14s var(--ease), background 0.2s, border-color 0.2s, opacity 0.2s;
  -webkit-user-select: none;
}

.btn .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.btn:active {
  transform: scale(0.97);
}

.btn-full {
  width: 100%;
}

.btn-lg {
  height: 52px;
  font-size: 16px;
  border-radius: var(--r-md);
}

.btn-gold,
.btn-primary {
  color: #1b1307;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 60%, #c8922f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 6px 18px rgba(217, 164, 65, 0.18);
}

.btn-gold:active,
.btn-primary:active {
  opacity: 0.92;
}

.btn-glass,
.btn-secondary {
  color: var(--text);
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-secondary.active {
  border-color: var(--gold-line) !important;
  background: var(--gold-tint);
  color: var(--gold-hi);
}

.btn-blue {
  color: #fff;
  background: linear-gradient(180deg, #6db4ff, var(--blue) 60%, #3f8de6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-green {
  color: #04140c;
  background: var(--green);
}

.btn-danger {
  color: var(--red);
  background: rgba(240, 97, 109, 0.1);
  border-color: rgba(240, 97, 109, 0.22);
}

.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

.btn-icon .ic {
  width: 17px;
  height: 17px;
}

.btn-icon.spinning .ic {
  animation: spin 0.7s linear;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-ice);
  padding: 4px 0;
  transition: opacity 0.15s;
}

.link-btn:active {
  opacity: 0.6;
}

.link-btn .ic {
  width: 15px;
  height: 15px;
}

/* ── Avatars ── */
.avatar {
  --av: 40px;
  position: relative;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--av-bg, #1d2533);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--av) * 0.38);
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════ PROFILE ══════════════════════════ */

.profile-card {
  padding: var(--s5) var(--s4) var(--s4);
  overflow: hidden;
}

.profile-card::after {
  /* faint gold rim light on the hero card */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  --av: 64px;
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--gold-line);
}

.profile-meta {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.id-chip {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 10px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--text-3);
  transition: background 0.2s, transform 0.14s var(--ease);
  max-width: 100%;
}

.id-chip code {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.id-chip .ic {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

.id-chip:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.07);
}

.id-chip.copied .ic {
  color: var(--green);
}

.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s4);
  margin-bottom: 10px;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-pill);
  background: var(--gold-tint);
  border: 1px solid var(--gold-line);
  color: var(--gold-hi);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  max-width: 70%;
}

.rank-badge span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-badge .ic {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}

.level-chip {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

.level-chip b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.xp-container {
  margin: 0;
}

.xp-bar-bg {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold) 50%, var(--gold-hi));
  box-shadow: 0 0 10px rgba(242, 199, 107, 0.35);
  transition: width 0.8s var(--ease);
}

.xp-footer,
.xp-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.xp-footer {
  margin-top: 8px;
}

/* Balance */
.balance-card {
  padding: var(--s4);
}

.balance-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 var(--s4);
}

.balance-amount {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.balance-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}

.balance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.balance-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.stat-box {
  background: var(--surface-1);
  padding: 12px 10px 11px;
  min-width: 0;
}

.stat-label {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-val {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.stat-val.win { color: var(--green); }
.stat-val.loss { color: var(--red); }
.stat-val.gold { color: var(--gold-hi); }

.stat-tag {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  color: var(--gold-hi);
  background: var(--gold-tint);
}

.stat-sub {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 1px;
}

/* ── Grouped list (settings, profile menu) ── */
.list-card {
  padding: 0;
  overflow: hidden;
}

.list-row,
.setting-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 54px;
  padding: 10px var(--s4);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.list-row + .list-row::before,
.setting-item + .setting-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  height: 1px;
  background: var(--hairline);
}

.list-row:active,
.setting-item:active {
  background: rgba(255, 255, 255, 0.04);
}

.row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
}

.row-icon .ic {
  width: 17px;
  height: 17px;
}

.row-icon.gold { color: var(--gold-hi); background: var(--gold-tint); border-color: var(--gold-line); }
.row-icon.blue { color: var(--blue-ice); background: var(--blue-tint); border-color: var(--blue-line); }

.row-main,
.setting-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.row-text {
  min-width: 0;
}

.row-title {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-sub {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-value {
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
}

.row-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  opacity: 0.7;
}

.settings-menu {
  display: block;
}

/* iOS-style switch built on the existing .toggle-badge (text kept for a11y) */
.toggle-badge {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  font-size: 0;
  color: transparent;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s var(--ease);
}

.toggle-badge::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s var(--ease-spring);
}

.toggle-badge.active {
  background: var(--gold);
}

.toggle-badge.active::after {
  transform: translateX(18px);
}

/* ══════════════════════════ PLAY ══════════════════════════ */

.segmented-control {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--s4);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hairline);
}

.segmented-btn {
  flex: 1;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  transition: color 0.2s, background 0.25s var(--ease), box-shadow 0.25s;
}

.segmented-btn.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mode cards — each mode has its own accent */
.mode-card-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--s5);
}

.mode-card {
  --mode: var(--gold);
  --mode-tint: rgba(217, 164, 65, 0.1);
  position: relative;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s var(--ease), border-color 0.25s, background 0.25s;
}

.mode-card[data-mode="best_of_3"] { --mode: var(--blue); --mode-tint: rgba(90, 169, 255, 0.1); }
.mode-card[data-mode="lizard_spock"] { --mode: #6fd3d0; --mode-tint: rgba(111, 211, 208, 0.09); }
.mode-card[data-mode="blind_ludik"] { --mode: var(--silver); --mode-tint: rgba(195, 202, 214, 0.08); }

.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--mode-tint), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.mode-card:active {
  transform: scale(0.97);
}

.mode-card.selected {
  border-color: color-mix(in srgb, var(--mode) 45%, transparent);
  background: var(--surface-2);
}

.mode-card.selected::before {
  opacity: 1;
}

.mode-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mode-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--mode);
  background: var(--mode-tint);
  border: 1px solid color-mix(in srgb, var(--mode) 22%, transparent);
}

.mode-icon .ic {
  width: 21px;
  height: 21px;
}

.mode-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s;
}

.mode-check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b0d11;
  transform: scale(0);
  transition: transform 0.25s var(--ease-spring);
}

.mode-card.selected .mode-check {
  background: var(--mode);
  border-color: var(--mode);
}

.mode-card.selected .mode-check::after {
  transform: scale(1);
}

.mode-title {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.mode-desc {
  position: relative;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-3);
}

/* Bet */
.bet-picker {
  margin-bottom: var(--s5);
}

.bet-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 54px;
  padding: 0 var(--s4);
  margin-bottom: 10px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bet-input-wrap:focus-within {
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.08);
}

.bet-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bet-input.text {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.bet-input::placeholder {
  color: var(--text-3);
}

.bet-input::-webkit-outer-spin-button,
.bet-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bet-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.bet-currency {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}

.preset-pills {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.preset-pill {
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform 0.14s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}

.preset-pill:active {
  transform: scale(0.94);
}

.preset-pill.active {
  color: var(--gold-hi);
  background: var(--gold-tint);
  border-color: var(--gold-line);
}

/* Moves */
.moves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--s5);
}

.moves-grid.five-moves {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.move-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 12px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform 0.16s var(--ease), border-color 0.2s, background 0.2s;
}

.move-card[style*="block"] {
  display: flex !important;
}

.move-card:active {
  transform: scale(0.94);
}

.move-card.selected {
  background: var(--blue-tint);
  border-color: var(--blue-line);
}

.move-emoji {
  display: block;
  font-size: 30px;
  line-height: 1;
  transition: transform 0.3s var(--ease-spring);
}

.emoji-img {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.move-card.selected .move-emoji {
  transform: scale(1.1);
}

.moves-grid.five-moves .move-emoji {
  font-size: 24px;
}

.move-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.moves-grid.five-moves .move-label {
  font-size: 10.5px;
}

.move-card.selected .move-label {
  color: var(--text);
}

/* Lobby */
.lobby-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  animation: riseIn 0.32s var(--ease) both;
}

.game-card.mine {
  border-color: var(--gold-line);
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.06), transparent 60%), var(--surface-1);
}

.game-info {
  flex: 1;
  min-width: 0;
}

.game-creator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}

.game-creator .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.mode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gold);
}

.mode-dot[data-mode="best_of_3"] { background: var(--blue); }
.mode-dot[data-mode="lizard_spock"] { background: #6fd3d0; }
.mode-dot[data-mode="blind_ludik"] { background: var(--silver); }

.game-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.game-bet {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-bet small {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  margin-left: 2px;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.06);
}

.tag.gold { color: var(--gold-hi); background: var(--gold-tint); }
.tag.blue { color: var(--blue-ice); background: var(--blue-tint); }
.tag.green { color: var(--green); background: rgba(62, 207, 142, 0.1); }
.tag.red { color: var(--red); background: rgba(240, 97, 109, 0.1); }

.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-3);
  font-size: 14px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
}

.empty-state .ic {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--text-3);
  opacity: 0.7;
}

.empty-state b {
  display: block;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 2px;
}

.skeleton {
  height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.skeleton + .skeleton {
  margin-top: 8px;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ══════════════════════════ LEADERBOARD ══════════════════════════ */

.leaderboard-list {
  margin-bottom: var(--s3);
}

.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 8px;
  margin-bottom: var(--s4);
}

.podium-slot {
  --medal: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 14px 8px 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 9%, transparent), transparent 75%), var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--medal) 22%, transparent);
}

.podium-slot.p1 { --medal: var(--gold-hi); padding-top: 18px; padding-bottom: 16px; }
.podium-slot.p3 { --medal: var(--bronze); }
.podium-slot.me { box-shadow: 0 0 0 1.5px var(--blue-line); }

.podium-avatar {
  position: relative;
  margin-bottom: 10px;
}

.podium-avatar .avatar {
  --av: 52px;
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--medal);
}

.podium-slot.p1 .podium-avatar .avatar {
  --av: 62px;
}

.podium-rank {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #121212;
  background: var(--medal);
  box-shadow: 0 0 0 2px var(--surface-1);
}

.podium-name {
  font-size: 13px;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-level {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.podium-xp {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--medal);
}

.leader-rows {
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.leader-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px 14px;
}

.leader-item + .leader-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 94px;
  right: 0;
  height: 1px;
  background: var(--hairline);
}

.leader-item.me {
  background: linear-gradient(90deg, var(--blue-tint), transparent 80%);
}

.leader-item.me::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue);
}

.leader-pos {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.leader-item .avatar {
  --av: 38px;
}

.leader-info {
  flex: 1;
  min-width: 0;
}

.leader-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leader-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
}

.leader-sub .streak {
  color: #ffa25a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.leader-sub .streak .ic {
  width: 12px;
  height: 12px;
}

.leader-xp {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.leader-xp small {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 2px;
}

.lb-me {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 10px);
  z-index: 5;
}

.personal-leader-card {
  padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(14, 18, 26, 0.78);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--blue-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.mrc-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.mrc-row .avatar {
  --av: 42px;
  box-shadow: 0 0 0 2px rgba(14, 18, 26, 1), 0 0 0 3.5px var(--blue-line);
}

.mrc-pos {
  font-size: 15px;
  font-weight: 700;
}

.mrc-stats {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrc-next {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}

.mrc-next b {
  display: block;
  font-size: 14px;
  color: var(--blue-ice);
  font-variant-numeric: tabular-nums;
}

#top20BonusContainer .btn {
  margin-top: var(--s3);
}

/* ══════════════════════════ TOURNAMENTS ══════════════════════════ */

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 var(--s2) -4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-ice);
}

.back-btn .ic {
  width: 20px;
  height: 20px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: linear-gradient(160deg, rgba(90, 169, 255, 0.08), transparent 55%), var(--surface-1);
  border-color: var(--blue-line);
}

.channel-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.channel-text {
  font-size: 13px;
  color: var(--text-2);
}

.tourn-card {
  margin-bottom: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
}

.tourn-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: 6px;
}

.tourn-title {
  font-size: 16px;
  font-weight: 600;
}

.tourn-desc {
  font-size: 13px;
  color: var(--text-2);
}

.tourn-status {
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.status-active { color: var(--green); background: rgba(62, 207, 142, 0.1); }
.status-upcoming { color: var(--blue-ice); background: var(--blue-tint); }

.prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: var(--s3) 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.prizes-grid > div {
  background: var(--surface-2);
  padding: 10px 6px;
  text-align: center;
  min-width: 0;
}

.prize-title {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.prize-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}

.tourn-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: var(--s3);
}

/* ══════════════════════════ MODALS (Liquid Glass sheets) ══════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.24s var(--ease) backwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px var(--s5) calc(var(--s6) + var(--safe-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, rgba(30, 34, 44, 0.86), rgba(14, 16, 22, 0.92));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 -20px 50px rgba(0, 0, 0, 0.5);
  /* "backwards" (not "both") so inline drag transforms work after the intro */
  animation: sheetUp 0.42s var(--ease-sheet) backwards;
  transition: transform 0.32s var(--ease-sheet);
  will-change: transform;
}

/* Drag handle — swipe the sheet down to close */
.sheet-grabber {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 26px;
  margin-left: -60px;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}

.sheet-grabber::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s, width 0.2s, margin 0.2s;
}

.modal-sheet.dragging {
  transition: none;
  user-select: none;
}

.modal-sheet.dragging .sheet-grabber {
  cursor: grabbing;
}

.modal-sheet.dragging .sheet-grabber::before {
  width: 46px;
  margin-left: -23px;
  background: rgba(255, 255, 255, 0.4);
}

.modal-overlay.closing {
  pointer-events: none;
  animation: fadeOut 0.28s var(--ease) forwards;
}

.modal-overlay.closing .modal-sheet {
  transform: translateY(105%) !important;
  transition: transform 0.28s var(--ease-sheet);
}

@keyframes fadeOut {
  to { opacity: 0; }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.modal-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge);
  transition: transform 0.14s var(--ease), background 0.2s;
}

.modal-close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.14);
}

.modal-text {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: var(--s4);
}

.field-label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin: 0 2px 6px;
}

.asset-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: var(--s3);
}

.copy-box {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hairline);
}

.copy-box code {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

.copy-box.accent {
  border: 1px dashed var(--gold-line);
  background: var(--gold-tint);
  margin-bottom: var(--s4);
}

.copy-box.accent .field-label {
  color: var(--gold-hi);
  font-weight: 600;
}

.copy-box.accent code {
  font-size: 17px;
  font-weight: 700;
}

.summary {
  padding: 4px 14px;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hairline);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.summary-row + .summary-row {
  border-top: 1px solid var(--hairline);
}

.summary-row b {
  color: var(--text);
}

.summary-row.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.summary-row.total span:last-child {
  color: var(--gold-hi);
}

/* History / FAQ lists inside sheets */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h-group {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 6px 2px 0;
}

.h-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
}

.h-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-3);
}

.h-dot.green { background: var(--green); }
.h-dot.red { background: var(--red); }
.h-dot.gold { background: var(--gold); }

.h-main {
  flex: 1;
  min-width: 0;
}

.h-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-sub {
  font-size: 12px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.h-amount {
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.h-amount.green { color: var(--green); }
.h-amount.red { color: var(--red); }
.h-amount.gold { color: var(--gold-hi); }

.faq h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 18px 0 8px;
}

.faq h4:first-child {
  margin-top: 0;
}

.faq-item {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.faq-item b {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 2px;
}

.faq-rank {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-3);
  border-bottom: 1px solid var(--hairline);
}

.faq-rank b {
  color: var(--text);
  font-weight: 600;
}

.faq-rank .tag {
  flex-shrink: 0;
}

/* ══════════════════════════ MATCH ARENA (full screen) ══════════════════════════
   Two 3D hands on a lit platform. Only transform / opacity are animated
   (60 FPS on phones); prefers-reduced-motion is handled globally + in JS. */

body.arena-open {
  overflow: hidden;
}

/* The arena covers the app (nav included); sheets (z 1000) and toasts still open above it */
body.arena-open .bottom-nav {
  opacity: 0;
  pointer-events: none;
}

.arena {
  --mode: var(--gold);
  --hs: min(37vw, 172px);
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 10px) var(--s4) calc(var(--safe-bottom) + 14px);
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background: #040507;
  touch-action: manipulation;
}

.arena[hidden] {
  display: none;
}

.arena[data-mode="best_of_3"] { --mode: var(--blue-ice); }
.arena[data-mode="lizard_spock"] { --mode: #6fd3d0; }
.arena[data-mode="blind_ludik"] { --mode: var(--silver); }

.arena.enter {
  animation: arEnter 0.42s var(--ease-sheet) both;
}

.arena.leave {
  pointer-events: none;
  animation: arLeave 0.26s var(--ease) forwards;
}

@keyframes arEnter {
  from { opacity: 0; transform: scale(1.035); }
  to { opacity: 1; transform: none; }
}

@keyframes arLeave {
  to { opacity: 0; transform: scale(0.985); }
}

@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Background: deep black, cold light from above, warm light from the platform */
.ar-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(110% 50% at 50% -12%, rgba(90, 169, 255, 0.14), transparent 62%),
    radial-gradient(85% 38% at 50% 72%, rgba(217, 164, 65, 0.11), transparent 70%),
    linear-gradient(180deg, #05070b 0%, #040507 55%, #030405 100%);
}

.ar-light {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 169, 255, 0.11), transparent);
  will-change: transform;
}

.ar-light.l1 {
  left: -32%;
  top: 22%;
  animation: arDrift1 15s ease-in-out infinite alternate;
}

.ar-light.l2 {
  right: -32%;
  top: 34%;
  background: radial-gradient(closest-side, rgba(217, 164, 65, 0.09), transparent);
  animation: arDrift2 18s ease-in-out infinite alternate;
}

@keyframes arDrift1 {
  to { transform: translate3d(22%, 8%, 0) scale(1.12); }
}

@keyframes arDrift2 {
  to { transform: translate3d(-20%, -10%, 0) scale(1.08); }
}

/* Top bar: "MODE • STATUS" + compact exit */
.ar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 38px;
}

.ar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-status.long {
  font-size: 11.5px;
  letter-spacing: 0.05em;
}

.ar-status.xlong {
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.ar-mode {
  flex-shrink: 0;
  color: var(--mode);
}

.ar-sep {
  flex-shrink: 0;
  color: var(--text-3);
}

.ar-phase {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.ar-phase.swap {
  animation: arPhaseIn 0.34s var(--ease) both;
}

.ar-phase.win { color: var(--gold-hi); }
.ar-phase.loss { color: var(--red); }

@keyframes arPhaseIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.ar-exit {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  transition: transform 0.14s var(--ease), background 0.2s, color 0.2s, opacity 0.2s;
}

.ar-exit .ic {
  width: 17px;
  height: 17px;
}

.ar-exit:active {
  transform: scale(0.9);
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}

.ar-exit:disabled {
  opacity: 0.4;
}

/* Bet / timer / connection chips */
.ar-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.ar-chip[hidden] {
  display: none;
}

.ar-chip .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.ar-chip b {
  color: var(--text);
  font-weight: 700;
}

.ar-chip small {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
}

.ar-chip.bet .ic { color: var(--gold-hi); }
.ar-chip.timer .ic { color: var(--blue-ice); }

.ar-chip.timer.low {
  background: rgba(240, 97, 109, 0.08);
  border-color: rgba(240, 97, 109, 0.32);
}

.ar-chip.timer.low b,
.ar-chip.timer.low .ic {
  color: var(--red);
}

.ar-chip.net {
  color: var(--red);
  border-color: rgba(240, 97, 109, 0.28);
}

.ar-net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: arBlink 1.1s ease-in-out infinite;
}

@keyframes arBlink {
  50% { opacity: 0.25; }
}

/* Best-of-3 round indicators: ✓ ✕ = with the item played below */
.ar-rounds {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.ar-rounds[hidden] {
  display: none;
}

.ar-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ar-round.new {
  animation: popIn 0.4s var(--ease-spring) both;
}

.ar-rbox {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.ar-rbox .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}

.ar-round.current .ar-rbox {
  color: var(--gold-hi);
  border-color: var(--gold-line);
}

.ar-round.current .ar-rbox::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 13px;
  border: 1px solid rgba(217, 164, 65, 0.4);
  animation: arCurRing 1.8s ease-in-out infinite;
}

@keyframes arCurRing {
  0%, 100% { opacity: 0.15; transform: scale(0.92); }
  50% { opacity: 1; transform: none; }
}

.ar-round.win .ar-rbox { color: #062014; background: var(--green); border-color: transparent; }
.ar-round.loss .ar-rbox { color: #fff; background: var(--red); border-color: transparent; }
.ar-round.draw .ar-rbox { color: var(--text); background: rgba(255, 255, 255, 0.16); border-color: transparent; }

.ar-round.fill .ar-rbox {
  animation: arFill 0.5s var(--ease-spring);
}

@keyframes arFill {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}

.ar-rmove {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.ar-rmove img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ar-rmove .ic {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

/* Stage: players above their hands */
.ar-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ar-stage.jolt {
  animation: arJolt 0.3s ease both;
}

@keyframes arJolt {
  0%, 100% { transform: none; }
  25% { transform: translate3d(-3px, 1px, 0); }
  50% { transform: translate3d(3px, -1px, 0); }
  75% { transform: translate3d(-2px, 0, 0); }
}

.ar-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.ar-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease-spring);
}

.ar-player.in {
  opacity: 1;
  transform: none;
}

.ar-ava {
  position: relative;
  margin-bottom: 6px;
}

.ar-ava .avatar {
  --av: 54px;
  box-shadow: 0 0 0 2px #040507, 0 0 0 3.5px rgba(255, 255, 255, 0.14);
}

.ar-player.me .ar-ava .avatar {
  box-shadow: 0 0 0 2px #040507, 0 0 0 3.5px rgba(242, 199, 107, 0.6), 0 6px 18px rgba(217, 164, 65, 0.16);
}

.ar-player.opp .ar-ava .avatar {
  box-shadow: 0 0 0 2px #040507, 0 0 0 3.5px rgba(140, 200, 255, 0.45), 0 6px 18px rgba(90, 169, 255, 0.12);
}

.ar-player.opp .ar-ava .avatar.ghost {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.ar-ava .avatar.ghost .ic {
  width: 22px;
  height: 22px;
}

.ar-player.winner .ar-ava .avatar {
  box-shadow: 0 0 0 2px #040507, 0 0 0 3.5px var(--gold-hi), 0 0 24px rgba(242, 199, 107, 0.45);
}

.ar-pname {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ar-pname .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-pname .vbadges {
  flex-shrink: 0;
}

.ar-pid {
  max-width: 100%;
  min-height: 15px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-pstate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-top: 5px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  transition: color 0.25s, border-color 0.25s;
}

.ar-pstate:empty {
  visibility: hidden;
}

.ar-pstate::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}

.ar-pstate[data-s="pick"]::before {
  background: var(--gold);
  animation: arBlink 1.2s ease-in-out infinite;
}

.ar-pstate[data-s="search"]::before,
.ar-pstate[data-s="wait"]::before {
  animation: arBlink 1.4s ease-in-out infinite;
}

.ar-pstate[data-s="ready"],
.ar-pstate[data-s="revealed"] {
  color: var(--green);
  border-color: rgba(62, 207, 142, 0.22);
}

.ar-pstate[data-s="ready"]::before,
.ar-pstate[data-s="revealed"]::before {
  background: var(--green);
}

.ar-pstate[data-s="hidden"]::before {
  background: var(--silver);
}

.ar-pstate[data-s="off"],
.ar-pstate[data-s="loss"],
.ar-pstate[data-s="timeout"] {
  color: var(--red);
  border-color: rgba(240, 97, 109, 0.24);
}

.ar-pstate[data-s="off"]::before,
.ar-pstate[data-s="loss"]::before,
.ar-pstate[data-s="timeout"]::before {
  background: var(--red);
}

.ar-pstate[data-s="win"] {
  color: var(--gold-hi);
  border-color: var(--gold-line);
}

.ar-pstate[data-s="win"]::before {
  background: var(--gold-hi);
}

.ar-score {
  align-self: start;
  min-width: 48px;
  margin-top: 17px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.ar-score.num {
  margin-top: 11px;
  font-size: 24px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.ar-score.bump {
  animation: arFill 0.5s var(--ease-spring);
}

/* Field: platform + hands + centre countdown */
.ar-field {
  position: relative;
  flex: 0 0 auto;
  height: clamp(180px, 36vh, 300px);
  margin-top: 6px;
}

.ar-platform {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 100%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 199, 107, 0.16), rgba(217, 164, 65, 0.06) 55%, transparent 72%);
}

.ar-plat-ring {
  position: absolute;
  inset: 20% 9%;
  border-radius: 50%;
  border: 1px solid rgba(242, 199, 107, 0.32);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 62%, transparent);
  box-shadow: 0 0 26px rgba(217, 164, 65, 0.16), inset 0 0 18px rgba(217, 164, 65, 0.14);
  transition: border-color 0.5s;
}

.arena.is-win .ar-plat-ring {
  border-color: rgba(242, 199, 107, 0.6);
}

.ar-plat-glow {
  position: absolute;
  inset: -60% 6% -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 160, 0.42), rgba(255, 226, 160, 0.12) 50%, transparent);
  opacity: 0;
}

.ar-plat-glow.pulse {
  animation: arGlow 1s var(--ease) both;
}

@keyframes arGlow {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

.ar-hand {
  --hx: 0px;
  --hsc: 1;
  position: absolute;
  bottom: 16%;
  width: var(--hs);
  height: var(--hs);
  transform: translate3d(var(--hx), 0, 0) scale(var(--hsc));
  transition: transform 0.62s var(--ease-spring), opacity 0.45s var(--ease);
}

.ar-hand.me {
  left: -4%;
  transform-origin: 30% 60%;
}

.ar-hand.opp {
  right: -4%;
  transform-origin: 70% 60%;
}

.ar-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -5%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.65), transparent);
}

.ar-hand.win .ar-shadow {
  background: radial-gradient(closest-side, rgba(242, 199, 107, 0.5), transparent);
}

.ar-hand-flip,
.ar-hand-anim {
  width: 100%;
  height: 100%;
}

.ar-hand.opp .ar-hand-flip {
  transform: scaleX(-1);
}

.ar-hand-anim {
  animation: arFloat 3.4s ease-in-out infinite;
  will-change: transform;
}

.ar-hand.opp .ar-hand-anim {
  animation-delay: -1.7s;
}

/* Countdown shake — BOTH hands. The selector must outrank ".ar-hand.opp .ar-hand-anim"
   (idle float offset of −1.7s), otherwise that negative delay skips the whole
   0.6s shake on the opponent's hand. */
.ar-hand .ar-hand-anim.shake,
.ar-hand.opp .ar-hand-anim.shake {
  animation: arShake 0.6s cubic-bezier(0.3, 0.7, 0.35, 1) 0s both;
}

@keyframes arFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(-2deg); }
}

@keyframes arShake {
  0% { transform: none; }
  38% { transform: translate3d(-6%, -20%, 0) rotate(-16deg); }
  72% { transform: translate3d(3%, 5%, 0) rotate(5deg); }
  100% { transform: none; }
}

.ar-hand-img {
  --rot: rotate(0deg);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: var(--rot);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s var(--ease);
}

.ar-hand-img.up {
  --rot: rotate(90deg);
}

.ar-hand.pick .ar-hand-img {
  animation: arPickIn 0.45s var(--ease-spring) both;
}

.ar-hand.reveal .ar-hand-img {
  animation: arReveal 0.55s var(--ease-spring) both;
}

@keyframes arPickIn {
  0% { transform: var(--rot) scale(0.7); opacity: 0.3; }
  100% { transform: var(--rot) scale(1); opacity: 1; }
}

@keyframes arReveal {
  0% { transform: var(--rot) scale(0.5); opacity: 0.15; }
  55% { transform: var(--rot) scale(1.14); opacity: 1; }
  100% { transform: var(--rot) scale(1); opacity: 1; }
}

/* Nobody there yet: a faint breathing silhouette */
.ar-hand.ghost .ar-hand-img {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.2;
}

.ar-hand.ghost .ar-hand-anim {
  animation: arBreathe 2.8s ease-in-out infinite;
}

@keyframes arBreathe {
  0%, 100% { opacity: 0.55; transform: none; }
  50% { opacity: 1; transform: translate3d(0, -3px, 0); }
}

/* Opponent's hidden item: closed, neutral (muted) fist — not to be read as "rock" */
.ar-hand.closed .ar-hand-img {
  filter: grayscale(0.65) brightness(0.62);
}

/* No move (best-of-3 timeout) */
.ar-hand.none .ar-hand-img {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.35;
}

.ar-hand.win {
  --hsc: 1.06;
  z-index: 3;
}

.ar-hand.lose {
  --hsc: 0.84;
  opacity: 0.45;
}

.ar-cap {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -20%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.ar-cap.show {
  opacity: 1;
  transform: none;
}

.ar-hand.win .ar-cap { color: var(--gold-hi); }

.ar-center {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ar-count {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hi);
  background: linear-gradient(180deg, #fff7df 0%, var(--gold-hi) 46%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.ar-count.tick {
  animation: arTick 1s var(--ease) both;
}

@keyframes arTick {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  28% { transform: translate(-50%, -50%) scale(1.03); }
  40% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
}

.ar-ring {
  position: absolute;
  left: -64px;
  top: -64px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid rgba(242, 199, 107, 0.6);
  opacity: 0;
}

.ar-ring.go {
  animation: arRing 0.75s var(--ease) both;
}

@keyframes arRing {
  0% { opacity: 0.9; transform: scale(0.28); }
  100% { opacity: 0; transform: scale(1.7); }
}

.ar-flash {
  position: absolute;
  inset: -30% -20%;
  background: radial-gradient(38% 34% at 50% 44%, rgba(255, 240, 205, 0.5), rgba(255, 226, 160, 0.14) 50%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}

.ar-flash.go {
  animation: arFlash 0.8s var(--ease) both;
}

@keyframes arFlash {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 0; }
}

/* Outcome banner: ПОБЕДА! / ПОРАЖЕНИЕ / НИЧЬЯ (small = best-of-3 round) */
.ar-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}

.ar-banner[hidden] {
  display: none;
}

.ar-banner b {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
}

.ar-banner span {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.ar-banner.win b {
  background: linear-gradient(180deg, #fff7df, var(--gold-hi) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ar-banner.loss b { color: var(--red); }
.ar-banner.draw b { color: var(--silver); }

.ar-banner.small b {
  font-size: 24px;
}

.ar-banner.small span {
  font-size: 13px;
}

.ar-banner.show {
  animation: arBanner 0.62s var(--ease-spring) both;
}

@keyframes arBanner {
  0% { opacity: 0; transform: scale(0.55); }
  100% { opacity: 1; transform: none; }
}

/* Defeat: the scene dims (the winner's hand stays lit) */
.ar-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, rgba(2, 3, 5, 0.35), rgba(2, 3, 5, 0.72));
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.arena.is-loss .ar-dim {
  opacity: 1;
}

/* Dock: hint + item picker / actions */
.ar-dock {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}

.ar-dock.hide {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.ar-hint {
  min-height: 20px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-2);
}

.ar-hint b {
  color: var(--text);
  font-weight: 700;
}

.ar-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ar-picker:empty {
  display: none;
}

.ar-picker.five {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.ar-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 94px;
  padding: 0 2px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.16s var(--ease), opacity 0.25s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.ar-picker.five .ar-pick {
  height: 80px;
  gap: 3px;
  border-radius: var(--r-md);
}

.ar-pick img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.3s var(--ease-spring);
}

.ar-picker.five .ar-pick img {
  width: 36px;
  height: 36px;
}

.ar-pick span {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
}

.ar-picker.five .ar-pick span {
  font-size: 10px;
}

.ar-pick:active {
  transform: scale(0.94);
}

.ar-pick.sel {
  border-color: rgba(242, 199, 107, 0.62);
  background: linear-gradient(180deg, rgba(242, 199, 107, 0.17), rgba(217, 164, 65, 0.05));
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.1), 0 10px 26px rgba(217, 164, 65, 0.14);
}

.ar-pick.sel img {
  transform: translateY(-2px) scale(1.1);
}

.ar-pick.sel span {
  color: var(--gold-hi);
}

.ar-picker.locked .ar-pick {
  pointer-events: none;
}

.ar-picker.locked .ar-pick:not(.sel),
.ar-picker.disabled .ar-pick {
  opacity: 0.28;
}

.ar-picker.disabled .ar-pick {
  pointer-events: none;
}

.ar-pick.sel.busy::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(242, 199, 107, 0.3);
  border-top-color: var(--gold-hi);
  animation: spin 0.7s linear infinite;
}

.ar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ar-actions:empty {
  display: none;
}

.ar-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px;
  text-align: center;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  animation: riseIn 0.35s var(--ease) both;
}

.ar-notice .ic {
  width: 26px;
  height: 26px;
  margin-bottom: 5px;
  color: var(--gold-hi);
}

.ar-notice b {
  font-size: 16px;
  font-weight: 700;
}

.ar-notice span {
  font-size: 13px;
  color: var(--text-2);
}

/* Result card */
.ar-result {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(var(--safe-bottom) + 10px);
  z-index: 4;
  padding: 18px 16px 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(28, 32, 42, 0.94), rgba(13, 15, 21, 0.97));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 -18px 44px rgba(0, 0, 0, 0.55);
  animation: sheetUp 0.52s var(--ease-sheet) both;
}

.ar-result[hidden] {
  display: none;
}

.arr-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.arr-title.win { color: var(--gold-hi); }
.arr-title.loss { color: var(--red); }
.arr-title.draw { color: var(--silver); }

.arr-sub {
  margin-top: 2px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

.arr-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
}

.arr-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.arr-p .avatar {
  --av: 46px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 2px #12151c, 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.arr-p.winner .avatar {
  box-shadow: 0 0 0 2px #12151c, 0 0 0 3.5px var(--gold-hi), 0 0 18px rgba(217, 164, 65, 0.4);
}

.arr-p b {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arr-p code {
  max-width: 100%;
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

.arr-mid {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.ar-result .summary {
  margin-bottom: 14px;
}

.arr-delta.pos { color: var(--green); }
.arr-delta.neg { color: var(--red); }
.arr-xp { color: var(--text-2); }
.arr-xp.pos { color: var(--gold-hi); }

.arr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.arr-actions .btn {
  padding: 0 10px;
}

/* Confetti / poppers / sparks */
.ar-fx {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-height: 660px) {
  .arena { --hs: min(32vw, 138px); }
  .ar-field { height: clamp(150px, 31vh, 220px); }
  .ar-ava .avatar { --av: 44px; }
  .ar-score { margin-top: 12px; }
  .ar-score.num { margin-top: 6px; }
  .ar-pick { height: 80px; }
  .ar-pick img { width: 40px; height: 40px; }
  .ar-picker.five .ar-pick { height: 70px; }
  .ar-picker.five .ar-pick img { width: 32px; height: 32px; }
  .ar-count { font-size: 64px; }
  .ar-banner b { font-size: 38px; }
  .ar-rounds { margin-top: 8px; }
  .ar-result { padding: 14px 14px 14px; }
  .arr-vs { margin: 10px 0 8px; }
}

@media (max-width: 360px) {
  .arena { padding-left: 12px; padding-right: 12px; }
  .ar-picker.five { gap: 4px; }
  .ar-picker.five .ar-pick span { font-size: 9.5px; }
  .ar-status { font-size: 11.5px; letter-spacing: 0.05em; }
}

@media (max-width: 330px) {
  .ar-picker.five .ar-pick span { display: none; }
}

/* Blind Ludik: "?" over a hand whose item is unknown — even to its owner */
.ar-q {
  position: absolute;
  left: 50%;
  top: 44%;
  font-family: var(--font-display);
  font-size: calc(var(--hs) * 0.36);
  font-weight: 800;
  line-height: 1;
  color: var(--silver);
  background: linear-gradient(180deg, #ffffff 0%, var(--silver) 55%, #8d96a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-spring);
  pointer-events: none;
}

.ar-hand.mystery .ar-q {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: arQPulse 2.4s ease-in-out infinite;
}

.ar-hand.mystery .ar-hand-img {
  filter: grayscale(0.7) brightness(0.5);
}

@keyframes arQPulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

/* Blind Ludik picker: three face-down cards, scattered differently every game */
.ar-picker.cards {
  grid-template-columns: repeat(3, minmax(0, 86px));
  justify-content: center;
  gap: 20px;
  padding: 14px 6px 4px;
}

.ar-pick.ar-card {
  height: 120px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(195, 202, 214, 0.18), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #1b1f28, #0e1117);
  border: 1px solid rgba(195, 202, 214, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg));
  transition: transform 0.4s var(--ease-spring), opacity 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
  animation: arDeal 0.55s var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* ".ar-card .x" — must outrank the item-label rule ".ar-pick span" */
.ar-card .ar-card-face {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px dashed rgba(195, 202, 214, 0.24);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent);
  transition: border-color 0.25s;
}

.ar-card .ar-card-q {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  white-space: normal;
  background: linear-gradient(180deg, #ffffff 0%, var(--silver) 55%, #8d96a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.35s var(--ease-spring);
}

.ar-pick.ar-card:active {
  transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg)) scale(0.95);
}

.ar-pick.ar-card.sel {
  transform: translateY(-10px) rotate(0deg) scale(1.05);
  border-color: rgba(242, 199, 107, 0.75);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(242, 199, 107, 0.24), transparent 62%),
    repeating-linear-gradient(135deg, rgba(242, 199, 107, 0.05) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #2a2416, #12100b);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.12), 0 16px 32px rgba(217, 164, 65, 0.2);
}

.ar-pick.ar-card.sel .ar-card-face {
  border-color: rgba(242, 199, 107, 0.42);
}

.ar-pick.ar-card.sel .ar-card-q {
  background: linear-gradient(180deg, #fff7df 0%, var(--gold-hi) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.1);
}

@keyframes arDeal {
  from { opacity: 0; transform: translateY(34px) rotate(0deg) scale(0.82); }
}

/* «Подтвердить выбор» */
.ar-confirm {
  animation: arConfirmIn 0.36s var(--ease-spring) backwards;
}

.ar-confirm .ic {
  stroke-width: 2.6;
}

.ar-confirm .btn-meta {
  font-weight: 600;
  opacity: 0.72;
}

.ar-confirm.is-busy {
  animation: none;
  opacity: 0.85;
}

.ar-confirm.is-busy .ic {
  display: none;
}

.ar-confirm.is-busy::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(27, 19, 7, 0.25);
  border-top-color: #1b1307;
  animation: spin 0.7s linear infinite;
}

@keyframes arConfirmIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* Result: what lay under each blind card (mine highlighted) */
.arr-deck-row {
  align-items: center;
}

.arr-deck {
  display: inline-flex;
  gap: 6px;
}

.arr-dcard {
  width: 30px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  opacity: 0.5;
}

.arr-dcard img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.arr-dcard.on {
  opacity: 1;
  border-color: var(--gold-line);
  background: var(--gold-tint);
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.08);
}

@media (max-height: 660px) {
  .ar-picker.cards { grid-template-columns: repeat(3, minmax(0, 72px)); padding-top: 12px; }
  .ar-pick.ar-card { height: 96px; }
  .ar-card .ar-card-q { font-size: 38px; }
}

/* ══════════════════════════ MATCH TYPES: ranked / casual ══════════════════════════ */

.type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--s5);
}

.type-card {
  --tc: var(--gold-hi);
  --tc-tint: rgba(217, 164, 65, 0.12);
  --tc-line: rgba(217, 164, 65, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  transition: transform 0.16s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.type-card[data-type="casual"] {
  --tc: var(--blue-ice);
  --tc-tint: rgba(90, 169, 255, 0.12);
  --tc-line: rgba(140, 200, 255, 0.5);
}

.type-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, var(--tc-tint), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s;
}

.type-card:active {
  transform: scale(0.97);
}

.type-card.selected {
  border-color: var(--tc-line);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--tc-tint);
}

.type-card.selected::before {
  opacity: 1;
}

.type-top {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.type-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tc);
  background: var(--tc-tint);
  border: 1px solid var(--tc-line);
}

.type-ic .ic {
  width: 20px;
  height: 20px;
}

.type-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  transition: background 0.2s, border-color 0.2s;
}

.type-check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b0d11;
  transform: scale(0);
  transition: transform 0.25s var(--ease-spring);
}

.type-card.selected .type-check {
  background: var(--tc);
  border-color: var(--tc);
}

.type-card.selected .type-check::after {
  transform: scale(1);
}

.type-title {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

.type-desc {
  position: relative;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-3);
}

.bet-section[hidden] {
  display: none;
}

.bet-section {
  animation: riseIn 0.3s var(--ease) both;
}

.casual-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s5);
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(110deg, rgba(90, 169, 255, 0.1), transparent 70%), var(--surface-1);
  border: 1px solid var(--blue-line);
  animation: riseIn 0.3s var(--ease) both;
}

.casual-note[hidden] {
  display: none;
}

.cn-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--blue-ice);
  background: var(--blue-tint);
}

.cn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cn-text b {
  font-size: 14px;
  font-weight: 700;
}

.cn-text span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
}

/* Lobby: "Рейтинг / Без рейтинга" — the casual tab is cold blue */
.type-tabs {
  margin-bottom: var(--s4);
}

.type-tabs[data-pos="1"] .seg-thumb {
  background: linear-gradient(180deg, rgba(140, 200, 255, 0.16), rgba(90, 169, 255, 0.07));
  border-color: rgba(140, 200, 255, 0.26);
}

.type-tabs[data-pos="1"] .segmented-btn.active {
  color: var(--blue-ice);
}

.tag.ranked { color: var(--gold-hi); background: var(--gold-tint); }
.tag.casual { color: var(--blue-ice); background: var(--blue-tint); }

.tag .ic {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  stroke-width: 2.2;
}

.game-free {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--blue-ice);
}

.game-free .ic {
  width: 14px;
  height: 14px;
}

.game-card.casual {
  border-color: rgba(140, 200, 255, 0.22);
}

.arr-casual {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 2px 12px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--blue-ice);
}

.arr-casual .ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* History: casual matches */
.h-title .tag {
  margin-left: 6px;
  vertical-align: 1px;
}

/* Arena: match type chip */
.ar-chip.type .ic {
  color: var(--gold-hi);
}

.ar-chip.type.casual {
  background: var(--blue-tint);
  border-color: var(--blue-line);
}

.ar-chip.type.casual .ic,
.ar-chip.type.casual b {
  color: var(--blue-ice);
}

/* ══════════════════════════ FAQ (Settings) ══════════════════════════ */

.faq-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-intro {
  margin: -4px 2px 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.faq-sec {
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  transition: background 0.25s, border-color 0.25s;
}

.faq-sec[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hairline-strong);
}

.faq-sec > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq-sec > summary::-webkit-details-marker {
  display: none;
}

.faq-sec > summary:active {
  background: rgba(255, 255, 255, 0.03);
}

.faq-ic {
  --fc: var(--gold-hi);
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
}

.faq-ic.blue { --fc: var(--blue-ice); }
.faq-ic.green { --fc: var(--green); }
.faq-ic.silver { --fc: var(--silver); }
.faq-ic.teal { --fc: #6fd3d0; }

.faq-ic .ic {
  width: 18px;
  height: 18px;
}

.faq-sum {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.faq-sum b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq-sum small {
  font-size: 12px;
  color: var(--text-3);
}

.faq-chev {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  transition: transform 0.3s var(--ease-spring);
}

.faq-sec[open] .faq-chev {
  transform: rotate(90deg);
}

.faq-body {
  padding: 2px 14px 14px;
  animation: riseIn 0.28s var(--ease) both;
}

.faq-h {
  margin: 14px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.faq-body > .faq-h:first-child {
  margin-top: 4px;
}

.faq-gap {
  height: 12px;
}

.faq-body > .faq-intro {
  margin: 2px 0 10px;
}

.faq-list,
.faq-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.faq-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.12);
}

.faq-list.blue li::before {
  background: var(--blue-ice);
  box-shadow: 0 0 0 3px rgba(90, 169, 255, 0.12);
}

.faq-list b,
.faq-steps b {
  color: var(--text);
  font-weight: 600;
}

.faq-steps {
  counter-reset: faqstep;
  gap: 10px;
}

.faq-steps li {
  position: relative;
  min-height: 24px;
  padding-left: 36px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  counter-increment: faqstep;
}

.faq-steps li::before {
  content: counter(faqstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #1b1307;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}

/* Ranked vs casual comparison */
.faq-compare {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
}

.fc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 1fr 1fr;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-2);
}

.fc-row + .fc-row {
  border-top: 1px solid var(--hairline);
}

.fc-row.head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.fc-row > span:not(:first-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.fc-row .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.fc-ranked { color: var(--gold-hi); }
.fc-casual { color: var(--blue-ice); }
.fc-yes { color: var(--green); }
.fc-no { color: var(--text-3); }

/* Modes / ranks / tiers rows */
.faq-rows {
  display: flex;
  flex-direction: column;
}

.faq-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}

.faq-row + .faq-row {
  border-top: 1px solid var(--hairline);
}

.faq-row .mode-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.faq-row .mode-icon .ic {
  width: 18px;
  height: 18px;
}

.faq-row-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.faq-row-text b {
  display: block;
  margin-bottom: 1px;
  font-size: 14px;
  color: var(--text);
}

.faq-row .tag {
  flex-shrink: 0;
  margin-top: 1px;
}

.faq-row[data-mode="standard"] .mode-icon { --mode: var(--gold); --mode-tint: rgba(217, 164, 65, 0.1); }
.faq-row[data-mode="best_of_3"] .mode-icon { --mode: var(--blue); --mode-tint: rgba(90, 169, 255, 0.1); }
.faq-row[data-mode="lizard_spock"] .mode-icon { --mode: #6fd3d0; --mode-tint: rgba(111, 211, 208, 0.09); }
.faq-row[data-mode="blind_ludik"] .mode-icon { --mode: var(--silver); --mode-tint: rgba(195, 202, 214, 0.08); }

.faq-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
  background: var(--blue-tint);
  border: 1px solid var(--blue-line);
}

.faq-note b {
  color: var(--blue-ice);
}

/* Create: the item is picked on the arena */
.create-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 2px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-3);
}

.create-note .ic {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.create-note[hidden] {
  display: none;
}

.btn-continue .btn-meta {
  font-weight: 600;
  opacity: 0.7;
}

.btn-continue .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

/* Lobby card: mode, bet, creator name + ID, status with time left, join */
.game-card.lobby-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.gc-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.game-id {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-id code {
  font-size: 11.5px;
  color: var(--text-2);
}

.game-mode {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-3);
}

.gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.game-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text-2);
}

.game-status .gs-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.15);
  animation: arBlink 1.6s ease-in-out infinite;
}

.game-status .gs-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-left {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.game-left.low {
  color: var(--red);
}

.gc-foot .btn {
  flex-shrink: 0;
}

/* ══════════════════════════ BLOCKED & TOAST ══════════════════════════ */

.blocked-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background: rgba(5, 6, 8, 0.97);
}

.blocked-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: rgba(240, 97, 109, 0.1);
  border: 1px solid rgba(240, 97, 109, 0.25);
  margin-bottom: 6px;
}

.blocked-icon .ic {
  width: 30px;
  height: 30px;
}

.blocked-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.blocked-text {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 12px;
  max-width: 320px;
}

.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 64px);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  background: rgba(30, 34, 44, 0.8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px) scale(0.96);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease-spring);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast .ic {
  width: 16px;
  height: 16px;
  color: var(--green);
}

/* Badge toasts: the very badge that was tapped (crown / checkmark / flame) */
.toast .toast-badge {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ══════════════════════════ BOTTOM NAV (Liquid Glass) ══════════════════════════ */

.bottom-nav {
  --nav-i: 0;
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: calc(var(--nav-gap) + var(--safe-bottom));
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 456px;
  height: var(--nav-h);
  padding: 6px;
  display: flex;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(40, 44, 54, 0.55), rgba(18, 20, 26, 0.62));
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

.nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 4);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(242, 199, 107, 0.16), rgba(217, 164, 65, 0.08));
  border: 1px solid rgba(242, 199, 107, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateX(calc(var(--nav-i) * 100%));
  transition: transform 0.42s var(--ease-spring), opacity 0.25s;
  pointer-events: none;
}

.bottom-nav.no-active .nav-indicator {
  opacity: 0;
}

.nav-item {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 22px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.25s, transform 0.16s var(--ease);
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

.nav-icon .ic {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
  transition: transform 0.3s var(--ease-spring);
}

.nav-item.active {
  color: var(--gold-hi);
}

.nav-item.active .nav-icon .ic {
  transform: translateY(-1px);
  stroke-width: 2;
}

/* ══════════════════════════ PLAYER PROFILE ══════════════════════════
   Calm, minimal: dark neutral surfaces, thin borders, muted accents.
   Gold is kept only for what matters (XP progress, owner crown). */

.pp-card {
  padding: var(--s4);
  overflow: hidden;
  text-align: center;
  background: var(--surface-1);
}

.pp-card::after {
  /* subtle neutral top highlight */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.pp-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Avatar ring: plain grey by default; leaderboard top-3 get a medal glow
   (1 — gold, 2 — silver, 3 — bronze), same colours as the podium. */
.pp-avatar-wrap {
  position: relative;
  isolation: isolate;
  width: 112px;
  height: 112px;
  margin: 10px auto 14px;
}

.pp-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--m-glow, transparent), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.pp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0.18) 55%,
    rgba(255, 255, 255, 0.05) 80%,
    rgba(255, 255, 255, 0.26)
  );
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pp-avatar-wrap.medal-1 {
  --m-hi: var(--gold-hi);
  --m-mid: var(--gold);
  --m-lo: var(--gold-lo);
  --m-shine: #fff0c2;
  --m-glow: rgba(242, 199, 107, 0.3);
}

.pp-avatar-wrap.medal-2 {
  --m-hi: #eef2f7;
  --m-mid: var(--silver);
  --m-lo: #7b8494;
  --m-shine: #ffffff;
  --m-glow: rgba(195, 202, 214, 0.26);
}

.pp-avatar-wrap.medal-3 {
  --m-hi: #f2bd8f;
  --m-mid: var(--bronze);
  --m-lo: #8b5a33;
  --m-shine: #ffe2c6;
  --m-glow: rgba(201, 138, 85, 0.3);
}

.pp-avatar-wrap.medal-1::before,
.pp-avatar-wrap.medal-2::before,
.pp-avatar-wrap.medal-3::before {
  opacity: 1;
}

.pp-avatar-wrap.medal-1 .pp-ring,
.pp-avatar-wrap.medal-2 .pp-ring,
.pp-avatar-wrap.medal-3 .pp-ring {
  inset: -2px;
  background: conic-gradient(
    from 210deg,
    var(--m-hi),
    var(--m-lo) 25%,
    var(--m-mid) 45%,
    var(--m-shine) 58%,
    var(--m-mid) 70%,
    var(--m-lo) 85%,
    var(--m-hi)
  );
  box-shadow: 0 0 24px var(--m-glow), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* place pill under the avatar, like on the leaderboard podium */
.pp-medal {
  position: absolute;
  left: 50%;
  bottom: -9px;
  z-index: 2;
  transform: translateX(-50%);
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  display: none;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #121212;
  background: var(--m-mid);
  box-shadow: 0 0 0 2.5px var(--surface-1);
}

.pp-avatar-wrap.medal-1 .pp-medal,
.pp-avatar-wrap.medal-2 .pp-medal,
.pp-avatar-wrap.medal-3 .pp-medal {
  display: grid;
}

.player-sheet .pp-medal {
  box-shadow: 0 0 0 2.5px #1c2029;
}

.pp-avatar-wrap.medal-1,
.pp-avatar-wrap.medal-2,
.pp-avatar-wrap.medal-3 {
  margin-bottom: 20px;
}

.pp-avatar {
  --av: 100px;
  position: absolute;
  inset: 6px;
  width: auto;
  height: auto;
  font-size: 38px;
  box-shadow: 0 0 0 3px var(--surface-1);
}

/* Name + badges */
.pp-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
}

.pp-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-name-row .vbadges {
  gap: 5px;
}

.pp-name-row .vbadge {
  width: 21px;
  height: 21px;
}

.pp-id {
  margin-top: 8px;
}

/* Level panel */
.pp-level {
  margin-top: var(--s4);
  padding: 14px;
  border-radius: var(--r-md);
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
}

.pp-level-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.pp-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}

.pp-rank .ic {
  width: 18px;
  height: 18px;
  color: var(--blue-ice);
}

.pp-rank span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-lvl {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(242, 199, 107, 0.3);
}

.pp-level .xp-bar-bg {
  height: 8px;
}

.pp-level .xp-footer {
  margin-top: 8px;
}

/* Stats tiles */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.pp-stat {
  position: relative;
  min-width: 0;
  padding: 13px 6px 11px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
}

.pp-stat .stat-val {
  justify-content: center;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}


/* muted, not neon */
.pp-stat .stat-val.win { color: #6fc69a; }
.pp-stat .stat-val.loss { color: #e0868d; }

.pp-stat .stat-label {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
  /* wrap onto a 2nd line on narrow phones instead of "Процент по…" */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.pp-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 9.5px;
}

.pp-tag[hidden] {
  display: none;
}

/* Actions */
.pp-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.pp-actions .btn-gold {
  flex: 1;
  min-width: 0;
}

.pp-share {
  flex-shrink: 0;
  width: 56px;
  padding: 0;
}

.pp-share .ic {
  width: 20px;
  height: 20px;
}

/* Verified / owner badges (used in profile, leaderboard and lobby) */
.vbadges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.vbadge {
  display: block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  cursor: help;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.podium-name,
.leader-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.podium-name {
  justify-content: center;
}

.podium-name .nm,
.leader-name .nm {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Win streak — glowing fire */
.stat-val.fire,
.streak-chip b {
  background: linear-gradient(180deg, #ffd45e 0%, #ff8a1f 55%, #ff4b2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-val.fire {
  filter: drop-shadow(0 0 10px rgba(255, 112, 30, 0.28));
}

.fire-tag {
  color: #ffb36b;
  background: rgba(255, 110, 40, 0.14);
}

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 9px 0 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 120, 40, 0.16), rgba(255, 75, 43, 0.08));
  border: 1px solid rgba(255, 122, 45, 0.38);
  box-shadow: 0 0 14px rgba(255, 100, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: help;
}

.streak-chip b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.flame-ic {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 110, 30, 0.45));
}

.streak-chip .flame-ic {
  animation: flicker 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.06, 0.97) rotate(-2deg); }
  60% { transform: scale(0.97, 1.05) rotate(2deg); }
}

.leader-sub .streak .flame-ic {
  width: 13px;
  height: 13px;
}

/* Money tiles: total wagered + current balance (read-only, not clickable) */
.pp-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.pp-money-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: var(--r-md);
  text-align: left;
  color: inherit;
  cursor: default;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
}

.pp-money-ic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}

.pp-money-ic .ic {
  width: 17px;
  height: 17px;
}

.pp-money-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pp-money-label {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-money-text b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-money-text b small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}

/* Neutral button: dark grey, thin outline, soft press animation + ripple */
.btn-neutral {
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background: #171a21;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.22s var(--ease-spring), background 0.2s, border-color 0.2s;
}

.btn-neutral .ic {
  color: var(--text-2);
  transition: transform 0.3s var(--ease-spring), color 0.2s;
}

.btn-neutral:active {
  transform: scale(0.97);
  background: #1d2129;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-neutral:active .ic {
  color: var(--text);
  transform: scale(0.9) rotate(-10deg);
}

.press-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0);
  animation: pressRipple 0.55s var(--ease) forwards;
}

@keyframes pressRipple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (hover: hover) {
  .btn-neutral:hover {
    background: #1b1f27;
    border-color: rgba(255, 255, 255, 0.17);
  }
}

/* Another player's profile (bottom sheet) */
.player-sheet .pp-card {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.player-sheet .pp-card::after {
  display: none;
}

.player-sheet .pp-avatar-wrap {
  margin-top: 4px;
}

.player-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0 20px;
}

.player-skeleton .sk-circle {
  width: 118px;
  height: 118px;
  border-radius: 50%;
}

.player-skeleton .sk-line {
  width: 60%;
  height: 22px;
  border-radius: 8px;
}

.player-skeleton .sk-block {
  width: 100%;
  height: 90px;
  border-radius: var(--r-md);
}

.player-skeleton > * {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

/* Clickable players (leaderboard / lobby) */
.podium-slot[data-uid],
.leader-item[data-uid],
.game-card [data-uid] {
  cursor: pointer;
}

.podium-slot[data-uid] {
  transition: transform 0.15s var(--ease);
}

.podium-slot[data-uid]:active {
  transform: scale(0.97);
}

.leader-item[data-uid]:active {
  background: rgba(255, 255, 255, 0.04);
}

/* Personal challenge banner (Play → Create) */
.challenge-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s4);
  padding: 10px 10px 10px 12px;
  border-radius: var(--r-md);
  background:
    linear-gradient(110deg, rgba(255, 110, 40, 0.14), rgba(217, 164, 65, 0.06) 60%, transparent),
    var(--surface-1);
  border: 1px solid rgba(255, 122, 45, 0.35);
  animation: riseIn 0.3s var(--ease) both;
}

.challenge-banner[hidden] {
  display: none;
}

.cb-avatar .avatar {
  --av: 40px;
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px rgba(255, 122, 45, 0.55);
}

.cb-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cb-text small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb36b;
}

.cb-text small .ic {
  width: 13px;
  height: 13px;
}

.cb-text b {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
}

.tag.duel {
  color: #ffb36b;
  background: rgba(255, 110, 40, 0.14);
}

.game-card.duel {
  border-color: rgba(255, 122, 45, 0.45);
  background: linear-gradient(90deg, rgba(255, 110, 40, 0.08), transparent 65%), var(--surface-1);
}

/* Two-tab switches (Leaderboard "Опыт/Рефералы", Play "Создать/Найти игру"):
   sliding gold thumb + direction-aware content swap — one shared style */
.seg-tabs {
  position: relative;
}

.seg-tabs .seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 8px) / 2);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(242, 199, 107, 0.16), rgba(217, 164, 65, 0.07));
  border: 1px solid rgba(242, 199, 107, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.42s var(--ease-spring);
  pointer-events: none;
}

.seg-tabs[data-pos="1"] .seg-thumb {
  transform: translateX(calc(100% + 2px));
}

.seg-tabs .segmented-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.25s var(--ease), transform 0.14s var(--ease);
}

.seg-tabs .segmented-btn:active {
  transform: scale(0.97);
}

.seg-tabs .segmented-btn .ic {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: 0;
}

.seg-tabs .segmented-btn.active {
  color: var(--gold-hi);
  background: transparent;
  box-shadow: none;
}

.seg-body {
  transition: opacity 0.2s var(--ease), transform 0.34s var(--ease-spring);
  will-change: opacity, transform;
}

.seg-body.seg-out {
  opacity: 0;
  transform: translateX(var(--dx, 0));
  transition: opacity 0.16s var(--ease), transform 0.2s var(--ease);
}

.seg-body.seg-enter {
  opacity: 0;
  transform: translateX(var(--dx, 0));
  transition: none;
}

.fade-swap {
  transition: opacity 0.18s var(--ease);
}

.fade-swap.out {
  opacity: 0;
}

/* Settings: TikTok */
.row-icon.tiktok {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

.tt-ic {
  display: block;
  width: 19px;
  height: 19px;
}

/* «Канал КМН» (Telegram) under TikTok */
.row-icon.tgchan {
  background: #0c1822;
  border-color: rgba(65, 183, 236, 0.32);
}

.row-icon.tgchan .tt-ic {
  width: 21px;
  height: 21px;
}

.row-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tt-handle {
  color: var(--text-2);
}

/* ══════════════════════════ REFERRALS (profile card) ══════════════════════════ */

.ref-card {
  overflow: hidden;
  background: var(--surface-1);
}

.ref-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.ref-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.ref-icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #1b1307;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px rgba(217, 164, 65, 0.28);
  animation: giftWiggle 3.6s var(--ease) infinite;
}

.ref-icon .ic {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

@keyframes giftWiggle {
  0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-9deg) scale(1.06); }
  90% { transform: rotate(8deg) scale(1.06); }
  94% { transform: rotate(-4deg); }
}

.ref-head-text {
  flex: 1;
  min-width: 0;
}

.ref-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ref-sub {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.35;
}

.ref-next {
  flex-shrink: 0;
  text-align: right;
  line-height: 1.15;
}

.ref-next-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ref-next b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-hi);
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(242, 199, 107, 0.35);
}

.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: var(--s3);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.ref-stat {
  background: var(--surface-1);
  padding: 10px 6px;
  text-align: center;
  min-width: 0;
}

.ref-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.ref-stat b.gold {
  color: var(--text);
}

.ref-stat b.bump {
  animation: bump 0.6s var(--ease-spring);
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); color: var(--gold-hi); }
  100% { transform: scale(1); }
}

.ref-stat span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-milestone {
  margin-bottom: var(--s3);
}

.ref-ms-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-2);
}

.ref-ms-top b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ref-milestone .xp-bar-fill {
  background: linear-gradient(90deg, var(--gold-lo), var(--gold));
  box-shadow: none;
}

.ref-ladder {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -2px var(--s4);
  padding: 2px;
  scrollbar-width: none;
}

.ref-step {
  flex: 1 1 0;
  min-width: 52px;
  padding: 7px 4px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
}

.ref-step small {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.ref-step b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}

.ref-step.done {
  opacity: 0.45;
}

.ref-step.current {
  border-color: var(--gold-line);
  background: var(--gold-tint);
  box-shadow: 0 0 0 1px rgba(242, 199, 107, 0.15), 0 4px 14px rgba(217, 164, 65, 0.15);
}

.ref-step.current b {
  color: var(--gold-hi);
}

.ref-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed var(--hairline-strong);
  text-align: left;
  transition: transform 0.14s var(--ease), border-color 0.2s;
}

.ref-link:active {
  transform: scale(0.98);
}

.ref-link code {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-link .ic {
  width: 16px;
  height: 16px;
  color: var(--text-3);
}

.ref-link.copied {
  border-style: solid;
  border-color: rgba(62, 207, 142, 0.5);
}

.ref-link.copied .ref-copy-ic {
  color: var(--green);
}

.ref-rules {
  margin-top: var(--s3);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.ref-rules b {
  color: var(--text-2);
  font-weight: 600;
}

/* ══════════════════════════ LEADERBOARD tabs, referral rows, tournaments CTA ══════════════════════════ */

.leader-refs {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.leader-refs .ic {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.mrc-invite {
  margin-top: var(--s3);
  height: 40px;
}

.tourn-cta {
  margin-top: var(--s3);
}

.tourn-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  text-align: left;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(110deg, rgba(242, 199, 107, 0.16), rgba(217, 164, 65, 0.04) 55%, rgba(90, 169, 255, 0.06)),
    var(--surface-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(217, 164, 65, 0.08);
  transition: transform 0.15s var(--ease), border-color 0.2s, filter 0.2s;
}

.tourn-btn::after {
  /* light sweep */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: sweep 3.8s var(--ease) infinite;
  pointer-events: none;
}

@keyframes sweep {
  0%, 60% { transform: translateX(0); }
  100% { transform: translateX(360%); }
}

.tourn-btn:active {
  transform: scale(0.98);
}

.tourn-btn-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #1b1307;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tourn-btn-icon .ic {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

.tourn-btn-text {
  flex: 1;
  min-width: 0;
}

.tourn-btn-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.tourn-btn-text small {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}

.tourn-btn-end {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-hi);
  background: var(--gold-tint);
}

.tourn-btn-end .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.tourn-btn.locked {
  border-color: var(--hairline-strong);
  background: var(--surface-1);
  box-shadow: none;
}

.tourn-btn.locked::after {
  display: none;
}

.tourn-btn.locked .tourn-btn-icon {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.tourn-btn.locked .tourn-btn-text b {
  color: var(--text-2);
}

.tourn-btn.locked .tourn-btn-end {
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.07);
}

.tourn-btn.shake {
  animation: shake 0.42s var(--ease);
}

@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.tourn-note {
  margin: 8px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.tourn-note b {
  color: var(--text-2);
}

.hl-link {
  color: var(--gold-hi);
  font-weight: 700;
  text-decoration: none;
  padding: 0 4px;
  margin: 0 -1px;
  border-radius: 5px;
  background: rgba(242, 199, 107, 0.16);
  box-shadow: inset 0 -1px 0 rgba(242, 199, 107, 0.45);
  text-shadow: 0 0 12px rgba(242, 199, 107, 0.45);
  cursor: pointer;
  transition: background 0.2s;
}

.hl-link:active {
  background: rgba(242, 199, 107, 0.3);
}

.tourn-locked {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(240, 97, 109, 0.08);
  border: 1px solid rgba(240, 97, 109, 0.25);
  animation: riseIn 0.3s var(--ease) both;
}

.tourn-locked[hidden] {
  display: none;
}

.tourn-locked > .ic {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--red);
}

/* ══════════════════════════ WALLET sheet & TON Connect ══════════════════════════ */

.wallet-hero {
  padding: 14px 16px 2px;
  margin-bottom: var(--s3);
  border-radius: var(--r-md);
  background:
    radial-gradient(100% 90% at 100% 0%, rgba(217, 164, 65, 0.12), transparent 65%),
    rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hairline);
}

.wallet-hero .balance-row {
  margin-bottom: var(--s3);
}

.wallet-bind {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
}

.wallet-bind-text {
  flex: 1;
  min-width: 0;
}

.wallet-bind .row-sub {
  font-family: var(--mono);
}

.wallet-bind-hint {
  margin: 8px 4px 0;
  font-size: 11.5px;
  color: var(--text-3);
}

/* «Привязан» is a button: tap → confirm → the wallet is unlinked */
.tag-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(62, 207, 142, 0.28);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), background 0.2s, border-color 0.2s;
}

.tag-btn:active {
  transform: scale(0.94);
  background: rgba(62, 207, 142, 0.18);
}

@media (hover: hover) {
  .tag-btn:hover { border-color: rgba(62, 207, 142, 0.5); }
}

.wallet-history {
  margin-top: var(--s4);
}

.tc-presets {
  margin-bottom: var(--s4);
}

.tc-wallet-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 2px 12px;
  font-size: 12.5px;
  color: var(--text-2);
  font-family: var(--mono);
}

.tc-wallet-line[hidden] {
  display: none;
}

.tc-wallet-line .link-btn {
  margin-left: auto;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-3);
}

.tc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(62, 207, 142, 0.6);
}

.tc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hairline);
}

.tc-status[hidden] {
  display: none;
}

.tc-status.ok { color: var(--green); border-color: rgba(62, 207, 142, 0.3); background: rgba(62, 207, 142, 0.07); }
.tc-status.err { color: var(--red); border-color: rgba(240, 97, 109, 0.3); background: rgba(240, 97, 109, 0.07); }

.spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--blue-ice);
  animation: spin 0.8s linear infinite;
}

.segmented-btn .ic {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: -3px;
}

.btn[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.setting-item.readonly {
  cursor: copy;
}

.toast.err .ic {
  color: var(--red);
}

.toast.gold .ic {
  color: var(--gold-hi);
}

.toast {
  max-width: calc(100% - 32px);
  white-space: normal;
  text-align: left;
}

/* ══════════════════════════ FALLBACKS & ADAPTIVE ══════════════════════════ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav { background: rgba(20, 22, 28, 0.97); }
  .modal-sheet { background: #13161d; }
  .top-bar { background: rgba(5, 6, 8, 0.97); }
  .personal-leader-card { background: #0f131b; }
  .toast { background: #1c2029; }
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .mode-card.selected { border-color: var(--hairline-strong); }
  .mode-icon { border-color: var(--hairline); }
  .podium-slot { background: var(--surface-1); border-color: var(--hairline-strong); }
}

::-webkit-scrollbar { width: 0; height: 0; }

@media (max-width: 360px) {
  .view-section { padding-left: 12px; padding-right: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .preset-pills { grid-template-columns: repeat(3, 1fr); }
  .balance-amount { font-size: 30px; }
  .moves-grid.five-moves { grid-template-columns: repeat(3, 1fr); }
  .nav-item { font-size: 10px; }
  .podium { gap: 6px; }
  .mrc-next { display: none; }
  .pp-stat .stat-val { font-size: 19px; }
  .pp-stat .stat-label { font-size: 11px; }
  .pp-name { font-size: 21px; }
}

@media (min-width: 520px) {
  body { padding-top: calc(var(--safe-top) + 8px); }
  #app {
    border-radius: 0;
  }
  .view-section { padding-left: var(--s5); padding-right: var(--s5); }
}

@media (hover: hover) {
  .btn-glass:hover,
  .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
  .list-row:hover,
  .setting-item:hover { background: rgba(255, 255, 255, 0.025); }
  .mode-card:hover { border-color: var(--hairline-strong); }
  .nav-item:hover { color: var(--text-2); }
  .nav-item.active:hover { color: var(--gold-hi); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════ PROFILE: EDIT · FRAMES · EMOJI ══════════════════════ */

/* pencil in the top-right corner of the profile card */
.pp-edit {
  width: 34px;
  height: 34px;
  margin: -6px -6px -6px 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  transition: transform 0.22s var(--ease-spring), color 0.2s, background 0.2s, border-color 0.2s;
}

.pp-edit .ic {
  width: 17px;
  height: 17px;
}

.pp-edit:active {
  transform: scale(0.9) rotate(-8deg);
  color: var(--gold-hi);
  background: var(--gold-tint);
  border-color: var(--gold-line);
}

@media (hover: hover) {
  .pp-edit:hover {
    color: var(--text);
    border-color: var(--hairline-strong);
  }
}

/* the player picked a frame other than the one their place gives → no place pill */
.pp-avatar-wrap.no-pill .pp-medal {
  display: none;
}

.pp-avatar-wrap.no-pill {
  margin-bottom: 14px;
}

/* achievement badge by the nick (server data only — never taken from the name);
   an SVG badge like the crown / checkmark, same size and shadow */
.nick-emoji {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.ach-ic {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

.pp-name-row .nick-emoji {
  width: 22px;
  height: 22px;
  transition: transform 0.28s var(--ease-spring);
}

.pp-name-row .nick-emoji:active,
.pp-name-row .nick-emoji.is-active {
  transform: scale(1.14);
}

.nick-emoji.pop-in {
  animation: emojiPopIn 0.62s var(--ease-spring);
}

@keyframes emojiPopIn {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  55% { transform: scale(1.28) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ＋ next to the own nick when no emoji is set */
.nick-emoji-add {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px dashed rgba(255, 255, 255, 0.24);
  transition: transform 0.3s var(--ease-spring), color 0.2s, border-color 0.2s, background 0.2s;
}

.nick-emoji-add .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
  transition: transform 0.32s var(--ease-spring);
}

.nick-emoji-add:active {
  transform: scale(0.86);
}

.nick-emoji-add.is-active {
  color: var(--gold-hi);
  border-style: solid;
  border-color: var(--gold-line);
  background: var(--gold-tint);
}

.nick-emoji-add.is-active .ic {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .nick-emoji-add:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* «Скрыть баланс» */
.pp-money-tile.is-private .pp-money-ic {
  color: var(--text-3);
}

.pp-hidden-note {
  color: var(--text-3);
}

.pp-money-text b.pp-hidden-val {
  font-size: 15px;
  color: var(--text-2);
  letter-spacing: 0;
}

/* ── Edit profile sheet ── */
.pe-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 14px;
}

.pe-preview .pp-avatar-wrap {
  width: 86px;
  height: 86px;
  margin: 4px auto 14px;
}

.pe-preview .pp-avatar-wrap.medal-1,
.pe-preview .pp-avatar-wrap.medal-2,
.pe-preview .pp-avatar-wrap.medal-3 {
  margin-bottom: 18px;
}

.pe-preview .pp-avatar-wrap.no-pill {
  margin-bottom: 14px;
}

.pe-preview .pp-avatar {
  --av: 76px;
  inset: 5px;
  font-size: 30px;
  box-shadow: 0 0 0 3px #151820;
}

.pe-preview .pp-medal {
  box-shadow: 0 0 0 2.5px #151820;
}

.pe-name .pp-name {
  font-size: 18px;
}

.pe-frames {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.pe-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 4px 10px;
  border-radius: 16px;
  font: inherit;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  transition: transform 0.24s var(--ease-spring), border-color 0.2s, background 0.2s, opacity 0.2s;
}

.pe-frame:active {
  transform: scale(0.94);
}

.pe-frame.is-on {
  color: var(--text);
  border-color: var(--gold-line);
  background: var(--gold-tint);
}

.pe-frame.is-locked {
  opacity: 0.45;
}

.pe-frame.shake,
.ec-cell.shake {
  animation: shake 0.42s var(--ease);
}

.pe-ring {
  width: 52px;
  height: 52px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0.06) 80%,
    rgba(255, 255, 255, 0.28)
  );
}

.pe-frame.frame-gold .pe-ring { --m-hi: var(--gold-hi); --m-mid: var(--gold); --m-lo: var(--gold-lo); --m-shine: #fff0c2; --m-glow: rgba(242, 199, 107, 0.35); }
.pe-frame.frame-silver .pe-ring { --m-hi: #eef2f7; --m-mid: var(--silver); --m-lo: #7b8494; --m-shine: #ffffff; --m-glow: rgba(195, 202, 214, 0.3); }
.pe-frame.frame-bronze .pe-ring { --m-hi: #f2bd8f; --m-mid: var(--bronze); --m-lo: #8b5a33; --m-shine: #ffe2c6; --m-glow: rgba(201, 138, 85, 0.35); }

.pe-frame.frame-gold .pe-ring,
.pe-frame.frame-silver .pe-ring,
.pe-frame.frame-bronze .pe-ring {
  background: conic-gradient(
    from 210deg,
    var(--m-hi),
    var(--m-lo) 25%,
    var(--m-mid) 45%,
    var(--m-shine) 58%,
    var(--m-mid) 70%,
    var(--m-lo) 85%,
    var(--m-hi)
  );
  box-shadow: 0 0 16px var(--m-glow);
}

.pe-frame-av {
  --av: 46px;
  width: 46px;
  height: 46px;
  font-size: 18px;
  box-shadow: 0 0 0 2px #151820;
}

.pe-frame-name {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-lock,
.pe-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.pe-lock {
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.5);
}

.pe-check {
  color: #15130e;
  background: var(--gold-hi);
  animation: emojiPopIn 0.45s var(--ease-spring);
}

.pe-lock .ic,
.pe-check .ic {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.pe-note {
  margin: 0 2px 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

.pe-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  padding: 12px;
  border-radius: 16px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  transition: transform 0.22s var(--ease-spring), background 0.2s;
}

.pe-row:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.05);
}

.pe-row-ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}

.pe-row-ic .ic {
  width: 18px;
  height: 18px;
}

.pe-emoji-ic .ach-ic {
  width: 24px;
  height: 24px;
}

.pe-emoji-ic.is-empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
}

.pe-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pe-row-text b {
  font-size: 14.5px;
  font-weight: 600;
}

.pe-row-text small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-3);
}

/* ── Emoji cloud: grows out of the ＋ like a thought bubble ── */
.ec-root {
  position: fixed;
  inset: 0;
  z-index: 1500;
}

.ec-root[hidden] {
  display: none;
}

.ec-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 6, 0.34);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}

.ec-root.open .ec-backdrop {
  opacity: 1;
}

.ec-dot,
.ec-panel {
  --ec-bg: #1a1d24;
}

.ec-dot {
  position: fixed;
  border-radius: 50%;
  background: var(--ec-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  transform: scale(0);
  transition: transform 0.22s var(--ease-spring);
}

.ec-dot-s {
  width: 8px;
  height: 8px;
}

.ec-dot-m {
  width: 14px;
  height: 14px;
}

.ec-root.open .ec-dot {
  transform: scale(1);
}

.ec-root.open .ec-dot-m {
  transition-delay: 0.05s;
}

.ec-panel {
  position: fixed;
  padding: 12px 12px 10px;
  border-radius: 22px;
  background: var(--ec-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: scale(0.14);
  opacity: 0;
  transition: transform 0.44s cubic-bezier(0.18, 1.25, 0.4, 1) 0.07s, opacity 0.18s ease 0.07s;
}

.ec-root.open .ec-panel {
  transform: scale(1);
  opacity: 1;
}

.ec-root.closing .ec-panel {
  transition: transform 0.24s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.2s ease 0.05s;
}

.ec-root.closing .ec-dot {
  transition: transform 0.16s ease 0.14s;
}

.ec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 9px;
}

.ec-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ec-count {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.ec-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.ec-cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font: inherit;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.38s var(--ease-spring), opacity 0.2s ease, background 0.2s, border-color 0.2s;
  transition-delay: calc(var(--d, 0) * 1ms + 110ms), calc(var(--d, 0) * 1ms + 110ms), 0s, 0s;
}

.ec-root.open .ec-cell {
  transform: scale(1);
  opacity: 1;
}

.ec-root.closing .ec-cell {
  transition: transform 0.18s ease, opacity 0.14s ease;
  transition-delay: 0s;
}

.ec-emo {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  transition: transform 0.26s var(--ease-spring), filter 0.2s, opacity 0.2s;
}

.ec-cell.is-locked .ec-emo {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.45;
}

.ec-cell.is-pending .ec-emo {
  opacity: 0.3;
}

.ec-cell:active .ec-emo {
  transform: scale(0.8);
}

.ec-cell.is-current {
  background: var(--gold-tint);
  border-color: var(--gold-line);
}

.ec-cell.is-sel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}

.ec-cell.is-current.is-sel {
  border-color: var(--gold-hi);
}

.ec-lock {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.6);
}

.ec-lock .ic {
  width: 9px;
  height: 9px;
  stroke-width: 2.8;
}

.ec-remove .ic {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}

@media (hover: hover) {
  .ec-cell.is-earned:hover .ec-emo {
    transform: scale(1.14);
  }
}

.ec-info {
  min-height: 46px;
  margin-top: 10px;
  padding: 9px 4px 2px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}

.ec-info-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.ec-info-t .ic {
  width: 13px;
  height: 13px;
  color: var(--text-3);
}

.ec-info-e {
  width: 17px;
  height: 17px;
}

.ec-info-d {
  margin-top: 2px;
}

.ec-info-s {
  margin-top: 4px;
  font-weight: 600;
  color: var(--gold-hi);
}

.ec-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

.ec-prog {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}

.ec-prog i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
}

.ec-prog-n {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ec-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

.ec-hint {
  color: var(--text-3);
}

/* FAQ: emoji list */
.faq-emo {
  width: 26px;
  height: 26px;
  margin: 0 2px;
}

/* ══════════════════════ PROFILE BANNERS ══════════════════════
   Background of the profile top — edge to edge, down to the level panel.
   Plain colours are muted and static; earned ones shimmer softly. */
.pp-top {
  position: relative;
  isolation: isolate;
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  padding: var(--s4);
}

.pp-top + .pp-level {
  margin-top: 0;
}

.pp-banner {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}

.pp-top .pp-name {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* another player's profile (sheet): the banner is a rounded panel */
.player-sheet .pp-top {
  margin: 0;
  padding: 12px 10px 16px;
  border-radius: 20px;
  overflow: hidden;
}

.player-sheet .pp-top + .pp-level {
  margin-top: var(--s4);
}

.player-sheet .pp-banner {
  -webkit-mask-image: none;
  mask-image: none;
}

.bnr {
  background-repeat: no-repeat;
}

.bnr[data-banner="default"] { background: transparent; }
.bnr[data-banner="violet"] { background: radial-gradient(120% 85% at 50% 0%, rgba(150, 120, 230, 0.3), transparent 70%), linear-gradient(180deg, #241d38 0%, #1a1529 100%); }
.bnr[data-banner="orange"] { background: radial-gradient(120% 85% at 50% 0%, rgba(230, 150, 80, 0.26), transparent 70%), linear-gradient(180deg, #33231a 0%, #231912 100%); }
.bnr[data-banner="green"] { background: radial-gradient(120% 85% at 50% 0%, rgba(90, 190, 140, 0.24), transparent 70%), linear-gradient(180deg, #17301f 0%, #112117 100%); }
.bnr[data-banner="pink"] { background: radial-gradient(120% 85% at 50% 0%, rgba(230, 120, 170, 0.26), transparent 70%), linear-gradient(180deg, #331d2b 0%, #24141f 100%); }
.bnr[data-banner="red"] { background: radial-gradient(120% 85% at 50% 0%, rgba(220, 90, 90, 0.24), transparent 70%), linear-gradient(180deg, #331a1c 0%, #241214 100%); }

.bnr[data-banner="gold"] { background: linear-gradient(115deg, #2b2111 0%, #4d3a18 20%, #7d5f28 36%, #a8843f 50%, #7d5f28 64%, #4d3a18 80%, #2b2111 100%); }
.bnr[data-banner="silver"] { background: linear-gradient(115deg, #1c2027 0%, #353b46 20%, #59616f 36%, #8a93a2 50%, #59616f 64%, #353b46 80%, #1c2027 100%); }
.bnr[data-banner="bronze"] { background: linear-gradient(115deg, #24170f 0%, #45291a 20%, #6d4329 36%, #966039 50%, #6d4329 64%, #45291a 80%, #24170f 100%); }
.bnr[data-banner="blue"] { background: linear-gradient(115deg, #0d1729 0%, #14284a 20%, #1f4275 36%, #2f6aa8 50%, #1f4275 64%, #14284a 80%, #0d1729 100%); }
.bnr[data-banner="rainbow"] { background: linear-gradient(115deg, #3b2350 0%, #24345e 17%, #1d4b50 33%, #3c4a24 50%, #503a22 67%, #4c2236 83%, #3b2350 100%); }

/* earned banners shimmer: the colours flow + a soft glint passes over */
.bnr[data-anim] {
  background-size: 300% 100%;
  animation: bnrFlow 8s ease-in-out infinite alternate;
}

.bnr[data-banner="rainbow"][data-anim] {
  background-size: 500% 100%;
  animation-duration: 14s;
}

.bnr[data-anim]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.03) 54%, transparent 70%);
  background-size: 260% 100%;
  animation: bnrSheen 5.5s ease-in-out infinite;
}

@keyframes bnrFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes bnrSheen {
  0% { background-position: 120% 0; }
  55%, 100% { background-position: -20% 0; }
}

/* edit sheet: banner swatches */
.pe-banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.pe-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 6px 6px 8px;
  border-radius: 14px;
  font: inherit;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  transition: transform 0.24s var(--ease-spring), border-color 0.2s, background 0.2s;
}

.pe-banner:active {
  transform: scale(0.95);
}

.pe-banner.is-on {
  color: var(--text);
  border-color: var(--gold-line);
  background: var(--gold-tint);
}

.pe-banner.is-locked .pe-swatch {
  filter: saturate(0.45) brightness(0.62);
}

.pe-banner.shake {
  animation: shake 0.42s var(--ease);
}

.pe-swatch {
  position: relative;
  display: block;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.pe-swatch[data-banner="default"] {
  background: linear-gradient(180deg, #13161c, #0b0d11);
}

.pe-banner-name {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-banner .pe-lock,
.pe-banner .pe-check {
  top: 10px;
  right: 10px;
}

/* match result: each player on their banner, with badges + emoji */
.arr-p {
  position: relative;
  isolation: isolate;
  padding: 10px 6px 9px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
}

.arr-bnr {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.arr-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.arr-name b {
  min-width: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.arr-name .vbadges {
  gap: 2px;
}

.arr-name .vbadge,
.arr-name .nick-emoji {
  width: 15px;
  height: 15px;
}

/* ══ Emoji-style icons: match types (🏅 / 🎮) and game modes (⚡ ⚔️ 🦎 🃏) ══ */
.em-ic {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

.mode-icon .em-ic,
.type-ic .em-ic,
.cn-ic .em-ic {
  width: 26px;
  height: 26px;
}

.mode-card.selected .mode-icon .em-ic,
.type-card.selected .type-ic .em-ic {
  animation: emPop 0.42s var(--ease-spring);
}

@keyframes emPop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.faq-row .mode-icon .em-ic {
  width: 22px;
  height: 22px;
}

.segmented-btn .em-ic {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  vertical-align: -4px;
}

.ar-chip .em-ic {
  width: 16px;
  height: 16px;
}

.ar-mode-ic {
  width: 18px;
  height: 18px;
}

.tag .em-ic {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  filter: none;
}

.game-free .em-ic,
.arr-casual .em-ic,
.fc-row .em-ic {
  width: 16px;
  height: 16px;
}

.fc-row.head .em-ic {
  margin-right: 4px;
}

.mode-em {
  width: 15px;
  height: 15px;
  filter: none;
}

.empty-state .empty-em {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* the opponent's card opens their profile */
.arr-p-link {
  cursor: pointer;
  transition: transform 0.22s var(--ease-spring), border-color 0.2s;
}

.arr-p-link:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .arr-p-link:hover {
    border-color: rgba(255, 255, 255, 0.22);
  }
}

.arr-open {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-top: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.arr-open .ic {
  width: 12px;
  height: 12px;
}