/* GOMOKU-STYLE-START — gomoku83：五子棋。夜里的茶室：暖褐色的暗底，木棋盘，黑白子带一点立体和影子；没有闪光，赢了只画一道朱红的线。 */
#gm { --gm-ink: #f3eadf; --gm-dim: rgba(243,234,223,.62); --gm-red: #d0453a;
  position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; box-sizing: border-box;
  padding: calc(var(--sat, env(safe-area-inset-top)) + 8px) 12px calc(var(--sab, env(safe-area-inset-bottom)) + 14px);
  color: var(--gm-ink); background: radial-gradient(130% 75% at 50% 0%, #3b2d22 0%, #221a14 55%, #16110d 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; -webkit-user-select: none; user-select: none; overflow: hidden; }
#gm::before { content: ''; position: absolute; left: 50%; top: 18%; width: 140%; height: 60%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,196,130,.13), rgba(255,196,130,0)); }
.gm-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 520px; height: 44px; }
.gm-title { padding-left: 4px; font: italic 400 22px/1 ui-serif, "New York", "Iowan Old Style", Georgia, serif; letter-spacing: .02em; }
.gm-title small { margin-left: 8px; font: 12px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; letter-spacing: .12em; color: var(--gm-dim); font-style: normal; }
.gm-score { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 0; font-size: 13px; color: var(--gm-dim); }
.gm-score b { min-width: 22px; color: var(--gm-ink); font: 400 30px/1 ui-serif, "New York", Georgia, serif; font-variant-numeric: tabular-nums lining-nums; text-align: center; }
.gm-score .gm-colon { color: var(--gm-dim); font: 300 22px/1 ui-serif, Georgia, serif; }
.gm-who { display: inline-flex; align-items: center; gap: 6px; }
.gm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.gm-dot.b { background: radial-gradient(circle at 35% 30%, #777, #111 70%); }
.gm-dot.w { background: radial-gradient(circle at 35% 30%, #fff, #d4cfc4 75%); }
.gm-stage { position: relative; z-index: 1; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.gm-board { position: relative; border-radius: 6px; box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); touch-action: manipulation; }
.gm-board canvas { display: block; width: 100%; height: 100%; border-radius: 6px; }
.gm-status { position: relative; z-index: 1; min-height: 20px; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--gm-ink); text-align: center; }
.gm-status.think { animation: gm-breathe 1.6s ease-in-out infinite; }
.gm-status small { color: var(--gm-dim); font-size: 12px; }
@keyframes gm-breathe { 50% { opacity: .45; } }
.gm-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.gm-btn { height: 34px; margin: 0; padding: 0 15px; border-radius: 17px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--gm-ink); font: inherit; font-size: 13px; line-height: 32px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, opacity .15s, transform .15s; }
.gm-btn:active { transform: scale(.96); background: rgba(255,255,255,.18); }
.gm-btn:disabled { opacity: .4; }
.gm-btn.warm { border-color: rgba(208,69,58,.6); background: rgba(208,69,58,.22); }
.gm-btn small { margin-left: 4px; color: var(--gm-dim); font-size: 11px; }
.gm-end { display: none; }
#gm.over .gm-end { display: flex; animation: gm-rise .45s cubic-bezier(.2,.8,.2,1) both; }
#gm.over .gm-play { display: none; }
@keyframes gm-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .gm-status.think, #gm.over .gm-end { animation: none; } }
/* GOMOKU-STYLE-END */