:root{
  --bg:#0f0f12;
  --panel:#15161a;
  --panel-2:#1b1c22;
  --text:#f2f3f7;
  --muted:#a9adba;
  --accent:#5da8ff;
  --good:#7ee787;
  --bad:#ff7b7b;
  --shadow: 0 10px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body{
  margin:0;
  background: #0b0c10;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

.app{
  max-width: min(1100px, 92vw);
  margin: 36px auto 64px;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #242632;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

h1{
  margin: 4px 8px 18px;
  letter-spacing: .03em;
  font-size: clamp(20px, 3vw, 28px);
}

.controls{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 8px 8px 16px;
}
@media (max-width: 760px){
  .controls{ grid-template-columns: 1fr; }
}

.status{
  display: flex;
  gap: 18px;
  align-items: baseline;
  color: var(--muted);
}
.status #turnLabel{
  font-weight: 700;
  color: var(--text);
}
.status #resultLabel{
  min-height: 1.4em;
  color: var(--good);
}

.buttons{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.buttons button, .buttons select{
  background: #22242e;
  color: var(--text);
  border: 1px solid #2e3140;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
  font-weight: 600;
}
.buttons button:hover, .buttons select:hover{
  background: #2a2d3a;
  border-color: #3a3f53;
}
.buttons button:active{
  transform: translateY(1px);
}
.buttons #resetBtn{
  border-color: #3a3f53;
}
.buttons #undoBtn, .buttons #redoBtn{
  border-color: #32364a;
}
.size{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
}

.board-wrap{
  display: grid;
  place-items: center;
  padding: 12px;
  background: #0f1014;
  border-radius: 16px;
  border: 1px solid #232633;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

canvas#board{
  width: min(88vw, 640px);
  height: min(88vw, 640px);
  max-width: 640px;
  max-height: 640px;
  background: #d4b07b; /* 木目風の下地色 */
  border-radius: 12px;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
  touch-action: manipulation; /* スクロールでの誤操作軽減 */
}

.help{
  margin: 18px 8px 0;
  color: var(--muted);
}
.help summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}
footer{
  margin-top: 22px;
  color: var(--muted);
  text-align: right;
}

.options{
  margin: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
}
.options label{
  display: flex;
  align-items: center;
  gap: 8px;
}