/* ------------------------------------------------------------------
   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 {
  /* Oxblood, blush and wine, from the brand kit. The token names are older than the brand and
     a hundred and fifty rules refer to them, so the names stayed and the values moved: "gold"
     is the blush the wordmark is drawn in, "ember" is wine lifted far enough to read as text. */
  --ink: #260d17;
  --ink-1: #2d1119;
  --ink-2: #36141f;
  --ink-3: #411926;
  --line: #4c2231;
  --line-soft: #36161f;

  --gold: #ebc5c1;
  --gold-soft: #c79c99;
  --gold-faint: rgba(235, 197, 193, 0.2);

  --cream: #f3dedb;
  --cream-dim: #bd9894;
  --cream-faint: #8a6269;

  --ember: #b8395e;
  --ember-lift: #d24c72;
  --sage: #9aa88f;

  --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(235, 197, 193, 0.07), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(117, 29, 61, 0.35), 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;
}
/* The lockup is artwork, so it is placed rather than typeset. Kept well above the minimum
   width in the brand guide, with its own clear space above and below. */
.wordmark {
  margin: 0 0 6px;
  text-align: center;
}
.wordmark img {
  display: block;
  width: min(264px, 72vw);
  height: auto;
  margin: 0 auto;
}
.symbol {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
.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 ---------------------------- */

/* The name over the table: small, centred, and out of the way of the two of you. */
.brandbar {
  display: flex;
  justify-content: center;
  padding: calc(10px + env(safe-area-inset-top)) var(--gut) 0;
  background: var(--ink-1);
}
.brandbar img {
  width: 132px;
  height: auto;
  opacity: 0.85;
}
.brandbar + .top {
  padding-top: 10px;
}

.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, #f0d5d2, var(--gold-soft));
  border-color: #f3dedb;
  color: #260d17;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}
.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;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
/* Five rungs wrap to two rows on a phone. */
.seg .btn {
  min-width: 88px;
}
/* Ticked by you but not by your partner, so it is not actually in play yet. */
.check.half {
  opacity: 0.62;
}

/* 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;
}
/* Kinds of content need a line of explanation each, so they run full width with it underneath. */
.checks.spelled {
  grid-template-columns: 1fr;
  gap: 0;
}
.checks.spelled .check {
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 0;
  padding: 8px 0;
}
.checks.spelled .check input {
  margin-top: 1px;
}
.checks.spelled .kink-group {
  grid-column: 1 / -1;
  margin: 12px 0 2px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.checks.spelled .kink-group:first-child {
  margin-top: 2px;
}
.checks.spelled .blurb {
  flex: 1 0 100%;
  padding-left: 29px;
  margin-top: 2px;
}

@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%, #3d1826, var(--ink-1) 62%, #180810);
  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);
}

/* Where things stand, as marks. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 4px;
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--cream-dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* Under a heading rather than under the medallion, chips line up left. */
.stats.left {
  justify-content: flex-start;
  margin: 10px 0 14px;
}
.stats.left .stat:first-child {
  font-family: var(--sans);
  font-size: 13px;
  padding: 5px 12px;
}
.stat i {
  font-style: normal;
  font-size: 12px;
  opacity: 0.85;
}
.stat b {
  font-weight: 600;
  color: var(--cream-faint);
  font-variant-numeric: tabular-nums;
}
.stat.ok {
  border-color: rgba(135, 151, 126, 0.5);
  color: var(--sage);
}
.stat.no {
  border-color: rgba(184, 57, 94, 0.45);
  color: var(--ember-lift);
}
.stat.gold {
  border-color: var(--gold-faint);
  color: var(--gold);
}
/* The first chip is your own standing, so it carries more weight than the rest. */
.stats .stat:first-child {
  font-family: var(--serif);
  font-size: 17px;
  padding: 7px 16px;
}

.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(243, 222, 219, 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: 17%;
  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(235, 197, 193, 0.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(243, 222, 219, 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: 14px;
  line-height: 1.26;
  color: var(--cream);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -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. One tap target to finish a task, and the card it earns tucked behind its chip. */
.meter {
  height: 2px;
  background: var(--line-soft);
  margin: 2px 0 10px;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width 0.3s ease;
}

.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

/* The whole left column is the tap target, so finishing a task never needs aim. */
.task .tick {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task .tick:hover:not(:disabled) {
  background: var(--gold-faint);
}
.task.done .tick {
  background: var(--sage);
  border-color: var(--sage);
  cursor: default;
}

.task .body {
  min-width: 0;
}
.task .t {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
}
.task .chips-row {
  margin-top: 6px;
}

/* A reward chip. Tappable when there is a card behind it, flat when it is just power. */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--gold-faint);
  border-radius: 999px;
  background: none;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chip-btn.flat {
  cursor: default;
}
.chip-btn i {
  font-style: normal;
  opacity: 0.85;
}
.chip-btn b {
  font-weight: 400;
  color: var(--cream-faint);
  margin-left: 1px;
}
.chip-btn.on {
  background: var(--gold-faint);
  color: var(--cream);
}

/* The card this task earns: the same act with the roles swapped. */
.task .peek {
  margin: 8px 0 2px;
  padding-left: 11px;
  border-left: 2px solid var(--gold-faint);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--cream-dim);
}

.task .hidebtn {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}
.task.done {
  opacity: 0.5;
}
.task.done .t {
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

/* ---------------------------- modals ---------------------------- */
/* 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;
  }
}

/* A card in hand that has not been earned yet: visible, because its task is how you earn it, but
   plainly not yours to play. */
.tcg.locked .tcg-face {
  cursor: default;
  border-style: dashed;
  border-color: var(--line);
}
.tcg.locked .tcg-txt,
.tcg.locked .tcg-head {
  opacity: 0.45;
}
.tcg.locked .tcg-art {
  opacity: 0.3;
}
.tcg-locked {
  color: var(--gold);
}
/* The daily choice, which pays, so it is worth noticing. */
.menu-row.nudge .m-label {
  color: var(--gold);
}
.allow-list {
  margin-top: 10px;
}
.allow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.allow-txt {
  flex: 1;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.3;
}

/* The daily choice: a few cards side by side, each with its own button. */
.allow-pick {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}
/* The card face sizes to its words and the button sits under it, rather than the face claiming
   the whole height and squashing the button to a sliver. */
.allow-pick .tcg {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 100%;
  aspect-ratio: auto;
}
.allow-pick .tcg-face {
  height: auto;
}
.allow-pick .tcg-art {
  display: none;
}
.allow-pick .tcg-txt {
  -webkit-line-clamp: 4;
  font-size: 16px;
}
@media (min-width: 620px) {
  .allow-pick {
    grid-template-columns: repeat(3, 1fr);
  }
}
.allow-btn {
  width: 100%;
  margin-top: 8px;
}