/* SOFT 17 — Rules page ("the insert that comes in the deck box").
   Title + court fan, the Rules Leaflet, the strap, the Rule Deck with a payout receipt,
   three Inspection Tags (#fairness) and the closing Betting Slip.
   Everything sits in the pages layer; shared objects come from style.css. */
@layer pages{

  /* ───────── title + court fan ───────── */
  .rules-hero{padding-block-end:var(--section)}
  .rules-hero__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-l) var(--space-xl);margin-block-end:var(--space-l)}
  .rules-hero__title{display:flex;flex:1 1 480px;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:720px}
  .rules-hero__title .h1{line-height:.95}

  /* three court cards held in a fan: -8 / 0 / 8deg, tucked into the leaflet */
  .court-fan{position:relative;z-index:3;flex:none;inline-size:320px;max-inline-size:100%;block-size:208px;margin-block-end:var(--tuck-l)}
  .court{position:absolute;display:flex;flex-direction:column;justify-content:space-between;inline-size:120px;block-size:168px;padding:var(--space-2xs);border-radius:var(--r-card);background-color:var(--ivory);box-shadow:var(--shadow-rest);transform-origin:50% 100%}
  .court:nth-child(1){inset-inline-start:28px;inset-block-start:32px;transform:rotate(-8deg)}
  .court:nth-child(2){inset-inline-start:100px;inset-block-start:8px}
  .court:nth-child(3){inset-inline-start:172px;inset-block-start:32px;transform:rotate(8deg)}
  .court__index{display:flex;flex-direction:column;align-items:center;gap:2px;inline-size:20px}
  .court__rank{font:600 20px/1 var(--font-serif);font-variation-settings:"opsz" 72}
  .court__index .pip{inline-size:12px;block-size:12px}
  .court__index--end{align-self:flex-end;transform:rotate(180deg)}
  .court__art{display:block;overflow:hidden;border:1px solid var(--hair-paper);border-radius:var(--r-paper)}
  .court__art img{inline-size:100%;block-size:68px;object-fit:cover}

  /* ───────── the Rules Leaflet: three ivory panels joined by folds ───────── */
  .leaflet{position:relative;z-index:1;display:flex;margin:0;padding:0;filter:drop-shadow(0 2px 0 rgb(0 0 0 / .35)) drop-shadow(0 22px 22px rgb(0 0 0 / .45))}
  .leaflet__panel{--fold:-10deg;container:leaflet-panel / inline-size;display:flex;flex:1 1 0;flex-direction:column;gap:var(--gap-in);min-inline-size:0;min-block-size:480px;padding:var(--pad);border-radius:0}
  .leaflet__panel:nth-child(2){--fold:10deg}
  .leaflet__panel:first-child{border-radius:var(--r-paper) 0 0 var(--r-paper)}
  .leaflet__panel:last-child{border-radius:0 var(--r-paper) var(--r-paper) 0}
  /* the printed crease: a hairline plus a 1px highlight on the fold */
  .leaflet__panel+.leaflet__panel{box-shadow:inset 1px 0 0 var(--hair-paper),inset 2px 0 0 rgb(255 255 255 / .5)}
  .leaflet__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-s);block-size:120px}
  .leaflet__label{text-align:end;white-space:nowrap}
  .leaflet__step{margin-block-start:var(--space-2xs)}
  /* a panel too narrow for the vignette and "How a hand plays" side by side (desktop 1024–1270, small
     phones): the running head moves above the vignette on one line instead of breaking into a ragged
     right-aligned column. Desktop panels keep one shared top height so Bet. / Play. / Settle. stay level. */
  @media (max-width:639.98px),(min-width:1024px){
    @container leaflet-panel (width < 320px){
      .leaflet__top{flex-direction:column;justify-content:flex-end;gap:var(--space-s);block-size:calc(120px + var(--space-s) + 16px)}
      .leaflet__label{order:-1;text-align:start}
    }
  }
  @media (max-width:639.98px){
    @container leaflet-panel (width < 320px){.leaflet__top{block-size:auto}}
  }
  .leaflet__copy{max-inline-size:30ch}
  .leaflet__count{padding-block-start:var(--space-xs);font:400 var(--fs-14)/1 var(--font-mono);color:var(--fg-2)}

  /* vignettes: a card back with two chips / the queen in a double frame / the ace of spades */
  .vignette-bet{position:relative;flex:none;inline-size:152px;block-size:120px}
  .vignette-bet__back{position:absolute;inset-inline-start:4px;inset-block-start:0;inline-size:80px;block-size:120px;border-radius:var(--r-card);object-fit:cover;transform:rotate(-4deg);box-shadow:var(--shadow-rest)}
  .vignette-bet .chip{position:absolute;box-shadow:inset 0 0 0 1.5px var(--chip-edge),var(--shadow-rest)}
  .vignette-bet .chip--25{inset-inline-start:64px;inset-block-start:56px}
  .vignette-bet .chip--100{inset-inline-start:92px;inset-block-start:36px}
  .vignette-court{display:block;inline-size:168px;block-size:112px;margin:var(--space-3xs);overflow:hidden;border:1px solid var(--hair-paper);outline:1px solid var(--hair-paper);outline-offset:3px;border-radius:var(--r-paper)}
  .vignette-court img{inline-size:100%;block-size:100%;object-fit:cover}
  .vignette-ace{inline-size:120px;block-size:120px}

  /* desktop: the leaflet arrives folded (alternate ±10deg at perspective 1600px) and opens flat once it
     scrolls into view (rules.js adds .is-open). Motion only; the 4s animation is a safety net that lays
     it flat if rules.js never runs. */
  @media (min-width:1024px){
    .leaflet{perspective:1600px}
    html.js-motion:not([data-motion="off"]) .leaflet__panel{transition:transform 1000ms var(--ease-out) calc(var(--i,0) * 90ms)}
    html.js-motion:not([data-motion="off"]) .leaflet:not(.is-open) .leaflet__panel{transform:rotateY(var(--fold)) scaleX(1.0154);animation:leaflet-flat 0s 4s forwards}
  }
  @keyframes leaflet-flat{to{transform:none}}

  /* tablet and phone: a flat vertical stack, creases run across */
  @media (max-width:1023.98px){
    .leaflet{flex-direction:column}
    .leaflet__panel{flex:0 0 auto;min-block-size:0}
    .leaflet__panel:first-child{border-radius:var(--r-paper) var(--r-paper) 0 0}
    .leaflet__panel:last-child{border-radius:0 0 var(--r-paper) var(--r-paper)}
    .leaflet__panel+.leaflet__panel{box-shadow:inset 0 1px 0 var(--hair-paper),inset 0 2px 0 rgb(255 255 255 / .5)}
  }
  /* tablet: art beside the words so the stack stays short. The art column grows with the panel (art
     centred in it) and the copy takes a full measure, so the right of each wide panel is not left bare. */
  @media (min-width:640px) and (max-width:1023.98px){
    .leaflet__panel{display:grid;grid-template-columns:minmax(184px,1fr) minmax(0,1.6fr);grid-template-rows:auto auto 1fr;column-gap:var(--space-m);row-gap:var(--gap-in);align-items:start}
    .leaflet__panel:first-child{grid-template-rows:auto auto auto 1fr}
    .leaflet__top{display:contents}
    .leaflet__top>:first-child{grid-column:1;grid-row:1 / -1;align-self:center;justify-self:center}
    .leaflet__label{grid-column:2;grid-row:1;justify-self:start;text-align:start}
    .leaflet__step{grid-column:2;margin-block-start:0}
    .leaflet__copy,.leaflet__count{grid-column:2}
    .leaflet__copy{max-inline-size:52ch}
    .leaflet__panel:first-child .leaflet__step{grid-row:2}
    .leaflet__panel:first-child .leaflet__copy{grid-row:3}
    .leaflet__panel:first-child .leaflet__count{grid-row:4}
    .leaflet__count{align-self:end}
  }

  .rules-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-m);margin-block-start:var(--gap-out)}
  .rules-cta__note{font-size:var(--fs-15);line-height:var(--lh-15);font-weight:500;color:var(--fg-2)}

  @media (max-width:1023.98px){
    .rules-hero__head{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
    .rules-hero__title{flex:none}
    .court-fan{margin:0 auto}
  }

  /* ───────── section heads ───────── */
  .rules-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-s) var(--space-xl);margin-block-end:var(--gap-out)}
  .rules-head__side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-m)}
  .rules-head__note{max-inline-size:36ch}

  /* the Shuffle text button (secondary, so a quiet underline) */
  .shuffle{display:inline-flex;align-items:center;gap:var(--space-2xs);min-block-size:44px;padding-inline:var(--space-3xs);color:var(--fg);font:600 var(--fs-15)/1 var(--font-sans);text-decoration:underline;text-decoration-color:var(--fg-3);text-decoration-thickness:1px;text-underline-offset:6px}
  .shuffle .i{inline-size:18px;block-size:18px}
  .shuffle:hover{color:var(--fg);text-decoration-color:var(--citron)}

  /* ───────── the Rule Deck: eight readable cards ───────── */
  .rules-deck{padding-block:clamp(var(--space-xl), 7vw, var(--space-3xl)) var(--section)}
  .rule-deck{display:grid;grid-template-columns:repeat(4,minmax(0,220px));justify-content:center;gap:var(--gap-out) clamp(var(--col-gap), (100% - 880px) / 3, var(--gap-out));margin:0;padding:0}
  .rule-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xs);inline-size:100%;min-block-size:308px;padding:var(--space-m);border-radius:var(--r-rulecard);box-shadow:var(--shadow-rest);transition:transform var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
  /* the double rule printed 12px / 9px inside the edge (::after carries the grain) */
  .rule-card::before{content:"";position:absolute;inset:12px;border:1px solid var(--hair-paper);outline:1px solid var(--hair-paper);outline-offset:3px;border-radius:4px;pointer-events:none}
  .rule-card__index{position:relative;font:600 40px/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em}
  .rule-card__index--end{align-self:flex-end;transform:rotate(180deg)}
  .rule-card--warn .rule-card__index{color:var(--red)}
  .nowrap{white-space:nowrap}
  .rule-card__text{position:relative;max-inline-size:14ch;margin-inline:auto;font:400 22px/1.2 var(--font-serif);font-variation-settings:"opsz" 36;text-align:center;text-wrap:balance}
  @media (hover:hover){.rule-card:hover{translate:0 -12px;box-shadow:var(--shadow-lift)}}

  /* tablet: three columns of 200 × 280 cards */
  @media (min-width:640px) and (max-width:1023.98px){
    .rule-deck{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-out) var(--col-gap)}
    .rule-card{flex:0 0 min(200px, (100% - 2 * var(--col-gap)) / 3);min-block-size:280px;padding:20px}
    .rule-card::before{inset:10px}
    .rule-card__text{font-size:20px}
  }
  /* wide tablet: four fit, so deal two even rows of four instead of 3 / 3 / 2 */
  @media (min-width:860px) and (max-width:1023.98px){
    .rule-card{flex-basis:min(200px, (100% - 3 * var(--col-gap)) / 4)}
  }
  /* phone: single-column landscape cards, index column + sentence, no tilt */
  @media (max-width:639.98px){
    .rule-deck{grid-template-columns:minmax(0,1fr);gap:var(--space-s)}
    .rule-card{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:0;min-block-size:112px;padding:var(--space-s) var(--space-m);transform:none}
    .rule-card__index--end{display:none}
    .rule-card__text{max-inline-size:none;margin:0;font:400 var(--fs-body)/1.45 var(--font-sans);text-align:start}
    .rule-card:hover{translate:none}
  }
  @media (prefers-reduced-motion:reduce){.rule-card{transition:box-shadow var(--dur-1) linear}.rule-card:hover{translate:none}}
  html[data-motion="off"] .rule-card{transition:box-shadow var(--dur-1) linear}
  html[data-motion="off"] .rule-card:hover{translate:none}

  /* ───────── payout example: copy + a thermal receipt ───────── */
  .payout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--gap-out);margin-block-start:clamp(var(--space-2xl), 7vw, var(--space-3xl))}
  .payout__copy{flex:1 1 360px;min-inline-size:0;max-inline-size:520px}
  .payout__copy p{max-inline-size:46ch}
  .payout__title{font-size:var(--fs-figure-s);line-height:1.05;letter-spacing:-.02em}
  .payout__receipt{flex:0 1 400px;min-inline-size:0}
  .receipt{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--pad) var(--pad) calc(var(--pad) + var(--space-xs));border-radius:var(--r-paper) var(--r-paper) 0 0}
  .receipt__head{display:flex;justify-content:space-between;gap:var(--space-s)}
  .receipt__sample{color:var(--red)}
  .receipt__wager{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3xs) var(--space-xs)}
  .receipt__figure{font-size:64px;line-height:.85;letter-spacing:-.04em}
  .receipt__unit{font-size:var(--fs-15);line-height:var(--lh-15);font-weight:500;color:var(--fg-2)}
  .receipt__lines{gap:var(--space-2xs);margin:0}
  .receipt__lines dt{display:flex;flex:1 1 auto;align-items:baseline;gap:var(--space-2xs);min-inline-size:0}
  .receipt__lines dd{margin:0}
  .receipt__fee{color:var(--red)}
  .receipt__total{padding-block-start:var(--space-2xs);font-weight:700}
  .receipt__sub{margin-block-end:calc(var(--space-2xs) * -1);font:500 var(--fs-14)/var(--lh-14) var(--font-sans);color:var(--fg-2)}
  .receipt__fine{font-size:var(--fs-14);line-height:1.5;color:var(--fg-2)}
  /* narrow tablet: copy above the receipt on one centred 400px column, so their edges line up */
  @media (min-width:640px) and (max-width:767.98px){
    .payout__copy,.payout__receipt{flex:0 0 100%;max-inline-size:400px}
  }
  /* tablet from 768: copy and receipt share the row (both give a little width) instead of stacking */
  @media (min-width:768px) and (max-width:1023.98px){
    .payout{flex-wrap:nowrap}
  }

  /* ───────── Fair play: three Inspection Tags on strings ───────── */
  .rules-fair{padding-block-end:var(--section)}
  .tags{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:var(--gap-out);margin:0;padding:0}
  .tag-wrap{position:relative;display:flex;flex:0 1 280px;flex-direction:column;min-inline-size:0;padding-block-start:64px}
  .tag-string{position:absolute;z-index:2;inset-block-start:0;inset-inline-start:calc(50% - 40px);inline-size:80px;block-size:88px;fill:none;stroke:var(--ivory);stroke-width:1.5;stroke-linecap:round}
  .tag{--punch-y:24px;display:flex;flex-grow:1;flex-direction:column;gap:var(--gap-in);min-block-size:420px;padding:var(--space-xl) min(var(--pad), 28px) var(--pad);border-radius:3px}
  .seal{display:block;flex:none;align-self:center;inline-size:96px;block-size:96px;color:var(--cover);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .seal__moon{stroke-width:1;stroke-linejoin:round}
  .seal text{fill:currentColor;stroke:none;font:700 11px var(--font-ticket);letter-spacing:1px}
  .tag__fact{display:flex;align-items:baseline;gap:var(--space-xs)}
  .tag__figure{font-size:56px;line-height:.85;letter-spacing:-.04em}
  .tag__unit{font-size:var(--fs-15);font-weight:500;line-height:1.3;color:var(--fg-2)}
  .tag__meta{font:400 var(--fs-14)/1.4 var(--font-mono);color:var(--fg-2)}
  .tag .link{align-self:flex-start;white-space:nowrap}
  .tag__stamp{display:flex;align-items:center;min-block-size:44px;padding-inline-start:var(--space-3xs)}
  /* from 960 the three tags always share one row (they narrow from 280px rather than wrap 2 + 1) */
  @media (min-width:960px){
    .tags{flex-wrap:nowrap}
  }
  /* tablet below 960: three portrait tags would be too narrow and 2 + 1 strands the last one, so each
     tag turns landscape (seal beside the words) and the three hang in one centred column */
  @media (min-width:640px) and (max-width:959.98px){
    .tags{flex-direction:column;flex-wrap:nowrap;align-items:center}
    .tag-wrap{flex:none;inline-size:min(100%, 600px)}
    .tag{display:grid;grid-template-columns:96px minmax(0,1fr);align-content:start;gap:var(--gap-in) var(--space-m);min-block-size:0}
    .tag>.seal{grid-column:1;grid-row:1 / span 5;align-self:start}
    .tag>.rule{display:none}
    .tag>:not(.seal){grid-column:2}
    .tag>.link{justify-self:start}
  }
  @media (max-width:639.98px){
    .tag-wrap{flex-basis:100%;transform:none}
    .tag{min-block-size:0}
  }

  /* ───────── closing object: the Betting Slip ───────── */
  .rules-slip{padding-block-end:var(--section)}
  .slip-spot{position:relative;inline-size:min(400px,100%);margin-inline:auto}
  .slip{display:flex;flex-direction:column;gap:var(--space-xs);min-block-size:420px;padding:var(--space-l) var(--space-m) var(--space-m);border-radius:0 0 var(--r-paper) var(--r-paper)}
  .slip__head{display:flex;justify-content:space-between;gap:var(--space-s)}
  .slip__no{color:var(--red)}
  .slip__figure{margin-block-start:var(--space-2xs);font-size:144px;line-height:.8;letter-spacing:-.05em}
  .slip__copy{font-size:var(--fs-15);font-weight:500;line-height:1.45;color:var(--fg-2)}
  .slip-chips{position:absolute;inset-inline-start:calc(100% + var(--space-xl));inset-block-end:var(--space-xl);inline-size:120px;block-size:96px}
  .slip-chips .chip{--chip:64px;position:absolute;box-shadow:inset 0 0 0 1.5px var(--chip-edge),var(--shadow-rest)}
  .slip-chips .chip--25{inset-inline-start:0;inset-block-start:18px}
  .slip-chips .chip--100{inset-inline-start:26px;inset-block-start:0}
  .slip-chips .chip--500{inset-inline-start:52px;inset-block-start:28px}
  @media (max-width:1023.98px){.slip-chips{display:none}}
}