:root {
  --bg: #11131a;
  --panel: rgba(35, 39, 51, .86);
  --text: #f6f3ea;
  --muted: #a7a9b3;
  --accent: #e9a84c;
  --wood: #d9a45f;
  --wood-dark: #b97935;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(77, 91, 137, .24), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(190, 119, 43, .13), transparent 35%),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.app { width: min(94vw, 680px); margin: 0 auto; padding: 42px 0 50px; }
.game-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; color:#777b85; font-size:12px; }
.game-nav a { color:var(--text); text-decoration:none; }
.game-nav a:hover { color:var(--accent); }
.hero { text-align: center; margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(36px, 7vw, 56px); letter-spacing: .08em; }
.subtitle { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.game-card {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:18px; padding:4px; border-radius:10px; background:rgba(0,0,0,.2); }
.mode-switch button { min-height:38px; color:var(--muted); background:transparent; border-radius:7px; font-size:13px; }
.mode-switch button.active { color:#20170c; background:var(--accent); }
.difficulty-row { display:flex; align-items:center; justify-content:space-between; margin:-7px 0 17px; color:var(--muted); font-size:11px; }
.difficulty-row.hidden { display:none; }
.difficulty-row>div { display:flex; gap:5px; }
.difficulty-row button { min-height:30px; padding:0 12px; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:var(--muted); background:transparent; font-size:11px; }
.difficulty-row button.active { color:#20170c; border-color:var(--accent); background:var(--accent); }
.game-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.turn-card { display: flex; align-items: center; gap: 11px; }
.turn-card small, .move-count small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.turn-card strong { font-size: 16px; }
.move-count { text-align: right; }
.move-count strong { font-family: Georgia, serif; color: var(--accent); font-size: 25px; }
.stone { display: block; width: 29px; height: 29px; border-radius: 50%; }
.stone.black { border: 1px solid #3c3d42; background: radial-gradient(circle at 34% 28%, #65666b 0, #202126 30%, #07080a 72%); box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.stone.white { border: 1px solid #bbb9b0; background: radial-gradient(circle at 34% 28%, #fff 0, #eeeae0 46%, #c9c4b8 100%); box-shadow: 0 4px 8px rgba(0,0,0,.25); }

.board-shell {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #edbd78, var(--wood));
  box-shadow: inset 0 0 45px rgba(117, 67, 24, .25), 0 12px 30px rgba(0,0,0,.25);
}
canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: 18px; }
button { min-height: 48px; border: 0; border-radius: 12px; font: inherit; font-weight: 750; cursor: pointer; transition: transform .15s, opacity .15s, background .15s; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.primary { color: #20170c; background: linear-gradient(135deg, #f2c46f, var(--accent)); box-shadow: 0 7px 20px rgba(233,168,76,.18); }
.secondary { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.hint { margin: 15px 0 0; color: #858791; font-size: 12px; text-align: center; }

.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; background: rgba(5,6,9,.72); backdrop-filter: blur(8px); transition: .2s; }
.modal.show { visibility: visible; opacity: 1; }
.modal-card { width: min(90vw, 360px); padding: 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; text-align: center; background: #252833; box-shadow: 0 25px 80px rgba(0,0,0,.55); transform: translateY(10px) scale(.97); transition: .25s; }
.modal.show .modal-card { transform: none; }
.winner-stone { width: 52px; height: 52px; margin: 0 auto 20px; }
.modal h2 { margin: 4px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 30px; }
.modal-card > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); }
.modal button { width: 100%; }

@media (max-width: 520px) {
  .app { padding-top: 25px; }
  .game-card { padding: 13px; border-radius: 18px; }
  .board-shell { padding: 4px; }
  .hint { font-size: 11px; }
}