/* Find your first round */
.finder{margin:-8px 0 40px;border:1px solid #10100f30;background:#fffaf2;color:var(--ink)}
.finder summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 22px;cursor:pointer;list-style:none;font-size:14px}
.finder summary::-webkit-details-marker{display:none}
.finder-prompt b{font:800 clamp(20px,1.8vw,26px)/1 var(--display);text-transform:uppercase;margin-right:10px}
.finder-toggle{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--lime);font-size:22px;transition:transform .3s}
.finder[open] .finder-toggle{transform:rotate(45deg)}
.finder summary:focus-visible{outline:2px solid #994d31;outline-offset:-4px}
.finder-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);padding:8px 22px 26px;border-top:1px solid #10100f20}
.finder fieldset{border:0;margin:18px 0 0;padding:0}
.finder legend{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:700;margin-bottom:10px}
.finder legend span{font-size:9px;letter-spacing:.14em;color:#8d432b}
.finder-options{display:flex;flex-wrap:wrap;gap:8px}
.finder-options label{position:relative}
.finder-options input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.finder-options span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #10100f40;border-radius:24px;font-size:12px}
.finder-options input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.finder-options input:focus-visible+span{outline:2px solid #994d31;outline-offset:2px}
.finder-options label:hover span{border-color:var(--ink)}
.finder-result{align-self:stretch;display:grid;margin-top:18px}
.finder-waiting{display:grid;place-items:center;text-align:center;min-height:220px;padding:24px;border:1px dashed #10100f40;color:#625e53;font-size:13px}
.finder-match{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid #10100f25;background:#fff;animation:finder-in .45s ease}
.finder-match img{width:100%;height:100%;min-height:240px;object-fit:cover;filter:saturate(.85)}
.finder-copy{padding:20px 22px}
.finder-copy .eyebrow{color:#8d432b;font-size:9px;margin-bottom:8px}
.finder-copy h4{font:800 clamp(34px,3vw,46px)/1 var(--display);text-transform:uppercase;margin-bottom:10px}
.finder-copy p{font-size:13px;line-height:1.65;color:#4f4b42;margin-top:8px}
.finder-copy .finder-note{color:var(--ink);font-weight:700}
.finder-because{font-size:10px!important;color:#7c4a38!important}
.finder-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:14px}
.finder-actions .button{color:var(--ink)}
.finder-actions .text-link{margin:0}
@keyframes finder-in{from{opacity:0;transform:translateY(8px)}}
/* Help me choose */
.class-copy .help-choose{display:flex;width:max-content;color:#8d432b}
/* Combo builder */
.combo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center;margin:70px var(--gutter) 0;padding:44px clamp(20px,4vw,52px);border:1px solid #ffffff22;background:radial-gradient(ellipse at 80% 50%,#ad603326,transparent 60%)}
.combo .eyebrow{color:var(--lime);margin-bottom:14px}
.combo h3{font:800 clamp(48px,5.4vw,84px)/.9 var(--display);text-transform:uppercase}
.combo h3 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--lime)}
.combo-copy>p{max-width:460px;margin-top:16px;font-size:13px;color:var(--muted)}
.combo-moves{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.combo-moves button{min-height:44px;padding:10px 16px;border:1px solid #ffffff45;border-radius:24px;font-size:12px;font-weight:700;color:var(--cream)}
.combo-moves button:hover:not(:disabled){background:var(--lime);color:var(--ink);border-color:var(--lime)}
.combo-moves button:disabled{opacity:.4;cursor:not-allowed}
.combo-sequence{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;margin:18px 0 0;padding:0;list-style:none}
.combo-sequence li{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 14px;min-height:40px;border-radius:22px;background:#ffffff14;font-size:12px}
.combo-sequence li button{width:36px;height:36px;font-size:18px;color:var(--muted)}
.combo-sequence li button:hover{color:var(--lime)}
.combo-sequence .combo-empty{background:none;padding:0;color:var(--muted)}
.combo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:22px}
.combo-actions .button{color:var(--ink)}
.combo-actions .text-link,.combo-round .text-link{margin:0;color:var(--cream)}
.combo-slow[aria-pressed=true]{color:var(--lime)!important}
.combo-round{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px;padding-top:20px;border-top:1px solid #ffffff1f}
.combo-round label{font-size:12px;color:var(--muted)}
.combo-round select{margin-left:8px;min-height:40px;padding:6px 10px;background:#1b1a17;color:var(--cream);border:1px solid #ffffff40;font:inherit;font-size:12px}
.combo-clock{display:flex;align-items:baseline;gap:10px;margin-left:auto}
.combo-time{font:800 clamp(40px,4vw,58px)/1 var(--display);font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.2px var(--cream)}
.combo-phase{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.combo.in-round .combo-time{color:var(--lime);-webkit-text-stroke:0}
.combo.in-round .combo-phase{color:var(--lime)}
.combo.resting .combo-time{color:var(--cream);-webkit-text-stroke:0}
.combo-stage{position:relative;margin:0 auto;width:100%;max-width:420px;aspect-ratio:3/4;overflow:hidden;border:1px solid #ffffff1c;background:radial-gradient(circle at 50% 60%,#f68d6430,transparent 62%)}
/* The four moves are cut out at different widths; containing them in a fixed box keeps the fighter the same size. */
.combo-stage img{position:absolute;left:6%;top:4%;width:88%;height:84%;object-fit:contain}
.combo-now{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Photo stories */
.story-photo{position:relative}
.story-open{position:absolute;inset:0;z-index:2;width:100%;height:100%;cursor:zoom-in;background:transparent}
.story-open:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.story-photo:hover img{filter:saturate(1);transform:scale(1.02)}
.story-photo img{transition:filter .4s,transform .6s}
.story-viewer{width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:#050505f5;color:var(--cream)}
.story-viewer[open]{display:grid;place-items:center}
.story-viewer::backdrop{background:#000}
.story-viewer figure{display:grid;gap:14px;justify-items:center;margin:0;padding:70px 90px 80px}
.story-frame{touch-action:pan-y;user-select:none}
.story-frame img{display:block;max-width:min(1400px,86vw);max-height:76svh;object-fit:contain;-webkit-user-drag:none}
.story-viewer figcaption{display:flex;gap:18px;align-items:baseline;max-width:min(900px,86vw);font-size:13px;color:#d8d0c3}
.story-count{flex-shrink:0;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.story-close{position:fixed;top:16px;right:18px;width:48px;height:48px;border:1px solid #ffffff40;font-size:30px;line-height:1}
.story-step{position:fixed;top:50%;width:52px;height:52px;border:1px solid #ffffff40;background:#10100fb3;font-size:22px;transform:translateY(-50%)}
.story-step[data-step="-1"]{left:18px}
.story-step[data-step="1"]{right:18px}
.story-close:hover,.story-step:hover{background:var(--lime);color:var(--ink)}
.story-close:focus-visible,.story-step:focus-visible,.story-more:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.story-more{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);color:var(--cream);font-size:11px;margin:0}
@media(max-width:850px){
 .finder-body,.combo{grid-template-columns:1fr}
 .combo-stage{max-width:300px;order:-1}
}
@media(max-width:600px){
 .finder{margin:0 0 30px}
 .finder summary{padding:14px 16px;font-size:12px}
 .finder-prompt b{display:block;margin:0 0 4px}
 .finder-body{padding:4px 16px 20px}
 .finder-match{grid-template-columns:1fr}
 .finder-match img{min-height:0;aspect-ratio:4/3}
 .combo{margin:50px 16px 0;padding:28px 18px}
 .combo-clock{margin-left:0;width:100%}
 .story-viewer figure{padding:70px 10px 110px}
 .story-frame img{max-width:96vw;max-height:68svh}
 .story-step{top:auto;bottom:56px;transform:none}
 .story-more{bottom:18px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.finder-match{animation:none}.finder-toggle,.story-photo img{transition:none}}