/* The existing lobby grid retains its main playing column. Only the right
   rewards area becomes a two-card stack. Nothing in match view is targeted. */
.lobby-learning-column{grid-area:rewards;display:grid;gap:20px;min-width:0;align-self:start}
.lobby-learning-column>.rewards-hub{grid-area:auto;position:static;min-width:0;width:100%}
.lobby-review-card{position:relative;min-width:0;border:1px solid rgba(185,244,85,.17);border-radius:24px;padding:22px;background:radial-gradient(ellipse at 100% 0,rgba(161,230,88,.055),transparent 64%),linear-gradient(145deg,#151e1a,#12151e 70%);box-shadow:0 14px 40px rgba(0,0,0,.12);overflow:hidden}
.lr-eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:9px;font-weight:850;letter-spacing:.13em}
.lr-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid rgba(195,255,55,.12);border-radius:10px;background:rgba(195,255,55,.06);flex:none}
.lr-icon svg{width:20px;height:20px}
.lobby-review-card h2{font-size:25px;line-height:1.12;letter-spacing:-.045em;margin:13px 0 8px;font-weight:850}
.lobby-review-card>p{color:#adb7b9;font-size:11px;line-height:1.6;margin:0 0 17px}
#lobbyReviewContent{min-width:0}
.lr-state{color:#b7d995;font-size:8px;letter-spacing:.1em;font-weight:800;margin-bottom:13px;min-height:12px}
.lr-match{display:flex;align-items:center;gap:12px;margin:0 0 17px;min-width:0}
.lr-match-copy{min-width:0;flex:1;display:grid;gap:5px}
.lr-match-copy>span{color:#949fa5;letter-spacing:.075em;font-size:7px;font-weight:750;line-height:1.5}
.lr-match-copy strong{color:#f2f6f2;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.lr-match-copy small{color:#b0b9c4;font-size:10px;line-height:1.45}
.lr-ring{position:relative;isolation:isolate;width:68px;height:68px;flex:0 0 68px;border-radius:50%;background:conic-gradient(#b2ee65 0 12%,rgba(164,241,129,.13) 12% 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#c7ed91;gap:2px}
.lr-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#151c1a;z-index:-1}
.lr-ring>svg{width:29px;height:29px}
.lr-ring.lr-rated{background:conic-gradient(#b2ee65 var(--lr-progress,0%),rgba(164,241,129,.13) 0)}
.lr-ring strong{font-size:20px;line-height:1;font-weight:850;color:#f1f9ea;letter-spacing:-.04em}
.lr-ring small{font-size:8px;line-height:1.2;color:#bed4b8}
.lr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 13px}
.lr-stats>div{padding:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.065);border-radius:9px;min-width:0}
.lr-stats dt{font-size:9px;line-height:1.4;color:#aeb9bf;min-height:13px}
.lr-stats dd{font-size:17px;line-height:1.2;font-weight:800;margin:6px 0 0;color:#f0f5eb}
.lr-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:13px}
.lr-features>span{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.025);padding:10px 7px;color:#c1ccc4;font-size:9px;line-height:1.4}
.lr-features svg{width:16px;height:16px;flex:none;color:#b0d686}
.lr-note{font-size:9px;line-height:1.6;color:#99a6ab;margin:0 0 15px}
.lr-primary{width:100%;min-height:44px;padding:11px 13px;font-size:11px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.lr-secondary{width:100%;min-height:44px;padding:10px 2px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b8c4b7;font-size:10px;text-align:left}
.lr-primary:focus-visible,.lr-secondary:focus-visible{outline-offset:-3px}
.lr-preview{border:1px solid rgba(189,239,104,.1);background:linear-gradient(120deg,rgba(142,197,88,.05),rgba(171,167,255,.035));border-radius:12px;display:flex;align-items:center;gap:12px;padding:16px 12px;min-height:72px;color:#afdc72}
.lr-preview>svg{height:30px;width:30px;flex:none}
.lr-preview>span{font-size:9px;line-height:1.5;letter-spacing:.08em;font-weight:750}
.lr-message{color:#b0bdba;font-size:11px;line-height:1.65;margin:14px 0 17px}
.lr-loading>svg{animation:lr-breathe 1.5s ease-in-out infinite}
@keyframes lr-breathe{50%{opacity:.45}}
@media(max-width:1220px){.lobby-review-card{padding:19px}.lobby-review-card h2{font-size:24px}.lobby-learning-column{gap:16px}}
@media(max-width:720px){.lobby-review-card{padding:20px;border-radius:20px}.lobby-review-card h2{font-size:27px}.lobby-review-card>p,.lr-message{font-size:12px}.lr-state{font-size:9px}.lr-match-copy>span{font-size:8px}.lr-match-copy strong{font-size:18px}.lr-match-copy small{font-size:11px}.lr-primary{font-size:12px;min-height:46px}.lr-secondary{font-size:11px}.lr-note,.lr-features>span{font-size:10px}.lr-stats dt{font-size:10px}.lr-ring{width:76px;height:76px;flex-basis:76px}.lr-stats dd{font-size:20px}}
@media(prefers-reduced-motion:reduce){.lr-loading>svg{animation:none}}

/* V1.33: compact lobby, shared play icons, and the persistent fairness link.
   Scoped to lobby/header/menu UI. Match and checker styles are untouched. */
.topbar .header-fairness {
  display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center;
  min-height:44px; gap:8px; padding:8px 10px; border-radius:12px;
  color:#c8cfdc; font-size:10px; line-height:1.4; white-space:nowrap;
}
.header-fairness .secure-dot { flex:none; width:6px; height:6px; }
.header-fairness .fairness-arrow { color:var(--lime); }
.header-fairness:hover { color:var(--text); background:rgba(200,255,56,.06); }
.header-fairness:focus-visible { outline-offset:-2px; }
/* Content sized columns avoid collisions with the new right hand control. */
@media(min-width:961px) {
  .topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:18px; }
  .main-nav { justify-self:center; }
}
@media(min-width:961px) and (max-width:1450px) {
  .topbar { gap:12px; padding-inline:18px; }
  .main-nav .nav-button { padding-inline:9px; font-size:12px; }
  .topbar-actions { gap:7px; }
  .topbar-actions .profile-copy,.topbar-actions .chevron { display:none; }
  .topbar-actions .profile-pill { padding:4px; }
}
@media(min-width:961px) and (max-width:1120px) {
  .topbar .header-fairness { width:87px; gap:7px; padding-inline:5px; }
  .header-fairness .fairness-copy { white-space:normal; text-align:left; }
  .header-fairness .fairness-arrow { display:none; }
}
@media(max-width:960px) {
  .topbar .header-fairness { width:102px; gap:7px; padding-inline:5px; font-size:10px; }
  .header-fairness .fairness-copy { white-space:normal; text-align:left; }
  .header-fairness .fairness-arrow { display:none; }
}
/* Phones retain the full wording and a 44px target; the brand mark is kept
   while its wordmark yields room to the fairness link, bell, and wallet. */
@media(max-width:600px) {
  .topbar .brand-copy { display:none; }
  .topbar .header-fairness { width:102px; font-size:10px; }
  .topbar-actions { gap:5px; }
}
@media(max-width:360px) {
  .topbar .header-fairness { width:89px; font-size:9px; gap:6px; }
  .topbar-actions { gap:2px; }
}
.practice-lounge { padding:0; }
.practice-option .practice-card-top {
  display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  column-gap:10px; align-items:center;
}
.practice-mode-badge { min-width:0; overflow-wrap:normal; }
.practice-card-meta { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.practice-no-fee { color:#b8c5d5; font-size:10px; line-height:1.55; font-weight:500; text-align:right; white-space:nowrap; }
.practice-card-meta .practice-free-tag { margin:0; flex:none; }
.practice-option.pvp-card .practice-symbol {
  color:var(--lime); border-color:rgba(200,255,56,.25); background:rgba(200,255,56,.08);
}
/* Shared left side mode icons. V1.35 CTA geometry is scoped below. */
.quick-play-options .option-button {
  grid-template-columns:44px minmax(0,1fr) 46px 48px; gap:16px; padding:14px;
}
.quick-play-options .option-icon {
  width:44px; height:44px; color:var(--lime);
  background:rgba(200,255,56,.07); border:1px solid rgba(200,255,56,.14); border-radius:13px;
}
.quick-play-options .option-icon svg { width:26px; height:26px; display:block; }
.quick-play-options .option-icon { pointer-events:none; }
.quick-play-options .option-value { text-align:right; white-space:nowrap; }
.quick-play-options .option-copy { min-width:0; }
.quick-play-options .option-copy strong,.quick-play-options .option-copy small { overflow-wrap:break-word; }
@media(min-width:721px) and (max-width:1220px) {
  .practice-option .practice-card-top { column-gap:8px; }
  .practice-card-meta { gap:8px; }
  .practice-no-fee { font-size:9px; }
}
@media(max-width:420px) {
  .practice-option .practice-card-top { grid-template-columns:38px minmax(0,1fr) auto; column-gap:8px; }
  .practice-option .practice-symbol { width:38px; height:38px; }
  .practice-symbol svg { width:25px; height:25px; }
  .practice-mode-badge { font-size:8px; letter-spacing:.07em; }
  .practice-card-meta { gap:7px; }
  .practice-no-fee { font-size:9px; }
  .practice-card-meta .practice-free-tag { font-size:8px; padding:4px 6px; }
  .quick-play-options .option-button { grid-template-columns:36px minmax(0,1fr) 26px 35px; gap:8px; padding:12px 10px; }
  .quick-play-options .option-icon { width:36px; height:36px; border-radius:11px; }
  .quick-play-options .option-icon svg { width:23px; height:23px; }
  .quick-play-options .option-value { font-size:11px; }
}
/* Override the older ID scoped mobile invitation row so all five rows line up. */
#modalCard .quick-play-options .option-button { display:grid; }
#modalCard .quick-play-options .option-icon { color:var(--lime); }
#modalCard .quick-play-options .option-copy strong { white-space:normal; }
@media(min-width:961px) and (max-width:1120px) {
  .topbar { gap:8px; padding-inline:14px; }
  .topbar .brand-copy { font-size:15px; }
  .topbar .brand-mark { width:32px; height:32px; }
  .topbar .brand-button { gap:6px; }
  .main-nav { gap:2px; padding:4px; }
  .main-nav .nav-button { padding-inline:6px; gap:5px; font-size:11px; }
  .topbar-actions { gap:5px; }
}

/* V1.34: center the tabs on the viewport, not the gap between unequal controls.
   Equal flexible side tracks keep the navigation fixed as account values change.
   Tablet widths use a centered second row rather than overlapping the controls.
   The existing phone bottom navigation and in-game layout remain untouched. */
@media (min-width:961px) and (min-height:521px), (min-width:1001px) {
  .topbar {
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    column-gap:16px;
  }
  .topbar > .main-nav { justify-self:center; width:max-content; }
  .topbar > .topbar-actions { justify-self:end; min-width:0; }
  .topbar .profile-copy { min-width:0; max-width:100px; }
  .topbar .profile-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* Keep every control reachable while making room for the centered tab group. */
@media (min-width:961px) and (max-width:1900px) {
  .topbar-actions .profile-copy, .topbar-actions .chevron { display:none; }
  .topbar-actions .profile-pill { padding:4px; }
}
@media (min-width:961px) and (max-width:1680px) {
  .topbar .header-fairness { width:94px; gap:7px; padding-inline:5px; }
  .topbar .header-fairness .fairness-copy { white-space:normal; text-align:left; }
  .topbar .header-fairness .fairness-arrow { display:none; }
}
@media (min-width:1121px) and (max-width:1450px) {
  .topbar-actions .wallet-label { display:none; }
  .topbar-actions .wallet-pill { display:flex; padding:6px 10px; }
  .topbar-actions .wallet-pill strong { font-size:12px; }
  .topbar-actions .coin-pill { display:none; }
}
@media (min-width:1121px) and (max-width:1280px) {
  .topbar .main-nav { gap:2px; padding:4px; }
  .topbar .main-nav .nav-button { padding-inline:6px; gap:5px; font-size:11px; }
}
/* The fixed header reserves its taller height at compact desktop widths. */
@media (min-width:961px) and (max-width:1120px) and (min-height:521px), (min-width:1001px) and (max-width:1120px) {
  :root { --desktop-header-height:calc(122px + var(--safe-top)); }
  .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
    grid-template-rows:44px 48px;
    row-gap:10px;
    padding-top:calc(10px + var(--safe-top));
    padding-bottom:10px;
  }
  .topbar > .brand-button { grid-area:brand; }
  .topbar > .topbar-actions { grid-area:actions; }
  .topbar > .main-nav { grid-area:nav; justify-self:center; }
}

/* Content-aware fallback for unusually long balances or account labels.
   Values are never hidden behind the tabs or abbreviated by the layout code. */
@media (min-width:961px) and (min-height:521px), (min-width:1001px) {
  .topbar .main-nav .nav-button {
    transition:color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  html[data-header-rows="2"] { --desktop-header-height:calc(122px + var(--safe-top)); }
  html[data-header-rows="2"] .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
    grid-template-rows:44px 48px;
    row-gap:10px;
    padding-top:calc(10px + var(--safe-top));
    padding-bottom:10px;
  }
  html[data-header-rows="2"] .topbar > .brand-button { grid-area:brand; }
  html[data-header-rows="2"] .topbar > .topbar-actions { grid-area:actions; }
  html[data-header-rows="2"] .topbar > .main-nav { grid-area:nav; justify-self:center; }
}

/* V1.35: Friends lives between cash and free play, in an independent left
   column. Sidebar height cannot add dead space between those three blocks. */
.lobby-hub { grid-template-areas:"play rewards" "status status"; }
.lobby-play-column { grid-area:play; display:flex; flex-direction:column; gap:16px; min-width:0; }
.lobby-play-column > * { min-width:0; }
.lobby-play-column > .practice-lounge { padding:0; }
.lobby-play-column > .social-lobby-strip {
  margin:0; min-height:68px; padding:11px 16px; gap:13px; border-radius:16px;
}
.lobby-play-column .social-lobby-strip > span:first-child { width:36px; height:36px; flex-basis:36px; border-radius:11px; }
.lobby-play-column .social-lobby-strip strong { font-size:13px; }
.lobby-play-column .social-lobby-strip small { font-size:11px; margin-top:3px; }
.lobby-play-column .social-lobby-strip > button { flex:none; min-height:44px; padding:10px 14px; font-size:12px; }
.lobby-play-column > .online-resume-strip { margin:0; }
.lobby-hub > .cloud-lobby-status { grid-area:status; margin:0; min-width:0; }
@media(max-width:720px) {
  .lobby-hub { grid-template-areas:"play" "rewards" "status"; }
  .lobby-play-column { gap:14px; }
  .lobby-play-column > .social-lobby-strip { padding:11px 12px; gap:10px; }
}
@media(max-width:380px) {
  .lobby-play-column > .social-lobby-strip { padding:10px; gap:8px; }
  .lobby-play-column .social-lobby-strip > span:first-child { width:30px; height:34px; flex-basis:30px; }
  .lobby-play-column .social-lobby-strip strong { font-size:12px; }
  .lobby-play-column .social-lobby-strip small { font-size:10px; }
  .lobby-play-column .social-lobby-strip > button { padding:10px; gap:6px; font-size:11px; }
}
/* Both controls are native sibling buttons, not one button nested in another.
   The background row spans the full card. Its padded text cannot sit under CTA. */
#modalCard .quick-play-options .quick-play-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto; position:relative; isolation:isolate; min-width:0;
}
#modalCard .quick-play-options .option-button {
  grid-area:1 / 1 / 2 / -1; min-width:0; min-height:82px;
  grid-template-columns:44px minmax(0,1fr); gap:16px; padding:14px 112px 14px 16px;
}
#modalCard .quick-play-options .option-icon { width:44px; height:44px; }
#modalCard .quick-play-options .option-cta {
  grid-area:1 / 2; z-index:1; align-self:center; justify-self:end;
  display:inline-flex; align-items:center; justify-content:center;
  width:76px; min-height:44px; margin:12px 16px 12px 0; padding:10px 12px;
  border:1px solid var(--lime); border-radius:11px;
  background:var(--lime); color:#152006; box-shadow:0 3px 12px rgba(200,255,56,.08);
  font:inherit; font-size:13px; font-weight:900; line-height:1.2; text-align:center;
  cursor:pointer; white-space:nowrap; transition:background .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#modalCard .quick-play-options .quick-play-row:hover > .option-button {
  border-color:rgba(200,255,56,.55); background:rgba(200,255,56,.06);
}
#modalCard .quick-play-options .option-cta:hover { background:#ddff86; border-color:#ddff86; box-shadow:0 0 18px rgba(200,255,56,.18); }
#modalCard .quick-play-options .option-cta:active { background:#b6ed29; }
#modalCard .quick-play-options .option-button:focus-visible,
#modalCard .quick-play-options .option-cta:focus-visible { outline:2px solid #f5ffe0; outline-offset:3px; }
#modalCard .quick-play-options .option-cta > span { pointer-events:none; }
@media(max-width:420px) {
  #modalCard .quick-play-options .option-button {
    grid-template-columns:34px minmax(0,1fr); min-height:82px; gap:9px; padding:12px 78px 12px 10px;
  }
  #modalCard .quick-play-options .option-icon { width:34px; height:34px; border-radius:10px; }
  #modalCard .quick-play-options .option-icon svg { width:23px; height:23px; }
  #modalCard .quick-play-options .option-cta { width:56px; margin:10px 10px 10px 0; padding:10px 6px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  #modalCard .quick-play-options .option-button,
  #modalCard .quick-play-options .option-cta { transition:none !important; }
}


/* V1.36: challenge content reuses the two compact cosmetic preview cards.
   Only their content and icon artwork change; the original card surface,
   border, radius, grid, hover treatment and spacing remain in styles.css. */
.lobby-challenge .lobby-challenge-copy { min-width:0; }
.lobby-challenge .lobby-challenge-period {
  font-size:7px; line-height:1.3; letter-spacing:.075em; font-weight:800;
}
.lobby-challenge strong { line-height:1.35; overflow-wrap:break-word; }
.lobby-challenge .lobby-challenge-meta { display:flex; flex-wrap:wrap; gap:3px 5px; align-items:center; }
.lobby-challenge-meta > span { white-space:nowrap; }
.lobby-challenge .lobby-challenge-reward { color:#f6d68a; }
.lobby-challenge[data-complete="true"] .lobby-challenge-progress { color:var(--cash); }
.lobby-challenge .unlock-art svg { display:block; width:27px; height:27px; }
.lobby-challenge .challenge-weekly-art { color:#fa6c87; }
.lobby-challenge:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
@media(max-width:720px) {
  .lobby-challenge .lobby-challenge-period { font-size:8px; }
}

/* Keep the complete fairness phrase on ONE line on phones and tablets.
   The label never wraps or truncates. Compact spacing, not compressed text,
   makes room for the bell, wallet and profile. Large account values may move
   the trailing controls onto another row instead of hiding their contents. */
@media(max-width:960px), (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .topbar .header-fairness {
    width:auto; min-width:max-content; flex:0 0 auto; gap:5px; padding-inline:3px;
    font-size:10px; white-space:nowrap;
  }
  .topbar .header-fairness .fairness-copy { white-space:nowrap; text-align:left; }
  .topbar .header-fairness > span { margin-left:0; }
  .topbar .header-fairness .fairness-arrow { display:none; }
}
@media(max-width:600px) {
  .topbar { grid-template-columns:auto minmax(0,1fr); }
  .topbar .topbar-actions { flex-wrap:wrap; max-width:100%; column-gap:4px; row-gap:0; }
  .topbar .wallet-pill { padding-inline:0; flex:none; }
  .topbar .profile-pill { flex:none; }
}
@media(max-width:380px) {
  .topbar .topbar-actions { column-gap:2px; }
  .topbar .wallet-pill strong { padding-inline:8px; font-size:12px; }
}
@media(max-width:340px) {
  .topbar .header-fairness { gap:4px; padding-inline:0; }
  .topbar .wallet-pill strong { padding-inline:6px; }
}