/* ==========================================================================
   CharmingPlay · games.css
   Board-game skins on top of style.css (every games/*.html loads both files)
   ========================================================================== */

.tbtn{
  min-height:44px;min-width:44px;padding:0 14px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);
  font-size:13.5px;font-weight:750;color:var(--ink-2);
  -webkit-user-select:none;user-select:none;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-spring),background var(--dur-2),color var(--dur-2),border-color var(--dur-2);
}
.tbtn:active{transform:scale(.95)}
@media (hover:hover){.tbtn:hover{background:rgba(255,255,255,.1);color:var(--ink)}}
.tbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn--accent{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(124,108,255,.32)}
.tbtn.is-on{background:rgba(124,108,255,.16);border-color:rgba(124,108,255,.5);color:#d6d0ff}
.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- generic game layout ---------- */
.game-layout{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);width:100%;max-width:560px;margin:0 auto}
@media (min-width:860px) and (orientation:landscape){
  .game-layout.wide{grid-template-columns:minmax(0,1fr) 250px;max-width:820px;align-items:start}
}
.hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
@media (max-width:360px){.hud .stat{padding:8px 4px}.stat-value{font-size:15px}}
.stat{padding:10px 8px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center;min-width:0}
.stat-label{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-value{font-family:var(--font-num);font-size:clamp(17px,4.6vw,22px);font-weight:850;line-height:1.25;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat-value.flash{animation:statFlash .55s var(--ease)}
@keyframes statFlash{50%{color:var(--brand-3);transform:scale(1.08)}}
.stat--accent{border-color:rgba(124,108,255,.35);background:rgba(124,108,255,.10)}
.player-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);position:relative;overflow:hidden;
  transition:border-color var(--dur-2),background var(--dur-2),box-shadow var(--dur-2);
}
.player-card .pc-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.3)}
.player-card .pc-name{font-weight:800;font-size:14px;line-height:1.2}
.player-card .pc-meta{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.player-card .pc-score{margin-left:auto;font-family:var(--font-num);font-weight:850;font-size:20px}
.player-card.is-active{border-color:rgba(255,207,112,.55);background:rgba(255,207,112,.08);box-shadow:0 0 0 1px rgba(255,207,112,.2),0 0 26px rgba(255,207,112,.14)}
.player-card.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold)}
.turn-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:8px 14px;
  border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:13.5px;font-weight:750;color:var(--ink-2);text-align:center;
  transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2);
}
.turn-banner.is-hot{color:var(--ink);border-color:rgba(255,207,112,.4);background:rgba(255,207,112,.07)}
.turn-banner .tb-dot{width:10px;height:10px;border-radius:50%;background:var(--brand-3);box-shadow:0 0 12px currentColor;animation:tbPulse 1.4s var(--ease) infinite;flex-shrink:0}
@keyframes tbPulse{50%{transform:scale(1.35);opacity:.7}}
.duo-flex{display:flex;flex-direction:column;gap:8px}
.duo-flex .player-card{flex:0 0 auto}
@media (min-width:1100px) and (orientation:landscape){
  .duo-flex{flex-direction:row;align-items:stretch}
  .duo-flex .player-card{flex:1}
}
.modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:calc(var(--sa-t) + 20px) 18px calc(var(--sa-b) + 20px);background:rgba(5,8,16,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity var(--dur-2),visibility var(--dur-2)}
.modal.is-open{opacity:1;visibility:visible}
.modal-card{width:min(400px,100%);padding:26px 20px 20px;border-radius:var(--radius-xl);text-align:center;background:linear-gradient(170deg,rgba(30,38,78,.96),rgba(12,16,34,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(20px) scale(.94);transition:transform var(--dur-4) var(--ease-spring)}
.modal.is-open .modal-card{transform:none}
.modal-emoji{font-size:44px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 8px 18px rgba(124,108,255,.5))}
.modal-title{font-size:23px;font-weight:850;letter-spacing:-.3px}
.modal-sub{color:var(--ink-2);font-size:14px;margin:6px 0 18px;white-space:pre-line}
.modal-actions{display:flex;flex-direction:column;gap:10px}
.fx-confetti{position:fixed!important;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:850}
.board-msg{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:22px;
  background:rgba(8,11,20,.66);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-radius:inherit;z-index:6;
}
.board-msg.is-show{display:grid;animation:fadeIn .25s var(--ease)}
.board-msg .bm-inner{padding:22px 18px;border-radius:20px;background:linear-gradient(170deg,rgba(30,38,78,.92),rgba(12,16,34,.96));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.5);max-width:320px;width:100%}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.board-msg .bm-emoji{font-size:38px;line-height:1;margin-bottom:6px}
.board-msg .bm-title{font-size:21px;font-weight:850}
.board-msg .bm-sub{font-size:13px;color:var(--ink-2);margin:4px 0 14px}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- 2048 ---------- */
.t2048-wrap{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);width:100%;max-width:520px;margin:0 auto}
@media (min-width:900px) and (orientation:landscape){
  .t2048-wrap{grid-template-columns:minmax(0,470px) 230px;align-items:start;max-width:760px}
}
.t2048-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.g2048{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:24px;padding:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.45);
  touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden;
}
.g2048.at-risk{border-color:rgba(255,189,74,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px rgba(255,189,74,.22),0 24px 60px rgba(0,0,0,.45)}
.g2048-grid{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px}
.c2048-cell{border-radius:15px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.c2048-layer{position:absolute;inset:10px;pointer-events:none}
.c2048-tile{
  position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;
  border-radius:15px;font-family:var(--font-num);font-weight:900;letter-spacing:-1px;
  color:#f7f3ff;background:linear-gradient(150deg,#8e7dff,#5546d6);
  box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.24);
  will-change:transform;
  transition:transform 110ms cubic-bezier(.2,.8,.3,1);
  transform-origin:center center;
}
.c2048-tile.is-new{animation:tileNew 190ms var(--ease-out)}
@keyframes tileNew{from{scale:.2;opacity:.3}to{scale:1;opacity:1}}
.c2048-tile.is-merged{animation:tileMerge 230ms var(--ease-out)}
@keyframes tileMerge{0%{scale:1}45%{scale:1.15}100%{scale:1}}
.c2048-tile[data-v="2"]{background:linear-gradient(150deg,#3b4366,#262c47);color:#e7eaff}
.c2048-tile[data-v="4"]{background:linear-gradient(150deg,#4a4f86,#33375f);color:#eef0ff}
.c2048-tile[data-v="8"]{background:linear-gradient(150deg,#7c6cff,#5546d6)}
.c2048-tile[data-v="16"]{background:linear-gradient(150deg,#8a7bff,#22a8d8)}
.c2048-tile[data-v="32"]{background:linear-gradient(150deg,#22d3ee,#1e8fdc)}
.c2048-tile[data-v="64"]{background:linear-gradient(150deg,#3ddc97,#18a67a)}
.c2048-tile[data-v="128"]{background:linear-gradient(150deg,#ffcf70,#f0a030);color:#2a1700}
.c2048-tile[data-v="256"]{background:linear-gradient(150deg,#ffb547,#ff8a3d);color:#2a1700}
.c2048-tile[data-v="512"]{background:linear-gradient(150deg,#ff9a6b,#ff6f9c);color:#2a0a14}
.c2048-tile[data-v="1024"]{background:linear-gradient(150deg,#ff6f9c,#d8408f);color:#fff}
.c2048-tile[data-v="2048"]{background:var(--grad-gold);color:#2a1700;box-shadow:0 0 30px rgba(255,183,71,.6),0 6px 18px rgba(0,0,0,.3)}
.c2048-tile[data-v="4096"],.c2048-tile[data-v="8192"]{background:linear-gradient(150deg,#a8f0ff,#7c6cff);color:#0b1020}
.g2048.is-over .c2048-tile{filter:saturate(.55) brightness(.8)}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:8px;justify-content:center}
.dpad button{border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);display:grid;place-items:center;transition:transform 90ms var(--ease),background .2s}
.dpad button:active{transform:scale(.92);background:rgba(124,108,255,.25)}
.dpad button svg{width:20px;height:20px;stroke:var(--ink-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dpad button:nth-child(1){grid-column:2}
.dpad button:nth-child(2){grid-column:1;grid-row:2}
.dpad button:nth-child(3){grid-column:2;grid-row:2}
.dpad button:nth-child(4){grid-column:3;grid-row:2}

/* ---------- gomoku / go-style board ---------- */
.gomoku-board{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:20px;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 55%),linear-gradient(160deg,#c99a62 0%,#b8864f 55%,#a17340 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 12px 40px rgba(0,0,0,.22),0 22px 60px rgba(0,0,0,.45);
  touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden;
}
html[data-theme="day"] .gomoku-board{background:linear-gradient(160deg,#e7c99b,#d4ae78)}
.gm-grid{position:absolute;display:grid;width:100%;height:100%}
.gm-stone{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:stoneDrop .22s var(--ease-out);z-index:2}
@keyframes stoneDrop{from{transform:translate(-50%,-50%) scale(.4);opacity:.2}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.gm-stone.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000);box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 -2px 3px rgba(255,255,255,.12)}
.gm-stone.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6);box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 -2px 3px rgba(0,0,0,.08)}
.gm-stone.is-last{box-shadow:0 0 0 2px rgba(255,207,112,.95),0 0 16px rgba(255,207,112,.85),0 3px 6px rgba(0,0,0,.45)}
.gm-stone.is-win{animation:winStone .8s var(--ease) infinite}
@keyframes winStone{50%{box-shadow:0 0 0 3px #fff,0 0 26px #ffcf70}}
.gm-ghost{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .12s;z-index:1}
.gm-ghost.is-on{opacity:.45}
.gm-ghost.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000)}
.gm-ghost.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6)}
.go-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(19,1fr);grid-template-rows:repeat(19,1fr);padding:3.4%;gap:0}
.go-board .gpt{position:relative;display:grid;place-items:center;touch-action:manipulation}
.go-board .gpt::before{content:"";width:1px;height:100%;background:rgba(60,36,16,.55);position:absolute}
.go-board .gpt::after{content:"";width:100%;height:1px;background:rgba(60,36,16,.55);position:absolute}
.go-board .gpt .sd{width:74%;aspect-ratio:1/1;border-radius:50%;z-index:2;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.go-board .gpt .sd.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000)}
.go-board .gpt .sd.white{background:radial-gradient(circle at 36% 30%,#fff,#e6e6ee 55%,#b9b9c6)}
.go-board .gpt .sd.is-last{box-shadow:0 0 0 2px #ffcf70,0 0 12px #ffcf70}
.go-board .gpt .sd.is-win{animation:winStone .8s infinite}

/* ---------- connect four ---------- */
.c4-board{
  position:relative;width:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.3vw,8px);
  padding:clamp(6px,1.8vw,10px) clamp(6px,1.8vw,10px) clamp(8px,2.2vw,12px);
  border-radius:22px;background:linear-gradient(160deg,#22307a,#141a46 60%,#0f1338);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -10px 30px rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.5);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.c4-col{display:grid;grid-template-rows:repeat(6,1fr);gap:clamp(4px,1.3vw,8px);position:relative;min-width:0;border-radius:12px}
.c4-cell{aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#0a0d20,#070a18 70%);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.06);position:relative;min-width:0}
.c4-cell .c4-disc{position:absolute;inset:7%;border-radius:50%;opacity:0;transform:scale(.85)}
.c4-cell.is-red .c4-disc{opacity:1;transform:none;background:radial-gradient(circle at 35% 30%,#ff9a9a,#ff5a63 45%,#c62839);box-shadow:inset 0 -4px 8px rgba(0,0,0,.35),inset 0 3px 6px rgba(255,255,255,.35),0 0 16px rgba(255,90,99,.3)}
.c4-cell.is-yellow .c4-disc{opacity:1;transform:none;background:radial-gradient(circle at 35% 30%,#fff0a8,#ffcf70 45%,#e09a1c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.45),0 0 16px rgba(255,207,112,.3)}
.c4-cell.drop-in .c4-disc{animation:dropIn .36s cubic-bezier(.3,1.3,.5,1)}
@keyframes dropIn{0%{transform:translateY(-700%);opacity:1}65%{transform:translateY(5%)}82%{transform:translateY(-4%)}100%{transform:none}}
.c4-cell.is-win .c4-disc{animation:winPulse .9s var(--ease) infinite;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.8)}
@keyframes winPulse{50%{transform:scale(1.07)}}
.c4-col.is-full{opacity:.5}
.c4-hint{position:absolute;left:50%;top:-44px;transform:translateX(-50%);width:92%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;transition:top .2s var(--ease-out),opacity .2s;opacity:0}
.c4-col.is-hover .c4-hint{opacity:.8;top:-4px}
.c4-hint.is-red{background:radial-gradient(circle at 35% 30%,#ffb3b3,#ff5a63 50%,transparent 72%)}
.c4-hint.is-yellow{background:radial-gradient(circle at 35% 30%,#fff3b8,#ffcf70 50%,transparent 72%)}
.c4-board.is-win .c4-col{pointer-events:none}

/* ---------- chess ---------- */
.chess-wrap{width:100%;max-width:min(100%,600px);margin:0 auto}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1/1;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 8px rgba(255,255,255,.06),0 0 0 9px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.5);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.csq{position:relative;aspect-ratio:1/1;display:grid;place-items:center;min-width:0;min-height:0}
.csq.light{background:#ece3d3}
.csq.dark{background:#92a2c6}
html[data-theme="night"] .csq.dark{background:#5d6c9e}
.csq .piece{font-size:min(7.6vw,46px);line-height:1;display:grid;place-items:center;width:100%;height:100%;pointer-events:none;transition:transform .15s var(--ease-spring)}
@media (max-width:420px){.csq .piece{font-size:8.6vw}}
.csq.w .piece{color:#fff;text-shadow:0 1px 0 #6f7488,0 2px 3px rgba(0,0,0,.35),0 -1px 0 #d9d9e2}
.csq.b .piece{color:#1b1e2c;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.csq.is-sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--brand-3),inset 0 0 24px rgba(255,207,112,.55);z-index:2;pointer-events:none}
.csq.is-move::before{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(34,211,238,.8);box-shadow:0 0 14px rgba(34,211,238,.7);z-index:2;animation:dotIn .2s var(--ease-spring);pointer-events:none}
.csq.is-capture::before{content:"";position:absolute;inset:5%;border-radius:50%;border:4px solid rgba(255,90,99,.9);box-shadow:0 0 18px rgba(255,90,99,.5) inset;z-index:2;animation:dotIn .2s var(--ease-spring);pointer-events:none}
.csq.is-last::after{content:"";position:absolute;inset:0;background:rgba(255,207,112,.22);z-index:1;pointer-events:none}
.csq.is-check::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,90,99,.9),rgba(255,90,99,.25) 55%,transparent 78%);z-index:1;animation:checkPulse 1s var(--ease) infinite;pointer-events:none}
@keyframes checkPulse{50%{opacity:.5}}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}
.csq .coord{position:absolute;font-family:var(--font-num);font-size:9px;font-weight:800;opacity:.5;color:#1b1e2c;z-index:3;line-height:1;pointer-events:none}
.csq.dark .coord{color:#fff}
.csq .coord.f{left:3px;bottom:2px}
.csq .coord.r{right:3px;top:2px}
.captured-row{display:flex;flex-wrap:wrap;gap:2px;font-size:16px;min-height:22px;line-height:1;opacity:.9}

/* ---------- xiangqi ---------- */
.xq-wrap{width:100%;max-width:min(100%,480px);margin:0 auto}
.xq-board{
  position:relative;width:100%;aspect-ratio:9/10;border-radius:10px;
  background-color:#e6cfa4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1000'%3E%3Cg stroke='%235a3b22' stroke-width='3' fill='none'%3E%3Crect x='100' y='100' width='700' height='800'/%3E%3Cpath d='M100 200h700M100 300h700M100 400h700M100 500h700M100 600h700M100 700h700M100 800h700'/%3E%3Cpath d='M100 100v800M200 100v400M300 100v400M400 100v400M500 100v800M600 100v400M700 100v400M800 100v400M200 600v300M300 600v300M400 600v300M600 600v300M700 600v300M800 600v300'/%3E%3C/g%3E%3Cg stroke='%235a3b22' stroke-width='2.5' fill='none'%3E%3Cpath d='M200 100l30 30M230 100l-30 30M700 100l30 30M730 100l-30 30M200 900l30-30M230 900l-30-30M700 900l30-30M730 900l-30-30'/%3E%3C/g%3E%3Ctext x='450' y='500' font-size='76' font-family='serif' fill='%235a3b22' opacity='.5' text-anchor='middle' dominant-baseline='middle'%3E楚河　漢界%3C/text%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  box-shadow:0 0 0 8px #6b4a2c,0 0 0 9px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.55);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;overflow:hidden;
}
.xq-piece{
  position:absolute;width:8.8%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;font-family:var(--font-cjk);font-weight:800;font-size:min(4.4vw,25px);
  transition:left .18s var(--ease-out),top .18s var(--ease-out),box-shadow .2s;
  box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.18);
  z-index:3;cursor:pointer;line-height:1;
}
@media (max-width:420px){.xq-piece{font-size:min(5vw,22px)}}
.xq-piece.red{background:radial-gradient(circle at 35% 28%,#fff7ee,#f6e3c8 60%,#e9c9a2);color:#c0261e;border:2px solid #b9231b}
.xq-piece.black{background:radial-gradient(circle at 35% 28%,#fff7ee,#f6e3c8 60%,#e9c9a2);color:#1c2236;border:2px solid #1c2236}
.xq-piece.is-sel{box-shadow:0 0 0 3px var(--brand-3),0 0 20px rgba(255,207,112,.85),0 4px 10px rgba(0,0,0,.4);z-index:4}
.xq-piece.is-captured{animation:xqCapture .4s var(--ease) forwards;z-index:5}
@keyframes xqCapture{to{transform:translate(-50%,-50%) scale(0) rotate(45deg);opacity:0}}
.xq-marks{position:absolute;inset:0;pointer-events:none;z-index:2}
.xq-marks .mk{position:absolute;width:3%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);background:rgba(34,211,238,.9);box-shadow:0 0 10px rgba(34,211,238,.8)}
.xq-marks .mk.cap{width:9.4%;background:transparent;border:3px solid rgba(255,90,99,.9);box-shadow:0 0 12px rgba(255,90,99,.6)}
.xq-marks .mk.last{width:8.8%;background:transparent;border:2.5px solid rgba(255,176,32,.95);box-shadow:0 0 14px rgba(255,176,32,.7);animation:lastPulse 1.2s infinite}
@keyframes lastPulse{50%{opacity:.45}}

/* ---------- sudoku ---------- */
.sudoku{width:100%;max-width:440px;margin:0 auto;display:grid;border-radius:14px;overflow:hidden;background:rgba(124,108,255,.35);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 18px 44px rgba(0,0,0,.4);touch-action:manipulation}
.sudoku.g4{grid-template-columns:repeat(4,1fr)}
.sudoku.g6{grid-template-columns:repeat(6,1fr)}
.scell{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:#111a33;border:1px solid rgba(255,255,255,.06);font-family:var(--font-num);font-weight:800;font-size:clamp(19px,5.6vw,30px);color:#2f3c70;-webkit-user-select:none;user-select:none;transition:background .15s}
html[data-theme="day"] .scell{background:#fff;border-color:rgba(16,23,49,.08)}
.scell.is-given{color:#e8ecff;background:#1b2650;font-weight:900}
html[data-theme="day"] .scell.is-given{background:#e7ebf8;color:#141b33}
.scell.is-sel{background:#2d2a75}
.scell.is-sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--brand);pointer-events:none}
.scell.is-peer{background:rgba(124,108,255,.14)}
.scell.is-same{background:rgba(34,211,238,.16)}
.scell.is-err{color:#ff8d8d !important;animation:shake .4s var(--ease)}
.scell.is-hint{color:#ffcf70 !important}
.scell.is-done{color:#7ef0b8}
.scell .notes{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;inset:2px;font-size:9px;color:#8f9bd0;font-weight:700;line-height:1}
.scell .notes span{display:grid;place-items:center}
.scell.b-thick{border-left:2px solid rgba(34,211,238,.55)}
.scell.b-thick-top{border-top:2px solid rgba(34,211,238,.55)}
@media (max-width:520px){.scell .notes{font-size:8px}}
.num-pad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:440px;margin:14px auto 0}
.num-pad button{aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);font-family:var(--font-num);font-size:22px;font-weight:800;display:grid;place-items:center;touch-action:manipulation;transition:transform 90ms var(--ease),background .15s}
.num-pad button:active{transform:scale(.9);background:rgba(124,108,255,.28)}
.num-pad button.is-used{opacity:.32}
.num-pad button.erase{font-size:13px;font-family:var(--font),var(--font-cjk);display:flex;flex-direction:column;gap:1px}
.num-pad button.erase small{font-size:10px;color:var(--ink-3);font-weight:700}

/* ---------- memory cards ---------- */
.mcard-grid{width:100%;max-width:500px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,10px);perspective:900px;touch-action:manipulation}
.mcard{position:relative;aspect-ratio:1/1;border-radius:16px;transform-style:preserve-3d;transition:transform .5s var(--ease-out);-webkit-user-select:none;user-select:none;background:transparent;border:0;padding:0}
.mcard.is-flipped,.mcard.is-done{transform:rotateY(180deg)}
.mcard .mf{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:clamp(22px,8vw,36px);line-height:1}
.mcard .mf-back{
  background-image:radial-gradient(circle at 30% 25%,rgba(124,108,255,.55),transparent 55%),repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px),linear-gradient(150deg,#2a3270,#141a3c);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px rgba(0,0,0,.3);
  color:rgba(255,207,112,.85);font-size:clamp(16px,4.4vw,22px);
}
.mcard .mf-front{transform:rotateY(180deg);background:linear-gradient(150deg,#f8f3e7,#e4d8c0);border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.mcard.is-done .mf-front{background:linear-gradient(150deg,rgba(120,240,184,.25),rgba(255,255,255,.1));border-color:rgba(61,220,151,.7);box-shadow:0 0 0 2px rgba(61,220,151,.45),0 0 22px rgba(61,220,151,.3)}
.mcard.is-done{animation:donePop .4s var(--ease-spring)}
@keyframes donePop{50%{scale:1.06}}
.mcard.is-wrong .mf-front{animation:shake .4s var(--ease);border-color:rgba(255,107,107,.8)}
.mcard:active:not(.is-flipped):not(.is-done){scale:.96}
.mcard .mcard-dot{position:absolute;top:7px;right:8px;width:10px;height:10px;border-radius:50%;display:none;z-index:2}
.mcard.is-p1 .mcard-dot{display:block;background:#ff6f9c;box-shadow:0 0 8px #ff6f9c}
.mcard.is-p2 .mcard-dot{display:block;background:#22d3ee;box-shadow:0 0 8px #22d3ee}

/* ---------- reaction test ---------- */
.rt-pad{
  position:relative;width:100%;min-height:46vh;min-height:46dvh;border-radius:26px;display:grid;place-items:center;text-align:center;padding:24px;
  background:linear-gradient(160deg,#1a1330,#2a1b3d);border:2px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.45);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;overflow:hidden;
  transition:background .08s linear,border-color .2s,box-shadow .3s;cursor:pointer;
}
.rt-pad .rp-icon{font-size:clamp(42px,11vw,66px);line-height:1;margin-bottom:10px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.rt-pad .rp-title{font-size:clamp(18px,4.6vw,24px);font-weight:850;letter-spacing:-.3px}
.rt-pad .rp-sub{font-size:13.5px;color:var(--ink-3);margin-top:6px;color:rgba(255,255,255,.7)}
.rt-pad .rp-big{font-family:var(--font-num);font-size:clamp(40px,13vw,64px);font-weight:900;letter-spacing:-2px;line-height:1;margin:6px 0}
.rt-pad[data-st="idle"]{background:linear-gradient(160deg,#161d3f,#1d1540)}
.rt-pad[data-st="wait"]{background:linear-gradient(160deg,#3a1220,#4a1726);border-color:rgba(255,111,156,.35)}
.rt-pad[data-st="go"]{background:linear-gradient(160deg,#0d7a55,#1fbf86);border-color:rgba(255,255,255,.5);box-shadow:0 0 0 6px rgba(61,220,151,.18),0 0 80px rgba(61,220,151,.45);animation:goPulse .5s var(--ease)}
@keyframes goPulse{from{box-shadow:0 0 0 0 rgba(61,220,151,.6)}to{box-shadow:0 0 0 6px rgba(61,220,151,.18),0 0 80px rgba(61,220,151,.45)}}
.rt-pad[data-st="early"]{background:linear-gradient(160deg,#5b1b2b,#7a2236);border-color:rgba(255,107,107,.5);animation:shake .4s var(--ease)}
.rt-pad[data-st="go"] .rp-icon{animation:goIcon .6s var(--ease-spring)}
@keyframes goIcon{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.rt-pad[data-st="done"]{background:linear-gradient(160deg,#12243f,#1d1a40);border-color:rgba(124,108,255,.4)}
.rt-times{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.rt-chip{min-width:62px;padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center;font-family:var(--font-num);font-weight:800;font-size:14px}
.rt-chip small{display:block;font-size:9px;letter-spacing:1px;color:var(--ink-3);font-weight:700}
.rt-chip.is-best{border-color:rgba(255,207,112,.6);color:#ffe1a6;background:rgba(255,207,112,.1)}

/* ---------- guess number ---------- */
.gn-display{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 2px}
.gn-num{font-family:var(--font-num);font-size:clamp(44px,13vw,64px);font-weight:900;letter-spacing:-2px;line-height:1;min-width:3ch;text-align:center;color:#fff;text-shadow:0 0 30px rgba(124,108,255,.6)}
.gn-num.is-pop{animation:specialPop .4s var(--ease)}
@keyframes specialPop{0%{transform:scale(.8);opacity:.4}60%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.gn-range{position:relative;height:56px;margin:12px 0 4px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line);overflow:hidden}
.gn-range .gn-fill{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,rgba(124,108,255,.35),rgba(34,211,238,.3));transition:left .35s var(--ease-out),right .35s var(--ease-out)}
.gn-range .gn-tick{position:absolute;top:0;bottom:10px;width:2px;background:rgba(255,207,112,.9);transform:translateX(-1px)}
.gn-range .gn-lbl{position:absolute;bottom:5px;font-family:var(--font-num);font-size:11px;font-weight:800;color:var(--ink-3)}
.gn-range .gn-center{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-num);font-weight:800;font-size:15px}
.gn-history{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:30px}
.gn-chip{font-family:var(--font-num);font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.gn-chip.is-up{border-color:rgba(255,111,156,.4);color:#ffc2d4}
.gn-chip.is-down{border-color:rgba(34,211,238,.4);color:#a9efff}
.gn-chip.is-hit{border-color:rgba(61,220,151,.6);color:#a9f3cf;background:rgba(61,220,151,.12)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto;width:100%}
.keypad .key{min-height:54px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.055);font-family:var(--font-num);font-size:22px;font-weight:700;display:grid;place-items:center;-webkit-user-select:none;user-select:none;transition:transform 90ms var(--ease),background var(--dur-1)}
.keypad .key:active{transform:scale(.93);background:rgba(124,108,255,.22);box-shadow:0 0 0 2px rgba(124,108,255,.35)}
.keypad .key--action{background:var(--grad-brand);border-color:transparent;color:#fff;font-size:15px;font-family:var(--font),var(--font-cjk)}
.keypad .key--ghost{font-family:var(--font),var(--font-cjk);font-size:15px;color:var(--ink-2)}

/* ---------- slide puzzle ---------- */
.puzzle{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.4);touch-action:manipulation}
.ptile{position:relative;border-radius:16px;display:grid;place-items:center;font-family:var(--font-num);font-weight:900;font-size:clamp(26px,9vw,40px);color:#fff;background:linear-gradient(150deg,rgba(124,108,255,.95),rgba(34,211,238,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px rgba(0,0,0,.3);transition:box-shadow .2s,filter .2s,background .2s;-webkit-user-select:none;user-select:none;cursor:pointer;touch-action:manipulation}
.ptile:nth-child(3n+2){background:linear-gradient(150deg,rgba(124,108,255,.95),rgba(255,111,156,.85))}
.ptile:nth-child(3n){background:linear-gradient(150deg,rgba(34,211,238,.95),rgba(61,220,151,.85))}
.ptile.is-moved{animation:tileSlide .18s var(--ease-out)}
@keyframes tileSlide{from{transform:scale(.9)}to{transform:scale(1)}}
.ptile.is-empty{background:rgba(255,255,255,.03) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.ptile.is-solved{box-shadow:inset 0 0 0 2px rgba(120,240,184,.8),0 0 20px rgba(61,220,151,.35)}

/* ---------- word match ---------- */
.wm-grid{width:100%;max-width:440px;margin:0 auto;display:grid;gap:4px;touch-action:none;-webkit-user-select:none;user-select:none}
.wm-cell{aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:var(--font-num);font-weight:800;font-size:clamp(14px,4.6vw,20px);text-transform:uppercase;color:var(--ink);transition:background .12s,color .12s,transform .12s}
.wm-cell.is-hit{background:rgba(34,211,238,.3);border-color:rgba(34,211,238,.7);transform:scale(.94)}
.wm-cell.is-found{animation:wmPop .4s var(--ease-out)}
@keyframes wmPop{0%{transform:scale(1.1);background:rgba(255,207,112,.8)}100%{transform:scale(1);background:rgba(255,255,255,.06)}}
.wm-found{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:24px}
.wm-found span{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.35);color:#a9f3cf;text-transform:uppercase;letter-spacing:.5px;animation:pop .3s var(--ease-spring)}

/* ---------- text adventure ---------- */
.prose{font-size:15px;line-height:1.8;color:var(--ink-2)}
.prose h2{font-size:20px;font-weight:850;color:var(--ink);margin:28px 0 10px;letter-spacing:-.2px}
.prose h3{font-size:15.5px;font-weight:800;color:var(--ink);margin:18px 0 6px}
.prose p{margin:0 0 10px}
.prose strong{color:var(--ink)}
.prose-card{padding:22px clamp(16px,4vw,30px)}
.story{font-size:16.5px;line-height:1.9;color:var(--ink);min-height:120px}
.story p{margin:0 0 14px;animation:storyIn .5s var(--ease-out) both}
.story p:nth-child(2){animation-delay:.06s}
.story p:nth-child(3){animation-delay:.12s}
@keyframes storyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.story-choice{display:flex;flex-direction:column;gap:10px}
.story-choice button{min-height:56px;text-align:left;padding:12px 16px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);font-size:15px;font-weight:700;display:flex;gap:10px;align-items:center;transition:background .2s,border-color .2s,transform .1s var(--ease-spring);color:var(--ink)}
.story-choice button:active{transform:scale(.97)}
.story-choice button .k{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(124,108,255,.25);color:#d6d0ff;font-size:12px;font-weight:900;flex-shrink:0}
@media (hover:hover){.story-choice button:hover{background:rgba(124,108,255,.16);border-color:rgba(124,108,255,.5)}}

/* ---------- daily puzzle / fish helpers ---------- */
.tabs-mini{display:flex;gap:6px;flex-wrap:wrap}
.tabs-mini button{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);font-weight:750;font-size:13px;color:var(--ink-2);transition:all .2s}
.tabs-mini button[aria-selected="true"]{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(124,108,255,.35)}
.fish-stage{position:relative;width:100%;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#0a2a45,#0d4a63 55%,#0b5f6e);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 60px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.45);touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer}
.fish-stage canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.feed-pop{position:absolute;pointer-events:none;font-size:14px;font-weight:900;color:#ffcf70;animation:feedRise 1s var(--ease-out) forwards;text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:3}
@keyframes feedRise{from{transform:translate(-50%,0) scale(.7);opacity:0}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}to{transform:translate(-50%,-46px) scale(1);opacity:0}}
.fish-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.fish-item{padding:10px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center;font-size:12px;color:var(--ink-2)}
.fish-item .fi-emoji{font-size:26px;line-height:1.2;filter:grayscale(1);opacity:.35}
.fish-item.is-unlocked{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.08);color:var(--ink)}
.fish-item.is-unlocked .fi-emoji{filter:none;opacity:1}
.fish-item .fi-name{font-weight:800;font-size:11.5px;margin-top:4px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fish-item .fi-count{font-family:var(--font-num);font-size:10.5px;color:var(--ink-3)}
.maze-wrap{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.25);border:1px solid var(--line-2);touch-action:none;user-select:none;-webkit-user-select:none}
.leaderboard{display:flex;flex-direction:column;gap:6px}
.lb-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13.5px}
.lb-row .lb-rank{font-family:var(--font-num);font-weight:900;width:26px;color:var(--ink-3)}
.lb-row .lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.lb-row .lb-score{font-family:var(--font-num);font-weight:850;color:#ffe1a6}
.lb-row.is-me{border-color:rgba(255,207,112,.5);background:rgba(255,207,112,.08)}

/* very narrow phones: tighten the header for boards */
@media (max-width:340px){
  .brand-sub{display:none}
  .topbar-inner{gap:6px}
  .lang-switch{min-width:64px;padding:0 8px}
  .lang-switch .lang-alt{display:none}
  .lang-switch .lang-sep{display:none}
}

/* pair board for two-player turn games (portrait: stacked · wide: side by side) */
.pair-board{position:relative;width:100%;max-width:min(100%,560px);margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.pair-board.wide-pair{max-width:820px}
@media (min-width:760px) and (orientation:landscape){
  .pair-board.wide-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:900px;gap:16px}
  .pair-board.wide-pair .pair-side{gap:10px}
}
.pair-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.pair-side .mini-note{font-size:12px;color:var(--ink-2);line-height:1.5;text-align:center}
.zebra .board{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 16px 40px rgba(0,0,0,.4)}

/* ---------- gomoku stones on a Go-style grid ---------- */
.go-board{position:absolute;inset:0;display:grid;touch-action:manipulation}
.go-board .gpt{position:relative;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.go-board .gpt::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(60,36,16,.5);transform:translateX(-.5px)}
.go-board .gpt::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(60,36,16,.5);transform:translateY(-.5px)}
.go-board .gpt .sd{position:relative;width:86%;aspect-ratio:1/1;border-radius:50%;z-index:2;transition:transform .15s var(--ease-spring)}
.go-board .gpt .sd.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000);box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 -2px 3px rgba(255,255,255,.12)}
.go-board .gpt .sd.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6);box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 -2px 3px rgba(0,0,0,.08)}
.go-board .gpt .sd.is-last{box-shadow:0 0 0 2px #ffcf70,0 0 14px rgba(255,207,112,.9),0 3px 6px rgba(0,0,0,.45)}
.go-board .gpt .sd.is-win{animation:winStone .8s var(--ease) infinite}
.go-board .gpt .ghost{position:absolute;width:86%;aspect-ratio:1/1;border-radius:50%;opacity:0;transition:opacity .1s;z-index:1}
.go-board .gpt.is-hover .ghost{opacity:.4}
.go-board .gpt .ghost.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000)}
.go-board .gpt .ghost.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6)}
.go-board .gpt .sd.drop{animation:stoneDrop .22s var(--ease-out)}
.board-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-size:12px;font-weight:800;letter-spacing:.5px}
.board-tag .dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)}
.board-tag .dot.black{background:radial-gradient(circle at 34% 30%,#6b7280,#11151f 60%)}
.board-tag .dot.white{background:radial-gradient(circle at 34% 30%,#fff,#c9cad6 70%)}
.board-tag .dot.red{background:radial-gradient(circle at 35% 30%,#ff9a9a,#c62839 60%)}
.board-tag .dot.yellow{background:radial-gradient(circle at 35% 30%,#fff0a8,#e09a1c 60%)}
@keyframes stoneDrop{from{transform:scale(.4);opacity:.2}to{transform:scale(1);opacity:1}}

/* gomoku (go-style grid) — drawn on top of the paper board */
.gomoku-board{display:grid}
.gomoku-board .gpt{position:relative;display:grid;place-items:center;padding:0;border:0;background:transparent;touch-action:manipulation;-webkit-appearance:none;appearance:none}
.gomoku-board .gpt::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(60,36,16,.5);transform:translateX(-.5px);pointer-events:none}
.gomoku-board .gpt::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(60,36,16,.5);transform:translateY(-.5px);pointer-events:none}
.gomoku-board .gpt .sd{position:relative;display:block;width:88%;aspect-ratio:1/1;border-radius:50%;z-index:2;transition:transform .15s var(--ease-spring)}
.gomoku-board .gpt .ghost{position:absolute;display:block;width:88%;aspect-ratio:1/1;border-radius:50%;opacity:0;transition:opacity .1s;z-index:1}
.gomoku-board .gpt.is-hover .ghost{opacity:.42}
.gomoku-board .gpt .sd.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000);box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 -1px 2px rgba(255,255,255,.12)}
.gomoku-board .gpt .sd.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6);box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 -1px 2px rgba(0,0,0,.08)}
.gomoku-board .sd.is-last{box-shadow:0 0 0 2px #ffcf70,0 0 12px rgba(255,207,112,.9),0 2px 4px rgba(0,0,0,.45)}
.gomoku-board .sd.is-win{animation:winStone .8s var(--ease) infinite}
.gomoku-board .gpt .ghost.black{background:radial-gradient(circle at 34% 30%,#6b7280,#1b1e26 55%,#000)}
.gomoku-board .gpt .ghost.white{background:radial-gradient(circle at 34% 30%,#fff,#e6e6ee 55%,#b9b9c6)}