/* yut-nori.css */

:root {
  --yn-team-a: #c0392b;
  --yn-team-b: #1a5496;
}

/* ── 2-col layout: board left, panel right ───────────────────────────────── */

.yn-game-container {
  background: #1c0c04;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "board hud"
    "board throw"
    "board pending"
    "board controls";
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: start;
  margin-block: var(--space-2);
}

/* ── Board ───────────────────────────────────────────────────────────────── */

.yn-board-wrap {
  grid-area: board;
  line-height: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,155,60,0.25);
}

#yn-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

/* ── Right panel ─────────────────────────────────────────────────────────── */

.yn-hud {
  grid-area: hud;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.yn-team-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  color: #fff;
  display: block;
}

.yn-team-label--a { background: var(--yn-team-a); }
.yn-team-label--b { background: var(--yn-team-b); }

.yn-status {
  font-size: var(--text-xs);
  color: #a09080;
  margin: 0;
  line-height: 1.4;
}

.yn-throw-result {
  grid-area: throw;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #f0ddb0;
  min-height: 1.4em;
}

.yn-throw-result .yn-throw-ko { color: #e05050; }

.yn-pending-moves {
  grid-area: pending;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 34px;
  align-items: center;
}

.yn-move-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-gold);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.yn-controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}

#yn-throw-btn {
  width: 100%;
  min-height: 42px;
  font-size: var(--text-sm);
  font-weight: 600;
}

#yn-new-btn {
  width: 100%;
  min-height: 36px;
  font-size: var(--text-sm);
}

.fn-ai-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #c8a060;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.fn-ai-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #C89B3C;
  cursor: pointer;
}

/* ── Mobile: single column ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .yn-game-container {
    grid-template-columns: 1fr;
    grid-template-areas: "hud" "board" "throw" "pending" "controls";
    padding: var(--space-3);
    row-gap: var(--space-2);
  }
  .yn-board-wrap { justify-self: center; }
  .yn-hud        { flex-direction: row; justify-content: space-between; align-items: center; }
  .yn-controls   { flex-direction: row; flex-wrap: wrap; }
  #yn-throw-btn  { flex: 1; }
  #yn-new-btn    { width: auto; }
}