/* =====================================================================================================================
   Crew Wars, pages (2 of 3): the challenge flow (a march in four stations), vellum rules, the rules editor, the new-crew form, the guide.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- the two crews facing each other */
.cw-flowhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 24px; padding: clamp(38px, 4vw, 52px) clamp(30px, 3.6vw, 52px) clamp(42px, 4vw, 54px); }
.cw-flowhead .cw-s-shade { background: linear-gradient(90deg, rgba(150, 40, 34, .46), rgba(8, 5, 3, .66) 34% 66%, rgba(40, 96, 128, .46)), linear-gradient(0deg, rgba(8, 5, 3, .7), transparent 44%), radial-gradient(120% 100% at 50% 46%, transparent 50%, rgba(0, 0, 0, .55)); }
.cw-fh-side { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; text-align: center; }
.cw-fh-side > b { font: 800 clamp(1.15rem, 2.5vw, 1.8rem)/1.05 var(--display); letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 3px 0 #000, 0 0 20px rgba(255, 110, 30, .24); }
.cw-fh-side > b a { color: inherit; text-decoration: none; } .cw-fh-side > b a:hover { color: var(--cw-ember); } .cw-fh-side small { color: #d9c7b2; }
.cw-fh-side .cw-crest { --s: 96px; }
.cw-fh-ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cw-fh-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cw-fh-vs .cw-bigswords { width: 112px; height: 112px; } .cw-fh-vs small { font: 900 .62rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw-locked { display: flex; gap: 18px; margin: 0 0 24px; padding: 28px 30px; }
.cw-locked > .cwi { width: 60px; height: 60px; filter: drop-shadow(0 4px 6px #000); } .cw-locked h2 { margin: 0 0 8px; font: 800 1.4rem/1.1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.cw-locked ul { margin: 0 0 12px; padding-left: 18px; } .cw-locked li { margin: 3px 0; }

/* ---------------------------------------------------------------- the march: four stations on a rope, each lit as you reach it */
.cw-flow { display: grid; gap: 22px; }
.cw-stepper { display: flex; gap: 0; margin: 0 0 4px; padding: 0; list-style: none; position: relative; }
.cw-stepper::after { content: ""; position: absolute; left: 6%; right: 6%; top: 24px; height: 5px; border-radius: 3px; background: linear-gradient(180deg, #b89a68, #6a5030 50%, #2a1c0c); box-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.cw-stepper li { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 900 .72rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cw-stepper li > b { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; font: 800 1.2rem/1 var(--cw-serif); color: #e6d8bc; text-shadow: 0 1px 0 #000; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #5a4632, #241810 70%); box-shadow: 0 0 0 3px #0b0806, 0 0 0 5px #6a5238, 0 6px 8px rgba(0, 0, 0, .7); transition: filter .3s; }
.cw-stepper li .cwi { width: 24px; height: 24px; opacity: .5; filter: grayscale(.6); } .cw-stepper li.is-done > b { color: #08140a; background: radial-gradient(circle at 36% 30%, #98cf9e, #3f8a52 70%); } .cw-stepper li.is-done { color: var(--text); }
.cw-stepper li.is-done .cwi { opacity: 1; filter: none; }
.cw-stepper li.is-now > b { color: #1d0900; background: radial-gradient(circle at 36% 30%, #ffe2a6, #ee9a3a 60%, #b8541a); box-shadow: 0 0 0 3px #0b0806, 0 0 0 5px #d9873a, 0 0 22px rgba(255, 130, 34, .8); animation: cw-throb 1.8s ease-in-out infinite; }
.cw-stepper li.is-now { color: #ffd98f; } .cw-stepper li.is-now .cwi { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 130, 34, .9)); }
.cw-step { margin: 0; padding: clamp(24px, 2.8vw, 32px); min-width: 0; }
.cw-step legend { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; font: 800 1.35rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.cw-step legend b { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.05rem; color: #fbe6c4; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #c4443a, #8a2018 58%, #4a0e0a); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .35), 0 0 0 2px #1a0805, 0 3px 4px rgba(0, 0, 0, .7); }
.cw-step:disabled { opacity: .42; filter: grayscale(.5); }
.cw-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cw-kind-card { position: relative; display: flex; align-items: stretch; min-height: 150px; overflow: hidden; cursor: pointer; isolation: isolate; color: #fff;
  border-radius: 3px; background: linear-gradient(135deg, color-mix(in srgb, var(--kc) 22%, #2a1e15), #120c08 72%), var(--cw-tex-paper); background-size: auto, 640px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 50%, #000), inset 0 0 36px rgba(0, 0, 0, .5), 0 14px 24px -14px #000; transition: transform .18s, filter .18s; }
.cw-kind-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 3; }
.cw-kc-art { position: absolute; right: -6px; bottom: -10px; width: 150px; height: 150px; opacity: .24; filter: drop-shadow(0 6px 8px #000); pointer-events: none; transition: opacity .2s, transform .3s; } .cw-kc-art .cwi { width: 100%; height: 100%; }
.cw-kc-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 7px; padding: 22px 24px; min-width: 0; }
.cw-kc-body b { font: 800 1.8rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--kc); text-shadow: 0 3px 0 #000, 0 0 22px color-mix(in srgb, var(--kc) 40%, transparent); }
.cw-kc-body small { font: 900 1.15rem/1 var(--label); letter-spacing: .1em; color: #fff; } .cw-kc-body em { font-style: normal; font-size: .84rem; color: #d9c7b2; }
.cw-kc-why, .cw-why { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; color: var(--cw-warn); } .cw-kc-why .cwi, .cw-why .cwi, .cw-why .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cw-kc-chosen { position: absolute; z-index: 4; top: 14px; right: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 8px; font: 900 .66rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #170f08;
  background: linear-gradient(180deg, #f6e2b0, #d9ad5c); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); opacity: 0; scale: .6; transition: opacity .2s, scale .3s cubic-bezier(.2, 1.8, .4, 1); } .cw-kc-chosen .ic { width: 13px; height: 13px; }
.cw-kind-card:hover:not(.is-off) { transform: translateY(-3px); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--kc) 55%, transparent)); } .cw-kind-card:hover:not(.is-off) .cw-kc-art { opacity: .42; transform: rotate(-6deg) scale(1.06); }
.cw-kind-card:has(input:checked) { box-shadow: inset 0 0 0 3px var(--kc), inset 0 0 36px rgba(0, 0, 0, .5), 0 0 34px -8px var(--kc); background: linear-gradient(135deg, color-mix(in srgb, var(--kc) 34%, #2a1e15), #120c08 78%), var(--cw-tex-paper); background-size: auto, 640px; }
.cw-kind-card:has(input:checked) .cw-kc-chosen { opacity: 1; scale: 1; } .cw-kind-card:has(input:checked) .cw-kc-art { opacity: .5; }
.cw-kind-card:has(input:focus-visible) { outline: 2px solid var(--cw-ember); outline-offset: 3px; } .cw-kind-card.is-off { cursor: not-allowed; opacity: .6; filter: grayscale(.7); }
.cw-sizes { margin: 0 0 10px; } .cw-size-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cw-size { position: relative; display: inline-flex; cursor: pointer; } .cw-size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 2; }
.cw-size span { display: grid; place-items: center; min-width: 108px; padding: 16px 20px 28px; font: 800 1.8rem/1 var(--display); color: #fff; text-shadow: 0 2px 0 #000; background: linear-gradient(180deg, #4a3624, #2a1c12 70%, #160e08);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); filter: drop-shadow(0 6px 6px #000); transition: transform .18s, filter .18s; }
.cw-size:hover:not(.is-off) span { transform: translateY(-3px); filter: drop-shadow(0 6px 6px #000) drop-shadow(0 0 12px var(--kc)); }
.cw-size:has(input:checked) span { color: #1d0900; text-shadow: 0 1px 0 rgba(255, 236, 200, .4); background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 55%, #fff), var(--kc) 60%, color-mix(in srgb, var(--kc) 55%, #000)); filter: drop-shadow(0 6px 6px #000) drop-shadow(0 0 16px var(--kc)); }
.cw-size:has(input:focus-visible) span { outline: 2px solid var(--cw-ember); outline-offset: 3px; } .cw-size.is-off { cursor: not-allowed; opacity: .4; }

/* the rules on vellum: pale old paper in a burnt frame, ink on it */
.cw-rules-block { margin: 0 0 14px; }
.cw-rules-text { max-height: 380px; overflow: auto; padding: 14px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 1rem/1.7 Georgia, "Palatino Linotype", "Book Antiqua", serif; color: #2a1a0c;
  border: 16px solid transparent; border-image: var(--cw-burn-l) 48 / 16px round; background: var(--cw-paper-lt-tone) var(--cw-tex-paper-lt) center / 640px padding-box; box-shadow: 0 10px 20px -10px #000; scrollbar-width: thin; scrollbar-color: #8a5a2c #e8d5a4; }
.cw-rules-text:focus-visible { outline: 2px solid var(--cw-ember); outline-offset: 2px; }
/* the oath: a wax seal you press */
.cw-agree { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 18px; cursor: pointer; font-weight: 700; background: linear-gradient(90deg, rgba(232, 137, 46, .16), rgba(0, 0, 0, .22)); box-shadow: inset 0 0 0 1px rgba(232, 160, 90, .45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.cw-agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cw-seal { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #5a4632, #1a1008 70%); box-shadow: inset 0 0 0 2px #8a6a3c, 0 4px 6px rgba(0, 0, 0, .7); transition: background .3s, box-shadow .3s, transform .3s; }
.cw-seal .cwi { width: 30px; height: 30px; opacity: .3; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.cw-agree:has(input:checked) .cw-seal { background: radial-gradient(circle at 36% 30%, #d0584a, #962a20 55%, #4a0e0a); box-shadow: inset 0 0 0 2px #f0a090, 0 0 20px rgba(214, 90, 78, .7), 0 4px 6px rgba(0, 0, 0, .7); transform: rotate(-12deg) scale(1.06); }
.cw-agree:has(input:checked) .cw-seal .cwi { opacity: 1; filter: none; } .cw-agree:has(input:focus-visible) .cw-seal { outline: 2px solid var(--cw-ember); outline-offset: 3px; }
.cw-summary h3 { margin: 0 0 12px; font: 800 1.15rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw-summary ul { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.cw-summary li { display: flex; gap: 12px; align-items: flex-start; } .cw-summary li .cwi { width: 28px; height: 28px; flex: none; margin-top: -1px; filter: drop-shadow(0 2px 3px #000); }
.cw-stakes { margin: 0 0 8px; padding: 10px 14px; font-size: .92rem; border-radius: 3px; background: rgba(0, 0, 0, .38); box-shadow: inset 4px 0 0 var(--kc); }
.cw-pick { min-height: 1.4em; margin: 0 0 14px; font-weight: 800; color: var(--cw-gold); }
.cw-summary .btn-lg { width: 100%; max-width: 420px; }

/* ---------------------------------------------------------------- the rules editor and the new-crew form */
.cw-rules-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cw-rules-edit textarea, .cw-newform textarea { width: 100%; min-height: 240px; resize: vertical; padding: 14px 16px; font: 500 .98rem/1.65 Georgia, "Palatino Linotype", "Book Antiqua", serif; color: #2a1a0c;
  border: 16px solid transparent; border-image: var(--cw-burn-l) 48 / 16px round; border-radius: 0; background: var(--cw-paper-lt-tone) var(--cw-tex-paper-lt) center / 640px padding-box; box-shadow: none; }
.cw .cw-rules-edit textarea:focus, .cw .cw-newform textarea:focus { box-shadow: 0 0 0 2px var(--cw-fire-2), 0 0 22px -4px rgba(255, 120, 30, .7); }
.cw-rules-edit textarea::placeholder, .cw-newform textarea::placeholder { color: #8a7348; }
.cw-ideas { color: var(--text-soft); }
.cw-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 10px; padding: 18px 24px; }
.cw-savebar p { margin: 0; flex: 1 1 260px; color: var(--text-soft); font-size: .9rem; }
.cw-newform { display: grid; gap: 22px; max-width: 980px; }
.cw-rules-form .cw-panel, .cw-newform .cw-panel { margin-bottom: 0; }

/* ---------------------------------------------------------------- the guide */
.cw-twocards .cw-card p { margin: 0 0 8px; color: var(--text-soft); line-height: 1.55; } .cw-twocards .cw-card p.cw-bigmode { color: #fff; }
.cw-guide-note { margin: 12px 0 0; color: var(--muted); }

@media (max-width: 1100px) { .cw-rules-edit { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .cw-kinds { grid-template-columns: 1fr; } .cw-flowhead { grid-template-columns: 1fr 1fr; } .cw-fh-vs { grid-column: 1 / -1; grid-row: 2; flex-direction: row; justify-content: center; }
  .cw-stepper li span { display: none; } .cw-stepper li > b { width: 44px; height: 44px; } .cw-stepper::after { top: 20px; }
}
@media (max-width: 560px) { .cw-flowhead { grid-template-columns: 1fr; } .cw-fh-vs { grid-row: auto; grid-column: auto; } .cw-seal { width: 44px; height: 44px; } .cw-size span { min-width: 88px; font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .cw-stepper li.is-now > b, .cw-kind-card, .cw-kc-art, .cw-size span, .cw-seal { animation: none; transition: none; } }