:root {
  color: #241f1a;
  background: #e7e0d2;
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --ink: #241f1a;
  --paper: #f7f3ea;
  --line: #d9d0c0;
  --light: #f0d9b5;
  --dark: #b58863;
  --moved-light: #f3e58a;
  --moved-dark: #d9c15a;
  --live: #241f1a;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

button, input { font: inherit; color: inherit; }

button {
  padding: 9px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}

button.primary { background: var(--ink); color: var(--paper); }

button.ghost { border-color: transparent; padding-inline: 8px; }

button.wide { width: 100%; }

button:disabled { opacity: 0.4; cursor: default; }

button.on { background: var(--ink); color: var(--paper); }

input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf8;
}

h1, h2, p { margin: 0; }

h1 { font-size: 2rem; font-weight: 560; letter-spacing: -0.02em; }

h2 { font-size: 1.05rem; font-weight: 600; }

.lede { font-size: 1.15rem; line-height: 1.45; color: #4a433a; }

.fine { color: #5c564c; line-height: 1.4; }

.brand { display: flex; align-items: center; gap: 8px; }

.mark { font-size: 1.35rem; line-height: 1; }

.word { font-weight: 600; letter-spacing: 0.04em; }

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255, 252, 245, 0.9), transparent 70%),
    #e7e0d2;
}

.gate-card {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(50, 36, 16, 0.12);
}

.page { padding: 28px 24px 48px; }

.stage {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.table, .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty {
  min-height: 70vh;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
}

.empty-mark { font-size: 3rem; line-height: 1; opacity: 0.55; }

.clock {
  width: min(100%, 560px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.55);
}

.clock.live { background: var(--live); color: var(--paper); }

.who { font-size: 0.95rem; }

.time { font-variant-numeric: tabular-nums; font-size: 1.35rem; letter-spacing: 0.02em; }

.board {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(48, 32, 12, 0.18);
}

.rank { display: contents; }

.sq {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-variant-emoji: text;
}

.sq.light { background: var(--light); text-shadow: 0 1px 0 rgba(90, 55, 20, 0.25); }
.sq.dark { background: var(--dark); text-shadow: 0 0 1px #f8f1e4, 0 1px 0 #f8f1e4; }
.sq.moved.light { background: var(--moved-light); }
.sq.moved.dark { background: var(--moved-dark); }
.sq.selected { box-shadow: inset 0 0 0 3px var(--ink); }
.sq.check { background: #d4655a; }

.coord {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
}

.sq.light .coord { color: #7a5c3a; }
.sq.dark .coord { color: #f3e6c8; }
.coord.rank { top: 3px; left: 4px; }
.coord.file { right: 4px; bottom: 3px; }

.status { width: min(100%, 560px); text-align: center; font-size: 1.05rem; }

.rail { display: flex; flex-direction: column; gap: 14px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.account { display: flex; align-items: center; gap: 4px; }

.you { font-size: 0.95rem; }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.card.quiet { background: transparent; }

.seg { display: flex; gap: 8px; }

.seg button { flex: 1; }

.inline { display: flex; gap: 8px; }

.inline input { flex: 1; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; }

.notice { min-height: 1.3em; color: #8c3a2f; }

@media (max-width: 860px) {
  .page { padding: 16px 12px 32px; }
  .stage { grid-template-columns: 1fr; }
  .empty { min-height: 28vh; }
  .rail { order: 2; }
}