/* ------------------------------------------------------------------
   Edge — a deck you play with one other person.
   Ink, aged gold and cream. Ornament is hairline and sparse; nothing
   glows, nothing gradients for the sake of it. Mobile first.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Cormorant';
  src: url('/fonts/cormorant.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/fonts/cormorant-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #12100e;
  --ink-1: #191512;
  --ink-2: #221c17;
  --ink-3: #2d251d;
  --line: #3a3026;
  --line-soft: #2a231b;

  --gold: #c8a45c;
  --gold-soft: #9c8047;
  --gold-faint: rgba(200, 164, 92, 0.22);

  --cream: #ede4d3;
  --cream-dim: #a89b85;
  --cream-faint: #6f6555;

  --ember: #b34a3c;
  --ember-lift: #cc5a4a;
  --sage: #87977e;

  --serif: 'Cormorant', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --gut: 20px;
  --tap: 46px;
  --radius: 3px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* A faint warmth from above so the ink is not a flat void. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(200, 164, 92, 0.07), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(179, 74, 60, 0.05), transparent 65%);
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------------------------- type ---------------------------- */

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}
h1 {
  font-size: 34px;
  line-height: 1.15;
}
h2 {
  font-size: 27px;
}

/* Section headings: small caps in sans, with a gold hairline trailing off. */
h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  white-space: nowrap;
}
h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-faint), transparent);
}
h3 .small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cream-faint);
  font-size: 11px;
}

p {
  margin: 8px 0;
}
.muted {
  color: var(--cream-dim);
}
.small {
  font-size: 13px;
}
.ok {
  color: var(--sage);
}
.no,
.err {
  color: var(--ember-lift);
}
.warn {
  color: var(--gold);
}

.logo {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-align: center;
  color: var(--gold);
  margin: 0 0 4px;
}
.logo-mark {
  display: block;
  text-align: center;
  font-size: 26px;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 14px;
}
.tagline {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.3;
  text-align: center;
  color: var(--cream);
  margin: 0 0 6px;
}

/* An ornamental divider: hairline, diamond, hairline. */
.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--gold-soft);
  font-size: 9px;
}
.rule::before,
.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-faint), transparent);
}

/* ---------------------------- layout ---------------------------- */

.screen {
  flex: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: calc(34px + env(safe-area-inset-top)) var(--gut) calc(34px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px var(--gut) calc(104px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------- header ---------------------------- */

.top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) var(--gut) 12px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--gold-faint);
}
.who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.who.them {
  align-items: flex-end;
  text-align: right;
}
.who .nm {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}
.who .pw {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.who .pw b {
  font-size: 14px;
  font-weight: 700;
}
.top .code {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cream-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------------------------- nav ---------------------------- */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  background: var(--ink-1);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -1px 0 var(--gold-faint);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  position: relative;
  background: none;
  border: 0;
  padding: 11px 2px 9px;
  cursor: pointer;
  color: var(--cream-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.tab .pip {
  font-size: 13px;
  line-height: 1;
  opacity: 0.75;
}
.tab .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tab.on {
  color: var(--gold);
}
.tab.on .pip {
  opacity: 1;
}
.tab.on::before {
  content: '';
  position: absolute;
  top: 0;
  left: 26%;
  right: 26%;
  height: 2px;
  background: var(--gold);
}
.badge {
  position: absolute;
  top: 5px;
  right: calc(50% - 24px);
  min-width: 17px;
  background: var(--ember);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  border-radius: 999px;
  padding: 0 5px;
  text-align: center;
}

/* ---------------------------- controls ---------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.btn:active {
  transform: translateY(1px);
}
.btn:hover {
  border-color: var(--gold-soft);
}
.btn.primary {
  background: linear-gradient(to bottom, #d3b06a, var(--gold-soft));
  border-color: #dcbb79;
  color: #17130d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:hover {
  border-color: var(--cream);
}
.btn.danger {
  background: var(--ember);
  border-color: var(--ember-lift);
  color: #fff;
}
.btn.ghost {
  background: none;
  border-color: transparent;
  color: var(--cream-dim);
  text-decoration: underline;
  text-decoration-color: var(--gold-faint);
  text-underline-offset: 4px;
}
.btn.ghost:hover {
  color: var(--cream);
}
.btn.on {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--ink-3);
}
.btn.sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}
.btn.big {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  margin: 8px 0;
}
.btn:disabled {
  opacity: 0.38;
  cursor: default;
}
.btn:disabled:hover {
  border-color: var(--line);
}

.seg {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}
/* A choice most players never touch, marked when it is taken so it does not read as routine. */
.seg.odd .btn.on {
  border-color: var(--ember);
  color: var(--ember-lift);
}
.seg .btn {
  flex: 1;
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
  color: var(--cream);
  margin: 4px 0 10px;
}
.input:focus {
  outline: none;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-faint);
}
.input::placeholder {
  color: var(--cream-faint);
}
.input.code {
  text-align: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.input.num {
  width: 88px;
  text-align: center;
  margin: 0;
}
textarea.input {
  resize: vertical;
  line-height: 1.45;
}
.lbl {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}
.row.warn {
  color: var(--gold);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 14px;
  color: var(--cream-dim);
  cursor: pointer;
}
.check input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  accent-color: var(--gold-soft);
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin: 4px 0 14px;
}
@media (max-width: 380px) {
  .checks {
    grid-template-columns: 1fr;
  }
}

.box {
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
}
.box.invite {
  border-color: var(--gold-faint);
  text-align: center;
}
/* A lead line inside a panel reads as a small heading, in the display face. */
.box > b {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.box.quiet {
  border-style: dashed;
  border-color: var(--line);
  background: none;
}

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--cream-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chip.on {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--ink-3);
}

/* ---------------------------- the edge medallion ---------------------------- */

.edge-wrap {
  text-align: center;
  padding-top: 10px;
}
.edge-btn {
  position: relative;
  width: 224px;
  height: 224px;
  margin: 10px auto 4px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: radial-gradient(circle at 50% 38%, #2a2118, var(--ink-1) 62%, #0d0b09);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8px var(--gold-faint), 0 8px 34px rgba(0, 0, 0, 0.55);
  transition: transform 0.08s;
}
.edge-btn:active {
  transform: scale(0.975);
}
.edge-btn .big {
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold);
}
.edge-btn .sub {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  max-width: 150px;
  line-height: 1.5;
}
.edge-btn.wait {
  border-color: var(--line);
  box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8px var(--line-soft), 0 8px 34px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.edge-btn.wait .big {
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}
.edge-btn:disabled {
  cursor: default;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 16px 0 6px;
}
.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.stats b {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  color: var(--cream);
}
.stats span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* Your standing, said in a sentence rather than shown as a labelled field. */
.verdict {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  margin: 16px auto 4px;
  max-width: 22em;
  color: var(--cream);
}
.verdict.ok {
  color: var(--sage);
}
.verdict.no {
  color: var(--cream-dim);
}

.oops {
  text-align: center;
  margin-top: 30px;
}

/* The one place the rules are written down. */
.help h2 {
  font-size: 23px;
  margin-top: 26px;
}
.help p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream-dim);
  max-width: 34em;
}
.help p b {
  color: var(--cream);
  font-weight: 600;
}
.help .suit {
  color: var(--gold);
  font-style: normal;
}

/* ---------------------------- cards ---------------------------- */
/* A card is a card. Cost in the corner, suit in the middle, price of admission along
   the bottom. Proportions are a real playing card: 63 x 88. */

.tcg {
  --suit: var(--line);
  position: relative;
  flex: 0 0 var(--cardw, 158px);
  width: var(--cardw, 158px);
  aspect-ratio: 63 / 88;
  scroll-snap-align: start;
  border-radius: 7px;
  padding: 4px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-1) 45%, var(--ink-2));
  box-shadow:
    0 1px 0 rgba(237, 228, 211, 0.05) inset,
    0 6px 16px rgba(0, 0, 0, 0.45);
}
.tcg.k-give {
  --suit: var(--sage);
}
.tcg.k-receive {
  --suit: var(--gold-soft);
}
.tcg.k-cum {
  --suit: var(--ember);
}
.tcg.k-special {
  --suit: #8a78b0;
}
.tcg-face {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 7px 8px 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(18, 16, 14, 0.4), rgba(18, 16, 14, 0.85));
  color: var(--cream);
  cursor: pointer;
  overflow: hidden;
}
span.tcg-face {
  cursor: default;
}
/* The name bar. */
.tcg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.tcg-kind {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcg-cost {
  flex: 0 0 auto;
  min-width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tcg-cost.free {
  border-color: var(--sage);
  color: var(--sage);
}
/* The art window: no picture, just the suit cut large into the frame. */
.tcg-art {
  flex: 0 0 auto;
  height: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(200, 164, 92, 0.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(237, 228, 211, 0.035) 0 1px, transparent 1px 6px),
    var(--ink);
}
.tcg-pip {
  font-size: 26px;
  line-height: 1;
  color: var(--suit);
  opacity: 0.85;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
/* The text box. Every card names both players outright, so nothing above it has to. */
.tcg-txt {
  flex: 1;
  min-height: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.24;
  color: var(--cream);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.tcg-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.tcg-foot span,
.tcg-foot i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcg-foot i {
  font-style: normal;
  color: var(--suit);
  flex: 0 1 auto;
}
.tcg.sel {
  background: linear-gradient(160deg, var(--gold), var(--gold-soft) 60%, var(--gold));
}
.tcg.sel .tcg-face {
  border-color: var(--gold);
  background: linear-gradient(to bottom, var(--ink-2), var(--ink));
}
.tcg .ord {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* Bury it, or put it back for another. Sits on the card's edge, out of the reading line. */
.tcg-corner {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--cream-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.tcg-corner small {
  font-size: 8px;
  letter-spacing: 0.04em;
}
.tcg-corner.swap {
  color: var(--gold-soft);
}
/* In the deck spread nothing is ever selected, so the bury button takes the free corner. */
.tcg-corner.bury {
  right: auto;
  bottom: auto;
  left: -8px;
  top: -8px;
}
.tcg-corner:hover:not(:disabled) {
  color: var(--gold);
  border-color: var(--gold-soft);
}
.tcg-corner:disabled {
  opacity: 0.3;
  cursor: default;
}

.hidebtn {
  flex: 0 0 38px;
  border: 0;
  background: none;
  color: var(--cream-faint);
  font-size: 17px;
  cursor: pointer;
}
.hidebtn:hover {
  color: var(--ember-lift);
}

.tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 7px;
  color: var(--cream-dim);
  white-space: nowrap;
}
.ord {
  font-style: normal;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

/* ---------------------------- queue, tasks, deals ---------------------------- */

.play,
.deal {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-1);
  padding: 13px 15px;
  margin: 9px 0;
}
.play ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.play li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  margin: 3px 0;
}
.play li::marker {
  color: var(--gold-soft);
  font-size: 13px;
}
.deal .txt {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 6px;
}
.deal.done,
.deal.declined,
.deal.cancelled,
.deal.ended {
  opacity: 0.5;
}
/* Limits: a category header you can fold shut, and a rank on every card. */
.menu-row.limit-head {
  margin-top: 16px;
  padding: 13px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-1);
}
.menu-row.limit-head.open {
  border-color: var(--gold-faint);
  background: var(--ink-2);
}
.menu-row.limit-head .m-go {
  font-size: 19px;
  line-height: 1;
}
.limit {
  border-bottom: 1px solid var(--line-soft);
}
.limit .lv {
  margin-left: 9px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-faint);
  white-space: nowrap;
}
.limit .lv.l2 {
  color: var(--gold-soft);
}
.limit .lv.l3 {
  color: var(--ember);
}
.limit span {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
}
.limit.off span {
  color: var(--cream-faint);
  text-decoration: line-through;
  text-decoration-color: var(--ember);
}

.playbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  z-index: 4;
  margin: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  background: var(--ink-2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}
.playbar div {
  flex: 1;
  font-size: 13px;
  color: var(--cream-dim);
}
.playbar b {
  color: var(--gold);
  font-size: 15px;
}

/* A short line of framing at the top of a screen, in the display face. */
.lede {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--cream-dim);
  max-width: 34em;
  margin: 2px 0 14px;
}

.seg.big-seg .btn {
  min-height: 52px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  gap: 7px;
}
.seg.big-seg .btn span {
  color: var(--gold-soft);
}

/* Tap an example to fill the box, rather than staring at an empty one. */
.chip.ex {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--cream-dim);
}
.chip.ex:hover {
  border-color: var(--gold-soft);
  color: var(--cream);
}

/* The hand: a row you flick through on a phone, a wrapped spread on anything wider. */
.fan {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 10px 0 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fan::-webkit-scrollbar {
  display: none;
}
/* The whole deck, laid out face up. */
.spread {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px 11px;
  padding: 12px 2px 4px;
}
.spread .tcg {
  --cardw: 100%;
  flex: none;
}
/* The bury button sits on the top-left corner here, so the kind label steps around it. */
.spread .tcg-kind {
  padding-left: 13px;
}
.spread .tcg-art {
  height: 21%;
}
.spread .tcg-txt {
  font-size: 14px;
  -webkit-line-clamp: 8;
}
.hand-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
}

/* Today's tasks: what to do, then exactly what it pays. */
.task-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line-soft);
}
.task-row .t {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
}
.task-row .r {
  grid-column: 1;
  font-size: 12px;
  color: var(--cream-faint);
}
.task-row .r b {
  color: var(--gold);
  font-weight: 600;
}
/* The card a task unlocks, shown the way it will read once you hold it. */
.task-row .reward {
  display: block;
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid var(--gold-faint);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--cream-dim);
}
.task-row .a {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 2px;
}
.task-row.done {
  opacity: 0.45;
}
.task-row.done .t {
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

/* ---------------------------- modals ---------------------------- */
/* What used to be a tab. It opens over the table and closes back onto it. */
.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(2px);
}
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 92dvh;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--ink-1);
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.7);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px var(--gut) 12px;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--gold-faint);
}
.modal-head h2 {
  margin: 0;
  font-size: 23px;
}
.modal-x {
  flex: 0 0 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--cream-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover {
  color: var(--cream);
  border-color: var(--gold-soft);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px var(--gut) calc(24px + env(safe-area-inset-bottom));
}

/* ---------------------------- the table, on a phone ---------------------------- */
/* Two columns worth of content, stacked in reading order until there is room. */
.table,
.table > div {
  display: contents;
}

/* The seat reminder: present, but never louder than the game. */
.nag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 26px;
  opacity: 0.7;
}
.nag-x {
  background: none;
  border: 0;
  color: var(--cream-faint);
  font-size: 17px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.nag-x:hover {
  color: var(--cream);
}

/* A way in, not a wall: one line per destination. */
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 15px 4px;
  color: var(--cream);
  cursor: pointer;
}
.menu-row:hover {
  background: var(--ink-1);
}
.menu-row .m-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-row .m-label {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}
.menu-row .m-hint {
  font-size: 12px;
  color: var(--cream-faint);
}
.menu-row .m-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid var(--gold-faint);
  border-radius: 999px;
  padding: 2px 9px;
}
.menu-row .m-go {
  color: var(--gold-soft);
  font-size: 22px;
  line-height: 1;
}

.log div {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--cream-dim);
}
.log .when {
  color: var(--cream-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ---------------------------- seat / qr ---------------------------- */

.qr {
  display: block;
  margin: 4px auto 10px;
  padding: 12px;
  background: var(--cream);
  border-radius: var(--radius);
  width: min(248px, 68vw);
  height: auto;
}
.seat-link {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--cream-dim);
  background: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 9px 11px;
  margin: 6px 0 10px;
}
.code.big {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--gold);
  margin: 6px 0 12px;
}

/* ---------------------------- toast ---------------------------- */

#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 10;
  max-width: 92vw;
  padding: 11px 17px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--cream);
  font-size: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}

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

/* ---------------------------- on a desktop ---------------------------- */
/* A phone holds one column and a bar of tabs along the thumb. A monitor has room to
   put the tabs down the side and deal the hand out flat, so nothing needs scrolling
   sideways with a device that cannot flick. */

@media (min-width: 900px) {
  #app {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }
  .top {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 14px 28px;
  }
  .nav {
    position: static;
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 18px 12px;
    border-top: 0;
    border-right: 1px solid var(--line-soft);
    box-shadow: 1px 0 0 var(--gold-faint);
    overflow-y: auto;
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--radius);
  }
  .tab:hover {
    color: var(--cream);
  }
  .tab .pip {
    font-size: 15px;
  }
  .tab .lbl {
    font-size: 11px;
  }
  .tab.on {
    background: var(--ink-2);
  }
  .tab.on::before {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
  }
  .badge {
    position: static;
    margin-left: auto;
  }
  /* The scroll container spans the whole column and centres its content with padding, so the
     scrollbar sits at the edge of the window instead of floating in the middle of the page. */
  .main {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding: 18px max(28px, calc((100% - 940px) / 2)) 48px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .main::-webkit-scrollbar {
    width: 11px;
  }
  .main::-webkit-scrollbar-track {
    background: transparent;
  }
  .main::-webkit-scrollbar-thumb {
    background: var(--line);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
  }
  .main::-webkit-scrollbar-thumb:hover {
    background: var(--gold-soft);
    background-clip: content-box;
  }
  .screen {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    max-width: 520px;
  }
  /* No flicking on a mouse: lay the hand out and let it wrap. */
  .fan {
    flex-wrap: wrap;
    overflow: visible;
  }
  .playbar {
    left: 216px;
    bottom: 22px;
    margin: 0 auto;
    max-width: 620px;
    right: 0;
  }
  #toast {
    left: calc(50% + 108px);
    bottom: 22px;
  }
  .modal-wrap {
    align-items: center;
    padding: 28px;
  }
  .modal {
    max-width: 920px;
    max-height: 86dvh;
    border-bottom: 1px solid var(--line);
    border-radius: 10px;
  }
  .edge-btn {
    margin: 4px auto 0;
  }
}

/* Wide enough to sit the table beside the hand. */
@media (min-width: 1200px) {
  .main {
    padding-left: max(28px, calc((100% - 1120px) / 2));
    padding-right: max(28px, calc((100% - 1120px) / 2));
  }
  /* The table on one side, the hand on the other. Stacked on a phone, in that order. */
  .table {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 0 42px;
    align-items: start;
  }
  .table > div {
    display: block;
    min-width: 0;
  }
  .table > .col-a {
    grid-column: 1;
    grid-row: 1;
  }
  .table > .col-c {
    grid-column: 1;
    grid-row: 2;
  }
  .table > .col-b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .table > .col-b > h3:first-child {
    margin-top: 6px;
  }
}