/* The front page (11 Nov 2026; home.html says what each part is for). Jeff chose the felt mock-up, then reviewed five
   builds the same day: all one green ("too green"), then cream lists ("too much white.. jesus"), then all green again
   ("too green again.. you seem to go hard one way or the other"). So this is neither: felt where there is a table
   (the top, what an opponent sees, the ask), paper where there is something to read, and the paper always carries a
   picture, never a list. The opponents page already did it this way.
   Rules kept: tiles stand in a wooden rack on felt, no white boxes (a card on the paper is a tint of the paper), Play
   now is the gold button, no pale gold on cream, a way on is a button and never an underlined link, words at 16px or
   more. Two kinds of button: gold and quiet.
   Everything here is under .fp (or .ev for the Everything page), so no other page is touched. */

body:has(main > .fp-hero) main { max-width: none; margin: 0; padding: 0; }
body:has(main > .fp-hero) footer.site { margin-top: 0; }
.fp { --fp-ink: #f4f1e4; --fp-soft: #d3dfd0; --fp-line: rgba(244, 241, 228, 0.18); --fp-max: 75rem;
  color: var(--fp-ink); font: 400 1.125rem/1.55 var(--font); }
.fp-paper { --fp-ink: #17301f; --fp-soft: #44574a; --fp-line: rgba(23, 48, 31, 0.16); background: var(--paper, #f6f1e6); color: #17301f; }
.fp-wrap { max-width: var(--fp-max); margin: 0 auto; padding: 0 1.75rem; }
.fp h1, .fp h2, .fp h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; margin: 0; color: var(--fp-ink); text-wrap: balance; text-shadow: none; }
.fp h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.fp p { margin: 0; text-wrap: pretty; }
.fp-faces { position: absolute; width: 0; height: 0; overflow: hidden; }
.fp-felt { background:
  radial-gradient(110% 90% at 28% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(#2a6a41, #1c4f30); color: #f4f1e4; }

/* the two buttons */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 1.05rem/1 var(--display); text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.fp-btn:active { transform: translateY(1px) scale(0.99); }
.fp-btn.gold { background: linear-gradient(#f6cd63, #e7ae35); color: #2a1d05; box-shadow: 0 3px 0 #a87618, 0 8px 18px rgba(0, 0, 0, 0.2); }
.fp-btn.gold:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #a87618, 0 12px 22px rgba(0, 0, 0, 0.24); }
.fp-btn.quiet { border: 1.5px solid rgba(244, 241, 228, 0.72); color: #f4f1e4; background: transparent; }
.fp-btn.quiet:hover { background: rgba(255, 255, 255, 0.1); border-color: #f4f1e4; }
.fp-paper .fp-btn.quiet { border-color: rgba(23, 48, 31, 0.5); color: #17301f; }
.fp-paper .fp-btn.quiet:hover { background: rgba(23, 48, 31, 0.07); border-color: #17301f; }
.fp-btn.big { min-height: 58px; padding: 0 2rem; font-size: 1.18rem; }
.fp-btn[hidden] { display: none; }
.fp :focus-visible { outline: 3px solid #f0bf4c; outline-offset: 3px; }
.fp-paper :focus-visible { outline-color: #1d6a3d; }
.fp-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.fp-lead { font-size: 1.2rem; color: var(--fp-soft); max-width: 54ch; margin: 1rem 0 0 !important; }
.fp-lead b { color: var(--fp-ink); }

/* tiles, drawn by tiles.js into .fp-t */
.fp-t { --tile-face: #fbfaf4; --tile-edge: #d8d2c0; --tile-ink: #232019; --tile-muted-ink: #6f6656;
  --pip-bam: #1a7a44; --pip-bam-alt: #15603a; --pip-crak: #b02a2f; --pip-dot: #1e5391; --pip-wind: #6b5636;
  --pip-flower: #2f8a52; --pip-flower-heart: #c8892a; --pip-joker: #7a3d8f;
  display: block; flex: 1 1 0; min-width: 0; aspect-ratio: 100 / 140; background: #fbfaf4; border-radius: 7px; box-shadow: 0 3px 0 #cfc8b4, 0 6px 8px rgba(0, 0, 0, 0.25); }
.fp-t .face { width: 100%; height: 100%; display: block; }
.fp-t.small { flex: 0 0 44px; border-radius: 5px; }
.fp-t.back { background: linear-gradient(135deg, #3a6fb8, #244d8c); box-shadow: 0 3px 0 #1a386a, 0 6px 8px rgba(0, 0, 0, 0.25); }
.fp-rack { display: flex; gap: 4px; align-items: flex-end; padding: 12px 12px 16px; border-radius: 12px;
  background: linear-gradient(#b98450, #8a5a33 55%, #6a4325); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 10px 18px rgba(0, 0, 0, 0.3); }
.fp-rack .fp-t.drawn { margin-left: 14px; }

/* 1 and 2. the headline, a real question for the Coach, and where her answer leads */
.fp-hero { padding: 3.2rem 0 3.8rem; }
.fp-hero .fp-wrap { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: 2.8rem; align-items: center; }
.fp-hero h1 { font-size: clamp(2.3rem, 0.6rem + 2.7vw, 3.4rem); }
.fp-hero h1 span { display: block; }
.fp-sub { font-size: 1.28rem; color: var(--fp-soft); margin: 1.2rem 0 1.9rem !important; max-width: 31ch; }
.fp-table { border-radius: 24px; padding: 1.6rem; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.fp-setup { font-size: 1.08rem; color: #e6eee2; }
.fp-table .fp-rack { margin-top: 1rem; }
.fp-coach { display: flex; gap: 1rem; align-items: flex-end; margin-top: 1.3rem; }
.fp-coach img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid #f0bf4c; background: #fbfaf4; flex: none; }
.fp-bubble { background: #fbfaf4; color: #14291b; border-radius: 18px 18px 18px 4px; padding: 1rem 1.25rem; min-height: 60px; max-width: 46ch; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); }
.fp-bubble b { display: block; font-size: 1.2rem; }
.fp-bubble span { display: block; font-size: 1.02rem; color: #3f5245; margin-top: 4px; }
.fp-bubble .fp-btn { margin-top: 0.9rem; min-height: 46px; padding: 0 1.2rem; font-size: 1rem; white-space: normal; text-align: center; line-height: 1.2; }
.fp-choices { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.fp-choice { display: flex; align-items: center; gap: 0.7rem; padding: 8px 16px 8px 8px; border-radius: 14px; border: 2px solid transparent; background: rgba(0, 0, 0, 0.28); color: #fbfaf4;
  font: 700 1rem/1.2 var(--font); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.fp-choice:hover { background: rgba(0, 0, 0, 0.4); }
.fp-choice[aria-pressed="true"] { border-color: #f0bf4c; }
.fp-holiday:empty { display: none; }
.fp-holiday { max-width: 75rem; margin: 0 auto; padding: 0 1.75rem; }

/* 3. what you get, on the paper: a player's day first, then three doors that behave alike */
.fp-get { padding: 3.2rem 0 3.6rem; }
.fp-today { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.8rem; padding: 1rem 1.3rem; border-radius: 18px;
  background: #17402a; color: #f4f1e4; box-shadow: 0 10px 22px rgba(23, 48, 31, 0.18); }
.fp-today p { margin-right: auto; }
.fp-today b { display: block; font: 700 1.3rem/1.15 var(--display); color: #f6cd63; }
.fp-today p span { display: block; color: #e6eee2; }
.fp-today .fp-btn.quiet { border-color: rgba(244, 241, 228, 0.72); color: #f4f1e4; }
.fp-today .fp-btn.quiet:hover { background: rgba(255, 255, 255, 0.1); border-color: #f4f1e4; }
.fp-bolt { flex: none; width: 30px; height: 36px; background: linear-gradient(180deg, #ffe58a, #f2a33d); clip-path: polygon(58% 0, 8% 58%, 44% 58%, 30% 100%, 92% 38%, 54% 38%, 72% 0); }
.fp-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.fp-doors.fp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-door { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--paper-2, #ece5d5); box-shadow: 0 1px 0 rgba(23, 48, 31, 0.08), 0 12px 26px rgba(40, 30, 15, 0.1); }
.fp-pic { display: flex; align-items: center; justify-content: center; height: 210px; padding: 0 1.2rem; text-decoration: none; color: #f4f1e4; }
.fp-pic .fp-rack { width: 100%; padding: 9px 9px 12px; gap: 3px; }
.fp-pic .fp-rack .fp-t { border-radius: 4px; box-shadow: 0 2px 0 #cfc8b4; }
.fp-pic.fp-three { gap: 1.6rem; }
.fp-named { display: grid; justify-items: center; gap: 0.5rem; }
.fp-named .fp-t { flex: none; width: 72px; }
.fp-named b { font: 700 1.05rem/1 var(--display); }
.fp-mini-tv { display: grid; justify-items: center; gap: 0.8rem; width: 100%; background: #101510; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35); }
.fp-mini-tv b { font: 700 1.15rem/1.2 var(--display); color: #fbfaf4; }
.fp-mini-opts { display: flex; gap: 0.6rem; }
.fp-mini-opts .fp-t { flex: none; width: 46px; border-radius: 5px; }
.fp-door-words { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.fp-door-words h2 { font-size: 1.9rem; }
.fp-door-words > p:first-of-type { color: var(--fp-soft); font-size: 1.05rem; flex: 1; }
.fp-door-acts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem !important; }
.fp-door-acts .fp-btn { min-height: 46px; padding: 0 1.2rem; font-size: 1rem; }

/* 4. our players: what an opponent sees, and what she never does */
.fp-fair { padding: 4.2rem 0; }
.fp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.6rem; align-items: center; }
.fp-fair .fp-btn { margin-top: 1.6rem; }
.fp-seat { border-radius: 24px; padding: 1.5rem 1.6rem; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.fp-sees { font: 700 1.2rem/1.2 var(--display); color: #f6cd63; margin-bottom: 0.7rem !important; }
.fp-sees.fp-never { margin-top: 1.4rem !important; color: #f4f1e4; }
.fp-see-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: center; margin-bottom: 0.8rem; }
.fp-see-row > span:first-child { font-weight: 700; color: #e6eee2; font-size: 1rem; }
.fp-row { display: flex; gap: 4px; align-items: center; }
.fp-row .fp-t { flex: 0 0 34px; border-radius: 4px; box-shadow: 0 2px 0 #cfc8b4; }
.fp-row i { width: 12px; }
.fp-seat .fp-rack { padding: 7px 7px 10px; gap: 3px; }
.fp-seat .fp-rack .fp-t { border-radius: 4px; box-shadow: 0 2px 0 #1a386a; }
.fp-wall { display: flex; gap: 2px; }
.fp-wall .fp-t { flex: 1 1 0; aspect-ratio: 100 / 60; border-radius: 3px; box-shadow: 0 3px 0 #16305c, 0 6px 0 #1f448a, 0 9px 0 #16305c; margin-bottom: 9px; }

/* the games played at our tables, over a photograph of our table */
.fp-proof { padding: 3.8rem 0 4rem; text-align: center; }
.fp-proof .hands-played { margin: 0 0 1.6rem; display: grid; justify-items: center; gap: 0.2rem; color: #17301f; }
.fp-proof .hc-num { font: 700 clamp(2.8rem, 1.6rem + 4vw, 4.4rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #17301f; }
.fp-proof .hc-what { font: 700 1.5rem/1.2 var(--display); }
.fp-proof .hc-today { font-size: 1rem; color: #44574a; }
.fp-shot { display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px rgba(40, 30, 15, 0.28), 0 0 0 1px rgba(23, 48, 31, 0.12); }
.fp-shot img { display: block; width: 100%; height: auto; }
.fp-proof-do { margin-top: 1.5rem !important; display: flex; justify-content: center; }

/* 5. the ask */
.fp-close { padding: 4rem 0 4.4rem; text-align: center; }
.fp-close .fp-lead { margin: 1rem auto 0 !important; }
.fp-close .fp-cta { justify-content: center; margin-top: 1.8rem; }

/* a tablet and a narrow window: one column */
@media (max-width: 900px) {
  .fp-hero { padding: 2.2rem 0 2.8rem; }
  .fp-hero .fp-wrap, .fp-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fp-doors, .fp-doors.fp-two { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .fp-pic { height: 180px; }
  .fp-fair, .fp-proof, .fp-close { padding: 3rem 0; }
  .fp-table { padding: 1.1rem; }
  .fp-rack { gap: 3px; padding: 8px 8px 12px; }
  .fp-rack .fp-t.drawn { margin-left: 6px; }
  .fp-see-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .fp-row .fp-t { flex: 0 1 28px; min-width: 0; }
}
/* the opponents page (/play) shows the same seat picture and the same ask, as felt panels on its own paper */
.opp-fair, .opp-close { border-radius: 24px; padding: 2.6rem 2.4rem; }
.opp-fair .fp-btn { margin-top: 1.6rem; }
/* on this page the headings stay in the page's own face, so one page never shows two */
.opponents .fp h2 { font-family: var(--g-font-display, var(--display)); font-weight: 400; letter-spacing: 0.005em; line-height: 1.1; }
.opp-fair .fp-lead { margin-top: 1rem !important; }
.opp-close { padding: 3rem 2rem; }
.mixing .actions { margin: 1.2rem 0 0; }
@media (max-width: 900px) { .opp-fair, .opp-close { padding: 1.8rem 1.2rem; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .fp-btn, .fp-choice { transition: none; } }

/* the Everything page (everything.html): the same names as the bar, every page under them */
.ev { max-width: 75rem; margin: 0 auto; padding: 1.5rem 0 2rem; }
.ev h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); }
.ev-lead { color: var(--ink-soft); font-size: 1.15rem; margin: 0.6rem 0 2.2rem; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2.4rem; }
.ev-grid h2 { font-size: 1.6rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--felt); scroll-margin-top: 6rem; }
.ev-grid ul { list-style: none; margin: 0; padding: 0; }
.ev-grid li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.ev-grid li a { display: block; font-weight: 700; color: var(--ink); text-decoration: none; min-height: 28px; }
.ev-grid li a:hover { color: var(--felt); }
.ev-grid li span { display: block; color: var(--ink-soft); font-size: 1rem; }