/* Local layout study: one continuous surface, with a static rules skeleton. */
html { min-width: 0; }
body { background: var(--scarlet, #73000f); }
main {
  --rules-heading-size: clamp(39px, calc(27px + 2.8vw), 66px);
  --page-gutter: clamp(4.45vw, calc(4vw + 8px), 6vw);
  --diagram-card-width: clamp(40px, min(calc(36px + 2vw), 12svh), 64px);
  position: relative;
  isolation: isolate;
  background-color: var(--scarlet, #73000f);
  background-image: var(--surface-light);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
main::before {
  content: '';
  position: fixed;
  z-index: 5;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: .12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.poster { background: transparent; }
.poster::before, .poster::after { display: none; }
.landing-scroll { position: relative; }
.landing-scroll.is-staged { height: var(--scroll-height); }
.is-staged .poster { position: sticky; top: 0; }
.poster-lockup {
  bottom: max(41px, clamp(6.35%, calc(18svh - 7vw), 10.5%));
  translate: 0 var(--scroll-text-y, 0px);
}
.poster-stage { translate: 0 var(--scroll-art-y, 0px); }
.sign-in:disabled { cursor: default; }
.rules-section {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  margin-top: var(--rules-offset, 24px);
  translate: 0 var(--rules-follow-y, 0px);
  opacity: var(--rules-opacity, 1);
  padding-block: clamp(26px, 2.5vw, 36px) clamp(36px, 5vw, 60px);
  color: var(--cream, #f0dfb5);
}
.rules-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw - var(--page-gutter) * 2);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .12em;
  font-size: var(--rules-heading-size);
  color: rgb(240 223 181 / .65);
  pointer-events: none;
}
.rules-divider::before, .rules-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .6; }
.rules-divider svg { display: block; width: 1.65em; height: .55em; flex: none; }
.rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, min(4vw, 6svh), 48px);
}
.rules-diagrams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--diagram-card-width) * 3.45 + 100px)), 1fr));
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: min(100%, calc(var(--diagram-card-width) * 6.9 + 256px));
  min-width: 0;
  margin-inline: auto;
}
.rules-table {
  width: min(100%, calc(var(--diagram-card-width) * 3 + 122px));
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
}
.court-stack { display: grid; width: 100%; gap: clamp(10px, min(1.2vw, 2svh), 16px); }
.rule-court { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; column-gap: clamp(6px, 1.2vw, 14px); align-items: center; min-width: 0; }
.court-number { color: #e0c9a6; font: 400 clamp(15px, 1.3vw, 18px)/1 var(--display, Georgia, serif); text-align: left; }
.court-points { width: 4.5em; color: var(--cream, #f0dfb5); font: 400 clamp(13px, 1.1vw, 16px)/1.4 "Times New Roman", Times, serif; white-space: nowrap; }
.court-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, .8vw, 10px); min-width: 0; }
.rule-slot {
  width: 100%;
  aspect-ratio: 7 / 10;
  border: 1px solid rgb(240 223 181 / .48);
  border-radius: 4px;
  background: transparent;
}
.rules-copy { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding-top: 0; text-align: center; }
.rules-copy h2 { margin: 0; color: var(--cream, #f0dfb5); font: 400 var(--rules-heading-size)/1.08 var(--display, Georgia, serif); letter-spacing: -.04em; }
.rules-summary {
  max-width: 740px;
  margin: 20px auto 0;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgb(240 223 181 / .2);
  border-radius: 4px;
  background: rgb(240 223 181 / .025);
  text-align: left;
}
.rules-summary p { margin: 0; color: var(--cream, #f0dfb5); font: 400 clamp(16px, 1.25vw, 18px)/1.7 "Times New Roman", Times, serif; }
.rules-examples {
  display: grid;
  align-self: center;
  gap: clamp(20px, min(2.5vw, 5svh), 32px);
  width: min(100%, calc(var(--diagram-card-width) * 3.45 + 100px));
  min-width: 0;
  margin-inline: auto;
  font-family: "Times New Roman", Times, serif;
}
.card-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(4px, .6vw, 8px);
  font-size: clamp(18px, 1.6vw, 24px);
}
.card-sum img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;
  filter: drop-shadow(1px 3px 3px #19050940);
  user-select: none;
  -webkit-user-drag: none;
}
.sum-operator { color: #e0c9a6; }
.sum-total { font-variant-numeric: lining-nums tabular-nums; }
.card-values {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(12px, 1.5vw, 22px);
  margin: 0;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
}
.card-values span { white-space: nowrap; }
.rules-hand-wrap { --hand-card-width: clamp(48px, min(15vw, 18svh), 96px); grid-column: 1 / -1; width: min(100%, calc(var(--hand-card-width) * 7.5)); margin: 0 auto; padding: 8px 8px 0; }
.rules-hand {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)) var(--hand-card-width);
  align-items: end;
  min-width: 0;
  isolation: isolate;
}
.rule-card {
  --hand-tilt: 0deg;
  position: relative;
  width: var(--hand-card-width);
  min-width: 0;
  aspect-ratio: 7 / 10;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: rotate(var(--hand-tilt));
  transform-origin: 50% 100%;
}
.rule-card:nth-child(1) { --hand-tilt: -3deg; }
.rule-card:nth-child(2) { --hand-tilt: -2.5deg; }
.rule-card:nth-child(3) { --hand-tilt: -2deg; }
.rule-card:nth-child(4) { --hand-tilt: -1.5deg; }
.rule-card:nth-child(5) { --hand-tilt: -1deg; }
.rule-card:nth-child(6) { --hand-tilt: -.5deg; }
.rule-card:nth-child(8) { --hand-tilt: .5deg; }
.rule-card:nth-child(9) { --hand-tilt: 1deg; }
.rule-card:nth-child(10) { --hand-tilt: 1.5deg; }
.rule-card:nth-child(11) { --hand-tilt: 2deg; }
.rule-card:nth-child(12) { --hand-tilt: 2.5deg; }
.rule-card:nth-child(13) { --hand-tilt: 3deg; }
.rule-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 3px 3px #19050940);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.trump-section { margin-top: clamp(28px, min(4vw, 6svh), 48px); text-align: center; }
.trump-section > .rules-summary { margin-top: 0; }
.trump-example { margin: 32px auto 0; font: 400 16px/1.5 "Times New Roman", Times, serif; }
.trump-diagram { display: block; width: min(100%, clamp(260px, calc(var(--diagram-card-width) * 5), 320px)); height: auto; margin-inline: auto; overflow: visible; }
.trump-diagram image { filter: drop-shadow(1px 3px 3px #19050940); }
.trump-arrows { color: #e0c9a6; }
.trump-neutral-lines { opacity: .75; }
.trump-diagram text { font: 400 17px "Times New Roman", Times, serif; }
.trump-example figcaption { max-width: 320px; margin: 24px auto 0; color: var(--cream, #f0dfb5); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; text-align: center; }
.trump-example figcaption p { margin: 0 0 5px; }
.trump-example figcaption p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .landing-scroll.is-staged { height: auto; }
  .is-staged .poster { position: relative; top: auto; }
  .poster-lockup, .poster-stage { translate: none; }
}