/* Mivo Games leaderboard (partial games-board, games-board.js) and the game link / join boxes in the versus lobby.
   The board is a dark card like the game boards: gold, silver and bronze for the top three. */

/* Lobby: join a game link, share my game link */
.ga-join{margin-top:1rem;padding:1rem 1.1rem;border:1px solid #cfe3df;border-radius:1rem;background:#f2f8f7;font-size:.85rem;line-height:1.5;color:var(--mw-ink-2)}
.ga-join b{display:block;margin-bottom:.15rem;color:var(--mw-ink)}
.ga-join .mw-btn-block{margin-top:.9rem}
.ga-link{flex-basis:100%;display:grid;gap:.55rem}
.ga-link label{font:500 .72rem/1.2 var(--mw-font);color:var(--mw-ink-2)}
.ga-link-row{display:flex;gap:.5rem}
.ga-link-row .mw-in{flex:1;min-width:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.75rem;background:#f6f9f9}
.ga-link-share{display:flex;flex-wrap:wrap;gap:.5rem}
.ga-link-share .mw-btn{flex:1 1 9rem}
.ga-link .ga-hint{margin:0}
.ga-as-flg{font:1.05em/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;vertical-align:-.08em} /* flags.js, after "Playing as {nick}" */
.ga-opp-flg{font:1.05em/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;vertical-align:-.08em}
.ga-opp-flg-code{display:inline-grid;place-items:center;height:1.3em;padding:0 .35em;border-radius:.35em;background:#e4efed;font:600 .62rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#3f6e6a;vertical-align:.05em}
/* Four in a Row versus: the race lanes become a "You vs {name}" line (no progress: it's turn by turn) */
.ga-race.ga-race-four{display:flex;justify-content:center;align-items:center;gap:.75rem}
.ga-race-four .ga-lane{display:block;font-size:.85rem}
.ga-race-four .ga-lane i{display:none}
.ga-race-four .ga-lane-opp::before{content:"vs";margin-right:.75rem;font-weight:400;color:var(--mw-ink-3)}
.ga-as-flg-code{display:inline-grid;place-items:center;height:1.3em;padding:0 .35em;border-radius:.35em;background:#e4efed;font:600 .68rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#3f6e6a;vertical-align:.05em}

/* The card */
.gb{--gb-ink:#e9eef6;--gb-dim:#93a1b5;--gb-line:rgba(255,255,255,.08);--gold:#f6c64f;--silver:#c8d2e0;--bronze:#e69a5c;--on:#3ddc84;--busy:#f4b740;
  margin-top:3rem;padding:1.4rem 1.1rem 1.2rem;border:1px solid rgba(255,255,255,.06);border-radius:1.75rem;background:radial-gradient(120% 70% at 50% 0,#17263f 0,#0c1424 58%,#0a101c 100%);color:var(--gb-ink);box-shadow:0 40px 80px -40px rgba(10,16,28,.8)}
.gb-head{display:flex;align-items:center;gap:.9rem}
.gb-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4b4fd8,#2a2c8c);color:#c9ccff}
.gb-ic svg{width:26px;height:26px}
.gb-titles{flex:1;min-width:0}
.gb-titles h3{font:600 1.35rem/1.15 var(--mw-font);letter-spacing:-.01em;color:#fff}
.gb-titles p{margin-top:.2rem;font-size:.85rem;color:var(--gb-dim)}
.gb-live{display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.45rem .85rem;border:1px solid rgba(61,220,132,.25);border-radius:999px;background:rgba(61,220,132,.08);font:500 .78rem/1 var(--mw-font);color:#bff3d6}
.gb-live i{width:8px;height:8px;border-radius:50%;background:var(--on);box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:gb-pulse 2s infinite}
.gb-games{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--gb-line)}
.gb-games button,.gb-views button{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border:1px solid var(--gb-line);border-radius:999px;font:500 .8rem/1.1 var(--mw-font);color:var(--gb-dim);transition:background .2s,color .2s,border-color .2s}
.gb-games svg{width:15px;height:15px}
.gb-games button:hover,.gb-views button:hover{color:#fff}
.gb-games [aria-selected=true],.gb-views [aria-selected=true]{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.gb-body{display:grid;gap:1.25rem;margin-top:1.25rem}
.gb-main,.gb-side{min-width:0}

/* Podium: 2 · 1 · 3 */
.gb-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:.4rem;margin:0;padding:.5rem 0 0;list-style:none}
.gb-pod{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem .25rem .9rem;border-radius:1.1rem;text-align:center;--c:var(--silver)}
.gb-pod1{--c:var(--gold);padding-top:0;background:linear-gradient(180deg,rgba(246,198,79,.10),rgba(246,198,79,0) 75%)}
.gb-pod3{--c:var(--bronze)}
.gb-crown svg{display:block;width:30px;height:20px;fill:var(--c);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.gb-pod1 .gb-crown svg{width:38px;height:25px}
.gb-ring{position:relative;padding:3px;border:3px solid var(--c);border-radius:50%;box-shadow:0 0 24px -6px var(--c)}
.gb-av{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,hsl(var(--h,200) 55% 52%),hsl(calc(var(--h,200) + 40) 60% 36%));font:600 .8rem/1 var(--mw-font);color:#fff;letter-spacing:.02em}
.gb-av-big{width:64px;height:64px;font-size:1.25rem}
.gb-pod1 .gb-av-big{width:80px;height:80px;font-size:1.5rem}
.gb-badge{position:absolute;left:50%;bottom:-11px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);transform:translateX(-50%);font:700 .75rem/1 var(--mw-font);color:#1a1f2b;box-shadow:0 0 0 3px #0e1729}
.gb-dot{position:absolute;right:2px;bottom:4px;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 3px #0e1729}
.gb-dot.gb-online{background:var(--on)}.gb-dot.gb-playing{background:var(--busy)}
.gb-pname{max-width:100%;margin-top:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .9rem/1.2 var(--mw-font);color:#fff}
.gb-ppts{font:500 .85rem/1 var(--mw-font);color:var(--gb-dim)}
.gb-pod1 .gb-ppts{color:var(--gold)}

/* Invite card */
.gb-invite{display:grid;gap:.85rem;margin-top:1rem;padding:1rem 1.1rem;border:1px solid var(--gb-line);border-radius:1.1rem;background:rgba(255,255,255,.03)}
.gb-invite p{font-size:.82rem;line-height:1.55;color:var(--gb-dim)}
.gb-invite b{display:block;margin-bottom:.15rem;font-weight:600;color:#fff}
.gb-invite .mw-btn{justify-self:start}

/* Table */
.gb-views{display:flex;gap:.4rem}
.gb-n{color:var(--on)}
/* Phones: rank, avatar (status as a dot on it), name, points, Play */
.gb-cols,.gb-row{display:grid;grid-template-columns:1.3rem 34px minmax(0,1fr) auto auto;align-items:center;gap:.55rem}
.gb-cols{margin-top:1rem;padding:0 .55rem .55rem;border-bottom:1px solid var(--gb-line);font:500 .72rem/1 var(--mw-font);color:var(--gb-dim)}
.gb-cols span:nth-child(2){grid-column:2/4}
.gb-cols span:nth-child(3){text-align:right}
.gb-cols span:nth-child(4),.gb-row .gb-st{display:none}
.gb-row .gb-av{position:relative}
.gb-row .gb-s-online::after,.gb-row .gb-s-playing::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--on);box-shadow:0 0 0 2px #0c1424}
.gb-row .gb-s-playing::after{background:var(--busy)}
.gb-online-view .gb-cols span:first-child{visibility:hidden}
.gb-list{margin:0;padding:0;list-style:none}
.gb-row{min-height:58px;padding:.5rem .55rem;border-bottom:1px solid var(--gb-line);border-radius:.8rem;transition:background .2s}
.gb-row:hover{background:rgba(255,255,255,.03)}
.gb-mine{background:rgba(75,79,216,.16)}
.gb-rank{font:600 .9rem/1 var(--mw-font);color:var(--gb-dim)}
.gb-who{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.gb-name{display:flex;align-items:center;gap:.45rem;min-width:0;overflow:hidden;font:500 .92rem/1.2 var(--mw-font);color:#fff;white-space:nowrap;text-overflow:ellipsis}
.gb-you{flex:none;padding:.15rem .45rem;border-radius:999px;background:rgba(201,204,255,.15);font:600 .6rem/1.2 var(--mw-font);letter-spacing:.06em;text-transform:uppercase;color:#c9ccff}
.gb-who small{overflow:hidden;font-size:.7rem;color:var(--gb-dim);white-space:nowrap;text-overflow:ellipsis}
.gb-who small:empty{display:none}
.gb-pts{text-align:right;font:600 .92rem/1 var(--mw-font);font-variant-numeric:tabular-nums}
.gb-st{display:flex;align-items:center;justify-content:center}
.gb-st i{width:10px;height:10px;border-radius:50%;background:#55627a}
.gb-st.gb-online i{background:var(--on);box-shadow:0 0 10px rgba(61,220,132,.6)}
.gb-st.gb-playing i{background:var(--busy)}
.gb-st-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gb-act{display:flex;justify-content:flex-end}
.gb-play{padding:.42rem .85rem;border-radius:999px;background:var(--on);font:600 .75rem/1 var(--mw-font);color:#06210f;transition:transform .15s,background .2s}
.gb-play:hover:not(:disabled){transform:translateY(-1px);background:#5fe89b}
.gb-play:disabled{opacity:.4;cursor:default}
.gb-empty{padding:1.5rem .6rem;font-size:.85rem;line-height:1.6;color:var(--gb-dim)}
.gb-me{margin-top:.6rem}
.gb-me-label{display:block;padding:.3rem .55rem;font:500 .7rem/1 var(--mw-font);text-transform:uppercase;letter-spacing:.12em;color:var(--gb-dim)}
.gb-note{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--gb-line);font-size:.75rem;line-height:1.6;color:var(--gb-dim)}

/* Flags (opt-in): the emoji, or the country code on a badge where the device has no flag emoji */
.gb-flg{flex:none;font:1.05em/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.gb-flg-code{display:inline-grid;place-items:center;height:1.2rem;padding:0 .3rem;border-radius:.3rem;background:rgba(255,255,255,.1);font:600 .6rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#dbe3ef}
.gb-pname{display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.gb-flag{position:relative;display:flex;align-items:flex-start;gap:.75rem;margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--gb-line);border-radius:1.1rem;cursor:pointer}
.gb-flag input{position:absolute;width:1px;height:1px;opacity:0}
.gb-switch{position:relative;flex:none;width:40px;height:22px;margin-top:.1rem;border-radius:999px;background:#2b3648;transition:background .2s}
.gb-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.gb-flag input:checked+.gb-switch{background:var(--on)}
.gb-flag input:checked+.gb-switch::after{transform:translateX(18px)}
.gb-flag input:focus-visible+.gb-switch{outline:2px solid #c9ccff;outline-offset:2px}
.gb-flag input:disabled+.gb-switch{opacity:.6}
.gb-flag-tx{display:grid;gap:.25rem}
.gb-flag-tx b{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font:500 .85rem/1.3 var(--mw-font);color:#fff}
.gb-flag-tx small{font-size:.72rem;line-height:1.5;color:var(--gb-dim)}

@media (min-width:640px){
  .gb{padding:1.8rem 1.8rem 1.4rem}
  .gb-cols,.gb-row{grid-template-columns:2rem 40px minmax(0,1fr) 4.5rem 6.5rem 4.6rem;gap:.65rem}
  .gb-cols span:nth-child(4){display:block;grid-column:5/7}
  .gb-row .gb-st{display:flex}
  .gb-row .gb-av::after{display:none}
  .gb-av{width:40px;height:40px}
  .gb-st{justify-content:flex-start;gap:.5rem}
  .gb-st-tx{position:static;width:auto;height:auto;clip:auto;font-size:.78rem;color:var(--gb-dim)}
  .gb-pod{padding-inline:.5rem}
  .gb-av-big{width:76px;height:76px;font-size:1.4rem}
  .gb-pod1 .gb-av-big{width:96px;height:96px;font-size:1.75rem}
}
@media (min-width:1024px){
  .gb-body{grid-template-columns:minmax(18rem,.8fr) 1.2fr;gap:2.5rem;align-items:start}
  .gb-games{margin-left:auto}
}
@media (max-width:380px){.gb-live span{display:none}.gb-live{padding:.45rem}}
@keyframes gb-pulse{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@media (prefers-reduced-motion:reduce){.gb-live i{animation:none}}