/* xwanted · the Sheriff's board. Papers nailed to dark oak; ink, red stamps, a little gold. */

@font-face { font-family: "Rye"; src: url(../fonts/rye.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Sancreek"; src: url(../fonts/sancreek.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Old Standard"; src: url(../fonts/oldstandard-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url(../fonts/oldstandard-bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url(../fonts/oldstandard-italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ink: #1c1915;
  --ink-soft: rgba(28, 25, 21, 0.72);
  --ink-faint: rgba(28, 25, 21, 0.45);
  --paper: #e9d7a9;
  --paper-hi: #f3e6c2;
  --red: #a8322a;
  --red-hi: #c63d31;
  --gold: #b8892b;
  --wood: #24180f;
  --rag: none;
  font-size: clamp(12.5px, min(1.95vh, 1.2vw), 20px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--wood);
  color: var(--ink);
  font: 400 1rem/1.38 "Old Standard", Georgia, "Times New Roman", serif;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* ------------------------------------------------------------------ the board */

.board-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline: none; }
#board.pointing { cursor: pointer; }
#board.dragging { cursor: grabbing; }
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, rgba(255, 196, 120, 0.06) 0%, rgba(0, 0, 0, 0) 45%, rgba(8, 4, 2, 0.5) 100%),
    linear-gradient(rgba(8, 4, 2, 0.25), rgba(8, 4, 2, 0) 18%, rgba(8, 4, 2, 0) 80%, rgba(8, 4, 2, 0.35));
}
.phone-hint { display: none; }

.hovertag {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--paper-hi); color: var(--ink);
  font: 700 0.72rem/1.15 "Old Standard", serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.38rem 0.6rem 0.32rem;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(-100% - 0.5rem)) rotate(-1deg);
  white-space: nowrap;
  clip-path: polygon(0 4%, 6% 0, 30% 3%, 55% 0, 80% 4%, 100% 1%, 99% 52%, 100% 97%, 70% 100%, 40% 96%, 12% 100%, 0 95%, 2% 50%);
}
.hovertag b { font: 400 1rem/1 "Sancreek", serif; letter-spacing: 0.01em; text-transform: none; display: block; margin-bottom: 0.18rem; }
.hovertag .r { color: var(--red); }

/* ------------------------------------------------------------------ papers */

.paper {
  position: fixed; z-index: 10;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.5)) drop-shadow(0 0.08rem 0.12rem rgba(0, 0, 0, 0.45));
}
.sheet {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 85% 80% at 50% 44%, rgba(243, 230, 194, 0.35) 0%, rgba(243, 230, 194, 0) 55%, rgba(150, 108, 58, 0.42) 100%),
    var(--stain, radial-gradient(circle at 80% 20%, rgba(138, 98, 50, 0.1), rgba(138, 98, 50, 0) 30%)),
    url(../img/grain.png);
  background-size: 100% 100%, 100% 100%, 256px 256px;
  clip-path: var(--rag);
}
/* two nails */
.sheet::before, .sheet::after {
  content: ""; position: absolute; top: 0.55rem; width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #a49a8b 0 18%, #3a322b 26%, #1f1a16 70%);
  box-shadow: 0.08rem 0.14rem 0.12rem rgba(0, 0, 0, 0.55);
}
.sheet::before { left: 0.6rem; }
.sheet::after { right: 0.6rem; }

.title {
  font: 400 1.32rem/1 "Rye", serif; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  padding-bottom: 0.45rem; margin: 0.1rem 0.4rem 0.5rem;
  border-bottom: 2px solid var(--ink); box-shadow: 0 3px 0 -1.4px var(--paper), 0 4px 0 -1.4px var(--ink);
}
.label { font: 700 0.68rem/1.2 "Old Standard", serif; letter-spacing: 0.2em; text-transform: uppercase; }
.fine { font: 700 0.63rem/1.35 "Old Standard", serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.center { text-align: center; }
.unit { font-size: 0.55em; letter-spacing: 0.08em; }
.red { color: var(--red); }
.big { font: 400 1.8rem/1 "Rye", serif; letter-spacing: 0.02em; }
.huge { font: 400 3.25rem/0.95 "Rye", serif; color: var(--red); letter-spacing: 0.01em; text-align: center; margin: 0.15rem 0 0.25rem; white-space: nowrap; }
.huge .no { font-size: 0.42em; letter-spacing: 0.06em; vertical-align: 0.9em; }
.price { font: 400 1.32rem/1.1 "Rye", serif; text-align: center; }

/* buttons: printed boxes with a double frame; red ones are stamps */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  font: 400 0.8rem/1 "Rye", serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: rgba(255, 248, 225, 0.12);
  border: 2px solid currentColor; padding: 0.62em 0.95em 0.52em; cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.btn::after { content: ""; position: absolute; inset: 2.5px; border: 1px solid currentColor; opacity: 0.75; pointer-events: none; }
.btn:hover { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.red { color: var(--red); }
.btn.red:hover { background: var(--red); color: var(--paper-hi); border-color: var(--red); }
.btn.solid { background: var(--red); color: #f8ead0; border-color: #7e231c; }
.btn.solid::after { border-color: rgba(248, 234, 208, 0.75); }
.btn.solid:hover { background: #8e2820; color: #fff4dd; }
.btn.big { font-size: 0.94rem; padding: 0.8em 0.9em 0.68em; width: 100%; white-space: nowrap; }
.btn.small { font-size: 0.66rem; padding: 0.5em 0.7em 0.42em; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.solid:disabled { background: var(--red); color: #f8ead0; }
.btn:focus-visible, .link:focus-visible, .tag:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer; }
.link:hover { color: var(--red); }
.row2 { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.row2 > * { flex: 1; }

/* small tags with one nail (luggage-tag shape) */
.tag {
  position: relative; display: inline-block;
  font: 700 0.66rem/1 "Old Standard", serif; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background-color: var(--paper-hi);
  background-image: url(../img/grain.png); background-size: 256px;
  padding: 0.5rem 0.75rem 0.45rem 1.35rem; border: 0; cursor: pointer;
  clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%);
  filter: drop-shadow(0 0.3rem 0.3rem rgba(0, 0, 0, 0.5));
}
.tag::before { content: ""; position: absolute; left: 0.62rem; top: 50%; width: 0.34rem; height: 0.34rem; margin-top: -0.17rem; border-radius: 50%; background: #2a2420; box-shadow: inset 0.05rem 0.05rem 0 #8d8478; }
.tag:hover { color: var(--red); }

/* ------------------------------------------------------------------ the papers in their places (desktop) */

/* two columns of papers on the sides; on phones they dissolve into the page's flow */
.col { position: fixed; z-index: 10; display: flex; flex-direction: column; pointer-events: none; }
.col > .paper { position: relative; pointer-events: auto; flex: none; }
.col-left { left: 1.1rem; top: 0.9rem; bottom: 5.3rem; width: 19.5rem; gap: 1.15rem; }
.col-right { right: 1.2rem; top: 2.5rem; bottom: 7rem; width: 16.6rem; gap: 1.35rem; align-items: flex-end; }
.masthead { --tilt: -1.2deg; }
.masthead .sheet { padding: 1.25rem 1.3rem 1.15rem; text-align: center; }
.wordmark { font: 400 3.1rem/0.9 "Sancreek", serif; letter-spacing: 0.01em; margin: 0.1rem 0 0.35rem; }
.order { font: 400 0.64rem/1.2 "Rye", serif; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.sub { font: 700 0.56rem/1.3 "Old Standard", serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0.3rem 0 0.75rem; padding-top: 0.3rem; border-top: 1px solid var(--ink-faint); white-space: nowrap; }
.main-act .row2 { margin-top: 0; gap: 0.4rem; }
.main-act .row2 .btn { font-size: 0.72rem; padding: 0.7em 0.5em 0.6em; white-space: nowrap; }
.btn.two { flex-direction: column; gap: 0.18em; line-height: 1; }
.btn.two small { font: 700 0.5rem/1 "Old Standard"; letter-spacing: 0.16em; }
.main-act .row2 .btn.two { padding: 0.45em 0.5em 0.4em; }
.main-act { display: grid; gap: 0.45rem; }
.main-act .yours { font: 400 0.9rem/1.1 "Rye", serif; letter-spacing: 0.06em; }
.main-act .yours b { color: var(--red); font-weight: 400; }

.next { width: 16.6rem; --tilt: 1.1deg; }
.next .sheet { text-align: center; padding-top: 1.35rem; }
.next .fine { margin: 0.35rem 0.2rem 0.75rem; }
.next .btn { width: 100%; }
.wallet-tag { position: fixed; top: 0.75rem; right: 2.4rem; transform: rotate(-2.5deg); z-index: 45; }
.wallet-tag.addr { text-transform: none; letter-spacing: 0.06em; font-size: 0.7rem; }
.wallet-tag.on { color: var(--ink); }
.wallet-tag.on::after { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-left: 0.45rem; border-radius: 50%; background: #3f7a36; vertical-align: 0.05rem; box-shadow: 0 0 0.25rem #6fbf5c; }
.wallet-tag.wrong::after { background: var(--red); box-shadow: 0 0 0.25rem var(--red-hi); }

.chest { width: 15.8rem; margin-right: 0.4rem; --tilt: -0.9deg; cursor: pointer; }
.chest-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.15rem 0 0.25rem; }
.chest-pic { width: 3.2rem; height: 2.4rem; flex: none; }
.chest-row .big { white-space: nowrap; }
.chest .fine { text-align: center; }
.facts { display: grid; gap: 0.12rem; margin: 0.5rem 0 0.4rem; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; border-bottom: 1px dotted var(--ink-faint); padding-bottom: 0.1rem; }
.facts dt { font: 700 0.62rem/1.3 "Old Standard", serif; letter-spacing: 0.14em; text-transform: uppercase; }
.facts dd { margin: 0; font: 400 0.92rem/1.2 "Old Standard", serif; }
.spark { width: 100%; height: 2.2rem; display: block; margin-top: 0.25rem; }
.spark-cap { display: flex; justify-content: space-between; font-size: 0.56rem; margin-top: 0.15rem; }

.fence { width: 16.4rem; margin-left: 0.5rem; --tilt: 0.8deg; cursor: pointer; }
.fence .sheet { padding-bottom: 0.8rem; }
.fence .row2 { margin-top: 0.5rem; }
.fence .row2 .btn { font-size: 0.68rem; padding: 0.55em 0.5em 0.45em; }
.bids { width: 100%; border-collapse: collapse; margin: 0.45rem 0 0.1rem; }
.bids th { text-align: left; font: 700 0.64rem/1.2 "Old Standard", serif; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0; border-bottom: 1px dotted var(--ink-faint); }
.bids td { text-align: right; font: 400 0.9rem/1.2 "Old Standard", serif; padding: 0.22rem 0; border-bottom: 1px dotted var(--ink-faint); white-space: nowrap; }
.bids td small { font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.bids td.none { color: var(--ink-faint); font-style: italic; font-size: 0.75rem; }

.col > .bounty { margin-top: auto; flex: 0 1 auto; min-height: 6rem; display: flex; flex-direction: column; --tilt: -0.6deg; }
.bounty .sheet { flex: 0 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.bounty .title { font-size: 1.15rem; margin-bottom: 0.4rem; padding-bottom: 0.35rem; }
.bounty .who { display: grid; grid-template-columns: 3.7rem 1fr; gap: 0.7rem; align-items: center; margin-bottom: 0.35rem; }
.bounty .who canvas { width: 3.7rem; height: 5.18rem; display: block; cursor: pointer; }
.bounty .who .h { font: 400 1.12rem/1.05 "Sancreek", serif; word-break: break-all; }
.bounty .rk { font: 700 0.56rem/1 "Old Standard"; letter-spacing: 0.12em; color: var(--red); border: 1.5px solid var(--red); padding: 0.12rem 0.25rem 0.06rem; margin-left: 0.2rem; vertical-align: 0.1rem; }
.hold { display: grid; grid-template-columns: 3.7rem 1fr; gap: 0 0.7rem; align-items: center; padding: 0.3rem 0; border-top: 1px dotted var(--ink-faint); cursor: pointer; }
.hold .lab { font: 700 0.56rem/1.2 "Old Standard"; letter-spacing: 0.16em; text-transform: uppercase; text-align: right; }
.hold .icons { display: flex; gap: 0.05rem; grid-column: 2; }
.hold .txt { grid-column: 2; font-size: 0.74rem; line-height: 1.3; }
.hold .txt i { color: var(--ink-soft); }
.hold .lab + .txt { grid-column: 2; }
.kw.k1 { color: #8a6418; font-weight: 700; }
.kw.k2 { color: #7a561a; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); }
.kw.dark { font-style: italic; color: var(--ink-soft); }
.ar { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ar .head, .ar .fl { fill: var(--ink); stroke: none; }
.ar.k1 .fl { fill: var(--gold); }
.ar.k2 { stroke: #8a6418; }
.ar.k2 .head, .ar.k2 .fl { fill: var(--gold); }
.ar.dark { stroke: var(--ink-faint); stroke-dasharray: 2 2.5; }
.ar.dark .head, .ar.dark .fl { fill: var(--ink-faint); }
.qv { display: inline-block; font: 700 0.62rem/1 "Old Standard"; letter-spacing: 0.06em; border: 1.5px solid var(--ink); padding: 0.22rem 0.32rem 0.16rem; margin-right: 0.2rem; }
.qv.k1 { border-color: var(--gold); }
.qv.k2 { border-color: #7a561a; background: rgba(232, 196, 106, 0.4); }
.bounty .who dl { margin: 0.25rem 0 0; display: grid; gap: 0.05rem; }
.bounty .who dl div { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.8rem; }
.bounty .who dt { font: 700 0.6rem/1.5 "Old Standard", serif; letter-spacing: 0.12em; text-transform: uppercase; }
.bounty .who dd { margin: 0; }
.bounty h3 { font: 700 0.62rem/1.2 "Old Standard", serif; letter-spacing: 0.18em; text-transform: uppercase; margin: 0.5rem 0 0.3rem; display: flex; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { font: 700 0.6rem/1 "Old Standard", serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32rem 0.42rem 0.26rem; border: 1px solid var(--ink); background: rgba(255, 248, 225, 0.35); white-space: nowrap; cursor: pointer; }
.chip.k1 { border-color: var(--gold); background: rgba(212, 170, 80, 0.32); }
.chip.k2 { border-color: #7a561a; background: linear-gradient(135deg, #e8c46a, #b8892b); color: #2a1a05; }
.chip.dark { border-style: dashed; color: var(--ink-soft); background: transparent; }
.chip.known { border-style: dotted; }
.chip.q { border-width: 2px; }
.acts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.bounty .bfoot { position: sticky; bottom: -1rem; margin: 0 -1.15rem -1rem; padding: 0.1rem 1.15rem 1rem; background: var(--paper) url(../img/grain.png); background-size: 256px 256px; box-shadow: 0 -0.55rem 0.6rem -0.55rem rgba(28, 25, 21, 0.45); }
.acts .btn { flex: 1 1 auto; }

.tally { left: 50%; bottom: 0.7rem; width: min(47rem, calc(100vw - 43rem)); --tilt: -0.3deg; transform: translateX(-50%) rotate(var(--tilt)); }
.tally .sheet { padding: 0.55rem 1.4rem 0.45rem; }
.tally .sheet::before, .tally .sheet::after { top: 50%; margin-top: -0.31rem; }
.cols { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; margin: 0; gap: 0 0.4rem; }
.cols > div { text-align: center; padding: 0 0.35rem; border-left: 1px solid var(--ink-faint); }
.cols > div:first-child { border-left: 0; }
.cols dt { font: 700 0.58rem/1.2 "Old Standard", serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.cols dd { margin: 0.1rem 0 0; font: 400 1.02rem/1.1 "Rye", serif; letter-spacing: 0.02em; white-space: nowrap; }
.cols dd small { font-size: 0.55em; }
.hint { text-align: center; font: italic 400 0.72rem/1.3 "Old Standard", serif; letter-spacing: 0.06em; margin-top: 0.3rem; padding-top: 0.25rem; border-top: 1px solid var(--ink-faint); color: var(--ink-soft); }
.hint .touch { display: none; }
.touchy .hint .desk { display: none; }
.touchy .hint .touch { display: inline; }

.tags { position: fixed; right: 1rem; bottom: 1.1rem; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.tags .tag:nth-child(1) { transform: rotate(-2deg); }
.tags .tag:nth-child(2) { transform: rotate(1.5deg); }
.tags .tag:nth-child(3) { transform: rotate(-1deg); }

.rules-short { display: none; }

/* flashes when a number changes */
.flash { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { color: var(--red-hi); text-shadow: 0 0 0.6rem rgba(255, 120, 80, 0.55); } 100% { text-shadow: none; } }

/* ------------------------------------------------------------------ the invitation (/@handle) */

.invite { left: 1.1rem; top: 0.9rem; width: 31rem; z-index: 30; --tilt: -0.8deg; }
.invite .sheet { max-height: calc(100vh - 6.5rem); overflow: auto; scrollbar-width: none; }
.landing .col-left { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.col-left, .col-right { transition: opacity 0.3s; }
.invite .sheet { padding: 1.4rem 1.6rem 1.3rem; text-align: center; }
.invite .kick { font: 400 0.72rem/1.2 "Rye", serif; letter-spacing: 0.12em; text-transform: uppercase; }
.invite h2 { font: 400 3.4rem/0.9 "Rye", serif; margin: 0.35rem 0 0.2rem; }
.invite h2 .r { color: var(--red); }
.invite .who { font: 400 1.4rem/1.1 "Sancreek", serif; }
.invite .who + p { margin-top: 0.15rem; }
.invite .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.9rem 0.4rem 0.8rem; align-items: end; }
.invite .pair figure { margin: 0; }
.invite .pair img, .invite .pair .you { width: 100%; aspect-ratio: 1000 / 1400; display: block; box-shadow: 0 0.4rem 0.7rem rgba(0, 0, 0, 0.45); background: #3a2a1e; }
.invite .pair figure:first-child { transform: rotate(-2deg); }
.invite .pair figure:last-child { transform: rotate(2.2deg); }
.invite figcaption { font: 700 0.6rem/1.2 "Old Standard", serif; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.5rem; }
.invite ol { list-style: none; counter-reset: s; padding: 0; margin: 0 0 0.9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; text-align: left; }
.invite li { counter-increment: s; font-size: 0.78rem; line-height: 1.25; padding-left: 1.7rem; position: relative; }
.invite li::before { content: counter(s, upper-roman) "."; position: absolute; left: 0; top: -0.05rem; font: 400 1rem/1 "Rye", serif; color: var(--red); }
.invite .close { margin-top: 0.6rem; font-size: 0.72rem; }

/* the empty poster: @YOU */
.you { position: relative; }
.you svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ forms over the dimmed board */

.veil { position: fixed; inset: 0; z-index: 40; background: radial-gradient(ellipse at 50% 45%, rgba(14, 8, 4, 0.5), rgba(8, 4, 2, 0.82)); }
.forms { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2.5vh 1rem; overflow: auto; pointer-events: none; }
.forms > .paper { position: relative; pointer-events: auto; width: min(42rem, 100%); --tilt: -0.5deg; }
.forms > .paper.wide { width: min(50rem, 100%); }
.form .sheet { padding: 1.5rem 2rem 1.3rem; max-height: 95vh; overflow: auto; scrollbar-width: thin; }
.form .sheet::before, .form .sheet::after { top: 0.75rem; }
.formhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font: 700 0.62rem/1.2 "Old Standard", serif; letter-spacing: 0.22em; text-transform: uppercase; padding: 0 0.9rem 0.45rem; border-bottom: 1px solid var(--ink); }
.formhead .back { font: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 0.2em; }
.formhead .back:hover { color: var(--red); }
.form h2 { font: 400 2.3rem/1 "Rye", serif; text-align: center; margin: 0.8rem 0 0.15rem; letter-spacing: 0.02em; }
.form .lede { text-align: center; font-style: italic; font-size: 0.92rem; margin-bottom: 0.9rem; color: var(--ink-soft); }
.form .rule2 { border: 0; height: 4px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0.8rem 0; }
.field { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 0.7rem; padding: 0.75rem 0; border-top: 1px dotted var(--ink-faint); }
.field:first-of-type { border-top: 0; }
.field > .num { font: 400 1.3rem/1 "Rye", serif; color: var(--red); text-align: right; padding-top: 0.1rem; }
.field > .body { min-width: 0; }
.field h3 { font: 700 0.72rem/1.2 "Old Standard", serif; letter-spacing: 0.18em; text-transform: uppercase; margin: 0.15rem 0 0.45rem; }
.field.done > .num::after { content: "✓"; display: block; font: 700 0.85rem/1 "Old Standard"; color: #3f6a2f; margin-top: 0.25rem; }
.field.off { opacity: 0.45; }
.field p:not([class]) { font-size: 0.9rem; }
.field p + p { margin-top: 0.35rem; }
.field .fine { margin-top: 0.25rem; }
.inp { display: flex; align-items: baseline; gap: 0.4rem; border-bottom: 1.5px dotted var(--ink); padding: 0.1rem 0 0.15rem; margin: 0.2rem 0 0.5rem; }
.inp > span { font: 400 1.25rem/1 "Sancreek", serif; }
.inp input, .inp select {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink);
  font: 400 1.25rem/1.2 "Old Standard", serif; padding: 0.15rem 0;
}
.inp input.sanc { font-family: "Sancreek", serif; }
.inp input::placeholder { color: var(--ink-faint); font-style: italic; }
.inp:focus-within { border-bottom-color: var(--red); border-bottom-style: solid; }
.posttext { background: rgba(255, 250, 232, 0.55); border: 1px solid var(--ink-faint); padding: 0.7rem 0.85rem; font: 400 0.95rem/1.4 "Old Standard", serif; white-space: pre-wrap; word-break: break-word; margin: 0.2rem 0 0.55rem; }
.posttext .code { font-weight: 700; color: var(--red); }
.btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.small-print { font: italic 400 0.78rem/1.35 "Old Standard", serif; color: var(--ink-soft); margin-top: 0.8rem; }
.small-print b { font-style: normal; }
.clerk { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--ink); font: italic 400 0.72rem/1.3 "Old Standard", serif; color: var(--ink-soft); }
.clerk .sig { flex: 1; border-bottom: 1px solid var(--ink-soft); height: 1.2rem; position: relative; }
.clerk .sig::after { content: ""; position: absolute; left: 10%; bottom: 2px; width: 46%; height: 1rem; border-bottom: 2px solid var(--ink); border-radius: 0 0 60% 40%; transform: skewX(-25deg); opacity: 0.6; }
.status { margin-top: 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ink); font: 700 0.72rem/1.35 "Old Standard", serif; letter-spacing: 0.1em; text-transform: uppercase; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.status.err { border-color: var(--red); color: var(--red); text-transform: none; letter-spacing: 0.02em; font-size: 0.86rem; }
.status.ok { border-color: #3f6a2f; color: #2f5523; }
.status .spin { width: 0.8rem; height: 0.8rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; margin: 0.4rem 0 0.2rem; }
.preview img, .preview .ph { width: 9.5rem; aspect-ratio: 1000 / 1400; display: block; box-shadow: 0 0.35rem 0.6rem rgba(0, 0, 0, 0.4); transform: rotate(-1.5deg); background: #3a2a1e; }
.preview .ph { display: grid; place-items: center; color: var(--paper); font: 700 0.6rem/1.3 "Old Standard"; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 1rem; }
.preview .this { font: 400 1.6rem/1 "Rye", serif; color: var(--red); }
.seen { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 0.4rem 0; font-size: 0.9rem; }
.seen dt { font: 700 0.62rem/1.6 "Old Standard", serif; letter-spacing: 0.14em; text-transform: uppercase; }
.seen dd { margin: 0; }
.refnote { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; border: 1px dashed var(--red); padding: 0.45rem 0.7rem; margin: 0.3rem 0 0.4rem; font: 700 0.68rem/1.3 "Old Standard"; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.walletlist { display: grid; gap: 0.4rem; margin: 0.3rem 0; }
.walletlist .btn { justify-content: flex-start; width: 100%; }
.walletlist img { width: 1.3rem; height: 1.3rem; }

/* bill of sale */
.counter { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.5rem; }
.counter button { width: 3rem; height: 3rem; font: 400 1.4rem/1 "Rye"; border: 2px solid var(--ink); background: transparent; cursor: pointer; position: relative; }
.counter button::after { content: ""; position: absolute; inset: 2.5px; border: 1px solid var(--ink); }
.counter button[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); }
.counter button[aria-pressed="true"]::after { border-color: var(--paper-hi); }
.counter button:disabled { opacity: 0.25; cursor: not-allowed; }
.total { font: 400 1.85rem/1 "Rye", serif; margin: 0.2rem 0; white-space: nowrap; }
.total .was { font: 400 0.95rem/1 "Old Standard"; text-decoration: line-through; color: var(--ink-soft); margin-left: 0.5rem; }
.split { width: 100%; border-collapse: collapse; margin: 0.3rem 0; font-size: 0.88rem; }
.split td { padding: 0.18rem 0; border-bottom: 1px dotted var(--ink-faint); }
.split td:last-child { text-align: right; white-space: nowrap; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.3rem 0; }
.kinds > div { border: 1px solid var(--ink); padding: 0.45rem 0.5rem; text-align: center; }
.kinds > div.k1 { border-color: var(--gold); background: rgba(212, 170, 80, 0.2); }
.kinds > div.k2 { border-color: #7a561a; background: linear-gradient(135deg, rgba(232, 196, 106, 0.6), rgba(184, 137, 43, 0.6)); }
.kinds b { display: block; font: 400 0.82rem/1.1 "Rye"; letter-spacing: 0.04em; }
.kinds span { font-size: 0.78rem; }
.curve { width: 100%; height: auto; display: block; margin: 0.3rem 0; }
.kinds.rows { grid-template-columns: 1fr; gap: 0.3rem; }
.kinds.rows > div { display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 0.35rem 0.6rem; }
.kinds.rows b { display: inline; }

/* binding of a quiver / the fence pickers */
.pick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; }
.pick .chip { font-size: 0.66rem; padding: 0.42rem 0.5rem 0.34rem; }
.pick .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.pick .chip.k2[aria-pressed="true"] { background: #6b4a12; }
.pick .chip:disabled { opacity: 0.35; cursor: not-allowed; }
.booklist { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 0.3rem 0; }
.booklist th { text-align: left; font: 700 0.6rem/1.3 "Old Standard"; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding: 0.25rem 0.3rem; }
.booklist td { padding: 0.3rem 0.3rem; border-bottom: 1px dotted var(--ink-faint); vertical-align: middle; white-space: nowrap; }
.booklist tr.picked td { background: rgba(168, 50, 42, 0.1); }
.booklist td.n { text-align: right; white-space: nowrap; }
.booklist tr.mine td { background: rgba(184, 137, 43, 0.14); }
.booklist .who { font-size: 0.78rem; color: var(--ink-soft); }
.sellcols { grid-template-columns: 1.25fr 1fr; align-items: start; }
.sellside { position: sticky; top: 0; }
.booklist .yours { font: 700 0.56rem/1 "Old Standard"; letter-spacing: 0.14em; color: var(--red); border: 1px solid var(--red); padding: 0.15rem 0.25rem; margin-left: 0.3rem; }
.tabs { display: flex; gap: 0; margin: 0.3rem 0 0.6rem; border-bottom: 2px solid var(--ink); }
.tabs button { flex: 1; background: none; border: 0; padding: 0.5rem 0.3rem 0.4rem; font: 400 0.72rem/1.1 "Rye"; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--red); color: var(--red); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.rules p { font-size: 0.95rem; margin: 0.45rem 0; }
.rules h3 { font: 400 1rem/1.1 "Rye", serif; letter-spacing: 0.05em; text-transform: uppercase; margin: 1rem 0 0.3rem; }
.rules .honest { border: 2px solid var(--red); padding: 0.7rem 0.9rem; margin: 0.7rem 0; background: rgba(168, 50, 42, 0.05); }
.rules .honest b { color: var(--red); }
.mono { font-family: "Old Standard", serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; word-break: break-all; }

/* ------------------------------------------------------------------ inspect: a card at the side */

.inspect { right: 1.2rem; top: 2.7rem; width: 21.5rem; z-index: 35; --tilt: 0.7deg; }
.inspect .sheet { padding: 1.25rem 1.2rem 1rem; max-height: calc(100vh - 8.6rem); overflow: auto; scrollbar-width: thin; }
.inspecting .col-right { opacity: 0; pointer-events: none; }
.inspect .top { display: flex; justify-content: space-between; align-items: baseline; font: 700 0.62rem/1.2 "Old Standard"; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 0.8rem 0.4rem; border-bottom: 1px solid var(--ink); }
.inspect h2 { font: 400 1.05rem/1 "Rye"; letter-spacing: 0.12em; text-align: center; margin: 0.6rem 0 0.1rem; }
.inspect .h { font: 400 1.75rem/1.05 "Sancreek"; text-align: center; word-break: break-all; }
.inspect .art { display: block; width: 72%; margin: 0.6rem auto 0.7rem; aspect-ratio: 1000 / 1400; box-shadow: 0 0.4rem 0.7rem rgba(0, 0, 0, 0.4); transform: rotate(-1deg); background: #3a2a1e; }
.inspect .art.loading { display: grid; place-items: center; color: var(--paper); font: 700 0.62rem/1.4 "Old Standard"; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 1rem; }
.inspect dl { display: grid; grid-template-columns: 1fr auto; gap: 0.08rem 0.6rem; margin: 0.2rem 0 0.6rem; }
.inspect dt { font: 700 0.62rem/1.6 "Old Standard"; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px dotted var(--ink-faint); }
.inspect dd { margin: 0; text-align: right; font-size: 0.9rem; border-bottom: 1px dotted var(--ink-faint); }
.inspect .links { display: grid; gap: 0.4rem; }
.inspect .links .btn { width: 100%; }
.inspect .by { text-align: center; font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }

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

.toast { position: fixed; left: 50%; top: 1rem; z-index: 70; transform: translateX(-50%) translateY(-200%); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); pointer-events: none; }
.toast.on { transform: translateX(-50%) translateY(0) rotate(-0.6deg); pointer-events: auto; }
.toast .t { background: var(--paper-hi); background-image: url(../img/grain.png); padding: 0.6rem 1rem 0.5rem; font: 700 0.72rem/1.3 "Old Standard"; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.55); display: flex; gap: 0.7rem; align-items: center; }
.toast .t b { font: 400 0.95rem/1 "Sancreek"; letter-spacing: 0; text-transform: none; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.mocktag { position: fixed; left: 1rem; bottom: 0.6rem; z-index: 12; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; max-width: 21rem; font: 700 0.56rem/1.2 "Old Standard"; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233, 215, 169, 0.75); }
.mocktag b { color: #e2604f; font-weight: 700; }
.mocktag a { color: rgba(233, 215, 169, 0.9); text-decoration: underline; text-underline-offset: 0.15em; }
.mocktag a.on { color: #fff3d6; text-decoration: none; border-bottom: 1px solid #e2604f; }
.invite .pair.one { grid-template-columns: 1fr; justify-items: center; }
.invite .pair.one figure { width: 52%; }
.noscript { position: fixed; inset: auto 1rem 1rem; z-index: 99; background: var(--paper); padding: 1rem; font-size: 1rem; }

/* ------------------------------------------------------------------ short and narrow windows */

@media (max-height: 940px) and (min-width: 760px) {
  .form h2 { font-size: 2rem; margin-top: 0.5rem; }
  .form .lede { margin-bottom: 0.55rem; }
  .field { padding: 0.55rem 0; }
  .preview { grid-template-columns: 7.2rem 1fr; }
  .preview img, .preview .ph { width: 7.2rem; }
  .posttext { padding: 0.55rem 0.75rem; }
  .col-left { gap: 0.95rem; }
}

@media (max-height: 760px) and (min-width: 760px) {
  .wordmark { font-size: 2.8rem; }
  .masthead .sheet { padding: 1rem 1.1rem 0.9rem; }
  .sub { margin-bottom: 0.6rem; }
  .huge { font-size: 2.8rem; }
  .spark { height: 1.6rem; }
  .col-left { gap: 0.9rem; }
  .col-right { gap: 1.1rem; }
}
@media (max-width: 1180px) and (min-width: 760px) {
  .tally { width: calc(100vw - 2rem); left: 1rem; bottom: 0.5rem; transform: rotate(-0.2deg); }
  .tags { bottom: 5.4rem; }
  .col-left { bottom: 5.8rem; }
  .invite { width: 28rem; }
}

/* ------------------------------------------------------------------ phones: the page scrolls */

@media (max-width: 759px) {
  :root { font-size: 15px; }
  body { overflow: auto; overflow-x: hidden; }
  .app { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem 0.8rem 2.5rem; min-height: 100%; }
  .col { display: contents; }
  .paper, .tags, .col > .paper { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; transform: rotate(var(--tilt-phone, 0deg)); }
  .col > .bounty { margin-top: 0; min-height: 0; }
  .masthead { order: 1; --tilt-phone: -0.8deg; }
  .app { padding-top: 2.6rem; }
  .wallet-tag { position: absolute; top: 0.55rem; right: 0.9rem; }
  #board { touch-action: pan-y; }
  .landing .col-left { opacity: 1; pointer-events: auto; }
  .invite .sheet { max-height: none; }
  .formhead { flex-wrap: wrap; letter-spacing: 0.12em; gap: 0.3rem 1rem; }
  .inspecting .col-right { opacity: 1; }
  .invite { order: 2; --tilt-phone: 0.5deg; }
  .next { order: 3; --tilt-phone: 0.7deg; }
  .board-wrap { order: 4; position: relative; height: 64vh; min-height: 22rem; margin: 0 -0.8rem; border-top: 3px solid #120b06; border-bottom: 3px solid #120b06; }
  .chest { order: 5; --tilt-phone: -0.6deg; }
  .fence { order: 6; --tilt-phone: 0.6deg; }
  .bounty { order: 7; --tilt-phone: -0.4deg; }
  .bounty .sheet { max-height: none; }
  .tally { order: 8; transform: rotate(-0.3deg); }
  .rules-short { order: 9; display: block; --tilt-phone: 0.4deg; }
  .mocktag { position: relative; order: 11; left: auto; bottom: auto; max-width: none; justify-content: center; }
  .rules-short p { font-size: 0.92rem; margin-bottom: 0.6rem; }
  .tags { order: 10; flex-direction: row; justify-content: center; flex-wrap: wrap; z-index: 1; }
  .cols { grid-template-columns: repeat(3, 1fr); gap: 0.5rem 0; }
  .cols > div:nth-child(4) { border-left: 0; }
  .wordmark { font-size: 3.6rem; }
  .huge { font-size: 3.4rem; }
  .phone-hint { display: block; position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%); font: 700 0.6rem/1 "Old Standard"; letter-spacing: 0.16em; color: rgba(233, 215, 169, 0.7); pointer-events: none; white-space: nowrap; }
  .invite h2 { font-size: 3rem; }
  .invite ol { grid-template-columns: 1fr; }
  .forms { padding: 0; place-items: stretch; }
  .forms > .paper, .forms > .paper.wide { width: 100%; transform: none; filter: none; min-height: 100%; }
  .form .sheet { clip-path: none; max-height: none; min-height: 100dvh; padding: 1.2rem 1.1rem 2rem; }
  .form h2 { font-size: 1.9rem; }
  .field { grid-template-columns: 1.6rem 1fr; }
  .preview { grid-template-columns: 7rem 1fr; }
  .preview img, .preview .ph { width: 7rem; }
  .cols2 { grid-template-columns: 1fr; }
  .inspect { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; transform: none; z-index: 60; }
  .inspect .sheet { clip-path: none; max-height: 88vh; border-top: 3px solid var(--ink); }
  .inspect .art { width: 55%; }
  .hovertag { display: none; }
  .toast { top: auto; bottom: 1rem; transform: translateX(-50%) translateY(200%); }
  .toast.on { transform: translateX(-50%) translateY(0); }
}