:root {
  --lacquer: #16110E;
  --lacquer-2: #1F1813;
  --lacquer-3: #2A211A;
  --rice: #E4DAC3;
  --bone: #EFE7D6;
  --ash: #9C917E;
  --cinnabar: #B7382A;
  --cinnabar-lit: #D4503C;
  --gold: #C79A3E;
  --pine: #33513B;
  --rule: rgba(239, 231, 214, 0.14);
  --display: "Palatino Linotype", "Book Antiqua", Palatino, "Songti SC", "Source Han Serif SC", "Times New Roman", serif;
  --utility: "Jost", "Futura", "Century Gothic", "URW Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--lacquer);
  color: var(--bone);
  font-family: var(--utility);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(199, 154, 62, 0.10), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(183, 56, 42, 0.10), transparent 50%);
}

button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- frame ---------- */

.frame { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex; align-items: baseline; gap: 18px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--display);
  font-size: 21px; letter-spacing: 0.30em; text-transform: uppercase;
  margin: 0; font-weight: 400;
}
.wordmark span { color: var(--cinnabar); }
.season { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); }
.topbar .spacer { flex: 1; }
.ghost {
  background: none; border: 1px solid var(--rule); color: var(--ash);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 1px;
}
.ghost:hover { color: var(--bone); border-color: var(--ash); }

.body { display: flex; flex: 1; min-height: 0; }

.boardwrap {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
canvas { display: block; max-width: 100%; max-height: 100%; touch-action: manipulation; }

.rail {
  width: 344px; flex: none; border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, var(--lacquer-2), var(--lacquer));
}
.rail section { padding: 15px 18px; border-bottom: 1px solid var(--rule); }
.rail h2 {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ash); margin: 0 0 11px; font-weight: 500;
}

/* ---------- turn card ---------- */

.turncard { display: flex; align-items: center; gap: 13px; }
.turncard .who { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.turncard .state { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); margin-top: 3px; }

.orders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.order {
  background: var(--lacquer-3); border: 1px solid var(--rule); color: var(--bone);
  padding: 11px 8px; border-radius: 1px; text-align: left;
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
}
.order small { display: block; text-transform: none; letter-spacing: 0; color: var(--ash); font-size: 11px; margin-top: 3px; }
.order:hover:not(:disabled) { border-color: var(--gold); }
.order:disabled { opacity: 0.34; }
.order.primary { background: var(--cinnabar); border-color: var(--cinnabar); }
.order.primary:hover:not(:disabled) { background: #C9412F; }
.order.wide { grid-column: 1 / -1; }

.workshop { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 11px; color: var(--ash); }
.workshop .seg { display: flex; border: 1px solid var(--rule); border-radius: 1px; overflow: hidden; }
.workshop .seg button {
  background: none; border: 0; padding: 6px 11px; color: var(--ash);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.workshop .seg button[aria-pressed="true"] { background: var(--gold); color: #1B1408; }

/* ---------- readouts ---------- */

.readout { font-size: 13px; line-height: 1.55; color: var(--rice); min-height: 62px; }
.readout .dim { color: var(--ash); }
.odds { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-family: var(--display); }
.odds b { font-size: 26px; font-weight: 400; }
.odds .verdict { font-family: var(--utility); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.verdict.win { color: #7FB77E; }
.verdict.trade { color: var(--gold); }
.verdict.loss { color: var(--cinnabar); }

/* ---------- roster ---------- */

table.roster { width: 100%; border-collapse: collapse; font-size: 12px; }
table.roster th {
  font-weight: 500; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ash); text-align: right; padding-bottom: 6px;
}
table.roster th:first-child, table.roster td:first-child { text-align: left; }
table.roster td { padding: 5px 0; border-top: 1px solid rgba(239,231,214,0.07); text-align: right; }
table.roster td:first-child { display: flex; align-items: center; gap: 8px; }
table.roster tr.out { opacity: 0.36; }
table.roster tr.now td { color: var(--bone); }
table.roster tr.now td:first-child { font-weight: 600; }
.seal { width: 17px; height: 17px; flex: none; }

/* ---------- log ---------- */

.logwrap { flex: 1; min-height: 90px; overflow-y: auto; padding: 13px 18px 20px; }
.logwrap p { margin: 0 0 9px; font-size: 12px; line-height: 1.5; color: var(--ash); }
.logwrap p b { color: var(--rice); font-weight: 500; }
.logwrap p.strike { color: var(--rice); }

/* ---------- overlays ---------- */

.veil {
  position: fixed; inset: 0; background: rgba(12, 9, 7, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 20;
}
.veil[hidden] { display: none; }
.panel {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--lacquer-2); border: 1px solid var(--rule); padding: 30px 32px 26px;
}
.panel h1 {
  font-family: var(--display); font-weight: 400; font-size: 30px;
  letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 6px;
}
.panel h1 span { color: var(--cinnabar); }
.panel .lede { color: var(--ash); font-size: 13px; line-height: 1.6; margin: 0 0 22px; }
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); margin-bottom: 7px; }
.choices { display: flex; gap: 6px; flex-wrap: wrap; }
.choices button {
  background: var(--lacquer-3); border: 1px solid var(--rule); color: var(--rice);
  padding: 8px 14px; font-size: 13px; border-radius: 1px; min-width: 44px;
}
.choices button[aria-pressed="true"] { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--bone); }
.field input {
  background: var(--lacquer-3); border: 1px solid var(--rule); color: var(--rice);
  padding: 9px 11px; width: 100%; border-radius: 1px; font-size: 13px;
}
.begin {
  width: 100%; margin-top: 8px; background: var(--cinnabar); border: 0; color: var(--bone);
  padding: 14px; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; border-radius: 1px;
}
.begin:hover { background: #C9412F; }

.resume {
  width: 100%; margin-top: 8px; background: none; border: 1px solid var(--gold);
  color: var(--gold); padding: 12px; border-radius: 1px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.resume small {
  display: block; text-transform: none; letter-spacing: 0; font-size: 11px;
  color: var(--ash); margin-top: 4px;
}
.resume:hover { background: rgba(199, 154, 62, 0.12); }
.resume[hidden] { display: none; }

.panel h3 { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 0.10em; margin: 22px 0 7px; }
.panel p, .panel li { font-size: 13px; line-height: 1.62; color: var(--rice); }
.panel ul { padding-left: 18px; margin: 6px 0; }
.panel .key { color: var(--gold); }

.verdictline { font-family: var(--display); font-size: 15px; color: var(--rice); margin: 0 0 16px; }

@media (max-width: 900px) {
  .body { flex-direction: column; }
  .rail { width: auto; border-left: 0; border-top: 1px solid var(--rule); max-height: 46vh; }
  .boardwrap { padding: 8px; }
  .wordmark { font-size: 16px; letter-spacing: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}