/* ════════════════════════════════════════════════════════════════════════════════════
   CHECKERS vs BOT — its own world.
   Emerald felt table with a faint checker pattern, mint light, round "disc" players, bold geometric type.
   (Chess is walnut + gold + serif. The two games never share a look.)
   Scoped to #ckGameWrap and the checkers state of the setup screen.
   ════════════════════════════════════════════════════════════════════════════════════ */
#ckGameWrap, #setup[data-game="checkers"] {
  --ck-felt: #0a3a2b; --ck-felt-lo: #04170f; --ck-mint: #6ee7b7; --ck-em: #10a56b; --ck-line: rgba(110,231,183,.18);
  --ck-red: #ef5a45; --ck-ivory: #f4ecd8;
  font-family: 'Jost', system-ui, sans-serif;
}
#ckGameWrap, #setup[data-game="checkers"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 1  0 0 0 0 .8  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    conic-gradient(rgba(255,255,255,.028) 25%, transparent 0 50%, rgba(255,255,255,.028) 0 75%, transparent 0) 0 0 / 120px 120px,
    radial-gradient(ellipse 82% 76% at 50% 46%, var(--ck-felt) 0%, var(--ck-felt) 52%, #05231a 82%, var(--ck-felt-lo) 100%);
}

/* ───────────────────────────── setup screen ───────────────────────────── */
#setup[data-game="checkers"] .setup-inner h1 { font-family: 'Jost', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(22px, 3.2vw, 32px); }
#setup[data-game="checkers"] .gt-badge { display: inline-flex; align-items: center; margin-left: 12px; padding: 4px 14px; border-radius: 99px; vertical-align: middle;
  font: 800 12px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #04150e; background: linear-gradient(180deg, #8df0c3, #10a56b); box-shadow: 0 8px 18px -8px rgba(52,211,153,.8);
  -webkit-text-fill-color: #04150e; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: none; filter: none; }
#setup[data-game="checkers"] .ckb-grid { gap: 16px; }
#setup[data-game="checkers"] .ckb-card { border-radius: 30px; border: 1px solid var(--ck-line); padding-top: 22px;
  background: linear-gradient(180deg, rgba(10,58,42,.78), rgba(4,22,16,.94));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 22px 36px -24px rgba(0,0,0,.95);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease; }
#setup[data-game="checkers"] .ckb-card:hover { transform: translateY(-5px); border-color: rgba(110,231,183,.55); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 30px 46px -22px rgba(0,0,0,1), 0 0 38px -14px rgba(52,211,153,.55); }
#setup[data-game="checkers"] .ckb-card.sel { border-color: rgba(141,240,195,.9); background: linear-gradient(180deg, rgba(16,120,84,.5), rgba(4,22,16,.94));
  box-shadow: 0 0 0 1px rgba(141,240,195,.45), 0 26px 44px -20px rgba(52,211,153,.6), 0 1px 0 rgba(255,255,255,.14) inset; }
#setup[data-game="checkers"] .ckb-av { width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), rgba(16,165,107,.28) 55%, rgba(4,22,16,.9));
  box-shadow: 0 0 0 3px rgba(4,22,16,.9), 0 0 0 5px rgba(110,231,183,.5), 0 12px 22px -8px rgba(0,0,0,.8); }
#setup[data-game="checkers"] .ckb-name { font: 800 17px/1.1 'Jost', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
#setup[data-game="checkers"] .ckb-elo { font-variant-numeric: tabular-nums; color: var(--ck-mint); }
#setup[data-game="checkers"] .setup-mode-bar, #setup[data-game="checkers"] .btn-tut { border-color: var(--ck-line); }
#setup[data-game="checkers"] .btn-go.checkers { font: 800 16px/1 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; min-height: 56px; }

/* ───────────────────────────── game screen, desktop arena ───────────────────────────── */
@media (min-width: 901px) {
  body:has(#ckGameWrap:not(.hidden)) .bnav { display: none !important; }

  #ckGameWrap .bot-layout { display: grid; grid-template-columns: clamp(290px, 21vw, 380px) minmax(0, 1fr) clamp(290px, 21vw, 380px); gap: 0; align-items: stretch; }

  /* — left rail: the two players as big checker discs — */
  #ckGameWrap .bot-left { width: auto; display: flex; flex-direction: column; gap: 16px; padding: 28px 22px 24px; background: none; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
  #ckGameWrap #ckDiffLbl { display: none; }
  #ckGameWrap .bot-left .ps2 { order: 1; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "av info" "av meta"; column-gap: 16px; row-gap: 4px; align-items: center;
    width: auto !important; padding: 18px; border-radius: 30px; border: 1px solid var(--ck-line);
    background: linear-gradient(160deg, rgba(14,76,56,.88), rgba(4,24,17,.96)); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 26px 40px -26px rgba(0,0,0,.98);
    position: relative; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  #ckGameWrap .bot-left .ps2.on-turn { border-color: rgba(141,240,195,.85); box-shadow: 0 0 0 1px rgba(141,240,195,.35), 0 26px 40px -26px rgba(0,0,0,.98), 0 0 46px -12px rgba(52,211,153,.65); transform: translateY(-2px); }
  #ckGameWrap .ps2-av { grid-area: av; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; flex-shrink: 0; overflow: hidden;
    box-shadow: inset 0 0 0 7px rgba(0,0,0,.14), inset 0 0 0 9px rgba(255,255,255,.14), 0 0 0 3px rgba(4,22,16,.95), 0 0 0 5px rgba(255,255,255,.18), 0 16px 26px -10px rgba(0,0,0,.9); }
  #ckGameWrap #ckBotAv { background: radial-gradient(circle at 34% 28%, #ff8a73, #c0392b 55%, #6e1a12) !important; }
  #ckGameWrap #ckPlAv { background: radial-gradient(circle at 34% 28%, #fffaf0, #e4d8bd 55%, #b9aa88) !important; color: #3a2e18; font-weight: 800; }
  #ckGameWrap .ps2-info { grid-area: info; min-width: 0; align-self: end; }
  #ckGameWrap .ps2-name { font: 800 20px/1.05 'Jost', sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ckGameWrap .ps2-sub { font: 600 13px/1.2 'Jost', sans-serif; color: rgba(255,255,255,.58); letter-spacing: .03em; }
  #ckGameWrap .ps2 .ck-turn-dot { display: inline-block; grid-area: meta; justify-self: start; align-self: start; width: 9px; height: 9px; margin-top: 8px; }
  #ckGameWrap .ps2 .ck-piece-count { display: inline-block; grid-area: meta; justify-self: end; align-self: start; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--ck-line);
    background: rgba(0,0,0,.32); font: 800 12px/1.3 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-mint); font-variant-numeric: tabular-nums; }

  /* "VS" medallion between the two cards */
  #ckGameWrap #ckPlStrip { order: 3; margin-top: 20px; }
  #ckGameWrap #ckPlStrip::before { content: 'VS'; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font: 900 13px/1 'Jost', sans-serif; letter-spacing: .08em; color: #04150e; background: linear-gradient(180deg, #8df0c3, #10a56b); box-shadow: 0 0 0 4px rgba(4,23,15,.95), 0 10px 18px -6px rgba(52,211,153,.7); }

  /* camera / view controls become a tidy 2x2 grid of pills */
  #ckGameWrap #ckToolbarRow { order: 4; display: block; width: auto; margin-top: 4px; }
  #ckGameWrap #ckToolbarRow .c3d-actions { display: block !important; width: 100%; }
  #ckGameWrap #ckToolbarRow .c3d-more-btn { display: none !important; }
  #ckGameWrap #ckToolbarRow .c3d-actions-popover { display: grid !important; position: static !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; opacity: 1 !important; visibility: visible !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  #ckGameWrap #ckToolbarRow .c3d-btn { width: 100% !important; height: auto !important; min-height: 46px; border-radius: 99px; border: 1px solid var(--ck-line); background: rgba(110,231,183,.08); color: #e8fff4;
    font: 700 13px/1 'Jost', sans-serif; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s ease, border-color .2s ease; }
  #ckGameWrap #ckToolbarRow .c3d-btn:hover { background: rgba(110,231,183,.18); border-color: rgba(110,231,183,.55); }
  #ckGameWrap #ckToolbarRow .c3d-status { display: none; }

  /* resign / new game live in the right rail; the left keeps only "home" at the bottom */
  #ckGameWrap .bot-left .tbtns { order: 9; margin-top: auto; padding: 0; gap: 0; }
  #ckGameWrap .bot-left .tbtns .tbtn:not([href]) { display: none; }
  #ckGameWrap .bot-left .tbtns a.tbtn { min-height: 46px; border-radius: 99px; font: 700 14px/1 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; justify-content: center;
    background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.8) !important; }
  #ckGameWrap .bot-left .tbtns a.tbtn:hover { background: rgba(255,255,255,.1) !important; }

  /* — centre: the board sits straight on the felt, as large as the screen allows — */
  #ckGameWrap .bot-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 18px; min-width: 0; overflow: visible; }
  #ckGameWrap .ck-board-outer { width: min(calc(100vh - 150px), 100%, 980px); margin: 0 auto; }
  #ckGameWrap .ck-board-wrap { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; filter: none; border-radius: 0; overflow: visible; box-shadow: none; }
  #ckGameWrap #ckBoard3D { border-radius: 0 !important; box-shadow: none !important; }
  #ckGameWrap #ckSbar { order: -1; margin: 0; padding: 0 26px; min-height: 46px; display: inline-flex; align-items: center; border-radius: 99px; width: auto !important;
    font: 800 15px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #eafff5;
    background: linear-gradient(180deg, rgba(16,120,84,.85), rgba(6,52,36,.95)); border: 1px solid rgba(141,240,195,.5); box-shadow: 0 14px 26px -12px rgba(52,211,153,.55), 0 1px 0 rgba(255,255,255,.14) inset; }
  #ckGameWrap #ckSbar:not(.myturn) { color: rgba(255,255,255,.7); background: linear-gradient(180deg, rgba(60,30,26,.8), rgba(30,16,14,.95)); border-color: rgba(239,90,69,.45); box-shadow: 0 14px 26px -12px rgba(239,90,69,.35), 0 1px 0 rgba(255,255,255,.1) inset; }

  /* — right rail: actions on top (clear of the corner mascot), then the move list — */
  #ckGameWrap #ckRightPanel { width: auto; display: flex; flex-direction: column; gap: 14px; padding: 28px 22px 24px; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  #ckGameWrap #ckRightPanel .rpanel-foot { order: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border: 0; background: none; }
  #ckGameWrap #ckRightPanel .rpanel-foot .btn { min-height: 50px; border-radius: 99px; font: 800 14px/1 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; width: 100%; }
  #ckGameWrap #ckRightPanel .rpanel-foot .btn-ghost { background: rgba(239,90,69,.1); border: 1px solid rgba(239,90,69,.5); color: #ffb3a6; }
  #ckGameWrap #ckRightPanel .rpanel-foot .btn-ghost:hover { background: rgba(239,90,69,.22); }
  #ckGameWrap #ckRightPanel .rpanel-foot .btn-danger { background: linear-gradient(180deg, #8df0c3, #10a56b); color: #04150e; border: 0; box-shadow: 0 14px 26px -12px rgba(52,211,153,.7); }
  #ckGameWrap #ckRightPanel .rpanel-head { order: 1; padding: 6px 4px 0; border: 0; background: none; }
  #ckGameWrap .rpanel-title { font: 800 14px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-mint); }
  #ckGameWrap .rpanel-badge { border-radius: 99px; border: 1px solid var(--ck-line); background: rgba(0,0,0,.3); color: var(--ck-mint); font: 800 11px/1 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; }
  #ckGameWrap #ckMovesList { order: 2; flex: 1; min-height: 0; border-radius: 26px; border: 1px solid var(--ck-line); padding: 12px 14px;
    background: linear-gradient(180deg, rgba(8,48,34,.75), rgba(3,18,13,.92)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; scrollbar-width: thin; scrollbar-color: rgba(110,231,183,.3) transparent; }
  #ckGameWrap .ck-movehist-row { padding: 7px 8px; border-radius: 12px; font: 600 14px/1.2 'Jost', sans-serif; align-items: center; gap: 10px; }
  #ckGameWrap .ck-movehist-row:nth-child(odd) { background: rgba(255,255,255,.035); }
  #ckGameWrap .ck-movehist-num { color: rgba(255,255,255,.4); width: 26px; font-variant-numeric: tabular-nums; }
  #ckGameWrap .ck-movehist-dot { width: 12px; height: 12px; margin-top: 0; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
  #ckGameWrap .ck-movehist-mv { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  #ckGameWrap .ck-movehist-mv.cap { color: #ffb3a6; }
  #ckGameWrap .ck-movehist-empty { padding: 26px 8px; font: 600 13px/1.4 'Jost', sans-serif; color: rgba(255,255,255,.4); }
}

/* ───────────────────────────── game screen, phone ───────────────────────────── */
@media (max-width: 900px) {
  #ckGameWrap .ps2 { border-radius: 99px; border: 1px solid var(--ck-line); background: linear-gradient(90deg, rgba(10,62,44,.92), rgba(4,22,16,.96)); }
  #ckGameWrap .ps2-av { border-radius: 50%; box-shadow: 0 0 0 2px rgba(4,22,16,.9), 0 0 0 4px rgba(110,231,183,.55); }
  #ckGameWrap #ckBotAv { background: radial-gradient(circle at 34% 28%, #ff8a73, #c0392b 55%, #6e1a12) !important; }
  #ckGameWrap #ckPlAv { background: radial-gradient(circle at 34% 28%, #fffaf0, #e4d8bd 55%, #b9aa88) !important; color: #3a2e18; }
  #ckGameWrap .ps2-name { font: 800 15px/1.1 'Jost', sans-serif; letter-spacing: .03em; }
  #ckGameWrap .ps2.on-turn { border-color: rgba(141,240,195,.8); box-shadow: 0 0 0 1px rgba(141,240,195,.35), 0 0 28px -8px rgba(52,211,153,.6); }
  #ckGameWrap .ck-board-wrap { border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(110,231,183,.25), 0 30px 50px -24px rgba(0,0,0,.9); }
}