/* R128d — Create-a-Tournament pop-open. Rides the universal theme vars
   (--panel/--line/--accent/--dim/--radius) with self-contained fallbacks so all
   five variants style it; no dependence on --muted (defined by no theme). */
.tg[hidden] { display: none; }
/* The JS toggles views, the top-up link, the format picker and error lines via
   the [hidden] attribute — but several of those carry a class that sets `display`
   (e.g. .tg-topup-link{display:block}, .tg-field{display:block}), and a `display`
   rule BEATS the [hidden] attribute. Without this, a hidden element still shows
   (the top-up link appeared even with a sufficient balance — sweeps + the E2E
   stayed green, only a screenshot caught it). cf. feedback_hidden_attribute_
   loses_to_display. Make [hidden] authoritative inside the dialog. */
.tg [hidden] { display: none !important; }
.tg {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tg-cloud {
  position: absolute; inset: 0;
  background: rgba(4, 4, 10, .72); backdrop-filter: blur(4px);
}
.tg-panel {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--panel, #17171f); border: 1px solid var(--line, #26262f);
  border-radius: var(--radius, 14px); padding: 26px 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.tg-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--dim, #8f89a8); font-size: 26px; line-height: 1; cursor: pointer;
}
.tg-close:hover { color: var(--txt, #eee); }
.tg-title { margin: 0 0 6px; font-size: 21px; }
.tg-sub { color: var(--dim, #8f89a8); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.tg-field { display: block; margin: 0 0 12px; font-size: 13px; color: var(--dim, #8f89a8); }
.tg-field select, .tg-field input {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  background: rgba(0, 0, 0, .28); color: var(--txt, #eee);
  border: 1px solid var(--line, #26262f); border-radius: 9px; font-size: 15px;
}
.tg-cost {
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line, #26262f);
  border-radius: 10px; padding: 12px 14px; margin: 4px 0 8px;
}
.tg-cost-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; padding: 3px 0; }
.tg-cost-row span { color: var(--dim, #8f89a8); }
.tg-cost-row b { font-variant-numeric: tabular-nums; }
.tg-cost-total { border-top: 1px solid var(--line, #26262f); margin-top: 4px; padding-top: 7px; font-size: 15px; }
.tg-cost-total b { color: var(--accent, #8b5cf6); }
.tg-balance b { color: var(--accent-2, #22d3ee); }
.tg-fine { color: var(--dim, #8f89a8); font-size: 11.5px; line-height: 1.45; margin: 8px 0 0; }
.tg-error { color: #ff6b6b; font-size: 13px; margin: 10px 0 0; }
.tg-btn {
  display: block; width: 100%; margin-top: 16px; padding: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--accent-2, #22d3ee));
  color: #0b0b12; font-weight: 800; font-size: 15px; border: 0; border-radius: 11px;
}
.tg-btn:disabled { opacity: .5; cursor: not-allowed; }
.tg-topup-link {
  display: block; width: 100%; margin-top: 10px; padding: 8px; cursor: pointer;
  background: none; border: 0; color: var(--accent-2, #22d3ee); font-size: 13px; text-decoration: underline;
}
.tg-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.tg-tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; cursor: pointer;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line, #26262f); border-radius: 10px; color: var(--txt, #eee);
}
.tg-tier b { font-size: 16px; font-variant-numeric: tabular-nums; }
.tg-tier span { color: var(--dim, #8f89a8); font-size: 12px; }
.tg-tier.on { border-color: var(--accent, #8b5cf6); box-shadow: 0 0 0 1px var(--accent, #8b5cf6) inset; }
.tg-burst { font-size: 42px; text-align: center; }
.testmode-ribbon { display: block; margin: 8px 0 0; font-size: 11px; color: var(--dim, #8f89a8); text-align: center; }

/* R128d — holder-name link inside the challenge dialog. David CHOSE the accent
   treatment (Version B) 2026-08-10: the accent link colour, bold — reads clearly
   as a link. (Alt considered: subtle `color:inherit`+underline.) */
.tg-holder-link { color: var(--accent-2, #22d3ee); text-decoration: underline; font-weight: 800; }

/* Game-page floating-tournament surface (FOMO). */
.fomo-tourney-cta { margin-top: 12px; text-align: center; }
.ft-challenge {
  display: inline-block; cursor: pointer; border: 0; border-radius: 11px;
  padding: 12px 20px; font-weight: 800; font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: #0b0b12;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--accent-2, #22d3ee));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
.ft-challenge.flash { animation: ftFlash 1.4s ease-in-out infinite; }
@keyframes ftFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .0), 0 6px 22px rgba(0, 0, 0, .4); }
  50% { box-shadow: 0 0 0 6px rgba(139, 92, 246, .35), 0 6px 22px rgba(0, 0, 0, .4); }
}
@media (prefers-reduced-motion: reduce) { .ft-challenge.flash { animation: none; } }
.ft-holder { display: block; margin-top: 7px; font-size: 12.5px; color: var(--dim, #8f89a8); }
.ft-holder b { color: var(--txt, #eee); }
.ft-start {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  color: var(--txt, #eee); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line, #26262f);
}
.ft-start:hover { border-color: var(--accent, #8b5cf6); }