/* ══════════════════════════════════════════════════════════════════════
   BUILD 121:鱼虾蟹台面照传统真台子重画 —— 2 行 3 列六个带色格子。
   六个图案两两配对刚好 15 对(Focus 2),每一对在台面上都有自己的位置:
     挨着的 7 对 = 两格中间的圆点 · 交叉的 4 对 = 交叉口的两笔斜线
     大对角线 2 对 = 台面四个外角(一条线两头都能按)· 同排两头 2 对 = 上下外边的中点
   位置全部用 CSS grid + 四角绝对定位(不量尺寸),换语言 / 转屏都不会错位。
   ══════════════════════════════════════════════════════════════════════ */
#app .fsboard{position:relative;width:min(96vw,420px);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
  gap:var(--fsgap,34px);padding:46px 12px;border-radius:18px;border:1px solid rgba(212,175,55,.32);
  background:radial-gradient(70% 70% at 50% 40%,rgba(212,60,60,.14),transparent 70%),linear-gradient(180deg,rgba(74,22,22,.5),rgba(20,8,8,.6))}

/* ── 六个格子 ────────────────────────────────────────────────── */
#app .fscell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:92px;padding:8px 4px 7px;border-radius:15px;border:1px solid rgba(var(--rgb,255,255,255),.32);
  background:radial-gradient(75% 70% at 50% 34%,rgba(var(--rgb,255,255,255),.16),transparent 72%),
             linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03) 60%),rgba(10,13,28,.5);
  color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .2s,box-shadow .2s,opacity .2s}
#app .fscell .art{height:46px;display:grid;place-items:center}
#app .fscell .art svg{width:46px;height:46px}
#app .fscell .nm{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--dc);text-align:center;line-height:1.25}
#app .fscell .nm i{display:block;font-style:normal;font-weight:600;font-size:8.5px;letter-spacing:.04em;color:var(--dim);white-space:nowrap}

/* ── Focus 2:挨着两格中间那个圆点 ───────────────────────────── */
#app .fspair{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:1px;
  width:36px;height:36px;padding:0;border-radius:50%;border:1.5px dashed rgba(243,221,142,.6);
  background:rgba(18,10,10,.88);cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .12s,border-color .2s,box-shadow .2s,opacity .2s}
#app .fspair .pf{display:grid;place-items:center;width:17px;height:17px}
#app .fspair .pf svg{width:17px;height:17px;display:block}
/* 横着挨着的:压在两格中间那条竖线上 */
#app .fspair.eh{align-self:center;justify-self:end;transform:translateX(calc(50% + var(--fsgap,34px) / 2))}
/* 竖着挨着的:压在上下两格中间那条横线上 */
#app .fspair.ev{justify-self:center;align-self:end;transform:translateY(calc(50% + var(--fsgap,34px) / 2))}
/* 交叉点:一个方块里上下摆两个按钮(↘ 一笔、↗ 一笔)。
   真台子上是压在 X 的某一笔上;手机上两笔叠一起点不准,所以拆成两个不重叠的按钮,各画一条斜线标明是哪一笔。 */
#app .fsxbox{position:relative;z-index:4;justify-self:end;align-self:end;display:flex;flex-direction:column;gap:3px;
  padding:3px;border-radius:13px;background:rgba(14,8,8,.9);border:1px solid rgba(243,221,142,.45);box-shadow:0 3px 10px rgba(0,0,0,.6);
  transform:translate(calc(50% + var(--fsgap,34px) / 2),calc(50% + var(--fsgap,34px) / 2))}
#app .fspair.dg{width:46px;height:23px;border-radius:8px;border-style:solid;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:none;gap:2px}
#app .fspair.dg::after{content:'╲';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:9px;line-height:1;color:rgba(243,221,142,.75)}
#app .fspair.dg.d2::after{content:'╱'}
#app .fspair.dg .pf,#app .fspair.dg .pf svg{width:15px;height:15px}

/* ── Focus 2:台面上下两条外边(台面里留出来的那条带子)──────────────
   带子里从左到右是:大对角线的一头 · 外边中点 · 另一条大对角线的一头。
   大对角线两头都能按,按哪头都是同一注(两头一起亮、一起显示筹码)。 */
#app .fspair.rim,#app .fspair.cn{position:absolute;z-index:6}
#app .fspair.rim{left:50%;margin-left:-18px}
#app .fspair.rim.r-top{top:5px}
#app .fspair.rim.r-bot{bottom:5px}
#app .fspair.cn{width:50px;height:26px;border-radius:9px;border-style:solid;
  border-color:rgba(243,221,142,.55);background:rgba(14,8,8,.92);box-shadow:0 3px 10px rgba(0,0,0,.55);gap:2px}
#app .fspair.cn::after{content:'\2572';position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:9px;line-height:1;color:rgba(243,221,142,.8)}
#app .fspair.cn.d2::after{content:'\2571'}
#app .fspair.cn .pf,#app .fspair.cn .pf svg{width:16px;height:16px}
#app .fspair.c-tl{left:10px;top:10px}
#app .fspair.c-tr{right:10px;top:10px}
#app .fspair.c-bl{left:10px;bottom:10px}
#app .fspair.c-br{right:10px;bottom:10px}

/* ── 共用状态:我押了 / 中了 / 没中 ───────────────────────────── */
#app .fscell .pool{font-family:var(--num);font-size:9px;color:var(--dim);white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis}
#app .fspair .pool{display:none}
#app .fscell .my,#app .fspair .my{position:absolute;right:-5px;top:-5px;min-width:20px;padding:1px 5px;border-radius:99px;
  font-family:var(--num);font-weight:800;font-size:9.5px;line-height:1.35;text-align:center;color:#2a1d05;background:var(--goldgrad);
  box-shadow:0 0 0 1.5px #7a5d18,0 2px 5px rgba(0,0,0,.55);z-index:5}
#app .fscell .my:empty:empty,#app .fspair .my:empty{display:none}
#app .fspair.dg .my{transform:rotate(-45deg)}#app .fspair.dg.d2 .my{transform:rotate(45deg)}
#app .fscell.mine{border-color:rgba(255,209,102,.65);box-shadow:0 0 18px rgba(255,209,102,.2)}
#app .fspair.mine{border-style:solid;border-color:rgba(255,209,102,.85);box-shadow:0 0 14px rgba(255,209,102,.4)}
#app .fscell.won{border-color:rgba(95,245,177,.85);box-shadow:0 0 24px rgba(95,245,177,.35)}
#app .fspair.won{border-style:solid;border-color:rgba(95,245,177,.9);box-shadow:0 0 16px rgba(95,245,177,.5)}
#app .fscell.lost,#app .fspair.lost{opacity:.42}
#app .fscell .hit{position:absolute;left:-4px;top:-6px;padding:1px 7px;border-radius:99px;font-family:var(--num);font-weight:700;font-size:11px;color:#06121a;background:var(--moneygrad);z-index:5}
#app .fscell:active:not(:disabled){transform:scale(.97)}
#app .fscell:disabled,#app .fspair:disabled{cursor:default;opacity:1}
#app .fscell.lost:disabled:disabled,#app .fspair.lost:disabled{opacity:.42}

@media(max-width:380px){
  #app .fsboard{--fsgap:30px;padding:42px 10px}
  #app .fscell{min-height:84px}
  #app .fscell .art,#app .fscell .art svg{height:40px;width:40px}
  #app .fspair{width:32px;height:32px}
  #app .fspair .pf,#app .fspair .pf svg{width:15px;height:15px}
  #app .fspair.dg{width:42px;height:21px}
  #app .fspair.cn{width:46px;height:24px}
  #app .fspair.rim{margin-left:-16px}
}
@media(prefers-reduced-motion:reduce){#app .fscell,#app .fspair{transition:none}}