/* Slave's play-page pattern: identity, match controls, then page navigation.
   Game art, board dimensions and the shared page-link skin remain untouched. */
/* The page menu and the settings gear are the collection's shared component,
   and both are left alone: the ☰ toggle and its dropdown are painted by
   site-menu.css, the ⚙ gear and its popup by play-menu.css, the same on this
   page as on every other game's table.  Repainting either here — the play
   header used to set its own --gm-base and --gm-surface, and later its own
   gear — made the one piece of chrome that is supposed to look identical
   everywhere look different on the page a player spends their time.  The
   rules below dress only what is Checker's own: the header row and the
   primary Play bot / New game button. */
body.checker-club.club-play .club-play-header {
  border:1px solid #e7ce9e33;border-radius:17px;
  background:linear-gradient(115deg,#172a3aec,#172033f5);
  box-shadow:0 8px 28px #030d1e38,inset 0 1px #fff0d307;
}
body.checker-club.club-play .club-header-inner {
  display:flex;align-items:center;flex-wrap:nowrap;justify-content:space-between;
  min-height:80px;padding:12px 14px;gap:18px;
}
body.checker-club.club-play .club-brand{flex:0 1 auto;min-width:0;margin-right:auto;gap:12px}
body.checker-club.club-play .club-brand .play-title{font-size:25px;white-space:nowrap}
body.checker-club.club-play .club-brand small{font-size:6px;white-space:nowrap}
body.checker-club.club-play .club-console{display:flex;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:20px}
body.checker-club.club-play .club-game-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:8px}
body.checker-club.club-play .club-game-actions .control-button {
  display:inline-flex;align-items:center;justify-content:center;flex:none;gap:8px;
  width:auto;min-width:44px;min-height:44px;height:44px;padding:10px 13px;
  border:1px solid #b0ced73d;border-radius:10px;background:#243b4e;color:#e3eef5;
  font:600 13px/1.3 Club,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer;
  transform:none;box-shadow:inset 0 1px #ffffff0a;
}
body.checker-club.club-play .club-game-actions .control-button--primary {
  background:linear-gradient(135deg,#f5d69a,#dfb365);border-color:#ffe4b2;color:#352b22;
  box-shadow:inset 0 1px #fff3cd77,0 3px 0 #9f794c55;
}
body.checker-club.club-play .club-game-actions .control-label{font:inherit;line-height:inherit}
body.checker-club.club-play .club-game-actions .control-button:hover{filter:brightness(1.09)}
/* The frame this used to draw is gone: the play page's menu is the shared
   play-menu component's, and that component's whole point is that a board's
   menu wears no box.  What is left here is the row itself. */
body.checker-club.club-play .play-page-menu{display:flex;align-items:center;flex-wrap:nowrap;gap:0;min-width:0}
body.checker-club.club-play .club-game-actions .control-button:focus-visible,
.match-confirm-dialog button:focus-visible{outline:2px solid #ffdda0;outline-offset:3px}
.match-confirm-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:28px;border:1px solid #e4c99877;border-radius:20px;background:linear-gradient(135deg,#253447,#172233);color:#f7e9d1;box-shadow:0 24px 80px #0008}
.match-confirm-dialog::backdrop{background:#050c1bc9;backdrop-filter:blur(5px)}
.match-confirm-mark{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:14px;background:#dec08614;border:1px solid #e7c48a44;color:#efd6a8;font-size:27px}
.match-confirm-dialog h2{font:600 24px/1.5 Club,sans-serif;margin:0 0 12px;letter-spacing:0}
.match-confirm-dialog p{font:400 14px/1.8 Club,sans-serif;color:#bccadb;margin:0 0 24px}
.match-confirm-actions{display:flex;gap:10px}
.match-confirm-actions button{flex:1;min-height:48px;border:1px solid #c5d2e03d;border-radius:10px;padding:10px 12px;font:600 13px/1.4 Club,sans-serif;color:#dce6f1;background:#2a3d51;cursor:pointer}
.match-confirm-actions .confirm-primary{color:#302b25;background:linear-gradient(135deg,#f4d899,#d9ac65);border-color:#f4dba0}
@media(max-width:1280px){
 body.checker-club.club-play .club-console{gap:14px}
}
@media(max-width:600px){
 body.checker-club.club-play .club-header-inner{min-height:66px;padding:10px;gap:10px}
 body.checker-club.club-play .club-brand{gap:8px}
 body.checker-club.club-play .club-brand .play-title{font-size:21px}
 body.checker-club.club-play .club-brand small,body.checker-club.club-play .club-mark{display:none}
 body.checker-club.club-play .club-console{gap:12px}
 body.checker-club.club-play .club-game-actions{gap:7px}
 body.checker-club.club-play .club-game-actions .control-button{padding:10px 12px;font-size:12px}
 body.checker-club.club-play .club-game-actions .control-button>span[aria-hidden]{display:none}
}
@media(max-width:370px){
 body.checker-club.club-play .club-header-inner{padding:9px 8px;gap:7px}
 body.checker-club.club-play .club-brand .play-title{font-size:18px}
 body.checker-club.club-play .club-console{gap:8px}
 body.checker-club.club-play .club-game-actions{gap:6px}
 body.checker-club.club-play .club-game-actions .control-button{font-size:11px;padding-inline:9px}
}
@media(orientation:landscape) and (max-height:600px){
 body.checker-club.club-play .club-header-inner{min-height:60px;padding-block:7px}
}