:root {
  --paper: #f3e9d2;
  --paper-2: #e9dbbb;
  --card: #fbf6ea;
  --ink: #1d2733;
  --ink-soft: #586273;
  --line: #c9b78f;
  --radio: #2b7c8c;
  --rocket: #d0632a;
  --atomic: #5b8c2a;
  --gov: #34477a;
  --susp: #b3202a;
  --rep: #b9821a;
  --funding: #2f6b3f;
  --shadow: 0 2px 0 rgba(29, 39, 51, .18), 0 6px 14px rgba(29, 39, 51, .12);
  --logo: 'Atomic Age', 'Trebuchet MS', sans-serif;
  --head: 'Righteous', 'Trebuchet MS', sans-serif;
  --body: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
  --type: 'Special Elite', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(120, 90, 40, .10) 1px, transparent 1.2px);
  background-size: 7px 7px;
  min-height: 100vh;
}
button, select, input { font: inherit; }
small { font-size: .78em; }
.muted { color: var(--ink-soft); }

/* ---------- top bar ---------- */
.top {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--ink); color: var(--paper);
  border-bottom: 4px solid var(--susp);
}
.brand h1 { font-family: var(--logo); font-size: 26px; margin: 0; letter-spacing: .5px; color: #f6d27a; }
.proto { font-size: 12px; opacity: .7; }
.status { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; flex: 1; min-width: 260px; }
.status .act { font-family: var(--head); font-size: 20px; color: #f6d27a; }
.status .clock { font-size: 12.5px; opacity: .8; flex-basis: 100%; }
.top-btns { display: flex; gap: 8px; align-items: center; }
.top .btn-ghost { color: var(--paper); border-color: rgba(243, 233, 210, .5); }
.speed select { background: transparent; color: var(--paper); border: 1px solid rgba(243, 233, 210, .5); border-radius: 6px; padding: 4px; }
.speed option { color: var(--ink); }

/* ---------- layout ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 16px 20px 40px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 1150px) { .board { grid-template-columns: 1fr; } }
.sec { font-family: var(--head); font-size: 19px; margin: 6px 0 10px; }
.sec small { font-family: var(--body); font-size: 13px; color: var(--ink-soft); font-weight: 400; margin-left: 8px; }

/* ---------- buttons ---------- */
.btn {
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 999px;
  padding: 5px 14px; cursor: pointer; font-weight: 600; letter-spacing: .2px; transition: transform .08s, opacity .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-pass { background: var(--susp); border-color: var(--susp); }
.btn-buy { background: #f6d27a; color: var(--ink); width: 100%; margin-top: 6px; }
.btn-pub { background: var(--rep); border-color: var(--rep); width: 100%; margin-top: auto; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 8px; border-radius: 999px; line-height: 1.4;
  font-weight: 700; font-size: 14px; background: #fff; border: 1.5px solid currentColor; white-space: nowrap;
}
.ico { font-size: 1.45em; line-height: 1; vertical-align: -0.12em; }
.chip .ico { margin-left: 1px; }
.c-funding { color: var(--funding); }
.c-radio { color: var(--radio); }
.c-rocket { color: var(--rocket); }
.c-atomic { color: var(--atomic); }
.c-gov { color: var(--gov); }
.c-susp { color: var(--susp); }
.c-rep { color: var(--rep); }
.c-cards { color: var(--ink-soft); }

/* ---------- fields ---------- */
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .fields { grid-template-columns: 1fr; } }
.f-radio { --fc: var(--radio); }
.f-rocket { --fc: var(--rocket); }
.f-atomic { --fc: var(--atomic); }
.f-gov { --fc: var(--gov); }
.field { background: var(--paper-2); border: 2px solid var(--fc); border-radius: 14px; padding: 0 0 8px; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.field-head { background: var(--fc); color: #fff; font-family: var(--head); font-size: 18px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; }
.ficon { font-size: 26px; line-height: 1; }
.banner { margin: 8px; padding: 8px 10px; border: 2px dashed var(--fc); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.banner-row { display: flex; justify-content: space-between; align-items: baseline; }
.banner-action { font-family: var(--head); text-transform: uppercase; color: var(--fc); letter-spacing: 1px; }
.banner-price { font-family: var(--head); font-size: 28px; line-height: 1; }
.ladder { display: flex; gap: 4px; font-size: 11.5px; flex-wrap: wrap; }
.ladder span { padding: 0 5px; border-radius: 4px; color: var(--ink-soft); }
.ladder .past { text-decoration: line-through; opacity: .55; }
.ladder .now { background: var(--fc); color: #fff; font-weight: 700; }
.stack { padding: 0 8px; flex: 1; display: flex; flex-direction: column; }
.depth { font-size: 12px; color: var(--ink-soft); padding: 6px 10px 0; display: flex; justify-content: space-between; letter-spacing: .5px; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 5px; position: relative;
}
.card.tech, .card.project { border-top: 6px solid var(--fc); flex: 1; }
.card.empty { align-items: center; justify-content: center; color: var(--ink-soft); font-style: italic; min-height: 120px; text-align: center; box-shadow: none; background: transparent; border-style: dashed; }
.card-head { display: flex; gap: 6px; align-items: flex-start; }
.card-head .name { font-weight: 700; flex: 1; line-height: 1.15; font-size: 15px; }
.card-head .cost { font-family: var(--head); background: var(--funding); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 14px; }
.card-head .tier, .card-head .kind { font-family: var(--head); color: var(--fc, var(--rep)); font-size: 13px; min-width: 16px; }
.card-head .rep { font-family: var(--head); color: var(--rep); font-size: 20px; line-height: 1; }
.eff { margin: 0; padding-left: 16px; font-size: 13.5px; line-height: 1.5; }
.eff li::marker { color: var(--fc); }
.flavor { font-family: var(--type); font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.card-foot .tags .ico { font-size: 20px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); margin-top: auto; gap: 6px; flex-wrap: wrap; }
.vp { font-family: var(--head); background: var(--ink); color: #f6d27a; padding: 0 7px; border-radius: 4px; font-size: 13px; }
.req { font-size: 12px; display: flex; gap: 4px; flex-wrap: wrap; }
.req-tag { background: var(--paper-2); border-radius: 4px; padding: 0 5px; }
.fringe { background: var(--susp); color: #fff; border-radius: 4px; padding: 0 6px; font-weight: 700; letter-spacing: .5px; }
.is-fringe { background-image: repeating-linear-gradient(-45deg, rgba(179, 32, 42, .05) 0 8px, transparent 8px 16px); }

/* ---------- era + mysteries ---------- */
.era {
  display: flex; gap: 14px; align-items: stretch; margin: 4px 0 14px; border-radius: 14px; overflow: hidden;
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow);
}
.era-act { font-family: var(--head); font-size: 22px; background: var(--susp); padding: 12px 16px; display: flex; align-items: center; white-space: nowrap; }
.era-body { padding: 10px 14px 10px 0; display: flex; flex-direction: column; gap: 3px; }
.era-name { font-family: var(--logo); font-size: 22px; color: #f6d27a; }
.era-name small { font-family: var(--body); font-size: 13px; color: rgba(243, 233, 210, .7); margin-left: 6px; }
.era .flavor { color: rgba(243, 233, 210, .8); font-size: 13px; }
.era-twist { font-weight: 700; font-size: 14px; }
@media (max-width: 560px) { .era { flex-direction: column; gap: 0; } .era-body { padding: 10px 14px; } }

.mysteries { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card.mystery { border: 2px solid var(--ink); background: linear-gradient(180deg, #fffaf0, var(--card)); }
.micon { font-size: 24px; line-height: 1; }
.card.mystery .name { font-size: 16px; align-self: center; }
.steps { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.step {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name rep right" "need need right";
  gap: 3px 8px; align-items: center; padding: 5px 8px; border-radius: 8px; border: 1px dashed var(--line); font-size: 13px;
}
.step .sname { grid-area: name; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.step .need { grid-area: need; display: flex; gap: 3px; flex-wrap: wrap; }
.step .srep { grid-area: rep; }
.step .sright { grid-area: right; }
.step .need .chip { font-size: 12.5px; }
.step .srep { font-family: var(--head); color: var(--rep); font-size: 15px; }
.step .sright { min-width: 28px; display: flex; justify-content: flex-end; }
.step.open { border: 2px solid var(--rep); background: rgba(185, 130, 26, .08); }
.step.done { border-style: solid; background: var(--paper-2); }
.step.done .need, .step.done .srep { opacity: .45; }
.step.later { opacity: .6; }
.step .btn-pub { width: auto; margin: 0; padding: 3px 10px; }
.opens { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.step .fringe { font-size: 11px; }

.seat-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sc); color: #fff; font-weight: 700; font-size: 12px; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
  vertical-align: middle;
}

.truth { margin-top: auto; border-radius: 8px; padding: 6px 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.truth.hidden { background: repeating-linear-gradient(45deg, #2a3442 0 6px, #1d2733 6px 12px); color: var(--paper); }
.truth.hidden small { color: rgba(243, 233, 210, .75); }
.truth.known { background: rgba(107, 63, 160, .12); border: 1.5px dashed #6b3fa0; }
.truth.revealed { background: #fff3cf; border: 1.5px solid var(--rep); }
.truth-face { display: flex; gap: 8px; align-items: center; }
.truth-icon { font-size: 26px; line-height: 1; }
.btn-brief { background: #6b3fa0; border-color: #6b3fa0; padding: 3px 10px; white-space: nowrap; }
.card.truthcard { border: 2px solid var(--ink); }
.truth-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 12px; font-size: 13px; }

.hearing-note { margin: 14px 0; padding: 8px 12px; border-left: 5px solid var(--susp); background: rgba(179, 32, 42, .07); border-radius: 0 8px 8px 0; font-size: 14px; }

/* ---------- turn + hand ---------- */
.turnbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 12px; margin-top: 8px; }
.turnbar .muted { color: rgba(243, 233, 210, .7); }
.turnbar .btn-ghost { color: var(--paper); border-color: rgba(243, 233, 210, .5); }
.turn-btns { display: flex; gap: 8px; }
.turnbar.bot { justify-content: center; font-style: italic; }
.dots::after { content: '…'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.card-btns { display: flex; gap: 6px; margin-top: 4px; }
.card-btns .btn { flex: 1; padding: 4px 8px; }
.recycle .chip { font-size: 13px; }

/* ---------- player boards ---------- */
aside { display: flex; flex-direction: column; gap: 12px; }
.pboard { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.pboard.active { border-color: var(--ink); outline: 3px solid #f6d27a; }
.pboard.passed { opacity: .7; }
.pb-head { display: flex; justify-content: space-between; align-items: baseline; }
.pname { font-weight: 700; font-size: 16px; }
.pname small { font-weight: 400; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.pscore { font-family: var(--head); font-size: 24px; }
.pscore small { font-family: var(--body); font-size: 12px; margin-left: 2px; }
.res { display: flex; flex-wrap: wrap; gap: 4px; }
.susp-label { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hotseat { background: var(--susp); color: #fff; border-radius: 4px; padding: 0 6px; font-size: 12px; font-weight: 700; }
.susp-track { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; }
.susp-track .s { text-align: center; font-size: 11px; border-radius: 3px; background: var(--paper-2); color: var(--ink-soft); line-height: 18px; }
.susp-track .s.hot { box-shadow: inset 0 -2px 0 rgba(179, 32, 42, .35); }
.susp-track .s.fill { background: rgba(179, 32, 42, .35); color: #fff; }
.susp-track .s.on { background: var(--susp); color: #fff; font-weight: 700; }
.susp-track .s.max { border: 1px dashed var(--susp); }
.income { font-size: 12.5px; }
.income .chip, .tagrow .chip { font-size: 13px; }
.tagrow { font-size: 12.5px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tagchip { color: var(--fc); }
.tab summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.tab ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; }
.tab li { margin-bottom: 3px; }
.tab li.pub { list-style: none; margin-left: -16px; }

.log { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; max-height: 420px; overflow: auto; }
.log h3 { font-family: var(--head); margin: 0 0 6px; font-size: 16px; }
.logline { font-size: 12.5px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.logline small { color: var(--ink-soft); margin-right: 4px; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(29, 39, 51, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.dialog { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 18px 22px; max-width: 640px; width: 100%; box-shadow: var(--shadow); max-height: 90vh; overflow: auto; }
.dialog h2 { font-family: var(--head); margin-top: 0; }
.dialog h3 { font-family: var(--head); margin: 14px 0 4px; font-size: 16px; }
.dialog.center { text-align: center; }
.dialog-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.rules p, .rules li { line-height: 1.45; }
.results { margin: 0 auto; border-collapse: collapse; }
.results td, .results th { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- setup ---------- */
.setup { max-width: 640px; margin: 0 auto; padding: 40px 16px; text-align: center; }
.setup h1 { font-family: var(--logo); font-size: 44px; margin: 0; color: var(--ink); text-shadow: 3px 3px 0 #f6d27a; }
.tagline { font-family: var(--type); color: var(--ink-soft); margin: 8px 0 22px; }
.setup .dialog { text-align: left; margin: 0 auto 16px; }
.seat { display: grid; grid-template-columns: 90px 1fr 110px; gap: 8px; align-items: center; margin-bottom: 8px; }
.seat input[type=text], .seat input[type=number], .seat select { padding: 5px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }

/* ---------- nav tabs ---------- */
.tabs { display: flex; gap: 2px; background: rgba(243, 233, 210, .12); border-radius: 999px; padding: 3px; }
.tab-btn { border: 0; background: transparent; color: var(--paper); border-radius: 999px; padding: 4px 14px; cursor: pointer; font-weight: 600; }
.tab-btn.on { background: #f6d27a; color: var(--ink); }
.setup-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- card catalog ---------- */
.catalog { max-width: 1600px; margin: 0 auto; padding: 16px 20px 40px; }
.filters {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 14px; margin-bottom: 8px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 5;
}
.filters input[type=search] { flex: 1 1 240px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.fgroup { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.fgroup > span { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); margin-right: 2px; }
.fgroup select { padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
.ftoggle { border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 3px 11px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.ftoggle:hover { border-color: var(--ink); }
.ftoggle.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ftoggle .ico { font-size: 1.2em; }
.cat-count { font-size: 14px; color: var(--ink-soft); margin: 10px 2px 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.cat-item { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cat-item > .card { flex: 1; }
.copies { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #f6d27a; font-family: var(--head); font-size: 13px; border-radius: 999px; padding: 1px 8px; box-shadow: var(--shadow); }
.cat-empty { text-align: center; padding: 40px 0; }

/* ---------- cheat mode ---------- */
:root { --cheat: #6b3fa0; }
.top .btn.cheat-on { background: var(--cheat); border-color: var(--cheat); color: #fff; }
.cheat-panel {
  margin: 10px 0; padding: 10px 14px; border: 2px dashed var(--cheat); border-radius: 12px;
  background: rgba(107, 63, 160, .07); font-size: 14px; display: flex; flex-direction: column; gap: 8px;
}
.cheat-panel a { color: var(--cheat); font-weight: 700; }
.cheat-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-cheat { background: var(--cheat); border-color: var(--cheat); color: #fff; padding: 3px 12px; }
.keep { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }

/* ---------- v0.3: clues, places ---------- */
.place-rules { font-size: 12.5px; background: var(--paper-2); border-radius: 6px; padding: 3px 7px; }
.place-rules .chip { font-size: 11.5px; }
.clues { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.clues-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); margin-right: 2px; }
.clue {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--ink); font-size: 16px; line-height: 1.3;
}
.clue small { font-size: 11.5px; font-weight: 700; }
.clue.empty { border-style: dashed; color: var(--ink-soft); font-size: 13px; padding: 1px 9px; background: transparent; }
.odds { font-size: 12.5px; color: #6b3fa0; font-weight: 600; }
.clue-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin: -4px 0 10px; color: var(--ink-soft); }
.clue-legend span { color: var(--ink); white-space: nowrap; }
.inplay { position: absolute; top: -10px; right: 8px; background: var(--rep); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; z-index: 1; }
.small { font-size: 12px; }