/* Pip & Wick board games (Cozy Checkers now; Star Hop and chess next), on top of style.css. The page is the
   slide puzzle's one-screen layout (.slide-app: head, status, stage, actions; More panel; level pills), so it
   never scrolls and goes board-left, controls-right when the screen is wide or on a TV.
   The board and the pieces are things on the table (a walnut frame, cream and evergreen squares, painted
   tokens): the fixed palette (--pw-*), the same in light and dark, like the slide puzzle's wooden tiles.
   Everything around them uses the brand roles, so it follows light and dark like the other pages.
   As the approved mockups (previews/games/checkers). */
:root {
  --gm-light: #EADBBC; --gm-dark: #2F5D50; --gm-frame: #6B4A33; --gm-frame-hi: #8A6446; --gm-frame-lo: #57392A;
  --gm-dot: color-mix(in srgb, var(--pw-cream) 88%, transparent); --gm-ring: var(--pw-honey);
  --gm-warn: var(--pw-cranberry);
}
:root[data-theme="dark"] { --gm-warn: #E2707C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gm-warn: #E2707C; } }

.gm-app [hidden] { display: none !important; }

/* status: who's playing (two chips, the one whose turn it is lit), a one-line narrator, the level pills */
.gm-status { display: grid; gap: 6px; align-items: stretch; }
.gm-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-who { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; border: 2px solid transparent;
  background: color-mix(in srgb, var(--card) 70%, transparent); min-width: 0; }
.gm-who.on { border-color: var(--pw-honey); background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.gm-who .gm-mini { width: 34px; height: 34px; flex: none; container-type: size; display: grid; place-items: center; }
.gm-who .gm-mini .gm-pc { width: 100%; height: 100%; }
.gm-who > div { min-width: 0; display: flex; flex-direction: column; }
.gm-who b { font: 600 16px/1.2 Fraunces, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-who small { color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-who.on small { color: var(--primary); font-weight: 600; }
.gm-say { margin: 0; font-size: 15px; line-height: 1.35; min-height: 2.7em; text-align: center; display: grid; place-items: center; }
.gm-say b { color: var(--primary); }
.gm-say em { font-style: normal; font-weight: 600; color: var(--gm-warn); }
.gm-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gm-app .gm-levels .btn { padding: 8px 4px; font-size: 14px; min-width: 0; white-space: nowrap; }
.gm-app.over .gm-levels { display: none; }

/* the board: as big as the stage allows (the stage is a size container) */
.gm-board {
  --side: min(100cqw, 100cqh, 760px);
  width: var(--side); height: var(--side); position: relative; display: grid; box-sizing: border-box;
  grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr));
  padding: calc(var(--side) * .028); border-radius: 14px; outline: none;
  background: linear-gradient(135deg, var(--gm-frame-hi), var(--gm-frame) 40%, var(--gm-frame-lo));
  box-shadow: 0 2px 0 rgba(255, 255, 255, .15) inset, 0 6px 18px rgba(0, 0, 0, .22);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.gm-board[data-busy="1"] .gm-sq { cursor: progress; }
.gm-sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
.gm-sq.l { background: var(--gm-light) radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 60%); }
.gm-sq.d { background: var(--gm-dark) radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .18), transparent 65%); cursor: pointer; }
.gm-sq.last::before, .gm-sq.sel::before, .gm-sq.hint::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.gm-sq.last::before { background: color-mix(in srgb, var(--pw-honey) 32%, transparent); }
.gm-sq.sel::before { background: color-mix(in srgb, var(--pw-honey) 55%, transparent); }
.gm-sq.hint::before { box-shadow: inset 0 0 0 5cqh var(--pw-cream), inset 0 0 0 10cqh var(--pw-honey); animation: gm-pulse 1.2s ease-in-out 3; }
/* where the picked-up piece can go: a soft dot */
.gm-sq.to::after { content: ""; position: absolute; z-index: 3; width: 32%; height: 32%; border-radius: 50%;
  background: var(--gm-dot); box-shadow: 0 0 0 3px var(--gm-ring); pointer-events: none; }
/* the remote's cursor (keys only, while the board has focus) */
body.keys .gm-board:focus .gm-sq.cur { z-index: 5; box-shadow: inset 0 0 0 4px var(--pw-cream), inset 0 0 0 9px var(--focus); }
body.tv .gm-board:focus .gm-sq.cur { box-shadow: inset 0 0 0 .5vh var(--pw-cream), inset 0 0 0 1.1vh var(--focus); }

/* pieces: a painted token (cream with a honey rim, or cranberry), the picture on it */
.gm-pc { position: relative; z-index: 2; width: 84%; height: 84%; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 6% 0 0 rgba(0, 0, 0, .28), 0 2cqh 5cqh rgba(0, 0, 0, .25), inset 0 -6cqh 0 rgba(0, 0, 0, .12), inset 0 3cqh 0 rgba(255, 255, 255, .35);
  transition: transform .18s ease-out; }
.gm-pc.a { background: radial-gradient(circle at 38% 30%, #FFFBF0, #F1E3C4 55%, #D9C196); border: 3cqh solid var(--pw-honey); }
.gm-pc.p { background: radial-gradient(circle at 38% 30%, #D35A68, #B23A48 55%, #8C2A36); border: 3cqh solid #6E1F2A; }
.gm-pc > span { width: 76%; height: 76%; background: center / contain no-repeat; }
.gm-pc.lift { transform: translateY(-7%) scale(1.08);
  box-shadow: 0 16% 10% -2% rgba(0, 0, 0, .35), inset 0 -6cqh 0 rgba(0, 0, 0, .12), inset 0 3cqh 0 rgba(255, 255, 255, .35); }
.gm-pc.wiggle { animation: gm-wiggle .45s ease-in-out; }
.gm-board.won { box-shadow: 0 0 0 4px var(--pw-honey), 0 0 28px 6px color-mix(in srgb, var(--pw-honey) 55%, transparent); animation: glow 1.6s ease-in-out 2; }
@keyframes gm-wiggle { 0%, 100% { translate: 0; } 20% { translate: -5% 0; rotate: -6deg; } 40% { translate: 5% 0; rotate: 6deg; } 60% { translate: -3% 0; } 80% { translate: 2% 0; } }
@keyframes gm-pulse { 50% { opacity: .35; } }

/* the tools under the board */
.gm-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.gm-tools { display: flex; justify-content: space-between; gap: 4px; }
.gm-tool { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 0; border-radius: 14px; color: var(--ink); font: 500 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer; padding: 4px 0; touch-action: manipulation; }
.gm-tool svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gm-tool[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); }
.gm-tool:disabled { opacity: .4; cursor: default; }
body.keys .gm-app .gm-tool:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the end of a game: the done panel takes the tools' place, the whole board stays in view */
.gm-done { --mascot-h: 52px; position: static; margin: 0; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-width: none; }
.gm-done h2 { margin: 0; font-size: 24px; }
.gm-done p { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.gm-done-actions { margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.gm-done-actions .btn { text-decoration: none; display: inline-flex; align-items: center; padding: 8px 12px; font-size: 14px; white-space: nowrap; }

/* sideways phones: everything in the side column, a bit tighter */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .gm-who { padding: 3px 8px; }
  .gm-who .gm-mini { width: 26px; height: 26px; }
  .gm-who b { font-size: 14px; }
  .gm-say { font-size: 13px; min-height: 0; }
  .gm-app .gm-levels .btn { min-height: 34px; padding: 4px 2px; font-size: 12px; }
  .gm-tool { min-height: 40px; font-size: 11px; }
  .gm-tool svg { width: 20px; height: 20px; }
  .gm-done { padding: 6px 10px; --mascot-h: 40px; }
  .gm-done h2 { font-size: 19px; }
  .gm-done p { font-size: 13px; }
  .gm-done-actions { margin-top: 6px; }
  .gm-done-actions .btn { min-height: 34px; padding: 4px 10px; font-size: 13px; }
}

/* TV (body.tv, from the app's tvplay.js): the board fills the height on the left, the rest in a side column.
   Sized in vh/vw, not px, so 960x540 CSS px (Fire TV) looks the same as 1920x1080. No text below 2.3vh: 12 CSS px
   at Fire TV's 960x540, readable from the sofa (the shared rule for the board games). */
body.tv .gm-app { grid-template: "stage head" auto "stage status" auto "stage actions" auto "stage ." minmax(0, 1fr)
                  / minmax(0, 1fr) 30vw; column-gap: 2.6vw; row-gap: 1.4vh; }
body.tv .gm-board { --side: min(100cqw, 100cqh); }
body.tv .gm-app .slide-head .brand { font-size: 2.3vh; padding: .4vh 0; }
body.tv .gm-app .slide-head h1 { font-size: 4vh; }
body.tv .gm-app .more summary { font-size: 2.4vh; min-height: 5vh; min-width: 0; padding: 1vh 1.8vh; }
body.tv .gm-app .more-panel { width: min(64vh, 92vw); padding: 2vh 2.4vh; border-radius: 2vh; }
body.tv .gm-app .more-panel .lede { font-size: 2.4vh; line-height: 1.45; margin-bottom: 1.6vh; }
body.tv .gm-app .more-toggles { gap: 1vh; }
body.tv .gm-app .more-toggles .btn { font-size: 2.3vh; min-height: 5vh; padding: 1vh 1.6vh; }
body.tv .gm-app .more-foot { font-size: 2.3vh; margin-top: 1.6vh; }
body.tv .gm-status { gap: 1.2vh; }
body.tv .gm-players { gap: 1vh; }
body.tv .gm-who { padding: 1vh 1.2vh; border-radius: 1.4vh; border-width: .35vh; gap: 1.2vh; }
body.tv .gm-who .gm-mini { width: 5.4vh; height: 5.4vh; }
body.tv .gm-who b { font-size: 2.9vh; }
body.tv .gm-who small { font-size: 2.3vh; }
body.tv .gm-say { font-size: 2.5vh; text-align: left; place-items: center start; min-height: 2.7em; }
body.tv .gm-levels { gap: .8vh; }
body.tv .gm-app .gm-levels .btn { font-size: 2.4vh; padding: 1.1vh .4vh; min-height: 5.4vh; }
body.tv .gm-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vh; }
body.tv .gm-tool { min-height: 8.5vh; font-size: 2.3vh; gap: .6vh; border-radius: 1.3vh; background: var(--card); }
body.tv .gm-tool svg { width: 3vh; height: 3vh; }
body.tv .gm-app .gm-tool:focus { background: var(--focus); color: var(--on-focus); outline: 4px solid var(--focus); outline-offset: 3px; }
body.tv .gm-done { padding: 1.4vh 1.8vh; }
body.tv .gm-done h2 { font-size: 3.4vh; }
body.tv .gm-done p { font-size: 2.4vh; }
body.tv .gm-done-actions { gap: .8vh; margin-top: 1.2vh; }
body.tv .gm-done-actions .btn { font-size: 2.3vh; min-height: 5.2vh; padding: .9vh 1.4vh; }

@media (prefers-reduced-motion: reduce) {
  .gm-pc { transition: none; }
  .gm-pc.wiggle, .gm-sq.hint::before, .gm-board.won { animation: none; }
}