/* Layout and palette adapted from bao-la-kiswahili-game/public/style.css.
   Copyright (c) 2026 cultivationdata.net; MIT, see ENGINE_LICENSE.txt. */
:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  background: #071011;
  color: #d3e4a5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100svh;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 20%, #203836 0, #101e1f 50%, #071011 100%);
}
.game-shell { width: min(100%, 900px); margin: 0 auto; }
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
h1 { font-family: "Courier New", monospace; font-size: clamp(23px, 3.5vw, 32px); line-height: 1.18; margin: 5px 0 2px; letter-spacing: .025em; }
.kicker { color: #78998a; font: 12px "Courier New", monospace; letter-spacing: .13em; }
.prototype-badge, .opponent-badge { display: inline-block; margin-top: 6px; padding: 4px 7px; font-size: 12px; font-weight: bold; }
.prototype-badge { color: #e2c36b; background: #283b30; border: 1px solid #706c43; }
.opponent-badge { color: #d3e4a5; background: #172c2b; border: 1px solid #78998a; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
button, summary, select {
  color: #d3e4a5; background: #172c2b; border: 1px solid #78998a;
  border-radius: 4px; padding: 10px 12px; min-height: 44px;
  font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer;
}
button:hover:not(:disabled), button:focus-visible, summary:hover, summary:focus-visible, select:focus-visible {
  background: #34544a; outline: 2px solid #d3e4a5; outline-offset: 1px;
}
button:disabled { cursor: default; opacity: .45; }
.toolbar button { font: bold 13px/1.4 "Courier New", monospace; white-space: nowrap; }
.toolbar button[aria-pressed="true"] { background: #34544a; border-color: #d3e4a5; }
#new-game { border-color: #e2c36b; color: #e2c36b; margin-left: 4px; }
.screen-frame { position: relative; border: 4px solid #304846; background: #09100f; box-shadow: 0 6px 22px #0005; }
.start-screen { position: relative; z-index: 3; display: grid; place-items: center; padding: 24px 16px; background: #071011e8; }
.start-screen:not([hidden]) ~ :is(.game-info, .board-surface, .move-choices) { display: none; }
.start-panel { width: min(100%, 360px); min-width: 0; padding: 24px; border: 1px solid #a6975c; background: #172c2b; box-shadow: 6px 6px 0 #07101188; }
.start-panel h2 { font-size: 26px; margin: 6px 0 20px; }
.setup-field { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; margin: 12px 0; color: #e2c36b; font-size: 14px; font-weight: bold; }
.setup-field select { width: 100%; min-width: 0; font-size: 15px; }
.start-button { width: 100%; min-height: 48px; margin-top: 14px; border-color: #e2c36b; color: #071011; background: #e2c36b; font-size: 15px; }
.start-button:hover, .start-button:focus-visible { color: #d3e4a5; }
.hint { margin: 12px 0 0; color: #a4b9a7; font-size: 12px; line-height: 1.7; }
.game-info { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 16px 20px; background: #172c2b; font-family: "Courier New", monospace; }
.turn-info { display: grid; gap: 5px; }
#turn-number { font-size: 12px; color: #a4b9a7; }
#turn-name { font-size: 21px; color: #edf3d9; white-space: nowrap; }
#phase-name { font-size: 14px; letter-spacing: .06em; padding: 6px 9px; color: #e2c36b; border: 1px solid #697050; }
.reserves { display: grid; gap: 5px; justify-self: end; font-size: 14px; }
.reserves > span { display: flex; align-items: baseline; gap: 8px; }
.reserves strong { color: #edf3d9; font-size: 21px; min-width: 2ch; text-align: right; }
.hand-label { color: #a4b9a7; font-size: 12px; }
.reserves .reserved-label { display: inline-flex; gap: 5px; align-items: baseline; color: #e2c36b; font-size: 12px; }
.reserves .reserved-count { min-width: 1ch; font-size: 16px; color: #e2c36b; }
.reserves .active-hand { background: #e2c36b; }
.reserves .donor-hand { background: #ff9b8f; }
.reserves .recipient-hand { background: #8bd7d2; }
.reserves :is(.active-hand, .donor-hand, .recipient-hand),
.reserves :is(.active-hand, .donor-hand, .recipient-hand) :is(strong, small) { color: #172c2b; }
/* DOM buttons retain native keyboard access; geometry follows the public board. */
/* Move the board and labels down together; keep the total vertical padding at 3%. */
.board-surface { padding: 2.6% 4% .4%; background: #a8c98b; }
.board {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 1fr 1fr 10% 1fr 1fr;
  aspect-ratio: 588 / 380; position: relative; padding: 2.8% 1%; align-items: center;
  border: clamp(5px, 1vw, 8px) solid #e2c36b; outline: clamp(3px, .6vw, 6px) solid #34544a;
  background: linear-gradient(to bottom, #52684a 0 48.4%, #172c2b 48.4% 51.6%, #52684a 51.6%);
}
.pit {
  position: relative; display: grid; place-items: center; justify-self: center;
  width: 76%; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0;
  border-radius: 50%; border: 2px solid #78998a; background: #172c2b; color: #d3e4a5;
  font: bold clamp(16px, 3.4vw, 31px)/1 "Courier New", monospace;
}
.pit:nth-child(-n+8) { grid-row: 1; }
.pit:nth-child(n+9):nth-child(-n+16) { grid-row: 2; }
.pit:nth-child(n+17):nth-child(-n+24) { grid-row: 4; }
.pit:nth-child(n+25) { grid-row: 5; }
.pit:disabled { opacity: 1; }
.pit .count { pointer-events: none; }
.pit small { position: absolute; right: 75%; bottom: 100%; font-size: clamp(8px, 1.7vw, 16px); color: #edf3d9; pointer-events: none; }
.pit.north small { right: auto; left: 75%; bottom: auto; top: 100%; }
.pit.house-position { width: 88%; }
.pit.house-position::before { content: ""; position: absolute; inset: -5%; border: 2px solid #ff9b8f; pointer-events: none; }
.pit.house::before { border-color: #d3e4a5; }
.pit.legal { border: clamp(2px, .5vw, 4px) solid #e2c36b; cursor: pointer; }
.pit.selected, .pit.legal:hover { background: #d3e4a5; border-color: #d3e4a5; color: #172c2b; }
.pit:focus-visible { outline: 3px solid #edf3d9; outline-offset: 3px; }
.pit.active-step { z-index: 1; border-color: #8bd7d2; outline: 2px dashed #edf3d9; outline-offset: 4px; }
.pit.capture-step { border-color: #ff9b8f; }
/* Lift the labels toward the frame without changing their occupied height. */
.board-labels { display: grid; grid-template-columns: repeat(8, 1fr); padding: 1.6% 2% .8%; color: #edf3d9; text-align: center; font: bold clamp(8px, 1.6vw, 15px) "Courier New", monospace; }
.board-labels span:nth-child(1) { grid-column: 1; }
.board-labels span:nth-child(2) { grid-column: 5; }
.board-labels span:nth-child(3) { grid-column: 8; }
.move-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; background: #172c2b; }
.move-choices:empty { display: none; }
.move-choices button { min-height: 48px; border-color: #e2c36b; color: #edf3d9; font: bold 14px/1.5 "Courier New", monospace; overflow-wrap: anywhere; }
.move-choices button:only-child { grid-column: 1 / -1; }
.controls { font-size: 15px; line-height: 1.6; min-height: 48px; display: grid; place-items: center; margin: 0 0 12px; padding: 10px 6px; text-align: center; }
.nyakua-status { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #34544a; background: #142827; }
.nyakua-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.nyakua-heading strong, #steal-count { color: #e2c36b; }
#steal-count { font-family: "Courier New", monospace; }
#steal-result { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #b9cdb4; }
details { margin: 12px 0; font-size: 16px; line-height: 1.85; }
summary { display: block; width: 100%; color: #b9cdb4; border-color: #34544a; padding: 12px 14px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-block; width: 24px; color: #e2c36b; }
details[open] > summary::before { content: "−"; }
.rules { margin: 12px 0; padding: 0 16px; border-left: 2px solid #34544a; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.rules-grid b { color: #e2c36b; font-size: 14px; }
.rules-grid p, .footnote { font-size: 14px; }
a { color: #d3e4a5; }
.rules-guide-link { display: grid; gap: 6px; margin: 16px 0 20px; padding: 16px 18px; border: 1px solid #a6975c; border-left: 4px solid #e2c36b; border-radius: 6px; background: #20332e; text-decoration: none; }
.rules-guide-link strong { color: #e2c36b; font-size: 18px; }
.rules-guide-link span { font-size: 14px; }
.rules-guide-link:hover, .rules-guide-link:focus-visible { background: #2c453c; outline: 2px solid #e2c36b; outline-offset: 3px; }
footer { margin-top: 22px; font-size: 12px; line-height: 1.9; color: #9ab3a5; text-align: center; }
@media (max-width: 760px) { .titlebar { align-items: stretch; flex-direction: column; gap: 14px; } }
@media (max-width: 620px) {
  body { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-top: 16px; }
  .titlebar { padding: 0 6px; margin-bottom: 14px; }
  .toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .toolbar button { padding: 9px 4px; font-size: 12px; }
  #new-game { margin-left: 0; }
  .game-info { grid-template-columns: 1fr auto; gap: 8px; padding: 12px 10px; }
  #turn-name { font-size: 18px; }
  #phase-name { font-size: 12px; padding: 5px; }
  .reserves { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; font-size: 12px; }
  .reserves > span { flex-wrap: wrap; gap: 5px; }
  .reserves .reserved-label { flex-basis: 100%; }
  .reserves strong { font-size: 18px; }
  .start-screen:not([hidden]) { position: relative; inset: auto; padding: 12px; }
  .start-screen:not([hidden]) ~ :is(.game-info, .board-surface, .move-choices) { display: none; }
  .start-panel { padding: 20px; }
  .move-choices { gap: 8px; padding: 10px; }
  .controls { font-size: 14px; }
  .rules-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .screen-frame { box-shadow: none; } }