/* Ace & Jacks Poker League: card-room stationery.
   Ivory stock is the ground, baize appears only where the table is, ink is black and claret
   like the cards, and gold is used only as fine rules, never as fills. Radius and weight vary
   by material: stationery is square-cornered, cards are rounded, the table has a padded rail. */

:root {
  --paper: #f3eee2;
  --paper-2: #e9e1cf;
  --sheet: #fbf9f3;
  --rule: #e0d7c3;
  --rule-strong: #c4b595;
  --ink: #16140f;
  --ink-2: #45403a;
  --ink-3: #605849;
  --red: #8c1c21;
  --felt: #0f3526;
  --felt-deep: #0a271c;
  --rail: #221710;
  --cream: #f5efe1;
  --cream-2: #d8cfba;
  --gold: #b3905a;
  --gold-soft: rgba(179,144,90,.55);
  --brass: #b3905a;

  --f-display: 'Bodoni Moda', Georgia, serif;
  --f-body: 'Barlow', system-ui, sans-serif;
  --f-ui: 'Barlow Condensed', 'Barlow', sans-serif;
  --f-type: 'Barlow Condensed', 'Barlow', sans-serif;

  --tab-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --wrap: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-optical-sizing: none; }
/* Bodoni pinned to its text cut: iOS otherwise picks the hairline display cut, which is hard to read on felt */
[class], h1, h2, h3, b { font-optical-sizing: none; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  font-variant-numeric: lining-nums tabular-nums;
}
/* laid paper, barely there */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; }
.skip:focus { top: 10px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

.suit, .s, .idx small, .pip, .m-suit, .suits { font-family: 'Apple Symbols', 'Segoe UI Symbol', 'DejaVu Sans', var(--f-display); font-variant-emoji: text; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -.005em; font-variation-settings: 'opsz' 14; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { max-width: 62ch; }
.typed { font-family: var(--f-type); font-variant-numeric: tabular-nums; }
.quiet { color: var(--ink-3); }

.pcard .idx, .pcard .vname, .pcard .times b, .brand b, .board-row .pos, .board-row .pts, .m-name, .m-row b, .photo b, .cut, .rules-card h3, .costs tfoot td, .costs tfoot .n, .audit li > div > b, .compare h3 { font-variation-settings: 'opsz' 14; }

/* ---------- header: solid, no glass ---------- */
.topbar { background: var(--felt-deep); color: var(--cream); border-bottom: 1px solid var(--gold-soft); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand img { width: 50px; height: 50px; object-fit: contain; margin: -4px 0 -10px; }
.brand b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; white-space: nowrap; }
.topnav { display: none; }
.topnav a { text-decoration: none; font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; padding: 6px 12px; color: var(--cream-2); }
.topnav a:hover { color: var(--cream); }
.topnav a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 9px; }
.btn-play { flex: none; white-space: nowrap; font-family: var(--f-ui); font-weight: 600; font-size: 1rem; letter-spacing: .03em; text-decoration: none; padding: 7px 14px; color: var(--cream); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--gold); }
.btn-play:hover { background: var(--gold); color: var(--felt-deep); }
.btn-play .long { display: none; }
@media (min-width: 480px) { .btn-play .long { display: inline; } }
@media (max-width: 359px) { .brand img { width: 42px; height: 42px; } .brand b { font-size: 1.05rem; } }

/* ---------- mobile tab bar: solid felt, one suit per section ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--felt-deep); border-top: 1px solid var(--gold-soft);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-decoration: none; color: var(--cream-2); font-family: var(--f-ui); font-weight: 600; font-size: .85rem;
}
.tabbar .suit { font-size: 1.5rem; line-height: 1.05; color: var(--cream); }
.tabbar a.redsuit .suit { color: #e0474f; }
.tabbar a[aria-current="page"] { color: #fff; }
.tabbar a[aria-current="page"]::after { content: ''; width: 18px; height: 1px; background: var(--gold); margin-top: 4px; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .topnav { display: flex; gap: 4px; }
  .topbar .wrap { height: 76px; }
  .brand img { width: 62px; height: 62px; margin-bottom: -18px; }
}

/* ---------- buttons: printed, not pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: .03em;
  padding: 11px 20px; border-radius: 2px; text-decoration: none; border: 0; cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #a3252b; }
.btn-ink { background: var(--ink); color: var(--sheet); }
.btn-ink:hover { background: #33302a; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sheet); }
.on-felt .btn-line { color: var(--cream); box-shadow: inset 0 0 0 1px var(--gold); }
.on-felt .btn-line:hover { background: var(--gold); color: var(--felt-deep); }

/* ---------- THE TABLE: the only felt on the page ---------- */
.table-top {
  position: relative; color: var(--cream); background-color: var(--felt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  padding: 22px 0 34px;
  overflow-x: clip;
}
/* the padded rail along the table edge */
.table-top::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; z-index: 1;
  background: linear-gradient(var(--rail), #1a110b);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: inset 0 1px 0 var(--gold-soft), inset 0 3px 0 rgba(255,255,255,.05), 0 6px 10px rgba(40,25,10,.25);
}
.table-grid { display: grid; gap: 18px; }
.lede h1 { font-size: clamp(1.75rem, 8.2vw, 3.4rem); max-width: 15ch; font-weight: 600; }
.lede p { margin-top: 12px; color: var(--cream-2); font-size: 1.05rem; }
.lede p b { color: var(--cream); font-weight: 600; }

/* season as a cribbage peg row: 12 holes, pegged up to this week */
.pegs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; font-family: var(--f-ui); font-size: 1rem; color: var(--cream-2); }
.pegs ol { display: flex; gap: 7px; list-style: none; padding: 6px 9px; background: var(--rail); border-radius: 20px; }
.pegs li { width: 10px; height: 10px; border-radius: 50%; background: #0d0907; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); }
.pegs li.on { background: var(--brass); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.pegs li.now { background: #e8c27a; box-shadow: 0 0 0 2px var(--rail), 0 0 0 3px #e8c27a; }

.hand { --cw: min(246px, 64vw); position: relative; height: calc(var(--cw) * 1.56); max-width: 360px; width: 100%; margin: 6px auto 0; }
.pcard {
  position: absolute; left: 50%; top: 6px; width: var(--cw); height: calc(var(--cw) * 1.35); margin-left: calc(var(--cw) * -.58);
  background: var(--sheet); color: var(--ink); border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.32);
  padding: 20px 20px 34px; display: flex; flex-direction: column;
  transform-origin: 50% 120%; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
  text-decoration: none;
}
.pcard .idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .92; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.pcard .idx small { font-size: 1.25rem; }
.pcard .idx.tl { top: 12px; left: 12px; }
.pcard .idx.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.pcard.redcard .idx { color: var(--red); }
.pcard .body { margin: 30px 8px 0; display: flex; flex-direction: column; height: 100%; }
.pcard .when { font-family: var(--f-ui); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--red); }
.pcard .vname { font-family: var(--f-display); font-weight: 600; font-size: 1.75rem; line-height: 1.02; margin: 8px 0 4px; }
.pcard .town { color: var(--ink-3); }
.pcard .times { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; font-family: var(--f-ui); color: var(--ink-3); font-size: .95rem; }
.pcard .times b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; color: var(--ink); }
.pcard .count { margin-top: 8px; font-family: var(--f-ui); font-weight: 600; font-size: 1.02rem; }
.pcard .count .live { color: var(--red); }
.pcard .count .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 1px; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.pcard .body { position: relative; z-index: 1; }
.pcard .pip { position: absolute; right: 16px; bottom: 114px; font-size: 4.6rem; line-height: 1; color: var(--rule); pointer-events: none; }
.pcard.redcard .pip { color: #ead3c6; }

.hand { touch-action: pan-y; }
.hand .pcard { transition: transform .55s cubic-bezier(.2,.85,.25,1), opacity .4s ease, box-shadow .35s; will-change: transform; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hand .pcard.p1 { z-index: 4; transform: rotate(-3deg); cursor: grab; }
.hand .pcard.p2 { z-index: 3; transform: rotate(5deg) translate(11%, 1%); }
.hand .pcard.p3 { z-index: 2; transform: rotate(13deg) translate(22%, 5%); }
.hand .pcard.p4 { z-index: 1; transform: rotate(19deg) translate(30%, 9%); opacity: 0; }   /* waiting behind the hand */
.hand .pcard.gone-l { z-index: 5; transform: translate(-150%, 6%) rotate(-30deg); opacity: 0; transition-duration: .5s, .45s; }
.hand .pcard.gone-r { z-index: 5; transform: translate(150%, 6%) rotate(30deg); opacity: 0; transition-duration: .5s, .45s; }
.hand .pcard.dragging { transition: none; cursor: grabbing; box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 22px 36px rgba(0,0,0,.4); }
.hand .pcard:not(.p1) { box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.2); }
.hand .pcard.p2:hover, .hand .pcard.p3:hover { filter: brightness(1.03); }
/* the dealer's nudge: shows the top card can move */
.hand .pcard.p1.peek { animation: peek 1.1s cubic-bezier(.4,0,.2,1) both; }
@keyframes peek { 30% { transform: translate(-20px, 2px) rotate(-8deg); } 60% { transform: translate(4px, 0) rotate(-2deg); } }
.hand-hint { display: none; text-align: center; margin-top: 10px; font-family: var(--f-ui); font-size: .95rem; letter-spacing: .03em; color: var(--cream-2); }
@media (hover: none) { .hand-hint { display: block; } }
.hand-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 2px; position: relative; z-index: 2; }

@media (max-width: 899px) { .lede p.more { display: none; } }
@media (max-width: 380px) {
  .pcard { padding: 16px 14px 30px; }
  .pcard .body { margin: 26px 4px 0; }
  .pcard .vname { font-size: 1.45rem; }
  .pcard .times b { font-size: 1.15rem; }
  .pcard .pip { font-size: 3.6rem; bottom: 100px; }
  .hand-actions .btn { padding: 10px 14px; }
}
@media (min-width: 900px) {
  .table-top { padding: 54px 0 60px; }
  .table-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
  .hand { --cw: 272px; }
}

/* ---------- sections on paper ---------- */
.section { padding: 48px 0 6px; }
@media (min-width: 900px) { .section { padding-top: 64px; } }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--gold); padding-bottom: 10px; }
.head .more { font-family: var(--f-ui); font-weight: 600; letter-spacing: .03em; font-size: 1.02rem; color: var(--red); text-decoration: none; white-space: nowrap; }
.head .more:hover { text-decoration: underline; }
.head h2 small, h1 small { font-family: var(--f-ui); font-weight: 500; font-size: 1rem; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.page-top { padding-top: 30px; }
.page-top h1 { border-bottom: 1px solid var(--gold); padding-bottom: 12px; margin-bottom: 14px; }

/* desktop: seat finder and fixtures side by side */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pair > * { min-width: 0; }
@media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- find your name: typed onto the sheet ---------- */
.seat { background: var(--sheet); padding: 18px 18px 20px; border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule-strong), 0 12px 24px -18px rgba(60,40,10,.5); }
.seat h2 { font-size: 1.6rem; }
.seat p { color: var(--ink-3); margin-top: 4px; }
.search { position: relative; display: flex; align-items: stretch; gap: 8px; height: 54px; margin-top: 14px; }
.search .field { position: relative; display: flex; flex: 1; min-width: 0; height: 100%; border-radius: 4px; background: #fff; }
.search .ghost {
  position: absolute; inset: 0; padding: 0 14px 0 45px; display: flex; align-items: center; pointer-events: none; overflow: hidden;
  font-family: var(--f-body); font-size: 1.08rem; white-space: pre; color: transparent;
}
.search .ghost i { font-style: normal; color: #9c917c; }
.search .ghost em { font-style: normal; font-family: var(--f-ui); font-size: .95rem; color: #8a6d3b; margin-left: 8px; flex: none; }
.search input {
  position: relative; width: 100%; height: 54px; padding: 0 14px 0 44px; border: 1px solid var(--rule-strong); border-radius: 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b3905a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 14px 50%;
  font-family: var(--f-body); font-size: 1.08rem; color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(40,30,10,.08); transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: #8a8170; }
.search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,144,90,.22), inset 0 1px 3px rgba(40,30,10,.06); }
/* iOS gives search inputs their own margins, line-height and baseline; pin all of it */
.search input { -webkit-appearance: none; appearance: none; display: block; margin: 0; height: 100%; line-height: normal; box-sizing: border-box; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search .search-btn { flex: none; margin: 0; height: 100%; -webkit-appearance: none; appearance: none; padding: 0 18px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: .03em; cursor: pointer; }
.search .search-btn:hover { background: #a3252b; }
.suggest { list-style: none; margin-top: 6px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 12px 24px -14px rgba(40,30,10,.45); }
.suggest:empty { display: none; }
.suggest button { width: 100%; text-align: left; background: none; border: 0; border-top: 1px dashed var(--rule); padding: 11px 12px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.suggest li:first-child button { border-top: 0; }
.suggest button:hover, .suggest button:focus, .suggest button.hl { background: #f6efdf; outline: none; }
.suggest .typed { color: var(--ink-3); font-size: .95rem; }

/* result: a player membership card, baize with a gold foil frame */
.member {
  margin-top: 18px; position: relative; color: var(--cream); background-color: var(--felt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  border-radius: 12px; padding: 20px 22px 18px; box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 16px 30px -14px rgba(10,30,20,.6);
  animation: issue .4s cubic-bezier(.2,.8,.2,1);
}
.member::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-soft); border-radius: 7px; pointer-events: none; }
@keyframes issue { from { opacity: 0; transform: translateY(8px); } }
.m-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-ui); font-weight: 500; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.m-top .m-suit { font-size: 1.2rem; letter-spacing: 0; }
.m-name { font-family: var(--f-display); font-weight: 600; font-size: 1.75rem; line-height: 1.05; margin: 12px 0 14px; overflow-wrap: anywhere; }
.m-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding: 10px 0; }
.m-row small { display: block; font-family: var(--f-ui); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-2); }
.m-row b { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.m-row div:first-child b { color: var(--gold); }
@media (max-width: 380px) { .m-row { grid-template-columns: repeat(2, 1fr); row-gap: 10px; } .search .search-btn { padding: 0 14px; } }
.member .m-chase { margin-top: 12px; color: var(--cream); }
.routes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.stampmark { font-family: var(--f-ui); font-weight: 600; font-size: .92rem; letter-spacing: .02em; padding: 2px 10px; border: 1px solid var(--gold); color: var(--cream); border-radius: 2px; }
.stampmark.out { border-color: var(--cream-2); color: var(--cream-2); }
.member .actions { display: flex; gap: 18px; margin-top: 14px; }
.member .actions a, .member .actions button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-ui); font-weight: 600; font-size: 1rem; letter-spacing: .03em; color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- fixtures: a typed list with dot leaders ---------- */
.fixtures { list-style: none; font-family: var(--f-type); font-size: 1.02rem; }
.fixtures li { border-bottom: 1px solid var(--rule); }
.fixtures a { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px; text-decoration: none; }
.fixtures a:hover .v { text-decoration: underline; }
.fixtures .d { flex: none; width: 5.6em; color: var(--ink-3); }
.fixtures .v { font-family: var(--f-body); font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixtures .dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-5px); }
.fixtures .t { flex: none; }
.fixtures li.tonight { background: rgba(179,144,90,.1); }
.fixtures li.tonight .d, .fixtures li.tonight .t { color: var(--red); font-weight: 600; }

/* ---------- the league sheet ---------- */
.sheet { background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule-strong), 0 16px 30px -24px rgba(60,40,10,.6); }
.sheet-head, .board-row { display: grid; grid-template-columns: 42px 1fr 64px; column-gap: 10px; align-items: center; padding: 0 12px; }
.sheet-head { font-family: var(--f-ui); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); height: 36px; border-bottom: 1px solid var(--ink); }
.sheet-head .c { text-align: center; }
.sheet-head .n, .board-row .pts { text-align: right; }
.sheet-head .x, .board-row .x { display: none; }
.board-row { width: 100%; min-height: 54px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; padding-top: 7px; padding-bottom: 7px; }
.board-row:hover { background: #f5ecd9; }
.board-row .pos { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; text-align: center; }
.board-row .pos .s { font-size: 1.35rem; line-height: 1; }
.board-row .pos .s.r { color: var(--red); }
.board-row .who { min-width: 0; }
.board-row .who b { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.fin-key { color: var(--gold); font-weight: 700; }
.board-row .who .fin { font-style: normal; font-weight: 700; font-size: .95em; color: var(--gold); margin-left: 2px; }
.board-row .who span { font-family: var(--f-ui); font-size: .95rem; color: var(--ink-3); }
.board-row .pts { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; }
.board-row.is-me { background: #f3ead6; box-shadow: inset 3px 0 0 var(--gold); }
.board-row.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { background: #ecdcb8; } }
@media (min-width: 640px) {
  .sheet-head, .board-row { grid-template-columns: 48px 1fr 64px 64px 72px; }
  .sheet-head .x, .board-row .x { display: block; text-align: right; font-family: var(--f-type); }
  .sheet-head .x { font-family: var(--f-ui); }
  .board-row .who span { display: none; }
}
.cut {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: var(--gold);
  font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: .98rem; border-bottom: 1px solid var(--rule);
}
.cut::before, .cut::after { content: ''; flex: 1; border-top: 1px solid var(--gold); }
.detail { padding: 12px 14px 16px 64px; border-bottom: 1px solid var(--rule); background: #f7f0df; }
@media (max-width: 560px) { .detail { padding-left: 14px; } }
.detail .gap { font-family: var(--f-type); font-size: .98rem; margin-bottom: 8px; }
.nights { list-style: none; font-family: var(--f-ui); font-size: 1.02rem; }
.nights li { display: grid; grid-template-columns: 5.2em 1fr auto; gap: 10px; padding: 5px 0; border-top: 1px dotted var(--rule-strong); }
.nights .d { color: var(--ink-3); font-family: var(--f-type); font-size: .92rem; }
.nights li > span:last-child { font-family: var(--f-type); font-weight: 700; }
.nights .won { color: var(--red); font-weight: 700; }
.detail .remember { margin-top: 10px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-ui); font-weight: 700; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.controls { position: sticky; top: 0; z-index: 20; background: var(--paper); padding: 10px 0 0; margin-bottom: 12px; }
.tabs { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 10px; box-shadow: inset 0 -1px 0 var(--ink); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; border: 0; background: none; cursor: pointer; padding: 8px 12px 9px;
  font-family: var(--f-ui); font-weight: 600; font-size: 1.02rem; color: var(--ink-3); white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.board-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 2px 0 8px; font-family: var(--f-ui); color: var(--ink-3); }
.board-meta .prize { flex-basis: 100%; font-size: .92rem; }
.show-all { width: 100%; margin-top: 12px; }
.empty { padding: 26px 14px; text-align: center; color: var(--ink-3); font-family: var(--f-type); }

/* ---------- noticeboard: photos taped up ---------- */
.board-pins { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; padding: 16px 18px 22px; margin: 0 -18px; scrollbar-width: none; }
.board-pins::-webkit-scrollbar { display: none; }
.photo { flex: none; width: 190px; scroll-snap-align: start; background: #fff; padding: 9px 9px 12px; position: relative; box-shadow: 0 0 0 1px var(--rule), 0 14px 24px -18px rgba(0,0,0,.5); cursor: zoom-in; }
.photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
.photo--noimg { cursor: default; }
.photo-blank { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 3rem; color: var(--gold); background: var(--paper-2); }
.photo figcaption { margin-top: 7px; }
.photo b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.12; }
.photo span { font-family: var(--f-ui); font-size: .92rem; color: var(--ink-3); }
/* hall of fame: a wall of square mounted prints; captions live in the viewer */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 980px) { .gallery { grid-template-columns: repeat(6, 1fr); } }
.gallery .photo { width: auto; padding: 4px; box-shadow: 0 0 0 1px var(--rule), 0 8px 14px -12px rgba(0,0,0,.5); transition: transform .2s, box-shadow .2s; }
.gallery .photo:hover, .gallery .photo:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold), 0 12px 18px -12px rgba(0,0,0,.5); }
.gallery .photo figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tap-hint { font-family: var(--f-ui); font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.tap-hint::before { content: '⤢\FE0E  '; color: var(--gold); }

/* ---------- the rules, on a beer mat ---------- */
.rules-row { display: grid; gap: 30px; align-items: center; }
@media (min-width: 760px) { .rules-row { grid-template-columns: 1fr 320px; } }
.rules-row p + p { margin-top: 10px; }
.rules-card {
  width: 100%; max-width: 320px; margin: 0 auto; background: var(--sheet); padding: 26px 26px 22px; position: relative; text-align: center;
  box-shadow: 0 0 0 1px var(--rule), 0 18px 30px -22px rgba(0,0,0,.5);
}
.rules-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold); pointer-events: none; }
.rules-card::after { content: ''; position: absolute; inset: 11px; border: 1px solid var(--gold-soft); pointer-events: none; }
.rules-card .suits { color: var(--gold); letter-spacing: .5em; font-size: .95rem; margin-left: .5em; }
.rules-card h3 { font-size: 1.45rem; font-weight: 500; font-style: italic; margin: 6px 0 4px; }
.rules-card ul { list-style: none; font-size: .98rem; line-height: 1.4; }
.rules-card li { padding: 8px 0; border-top: 1px solid var(--rule); }
.rules-card li:first-child { border-top: 0; }

/* ---------- venues ---------- */
/* day strip: every day always visible; days without a game can't be picked */
.daypick { display: grid; grid-template-columns: 1.5fr repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.daypick button {
  position: relative; height: 48px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff; cursor: pointer;
  font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.daypick button::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold); }
.daypick button.all::after, .daypick button:disabled::after { display: none; }
.daypick button:disabled { background: transparent; color: #b7ad99; border-color: var(--rule); cursor: default; }
.daypick button[aria-pressed="true"] { background: var(--felt); border-color: var(--felt); color: var(--cream); }
.daypick button[aria-pressed="true"]::after { background: var(--gold); }
.day-note { font-family: var(--f-ui); color: var(--ink-3); min-height: 1.5em; margin-bottom: 14px; }
.venue.off { display: none; }
.venue.shown { animation: riffle .45s cubic-bezier(.22,.9,.3,1) both; }
/* nearest to me */
.near { margin: 4px 0 8px; }
.near-toggle { background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.near-toggle[aria-pressed="true"] { color: var(--felt); }
.near-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px; margin-top: 6px; background: var(--sheet); border: 1px solid var(--rule); }
.near-or { font-family: var(--f-ui); color: var(--ink-3); }
.near-form { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
@media (min-width: 560px) { .near-form { flex-basis: 220px; } }
.near-form input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff; font-family: var(--f-body); font-size: 1.05rem; text-transform: uppercase; }
.near-form input::placeholder { text-transform: none; }
.near-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,144,90,.22); }
.near-form .btn, .near-panel > .btn { height: 46px; padding: 0 16px; }
.near-small { flex-basis: 100%; font-size: .88rem; color: var(--ink-3); }
.miles { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--gold); border-radius: 2px; font-family: var(--f-ui); font-weight: 600; font-size: .95rem; color: var(--felt); letter-spacing: .02em; }
.venue-addr { color: var(--ink-2); font-size: .98rem; }
.venue-addr span { display: block; font-family: var(--f-ui); color: var(--ink-3); font-size: .95rem; }

/* last game tucked away on phones */
.last summary { cursor: pointer; font-family: var(--f-ui); font-weight: 600; color: var(--ink-2); list-style: none; }
.last summary::-webkit-details-marker { display: none; }
.last summary::after { content: ' ▾'; color: var(--gold); }
.last[open] summary::after { content: ' ▴'; }
.last .podium { margin-top: 6px; }

.venue-list { display: grid; gap: 28px; }
.venue { display: grid; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 16px 30px -24px rgba(60,40,10,.6); scroll-margin-top: 12px; }
@media (min-width: 760px) {
  .venue { grid-template-columns: 320px 1fr; }
  .venue:nth-child(even) { grid-template-columns: 1fr 320px; }
  .venue:nth-child(even) .venue-photo { order: 2; }
}
.venue-photo { position: relative; background: var(--paper-2); min-height: 200px; }
.venue-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.venue-body { padding: 16px 18px 18px; display: grid; gap: 12px; align-content: start; }
.venue-body .day { font-family: var(--f-ui); font-weight: 600; letter-spacing: .04em; color: var(--red); }
.venue-body h2 { font-size: 1.75rem; }
.venue-body h2 small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 1rem; color: var(--ink-3); margin: 3px 0 0; letter-spacing: 0; }
.venue-host { font-family: var(--f-ui); font-weight: 600; margin: 0 0 10px; }
.venue-host span { font-weight: 500; color: var(--ink-3); margin-right: 4px; }
.venue-off { font-family: var(--f-ui); font-weight: 600; color: var(--red); margin: 0 0 10px; }
.venue-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--f-type); }
.venue-facts span { color: var(--ink-3); }
.podium { list-style: none; font-family: var(--f-type); font-size: .98rem; border-top: 1px solid var(--rule); padding-top: 8px; }
.podium .cap { font-family: var(--f-ui); font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.podium li { display: flex; gap: 8px; padding: 2px 0; }
.podium li .n { flex: 1; font-family: var(--f-body); font-weight: 600; }
.podium li .p { width: 2.2em; color: var(--gold); font-weight: 600; }
.venue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.host { margin-top: 40px; background: var(--felt); color: var(--cream); padding: 26px 24px; border-bottom: 10px solid var(--rail); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.host p { color: var(--cream-2); margin: 8px 0 14px; }

/* ---------- photo viewer: swipe or arrow through, caption and count below ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(12,10,6,.94); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 20px; touch-action: pan-y; }
.lightbox.open { display: flex; }
.lightbox figure { background: #fffdf8; padding: 8px 8px 12px; max-width: min(94vw, 680px); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.lightbox figure.swiping { transition: none; }
.lightbox figure.out-l { transform: translateX(-40px); opacity: 0; }
.lightbox figure.out-r { transform: translateX(40px); opacity: 0; }
.lightbox img { max-height: 70vh; margin: 0 auto; -webkit-user-drag: none; user-select: none; }
.lightbox figcaption { text-align: center; margin-top: 10px; }
.lightbox figcaption b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; font-variation-settings: 'opsz' 14; }
.lightbox figcaption span { font-family: var(--f-ui); color: var(--ink-3); }
.lb-count { margin-top: 12px; font-family: var(--f-ui); letter-spacing: .06em; color: var(--cream-2); }
.lb-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; background: none; border: 0; color: var(--cream); font-size: 1.7rem; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; background: rgba(0,0,0,.35); color: var(--cream); font-size: 1.8rem; cursor: pointer; border-radius: 3px; }
.lb-nav:hover { background: rgba(0,0,0,.6); }
.lb-prev { left: 6px; } .lb-next { right: 6px; }
@media (hover: none) { .lb-nav { background: transparent; } }

/* ---------- join ---------- */
.two { display: grid; gap: 20px; }
@media (min-width: 820px) { .two { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--sheet); border: 1px solid var(--rule); padding: 20px; }
.panel h2 { font-size: 1.6rem; margin-bottom: 8px; }
.panel ul { margin: 10px 0 0 20px; display: grid; gap: 4px; }
.form { display: grid; gap: 14px; margin-top: 10px; }
.form label { font-family: var(--f-ui); font-weight: 600; font-size: 1rem; letter-spacing: .02em; display: grid; gap: 4px; }
.form input, .form select, .form textarea { width: 100%; padding: 12px 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff; font-family: var(--f-body); font-size: 1.05rem; color: var(--ink); box-shadow: inset 0 1px 3px rgba(40,30,10,.08); }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,144,90,.22); }
.hp { position: absolute; left: -9999px; }
.form-msg { font-family: var(--f-type); }
.form-msg.ok { color: var(--felt); font-weight: 700; }
.form-msg.err { color: var(--red); font-weight: 700; }
.socials { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pcard .game { display: block; font-family: var(--f-ui); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.glance { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); margin-bottom: 18px; }
.glance li { padding: 12px 6px; text-align: center; }
.glance li + li { border-left: 1px solid var(--gold-soft); }
.glance b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; font-variation-settings: 'opsz' 14; }
.glance b small { font-family: var(--f-ui); font-weight: 500; font-size: .9rem; color: var(--ink-3); }
.glance span { font-family: var(--f-ui); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.glance-sub { font-family: var(--f-ui); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.bonus { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gold); }
.bonus h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; font-variation-settings: 'opsz' 14; }
.bonus p { font-family: var(--f-ui); color: var(--ink-3); margin: 2px 0 12px; }
.bonus-links { display: flex; flex-wrap: wrap; gap: 10px; }
.note { font-family: var(--f-type); font-size: .92rem; color: var(--ink-3); margin-top: 16px; }

/* ---------- footer: the felt again, closing the page ---------- */
.foot { margin-top: 72px; background: var(--felt-deep); color: var(--cream-2); padding: 30px 0 calc(34px + var(--tab-h) + var(--safe-b)); border-top: 1px solid var(--gold-soft); font-size: .95rem; }
.foot .wrap { display: grid; gap: 8px; }
.foot a { color: var(--cream); }
.foot .suits { font-size: 1.1rem; letter-spacing: .45em; color: var(--gold); }
.foot .suits .r { color: #d9535a; }

/* ---------- feedback widget (TT prototype tooling, removed at launch) ---------- */
#fb-btn { position: fixed; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 60; display: flex; align-items: center; background: var(--ink); color: var(--sheet); border: 0; border-radius: 3px; padding: 9px 12px; cursor: pointer; font-family: var(--f-ui); font-weight: 700; font-size: .98rem; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
@media (max-width: 480px) { #fb-btn { padding: 7px 10px; font-size: .9rem; } }
@media (min-width: 900px) { #fb-btn { bottom: 20px; right: 20px; } }
.fb-label { display: inline-block; max-width: 130px; overflow: hidden; white-space: nowrap; transition: max-width .3s, opacity .3s; }
#fb-btn.mini .fb-label { max-width: 0; opacity: 0; }
#fb-btn.mini:hover .fb-label, #fb-btn.mini:focus .fb-label { max-width: 130px; opacity: 1; }
#fb-panel { position: fixed; right: 12px; left: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 64px); z-index: 61; max-width: 380px; margin-left: auto; background: var(--sheet); border: 1px solid var(--ink); padding: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); display: none; }
@media (min-width: 900px) { #fb-panel { bottom: 72px; right: 20px; left: auto; width: 380px; } }
#fb-panel.open { display: block; }
#fb-panel .fb-sub { font-size: .95rem; color: var(--ink-3); margin: 4px 0 10px; }
#fb-panel textarea { width: 100%; min-height: 100px; border: 2px solid var(--ink); padding: 8px; font-family: var(--f-type); background: #fffdf6; }
#fb-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.1rem; cursor: pointer; }
.fb-attach-btn { margin-top: 8px; background: none; border: 2px dashed var(--rule-strong); padding: 7px 12px; cursor: pointer; font-size: .95rem; }
.fb-preview { display: none; align-items: center; gap: 10px; margin-top: 8px; }
.fb-preview.show { display: flex; }
.fb-preview img { width: 56px; height: 56px; object-fit: cover; }
#fb-clear { background: none; border: 0; cursor: pointer; }
#fb-panel .fb-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* ---------- motion ---------- */
/* 1. the deal: cards pitched from the dealer's seat (top right), back card first.
      No `to` keyframe, so each card lands on its own fanned transform. */
.hand.deal-in .pcard { animation: pitch .62s cubic-bezier(.18,.84,.28,1) both; }
.hand.deal-in .pcard.p3 { animation-delay: .15s; }
.hand.deal-in .pcard.p2 { animation-delay: .33s; }
.hand.deal-in .pcard.p1 { animation-delay: .51s; }
@keyframes pitch { from { transform: translate(85vw, -45vh) rotate(160deg); opacity: 0; } 20% { opacity: 1; } }

/* 2. the membership card is issued face down, then turned over */
.member-wrap { perspective: 1100px; margin-top: 18px; }
.member-wrap .flip { position: relative; transform-style: preserve-3d; animation: turn .85s cubic-bezier(.3,.7,.2,1) .35s both; }
.member-wrap .member { margin-top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: frontShow .85s .35s both; }
/* Safari doesn't reliably hide a card's reverse during a 3D turn, so swap faces at the halfway point ourselves */
.member-wrap .back { animation: backHide .85s .35s both; }
@keyframes frontShow { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes backHide { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; visibility: hidden; } }
.member-wrap.dealt .back { display: none; }
.member-wrap.dealt .member { animation: none; }
@media (prefers-reduced-motion: reduce) { .member-wrap .back { display: none; } }
.member-wrap .back {
  position: absolute; inset: 0; border-radius: 12px; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--felt-deep);
  background-image: url("/assets/brand/chip-512.png"),
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(179,144,90,.35) 11px 12px),
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(179,144,90,.35) 11px 12px);
  background-size: 96px 96px, auto, auto; background-repeat: no-repeat, repeat, repeat; background-position: center;
  box-shadow: inset 0 0 0 7px var(--felt-deep), inset 0 0 0 8px var(--gold), 0 16px 30px -14px rgba(10,30,20,.6);
}
.member-wrap.dealt .flip { animation: land .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes turn { from { transform: rotateY(180deg) translateY(-10px); } 55% { transform: rotateY(80deg) translateY(-14px) scale(1.02); } to { transform: none; } }
@keyframes land { from { opacity: 0; transform: translateY(-8px); } }

/* 3. pegging the season */
.pegs.pegging li.on, .pegs.pegging li.now { animation: peg .28s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 70ms + .2s); }
@keyframes peg { from { background: #0d0907; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); transform: scale(.6); } }

/* 4. the riffle: rows fall in like a riffled deck when the table changes */
.sheet.riffle .board-row { animation: riffle .6s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(min(var(--i), 12) * 45ms); }
@keyframes riffle { from { opacity: 0; transform: translateX(-18px); } 40% { opacity: 1; } }

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

/* ---------- running costs (owner-only page) ---------- */
.narrow { max-width: 760px; }
.narrow .head { margin-top: 34px; }
.narrow > p { margin-bottom: 10px; }
.private { font-size: .95rem; color: var(--ink-3); border-left: 2px solid var(--gold); padding: 4px 12px; margin-bottom: 8px; }
.audit { list-style: none; background: var(--sheet); border: 1px solid var(--rule); }
.audit li > div { min-width: 0; overflow-wrap: anywhere; }
.audit li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 10px; border-bottom: 1px solid var(--rule); }
.audit li:last-child { border-bottom: 0; }
.audit b { font-weight: 600; }
.audit li > div > b { font-family: var(--f-display); font-size: 1.15rem; display: block; margin-bottom: 2px; }
.audit p { color: var(--ink-2); }
.mark { align-self: start; text-align: center; font-family: var(--f-ui); font-weight: 700; font-size: .92rem; padding: 2px 4px; border: 1px solid currentColor; margin-top: 3px; }
.mark.ok { color: var(--felt); }
.mark.check { color: #8a5a00; }
.mark.risk { color: var(--red); }
.costs { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); margin-bottom: 8px; }
.costs th { font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--ink-3); text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--ink); }
.costs td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; font-weight: 600; }
.costs td small { display: block; font-weight: 400; font-size: .92rem; color: var(--ink-3); margin-top: 2px; }
.costs .n { text-align: right; font-family: var(--f-type); white-space: nowrap; }
.costs tfoot td { border-top: 1px solid var(--gold); border-bottom: 0; font-family: var(--f-display); font-size: 1.15rem; }
.costs tfoot .n { font-family: var(--f-display); font-weight: 600; color: var(--red); }
.compare { display: grid; gap: 14px; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare .col { background: var(--sheet); border: 1px solid var(--rule); padding: 16px 18px; }
.compare .col.new { background: var(--felt); color: var(--cream); border-color: var(--felt); border-bottom: 8px solid var(--rail); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.compare h3 { font-size: 1.35rem; margin-bottom: 8px; }
.compare ul { margin-left: 18px; display: grid; gap: 6px; }
.compare .col:not(.new) li { color: var(--ink-2); }
.todo { margin-left: 22px; display: grid; gap: 8px; background: var(--sheet); border: 1px solid var(--rule); padding: 14px 14px 14px 36px; margin-bottom: 10px; }
.todo li { font-weight: 500; }
.narrow h3.sub { font-size: 1.3rem; margin: 22px 0 6px; }
.costs td.n small { display: block; font-family: var(--f-ui); font-weight: 500; }
.projection td:first-child { width: 55%; }
@media (max-width: 520px) { .projection td, .projection th { padding: 8px 7px; } .projection .n { white-space: normal; } }

/* ---------- Amy's discovery page (bare: no menu, tab bar or feedback widget) ---------- */
body.bare { padding-bottom: 0; }
.disc { max-width: 640px; margin: 0 auto; padding: 22px 18px 48px; }
.disc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.disc-for { flex: 1 0 100%; font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; color: var(--gold); }
.disc-pegs { margin-top: 0; }
.disc-count { font-family: var(--f-ui); font-weight: 600; color: var(--ink-3); }
.disc-card { background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 18px 30px -24px rgba(60,40,10,.6); padding: 22px 20px 20px; }
.disc-card h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); border-bottom: 1px solid var(--gold); padding-bottom: 10px; margin-bottom: 12px; }
.disc-card .lead { color: var(--ink-2); margin-bottom: 10px; }
.disc-step.in-r { animation: stepIn .35s cubic-bezier(.2,.8,.2,1); }
.disc-step.in-l { animation: stepBack .35s cubic-bezier(.2,.8,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-24px); } }
.disc .field { margin-top: 22px; }
.q { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.35; margin-bottom: 8px; }
.q-hint { font-size: .92rem; color: var(--ink-3); margin: -4px 0 8px; }
.disc input:not(.hp), .disc textarea {
  width: 100%; padding: 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff;
  font-family: var(--f-body); font-size: 1.05rem; color: var(--ink); box-shadow: inset 0 1px 3px rgba(40,30,10,.08);
}
.disc textarea { min-height: 96px; resize: vertical; }
.disc textarea.tall { min-height: 170px; }
.disc input:focus, .disc textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,144,90,.22); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--rule-strong); background: #fff; border-radius: 4px; padding: 10px 14px; cursor: pointer;
  font-family: var(--f-body); font-size: 1rem; line-height: 1.2; text-align: left; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--felt); border-color: var(--felt); color: var(--cream); }
.chip[aria-pressed="true"]::before { content: '✓\FE0E  '; color: var(--gold); }
.disc input.other { display: none; margin-top: 8px; }
.disc input.other.show { display: block; }
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { position: relative; width: 96px; height: 96px; background: #fff; padding: 4px; box-shadow: 0 0 0 1px var(--rule); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: var(--sheet); cursor: pointer; font-size: .8rem; }
.add-photo { height: 96px; padding: 0 16px; border: 1px dashed var(--rule-strong); background: transparent; border-radius: 4px; cursor: pointer; font-family: var(--f-ui); font-weight: 600; font-size: 1rem; color: var(--ink-2); }
.add-photo:hover { border-color: var(--gold); color: var(--ink); }
.disc-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 18px; }
.disc-nav #disc-next { margin-left: auto; }
.disc-saved { min-height: 1.4em; margin-top: 10px; font-family: var(--f-ui); color: var(--ink-3); text-align: right; }
.disc-saved.err { color: var(--red); text-align: left; }
.disc-early { text-align: center; margin-top: 16px; }
.disc-early button { background: none; border: 0; cursor: pointer; font-family: var(--f-ui); font-weight: 600; font-size: 1rem; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.disc-done { margin-top: 0; }

/* venues on phones: slimmer cards (after the base venue rules so these win) */
@media (max-width: 759px) {
  .venue-photo { min-height: 0; aspect-ratio: 16 / 7; }
  .venue-body { padding: 12px 14px 14px; gap: 10px; }
  .venue-body h2 { font-size: 1.5rem; }
}
.near-small.err { color: var(--red); }

/* ---------- polish pass (320px review) ---------- */
@media (min-width: 900px) { .foot { padding-bottom: 34px; } }
.board-row .who .sg { white-space: nowrap; }
@media (max-width: 380px) {
  .sheet-head, .board-row { grid-template-columns: 32px minmax(0, 1fr) 54px; column-gap: 8px; padding-left: 10px; padding-right: 10px; }
  .board-row .who b { font-size: 1rem; }
  .board-row .pts { font-size: 1.15rem; }
  .head h2 { font-size: 1.45rem; }
  .head h2 small { display: none; }
}
@media (max-width: 600px) { h1 small { display: block; margin: 6px 0 0; } }
/* scrolling tab rows fade at the edge until you reach the end */
.tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tabs.at-end { -webkit-mask-image: none; mask-image: none; }
.form select {
  -webkit-appearance: none; appearance: none; height: 48px; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b3905a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.costs .n { white-space: nowrap; }

/* ---------- Stephen's 2026 logo: cream + red on felt, original on ivory ---------- */
.brand-lockup { height: 44px; width: auto; }
.brand-chip { display: none; height: 46px; width: 46px; }
body[data-page="home"] .brand-lockup { display: none; }       /* the big logo is right below on the felt */
body[data-page="home"] .brand-chip { display: block; }
@media (min-width: 900px) { .brand-lockup { height: 54px; } .brand-chip { height: 56px; width: 56px; } }
.hero-logo { display: block; width: min(100%, 440px); height: auto; margin: 2px 0 20px -6px; }
@media (min-width: 900px) { .hero-logo { width: 520px; margin-bottom: 28px; } }
.foot-logo { width: 190px; height: auto; margin-bottom: 6px; }
.m-top img { width: 26px; height: 26px; }

/* ---------- off the table: the Everett Rovers sponsorship ---------- */
.sponsor { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .sponsor { grid-template-columns: 1fr 300px 1.1fr; gap: 32px; } }
.sponsor-text { display: grid; grid-template-columns: 72px 1fr; gap: 6px 16px; align-items: center; }
.sponsor-badge { grid-row: span 2; width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 0 0 1px var(--rule); }
.sponsor-text h3 { font-size: 1.35rem; line-height: 1.15; }
.sponsor-text p { grid-column: 1 / -1; color: var(--ink-2); margin-top: 6px; }
.sponsor-shirt { background: #fff; padding: 10px; margin: 0 auto; max-width: 300px; box-shadow: 0 0 0 1px var(--rule), 0 16px 26px -18px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.sponsor-shirt img { width: 100%; height: auto; }
.sponsor-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sponsor-photos .photo { width: auto; padding: 6px 6px 10px; }
.sponsor-photos .photo span { font-size: .85rem; }

/* ---------- the Vegas banner (plays once, then holds) ---------- */
.vegas-banner { background: #fff; padding: 6px; margin: 2px 0 18px; box-shadow: 0 0 0 1px var(--rule), 0 14px 22px -16px rgba(0,0,0,.5); }
.vegas-banner img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; }
.gallery .vegas-banner { grid-column: 1 / -1; margin: 0 0 4px; }

/* ---------- how to play ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; }
.jump a { font-family: var(--f-ui); font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.tbc { display: inline-block; margin-top: 4px; padding: 0 7px; border: 1px dashed var(--gold); border-radius: 2px; font-family: var(--f-ui); font-size: .88rem; color: #8a6d3b; }
.night { list-style: none; counter-reset: n; background: var(--sheet); border: 1px solid var(--rule); }
.night li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; padding: 14px 14px 14px 10px; border-bottom: 1px solid var(--rule); }
.night li:last-child { border-bottom: 0; }
.night li::before { content: counter(n); grid-row: span 2; font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; color: var(--gold); text-align: center; line-height: 1.1; font-variation-settings: 'opsz' 14; }
.night b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; font-variation-settings: 'opsz' 14; }
.night p { color: var(--ink-2); margin-top: 2px; }
.ranks { list-style: none; background: var(--sheet); border: 1px solid var(--rule); }
.ranks li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 12px 12px 8px; border-bottom: 1px solid var(--rule); align-items: start; }
.ranks li:last-child { border-bottom: 0; }
.ranks .rn { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; color: var(--gold); text-align: center; font-variation-settings: 'opsz' 14; }
.ranks b { display: block; font-weight: 600; font-size: 1.05rem; }
.ranks small { display: block; color: var(--ink-3); font-size: .92rem; margin-top: 4px; }
.rk-cards { display: flex; gap: 4px; margin-top: 6px; }
.mc {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 50px;
  background: #fff; border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  font-family: var(--f-display); font-weight: 600; font-style: normal; font-size: 1rem; line-height: 1; color: var(--ink); font-variation-settings: 'opsz' 14;
}
.mc s { text-decoration: none; font-size: 1.05rem; margin-top: 2px; font-family: 'Apple Symbols', 'Segoe UI Symbol', var(--f-display); }
.mc.r { color: var(--red); }
.mc.k { opacity: .38; }
.mc.down { background-color: var(--felt); border-color: var(--felt); background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(179,144,90,.4) 5px 6px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(179,144,90,.4) 5px 6px); box-shadow: inset 0 0 0 2px var(--felt), inset 0 0 0 3px var(--gold-soft); }
.mc.empty { background: transparent; border: 1px dashed rgba(245,239,225,.35); box-shadow: none; }
.mc.win { box-shadow: 0 0 0 2px var(--gold); }
.mc.in { animation: dealIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-10px) rotate(-8deg); } }
.walk { background: var(--felt); color: var(--cream); padding: 16px 14px 14px; border-bottom: 10px solid var(--rail); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.walk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.walk-label { flex: none; width: 64px; font-family: var(--f-ui); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-2); }
.walk-cards { display: flex; gap: 5px; }
.walk-step { min-height: 7.5em; margin: 6px 0 12px; color: var(--cream-2); }
.walk-step b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--cream); margin-bottom: 4px; font-variation-settings: 'opsz' 14; }
.walk-nav { display: flex; align-items: center; gap: 10px; }
.walk-nav .btn { height: 44px; padding: 0 16px; }
.walk .btn-line { color: var(--cream); box-shadow: inset 0 0 0 1px var(--gold); }
.walk-dots { flex: 1; display: flex; justify-content: center; gap: 6px; list-style: none; }
.walk-dots li { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,239,225,.25); }
.walk-dots li.on { background: var(--gold); }
@media (max-width: 380px) { .mc { width: 32px; height: 46px; font-size: .95rem; } .walk-label { width: 52px; font-size: .78rem; } .walk-cards { gap: 4px; } }
.rule-block { background: var(--sheet); border: 1px solid var(--rule); margin-bottom: 8px; }
.rule-block summary { cursor: pointer; padding: 13px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.rule-block summary::-webkit-details-marker { display: none; }
.rule-block summary::after { content: '+'; color: var(--gold); font-weight: 600; }
.rule-block[open] summary::after { content: '−'; }
.rule-block p { padding: 0 14px 14px; color: var(--ink-2); }
.rules-more { display: inline-block; margin-top: 12px; font-family: var(--f-ui); font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.newbie { margin: 12px 0 4px; }
.newbie a { color: var(--red); font-weight: 600; }
.walk .btn:disabled { opacity: .35; cursor: default; }
/* the old 50x50 .brand img rule must not squash the logo */
.brand .brand-lockup { width: auto; height: 44px; margin: 0; object-fit: contain; }
.brand .brand-chip { width: 46px; height: 46px; margin: 0; }
@media (min-width: 900px) { .brand .brand-lockup { height: 54px; } .brand .brand-chip { width: 56px; height: 56px; } }
.walk-nav .btn { white-space: nowrap; }
@media (max-width: 380px) { .walk-nav .btn { padding: 0 12px; } .walk-dots { gap: 4px; } }
.walk-step { min-height: 10em; }
.walk-hand { display: block; font-family: var(--f-ui); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }

/* the divider stops short of the faded suit so it doesn't strike through it */
.pcard .times { border-top: 0; background: linear-gradient(var(--rule), var(--rule)) no-repeat left top / calc(100% - 64px) 1px; }
.pcard .pc-chip { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; pointer-events: none; }
@media (max-width: 380px) { .pcard .pc-chip { width: 26px; height: 26px; top: 10px; right: 10px; } }