/* Forge premium 2D boards (owner direction: card and board games are crisp 2D, no 3D boards).
   Pure presentation over each game's own accessible DOM board: cells keep their buttons, labels,
   focus and rules. html.fps-g-<id> is set in the page head for the open game. */

/* ---------- Reversi: green baize in a walnut frame, glossy discs ---------- */
html.fps-g-reversi #stage div:has(> .tk-cell){
  gap:2px !important;padding:12px !important;border-radius:16px !important;max-width:min(520px,100%) !important;
  background:#0b2a1c !important;
  box-shadow:inset 0 0 0 2px #0b2a1c,0 0 0 10px #5a361b,0 0 0 12px #2f1b0c,0 14px 34px rgba(0,0,0,.6) !important;
  margin:14px auto !important;
}
html.fps-g-reversi #stage .tk-cell{
  position:relative !important;border:0 !important;border-radius:3px !important;font-size:0 !important;color:transparent !important;
  background:radial-gradient(ellipse at 50% 35%,#2f8a59 0%,#1f6b43 65%,#185837 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.fps-g-reversi #stage .tk-cell::after{content:"";position:absolute;inset:11%;border-radius:50%;transition:background .25s ease,transform .25s ease}
html.fps-g-reversi #stage .tk-cell[aria-label$="your disc"]::after{
  background:radial-gradient(circle at 34% 28%,#6b6b70 0%,#1c1c20 46%,#050507 100%);
  box-shadow:0 4px 6px rgba(0,0,0,.6),inset 0 -3px 4px rgba(255,255,255,.07)}
html.fps-g-reversi #stage .tk-cell[aria-label$="house disc"]::after{
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#f1ece2 45%,#bdb4a3 100%);
  box-shadow:0 4px 6px rgba(0,0,0,.55),inset 0 -3px 4px rgba(0,0,0,.12)}
html.fps-g-reversi #stage .tk-cell[aria-label$="legal move"]::after{inset:36%;background:rgba(255,226,150,.38);box-shadow:0 0 10px rgba(255,210,120,.35)}
html.fps-g-reversi #stage .tk-cell[aria-label$="legal move"]:hover::after{inset:14%;background:rgba(20,20,22,.35)}

/* ---------- Four in a Row: blue molded rack, gold and red tokens ---------- */
html.fps-g-four #stage div:has(> span.tk-cell){
  gap:0 !important;padding:10px !important;border-radius:18px !important;max-width:min(470px,100%) !important;margin:10px auto 6px !important;
  background:linear-gradient(180deg,#2f6fe0,#1b4fb8 60%,#163f93) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -4px 0 rgba(0,0,0,.25),0 16px 34px rgba(0,0,0,.55) !important;
}
html.fps-g-four #stage span.tk-cell{
  position:relative !important;background:transparent !important;border:0 !important;font-size:0 !important;min-height:0 !important;
}
html.fps-g-four #stage span.tk-cell::before{content:"";position:absolute;inset:9%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#0b1836,#06102a 70%);box-shadow:inset 0 4px 6px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.18)}
html.fps-g-four #stage span.tk-cell::after{content:"";position:absolute;inset:12%;border-radius:50%;transform:scale(0);transition:transform .22s cubic-bezier(.3,1.5,.5,1)}
html.fps-g-four #stage span.tk-cell[aria-label$="your token"]::after{transform:scale(1);
  background:radial-gradient(circle at 36% 30%,#fff3b8 0%,#ffcf3d 30%,#e39b0b 70%,#9a6203 100%);box-shadow:inset 0 -3px 5px rgba(0,0,0,.25),inset 0 0 0 4px rgba(255,255,255,.12)}
html.fps-g-four #stage span.tk-cell[aria-label$="house token"]::after{transform:scale(1);
  background:radial-gradient(circle at 36% 30%,#ffc2b8 0%,#f04a3a 32%,#c21d12 70%,#7c0c06 100%);box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),inset 0 0 0 4px rgba(255,255,255,.1)}
html.fps-g-four #stage div:has(> button.tk-cell){max-width:min(470px,100%) !important;margin:0 auto !important;gap:0 !important;padding:0 10px !important}
html.fps-g-four #stage button.tk-cell{background:transparent !important;border:0 !important;color:#ffcf3d !important;font:900 20px/1 system-ui !important;min-height:40px !important;box-shadow:none !important}
html.fps-g-four #stage button.tk-cell:not(:disabled):hover,html.fps-g-four #stage button.tk-cell:focus-visible{background:rgba(255,207,61,.14) !important;border-radius:10px !important}

/* ---------- Go: kaya wood board, real grid lines, star points, slate and shell stones ---------- */
html.fps-g-go #stage .tk-grid{
  gap:0 !important;padding:12px !important;border-radius:6px !important;max-width:min(500px,100%) !important;margin:10px auto !important;
  background:linear-gradient(135deg,#e9c27a 0%,#dcae60 35%,#e6bb6d 60%,#d4a052 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 3px #a8742f,0 18px 36px rgba(0,0,0,.55) !important;
}
html.fps-g-go #stage .tk-grid > .tk-btn{
  --ln:#4a3013;position:relative !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;
  font-size:0 !important;color:transparent !important;min-height:0 !important;
  background:linear-gradient(var(--ln),var(--ln)) center/100% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center/1.5px 100% no-repeat !important;
}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(9n+1){background:linear-gradient(var(--ln),var(--ln)) right center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center/1.5px 100% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(9n){background:linear-gradient(var(--ln),var(--ln)) left center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center/1.5px 100% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(-n+9){background:linear-gradient(var(--ln),var(--ln)) center/100% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center bottom/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(n+73){background:linear-gradient(var(--ln),var(--ln)) center/100% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center top/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(1){background:linear-gradient(var(--ln),var(--ln)) right center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center bottom/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(9){background:linear-gradient(var(--ln),var(--ln)) left center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center bottom/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(73){background:linear-gradient(var(--ln),var(--ln)) right center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center top/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:nth-child(81){background:linear-gradient(var(--ln),var(--ln)) left center/50% 1.5px no-repeat,linear-gradient(var(--ln),var(--ln)) center top/1.5px 50% no-repeat !important}
html.fps-g-go #stage .tk-grid > .tk-btn:is(:nth-child(21),:nth-child(25),:nth-child(41),:nth-child(57),:nth-child(61))::before{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ln)}
html.fps-g-go #stage .tk-grid > .tk-btn::after{content:"";position:absolute;inset:5%;border-radius:50%;z-index:1}
html.fps-g-go #stage .tk-grid > .tk-btn[aria-label$=" black"]::after{
  background:radial-gradient(circle at 34% 28%,#5d5d63 0%,#1d1d21 42%,#060608 100%);box-shadow:2px 4px 5px rgba(0,0,0,.5)}
html.fps-g-go #stage .tk-grid > .tk-btn[aria-label$=" white"]::after{
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#f3f0e8 45%,#c7c0b0 100%);box-shadow:2px 4px 5px rgba(0,0,0,.42)}
html.fps-g-go #stage .tk-grid > .tk-btn[aria-label$=" empty"]:not(:disabled):hover::after{background:rgba(20,20,22,.28)}

/* ---------- Mancala: carved hardwood board, recessed pits ---------- */
html.fps-g-mancala #stage div:has(> .tk-cell){
  gap:10px !important;padding:16px !important;border-radius:60px !important;margin:12px auto !important;
  background:linear-gradient(180deg,#8a5328 0%,#6b3c1a 55%,#572f13 100%) !important;
  box-shadow:inset 0 2px 0 rgba(255,220,170,.25),inset 0 -6px 12px rgba(0,0,0,.35),0 18px 36px rgba(0,0,0,.55) !important;
}
html.fps-g-mancala #stage .tk-cell{
  aspect-ratio:1 !important;border-radius:50% !important;border:0 !important;
  background:radial-gradient(circle at 50% 38%,#2c170a 0%,#3e2311 55%,#5a3416 100%) !important;
  box-shadow:inset 0 6px 10px rgba(0,0,0,.7),0 1px 0 rgba(255,220,170,.22) !important;
  color:#ffe2b0 !important;font:900 22px/1 Georgia,serif !important;text-shadow:0 2px 3px #000 !important;
}
html.fps-g-mancala #stage button.tk-cell:not(:disabled):hover,html.fps-g-mancala #stage button.tk-cell:focus-visible{box-shadow:inset 0 6px 10px rgba(0,0,0,.7),0 0 0 3px #ffb35c !important}

/* ---------- Dominoes: ivory tiles on felt ---------- */
html.fps-g-domino #stage .tk-felt [role="listitem"],html.fps-g-domino #stage [data-tile]{
  background:linear-gradient(180deg,#fffdf6,#efe6d2) !important;border-color:#d6caa9 !important;color:#16120c !important;
  box-shadow:0 3px 0 #b9ab88,0 8px 14px rgba(0,0,0,.35) !important}
html.fps-g-domino #stage [data-tile][aria-pressed="true"]{transform:translateY(-6px);box-shadow:0 0 0 3px #ffb35c,0 10px 16px rgba(0,0,0,.4) !important}