* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #1a1a2e;
  color: #eee;
  font-family: 'Noto Sans TC', -apple-system, sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.app {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
}
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.header h1 {
  font-size: 1.4rem;
  background: linear-gradient(135deg, #ff6b6b, #ffd93d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.move-count {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
}
.status-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 6px 16px;
  border-radius: 8px;
  text-align: center;
}
.status-text.red-turn { color: #ff6b6b; background: rgba(255,107,107,0.1); }
.status-text.black-turn { color: #aaa; background: rgba(255,255,255,0.05); }
.status-text.win { color: #ffd93d; background: rgba(255,217,61,0.15); font-size: 1.3rem; }
.board-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.board-3d {
  width: 100%;
  max-width: 580px;
  height: 500px;
  min-height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  touch-action: none;
  background: #0a0a1a;
}
canvas { display: block; touch-action: none; }
.controls {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.controls button {
  background: rgba(255,255,255,0.08);
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}
.controls button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.controls button:active { transform: scale(0.95); }
@media (max-width: 400px) {
  .header h1 { font-size: 1.2rem; }
  .controls button { padding: 8px 14px; font-size: 0.85rem; }
}

.theme-btn { background:none; border:none; font-size:1.3rem; cursor:pointer; padding:4px 8px; }
.theme-panel {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 8px; margin: 4px 0;
}
.theme-opt {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  font-size: 0.85rem; border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06); color: #ccc; transition: all 0.2s;
}
.theme-opt:hover { background: rgba(255,255,255,0.12); color: #fff; }
.theme-opt.active { border-color: #ffd93d; color: #ffd93d; background: rgba(255,217,61,0.1); }
body.theme-jade { background: #0a1a0a; }
body.theme-ink { background: #2a2820; }
body.theme-neon { background: #050510; }
body.theme-classic { background: #1a1a2e; }

.teach-hint {
  padding: 8px 16px; margin: 4px 0; border-radius: 8px;
  font-size: 0.9rem; text-align: center; max-width: 580px;
  transition: all 0.3s;
}
.teach-hint.good { background: rgba(0,200,80,0.15); color: #4ade80; }
.teach-hint.ok { background: rgba(255,200,0,0.1); color: #fbbf24; }
.teach-hint.warn { background: rgba(255,150,0,0.15); color: #fb923c; }
.teach-hint.bad { background: rgba(255,50,50,0.15); color: #f87171; }
.diff-select {
  background: rgba(255,255,255,0.08); color: #ddd;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; cursor: pointer;
}

.status-text.draw { color: #94a3b8; background: rgba(148,163,184,0.15); font-size: 1.3rem; }

.icon-btn { background:none; border:none; font-size:1.2rem; cursor:pointer; padding:4px 6px; opacity:0.7; transition:opacity 0.2s; }
.icon-btn:hover { opacity:1; }
.bgm-info { font-size:0.8rem; color:rgba(255,255,255,0.5); text-align:center; padding:2px 0; }
.stats-panel {
  background: rgba(0,0,0,0.85); border-radius: 12px; padding: 16px; margin: 8px 0;
  max-width: 580px; width: 100%; color: #ddd; font-size: 0.9rem;
}
.stats-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 8px; text-align: center; }
.stats-total { margin-bottom: 8px; text-align: center; }
.stats-total .sw { color: #4ade80; }
.stats-total .sl { color: #f87171; }
.stats-diff { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.stats-row { padding: 4px 8px; background: rgba(255,255,255,0.05); border-radius: 6px; }
.stats-close { display:block; margin:0 auto; padding:6px 20px; background:rgba(255,255,255,0.1); color:#ddd; border:1px solid rgba(255,255,255,0.15); border-radius:6px; cursor:pointer; }