/* Checkers lobby/game screen — same "salon" look as duel-luxe.css, for checkers.html. Loaded last; markup and JS untouched.
 * Also fixes two layout bugs this page had on desktop:
 *   - play-redesign.css pads #game-fs-root by the height of ITS top bar (.play-topbar); this page has its own .ck-top instead, so a 50px dead band
 *     sat under the header and pushed the player cards out of view at the top of the board column;
 *   - the phone drawer handle (#mobHandle) leaked onto the desktop panel as bare unstyled text.
 */
:root {
  --cl-ink: #050a18;
  --cl-panel: linear-gradient(180deg, rgba(18, 31, 62, .8), rgba(8, 15, 34, .9));
  --cl-hair: rgba(226, 200, 132, .16);
  --cl-hair2: rgba(226, 200, 132, .4);
  --cl-gold: #e6c466;
  --cl-gold-grad: linear-gradient(180deg, #f6df94 0%, #e2bd5a 52%, #c89c3c 100%);
  --cl-serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --cl-dim: #9aa6bf;
}

html body {
  padding-top: 0 !important;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(54, 92, 164, .24), transparent 62%),
    radial-gradient(800px 520px at 100% 100%, rgba(226, 190, 100, .08), transparent 60%),
    var(--cl-ink) !important;
}
html #game-fs-root { padding-top: 0 !important; height: auto !important; flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; }
html .play-layout { height: auto !important; flex: 1 1 0 !important; min-height: 0 !important; background: transparent !important; }

/* ── top bar ── */
html .ck-top { background: rgba(5, 10, 24, .8) !important; backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--cl-hair) !important; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9); padding: 10px 22px !important; }
html .ck-logo { font-family: var(--cl-serif) !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: .01em !important; background: linear-gradient(180deg, #f6df94, #c89c3c) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html .ck-back { border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--cl-hair) !important; color: #cfd6e6 !important; padding: 7px 14px !important; }
html .ck-back:hover { border-color: var(--cl-hair2) !important; color: #fff !important; }

/* ── panels ── */
@media (min-width: 1100px) {
  html .lp { width: 310px !important; }
  html .rp { width: 400px !important; }
}
@media (min-width: 769px) {
  html #mobHandle { display: none !important; }
  html .lp, html .rp { background: transparent !important; border: 0 !important; }
  html .lp { padding: 22px 18px !important; gap: 16px !important; }
  html .rp { padding: 22px 22px 26px !important; }
  html .lp .lp-topbar { display: none !important; }
}

/* stats: three numbers in one lit card */
html .lp-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; padding: 18px 4px !important; border-radius: 22px !important; background: var(--cl-panel) !important; border: 1px solid var(--cl-hair) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 44px -24px #000 !important; position: relative; }
html .lp-stats::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 223, 148, .65), transparent); }
html .lp-stats .lp-stat-row { display: flex !important; flex-direction: column-reverse !important; align-items: center !important; gap: 6px !important; padding: 2px 4px !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html .lp-stats .lp-stat-row:nth-of-type(n+4) { display: none !important; }
html .lp-stats .lp-stat-row + .lp-stat-row { border-left: 1px solid var(--cl-hair) !important; }
html .lp-stats .lp-stat-val { font-family: var(--cl-serif) !important; font-size: 30px !important; font-weight: 700 !important; color: #f4efe4 !important; line-height: 1 !important; letter-spacing: -.01em; }
html .lp-stats .lp-stat-row:nth-of-type(1) .lp-stat-val { color: var(--cl-gold) !important; }
html .lp-stats .lp-stat-lbl { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; color: #8f9bb3 !important; white-space: nowrap; }

/* league progress: a quiet gold-edged card */
html #ckLeagueProgressBox { margin-top: 16px !important; padding: 16px 16px !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(230, 196, 102, .13), rgba(14, 24, 48, .8)) !important; border: 1px solid var(--cl-hair2) !important; }
html #ckLeagueProgressVal { font-family: var(--cl-serif); font-size: 22px !important; font-weight: 700 !important; color: #f4efe4; }
html #ckLeagueProgressRem { font-size: 12px !important; color: var(--cl-dim) !important; }
html #ckLeagueProgressBar { background: linear-gradient(90deg, #f6df94, #c89c3c) !important; }
html #ckLeagueProgressBox .ck-btn.gold { border-radius: 12px !important; background: var(--cl-gold-grad) !important; color: #1c1405 !important; border: 0 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 24px -12px rgba(230, 196, 102, .7) !important; }

/* captions and lists */
html #lpExtras > div { border-top: 1px solid var(--cl-hair) !important; margin-top: 18px !important; padding-top: 18px !important; }
html #lpExtras [data-i18n="daily_tasks"], html #lpExtras [data-i18n="pl_quick_act"], html #lpExtras [data-i18n="pl_top_players"] { font-size: 11px !important; letter-spacing: .14em !important; color: var(--cl-dim) !important; }
html .btn-ng-act { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--cl-hair) !important; border-radius: 14px !important; color: #e8e2d2 !important; font-size: 13px !important; font-weight: 600 !important; padding: 12px 10px !important; min-height: 48px; text-decoration: none; transition: background .18s, border-color .18s, transform .18s !important; }
html .btn-ng-act:hover { background: rgba(230, 196, 102, .09) !important; border-color: var(--cl-hair2) !important; transform: translateY(-1px); }

/* ── centre: players above the board ── */
html .board-col { gap: 14px !important; }
html .ck-pchip { border-radius: 18px !important; background: var(--cl-panel) !important; border: 1px solid var(--cl-hair) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 20px 40px -24px #000 !important; }
html .ck-pclock { font-family: var(--cl-serif) !important; font-weight: 700 !important; letter-spacing: -.01em; }
html .ck-vs { color: #7e8aa3 !important; font-weight: 700 !important; letter-spacing: .12em; }
html .ck-board-wrap { background: #0a1124 !important; border: 1px solid var(--cl-hair2) !important; border-radius: 20px !important; box-shadow: 0 0 0 9px rgba(8, 14, 32, .92), 0 0 0 10px var(--cl-hair), 0 50px 90px -34px #000, 0 0 110px -34px rgba(230, 196, 102, .3) !important; }
html .ck-status { color: var(--cl-dim) !important; }

/* ── right: the Play panel ── */
html .rp .main-tabs { gap: 4px !important; padding: 5px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--cl-hair) !important; margin-bottom: 22px !important; }
html .mtab { border-radius: 12px !important; border: 0 !important; background: transparent !important; color: #8f9bb3 !important; padding: 10px 4px !important; transition: background .18s, color .18s; }
html .mtab:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
html .mtab.active { color: #1c1405 !important; background: var(--cl-gold-grad) !important; box-shadow: 0 6px 16px -8px rgba(230, 196, 102, .85); }
html .mtab .tl { font-size: 11px !important; }

html .ng-wrap { gap: 18px !important; }
html .ng-header { text-align: left !important; }
html .ng-header h2 { font-family: var(--cl-serif) !important; font-size: 34px !important; font-weight: 700 !important; letter-spacing: -.014em; color: #f4efe4 !important; line-height: 1.08 !important; }
html .ng-header p { font-size: 14px !important; color: var(--cl-dim) !important; margin-top: 8px !important; }

html .btn-start-main { min-height: 66px !important; border-radius: 20px !important; border: 0 !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .02em; color: #1c1405 !important; background: var(--cl-gold-grad) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 24px 44px -18px rgba(230, 196, 102, .8) !important; position: relative; overflow: hidden; }
html .btn-start-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
html .btn-start-main:hover { filter: brightness(1.05); transform: translateY(-1px); }
html .btn-start-main:hover::after { transform: translateX(120%); }

/* the league lobby card: slim, outlined, secondary (its button must not compete with "find opponent") */
html .ck-league-lobby-card { margin-top: 6px !important; padding: 18px 18px !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(230, 196, 102, .13), rgba(14, 24, 48, .8)) !important; border: 1px solid var(--cl-hair2) !important; }
html .ck-league-lobby-card span:first-child { font-family: var(--cl-serif); font-size: 17px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cl-gold) !important; }
html .ck-league-lobby-card div { color: #cfd6e6 !important; }
html .ck-league-lobby-card .btn-start-main { min-height: 50px !important; border-radius: 14px !important; font-size: 14px !important; background: rgba(255, 255, 255, .06) !important; color: var(--cl-gold) !important; box-shadow: 0 0 0 1px var(--cl-hair2) inset !important; }
html .ck-league-lobby-card .btn-start-main:hover { background: rgba(230, 196, 102, .12) !important; }
html #ckLiveGamesSection { margin-top: 22px !important; }

@media (prefers-reduced-motion: reduce) { html .btn-start-main::after, html .btn-ng-act { transition: none !important; } }

/* DESKTOP BOARD, laid out like the league arena: the 3D board is frameless and fills the whole centre column; the player cards, the toolbar and the status / action
   buttons float over the empty bands above and below the (tilted) board instead of stacking around a square frame - that is where the height went. */
@media (min-width: 769px) {
  html:root { --bs: min(calc(100vw - 500px), calc(100vh - 300px), 780px); }
  html .board-col { position: relative !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
  html .ck-shell { position: absolute !important; inset: 0; display: block !important; }
  html .ck-zone-center { position: absolute !important; inset: 0; display: block !important; width: auto !important; }
  html .ck-board-wrap { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  html #ckBoard3D { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
  html .ck-zone-top, html .ck-zone-bottom { position: absolute !important; display: block !important; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 28px)) !important; max-width: none !important; z-index: 6; pointer-events: none; }
  html .ck-zone-top { top: 8px; }
  html .ck-zone-bottom { bottom: 6px; display: flex !important; align-items: center; justify-content: center; gap: 12px; }   /* status and buttons in one slim row under the board's letters */
  html .ck-zone-top .ck-pchip, html .ck-zone-bottom > * { pointer-events: auto; }
  html .ck-zone-bottom #ckStatus { margin: 0; white-space: nowrap; }
  html .ck-players { width: 100% !important; }
  /* compact cards: a long nick is cut with an ellipsis, never running into the clock */
  html .ck-pchip { min-width: 0; padding: 5px 14px !important; }
  html .ck-pav { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  html .ck-pchip #ckMeName, html .ck-pchip #ckOppName { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html .ck-pclock, html .ck-pav, html .ck-prat, html .ck-piece-count { flex-shrink: 0; }
  /* the toolbar: a slim icon column in the left gutter beside the board (labels hidden) */
  html #ckBoardToolbarSlot { position: absolute !important; left: 8px; top: 50%; transform: translateY(-50%); width: auto !important; max-width: none !important; z-index: 6; }
  html #ckToolbarRow .c3d-actions, html #ckToolbarRow .c3d-actions-popover { flex-direction: column !important; gap: 6px; }   /* the buttons sit in the inner popover box, that one is the row */
  html #ckToolbarRow .c3d-btn .label { display: none; }
  html #ckToolbarRow .c3d-btn { padding: 8px 9px; min-width: 36px; justify-content: center; }
}

/* full screen button + focus mode (computers) */
.ck-fs { display: none; }
@media (min-width: 769px) {
  html .ck-fs { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; z-index: 7; width: 36px; height: 36px; padding: 0; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--muted, #94a3b8); backdrop-filter: blur(6px); }
  html .ck-fs:hover { color: var(--cl-gold, #e6c466); border-color: rgba(230, 196, 102, .4); }
  html .ck-fs:focus-visible { outline: 2px solid var(--cl-gold, #e6c466); outline-offset: 2px; }
  html .ck-fs[hidden] { display: none; }
  html .ck-fs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html .ck-fs .ck-fs-off { display: none; }
  html.ck-focus .ck-fs .ck-fs-on { display: none; }
  html.ck-focus .ck-fs .ck-fs-off { display: block; }
  html.ck-focus .ck-top, html.ck-focus .lp, html.ck-focus .rp, html.ck-focus #mobileTopBar { display: none !important; }
  html.ck-focus body { min-height: 100vh; }
  html.ck-focus .play-layout { height: 100vh !important; }
  html.ck-focus .board-col { background: #02050c !important; }
  html.ck-focus .ck-zone-top, html.ck-focus .ck-zone-bottom { width: min(720px, calc(100% - 28px)) !important; }
}

/* ═══ Redesign pass — lobby hierarchy (same family as league.html / chess lobby) ═══
   Everything below is cosmetic: ids, classes and the board column sizing rules above are untouched. */
:root { --cl-gold-a: #f1d27a; --cl-gold-b: #b8860b; }

/* tabs: real labels instead of three bare icons (the ".tl" labels were hidden by the page's own rule) */
html .mtab .tl { display: block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; }
html .mtab .ti { display: none !important; }
html .mtab { min-height: 44px; justify-content: center; }
html .mtab:focus-visible, html .btn-ng-act:focus-visible, html .btn-start-main:focus-visible, html .ck-fs:focus-visible { outline: 2px solid #d4af37 !important; outline-offset: 2px; }

/* start screen: eyebrow rule above the serif title, calmer spacing */
html .ng-header h2::before { content: ''; display: block; width: 34px; height: 3px; border-radius: 3px; margin-bottom: 14px; background: linear-gradient(90deg, var(--cl-gold-a), var(--cl-gold-b)); }
html .ng-header h2 { text-wrap: balance; }

/* primary: one big gold action; private room / challenge: a quiet secondary pair (inline styles lose to !important) */
html .btn-start-main#findBtn { background: linear-gradient(135deg, var(--cl-gold-a), var(--cl-gold-b)) !important; }
html .ng-wrap > div[style*="display:flex"] { gap: 10px !important; margin-top: 0 !important; }
html .ng-wrap > div[style*="display:flex"] .btn-start-main { min-height: 52px !important; border-radius: 14px !important; font-size: 14px !important; letter-spacing: .01em; background: rgba(255, 255, 255, .05) !important; color: #efe7d2 !important; box-shadow: 0 0 0 1px var(--cl-hair2) inset !important; }
html .ng-wrap > div[style*="display:flex"] .btn-start-main:hover { background: rgba(230, 196, 102, .1) !important; color: #fff !important; }

/* league promo card: tag and title on one quiet line, no competing glow */
html .ck-league-lobby-card { position: relative; overflow: hidden; }
html .ck-league-lobby-card span:nth-child(2) { font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase; background: rgba(230, 196, 102, .12) !important; color: var(--cl-gold) !important; border: 1px solid var(--cl-hair2); }
html .ck-league-lobby-card > div:nth-child(2) { font-size: 13px !important; line-height: 1.5 !important; color: var(--cl-dim) !important; }

/* live list under the buttons */
html #ckLiveGamesSection { padding-top: 18px; border-top: 1px solid var(--cl-hair); }

@media (min-width: 769px) {
  /* left column: identity (rating) first, league progress second, then one compact actions row and the top list */
  html .lp { overflow-y: auto; scrollbar-width: thin; }
  html .lp-stats { padding: 16px 4px !important; }
  html .lp-stats .lp-stat-val { font-size: 28px !important; }
  html #ckLeagueProgressBox { margin-top: 14px !important; }
  html #lpExtras > div { margin-top: 16px !important; padding-top: 16px !important; }
  html #lpExtras .ng-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  html #lpExtras .btn-ng-act { min-height: 44px; padding: 8px 6px !important; font-size: 12.5px !important; }
  html #miniLeaderboard { gap: 6px !important; }
  html #miniLeaderboard .lp-stat-row { border-radius: 12px !important; background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--cl-hair) !important; }
  html #miniLeaderboard .lp-stat-row:first-child { border-color: var(--cl-hair2) !important; background: rgba(230, 196, 102, .08) !important; }
  html .lp-stat-val { font-variant-numeric: tabular-nums; }
  /* right column reads as one card column with a hairline separating it from the board */
  html .rp { border-left: 1px solid var(--cl-hair) !important; }
  html .main-tabs { margin-bottom: 26px !important; }
  /* board hero: calmer clocks tied to the board edge */
  html .ck-zone-top .ck-pchip { background: linear-gradient(180deg, rgba(18, 31, 62, .92), rgba(8, 15, 34, .94)) !important; backdrop-filter: blur(10px); }
  html .ck-pclock { font-variant-numeric: tabular-nums; font-size: 17px !important; }
  html .ck-zone-bottom .ck-btn { min-height: 40px; border-radius: 12px !important; }
  html .ck-zone-bottom .ck-btn.danger { border-color: rgba(239, 68, 68, .45) !important; }
}

@media (max-width: 768px) {
  html .mtab .tl { font-size: 12px !important; }
  html .ng-header h2 { font-size: 30px !important; }
  html .btn-start-main#findBtn { min-height: 60px !important; }
  html .ck-btn { min-height: 44px; }
}
/* the start screen scrolls instead of squashing its cards */
html .ng-wrap > * { flex-shrink: 0 !important; }
html .ng-wrap { overflow-y: auto; }
html .ck-league-lobby-card > div:first-child { flex-wrap: wrap; gap: 6px; }