/* =====================================================================================================================
   Crew Wars, the kit: scorched old paper in nine-slice burnt frames, engraved lettering, painted heraldry, aged buttons, tattered banners,
   the charred-timber navigation. Every page of the section is built from these. Page layouts live in cw-pages.css, motion in cw-fx.css.
   Rule of thumb for the palette: aged gold is for titles and trim, ember is for action and live things, oxblood and sea-steel belong to the two sides of a war.
   ===================================================================================================================== */

.cw { min-width: 0; color: var(--text); }
.cw a { text-underline-offset: 3px; }
.cw :focus-visible, .cw-rail :focus-visible { outline: 2px solid var(--cw-ember); outline-offset: 2px; }
.cw-muted { color: var(--muted); }
.cw p { margin-top: 0; }
.cwi { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; overflow: visible; }
.cw .ic, .cw-rail .ic { flex: none; }

/* ---------------------------------------------------------------- the shared frame: a sheet of old paper
   ::before is the paper (a dark vellum tile, scorched darker towards the edges), ::after is the burnt edge: a nine-slice image drawn over the rim, ragged and charred,
   transparent outside the burn. The element itself is never clipped, so menus and focus rings can overflow it. */
:is(.cw-panel, .cw-card, .cw-stand, .cw-step, .cw-rules-card, .cw-ladder, .cw-crewbar, .cw-alert, .cw-locked, .cw-filters, .cw-war, .cw-empty, .cw-savebar, .cw-tower-plate, .cw-rail .box, .cw-steps li) {
  --bw: 16px; --bi: 12px; --burn: var(--cw-burn-1); position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; filter: drop-shadow(0 14px 13px rgba(0, 0, 0, .5));
}
:is(.cw-panel, .cw-card, .cw-stand, .cw-step, .cw-rules-card, .cw-ladder, .cw-crewbar, .cw-alert, .cw-locked, .cw-filters, .cw-war, .cw-empty, .cw-savebar, .cw-tower-plate, .cw-rail .box, .cw-steps li)::before {
  content: ""; position: absolute; inset: var(--bi); z-index: -2; pointer-events: none; clip-path: none; background-color: var(--cw-paper-tone);
  background-image: radial-gradient(120% 80% at 16% 0%, rgba(255, 168, 90, .09), transparent 62%), var(--cw-tex-paper); background-size: auto, 640px;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(0, 0, 0, .3);
}
:is(.cw-panel, .cw-card, .cw-stand, .cw-step, .cw-rules-card, .cw-ladder, .cw-crewbar, .cw-alert, .cw-locked, .cw-filters, .cw-war, .cw-empty, .cw-savebar, .cw-tower-plate, .cw-rail .box, .cw-steps li)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: none; background: none; box-shadow: none; border: var(--bw) solid transparent; border-image: var(--burn) 48 / var(--bw) round;
}
.cw-card, .cw-war, .cw-step, .cw-alert, .cw-rail .box, .cw-steps li { --burn: var(--cw-burn-2); }
.cw-stand, .cw-ladder, .cw-crewbar, .cw-locked, .cw-empty { --burn: var(--cw-burn-3); }
.cw-war, .cw-filters, .cw-alert, .cw-empty, .cw-savebar, .cw-steps li, .cw-rail .box { --bw: 14px; --bi: 10px; }
/* rows and chips are a thinner scrap of the same paper */
:is(.cw-row, .cw-lrow, .cw-facts li, .cw-newcrews a, .cw-ready li, .cw-list li) { --bw: 8px; --bi: 6px; position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .5)); }
:is(.cw-row, .cw-lrow, .cw-facts li, .cw-newcrews a, .cw-ready li, .cw-list li)::before {
  content: ""; position: absolute; inset: var(--bi); z-index: -2; pointer-events: none; background-color: var(--cw-paper-tone);
  background-image: linear-gradient(90deg, rgba(255, 168, 90, .07), transparent 55%), var(--cw-tex-paper); background-size: auto, 640px; box-shadow: inset 0 0 26px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
:is(.cw-row, .cw-lrow, .cw-facts li, .cw-newcrews a, .cw-ready li, .cw-list li)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: var(--bw) solid transparent; border-image: var(--cw-burn-r) 24 / var(--bw) round;
}
/* a side's colour or the mode's colour inks the top edge of the sheet */
:is(.cw-panel, .cw-card, .cw-stand, .cw-rules-card, .cw-ladder).k-regular::before, :is(.cw-panel, .cw-card, .cw-stand, .cw-rules-card, .cw-ladder).k-pub::before {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--kc) 24%, transparent), transparent 42%), radial-gradient(120% 80% at 16% 0%, rgba(255, 168, 90, .07), transparent 62%), var(--cw-tex-paper);
  background-size: auto, auto, 640px; box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--kc) 62%, transparent), inset 0 0 46px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(0, 0, 0, .3); }
.cw-panel.danger::before { background-image: linear-gradient(180deg, rgba(190, 50, 30, .3), transparent 50%), var(--cw-tex-paper); background-size: auto, 640px; box-shadow: inset 0 3px 0 0 #c4443a, inset 0 0 46px rgba(0, 0, 0, .62); }
.cw-alert::before, .cw-locked::before, .cw-savebar::before { background-image: linear-gradient(90deg, rgba(232, 137, 46, .26), transparent 60%), var(--cw-tex-paper); background-size: auto, 640px; box-shadow: inset 3px 0 0 0 #d9873a, inset 0 0 46px rgba(0, 0, 0, .6); }
.cw-alert.tone-gold::before { background-image: linear-gradient(90deg, rgba(217, 173, 92, .26), transparent 60%), var(--cw-tex-paper); box-shadow: inset 3px 0 0 0 #d9ad5c, inset 0 0 46px rgba(0, 0, 0, .6); }
.cw-row.is-me::before, .cw-lrow.is-me::before, .cw-lrow.r1::before { background-image: linear-gradient(90deg, rgba(217, 173, 92, .26), transparent 70%), var(--cw-tex-paper); box-shadow: inset 3px 0 0 0 #d9ad5c, inset 0 0 26px rgba(0, 0, 0, .5); }
.cw-ready li.ok::before { box-shadow: inset 3px 0 0 0 var(--cw-win), inset 0 0 26px rgba(0, 0, 0, .5); }
.cw-ready li.bad::before { box-shadow: inset 3px 0 0 0 var(--cw-warn), inset 0 0 26px rgba(0, 0, 0, .5); }
/* vellum plates: the rules scroll, anything marked parchment (dark ink on pale old paper) */
.cw-parch, .cw-rules-card.is-parch { --burn: var(--cw-burn-l); color: var(--cw-ink); }
.cw-parch::before, .cw-rules-card.is-parch::before { background-color: var(--cw-paper-lt-tone); background-image: var(--cw-tex-paper-lt); background-size: 640px; box-shadow: inset 0 0 46px rgba(110, 66, 20, .45); }

/* ---------------------------------------------------------------- lettering: engraved serif capitals */
.cw-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 .8rem/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--cw-fire-2); text-shadow: 0 1px 0 #000; }
.cw-kicker::before { content: ""; width: 8px; height: 8px; rotate: 45deg; background: linear-gradient(135deg, #f6e2b0, #b88a46 55%, #5a3e14); box-shadow: 0 0 0 1px #170f05, 0 0 10px rgba(217, 173, 92, .5); }
.cw-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; font-size: .66rem; color: #fff1dc; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); background: linear-gradient(180deg, #d4551f, #8e2a0c); box-shadow: 0 0 14px rgba(255, 90, 30, .45), inset 0 1px 0 rgba(255, 220, 180, .3); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.cw-live::before { display: none; }
.cw-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff3d6; animation: cw-blink 1.2s ease-in-out infinite; }
/* titles: bone-white capitals, the emphasised word is white-hot metal in the fire */
.cw-h1, .cw-title { margin: 0 0 8px; font: 800 clamp(2rem, 4.2vw, 3.2rem)/1.02 var(--display); letter-spacing: .06em; text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, #fff6e0 0%, #efdcb2 38%, #bda070 70%, #7a6340 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #120a05) drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.cw-h1 em, .cw-title em { font-style: normal; background: linear-gradient(180deg, #fff0c4 0%, #ffc060 32%, #f0802a 64%, #b8400c 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #3a1200) drop-shadow(0 0 18px rgba(255, 120, 30, .4)); animation: cw-fireglow 3.4s ease-in-out infinite alternate; }
html[data-theme="white"] .cw-h1, html[data-theme="white"] .cw-title { background: linear-gradient(100deg, #3a2c1c, #6a5436 40%, #2e2216); -webkit-background-clip: text; background-clip: text; filter: none; animation: none; }
html[data-theme="white"] :is(.cw-hero, .cw-warhead, .cw-crewhead, .cw-flowhead) .cw-title { background: linear-gradient(180deg, #fff6e0 0%, #efdcb2 38%, #bda070 70%, #7a6340 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #120a05) drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
html[data-theme="white"] .cw-h1 em, html[data-theme="white"] .cw-title em { background: linear-gradient(180deg, #d4682a, #a63f05); -webkit-background-clip: text; background-clip: text; filter: none; }
.cw-lead { max-width: 64ch; margin: 0; color: var(--text-soft); font-size: 1.04rem; line-height: 1.6; }
.cw-page-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 24px; padding: 6px 4px 22px; }
.cw-page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(135deg, #f6e2b0, #b88a46) center / 8px 8px no-repeat, linear-gradient(90deg, transparent, rgba(217, 173, 92, .5) 12% 88%, transparent) center / 100% 1px no-repeat; }
.cw-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; font: 800 .75rem/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: linear-gradient(180deg, #4a3624, #241811);
  box-shadow: inset 0 0 0 1px #8a6a3c, inset 0 1px 0 rgba(255, 220, 160, .12); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); }
.cw-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cw-label { display: block; margin: 0 0 6px; font: 800 .78rem/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cw-req { font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--cw-fire-2); }
.cw-counter { margin: 4px 0 0; text-align: right; font-size: .78rem; color: var(--muted); } .cw-counter.is-near { color: var(--cw-warn); } .cw-counter.is-full { color: var(--cw-lose); }
.cw-crumbs { display: flex; gap: 8px; margin: 0 0 12px; font-size: .84rem; color: var(--muted); } .cw-crumbs a { color: var(--cw-fire-2); }
.cw-count-line { margin: 0 0 10px; color: var(--muted); font-size: .9rem; } .cw-count-line b { color: var(--text); }

/* ---------------------------------------------------------------- sections and panels */
.cw-sec { margin: 0 0 30px; min-width: 0; }
.cw-sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.cw-sec-head h2, .cw-panel h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 clamp(1.05rem, 1.8vw, 1.35rem)/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #f6e9cc; text-shadow: 0 2px 0 #0a0603, 0 0 16px rgba(217, 173, 92, .14); }
.cw-sec-head h2 { flex: 1; min-width: 0; }
.cw-sec-head h2 .cwi, .cw-panel h2 .cwi, .cw-sec-head h2 .ic, .cw-panel h2 .ic { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
/* a thread of brass running out from the title, ending in a diamond */
.cw-sec-head h2::after { content: ""; flex: 1; min-width: 40px; height: 8px; margin-left: 4px; background: linear-gradient(90deg, rgba(217, 173, 92, .7), rgba(217, 173, 92, 0)) left 3px / 100% 1px no-repeat, linear-gradient(135deg, #f6e2b0, #8a6420) left 0 / 8px 8px no-repeat; opacity: .9; }
.cw-sec-head a { flex: none; font: 800 .8rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--cw-fire-2); text-decoration: none; padding: 6px 2px; border-bottom: 1px solid rgba(217, 173, 92, .35); }
.cw-sec-head a:hover { color: #fff; border-bottom-color: var(--cw-gold); text-shadow: 0 0 12px rgba(217, 173, 92, .7); }
.cw-panel { margin: 0 0 22px; padding: clamp(22px, 2.8vw, 32px); min-width: 0; }
.cw-panel h2 { margin-bottom: 12px; }
.cw-panel h3 { margin: 18px 0 8px; font: 800 .78rem/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.cw-alert { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 22px 26px; }
.cw-alert > .cwi, .cw-alert > .ic { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 4px #000); }
.cw-alert > div { flex: 1; min-width: 0; } .cw-alert b { display: block; margin-bottom: 3px; font: 800 1.05rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff1d4; }
.cw-alert p { margin: 0; color: var(--text-soft); font-size: .92rem; }
.cw-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 24px; text-align: center; }
.cw-empty > .cwi { width: 58px; height: 58px; opacity: .85; filter: drop-shadow(0 4px 6px #000); }
.cw-empty b { font: 800 1.15rem/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff1d4; } .cw-empty p { margin: 0 0 6px; max-width: 46ch; color: var(--muted); }
.cw-empty-filter { padding: 18px; text-align: center; color: var(--muted); }
.cw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cw-list li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; }
.cw-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; color: var(--muted); }

/* ---------------------------------------------------------------- buttons: brass-framed dark leather, a molten face for the one thing to do */
.cw .btn, .cw-rail .btn, .cw-moment .btn {
  --bc: 9px; --b-frame: linear-gradient(180deg, #d9b878, #8a6424 48%, #3e2a10); --b-fill: linear-gradient(180deg, #4a3624, #2c1f15 52%, #1a110a); --b-ink: #f6e9cc;
  font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-shadow: 0 1px 0 #000;
}
.cw .btn::after, .cw-rail .btn::after, .cw-moment .btn::after { box-shadow: inset 0 1px 0 rgba(255, 224, 170, .22), inset 0 -2px 0 rgba(0, 0, 0, .4); }
.cw .btn:where(:not(.hero-cta)):hover, .cw .btn:where(:not(.hero-cta)):focus-visible, .cw-rail .btn:where(:not(.hero-cta)):hover, .cw-rail .btn:where(:not(.hero-cta)):focus-visible {
  --b-frame: linear-gradient(180deg, #f6e2b0, #d9ad5c 48%, #7a5418); --b-fill: linear-gradient(180deg, #5c4430, #382818 52%, #22160d); --b-ink: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); filter: drop-shadow(0 0 10px rgba(217, 173, 92, .4)); }
.cw .btn-primary:where(:not(.hero-cta)), .cw-rail .btn-primary:where(:not(.hero-cta)), .cw-moment .btn-primary:where(:not(.hero-cta)) {
  --b-frame: linear-gradient(180deg, #ffe2a6, #f2a850 42%, #8a4410 78%, #321606); --b-fill: linear-gradient(180deg, #f2a858, #d9742a 46%, #b04a14 80%, #8a3408); --b-ink: #1f0e02; text-shadow: 0 1px 0 rgba(255, 226, 180, .5);
  animation: cw-molten 3.6s ease-in-out infinite alternate; }
.cw .btn-primary:where(:not(.hero-cta)):hover, .cw .btn-primary:where(:not(.hero-cta)):focus-visible, .cw-rail .btn-primary:where(:not(.hero-cta)):hover { --b-fill: linear-gradient(180deg, #ffbd6a, #ec8634 46%, #c45a1a 80%, #9a3e0a); --b-ink: #170a00; filter: brightness(1.06) drop-shadow(0 0 14px rgba(255, 130, 30, .6)); }
.cw .btn-ghost:where(:not(.hero-cta)) { --b-frame: linear-gradient(180deg, #cdbd9c, #7c6a48 50%, #34281a); --b-fill: linear-gradient(180deg, rgba(46, 34, 24, .96), rgba(20, 14, 9, .98)); --b-ink: #f2e6cc; }
.cw .btn-danger:where(:not(.hero-cta)) { --b-frame: linear-gradient(180deg, #e8a49a, #b0382c 55%, #4a0f08); --b-fill: linear-gradient(180deg, #5a1a14, #2a0a07); --b-ink: #ffd6cf; }
.cw .btn-discord:where(:not(.hero-cta)) { --b-frame: linear-gradient(180deg, #d4d9ff, #6f7bff 50%, #2a3199); --b-fill: linear-gradient(180deg, #6f7bf0, #4752d4 60%, #2e3699); --b-ink: #fff; font-family: var(--label); letter-spacing: .08em; }
.cw .btn .cwi, .cw .btn .ic { width: 1.2em; height: 1.2em; }
.cw .btn:where(:not(.btn-sm):not(.btn-xs)), .cw-rail .btn:where(:not(.btn-sm):not(.btn-xs)) { min-height: 48px; padding: 12px 22px; font-size: .95rem; }
.cw .btn-sm:where(:not(.hero-cta)), .cw-rail .btn-sm:where(:not(.hero-cta)) { min-height: 36px; font-size: .8rem; }
.cw-moment .btn-lg, .cw .btn-lg { letter-spacing: .14em; }

/* ---------------------------------------------------------------- heraldry: a painted heater shield for every crew, with its own field, division and charge */
.cw-crest { --s: 44px; position: relative; display: inline-block; flex: none; width: var(--s); height: calc(var(--s) * 1.1875); color: #fff; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
.cw-crest > svg.cw-shield { display: block; width: 100%; height: 100%; overflow: visible; }
.cw-shield .sh-frame { fill: url(#cwg-steel); } .cw-shield .sh-rim { fill: none; stroke: rgba(0, 0, 0, .6); stroke-width: 1; } .cw-shield .sh-lit { fill: none; stroke: rgba(255, 236, 200, .32); stroke-width: .8; }
.cw-shield .f1 { fill: var(--f1); } .cw-shield .f2 { fill: var(--f2); } .cw-shield .sh-gloss { fill: url(#cwg-gloss); }
.cw-shield .sh-charge { filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .6)); }
.cw-crest.is-gold .sh-frame { fill: url(#cwg-gold); }
.hf0 { --f1: #922a2c; --f2: #521318; } .hf1 { --f1: #2d5382; --f2: #17304f; } .hf2 { --f1: #2f6a46; --f2: #173a28; } .hf3 { --f1: #4c4a50; --f2: #1c1b20; } .hf4 { --f1: #5e3c7c; --f2: #301e44; } .hf5 { --f1: #b4721f; --f2: #6c3d0e; }
/* a crew with an uploaded crest keeps its picture, set in the same pewter shield */
.cw-crest.has-img { padding: calc(var(--s) * .055) calc(var(--s) * .065) calc(var(--s) * .08); background: linear-gradient(150deg, #f0e8d6, #9a9080 36%, #4a4338 70%, #b8ad98); clip-path: url(#cw-shield-clip); }
.cw-crest.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0a08; clip-path: url(#cw-shield-clip); }
.cw-crest.has-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgba(255, 240, 210, .22), transparent 42%); clip-path: url(#cw-shield-clip); }
.cw-crest-sm { --s: 28px; } .cw-crest-md { --s: 44px; } .cw-crest-lg { --s: 62px; } .cw-crest-xl { --s: 88px; } .cw-crest-xxl { --s: 118px; }
.cw-crest-empty .sh-frame { fill: url(#cwg-iron); }
.cw-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; } .cw-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cw-who:hover b { color: var(--cw-ember); }
.cw-rank { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; font-size: .76rem; background: linear-gradient(180deg, #2c2016, #150f0a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 50%, #000); border-radius: 2px; }
.cw-rank b { padding: 4px 11px 4px 8px; font: 900 .62rem/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: #170f08; background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 70%, #fff), var(--kc)); clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); margin-right: -4px; }
.cw-rank i { padding: 0 6px 0 9px; font-style: normal; font-weight: 900; color: #fff1d4; } .cw-rank em { padding: 0 9px 0 0; font-style: normal; font-weight: 800; color: #d6c6a4; }
.cw-rank.is-un b { background: linear-gradient(180deg, #9a8e78, #5a5040); } .cw-rank.is-un em { padding-left: 9px; color: var(--muted); font-weight: 700; }
.cw-flag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; font: 800 .66rem/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .1); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.cw-flag .ic, .cw-flag .cwi { width: 12px; height: 12px; } .cw-flag.on { color: var(--cw-win); background: rgba(124, 195, 134, .1); box-shadow: inset 0 0 0 1px rgba(124, 195, 134, .35); }
.cw-medal { --mc: #9a8e78; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 800 1rem/1 var(--cw-serif); color: #170f08; text-shadow: 0 1px 0 rgba(255, 236, 200, .4);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mc) 62%, #fff) 0 52%, var(--mc) 53% 70%, color-mix(in srgb, var(--mc) 55%, #000) 71%); box-shadow: 0 0 0 2px #0b0806, 0 4px 6px rgba(0, 0, 0, .6); }
.cw-medal::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: repeating-conic-gradient(var(--mc) 0 6deg, color-mix(in srgb, var(--mc) 50%, #000) 6deg 12deg); -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63%); mask: radial-gradient(circle, transparent 0 62%, #000 63%); z-index: -1; }
.cw-medal.m1 { --mc: #d9ad5c; box-shadow: 0 0 0 2px #0b0806, 0 0 18px rgba(217, 173, 92, .6); } .cw-medal.m2 { --mc: #b8b0a2; } .cw-medal.m3 { --mc: #b07a4a; }
.cw-form { display: inline-flex; gap: 3px; }
.cw-form i { display: grid; place-items: center; width: 19px; height: 19px; font: 900 .62rem/1 var(--label); font-style: normal; color: #0a1208; clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); padding-bottom: 3px; }
.cw-form .f-w { background: linear-gradient(180deg, #98cf9e, #3f8a52); } .cw-form .f-l { background: linear-gradient(180deg, #e0988c, #a8382c); color: #fff; }

/* ---------------------------------------------------------------- form fields: sunk into dark leather, a brass ring on focus */
.cw input[type="search"], .cw input[type="text"], .cw input[type="url"], .cw input[type="number"], .cw input:not([type]), .cw select, .cw textarea {
  color: var(--text); background: linear-gradient(180deg, #0c0805, #1a110b); border: 1px solid #6a5238; border-radius: 3px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 224, 170, .06); }
.cw input:focus, .cw select:focus, .cw textarea:focus { outline: none; border-color: var(--cw-gold); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(217, 173, 92, .45), 0 0 18px -4px rgba(217, 173, 92, .6); }
html[data-theme="white"] .cw input, html[data-theme="white"] .cw select, html[data-theme="white"] .cw textarea { color: #2a1a0c; background: linear-gradient(180deg, #fff8e8, #efdfbd); border-color: #8d7a52; box-shadow: inset 0 2px 5px rgba(120, 80, 30, .25); }
.cw .field > span { font: 800 .78rem/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw .flash { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }

/* ---------------------------------------------------------------- the fuse: how long is left, drawn as a burning rope */
.cw-meter { position: relative; display: block; height: 10px; overflow: visible; background: linear-gradient(180deg, #060403, #170f09); box-shadow: inset 0 0 0 1px #6a5238, inset 0 2px 4px #000; border-radius: 3px; }
.cw-meter i { position: relative; display: block; width: calc(var(--p, 0) * 1%); height: 100%; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #6a5238, #b89a68 30%, #ffc060 78%, #ff7a1f); background-size: 200% 100%; animation: cw-fuse 2.4s linear infinite; }
.cw-meter i::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0, #ffbb55 36%, rgba(255, 106, 20, .75) 56%, rgba(255, 90, 10, 0) 70%); animation: cw-pulse .9s ease-in-out infinite; }
.cw-meter.p0 i::after, .cw-meter.p100 i::after { display: none; }
.cw-meter.is-urgent i { background: linear-gradient(90deg, #8c1f06, #ff5a1f 40%, #ffd27a); animation-duration: 1s; }
.cw-meter.is-urgent { box-shadow: inset 0 0 0 1px #ff6a3a, inset 0 2px 4px #000, 0 0 14px rgba(255, 80, 30, .6); }
.cw-left { font-weight: 800; white-space: nowrap; color: var(--text-soft); } .cw-left-t { color: #fff; font-family: var(--label); letter-spacing: .04em; }
.cw-left.is-urgent, .cw-left.is-urgent .cw-left-t { color: #ff9a7a; }
.p0 { --p: 0; } .p5 { --p: 5; } .p10 { --p: 10; } .p15 { --p: 15; } .p20 { --p: 20; } .p25 { --p: 25; } .p30 { --p: 30; } .p35 { --p: 35; } .p40 { --p: 40; } .p45 { --p: 45; } .p50 { --p: 50; }
.p55 { --p: 55; } .p60 { --p: 60; } .p65 { --p: 65; } .p70 { --p: 70; } .p75 { --p: 75; } .p80 { --p: 80; } .p85 { --p: 85; } .p90 { --p: 90; } .p95 { --p: 95; } .p100 { --p: 100; }

/* ---------------------------------------------------------------- war cards: two armies, the clash between them, the fuse below */
.cw-wars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; } .cw-wars-1 { grid-template-columns: 1fr; }
.cw-war { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; transition: transform .2s ease, filter .2s ease; }
.cw-war::before { background-image: linear-gradient(90deg, rgba(196, 68, 58, .17), transparent 44% 56%, rgba(120, 162, 189, .17)), radial-gradient(120% 80% at 16% 0%, rgba(255, 168, 90, .07), transparent 62%), var(--cw-tex-paper); background-size: auto, auto, 640px; }
.cw-war:hover { transform: translateY(-4px); filter: drop-shadow(0 16px 20px rgba(255, 130, 40, .26)) drop-shadow(0 14px 13px rgba(0, 0, 0, .5)); }
.cw-war.is-urgent::before { box-shadow: inset 0 3px 0 0 #e8602a, inset 0 0 46px rgba(255, 80, 20, .24), inset 0 0 0 1px rgba(0, 0, 0, .3); animation: cw-urgent 1.8s ease-in-out infinite alternate; }
.cw-war-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 6px; }
.cw-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 9px; font: 900 .64rem/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #170f08; text-shadow: 0 1px 0 rgba(255, 236, 200, .3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 65%, #fff), var(--kc) 55%, color-mix(in srgb, var(--kc) 60%, #000)); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); }
.cw-kind b { font-size: .74rem; } .cw-kind .cwi { width: 15px; height: 15px; }
.cw-state { display: inline-flex; align-items: center; gap: 8px; font: 900 .64rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tone-live .cw-state { color: var(--cw-fire-2); } .tone-gold .cw-state { color: var(--cw-gold); } .tone-danger .cw-state { color: var(--cw-lose); }
.tone-done .cw-state { color: var(--cw-win); } .tone-forfeit .cw-state { color: #c4a6ff; } .tone-void .cw-state { color: var(--muted); }
.cw-needs { padding: 3px 10px 3px 8px; font-style: normal; color: #1d0900; background: linear-gradient(180deg, #f6e2b0, #e0b04a); clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%); animation: cw-beat 1.4s ease-in-out infinite; }
.cw-war-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 0 2px; }
.cw-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.cw-side > b { max-width: 100%; font: 800 .98rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; color: #f6e9cc; text-shadow: 0 2px 0 #000; }
.cw-side > b a { color: inherit; text-decoration: none; } .cw-side > b a:hover { color: var(--cw-ember); } .cw-side small { color: var(--muted); font-size: .74rem; }
.cw-side.is-mine > b::after { content: " (you)"; font: 700 .64rem/1 var(--label); letter-spacing: .08em; color: var(--cw-gold); }
.cw-side.is-winner .cw-crest, .won-a .side-a .cw-crest, .won-b .side-b .cw-crest { filter: drop-shadow(0 0 14px rgba(217, 173, 92, .85)) drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
.won-a .side-a::before, .won-b .side-b::before, .cw-side.is-winner::before { content: ""; position: absolute; top: -20px; left: 50%; width: 30px; height: 30px; translate: -50% 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 48 L10 18 L22 32 L32 12 L42 32 L54 18 L58 48 Z' fill='%23d9ad5c' stroke='%23120a05' stroke-width='2.4' stroke-linejoin='round'/%3E%3Crect x='6' y='46' width='52' height='9' rx='2' fill='%23b88a46' stroke='%23120a05' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px #000); z-index: 2; }
.won-a .side-b .cw-crest, .won-b .side-a .cw-crest { filter: grayscale(.85) brightness(.62) drop-shadow(0 4px 5px rgba(0, 0, 0, .65)); }
.cw-crown { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 8px; font: 900 .66rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #2a1c06; background: linear-gradient(180deg, #f6e2b0, #d9ad5c); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.cw-crown .cwi, .cw-crown .ic { width: 15px; height: 15px; }
/* the clash: crossed swords on a dark roundel, sparks when you hover the card */
.cw-vs { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.cw-vs span { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 38%, #4a3626, #120c07 74%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); box-shadow: inset 0 0 0 2px #b88a46; }
.cw-vs span .cwi { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px #000); }
.cw-vs::before { content: ""; position: absolute; inset: -4px; background: linear-gradient(180deg, #e0c88a, #6a4a1a); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); z-index: -1; }
.cw-vs::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 12px 6px #ffb347, 12px -10px 0 -2px #ffd27a, -12px -8px 0 -2px #ffd27a, 10px 12px 0 -3px #ff9a1f, -10px 11px 0 -3px #ff9a1f; }
.cw-war:hover .cw-vs::after, .cw-warhead .cw-vs::after { animation: cw-spark 2.6s ease-out infinite; }
.cw-war:hover .cw-vs span .cwi { animation: cw-clash .5s ease-in-out infinite alternate; }
.cw-war-foot { display: flex; align-items: center; gap: 12px; min-height: 22px; padding-inline: 6px; font-size: .84rem; } .cw-war-foot .cw-meter { flex: 1; }
.cw-note { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); } .cw-note .cwi, .cw-note .ic { width: 18px; height: 18px; flex: none; }
.cw-note.is-win { color: var(--cw-gold); } .cw-note.is-win b { color: var(--cw-win); }
.cw-war-link { position: absolute; inset: 0; z-index: 3; }

/* ---------------------------------------------------------------- the war cry (a ribbon of burnt crimson cloth across the page) and the dispatches ticker */
.cw-strip { position: relative; overflow: hidden; margin: 0 0 20px; padding: 19px 0; background: url("../img/cw/strip-red.webp?v=5f1b5f059b") 0 center / auto 100% repeat-x; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .6)); }
.cw-strip-track { position: relative; display: flex; width: max-content; animation: cw-marquee 46s linear infinite; }
.cw-strip:hover .cw-strip-track { animation-play-state: paused; }
.cw-strip span { display: inline-flex; align-items: center; flex: none; }
.cw-strip b { padding: 0 20px; font: 800 .84rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: #f6dca4; text-shadow: 0 1px 0 #2a060a, 0 0 10px rgba(255, 190, 110, .3); white-space: nowrap; }
.cw-strip i { display: inline-flex; } .cw-strip i .cwi { width: 22px; height: 22px; filter: drop-shadow(0 2px 2px #000) saturate(.6); }
.cw-ticker { display: flex; align-items: stretch; margin: 0 0 22px; overflow: hidden; border: 8px solid transparent; border-image: var(--cw-burn-r) 24 / 8px round; background: var(--cw-paper-tone) var(--cw-tex-paper) 0 0 / 640px padding-box; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .5)); }
.cw-tkhead { z-index: 2; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0 24px 0 14px; font: 800 .72rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #2a1a0c; background: linear-gradient(180deg, #ecdcb0, #bfa270);
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); margin-right: -8px; }
.cw-tkhead .cwi { width: 20px; height: 20px; }
.cw-tkwin { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cw-tktrack { display: flex; width: max-content; animation: cw-marquee 50s linear infinite; } .cw-ticker:hover .cw-tktrack { animation-play-state: paused; }
.cw-tk { display: inline-flex; align-items: center; gap: 8px; padding: 10px 26px; white-space: nowrap; font-size: .84rem; color: #e6d8bc; } .cw-tk b { color: #fff; } .cw-tk em { font-style: normal; color: var(--cw-gold); font-weight: 800; } .cw-tk small { color: #9a8a70; }
.cw-tk .cwi { width: 18px; height: 18px; } .cw-tk::after { content: "\25C6"; margin-left: 18px; color: rgba(217, 173, 92, .45); }
.cw-belt { display: flex; gap: 8px; margin: 0 0 20px; padding: 2px 2px 10px; overflow-x: auto; scrollbar-width: thin; }
.cw-belt a { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 7px 14px 7px 8px; color: #fff; text-decoration: none; font-size: .82rem; background: linear-gradient(180deg, #34261a, #1a120c); box-shadow: inset 0 0 0 1px #6a5238; border-radius: 3px; transition: transform .15s, box-shadow .15s; }
.cw-belt a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--cw-gold), 0 0 16px rgba(217, 173, 92, .35); }
.cw-belt b { font-weight: 800; } .cw-belt em { font-style: normal; font-weight: 900; color: var(--cw-ember); }
.cw-belt .cw-crest { --s: 26px; }

/* ---------------------------------------------------------------- navigation: the hold's beam on iron brackets, a tattered banner and charred boards hung on rope */
.cw-top { position: relative; margin: 0 0 18px; padding: 26px 0 14px; border: 1px solid #241810; border-top: 0; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgba(3, 2, 2, .6), rgba(3, 2, 2, .2) 55%, rgba(3, 2, 2, .55)), var(--cw-tex-planks) center / 460px; box-shadow: inset 0 -16px 26px -16px #000, 0 16px 26px -18px #000; }
.cw-beam { position: absolute; left: -1px; right: -1px; top: 0; height: 22px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 220, 160, .16), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5)), var(--cw-tex-planks) center / 300px; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .2), inset 0 -4px 0 rgba(0, 0, 0, .55), 0 8px 12px -4px rgba(0, 0, 0, .8); }
.cw-beam::before, .cw-beam::after { content: ""; position: absolute; top: -2px; width: 30px; height: 26px; background: linear-gradient(180deg, #5c5148, #2a241e 50%, #120f0c); box-shadow: inset 0 0 0 1.5px #0b0806, inset 0 1px 0 rgba(255, 236, 200, .18); clip-path: polygon(0 14%, 14% 0, 100% 0, 100% 100%, 14% 100%, 0 86%); }
.cw-beam::before { left: 0; } .cw-beam::after { right: 0; transform: scaleX(-1); }
.cw-beam i { position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e2d6c0, #6a6050 55%, #14100c); box-shadow: 0 1px 1px #000; }
.cw-beam i:nth-child(1) { left: 40px; } .cw-beam i:nth-child(2) { right: 40px; } .cw-beam i:nth-child(3) { left: 50%; } .cw-beam i:nth-child(4) { left: 25%; } .cw-beam i:nth-child(5) { left: 75%; }
.cw-hang { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: start; gap: 22px; padding: 0 22px; }
.cw-chains { position: absolute; left: 16px; right: 16px; top: -8px; height: 32px; pointer-events: none; }
.cw-chains::before, .cw-chains::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; background: url("../img/cw/rope.webp?v=1dd6b0e1e9") center top / 7px auto repeat-y; filter: drop-shadow(0 1px 1px #000); }
.cw-chains::before { left: 0; } .cw-chains::after { right: 0; }
/* the banner: crimson cloth, torn and singed, hung from the beam */
.cw-brand { position: relative; display: block; padding-top: 22px; text-decoration: none; color: #fff; }
.cw-cloth { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 14px 10px 28px; text-align: center; }
.cw-brand .cw-cloth { background: url("../img/cw/brand-red.webp?v=b1adc89ffd") center / 100% 100% no-repeat; padding: 22px 12px 34px; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .7)); }
.cw-brand-mark { display: block; width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); } .cw-brand-mark .cwi { width: 100%; height: 100%; }
.cw-brand-text { position: relative; display: flex; flex-direction: column; line-height: 1; } .cw-brand-text b { font: 800 1.2rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.cw-brand-text small { margin-top: 6px; font: 700 .64rem/1.4 var(--label); letter-spacing: .06em; text-transform: uppercase; color: #f3d6a4; }
.cw-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding: 0 0 8px; }
.cw-tabs a.cw-sign { position: relative; display: block; min-width: 0; padding-top: 22px; text-decoration: none; color: #f6e9cc; }
/* a charred board: weathered timber in a burnt frame, the lettering burnt in */
.cw-sign .cw-cloth { min-height: 88px; justify-content: center; gap: 6px; padding: 4px 2px 2px; border: 14px solid transparent; border-image: var(--cw-burn-w) 48 / 14px round; background: #2a1a10 var(--cw-tex-planks) center / 260px padding-box;
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, .8)); transition: transform .18s ease, filter .18s ease; }
.cw-sign .cwi, .cw-sign .ic { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); position: relative; z-index: 1; }
.cw-sign .t { position: relative; z-index: 1; font: 800 .95rem/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 #140a04, 0 0 8px rgba(0, 0, 0, .6); white-space: nowrap; }
.cw-sign:hover .cw-cloth { transform: translateY(2px); filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .9)) drop-shadow(0 0 14px rgba(217, 173, 92, .3)); }
.cw-sign.on .cw-cloth { background-image: linear-gradient(rgba(255, 140, 50, .3), rgba(255, 90, 20, .06) 80%), var(--cw-tex-planks); background-size: auto, 260px; filter: drop-shadow(0 0 16px rgba(255, 150, 50, .55)) drop-shadow(0 10px 9px rgba(0, 0, 0, .8)); }
.cw-sign.on .t { color: #ffe2a6; text-shadow: 0 2px 0 #3a1a02, 0 0 12px rgba(255, 190, 80, .7); }
.cw-sign-guide .cw-cloth, .cw-sign-guide.on .cw-cloth { border: 0; border-image: none; min-height: 96px; padding: 14px 8px 26px; background: url("../img/cw/brand-red.webp?v=b1adc89ffd") center / 100% 100% no-repeat; }
.cw-sign-guide.on .cw-cloth { filter: drop-shadow(0 0 16px rgba(255, 150, 50, .6)) drop-shadow(0 10px 9px rgba(0, 0, 0, .8)); }
.cw-count { position: absolute; z-index: 4; top: 12px; right: 6px; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; font: 900 .72rem/1 var(--label); font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, #e0584a, #8a1e18); box-shadow: 0 0 0 2px #0b0806, 0 0 12px rgba(255, 70, 50, .7); animation: cw-beat 1.4s ease-in-out infinite; }
/* the sound toggle sits on the right end of the beam, a brass boss with a horn on it */
.cw-tools { position: absolute; z-index: 5; right: 4px; top: -8px; margin: 0; }
.cw-sfx { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 0; border-radius: 50%; color: #3a2400;
  background: radial-gradient(circle at 35% 28%, #f0d79a, #b88a46 46%, #5a3e14); box-shadow: 0 0 0 2px #170f05, inset 0 -3px 5px rgba(90, 50, 6, .6), 0 6px 10px -2px #000; transition: transform .15s, filter .15s; }
.cw-sfx .cwi { width: 22px; height: 22px; } .cw-sfx .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cw-sfx:hover { transform: scale(1.08); } .cw-sfx[aria-pressed="false"] { filter: grayscale(.55) brightness(.8); } .cw-sfx[aria-pressed="true"] { filter: drop-shadow(0 0 10px rgba(255, 190, 70, .9)); }
html[data-theme="white"] .cw-brand, html[data-theme="white"] .cw-tabs a { color: #fff; }
html[data-theme="white"] .cw-top { background: linear-gradient(180deg, #f1dfc199, #e2c9a188), var(--cw-tex-paper-lt) center / 460px; border-color: #b69a6a; }

@media (max-width: 1250px) {
  .cw-hang { grid-template-columns: 148px minmax(0, 1fr); gap: 16px; padding: 0 14px; }
  .cw-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
}
@media (max-width: 640px) {
  .cw-hang { grid-template-columns: 1fr; gap: 10px; } .cw-brand { width: 172px; justify-self: center; } .cw-tabs { gap: 14px 10px; } .cw-sign .t { font-size: .72rem; }
}

/* ---------------------------------------------------------------- daylight: the same sheets as pale vellum, with ink instead of chalk */
html[data-theme="white"] :is(.cw-panel, .cw-card, .cw-stand, .cw-step, .cw-rules-card, .cw-ladder, .cw-crewbar, .cw-alert, .cw-locked, .cw-filters, .cw-war, .cw-empty, .cw-savebar, .cw-tower-plate, .cw-rail .box, .cw-steps li)::before,
html[data-theme="white"] :is(.cw-row, .cw-lrow, .cw-facts li, .cw-newcrews a, .cw-ready li, .cw-list li)::before {
  background-color: var(--cw-paper-lt-tone); background-image: radial-gradient(120% 80% at 16% 0%, rgba(255, 250, 238, .5), transparent 62%), var(--cw-tex-paper-lt); background-size: auto, 640px; box-shadow: inset 0 0 36px rgba(110, 66, 20, .4), inset 0 0 0 1px rgba(90, 50, 20, .3); }
html[data-theme="white"] :is(.cw-panel, .cw-card, .cw-stand, .cw-step, .cw-rules-card, .cw-ladder, .cw-crewbar, .cw-alert, .cw-locked, .cw-filters, .cw-war, .cw-empty, .cw-savebar, .cw-tower-plate, .cw-rail .box, .cw-steps li) { --burn: var(--cw-burn-l); }
html[data-theme="white"] :is(.cw-row, .cw-lrow, .cw-facts li, .cw-newcrews a, .cw-ready li, .cw-list li)::after { border-image-source: var(--cw-burn-rl); }
html[data-theme="white"] .cw-sec-head h2, html[data-theme="white"] .cw-panel h2, html[data-theme="white"] .cw-rail-h, html[data-theme="white"] .cw-side > b, html[data-theme="white"] .cw-row-who b,
html[data-theme="white"] .cw-empty b, html[data-theme="white"] .cw-alert b, html[data-theme="white"] .cw-steps h3, html[data-theme="white"] .cw-rail-crew b, html[data-theme="white"] .cw-crewbar-main h2,
html[data-theme="white"] .cw-tower b, html[data-theme="white"] .cw-timeline b { color: #2a1a0c; text-shadow: none; }
html[data-theme="white"] .cw-elo, html[data-theme="white"] .cw-bigelo, html[data-theme="white"] .cw-bigmode { color: #8f3205; text-shadow: none; }
html[data-theme="white"] .cw-lead, html[data-theme="white"] .cw-steps p, html[data-theme="white"] .cw-alert p, html[data-theme="white"] .cw-panel, html[data-theme="white"] .cw-war, html[data-theme="white"] .cw-row,
html[data-theme="white"] .cw-lrow, html[data-theme="white"] .cw-facts li, html[data-theme="white"] .cw-rail-war, html[data-theme="white"] .cw-rail-note { color: #3a2a14; }
html[data-theme="white"] .cw-row-who, html[data-theme="white"] .cw-who, html[data-theme="white"] .cw-rail-crew, html[data-theme="white"] .cw-rail-war { color: #2a1a0c; }
html[data-theme="white"] .cw-left-t, html[data-theme="white"] .cw-note { color: #2a1a0c; } html[data-theme="white"] .cw-rec { color: #3a2a14; }
html[data-theme="white"] .cw-sec-head a, html[data-theme="white"] .cw-kicker, html[data-theme="white"] .cw .field > span, html[data-theme="white"] .cw-select span { color: #a63f05; text-shadow: none; }
html[data-theme="white"] .cw-rail { --text: #2a1a0c; }
html[data-theme="white"] .cw-rail-war { background: rgba(255, 248, 232, .55); color: #2a1a0c; box-shadow: inset 4px 0 0 var(--cw-fire), inset 0 0 0 1px rgba(90, 50, 20, .25); }
html[data-theme="white"] .cw-rail-war small, html[data-theme="white"] .cw-rail-note, html[data-theme="white"] .cw-rail-foot { color: #5a4630; }
html[data-theme="white"] .cw-search { background: linear-gradient(180deg, #fff8e8, #efdfbd); box-shadow: inset 0 0 0 1px #8d7a52, inset 0 2px 5px rgba(120, 80, 30, .25); }
html[data-theme="white"] .cw-search input { color: #2a1a0c; }
html[data-theme="white"] .cw-row-who small, html[data-theme="white"] .cw-why, html[data-theme="white"] .cw-newcrews small { color: #6b5638; }
html[data-theme="white"] .cw-sign-guide.on .cw-cloth, html[data-theme="white"] .cw-sign-guide .cw-cloth { background: url("../img/cw/brand-red.webp?v=b1adc89ffd") center / 100% 100% no-repeat; }
html[data-theme="white"] .cw-rail-nav a { color: #f3e8da; }

/* ---------------------------------------------------------------- the icon set, weathered: a little less saturated and sun-bleached, so nothing looks like a sticker (filter on the <use>, so the drop-shadows around it stay) */
.cwi use, .cw-shield .sh-charge { filter: saturate(.74) sepia(.14) contrast(1.04); }
.cw-shield .sh-charge { filter: saturate(.74) sepia(.14) contrast(1.04) drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .6)); }

/* a crew's own logo is shown whole (never cropped to the middle) on a dark plate inside the shield, a little larger so it stays readable */
.cw-crest.has-img { padding: calc(var(--s) * .04) calc(var(--s) * .05) calc(var(--s) * .07); }
.cw-crest.has-img img { object-fit: contain; background: radial-gradient(circle at 50% 38%, #2a2118, #0b0a08 78%); }
.cw-crest.has-img::after { background: linear-gradient(150deg, rgba(255, 240, 210, .12), transparent 38%); }

/* the Manage Crew page: a row of jump links, burnt-paper chips */
.cw-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cw-jump a { padding: 7px 14px; font: 800 .74rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #f6e9cc; text-decoration: none; background: linear-gradient(180deg, rgba(74, 48, 28, .92), rgba(40, 24, 12, .94)); box-shadow: inset 0 0 0 1px rgba(217, 173, 92, .35), 0 3px 6px rgba(0, 0, 0, .5); }
.cw-jump a:hover { filter: brightness(1.2); }
.cw-sec[id], .cw-panel[id] { scroll-margin-top: 16px; }

/* a crew's logo fills more of its shield, and its banner cloth is dyed in the colours the captain picked for the crew */
.cw-crest.has-img { padding: calc(var(--s) * .03) calc(var(--s) * .04) calc(var(--s) * .06); }
.cw-flagpost[data-crew-id]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(var(--crew-tint-rgb)); mix-blend-mode: color; opacity: .88;
  -webkit-mask: url("../img/cw/banner-red.webp?v=75750afe30") center / 100% 100% no-repeat; mask: url("../img/cw/banner-red.webp?v=75750afe30") center / 100% 100% no-repeat; }

/* a crew's tiles take their emblem's colour: the burnt frame is dyed, and the paper gets a wash of it, so each tile matches its logo */
.cw-newcrews a { --bw: 10px; --bi: 3px; }
.cw-newcrews a[data-crew-id]::after, .cw-row[data-crew-id]::after { filter: var(--crew-icon-filter, none); }
.cw-newcrews a[data-crew-id]::before { background-image: linear-gradient(90deg, rgba(var(--crew-icon-rgb, 0, 0, 0), .34), transparent 78%), linear-gradient(90deg, rgba(255, 168, 90, .07), transparent 55%), var(--cw-tex-paper); background-size: auto, auto, 640px; }
.cw-row[data-crew-id]::before { background-image: linear-gradient(90deg, rgba(var(--crew-icon-rgb, 0, 0, 0), .22), transparent 40%), linear-gradient(90deg, rgba(255, 168, 90, .07), transparent 55%), var(--cw-tex-paper); background-size: auto, auto, 640px; }
.cw-row.is-me[data-crew-id]::before { background-image: linear-gradient(90deg, rgba(217, 173, 92, .26), transparent 70%), var(--cw-tex-paper); }