/* =========================================================
   learntoplay42.com - shared styles
   ========================================================= */

:root{
  --felt:        #14372B;
  --felt-deep:   #0D241C;
  --bone:        #F3EEE1;
  --bone-dim:    #CFC8B6;
  --pip:         #1A1512;
  --brass:       #C89A3C;
  --line:        rgba(243,238,225,.16);
  --line-soft:   rgba(243,238,225,.09);

  --display: "Fraunces", Georgia, serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--felt-deep);
  background-image:radial-gradient(120% 70% at 50% 0%, var(--felt) 0%, var(--felt-deep) 70%);
  background-attachment:fixed;
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ambient background ----------
   Two fixed, very low-contrast gradient layers drifting on long mismatched
   loops, so the felt never repeats a cycle you can see. Transform-only, which
   keeps the work on the compositor and never repaints the text above it. */
body::before,
body::after{
  content:""; position:fixed; inset:-25%;
  z-index:-1; pointer-events:none;
  will-change:transform;
}
body::before{
  background:
    radial-gradient(32% 36% at 24% 28%, rgba(34,96,72,.5) 0%, transparent 62%),
    radial-gradient(30% 34% at 76% 66%, rgba(16,64,48,.45) 0%, transparent 60%);
  animation:felt-drift-a 54s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(26% 30% at 64% 14%, rgba(200,154,60,.065) 0%, transparent 66%),
    radial-gradient(34% 30% at 18% 82%, rgba(200,154,60,.04) 0%, transparent 64%);
  animation:felt-drift-b 79s ease-in-out infinite alternate;
}
@keyframes felt-drift-a{
  from{ transform:translate3d(-2.5%,-1.5%,0) scale(1.02); }
  to  { transform:translate3d(2.5%,2%,0)     scale(1.09); }
}
@keyframes felt-drift-b{
  from{ transform:translate3d(2%,1.5%,0)   scale(1.06); }
  to  { transform:translate3d(-2%,-2%,0)   scale(1.01); }
}

.wrap{ width:min(980px, 100% - 2.5rem); margin-inline:auto; }
.wrap-narrow{ width:min(720px, 100% - 2.5rem); margin-inline:auto; }

a{ color:var(--bone); text-decoration-color:var(--brass); text-underline-offset:3px; }
a:hover{ color:var(--brass); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px;
}
.skip:focus{
  left:1rem; top:1rem; z-index:20;
  background:var(--brass); color:var(--felt-deep);
  padding:.6rem 1rem; border-radius:6px;
}

.eyebrow{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0;
}

/* ---------- masthead + nav ---------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 2rem; padding:1.4rem 0; flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft);
}
.mark{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 96;
  font-weight:800; font-size:1.5rem; line-height:1;
  color:var(--brass); text-decoration:none;
  display:inline-flex; align-items:baseline; gap:.6rem;
}
.mark span{
  font-family:var(--mono); font-size:.7rem; font-weight:400;
  letter-spacing:.14em; color:var(--bone-dim);
}
.mark:hover span{ color:var(--bone-dim); }

.nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.nav a{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--bone-dim);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--bone); border-bottom-color:var(--brass); }
.nav a[aria-current="page"]{ color:var(--brass); border-bottom-color:var(--brass); }

/* ---------- panel surface ----------
   Shared by every block that holds reading text, so prose always sits on a
   raised card rather than directly on the drifting background. */
.panel,
.page-head,
.band > .wrap,
.band > .wrap-narrow,
.hero > .wrap{
  position:relative;
  padding:clamp(1.5rem,3.4vw,2.4rem);
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(243,238,225,.055) 0%, rgba(243,238,225,.02) 100%);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(243,238,225,.05);
}
/* the panel's own padding sets the top edge, so the first child must not
   add its own margin on top of it */
.panel > :first-child,
.page-head > :first-child,
.band > .wrap > :first-child,
.band > .wrap-narrow > :first-child,
.hero > .wrap > :first-child{ margin-top:0; }

/* ---------- page headers ---------- */
.page-head{
  margin-top:clamp(1rem,2.6vw,1.6rem);
  padding:clamp(1.9rem,4.6vw,3rem) clamp(1.5rem,3.4vw,2.4rem) clamp(1.5rem,3.2vw,2.2rem);
  background:linear-gradient(180deg, rgba(243,238,225,.042) 0%, rgba(243,238,225,.012) 100%);
}
.page-head h1{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 144;
  font-weight:700;
  font-size:clamp(2.3rem,6.5vw,3.8rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:.6rem 0 0; max-width:18ch;
}
.page-head .lede{
  max-width:52ch; margin:1.1rem 0 0;
  font-size:clamp(1rem,2.1vw,1.14rem); color:var(--bone-dim);
}

/* ---------- typography inside content ---------- */
h2{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 72;
  font-weight:600;
  font-size:clamp(1.55rem,3.6vw,2.1rem);
  line-height:1.14; letter-spacing:-.01em;
  margin:0 0 .2rem;
}
h3{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 40;
  font-weight:600; font-size:1.2rem; line-height:1.3;
  margin:2rem 0 .4rem;
}
p{ max-width:62ch; }
.dim{ color:var(--bone-dim); }
strong{ font-weight:600; }
em{ font-style:italic; }

/* Bands no longer need a rule between them: each one is its own card now,
   so the padding here is just the gap in the stack. */
.band{ padding:clamp(.5rem,1.4vw,.85rem) 0; }

/* ---------- domino tiles ---------- */
.tile{
  --w:74px;
  width:var(--w); height:calc(var(--w) * 1.94);
  background:linear-gradient(180deg,#FBF7EC 0%, var(--bone) 55%, #E4DDCC 100%);
  border-radius:8px; padding:7px;
  display:flex; flex-direction:column;
  box-shadow:0 10px 18px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.12);
  flex:none;
}
.tile.sm{ --w:46px; border-radius:5px; padding:4px; }
.tile.xs{ --w:36px; border-radius:4px; padding:3px; }
.tile-half{
  flex:1; display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  place-items:center; padding:11%;
}
.tile-bar{ height:2px; background:var(--pip); opacity:.85; border-radius:2px; margin:2px 8%; }
.tile.sm .tile-bar, .tile.xs .tile-bar{ height:1px; }
.pip{ width:82%; aspect-ratio:1; border-radius:50%; background:var(--pip); }
.pip-blank{ visibility:hidden; }

.tile-wrap{ display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.tile-cap{
  font-family:var(--mono); font-size:.72rem;
  color:var(--bone-dim); letter-spacing:.05em; text-align:center;
}
.tile-cap.brass{ color:var(--brass); }
.hand{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 0; }

/* ---------- callout ---------- */
.note{
  margin:1.8rem 0 0; padding:1.1rem 1.3rem;
  border-left:3px solid var(--brass);
  background:rgba(0,0,0,.2);
  border-radius:0 6px 6px 0;
  max-width:62ch;
}
.note p{ margin:.35rem 0 0; color:var(--bone-dim); font-size:.95rem; }
.note p:first-of-type{ margin-top:0; }
.note .eyebrow{ margin-bottom:.5rem; }

/* ---------- definition grids ---------- */
.facts{
  padding:0; margin:1.8rem 0 0;
  display:grid; gap:1.6rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.fact-label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.4rem;
}
.fact-body{ margin:0; color:var(--bone-dim); }
.fact-body strong{ color:var(--bone); }

/* ---------- ordered steps ---------- */
.steps{ list-style:none; padding:0; margin:1.8rem 0 0; counter-reset:step; max-width:62ch; }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:2.4rem 1fr; gap:1rem;
  padding:1.1rem 0; border-top:1px solid var(--line);
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono); font-size:.78rem; color:var(--brass);
  padding-top:.28rem;
}
.steps h3{ margin:0 0 .25rem; font-size:1.08rem; }
.steps p{ margin:0; color:var(--bone-dim); }

/* ---------- rank strip ---------- */
.rank{
  display:flex; align-items:flex-end; gap:.5rem;
  margin:1.2rem 0 0; overflow-x:auto; padding-bottom:.6rem;
}
.rank-arrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim);
  margin:.9rem 0 0; display:flex; justify-content:space-between;
  max-width:34rem;
}

/* ---------- tables ---------- */
/* narrow phones can't fit a four-column table, so it scrolls inside its own
   box rather than pushing the whole page sideways */
.table-scroll{ overflow-x:auto; margin:1.6rem 0 0; }
.table{
  width:100%; border-collapse:collapse;
  margin:0; font-size:.95rem;
}
.table th{
  text-align:left; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:400;
  padding:0 1rem .6rem 0; border-bottom:1px solid var(--line);
}
.table td{
  padding:.75rem 1rem .75rem 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--bone-dim); vertical-align:top;
}
.table td:first-child{ color:var(--bone); }
.table .num{ font-family:var(--mono); color:var(--brass); white-space:nowrap; }

/* ---------- tricks (walkthrough) ---------- */
.trick{
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.trick-head{
  display:flex; align-items:baseline; gap:1rem;
  flex-wrap:wrap; margin-bottom:1rem;
}
.trick-no{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.trick-title{ font-weight:600; }
.trick-plays{ display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1rem; }
.play{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.play-who{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
}
.play.won .play-who{ color:var(--brass); }
.play.won .tile{ box-shadow:0 0 0 2px var(--brass), 0 10px 18px -10px rgba(0,0,0,.7); }
.trick-note{ margin:0; color:var(--bone-dim); font-size:.95rem; max-width:60ch; }
.trick-score{
  font-family:var(--mono); font-size:.76rem; color:var(--brass);
  margin:.8rem 0 0; letter-spacing:.05em;
}

/* ---------- glossary ---------- */
.gloss{ margin:2rem 0 0; }
.gloss-group{ margin-bottom:2.4rem; }
.gloss-letter{
  font-family:var(--display);
  font-variation-settings:"WONK" 1,"opsz" 60;
  font-weight:700; font-size:1.6rem; color:var(--brass);
  border-bottom:1px solid var(--line); padding-bottom:.4rem; margin:0 0 .6rem;
}
.gloss dt{
  font-weight:600; margin-top:1.1rem;
}
.gloss dd{
  margin:.2rem 0 0; color:var(--bone-dim); max-width:62ch;
}
.gloss dd .alt{
  font-family:var(--mono); font-size:.75rem;
  color:var(--brass); letter-spacing:.05em;
}

/* ---------- next / prev links ---------- */
.next{
  display:flex; gap:1rem; justify-content:space-between;
  flex-wrap:wrap; padding:2.4rem 0; border-top:1px solid var(--line);
}
.next a{
  text-decoration:none; display:block;
  padding:1.1rem 1.3rem; border:1px solid var(--line);
  border-radius:8px; flex:1 1 16rem;
}
.next a:hover{ border-color:var(--brass); color:var(--bone); }
.next .dir{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:block; margin-bottom:.25rem;
}
.next .what{ font-weight:600; }

/* ---------- footer ---------- */
.foot{
  padding:2.2rem 0 3.5rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.74rem;
  color:var(--bone-dim); letter-spacing:.05em;
  display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
}
.foot a{ text-decoration:none; color:var(--bone-dim); }
.foot a:hover{ color:var(--brass); }
.foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ---------- motion ---------- */
.deal{ opacity:0; transform:translateY(14px) rotate(-4deg); }
.dealt{ animation:deal .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes deal{ to{ opacity:1; transform:none; } }

/* Scroll reveal. The .reveal class is added by script.js rather than written
   into the markup, so a visitor without JS never lands on a hidden page. */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1);
}
.reveal.shown{ opacity:1; transform:none; }

/* Children of a revealed panel come in just behind it, one after another. */
.reveal .card,
.next.reveal > a{ opacity:0; transform:translateY(12px); }
.reveal.shown .card,
.next.reveal.shown > a{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.reveal.shown .card:nth-child(1), .next.reveal.shown > a:nth-child(1){ transition-delay:.10s; }
.reveal.shown .card:nth-child(2), .next.reveal.shown > a:nth-child(2){ transition-delay:.17s; }
.reveal.shown .card:nth-child(3), .next.reveal.shown > a:nth-child(3){ transition-delay:.24s; }
.reveal.shown .card:nth-child(4){ transition-delay:.31s; }
.reveal.shown .card:nth-child(5){ transition-delay:.38s; }

/* Dominoes lift slightly under the pointer. */
.tile{ transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.hand .tile:hover,
.count-row .tile:hover,
.trick-plays .play:not(.won) .tile:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 24px -12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Next / previous cards. */
.next a{
  background:linear-gradient(180deg, rgba(243,238,225,.045) 0%, rgba(243,238,225,.015) 100%);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),
             border-color .38s ease, box-shadow .38s ease, background .38s ease;
}
.next a:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(243,238,225,.08) 0%, rgba(243,238,225,.025) 100%);
  box-shadow:0 24px 34px -24px rgba(0,0,0,.9);
}
.next a .dir{ transition:letter-spacing .38s ease; }
.next a:hover .dir{ letter-spacing:.22em; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .deal{ opacity:1; transform:none; }
  .dealt{ animation:none; }
  body::before, body::after{ animation:none; }
  .reveal, .reveal.shown,
  .reveal .card, .next.reveal > a{ opacity:1; transform:none; transition:none; }
  .tile, .next a, .card{ transition:none; }
  .hand .tile:hover, .count-row .tile:hover,
  .trick-plays .play:not(.won) .tile:hover,
  .next a:hover, .card:hover{ transform:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  /* tighter cards so the reading column keeps its width on a phone */
  .panel,
  .band > .wrap,
  .band > .wrap-narrow,
  .hero > .wrap{ padding:1.2rem 1.1rem; border-radius:13px; }
  .page-head{ padding:1.6rem 1.1rem 1.3rem; border-radius:13px; }
  .tile{ --w:56px; }
  .tile.sm{ --w:40px; }
  .masthead{ padding:1.1rem 0; }
  .nav{ gap:1rem; }
  .steps li{ grid-template-columns:1.9rem 1fr; gap:.7rem; }
}