.hutaro-othello-app {
  --othello-board-green: #2b7a45;
  --othello-board-green-dark: #17472b;
  --othello-panel-bg: #fbfbf7;
  --othello-panel-line: #d8ddd3;
  --othello-accent: #d8a728;
  margin: 1.5rem 0 2rem;
}

.hutaro-othello-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.hutaro-othello-board-wrap {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(180px, 1fr);
  gap: 1rem;
  align-items: start;
}

.hutaro-othello-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: min(100%, 580px);
  aspect-ratio: 1;
  margin: 0;
  border: 4px solid var(--othello-board-green-dark);
  background: var(--othello-board-green);
}

.hutaro-othello-cell {
  position: relative;
  border: 1px solid rgba(18, 52, 31, 0.58);
  background: linear-gradient(180deg, #2f8a4f 0%, #256e3d 100%);
  padding: 0;
  cursor: default;
  min-width: 0;
}

.hutaro-othello-cell.is-clickable {
  cursor: pointer;
}

.hutaro-othello-legal-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(250, 214, 84, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 244, 205, 0.16);
  pointer-events: none;
  z-index: 1;
}

.hutaro-othello-stone {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.16), inset 0 -3px 6px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.hutaro-othello-stone.is-black {
  background: radial-gradient(circle at 35% 32%, #434343 0%, #111 58%, #000 100%);
}

.hutaro-othello-stone.is-white {
  background: radial-gradient(circle at 35% 32%, #fff 0%, #f6f6f6 60%, #dadada 100%);
}

.hutaro-othello-panel {
  background: var(--othello-panel-bg);
  border: 1px solid var(--othello-panel-line);
  border-radius: 18px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 14px 30px rgba(18, 24, 15, 0.06);
}

.hutaro-othello-panel h2,
.hutaro-othello-panel h3,
.hutaro-othello-panel p {
  margin-top: 0;
}

.hutaro-othello-controls,
.hutaro-othello-board-info {
  display: grid;
  gap: 0.7rem;
}

.hutaro-othello-group {
  display: grid;
  gap: 0.42rem;
}

.hutaro-othello-group.is-hidden {
  display: none;
}

.hutaro-othello-replay-meta.is-hidden {
  display: none;
}

.hutaro-othello-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #334236;
}

.hutaro-othello-panel input,
.hutaro-othello-panel select,
.hutaro-othello-panel button {
  font: inherit;
}

.hutaro-othello-panel select,
.hutaro-othello-panel input {
  width: 100%;
  border: 1px solid #cfd5cb;
  border-radius: 10px;
  padding: 0.56rem 0.72rem;
  background: #fff;
}

.hutaro-othello-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.hutaro-othello-actions.is-hidden {
  display: none;
}

.hutaro-othello-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #334236;
  font-size: 0.92rem;
}

.hutaro-othello-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.hutaro-othello-button {
  border: 1px solid #bcc5b8;
  border-radius: 999px;
  padding: 0.54rem 0.92rem;
  background: #fff;
  color: #27352a;
  cursor: pointer;
}

.hutaro-othello-button.is-primary {
  background: linear-gradient(180deg, #2e7d45 0%, #1f6033 100%);
  border-color: #1d5930;
  color: #fff;
}

.hutaro-othello-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.hutaro-othello-stat-list {
  display: grid;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hutaro-othello-stat-list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.5rem;
  padding: 0.08rem 0;
  border: 0;
  background: transparent;
}

.hutaro-othello-stat-label {
  color: #617063;
  font-size: 0.84rem;
}

.hutaro-othello-status {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #405045;
  line-height: 1.65;
  min-height: calc(1.65em * 2);
}

.hutaro-othello-error {
  margin: 0;
  color: #9a2f2f;
  font-weight: 700;
}

.hutaro-othello-replay-meta {
  margin: -0.1rem 0 0;
  color: #6b786d;
  font-size: 0.88rem;
}

@media (max-width: 860px) {
  .hutaro-othello-board-wrap {
    grid-template-columns: 1fr;
  }

  .hutaro-othello-board {
    width: min(100%, 640px);
    margin: 0 auto;
  }
}