/* Homepage world-rules preview and Docs page components. */
.how-it-works-preview{padding:64px 0 0;border-top:0}
.preview-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);align-items:end;gap:28px;margin-bottom:30px}
.preview-section-heading .preview-eyebrow{grid-column:1/-1;margin:0 0 -14px;font:500 .68rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.preview-section-heading h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1;text-transform:none}
.preview-section-heading .preview-intro{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}

.game-loop{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:0!important;padding:0!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none!important}
.game-loop li{position:relative;min-width:0;margin:0!important;padding:34px 24px 36px!important;border-right:1px solid var(--line);color:var(--text)!important}
.game-loop li::before{content:"";position:absolute;top:-1px;left:0;width:58px;height:3px;background:var(--copper)}
.game-loop li:first-child{padding-left:0!important}
.game-loop li:last-child{padding-right:0!important;border-right:0}
.how-it-works-preview .game-loop li>.game-loop-number{display:block;margin-bottom:13px;font:600 2.6rem/.9 var(--display);letter-spacing:-.03em;color:var(--copper)}
.how-it-works-preview .game-loop h3{margin:0 0 17px;font-size:1.9rem;line-height:1;text-transform:uppercase}
.how-it-works-preview .game-loop p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.65}
.how-it-works-preview .game-loop p strong{color:var(--copper);font:600 1.03rem/1.2 var(--display);white-space:nowrap}

.docs-handoff{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr) auto;align-items:center;gap:38px;margin:96px 0 36px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.docs-handoff .preview-eyebrow{margin:0 0 9px}
.docs-handoff h2{margin:0;font-size:clamp(1.8rem,3.5vw,2.65rem);line-height:1;text-transform:none}
.docs-handoff>p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.7}
.docs-handoff>a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 15px;border:1px solid var(--line-strong);color:var(--text);font:600 .74rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.docs-handoff>a:hover{border-color:var(--copper);text-decoration:none}
.world-rules-preview{padding:104px 0 48px;scroll-margin-top:24px}
.rules-heading{margin-bottom:18px}
.rules-list{border-top:1px solid var(--line-strong)}
.rule-group{border-bottom:1px solid var(--line)}
.rule-group summary{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr) 42px;align-items:center;gap:24px;min-height:78px;padding:16px 0;list-style:none;cursor:pointer}
.rule-group summary::-webkit-details-marker{display:none}
.rule-group summary>span{font:600 1.3rem/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.rule-group summary>small{color:var(--muted);font-size:.82rem;line-height:1.55}
.rule-group summary>b{display:grid;place-items:center;width:42px;height:42px;color:var(--copper);font:400 1.75rem/1 var(--display);transition:transform .16s ease}
.rule-group[open] summary>b{transform:rotate(45deg)}
.rule-group>ul{max-width:none;margin:0;padding:0 66px 28px calc(35% + 18px);list-style:none}
.rule-group li{position:relative;margin:0;padding:9px 0 9px 22px;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:.84rem;line-height:1.6}
.rule-group li:last-child{border-bottom:0}
.rule-group li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;background:var(--copper);transform:rotate(45deg)}

.participation-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:42px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.participation-cta p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.6}
.participation-cta strong{color:var(--text)}
.participation-cta nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.participation-cta a{color:var(--text);font:500 .67rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.participation-cta a:hover{color:var(--copper);text-decoration:none}
.rules-actions{display:flex;align-items:center;gap:10px;margin-top:28px}
.rules-actions a,.rules-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 .78rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.rules-actions .rules-primary-action{background:var(--dark);border-color:var(--dark);color:var(--ivory);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.rules-actions .rules-secondary-action{color:var(--text)}
.rules-actions a:hover,.rules-actions button:hover:not(:disabled){text-decoration:none;border-color:var(--copper)}
.rules-actions button:disabled{opacity:.55;cursor:default}

@media(max-width:820px){
  .preview-section-heading{grid-template-columns:1fr;gap:12px}
  .preview-section-heading .preview-eyebrow{margin-bottom:0}
  .game-loop{grid-template-columns:1fr 1fr!important}
  .game-loop li:nth-child(2){padding-right:0!important;border-right:0}
  .game-loop li:nth-child(3){padding-left:0!important}
  .game-loop li:nth-child(n+3){border-top:1px solid var(--line)}
  .game-loop li:nth-child(n+3)::before{top:-1px}
  .rule-group summary{grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) 42px}
  .rule-group>ul{padding-left:calc(40% + 12px)}
  .docs-handoff{grid-template-columns:1fr auto}.docs-handoff>p{grid-column:1}
}

@media(max-width:600px){
  .how-it-works-preview{padding-top:48px}
  .game-loop{grid-template-columns:1fr!important}
  .game-loop li,.game-loop li:first-child,.game-loop li:nth-child(2),.game-loop li:nth-child(3),.game-loop li:last-child{padding:25px 0!important;border-top:1px solid var(--line);border-right:0}
  .game-loop li:first-child{border-top:0}
  .game-loop li:first-child::before{top:-1px}
  .how-it-works-preview .game-loop li>.game-loop-number{margin-bottom:9px;font-size:2.2rem}
  .how-it-works-preview .game-loop h3{margin-bottom:10px;font-size:1.7rem}
  .world-rules-preview{padding-top:72px}
  .docs-handoff{grid-template-columns:1fr;gap:16px;margin-top:68px}.docs-handoff>p{grid-column:auto}.docs-handoff>a{justify-self:start}
  .rule-group summary{grid-template-columns:1fr 42px;gap:6px 14px;min-height:72px}
  .rule-group summary>small{grid-column:1}
  .rule-group summary>b{grid-column:2;grid-row:1/3}
  .rule-group>ul{padding:0 0 24px}
  .participation-cta{align-items:flex-start;flex-direction:column;gap:14px}
  .rules-actions{align-items:stretch;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){.rule-group summary>b{transition:none}}

/* Launch film: a framed 16:9 player under How it works, bracketed like the hero. */
.launch-film{margin:72px 0 0}
.launch-film-frame{padding:10px;border:1px solid var(--line);background:var(--panel)}
.launch-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ivory);object-fit:cover}
@media(max-width:760px){.launch-film{margin-top:48px}.launch-film-frame{padding:6px}}
.launch-film-frame{position:relative}
.launch-film-play{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 22px 12px 16px;border:1px solid var(--copper);border-radius:var(--radius);background:var(--copper);color:var(--ivory);font:600 .9rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px rgba(16,20,21,.18)}
.launch-film-play span{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.launch-film-play:hover{background:var(--red-dark);border-color:var(--red-dark)}
.launch-film-play:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.launch-film-play{white-space:nowrap}
@media(max-width:760px){.launch-film-play{bottom:7%;min-height:36px;gap:9px;padding:8px 14px 8px 11px;font-size:.72rem}.launch-film-play span{border-width:5px 0 5px 9px}}
