/* Hallmark · shape: app screen · genre: playful · theme: Overprint black-stock adapted (deal 1/3)
 * nav: compact wordmark and rules · signature: live roundtable seats and quest track · states: loading, empty, error, full
 * overprint: user-requested forest and old gold, system CJK faces for native phone readability
 * axes: dark/serif/calm · posture: committed · contrast: verified in render sweep · v2.0.0 */
/* Hallmark · pre-emit critique: P specific H restrained E real game S direct R mobile V live · weakest: small seats; minimum 44px targets */
/* Hallmark · waive 1 · app screen permits familiar system faces · native CJK and offline availability */
@import url("./tokens.css");
@import url("./base.css");

:root { --seat-diameter: 50px; --table-size: 520px; --entry-head: 54px; }
html, body { min-height: 100%; overflow-x: clip; }
body { min-height: 100dvh; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.topbar { max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-rule); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); font-weight: 700; text-decoration: none; }
.container { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
h1, h2, h3 { line-height: 1.35; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { color: var(--color-ink-2); line-height: 1.7; }
button, .btn { min-height: 46px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-edge); border-radius: var(--radius-input); background: var(--color-clear); color: var(--color-ink); cursor: pointer; font-weight: 600; line-height: 1.4; transition: background-color var(--dur-micro), transform var(--dur-micro); }
button:hover { background: var(--color-paper-3); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.primary:hover { background: var(--color-accent-2); }
.compact { padding: var(--space-xs) var(--space-md); }
.text-button { border: 0; padding-inline: 0; text-decoration: underline; text-underline-offset: 5px; font-size: var(--text-sm); color: var(--color-ink-2); }
.text-button:hover { background: var(--color-clear); color: var(--color-accent); }
.full { width: 100%; }
.home-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg); }
.entry { max-width: 470px; }
.entry h1 { font-size: var(--entry-head); line-height: 1.3; margin-bottom: var(--space-lg); color: var(--color-ink); }
.lede { margin-bottom: var(--space-xl); max-width: 34ch; }
.entry-tabs { display: flex; border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-lg); }
.entry-tabs button { flex: 1; border: 0; border-radius: 0; color: var(--color-muted); }
.entry-tabs button[aria-selected="true"] { color: var(--color-accent); border-bottom: 2px solid var(--color-accent); }
form { display: grid; gap: var(--space-sm); }
label { display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
input, select { min-height: 48px; width: 100%; min-width: 0; padding: var(--space-sm); border: 1px solid var(--color-edge); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); }
input::placeholder { color: var(--color-muted); }
.code-input { text-transform: uppercase; }
.form-row { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: var(--space-md); margin-block: var(--space-xs); }
.entry-extras { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.fine { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }
.table-preview { align-self: center; min-width: 0; }
.roundtable { position: relative; width: 100%; max-width: var(--table-size); aspect-ratio: 1; margin-inline: auto; }
.roundtable::before { content: ""; position: absolute; inset: 16%; border: 1px solid var(--color-rule); border-radius: 50%; pointer-events: none; }
.table-center { position: absolute; inset: 26%; border-radius: 50%; border: 1px solid var(--color-rule); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-md); text-align: center; color: var(--color-accent); background: var(--color-paper-2); }
.table-center > svg { width: 30px; height: 30px; }
.table-center > span { font-family: var(--font-display); font-size: var(--text-lg); }
.table-center small { font-family: var(--font-body); display: block; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.seat { position: absolute; left: var(--seat-x); top: var(--seat-y); transform: translate(-50%, -50%); width: 90px; min-height: 90px; padding: var(--space-2xs); text-align: center; border: 0; border-radius: var(--radius-input); background: var(--color-clear); }
button.seat:active { transform: translate(-50%, -50%); }
.seat-avatar { display: flex; justify-content: center; align-items: center; height: var(--seat-diameter); width: var(--seat-diameter); margin-inline: auto; border: 1px solid var(--color-edge); border-radius: 50%; background: var(--color-paper); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.selected .seat-avatar { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.leader:not(.selected) .seat-avatar { color: var(--color-accent); border-color: var(--color-accent); }
.seat-name { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink); }
.seat-name small { font-size: var(--text-xs); margin-left: var(--space-2xs); color: var(--color-accent); }
.seat-status { display: block; font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.table-caption { display: flex; justify-content: center; gap: var(--space-xl); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.table-preview > .fine { text-align: center; }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.room-head h1 { color: var(--color-accent); }
.room-head p { font-size: var(--text-sm); margin-top: var(--space-xs); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-xl); align-items: start; }
.board { min-width: 0; }
.game-panel { padding-top: var(--space-lg); min-width: 0; }
.stage { padding-block: var(--space-lg); border-block: 1px solid var(--color-rule); }
.stage h2 { margin-bottom: var(--space-md); }
.stage p { margin-bottom: var(--space-lg); }
.stage .fine { margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.submitted { padding-block: var(--space-sm); color: var(--color-accent); }
.quest-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.quest-track li { text-align: center; color: var(--color-muted); border-top: 2px solid var(--color-rule); padding-top: var(--space-sm); }
.quest-track li.current { border-color: var(--color-accent); color: var(--color-accent); }
.quest-track li.good { border-color: var(--color-success); }
.quest-track li.evil { border-color: var(--color-error); }
.quest-track span { font-family: var(--font-display); font-size: var(--text-xl); }
.quest-track small, .quest-track em { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); }
.quest-track em { font-size: var(--text-xs); margin-top: var(--space-2xs); }
.rejection { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-lg); }
.rejection span { color: var(--color-muted); }
.identity { margin-top: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.identity-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-sm); text-align: left; border: 0; padding-inline: 0; }
.identity-toggle:hover { background: var(--color-clear); color: var(--color-accent); }
.identity-toggle span:first-of-type { flex: 1; }
.identity-body { padding-top: var(--space-md); }
.identity-body h3 { font-size: var(--text-2xl); }
.identity-body p { margin-top: var(--space-md); }
.side-label { display: inline-block; font-size: var(--text-sm); margin-top: var(--space-xs); }
.good, .good .side-label { color: var(--color-success); }
.evil, .evil .side-label, .danger { color: var(--color-error); }
.clues { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-sm); }
.clues span { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); font-size: var(--text-sm); border-radius: var(--radius-input); color: var(--color-ink); }
.history { margin-top: var(--space-lg); border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-md); }
summary { cursor: pointer; min-height: 44px; padding-block: var(--space-xs); color: var(--color-ink-2); }
.history section { padding-block: var(--space-md); }
.history h3 { font-family: var(--font-body); font-size: var(--text-md); }
.history p { font-size: var(--text-sm); margin-top: var(--space-xs); }
.history ul { list-style: none; padding: 0; margin-top: var(--space-sm); }
.history li, .results > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); overflow-wrap: anywhere; }
.results { margin-block: var(--space-lg); }
.leave { margin-top: var(--space-md); }
.waiting { color: var(--color-accent); font-size: var(--text-sm); overflow-wrap: anywhere; }
.stage .waiting { margin-top: var(--space-lg); margin-bottom: 0; }
.round-report { padding-block: var(--space-md); }
.round-report p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); }
.round-report p + p { margin-top: var(--space-xs); }
.round-report span { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.room-management fieldset { display: grid; gap: var(--space-md); border: 0; padding: 0; margin: var(--space-md) 0; min-width: 0; }
.member-management { margin-top: var(--space-lg); }
.member-management li { flex-wrap: wrap; align-items: center; }
.member-management small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.member-management .actions { gap: var(--space-md); }
.room-support > button { margin-top: var(--space-md); }
.stall-controls { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.dissolution { margin-top: var(--space-md); }
[data-clock] { font-variant-numeric: tabular-nums; }
#recovery-secret { font-family: monospace; font-size: var(--text-sm); margin-top: var(--space-xs); }
.entry-tabs button { padding-inline: var(--space-sm); }
.footer { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); border-top: 1px solid var(--color-rule); }
.toast { position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); width: min(90%, 640px); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-input); padding: var(--space-md) var(--space-lg); z-index: var(--z-toast); text-align: center; }
.toast.error { background: var(--color-error); color: var(--color-accent-ink); }
.connection { padding: var(--space-sm) var(--space-lg); background: var(--color-paper-3); color: var(--color-ink); text-align: center; font-size: var(--text-sm); }
dialog { background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-edge); border-radius: var(--radius-card); padding: var(--space-xl); max-width: 560px; max-height: 85dvh; width: calc(100% - 32px); }
dialog::backdrop { background: var(--color-backdrop); }
dialog h2 { margin-block: var(--space-md) var(--space-lg); }
dialog ol { padding-left: var(--space-lg); display: grid; gap: var(--space-md); }
dialog p { margin-block: var(--space-lg); }
.close { justify-self: end; }
.dialog-actions { justify-content: flex-end; margin-top: var(--space-lg); }
@media (max-width: 900px) {
  :root { --gutter: 24px; --entry-head: 42px; }
  .home-layout { gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
  .entry { max-width: 560px; margin-inline: auto; width: 100%; }
  .table-preview { display: none; }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .game-panel { padding-top: 0; }
  .board { max-width: 620px; width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
  :root { --gutter: 20px; --entry-head: 38px; --seat-diameter: 38px; }
  .topbar { padding-block: var(--space-md); }
  .container { padding-block: var(--space-lg); }
  .home-layout { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xs); }
  .entry { max-width: none; }
  .entry h1 br { display: none; }
  .entry h1 { margin-bottom: var(--space-md); }
  .lede { margin-bottom: var(--space-lg); }
  .table-preview { display: none; }
  .room-head { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-xs); }
  .room-head .actions { width: 100%; justify-content: space-between; }
  .seat { width: 66px; min-height: 74px; }
  .seat-name { font-size: var(--text-xs); }
  .seat-status { font-size: var(--text-xs); }
  .roundtable.dense .seat { width: 58px; min-height: 64px; }
  .roundtable.dense .seat-avatar { width: 34px; height: 34px; }
  .roundtable.dense .seat-status { display: none; }
  .table-center { gap: var(--space-xs); }
  .table-center > span { font-size: var(--text-sm); }
  .table-center small { font-size: var(--text-xs); margin-top: var(--space-xs); }
  .game-layout { gap: var(--space-lg); }
  .quest-track { margin-top: var(--space-xs); gap: var(--space-xs); }
  .quest-track em { font-size: var(--text-xs); }
  .stage { padding-block: var(--space-lg); }
  .stage .actions button { flex: 1; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .footer { padding-block: var(--space-lg); }
  dialog { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }