/* Matchhall — an isometric street hall of twelve stalls. Dark ground, one orange accent, League Spartan + JetBrains Mono. */
:root {
  --ground: #120F17; --ground2: #1B1622; --ground3: #241D2D; --seam: #362C40;
  --ink: #FCE6D3; --ink2: #B9A797; --ink3: #7D6F79;
  --ember: #FF8128; --ember-dk: #A64E14; --ember-lt: #FFD9B8; --ember-glow: rgba(255, 129, 40, .34);
  --open-top: #2E2638; --open-l: #251E2E; --open-r: #1D1725;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --disp: 'League Spartan', 'Avenir Next', system-ui, sans-serif;
  --ledge-h: 74px;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--disp); padding-top: calc(var(--ledge-h) + 18px);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
code, .mono { font-family: var(--mono); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- the CA ledge (fixed, top) ---------- */
.ledge { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(18, 15, 23, .94); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--seam); padding: 7px 14px 8px; display: flex; flex-direction: column; gap: 5px; }
.ledge-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ledge-mark { border-radius: 5px; flex: none; }
.ledge-nm { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.ledge-tk { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.ledge-gm { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink2); text-decoration: none; border-bottom: 1px dotted var(--ink3); }
.ledge-ca { background: var(--ground2); border: 1px solid var(--seam); border-radius: 9px; padding: 4px 4px 4px 9px; }
.ledge-k { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ember); flex: none; }
.ledge-addr { font-size: 10.6px; flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; user-select: all; line-height: 1.25; color: var(--ink); }
.ledge-addr.is-wait { color: var(--ink3); user-select: none; word-break: normal; }
.ledge-copy { flex: none; background: var(--ember); color: #1A0E05; border: 0; border-radius: 6px; font-family: var(--mono); font-weight: 700;
  font-size: 11px; padding: 6px 11px; }
.ledge-copy:disabled { background: var(--ground3); color: var(--ink3); cursor: default; }
.ledge-copy.is-done { background: var(--ember-lt); }

/* ---------- headline ---------- */
.lede { margin: 0 auto 14px; padding: 0 16px; max-width: 1180px; font: 800 36px/1.02 var(--disp); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

/* ---------- layout ---------- */
.market { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "floor" "bench" "rules"; }
.floorplan { grid-area: floor; min-width: 0; }
.sidebench { grid-area: bench; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.rulebook { grid-area: rules; min-width: 0; }
.tagline-sm { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.tagline-r { margin-left: auto; }

/* ---------- the hall floor ---------- */
.floorplan-head { display: flex; align-items: baseline; margin-bottom: 8px; }
.stallgrid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 14px 10px 12px;
  border-radius: 16px; border: 1px solid var(--seam);
  background:
    repeating-linear-gradient(30deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(150deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, var(--ground2), var(--ground)); }
.booth { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: transparent; border: 0; color: inherit;
  padding: 4px 4px 7px; border-radius: 12px; min-width: 0; transition: transform .25s ease, background .25s ease; }
.booth:hover { background: rgba(255,255,255,.03); }
.booth.is-pick { background: rgba(255, 129, 40, .07); box-shadow: inset 0 0 0 1px rgba(255, 129, 40, .45); }
.booth-no { font-family: var(--mono); font-size: 10px; color: var(--ink3); display: flex; justify-content: space-between; gap: 4px; }
.booth-chip { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.booth-prism { display: block; width: 78%; margin: 2px auto 0; height: auto; overflow: visible; }
.booth-prism .pf-top { fill: var(--open-top); } .booth-prism .pf-l { fill: var(--open-l); } .booth-prism .pf-r { fill: var(--open-r); }
.booth-prism .pf-edge { fill: none; stroke: var(--seam); stroke-width: 1; stroke-dasharray: 3 3; }
.booth.is-held .pf-top { fill: var(--ember-lt); } .booth.is-held .pf-l { fill: var(--ember); } .booth.is-held .pf-r { fill: var(--ember-dk); }
.booth.is-held .pf-edge { stroke: none; }
.booth.is-quiet .pf-top { fill: #8C7B6E; } .booth.is-quiet .pf-l { fill: #6A5A50; } .booth.is-quiet .pf-r { fill: #4C3F38; }
.booth-who { font-family: var(--mono); font-size: 10px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.booth-stake { font: 700 15px/1.1 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booth-bump { font-family: var(--mono); font-size: 9.5px; color: var(--ember); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booth.is-open .booth-stake { color: var(--ink3); font-weight: 600; }
.booth.is-open .booth-bump { color: var(--ink2); }
.booth.is-last { background: rgba(255, 129, 40, .1); box-shadow: 0 0 0 1px var(--ember), 0 0 26px var(--ember-glow); }
.booth.is-first { box-shadow: 0 0 0 1px var(--ember), 0 0 22px var(--ember-glow); }
.booth-flag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: var(--ember); color: #1A0E05; font-family: var(--mono);
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 2; max-width: 108%; overflow: hidden; text-overflow: ellipsis; }
.booth.is-swap { animation: boothswap .9s ease; }
@keyframes boothswap { 0% { transform: translateY(-8px) scale(1.04); } 60% { transform: translateY(1px); } 100% { transform: none; } }

.liveline { margin: 12px 2px 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.liveline b { color: var(--ember); font-weight: 800; }
.liveline code { font-size: .82em; color: var(--ink2); }
.bumpnote { margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink2); border-left: 2px solid var(--ember); padding: 4px 0 4px 10px; }
.bumpnote b { color: var(--ink); }

/* ---------- the take tool ---------- */
.tool { background: var(--ground2); border: 1px solid var(--seam); border-radius: 16px; padding: 14px; }
.tool-top { display: flex; align-items: baseline; margin-bottom: 10px; }
.tool-pick { margin-left: auto; font: 800 22px/1 var(--disp); color: var(--ember); }
.tool-lab { display: flex; font-family: var(--mono); font-size: 11px; color: var(--ink2); margin-bottom: 5px; }
.tool-hint { margin-left: auto; color: var(--ink3); }
.tool-field { display: flex; align-items: center; background: var(--ground); border: 1px solid var(--seam); border-radius: 10px; padding: 0 12px; }
.tool-field:focus-within { border-color: var(--ember); }
.tool-field input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; color: var(--ink); font: 700 24px/1 var(--mono); padding: 12px 0; }
.tool-unit { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.sums { margin: 12px 0; display: grid; gap: 1px; background: var(--seam); border-radius: 10px; overflow: hidden; }
.sums div { display: flex; justify-content: space-between; gap: 10px; background: var(--ground2); padding: 8px 10px; }
.sums dt { font-size: 13px; color: var(--ink2); }
.sums dd { margin: 0; font: 700 14px/1.3 var(--mono); text-align: right; }
.sums .sums-hl { background: rgba(255, 129, 40, .09); }
.sums .sums-hl dd { color: var(--ember); }
.tool-go { width: 100%; border: 0; border-radius: 12px; background: var(--ember); color: #1A0E05; font: 800 18px/1 var(--disp); padding: 15px; letter-spacing: .01em; }
.tool-go:disabled { background: var(--ground3); color: var(--ink3); cursor: default; }
.tool-foot { margin: 9px 0 0; font-size: 13px; color: var(--ink3); }
.tool-pull { margin-top: 10px; width: 100%; background: transparent; color: var(--ember); border: 1px solid var(--ember); border-radius: 10px; padding: 10px; font-family: var(--mono); font-size: 12px; }

/* ---------- the tape ---------- */
.ticker { background: var(--ground2); border: 1px solid var(--seam); border-radius: 16px; padding: 12px 14px; }
.ticker-head { display: flex; align-items: baseline; margin-bottom: 6px; }
.ticker-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.ticker-list li { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; padding: 7px 0; border-top: 1px dashed var(--seam); color: var(--ink2); overflow-wrap: anywhere; }
.ticker-list li:first-child { border-top: 0; }
.ticker-list li b { color: var(--ink); }
.ticker-list li em { font-style: normal; color: var(--ember); }
.ticker-list .ticker-t { color: var(--ink3); margin-right: 6px; }
.ticker-list li.is-new { animation: tapein .7s ease; }
.ticker-empty { color: var(--ink3) !important; }
@keyframes tapein { from { opacity: 0; transform: translateX(-10px); background: rgba(255,129,40,.12); } to { opacity: 1; transform: none; background: transparent; } }

.mine { background: var(--ground2); border: 1px solid var(--seam); border-radius: 16px; padding: 12px 14px; font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.mine p { margin: 4px 0; overflow-wrap: anywhere; }

/* ---------- rules ---------- */
.rulebook { border-top: 1px solid var(--seam); padding-top: 18px; }
.rulebook-h { font: 800 24px/1.1 var(--disp); margin: 0 0 10px; }
.rulebook-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink2); }
.rulebook-steps b { color: var(--ink); }
.worked { margin-top: 14px; background: var(--ground2); border: 1px solid var(--seam); border-left: 3px solid var(--ember); border-radius: 12px; padding: 12px 14px; }
.worked p { margin: 6px 0 0; color: var(--ink2); }
.worked b { color: var(--ink); font-family: var(--mono); font-size: .94em; }

/* ---------- footer ---------- */
.baseboard { border-top: 1px solid var(--seam); padding: 18px 16px 40px; max-width: 1180px; margin: 0 auto; display: grid; gap: 6px; font-size: 12px; color: var(--ink3); }
.baseboard-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.baseboard-row code { overflow-wrap: anywhere; word-break: break-all; color: var(--ink2); font-size: 11px; }
.baseboard-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; width: 36px; }
.baseboard-links a { color: var(--ink2); }

/* ---------- veil (wallet picker) ---------- */
.veil { position: fixed; inset: 0; z-index: 60; background: rgba(8, 6, 11, .72); display: grid; place-items: center; padding: 16px; }
.veil-card { width: min(380px, 100%); background: var(--ground2); border: 1px solid var(--seam); border-radius: 16px; padding: 14px; }
.veil-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; }
.veil-top button { background: none; border: 0; color: var(--ink2); font-size: 22px; }
.walletrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; margin-top: 6px; background: var(--ground); border: 1px solid var(--seam); border-radius: 10px; color: var(--ink); }
.walletrow img { width: 22px; height: 22px; }
.flash { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 12px; padding: 9px 14px; border-radius: 9px; max-width: 92vw; }

/* ---------- ~ 720-1000: one column, wider measure ---------- */
@media (min-width: 640px) {
  :root { --ledge-h: 50px; }
  .ledge { flex-direction: row; align-items: center; gap: 14px; padding: 8px 20px; }
  .ledge-ca { flex: 1; max-width: 640px; margin-left: auto; }
  .ledge-gm { margin-left: 4px; order: 3; }
  .ledge-id { flex: none; }
  .ledge-addr { font-size: 12px; }
  .lede { font-size: 52px; padding: 0 24px; margin-bottom: 18px; }
  .market { padding: 0 24px 48px; }
  .stallgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; padding: 18px 16px 14px; }
  .booth-stake { font-size: 18px; }
  .booth-who, .booth-bump { font-size: 11px; }
  .liveline { font-size: 20px; }
}

/* ---------- ≥ 1000: the hall left, the tool + tape in a column beside it ---------- */
@media (min-width: 1000px) {
  body { font-size: 16px; }
  .ledge { padding: 8px 28px; }
  .lede { font-size: 66px; padding: 0 28px; max-width: 1180px; }
  .market { padding: 0 28px 56px; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; grid-template-areas: "floor bench" "rules bench"; align-items: start; }
  .sidebench { position: sticky; top: calc(var(--ledge-h) + 18px); }
  .stallgrid { gap: 18px 16px; padding: 22px 20px 18px; }
  .booth-prism { width: 70%; }
  .booth-stake { font-size: 21px; }
  .liveline { font-size: 22px; }
  .ticker-list { max-height: 340px; }
  .rulebook { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  .rulebook-h { grid-column: 1 / -1; }
  .worked { margin-top: 0; }
}
.booth.is-first, .booth.is-last { padding-top: 13px; }