/* =========================================================================================
   v2.5 "Games with friends" (public/games/board/friends-kit.mjs and the twelve game modules): the shared bits
   (the curtain between turns, player lists, score lines, Ready) and each game's board. Loaded on these twelve
   pages only, after games.css and games-skin.css (board kit classes .gb-* come from there). Light theme is the
   default; dark overrides are grouped at the end. No sizes change with the skin.
   ========================================================================================= */
.gb-fr { --fr-blue: #2F6ED6; --fr-red: #D8433A; --fr-green: #2E9A57; --fr-yellow: #E3AA1E; --fr-purple: #7A4BD6; --fr-orange: #E8762B; --fr-teal: #1D9E95; --fr-pink: #D6479A; --fr-ink: #1B1E2B; --fr-cream: #FFF7E8; --fr-wood: #E9D7B5; --fr-wood-d: #B98C5B; }
.gb-fr .gb-chip-blue { background: var(--fr-blue); border-color: #183A73; } .gb-fr .gb-chip-red { background: var(--fr-red); border-color: #7E1F19; }
.gb-fr .gb-chip-green { background: var(--fr-green); border-color: #17512D; } .gb-fr .gb-chip-yellow { background: var(--fr-yellow); border-color: #8A6A0C; }
.gb-fr .gb-chip-purple { background: var(--fr-purple); border-color: #3E2470; } .gb-fr .gb-chip-orange { background: var(--fr-orange); border-color: #7A3A10; }
.gb-fr .gb-chip-teal { background: var(--fr-teal); border-color: #0E524D; } .gb-fr .gb-chip-pink { background: var(--fr-pink); border-color: #6E1F4E; }
.gb-fr .gb-chip-x { background: var(--fr-red); border-color: #7E1F19; } .gb-fr .gb-chip-o { background: var(--fr-blue); border-color: #183A73; }
.gb-fr .gb-die-blue { --die-c: var(--fr-blue); } .gb-fr .gb-die-red { --die-c: var(--fr-red); } .gb-fr .gb-die-green { --die-c: var(--fr-green); } .gb-fr .gb-die-yellow { --die-c: var(--fr-yellow); }
.gb-fr .gb-die-white { --die-c: #9A9A9A; } .gb-fr .gb-die-black { --die-c: var(--fr-ink); }
/* the curtain between turns on one device (hidden hands, ships, cards) */
.fk-curtain { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); text-align: center; }
.fk-curtain[hidden] { display: none; }
.fk-curtain-t { font: 800 20px/1.25 var(--font-display, var(--font)); }
.fk-ready { width: 100%; max-width: 320px; margin: 4px auto 0; }
.fk-players { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.fk-player { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 15px; background: var(--surface-2); }
.fk-player.is-turn { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); font-weight: 700; }
.fk-score { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font-size: 15px; font-weight: 650; }
.fk-score-p { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.fk-score-p.is-turn { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.gb-fr .gb-stage button { font-family: inherit; }
.gb-fr .gb-stage button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 3; }

/* ---------- Tic Tac Toe ---------- */
.fk-ttt { position: absolute; inset: 0; display: grid; gap: 4%; padding: 3%; border-radius: 14px; background: var(--fr-ink); }
.fk-ttt-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fk-ttt-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5%; padding: 2.5%; }
.fk-ttt-cell { display: grid; place-items: center; min-width: 0; border: 0; border-radius: 10px; background: var(--fr-cream); color: var(--fr-red); font: 900 calc(var(--gb-size) * .18) / 1 var(--font-display, var(--font)); cursor: pointer; touch-action: manipulation; transition: background .15s; }
.fk-ttt-5 .fk-ttt-cell { font-size: calc(var(--gb-size) * .11); border-radius: 8px; }
.fk-ttt-cell.is-o { color: var(--fr-blue); }
.fk-ttt-cell:disabled { cursor: default; }
.fk-ttt-cell:not(:disabled):hover { background: #FFF1D0; }
.fk-ttt-cell.is-win { background: #FFE8A3; box-shadow: inset 0 0 0 3px var(--fr-yellow); }

/* ---------- Dots and Boxes ---------- */
.fk-db { --gap: calc(var(--gb-size) / (var(--d) - 1 + .7)); position: absolute; inset: 0; margin: calc(var(--gap) * .35); }
.fk-db-dot { position: absolute; left: calc(var(--c) * var(--gap)); top: calc(var(--r) * var(--gap)); width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--fr-ink); z-index: 2; pointer-events: none; }
.fk-db-line { position: absolute; z-index: 1; border: 0; border-radius: 6px; background: transparent; cursor: pointer; touch-action: manipulation; padding: 0; }
.fk-db-line.is-h { left: calc(var(--c) * var(--gap) + 7px); top: calc(var(--r) * var(--gap) - 7px); width: calc(var(--gap) - 14px); height: 14px; }
.fk-db-line.is-v { left: calc(var(--c) * var(--gap) - 7px); top: calc(var(--r) * var(--gap) + 7px); width: 14px; height: calc(var(--gap) - 14px); }
.fk-db-line::after { content: ""; position: absolute; inset: 4px; border-radius: 4px; background: var(--line); opacity: .55; transition: background .12s, opacity .12s; }
.fk-db-line:not(:disabled):hover::after, .fk-db-line:focus-visible::after { background: var(--accent); opacity: .8; }
.fk-db-line.is-on::after { background: var(--fr-ink); opacity: 1; inset: 3px; }
.fk-db-line:disabled { cursor: default; }
.fk-db-box { position: absolute; left: calc(var(--c) * var(--gap) + 8px); top: calc(var(--r) * var(--gap) + 8px); width: calc(var(--gap) - 16px); height: calc(var(--gap) - 16px); display: grid; place-items: center; border-radius: 8px; color: #fff; font: 800 calc(var(--gap) * .4) / 1 var(--font-display, var(--font)); }
.fk-db-box.is-blue { background: var(--fr-blue); } .fk-db-box.is-red { background: var(--fr-red); }

/* ---------- Mancala ---------- */
.fk-mc { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; width: 100%; padding: 12px; border-radius: 22px; background: var(--fr-wood); box-shadow: inset 0 0 0 3px var(--fr-wood-d), 0 6px 18px rgba(0, 0, 0, .18); }
.fk-mc-mid { display: grid; gap: 10px; }
.fk-mc-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fk-mc-pit, .fk-mc-store { position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #C9A77A, #9B7447 90%); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .3), inset 0 -2px 0 rgba(255, 255, 255, .25); color: #fff; font: 800 18px/1 var(--font-display, var(--font)); cursor: pointer; touch-action: manipulation; aspect-ratio: 1; }
.fk-mc-store { border-radius: 28px; aspect-ratio: auto; min-height: 120px; cursor: default; }
.fk-mc-store.is-mine { box-shadow: inset 0 6px 10px rgba(0, 0, 0, .3), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.fk-mc-pit:disabled { cursor: default; }
.fk-mc-pit:not(:disabled) { box-shadow: inset 0 6px 10px rgba(0, 0, 0, .3), 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
.fk-mc-pit.is-turn { outline: 2px dashed rgba(255, 255, 255, .35); outline-offset: -5px; }
.fk-mc-pit b, .fk-mc-store b { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fk-mc-seeds { position: absolute; inset: 14%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; pointer-events: none; }
.fk-mc-seeds i { width: 16%; height: 16%; border-radius: 50%; background: #F6E7B2; box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.fk-mc-seeds i.s1 { background: #E8C98A; } .fk-mc-seeds i.s2 { background: #D9B06B; } .fk-mc-seeds i.s3 { background: #FBF0C8; } .fk-mc-seeds i.s4 { background: #EAD39A; } .fk-mc-seeds i.s5 { background: #C9A063; }
.fk-mc-store .fk-mc-seeds { inset: 10% 18%; }

/* ---------- Nine Men's Morris ---------- */
.gb-nm .gb-stage { border-radius: 14px; background: var(--fr-wood); box-shadow: inset 0 0 0 3px var(--fr-wood-d), 0 6px 18px rgba(0, 0, 0, .18); }
.fk-nm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fk-nm-line { stroke: var(--fr-wood-d); stroke-width: .09; stroke-linecap: round; }
.fk-nm-pt { position: absolute; left: calc((var(--c) + .5) / 7 * 100%); top: calc((var(--r) + .5) / 7 * 100%); width: calc(var(--gb-size) * .12); height: calc(var(--gb-size) * .12); margin: calc(var(--gb-size) * -.06); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; }
.fk-nm-pt::before { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--fr-wood-d); }
.fk-nm-pt:disabled { cursor: default; }
.fk-nm-pt:not(:disabled)::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.fk-nm-pt.is-target::after { inset: 24%; background: color-mix(in srgb, var(--accent) 45%, transparent); border-color: transparent; }
.fk-nm-piece { position: absolute; inset: 8%; border-radius: 50%; display: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.fk-nm-piece.is-white, .fk-nm-piece.is-black { display: block; }
.fk-nm-piece.is-white { background: radial-gradient(circle at 36% 30%, #FFFFFF, #D9D4C8 78%); }
.fk-nm-piece.is-black { background: radial-gradient(circle at 36% 30%, #50545F, #16181D 72%); }
.fk-nm-pt.is-sel .fk-nm-piece { box-shadow: 0 0 0 4px var(--accent), 0 3px 0 rgba(0, 0, 0, .35); }
.fk-nm-pt.is-mill .fk-nm-piece { outline: 3px solid var(--fr-yellow); outline-offset: -3px; }
.fk-nm-pt.is-take .fk-nm-piece { box-shadow: 0 0 0 4px var(--fr-red), 0 3px 0 rgba(0, 0, 0, .35); }

/* ---------- Snakes and Ladders ---------- */
.fk-sl-svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); background: #F3E9D2; }
.fk-sl-cell { stroke: #D8CBB0; stroke-width: .03; } .fk-sl-cell.is-a { fill: #FFF8EA; } .fk-sl-cell.is-b { fill: #F4E6C8; } .fk-sl-cell.is-goal { fill: #FFE08A; }
.fk-sl-num { font: 700 .3px var(--font); fill: #6B5B3E; } .fk-sl-start { fill: #E6DCC3; } .fk-sl-startt { font: 800 .32px var(--font); fill: #6B5B3E; }
.fk-sl-rail { stroke: #B5862F; stroke-width: .12; stroke-linecap: round; } .fk-sl-rung { stroke: #B5862F; stroke-width: .09; stroke-linecap: round; }
.fk-sl-snake { fill: none; stroke: #3BA55D; stroke-width: .22; stroke-linecap: round; } .fk-sl-snake-o { fill: none; stroke: #1F6B3B; stroke-width: .34; stroke-linecap: round; }
.fk-sl-head { fill: #3BA55D; stroke: #1F6B3B; stroke-width: .06; } .fk-sl-eye { fill: #fff; }
.fk-sl-tokens { position: absolute; inset: 0; pointer-events: none; }
.fk-sl-token { position: absolute; width: calc(var(--gb-size) * .072); height: calc(var(--gb-size) * .072); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(0, 0, 0, .35); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); display: grid; place-items: center; color: #fff; font: 800 calc(var(--gb-size) * .036) / 1 var(--font); }
.fk-sl-token[hidden] { display: none; }
.fk-sl-t-red { background: var(--fr-red); } .fk-sl-t-blue { background: var(--fr-blue); } .fk-sl-t-green { background: var(--fr-green); } .fk-sl-t-yellow { background: var(--fr-yellow); }
.fk-sl-token.is-turn { box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 0 3px rgba(255, 255, 255, .85); z-index: 2; }

/* ---------- Sea Battle ---------- */
.fk-bs { display: grid; gap: 14px; width: 100%; }
.fk-bs-sea { display: grid; gap: 6px; }
.fk-bs-h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.fk-bs-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 10px; background: #1F5FA8; }
.fk-bs-cell { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: #3C86D6; cursor: pointer; touch-action: manipulation; position: relative; }
.fk-bs-cell:disabled { cursor: default; }
.fk-bs-cell.is-ship { background: #6B7280; box-shadow: inset 0 0 0 2px #3F4650; }
.fk-bs-cell.is-chosen { box-shadow: inset 0 0 0 2px var(--fr-yellow); }
.fk-bs-cell.is-miss::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: #DCE9F7; }
.fk-bs-cell.is-hit { background: #D8433A; }
.fk-bs-cell.is-hit::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #FFD166; box-shadow: 0 0 0 2px #B3261E; }
.fk-bs-cell.is-sunk { background: #2B2E39; } .fk-bs-cell.is-sunk.is-hit::after { background: #8A8F9C; box-shadow: none; }
.fk-bs-cell.is-last { outline: 3px solid #fff; outline-offset: -3px; }
.is-theirs .fk-bs-cell:not(:disabled):hover { background: #5AA0E8; }
.fk-bs.is-placing .is-theirs { opacity: .45; }
.fk-bs-place { display: grid; gap: 10px; width: 100%; padding: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fk-bs-place[hidden] { display: none; }
.fk-bs-ships { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-bs-ship { font-size: 14px; padding: 0 10px; height: 36px; }
.fk-bs-ship.is-chosen { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.fk-bs-ship.is-placed { text-decoration: none; opacity: .85; }
.fk-bs-ship.is-placed::after { content: " ✓"; }
.fk-bs-place-go { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (min-width: 640px) { .fk-bs { grid-template-columns: 1fr 1fr; } }

/* ---------- Dominoes ---------- */
.fk-dm { display: grid; gap: 12px; width: 100%; }
.fk-dm-table { min-height: 150px; padding: 10px; border-radius: 14px; background: var(--fr-green); box-shadow: inset 0 0 0 3px #1F6B3B; }
.fk-dm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; min-height: 60px; }
.fk-dm-yard { margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.fk-dm-tile { display: inline-grid; grid-template-columns: 1fr 1fr; width: 56px; height: 28px; padding: 2px; gap: 2px; border: 0; border-radius: 6px; background: var(--fr-cream); box-shadow: inset 0 0 0 1px #C9BC9E, 0 2px 0 rgba(0, 0, 0, .25); }
.fk-dm-tile.is-v { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; width: 28px; height: 56px; }
.fk-dm-half { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 2px; border-radius: 3px; background: #F7ECD2; }
.fk-dm-half i { border-radius: 50%; } .fk-dm-half i.on { background: var(--fr-ink); }
.fk-dm-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 60px; }
.fk-dm-tile.is-hand { width: 44px; height: 88px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; cursor: pointer; touch-action: manipulation; }
.fk-dm-tile.is-hand:disabled { opacity: .55; cursor: default; }
.fk-dm-tile.is-ok { box-shadow: inset 0 0 0 1px #C9BC9E, 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.fk-dm-tile.is-sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent); }
.fk-dm-ends { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.fk-dm-ends[hidden] { display: none; }
.fk-dm-go { display: flex; justify-content: center; gap: 8px; }
.fk-dm-go[hidden] { display: none; }

/* ---------- Go Fish ---------- */
.fk-gf { display: grid; gap: 12px; width: 100%; }
.fk-gf-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.fk-gf-player { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; touch-action: manipulation; }
.fk-gf-player b { font-size: 15px; } .fk-gf-player > span:last-child { grid-column: 2; font-size: 13px; color: var(--muted); }
.fk-gf-player.is-turn { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.fk-gf-player.is-me { background: var(--surface-2); }
.fk-gf-player:disabled { cursor: default; }
.fk-gf-player:not(:disabled) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.fk-gf-pond { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.fk-gf-ask { margin: 0; text-align: center; font-weight: 700; } .fk-gf-ask[hidden] { display: none; }
.fk-gf-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 90px; }
.fk-gf-rank { display: flex; padding: 6px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; touch-action: manipulation; }
.fk-gf-rank:disabled { cursor: default; opacity: .7; }
.fk-gf-rank.is-sel { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 0 3px var(--accent); }
.fk-gf-card { display: grid; place-items: center; width: 46px; height: 64px; margin-left: -22px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #C9C2B4, 0 2px 4px rgba(0, 0, 0, .25); color: var(--fr-ink); font: 800 15px/1 var(--font); }
.fk-gf-card:first-child { margin-left: 0; }
.fk-gf-card.is-red { color: var(--fr-red); } .fk-gf-card i { font-style: normal; font-size: 18px; }
.fk-gf-books { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- Five Dice ---------- */
.fk-d5 { display: grid; gap: 12px; width: 100%; justify-items: center; }
.fk-d5-dice { display: flex; gap: 10px; justify-content: center; }
.fk-d5-die { width: 54px; height: 54px; padding: 7px; border-radius: 12px; }
.fk-d5-die.is-kept { transform: translateY(-8px); box-shadow: 0 4px 0 rgba(0, 0, 0, .2), 0 0 0 4px var(--accent); }
.fk-d5-roll { min-width: 200px; }
.fk-d5-wrap { width: 100%; overflow-x: auto; }
.fk-d5-sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
.fk-d5-sheet th, .fk-d5-sheet td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.fk-d5-sheet th[scope="row"] { text-align: left; font-weight: 600; }
.fk-d5-sheet th.is-turn { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 8px 8px 0 0; }
.fk-d5-sheet .is-sum td, .fk-d5-sheet .is-sum th { background: var(--surface-2); font-weight: 700; }
.fk-d5-sheet .is-total td { font-size: 16px; }
.fk-d5-sheet td.is-filled { font-weight: 700; }
.fk-d5-pick { min-width: 44px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); font: 800 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); touch-action: manipulation; }
.fk-d5-pick.is-zero { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }

/* ---------- Bingo ---------- */
.fk-bg { display: grid; gap: 12px; width: 100%; justify-items: center; }
.fk-bg-last { display: grid; justify-items: center; gap: 2px; }
.fk-bg-last b { display: grid; place-items: center; min-width: 96px; height: 64px; padding: 0 14px; border-radius: 32px; background: var(--fr-red); color: #fff; font: 900 28px/1 var(--font-display, var(--font)); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.fk-bg-last span { font-size: 13px; color: var(--muted); font-weight: 700; }
.fk-bg-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fk-bg-card { display: grid; gap: 8px; justify-items: center; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.fk-bg-card.is-winner { box-shadow: 0 0 0 4px var(--fr-yellow); }
.fk-bg-who { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.fk-bg-grid { display: grid; grid-template-columns: repeat(5, 46px); gap: 3px; }
.fk-bg-head { display: grid; place-items: center; height: 30px; border-radius: 6px; background: var(--fr-red); color: #fff; font: 900 16px/1 var(--font-display, var(--font)); }
.fk-bg-cell { display: grid; place-items: center; height: 46px; border-radius: 8px; background: var(--fr-cream); color: var(--fr-ink); font: 700 16px/1 var(--font); }
.fk-bg-cell.is-free { background: #FFE08A; }
.fk-bg-cell.is-marked { background: var(--fr-blue); color: #fff; }
.fk-bg-cell.is-line { background: var(--fr-green); box-shadow: inset 0 0 0 3px #FFE08A; }
.fk-bg-bingo { min-width: 160px; opacity: .6; }
.fk-bg-bingo.is-ready { opacity: 1; animation: gb-pulse 1s ease-in-out infinite; }
.fk-bg-board { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 560px; }
.fk-bg-n { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: var(--surface-2); color: var(--muted); font: 600 11px/1 var(--font); }
.fk-bg-n.is-called { background: var(--fr-ink); color: #fff; }
@media (max-width: 400px) { .fk-bg-grid { grid-template-columns: repeat(5, 40px); } .fk-bg-cell { height: 40px; font-size: 14px; } }

/* ---------- Word Duel ---------- */
.fk-wd { display: grid; gap: 12px; width: 100%; justify-items: center; }
.fk-wd-boards { display: grid; grid-template-columns: auto auto; gap: 18px; align-items: start; }
.fk-wd-board { display: grid; gap: 5px; justify-items: center; }
.fk-wd-h { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.fk-wd-row { display: grid; grid-template-columns: repeat(5, 44px); gap: 5px; }
.fk-wd-row.is-theirs { grid-template-columns: repeat(5, 22px); }
.fk-wd-tile { display: grid; place-items: center; height: 44px; border-radius: 7px; border: 2px solid var(--line); background: var(--surface); font: 800 20px/1 var(--font-display, var(--font)); text-transform: uppercase; }
.is-theirs .fk-wd-tile { height: 22px; border-width: 1px; border-radius: 4px; }
.fk-wd-tile.is-typed { border-color: var(--muted); }
.fk-wd-tile.is-c { background: var(--fr-green); border-color: var(--fr-green); color: #fff; }
.fk-wd-tile.is-p { background: var(--fr-yellow); border-color: var(--fr-yellow); color: #fff; }
.fk-wd-tile.is-a { background: #6B7280; border-color: #6B7280; color: #fff; }
.fk-wd-row.is-current .fk-wd-tile { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.fk-wd-answer { margin: 0; font-weight: 800; } .fk-wd-answer[hidden] { display: none; }
.fk-wd-giveup { min-width: 140px; }
@media (max-width: 380px) { .fk-wd-row { grid-template-columns: repeat(5, 38px); } .fk-wd-tile { height: 38px; font-size: 18px; } }

/* ---------- Backgammon ---------- */
.fk-bgm { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr auto; padding: 2%; border-radius: 12px; background: var(--fr-wood); box-shadow: inset 0 0 0 3px var(--fr-wood-d), 0 6px 18px rgba(0, 0, 0, .18); }
.fk-bgm-row { grid-column: 1; display: grid; grid-template-columns: 1fr 24px 1fr; gap: 0; }
.fk-bgm-row.is-top { grid-row: 1; } .fk-bgm-row.is-bottom { grid-row: 3; }
.fk-bgm-mid { grid-row: 2; grid-column: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 36px; padding: 2px 0; }
.fk-bgm-half { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fk-bgm-gap { background: var(--fr-wood-d); border-radius: 3px; margin: 0 3px; }
.fk-bgm-trays { grid-row: 1 / 4; grid-column: 2; display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 48px; margin-left: 6px; }
.fk-bgm-pt { position: relative; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.fk-bgm-pt::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; bottom: 8%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #C98F5A; }
.is-bottom .fk-bgm-pt::before { top: 8%; bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fk-bgm-half .fk-bgm-pt:nth-child(odd)::before { background: #8A5A34; }
.fk-bgm-pt:disabled { cursor: default; }
.fk-bgm-pt.is-from::after, .fk-bgm-pt.is-to::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 22%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--accent) 80%, white); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.is-top .fk-bgm-pt.is-from::after, .is-top .fk-bgm-pt.is-to::after { bottom: auto; top: 10%; }
.fk-bgm-pt.is-sel { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.fk-bgm-stack { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; padding: 2px 0; pointer-events: none; }
.is-top .fk-bgm-stack { bottom: auto; top: 0; flex-direction: column; }
.fk-bgm-ch { width: 80%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.fk-bgm-ch.is-white { background: radial-gradient(circle at 36% 30%, #FFFFFF, #D9D4C8 78%); }
.fk-bgm-ch.is-black { background: radial-gradient(circle at 36% 30%, #50545F, #16181D 72%); }
.fk-bgm-stack[data-n]:not([data-n=""])::after { content: attr(data-n); font: 800 11px/1 var(--font); color: #fff; background: rgba(0, 0, 0, .55); border-radius: 8px; padding: 1px 5px; }
.fk-bgm-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 30px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; touch-action: manipulation; }
.fk-bgm-bar .fk-bgm-stack { position: static; flex-direction: row; padding: 0; }
.fk-bgm-bar .fk-bgm-ch { width: 22px; }
.fk-bgm-bar:disabled { cursor: default; }
.fk-bgm-bar.is-from { box-shadow: 0 0 0 3px var(--accent); }
.fk-bgm-tray { display: grid; place-items: center; gap: 0; padding: 4px 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .35); color: var(--fr-ink); font: 700 12px/1.1 var(--font); cursor: pointer; }
.fk-bgm-tray b { font-size: 18px; }
.fk-bgm-tray.is-black { background: rgba(0, 0, 0, .25); color: #fff; }
.fk-bgm-tray:disabled { cursor: default; }
.fk-bgm-tray.is-to { box-shadow: 0 0 0 3px var(--accent); }
.fk-bgm-dice { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fk-bgm-die { width: 30px; height: 30px; padding: 4px; border-width: 2px; border-radius: 7px; cursor: default; }
.fk-bgm-die.is-used { opacity: .35; }
.fk-bgm-left { font-size: 12px; font-weight: 700; color: var(--fr-ink); }
.fk-bgm-roll { min-width: 160px; }
.gb-fr .gb-die-box:has(.fk-bgm-roll) { min-height: 56px; }

/* ---------- dark theme ---------- */
:root[data-theme="dark"] .gb-fr { --fr-cream: #EDE3CC; --fr-wood: #C9B38C; --fr-wood-d: #8F6B45; }
:root[data-theme="dark"] .fk-ttt-cell { background: #E8DFC9; } :root[data-theme="dark"] .fk-ttt-cell:not(:disabled):hover { background: #F2EAD6; }
:root[data-theme="dark"] .fk-db-line::after { background: #6B6F80; }
:root[data-theme="dark"] .fk-db-line.is-on::after { background: #F3F0E8; }
:root[data-theme="dark"] .fk-db-dot { background: #F3F0E8; }
:root[data-theme="dark"] .fk-sl-svg { background: #D6C9AE; } :root[data-theme="dark"] .fk-sl-cell.is-a { fill: #E8DEC6; } :root[data-theme="dark"] .fk-sl-cell.is-b { fill: #D8CBAB; }
:root[data-theme="dark"] .fk-gf-card { background: #F3EEE2; }
:root[data-theme="dark"] .fk-bg-cell { color: #1B1E2B; }
:root[data-theme="dark"] .fk-wd-tile { background: var(--surface-2); }
:root[data-theme="dark"] .fk-bgm-tray { color: #1B1E2B; }
:root[data-theme="dark"] .fk-nm-line { stroke: #6E5236; }

/* ---------- motion ---------- */
.g-reduced .fk-bg-bingo, .g-reduced .fk-sl-token, .g-reduced .fk-d5-die { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .gb-fr .fk-bg-bingo, .gb-fr .fk-sl-token, .gb-fr .fk-d5-die, .gb-fr .gb-die { animation: none; transition: none; } }

/* ---------- computers ---------- */
@media (min-width: 1024px) {
  .gb-desk.gb-auto .gb-left { width: min(100%, calc(var(--gb-size) + 40px)); }
  .gb-desk .fk-bs { grid-template-columns: 1fr 1fr; }
}

/* ---------- v2.5 "Play with friends by code": the box on /games-with-friends and /join (src/render.mjs friendsBox) ---------- */
.friends-box { display: grid; gap: 18px; margin: var(--s-5, 24px) 0; padding: var(--s-5, 24px); border: 1px solid var(--line); border-radius: var(--r-xl, 22px); background: var(--surface); box-shadow: var(--glint), var(--sh-1); }
@media (min-width: 760px) { .friends-box { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.friends-box h2 { font-size: var(--fs-lg, 1.25rem); margin: 0 0 10px; }
.friends-steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; color: var(--muted); line-height: 1.45; }
.friends-steps li::marker { font-weight: 800; color: var(--cat-ink, var(--text)); }
.friends-steps b { color: var(--text); }
.friends-join { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--r-lg, 16px); background: var(--surface-2); }
.friends-join label { font-weight: 750; }
.friends-join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.friends-code { min-width: 0; width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm, 10px); background: var(--surface); color: var(--text); font: 800 20px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; text-align: center; }
.friends-code:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.friends-help { margin: 0; font-size: 13px; color: var(--muted); }
.friends-help.is-error { color: var(--danger, #B42318); font-weight: 650; }
.page-join h1 { margin-top: var(--s-4, 16px); }
.page-join .friends-box { grid-template-columns: minmax(0, 1fr); max-width: 560px; }