/* NVIDIAddict — Arena lobby and shared playing cards (2026-10-03). */

/* ---- lobby ---- */
#screen-games.in-game > .screen-head { display: none; }
#screen-games.in-game > .ag-lobby { display: none; }
#screen-games:not(.in-game) > .game { display: none !important; }
.ag-lobby { display: grid; gap: 18px; }
.ag-lobby .eyebrow { margin: 0 0 8px; }
.ag-lobby > .ag-all { margin-bottom: -10px; }
.ag-continue { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, hsl(var(--hue) 70% 55%) 45%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, hsl(var(--hue) 70% 50%) 22%, var(--surface)), var(--surface) 70%); }
.ag-continue .ag-ic { width: 56px; height: 56px; }
.ag-ct { display: grid; gap: 1px; min-width: 0; }
.ag-ct small { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ag-ct b { font: 800 22px/1.1 var(--display); letter-spacing: -.01em; }
.ag-ct em { font-style: normal; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-go { padding: 10px 18px; border-radius: 999px; background: hsl(var(--hue) 70% 50%); color: #0B0F0C; font-weight: 700; font-size: 14px; }
.ag-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  background: color-mix(in srgb, hsl(var(--hue) 70% 50%) 18%, var(--raised)); color: hsl(var(--hue) 75% 62%); }
.ag-ic svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-ic svg[viewBox="0 0 100 100"] { fill: currentColor; stroke: none; width: 78%; height: 78%; }
:root:not([data-theme="dark"]) .ag-ic { color: hsl(var(--hue) 70% 38%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag-ic { color: hsl(var(--hue) 75% 62%); } }

.ag-today-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ag-day { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 10px 26px 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.ag-day b { display: block; font-size: 14.5px; }
.ag-day small { display: block; color: var(--muted); font-size: 12px; }
.ag-day.done { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.ag-check { position: absolute; top: 8px; right: 10px; font-style: normal; color: var(--good); font-weight: 800; }
.ag-streak { position: absolute; bottom: 8px; right: 10px; font: 700 11px var(--mono); font-style: normal; color: var(--gold); }

.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.ag-tile { position: relative; display: grid; align-content: start; gap: 4px; min-height: 132px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .1s, border-color .15s; }
.ag-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: hsl(var(--hue) 72% 54%); }
.ag-tile:hover { border-color: color-mix(in srgb, hsl(var(--hue) 70% 55%) 50%, var(--line)); }
.ag-tile:active { transform: scale(.98); }
.ag-tile .ag-ic { margin-bottom: 4px; }
.ag-tile b { font: 700 15.5px/1.2 var(--display); }
.ag-tile small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.ag-tile em { font-style: normal; font: 600 11.5px var(--mono); color: hsl(var(--hue) 70% 58%); margin-top: auto; padding-top: 4px; }
:root:not([data-theme="dark"]) .ag-tile em { color: hsl(var(--hue) 65% 36%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag-tile em { color: hsl(var(--hue) 70% 62%); } }
.ag-badge { position: absolute; top: 10px; right: 10px; font: 700 9.5px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
@media (max-width: 420px) { .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-tile { min-height: 124px; } }

/* While a game is open the app's toast sits up top, clear of game controls at the bottom. */
body.ag-playing .toast { bottom: auto; top: calc(var(--hdr-h, 60px) + 54px); }

/* ---- game bar: the way back, pinned under the header while a game is open ---- */
.ag-bar { position: sticky; top: var(--hdr-h, 0px); z-index: 15; display: flex; align-items: center; gap: 10px; min-height: 42px; margin: -6px 0 10px; padding: 4px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.ag-bar[hidden] { display: none; }
.ag-back { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.ag-back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 3px 0 4px; }
.ag-title { font: 800 17px var(--display); letter-spacing: -.01em; border-left: 3px solid hsl(var(--hue, 90) 72% 54%); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-extra { margin-left: auto; font: 600 13px var(--mono); color: var(--muted); white-space: nowrap; display: flex; gap: 10px; align-items: center; }
.ag-root { min-width: 0; }
:root[data-orient="landscape"][data-short="1"] .ag-bar { position: static; }

/* ---- shared playing cards (cards.js) ----
   Scoped to .pcard[data-s]: the app already uses a plain .pcard class for Desk panels (app.js), so the
   playing card must never style those, and must override their padding. Size with --cw on the card or
   any ancestor (default 64px). */
.pcard[data-s] { position: relative; padding: 0; flex: 0 0 auto; width: var(--cw, 64px); height: calc(var(--cw, 64px) * 1.4); border-radius: calc(var(--cw, 64px) * .085);
  background: #FBFAF4; border: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 calc(var(--cw, 64px) * .04) calc(var(--cw, 64px) * .1) -2px rgba(0, 0, 0, .35);
  font-family: var(--sans); user-select: none; -webkit-user-select: none; overflow: hidden; container-type: inline-size; color: #16181A; }
.pcard[data-s].red { color: #C21F2A; }
.pcard .pc-idx { position: absolute; left: 6%; top: 3.5%; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.pcard .pc-idx b { font-weight: 700; font-size: calc(var(--cw, 64px) * .25); letter-spacing: -.04em; }
.pcard .pc-idx i { font-style: normal; font-size: calc(var(--cw, 64px) * .19); }
.pcard .pc-idx2 { left: auto; top: auto; right: 6%; bottom: 3.5%; transform: rotate(180deg); }
.pcard .pc-ace { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cw, 64px) * .62); }
.pcard .pc-court { position: absolute; inset: 18% 20%; border-radius: calc(var(--cw, 64px) * .05); border: 1.5px solid currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, currentColor 7%, transparent) 6px 7px); }
.pcard .pc-court b { font: 800 calc(var(--cw, 64px) * .44) / 1 var(--display); }
.pcard .pc-court i { font-style: normal; font-size: calc(var(--cw, 64px) * .24); line-height: 1; }
.pcard .pc-pips { position: absolute; inset: 16% 30% 16% 30%; }
.pcard .pc-pips i { position: absolute; font-style: normal; font-size: calc(var(--cw, 64px) * .17); line-height: 1; left: calc(var(--x) * 50%); top: calc(var(--y) * 100% / 6); transform: translate(-50%, -50%); }
.pcard .pc-pips i.f { transform: translate(-50%, -50%) rotate(180deg); }
.pcard .pc-big { display: none; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: calc(var(--cw, 64px) * .5); line-height: 1; }
@container (max-width: 58px) {
  .pc-pips, .pc-ace, .pc-court, .pc-idx2 { display: none !important; }
  .pc-big { display: block !important; }
  .pc-idx b { font-size: calc(var(--cw, 64px) * .32) !important; }
  .pc-idx i { display: none; }
  .pc-idx { flex-direction: row !important; gap: 1px; }
}
.pcard[data-s].down { background: #0F2A12; border-color: rgba(0, 0, 0, .4); }
.pcard .pc-back { position: absolute; inset: 5%; border-radius: calc(var(--cw, 64px) * .05); border: 1.5px solid rgba(143, 209, 26, .55);
  background: repeating-linear-gradient(45deg, rgba(143, 209, 26, .2) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, rgba(143, 209, 26, .14) 0 3px, transparent 3px 7px), #133516; }
.pcard .pc-back::after { content: "N"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 calc(var(--cw, 64px) * .38) / 1 var(--display); color: rgba(143, 209, 26, .75); }
.pcard[data-s].sel { outline: 3px solid var(--accent); outline-offset: 1px; }
.pcard[data-s].hint { box-shadow: 0 0 0 3px var(--gold), 0 6px 16px -4px rgba(0, 0, 0, .5); }