html { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.45 ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--paper) 88%, white) 0%, var(--paper) 68%);
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header, .panel { padding: 1.1rem 1.3rem; }
h1 { margin: 0; font-weight: 500; letter-spacing: 0.03em; }
#who, .quiet { color: var(--muted); margin: 0.2rem 0 0; }
.bar {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  max-width: 592px; margin: 0 auto; padding: 0 8px;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; letter-spacing: 0.04em; }
.brand svg { width: 24px; height: 28px; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  max-height: 80vh; overflow: auto; padding: 16px 16px 28px;
  background: var(--panel); border-radius: 16px 16px 0 0;
}
.sheet form, .sheet .tools { display: grid; gap: 10px; }
.sheet input, .sheet select, .sheet button, #show-new { min-height: 48px; font-size: 16px; }
#show-new, .sheet button[type="submit"] {
  width: 100%; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
form, .tools { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; }
label { display: grid; gap: 0.25rem; font-size: 0.92rem; }
input, select, button {
  font: inherit;
  color: inherit;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}
button { cursor: pointer; }
button:hover { border-color: #b9a48c; }
.error { color: #8d3b2c; }
.table { display: grid; justify-items: center; gap: 0.6rem; }
.meta { width: min(92vw, 34rem); display: flex; justify-content: space-between; }
.board-frame { display: grid; grid-template-columns: 1.2rem min(calc(100vw - 32px), 560px); }
.files, .ranks { display: grid; color: var(--muted); font: 0.75rem/1 ui-sans-serif, sans-serif; }
.files { grid-template-columns: repeat(8, 1fr); text-align: center; margin-left: 1.2rem; width: min(calc(100vw - 32px), 560px); }
.ranks { grid-template-rows: repeat(8, 1fr); align-items: center; justify-items: center; }
#board {
  width: min(calc(100vw - 32px), 560px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(36, 28, 22, 0.12);
}
.sq {
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
}
.sq svg { width: 78%; height: 78%; }
.piece-w { fill: var(--piece-w); stroke: var(--rim-w); }
.piece-b { fill: var(--piece-b); stroke: var(--rim-b); }
.light { background: var(--light); }
.dark { background: var(--dark); }
.sq.last { background: var(--last); }
.sq.selected { background: var(--select); }
.sq.legal::after, .sq.capture::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--mark);
}
.sq.legal::after { width: 18%; height: 18%; }
.sq.capture::after { width: 78%; height: 78%; background: transparent; box-shadow: inset 0 0 0 4px var(--mark); }
#promote { display: flex; gap: 0.4rem; }
#promote[hidden] { display: none; }
#promote button { width: 3rem; height: 3rem; padding: 0.2rem; }
.game {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 0.4rem;
  background: transparent;
}
.game.on { border-color: var(--ink); }