/* A short, optional rules film. The four rules remain readable at every beat. */
.challenge-page .challenge-intro { border-radius:0; border-bottom:0; }
.challenge-page .challenge-quick-rules { position:relative; isolation:isolate; margin:16px 0 36px; padding:24px 0; overflow:hidden; border:0; border-top:1px solid var(--cq-line); border-radius:0; background:transparent; }
.challenge-quick-rules::before { display:none; }
.guide-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:0; list-style:none; cursor:pointer; }
.guide-toggle::-webkit-details-marker { display:none; }
.guide-toggle > span { display:flex; align-items:center; gap:12px; color:var(--cq-muted); font-size:11px; font-weight:500; flex-shrink:0; }
.guide-toggle svg { width:18px; height:18px; color:var(--cq-gold); transition:transform 220ms var(--cq-ease); }
.guide-walkthrough[open] > .guide-toggle svg { transform:rotate(180deg); }
.guide-controls { display:flex; justify-content:flex-end; margin:8px 0 -48px; position:relative; z-index:2; }
.guide-walkthrough:not([open]) + .challenge-rules { margin-top:8px; }
.challenge-page.is-playing .challenge-purpose { padding-bottom:8px; }
.challenge-page.is-playing .challenge-quick-rules { margin-top:0; margin-bottom:16px; }
@media(max-width:540px) { .guide-toggle { align-items:flex-start; flex-direction:column; gap:8px; padding:12px 0; } .guide-toggle > span { width:100%; justify-content:space-between; } .guide-controls { margin:8px 0 0; } }

.challenge-quick-rules h2 { font-size:22px; color:var(--cq-ink); font-weight:700; }
.challenge-page #guidePlayback { min-width:112px; min-height:44px; flex-shrink:0; padding:8px 12px; background:#ffffff08; border-color:#9b8052; font-size:11px; }
.guide-stage { position:relative; margin:12px 0 24px; }
.guide-scene { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:32px; min-height:310px; }
.guide-copy { display:grid; gap:12px; }
.guide-kicker { display:none; }
.guide-copy > strong { color:#fff1d8; font-size:clamp(26px,3.7vw,46px); font-weight:900; line-height:1.04; letter-spacing:-.035em; font-style:italic; }
.guide-copy > span:last-child { font-size:13px; color:#d5c7d9; line-height:1.5; }
.guide-visual { position:relative; isolation:isolate; min-width:0; min-height:310px; display:flex; flex-direction:column; align-items:center; justify-content:center; perspective:900px; }
.guide-visual::before { content:''; position:absolute; z-index:-1; inset:10% 4%; border:1px solid #e7b86b35; border-radius:50%; background:radial-gradient(ellipse,#d8964326,transparent 68%); transform:rotate(-12deg); pointer-events:none; }
.guide-deck { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; width:min(100%,720px); }
.guide-deck img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 12px 8px #0008); }
.guide-stamp { margin-top:10px; font-size:9px; letter-spacing:.13em; font-weight:800; color:#f5d591; }
.guide-swap { flex-direction:row; gap:8px; }
.guide-swap > b { color:#f2cb7a; font-size:44px; }
.guide-swap-card { display:grid; justify-items:center; gap:8px; max-width:45%; }
.guide-swap-card img { width:240px; max-width:100%; height:auto; filter:drop-shadow(0 14px 10px #0008); }
.guide-swap-card span { font-size:9px; line-height:1.5; font-weight:800; text-align:center; }
.guide-out { color:#ffa9b4; }
.guide-in { color:#abefd7; }
.guide-out img { filter:grayscale(.8); opacity:.5; transform:translateY(8px) rotate(-12deg); }
.guide-reset .guide-old { position:absolute; top:50%; margin-top:-16px; transform:translateY(-50%); opacity:0; }
.guide-score { gap:0; }
.guide-score-label { font-size:10px; letter-spacing:.2em; color:#dfc6a1; font-weight:800; }
.guide-score > strong { font-size:132px; line-height:1.05; color:#ffdb87; font-style:italic; font-weight:900; font-variant-numeric:tabular-nums; text-shadow:0 6px 24px #f2ad3a30; }
.guide-score > b { color:#f8e6c4; font-size:17px; letter-spacing:.25em; }
.guide-score > small { font-size:10px; color:#cbbbd0; margin-top:12px; text-align:center; }
.guide-score i { position:absolute; width:8px; height:18px; background:#f5cd78; left:20%; top:25%; transform:rotate(-25deg); }
.guide-score i:nth-last-child(2) { left:auto; right:20%; top:40%; transform:rotate(30deg); }
.guide-score i:last-child { left:28%; top:68%; width:5px; height:10px; }
.challenge-rule-steps.guide-steps { gap:10px; margin:0; }
.guide-steps li { display:block; min-width:0; }
.challenge-page .guide-steps button { position:relative; width:100%; height:100%; min-height:88px; padding:14px 0 17px; display:grid; grid-template-columns:auto 1fr; align-content:start; column-gap:10px; row-gap:5px; text-align:left; border:0; border-bottom:1px solid var(--cq-line); border-radius:0; background:transparent; overflow:hidden; }
.challenge-page .guide-steps button:hover { transform:none; background:#ffffff05; }
.guide-steps button > span { font-size:13px; font-weight:900; color:#e3bd76; }
.guide-steps button > strong { font-size:12px; color:#f8e8cc; line-height:1.4; }
.guide-steps button > small { grid-column:2; color:#c8becf; font-size:10px; font-weight:500; line-height:1.5; }
.guide-steps button > i { position:absolute; left:0; right:0; bottom:0; height:3px; background:#f4ca74; transform:scaleX(var(--progress,0)); transform-origin:left; }
.challenge-page .guide-steps button[aria-current] { border-color:var(--cq-gold); background:transparent; }
.challenge-quick-rules .challenge-rules { margin-top:18px; padding-top:14px; }
.guide-animated .guide-scene:not([hidden]) .guide-copy { animation:guide-copy-in .45s cubic-bezier(.2,0,0,1) both; }
.guide-animated .guide-deal, .guide-animated .guide-fresh, .guide-animated .guide-in { animation:guide-float 2.4s ease-in-out infinite; }
.guide-animated .guide-visual::before { animation:guide-aura 3s ease-in-out infinite; }
.guide-animated .guide-deal img { animation:guide-deal .75s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 40ms); }
.guide-animated .guide-out img { animation:guide-bench 1s .2s cubic-bezier(.3,0,1,1) both; }
.guide-animated .guide-in img { animation:guide-recruit 1s .6s cubic-bezier(.16,1,.3,1) both; }
.guide-animated .guide-swap > b { animation:guide-arrow 1.2s ease-in-out infinite; }
.guide-animated .guide-reset .guide-old { opacity:1; }
.guide-animated .guide-old img { animation:guide-retire .6s cubic-bezier(.3,0,1,1) both; animation-delay:calc(var(--i) * 35ms); }
.guide-animated .guide-fresh img { animation:guide-deal .75s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.7s + var(--i) * 40ms); }
.guide-animated .guide-score > strong { animation:guide-score-in .65s cubic-bezier(.2,0,0,1) both; }
.guide-animated .guide-score i { animation:guide-spark .9s cubic-bezier(.2,0,0,1) both; }
.guide-animated:not(.guide-running) .guide-scene *, .guide-animated:not(.guide-running) .guide-visual::before { animation-play-state:paused !important; }
.guide-quiet .guide-scene *, .guide-quiet .guide-visual::before { animation:none !important; }
@keyframes guide-copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes guide-deal { 0% { opacity:0; transform:translate3d(70px,100px,-160px) rotateY(-45deg) rotate(18deg) scale(.55); } 70% { opacity:1; transform:translateY(-10px) rotate(-3deg) scale(1.06); } 100% { opacity:1; transform:none; } }
@keyframes guide-bench { 0%,15% { opacity:1; transform:none; filter:grayscale(0); } 40% { transform:translateY(-14px) rotate(5deg) scale(1.08); } 100% { opacity:.5; transform:translate(-12px,22px) rotate(-18deg) scale(.82); filter:grayscale(.8); } }
@keyframes guide-recruit { 0% { opacity:0; transform:translate3d(90px,-45px,-120px) rotateY(-50deg) rotate(16deg) scale(.65); } 65% { opacity:1; transform:translateY(-8px) rotate(-4deg) scale(1.08); } 100% { opacity:1; transform:none; } }
@keyframes guide-retire { 0% { opacity:1; transform:none; } 30% { opacity:1; transform:translateY(-12px) rotate(-6deg); } 100% { opacity:0; transform:translate(45px,100px) rotate(28deg) scale(.55); } }
@keyframes guide-float { 0%,100% { transform:translateY(4px) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes guide-aura { 0%,100% { opacity:.45; transform:rotate(-12deg) scale(.9); } 50% { opacity:1; transform:rotate(6deg) scale(1.05); } }
@keyframes guide-arrow { 0%,100% { transform:translateX(-5px); } 50% { transform:translateX(5px); } }
@keyframes guide-score-in { from { opacity:0; transform:scale(.7) rotate(-6deg); } to { opacity:1; transform:none; } }
@keyframes guide-spark { from { opacity:0; transform:translateY(30px) rotate(0); } to { opacity:1; transform:translateY(0) rotate(25deg); } }
@media(max-width:900px) { .challenge-page .challenge-quick-rules { padding:24px 0; } .guide-scene { gap:16px; } .guide-copy > strong { font-size:32px; } .guide-deck { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:440px; } .guide-swap-card img { width:180px; } .guide-steps button > small { grid-column:1 / -1; } }
@media(max-width:540px) { .challenge-page .challenge-quick-rules { padding:20px 0; }  .challenge-quick-rules h2 { font-size:17px; }  .challenge-page #guidePlayback { min-width:88px; font-size:10px; padding:8px; } .guide-scene { grid-template-columns:1fr; gap:12px; min-height:410px; } .guide-copy { gap:7px; padding-top:10px; } .guide-copy > strong { font-size:28px; } .guide-copy > span:last-child { font-size:12px; } .guide-visual { min-height:260px; } .guide-deck { width:100%; max-width:380px; } .guide-swap-card img { width:160px; } .guide-score > strong { font-size:100px; } .guide-stage { margin-bottom:16px; } .challenge-rule-steps.guide-steps { grid-template-columns:1fr 1fr; gap:8px; } .challenge-page .guide-steps button { min-height:88px; padding:11px; } .guide-steps button > small { grid-column:2; } }
@media(prefers-reduced-motion:reduce) { .guide-scene *, .guide-visual::before { animation:none !important; } }

/* The cross-app loop stays readable independently of the optional animation. */
.challenge-page .challenge-title > .challenge-purpose-lead,
.challenge-page.is-playing .challenge-title > .challenge-purpose-lead { display:block; margin-top:18px; font-size:clamp(16px,2vw,23px); line-height:1.4; color:#fff2dc; }
.challenge-page .challenge-purpose { position:relative; padding:0 0 26px; border:0; background:transparent; }
.challenge-purpose p { max-width:780px; margin:0 0 12px; font-size:15px; line-height:1.6; color:#e1d9e8; }
.challenge-purpose .challenge-goal { font-size:20px; color:#f9d58b; }
.challenge-purpose .challenge-manual { font-size:13px; color:#c6bcd0; }
.challenge-purpose .challenge-loop { max-width:none; margin:20px 0; padding:0; border:0; font-size:13px; font-weight:600; line-height:2.2; }
.challenge-loop span { padding:0 9px; color:#f9d58b; }
.challenge-setup-actions { display:flex; flex-wrap:wrap; gap:10px; }
.challenge-page .challenge-setup-actions button { min-height:46px; }
.challenge-scoring-help { margin:16px 0 4px; color:#dcd2e5; font-size:13px; line-height:1.6; }
.challenge-scoring-help strong { color:#ffdb91; }
.guide-copy-deck > img { width:min(80%,340px); height:auto; margin-top:-20px; filter:drop-shadow(0 14px 15px #0009); }
.guide-code-ticket { position:relative; margin-top:-48px; padding:18px 22px; border:1px solid #e3bc76; border-radius:12px; background:linear-gradient(130deg,#453041,#211b31); box-shadow:0 10px 30px #0008; display:grid; gap:8px; transform:rotate(-3deg); }
.guide-code-ticket > span { font-size:10px; color:#e8c58c; letter-spacing:.14em; }
.guide-code-ticket > strong { font-size:22px; color:#fff4dc; }
.guide-code-ticket > small { color:#d0c3d9; font-size:11px; }
.guide-match-cards { display:flex; justify-content:center; width:100%; }
.guide-match-cards img { width:52%; max-width:280px; height:auto; object-fit:contain; filter:drop-shadow(0 15px 20px #0009); transform:rotate(-10deg); }
.guide-match-cards img + img { margin-left:-12%; transform:rotate(12deg) translateY(15px); }
.guide-ranked-label { position:relative; margin-top:-12px; border:1px solid #d9b575; padding:12px 22px; background:#25192ce8; color:#ffdd92; border-radius:8px; font-size:13px; font-weight:800; letter-spacing:.12em; }
.guide-animated .guide-copy-deck > img { animation:guide-float 2.4s ease-in-out infinite; }
.guide-animated .guide-code-ticket { animation:guide-ticket-in .65s cubic-bezier(.2,0,0,1) both; }
.guide-animated .guide-match-cards { animation:guide-float 2.4s ease-in-out infinite; }
@keyframes guide-ticket-in { from { opacity:0; transform:translateY(35px) rotate(4deg); } to { opacity:1; transform:rotate(-3deg); } }
@media(max-width:540px) {
 .challenge-page .challenge-purpose { padding:0 0 20px; }
 .challenge-purpose p { font-size:13px; }
 .challenge-purpose .challenge-goal { font-size:17px; }
 .challenge-purpose .challenge-loop { font-size:12px; }
 .challenge-loop span { padding:0 3px; }
 .challenge-setup-actions { display:grid; }
 .guide-copy-deck > img { width:250px; }
 .guide-code-ticket > strong { font-size:19px; }
 .guide-match-cards { max-width:330px; }
 .guide-ranked-label { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .guide-animated .guide-copy-deck > img,.guide-animated .guide-code-ticket,.guide-animated .guide-match-cards { animation:none; }
}