/* =====================================================================
   Stone Garden: Reversi in a dry garden. A cedar-framed bed of raked
   gravel is the board, the stones are black slate and white quartz from
   the stream, and the garden round it is moss. Cards are pale green washi
   with ink lettering; buttons are cedar.
   ===================================================================== */

:root {
  --moss: #5f7438;
  --moss-deep: #3f5222;
  --moss-hi: #8aa257;
  --gravel: #ddd6c6;
  --gravel-dim: #c9c1ae;
  --cedar: #4a3424;
  --cedar-deep: #2c1e14;
  --cedar-hi: #6e4f37;
  --washi: #eef1dd;
  --ink: #2a2a22;
  --ink-dim: #5e5f4f;
  --maple: #b2452f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  color: var(--washi);
  background:
    radial-gradient(ellipse at 20% 15%, rgba(138, 162, 87, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(63, 82, 34, 0.55), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px),
    linear-gradient(170deg, #6c8241, var(--moss) 45%, #4a5c2b);
  background-attachment: fixed;
  min-height: 100vh;
}

.nav-back-games {
  position: fixed; top: 16px; left: 18px; z-index: 50;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--washi); text-decoration: none;
  background: linear-gradient(175deg, var(--cedar-hi), var(--cedar));
  border: 2px solid var(--cedar-deep); border-radius: 8px;
  box-shadow: 0 2px 6px rgba(20, 14, 8, 0.4);
  padding: 6px 14px;
}
.nav-back-games:hover { filter: brightness(1.1); }

/* ---- the garden ----------------------------------------------------------- */
.garden {
  max-width: 600px; margin: 0 auto; padding: 62px 16px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.title {
  font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 34px; letter-spacing: 3px;
  color: var(--washi); text-shadow: 0 2px 0 rgba(30, 40, 14, 0.6);
}
.tally { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
/* (game.js makes the two sides as wide as the wider, so the turn line
   between them sits in the middle whatever the names) */
.side { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: rgba(30, 40, 14, 0.35); border: 1px solid rgba(238, 241, 221, 0.18); }
.side b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.side small { font-size: 13px; color: #d9dfc2; }
.side.now { border-color: var(--washi); box-shadow: 0 0 0 2px rgba(238, 241, 221, 0.35); }
.turn { font-family: "Zen Old Mincho", serif; font-size: 16px; font-weight: 700; color: var(--washi); min-width: 8.5em; text-align: center; }

.stone { display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.stone.b { background: radial-gradient(circle at 35% 30%, #6b7077, #23262a 55%, #101214); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.stone.w { background: radial-gradient(circle at 35% 30%, #ffffff, #ece8de 55%, #c9c3b5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* the bed: raked gravel in a cedar frame, moss at its corners */
.frame {
  width: min(520px, calc(100vw - 32px), calc(100vh - 330px)); min-width: 240px;
  width: min(520px, calc(100vw - 32px), calc(100dvh - 330px));
  aspect-ratio: 1; padding: 12px; border-radius: 6px;
  background: linear-gradient(160deg, var(--cedar-hi), var(--cedar) 40%, var(--cedar-deep));
  box-shadow: inset 0 0 0 2px rgba(255, 230, 200, 0.12), 0 10px 26px rgba(20, 28, 8, 0.5);
  position: relative;
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 46px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--moss-hi), var(--moss) 60%, var(--moss-deep));
  box-shadow: 0 2px 4px rgba(20, 28, 8, 0.4);
}
.frame::before { top: -12px; left: -14px; }
.frame::after { bottom: -12px; right: -14px; }
.board {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  background:
    repeating-linear-gradient(0deg, rgba(120, 108, 86, 0.16) 0 2px, transparent 2px 7px),
    linear-gradient(170deg, #e4ddcd, var(--gravel) 50%, var(--gravel-dim));
  border-radius: 2px;
}
.cell {
  position: relative; border: 0; padding: 0; background: transparent; cursor: default;
  border-right: 1px solid rgba(90, 80, 60, 0.28); border-bottom: 1px solid rgba(90, 80, 60, 0.28);
  font: inherit;
}
.cell:nth-child(8n) { border-right: 0; }
.cell:nth-last-child(-n + 8) { border-bottom: 0; }
.cell:focus { outline: none; }
.cell.cursor::after {
  content: ""; position: absolute; inset: 3px; border: 2px solid var(--maple); border-radius: 4px; pointer-events: none;
}
/* a place a stone can go: a ring raked into the gravel */
.cell.can { cursor: pointer; }
.cell.can::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(90, 80, 60, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.cell.can:hover::before { border-color: rgba(42, 42, 34, 0.75); }
/* the board's keys (a keyboard only): each arrow on the side of the frame it
   walks the cursor toward, and Enter hung on the cursor's place, where it puts
   the stone. On the cedar, so the gravel stays clear */
.caps { position: absolute; inset: 0; pointer-events: none; }
.caps kbd { position: absolute; font-size: 12px; line-height: 14px; padding: 0 4px; transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(20, 14, 8, 0.45); }
.caps .up { left: 50%; top: 6px; }
.caps .down { left: 50%; top: calc(100% - 6px); }
.caps .left { left: 6px; top: 50%; }
.caps .right { left: calc(100% - 6px); top: 50%; }
.caps .enter {
  left: calc(12px + (100% - 24px) * (var(--c, 0) + 0.5) / 8);
  top: calc(12px + (100% - 24px) * (var(--r, 0) + 1) / 8 - 3px);
  background: var(--maple); border-color: rgba(255, 236, 220, 0.6);
}
.caps .enter[hidden] { display: none; }
.cell.nope::after { content: ""; position: absolute; inset: 6px; border: 2px solid var(--maple); border-radius: 50%; pointer-events: none; }
.cell.hint::before { border-color: var(--maple); width: 46%; height: 46%; border-width: 3px; }
html.fx-on .cell.hint::before { animation: sg-hint 1.1s ease-in-out infinite; }
@keyframes sg-hint { 50% { transform: translate(-50%, -50%) scale(1.18); } }

/* the stones themselves */
.cell .st {
  position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; border-radius: 50%;
  box-shadow: 0 3px 4px rgba(40, 32, 20, 0.45);
}
.cell .st.b { background: radial-gradient(circle at 34% 28%, #747a82, #2a2d32 50%, #0f1113); }
.cell .st.w { background: radial-gradient(circle at 34% 28%, #ffffff, #efebe2 50%, #c8c1b2); }
.cell .st.last::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--moss-hi); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* with Visual FX on a stone is set down and the line turns over, one after another */
html.fx-on .cell .st.drop { animation: sg-drop 0.22s ease-out; }
html.fx-on .cell .st.turn { animation: sg-turn 0.32s ease-in-out both; }
@keyframes sg-drop { from { transform: scale(1.25); opacity: 0.4; } }
@keyframes sg-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.06); } 100% { transform: scaleX(1); } }

.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tools button, .card .row button, .seg button, .playbtn {
  font-family: inherit; cursor: pointer;
}
.tools button {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--washi);
  background: linear-gradient(175deg, var(--cedar-hi), var(--cedar));
  border: 2px solid var(--cedar-deep); border-radius: 8px; padding: 4.75px 12px 7.25px;
  box-shadow: 0 2px 4px rgba(20, 14, 8, 0.35);
}
/* The word and its keycap side by side, each in the middle of the face top
   to bottom. In one line the keycap stood on the word's baseline, low; and
   Zen Kaku Gothic New's capitals sit 1.25 px below the middle of its line at
   this size, so the padding lifts the line that much and the keycap, centred
   on the line, comes back down by the same. */
.tools button::after { position: relative; top: 1.25px; }
.tools button:disabled { opacity: 0.45; cursor: default; }
.tools button:not(:disabled):hover { filter: brightness(1.12); }
.keys { font-size: 13px; color: #e3e8cf; text-align: center; }
.keys kbd { margin: 0 1px; }
.record { font-size: 14px; color: #e3e8cf; min-height: 18px; text-align: center; }

kbd {
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--washi); background: var(--cedar-deep);
  border: 1px solid rgba(238, 241, 221, 0.35); border-radius: 4px; padding: 0 5px;
}

/* ---- the cards: pale green washi, ink lettering --------------------------- */
.panel {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 16px; overflow-y: auto;
  background: rgba(28, 38, 12, 0.5);
}
.panel[hidden] { display: none; }
.panel > .card { margin: auto; }
.card {
  width: min(460px, 100%); color: var(--ink);
  background:
    repeating-linear-gradient(115deg, rgba(120, 130, 90, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(175deg, #f4f6e6, var(--washi) 60%, #e2e7cb);
  border: 1px solid #c9cfae; border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(74, 52, 36, 0.85), 0 16px 40px rgba(20, 28, 8, 0.5);
  padding: 22px 22px 18px;
}
.card h2 { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 30px; letter-spacing: 2px; color: var(--ink); }
.card .tag { color: var(--maple); font-family: "Zen Old Mincho", serif; font-weight: 700; margin: 2px 0 10px; }
.card .how { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 12px; }
.card .label { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); margin: 6px 0 6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.seg button {
  font-size: 15px; text-align: left; color: var(--ink);
  background: rgba(255, 255, 255, 0.55); border: 2px solid #c3c9a6; border-radius: 6px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.seg button b { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.seg button small { font-size: 12.5px; color: var(--ink-dim); }
.seg button.on { background: linear-gradient(175deg, var(--moss-hi), var(--moss)); border-color: var(--moss-deep); color: #fbfdf0; }
.seg button.on small { color: #edf2d8; }
.seg[hidden], .label[hidden] { display: none; }
.playbtn, .card .row button:first-child {
  font-size: 19px; font-weight: 700; color: #fbf6ea;
  background: linear-gradient(175deg, var(--cedar-hi), var(--cedar) 55%, var(--cedar-deep));
  border: 2px solid var(--cedar-deep); border-radius: 8px; padding: 10px 14px;
  box-shadow: 0 3px 0 #1a120b;
}
.playbtn { width: 100%; margin-top: 8px; }
.playbtn:active, .card .row button:active { transform: translateY(2px); }

.card.end { text-align: center; }
.card .big { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 34px; margin: 6px 0 2px; }
.card .stats { font-size: 15px; color: var(--ink-dim); margin: 2px 0 16px; white-space: pre-line; }
.card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.card .row button { font-size: 16px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.6);
  border: 2px solid #c3c9a6; border-radius: 8px; padding: 8px 16px; }
.card .row button:first-child { font-size: 16px; padding: 8px 16px; }

@media (max-width: 520px) {
  .garden { padding-top: 58px; padding-bottom: 12px; gap: 7px; }
  .title { font-size: 27px; line-height: 1.15; }
  /* the turn between the two sides: each side's name goes under its stone and
     count, which leaves the middle room for two lines ("the master is thinking") */
  .tally { justify-content: space-between; gap: 6px; min-height: 46px; }
  .side { display: grid; grid-template-areas: "stone count" "name name"; column-gap: 6px; row-gap: 0; justify-items: center; justify-content: center;
    padding: 3px 10px 4px; border-radius: 14px; flex: none; }
  #side-w { grid-template-areas: "count stone" "name name"; }
  .side .stone { grid-area: stone; }
  .side b { grid-area: count; font-size: 19px; line-height: 1.15; }
  .side small { grid-area: name; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
  .turn { flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.25; }
  .frame { padding: 8px; width: min(calc(100vw - 24px), calc(100vh - 280px)); width: min(calc(100vw - 24px), calc(100dvh - 280px)); }
  .frame::before { top: -9px; left: -8px; }
  .frame::after { bottom: -9px; right: -8px; }
  .seg { grid-template-columns: 1fr; }
  .seg.row2 { grid-template-columns: 1fr 1fr; }
  .panel { padding-top: 62px; }
}
/* the four tools still on one line on the narrowest phones */
@media (max-width: 360px) {
  .tools button { padding: 4.75px 9px 7.25px; }
}

/* the shared pause card's backdrop (game-shell.js), the moss's shade */
.gs-pause { background: rgba(28, 38, 12, 0.55); }