/* =====================================================================================================================
   Crew Wars, pages (1 of 3): the War Room hero, the Challenge roll of arms, the ladders and their hanging banners.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- the painted scenes: one oil painting of a sea fight, set into a burnt frame
   Every scene (hub, one war, a crew, the challenge flow) is built the same way: .cw-hero-sky is the painting, kept alive by slow light (firelight flicker,
   drifting mist, a slow push in) and, when the clip is there, by the video laid over it; the soot frame (burn-h) hides the straight edges. */
.cw-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 30px; align-items: center; margin: 0 0 28px; isolation: isolate; color: #fff;
  padding: clamp(40px, 4.4vw, 60px) clamp(34px, 3.6vw, 58px) clamp(48px, 4.8vw, 68px); background: #0a0705; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 70px -24px rgba(255, 130, 40, .4); }
.cw-hero::after, .cw-warhead::after, .cw-crewhead::after, .cw-flowhead::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 28px solid transparent; border-image: var(--cw-burn-h) 64 / 28px round; }
.cw-hero-sky { position: absolute; inset: 10px; z-index: -3; overflow: hidden; background: #0c0805; }
.cw-hero-sky > i { position: absolute; display: block; pointer-events: none; }
/* the painting, pushed in very slowly and drifting, so it never sits still */
.cw-s-art { inset: -5%; background: var(--cw-painting) var(--sx, 52%) var(--sy, 40%) / cover no-repeat; transform-origin: 62% 46%; animation: cw-push 90s ease-in-out infinite alternate; }
@keyframes cw-push { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.6%, -1%, 0); } }
.cw-hero-sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sx, 52%) var(--sy, 40%); opacity: 0; transition: opacity 1.6s ease; }
.cw-hero-sky video.on { opacity: 1; }
.cw-hero-sky:has(video.on) .cw-s-art { animation-play-state: paused; }
/* the fires in the painting breathe: warm light that swells and dies, never in step */
.cw-s-fire { inset: 0; mix-blend-mode: screen; background:
  radial-gradient(34% 40% at 70% 36%, rgba(255, 150, 50, .26), rgba(255, 100, 20, .07) 56%, transparent 74%),
  radial-gradient(26% 34% at 24% 70%, rgba(255, 120, 30, .18), transparent 70%),
  radial-gradient(30% 36% at 92% 62%, rgba(255, 90, 18, .22), transparent 72%); animation: cw-flicker 4.6s ease-in-out infinite alternate; }
@keyframes cw-flicker { 0% { opacity: .55; } 22% { opacity: 1; } 41% { opacity: .68; } 63% { opacity: .96; } 100% { opacity: .6; } }
/* smoke and sea mist rolling across the bottom third */
.cw-s-mist { left: -20%; right: -20%; bottom: -6%; height: 54%; filter: blur(22px); opacity: .55; background:
  radial-gradient(40% 55% at 18% 60%, rgba(180, 150, 120, .38), transparent 70%), radial-gradient(36% 50% at 56% 70%, rgba(150, 120, 96, .34), transparent 70%), radial-gradient(40% 55% at 88% 58%, rgba(190, 160, 130, .34), transparent 70%);
  animation: cw-mist 38s linear infinite alternate; }
@keyframes cw-mist { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }
/* shade: the left stays dark so the words read, the foot sinks into the frame, the corners fall away */
.cw-s-shade { inset: 0; background: linear-gradient(90deg, rgba(8, 5, 3, .84), rgba(8, 5, 3, .5) 34%, rgba(8, 5, 3, .08) 64%, transparent 84%), linear-gradient(0deg, rgba(8, 5, 3, .62), transparent 36%), radial-gradient(120% 110% at 56% 46%, transparent 58%, rgba(0, 0, 0, .5)); }
.cw-hero-embers { position: absolute; inset: 10px; z-index: -1; overflow: hidden; pointer-events: none; }
.cw-hero-embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff3d6, #ffb347 40%, rgba(255, 90, 10, 0) 72%);
  box-shadow: 0 0 calc(var(--s) * 2) rgba(255, 120, 30, .7); animation: cw-rise var(--t) linear var(--d) infinite; --o: .9; --dx: 30px; }
.cw-hero-body { position: relative; z-index: 1; min-width: 0; padding: 6px 0; }
.cw-title { margin: 0 0 14px; font-size: clamp(2.6rem, 4.6vw, 4.5rem); line-height: 1; }
.cw-title.is-crew { font-size: clamp(2rem, 4.2vw, 3.2rem); overflow-wrap: anywhere; }
.cw-tag { margin: 0 0 22px; max-width: 42ch; color: #f1e5cc; font-size: 1.06rem; line-height: 1.55; text-shadow: 0 1px 3px #000, 0 0 14px rgba(0, 0, 0, .7); } .cw-tag b { color: var(--cw-gold-hi); }
.cw-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.cw-pills li { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; padding: 6px 12px 6px 6px; 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;
  box-shadow: 0 10px 18px -12px #000; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.cw-pills .cwi { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 3px #000); }
.cw-pills div { display: flex; flex-direction: column; min-width: 0; }
.cw-pills b { font: 800 2rem/1 var(--cw-serif); letter-spacing: .02em; color: var(--cw-gold-hi); text-shadow: 0 2px 0 #1a0f06, 0 0 12px rgba(255, 170, 70, .3); }
.cw-pills span.l { margin-top: 5px; font: 700 .9rem/1.3 var(--label); letter-spacing: .02em; color: #d6c6a4; }
.cw .btn, .cw-rail .btn { min-height: 50px; }
.cw-hero .btn { padding: 13px 22px; font-size: .95rem; }
.cw-hero .btn-ghost:where(:not(:hover, :focus-visible)) { --b-ink: #fff; }
/* the arena: two war standards hung from timber poles, the clash between them */
.cw-arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 310px; }
.cw-standard { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 26px; transform-origin: 50% 0; animation: cw-sway 8s ease-in-out infinite; }
.cw-standard.k-pub { animation-delay: -3.6s; }
.cw-standard::before { content: ""; position: absolute; top: 4px; left: -6px; right: -6px; height: 18px; z-index: 2; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 220, 160, .2), transparent 45%, rgba(0, 0, 0, .5)), #3a2616 var(--cw-tex-planks) center / 220px;
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, .22), inset 0 -3px 0 rgba(0, 0, 0, .55), 0 7px 10px rgba(0, 0, 0, .75); }
.cw-standard::after { content: ""; position: absolute; top: 0; left: -14px; width: 16px; height: 26px; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efe0b4, #b88a46 50%, #4a3210); box-shadow: 0 3px 4px #000; }
.cw-standard .cw-chains { left: 14px; right: 14px; top: 10px; height: 24px; }
/* the cloth: a baked banner, torn and singed, stretched to the post (the crest and words sit on it) */
.cw-flagpost { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 240px; min-height: 300px; padding: 46px 18px 62px; gap: 6px; text-align: center; text-decoration: none; color: #fff;
  background: url("../img/cw/banner-red.webp?v=75750afe30") center / 100% 100% no-repeat; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .65)); transition: filter .2s; }
.cw-standard.k-pub .cw-flagpost, .cw-standard.side-b .cw-flagpost { background-image: url("../img/cw/banner-blue.webp?v=39bb5f7b31"); }
.cw-flagpost.is-empty { background-image: url("../img/cw/banner-grey.webp?v=b57950326b"); }
a.cw-flagpost:hover { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(255, 190, 80, .6)); }
.cw-champ-flag { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; padding: 6px 14px 6px 10px; font: 800 .8rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #2a1800;
  background: linear-gradient(180deg, #ecdcb0, #c2a468); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); } .cw-champ-flag .cwi { width: 18px; height: 18px; }
.cw-flagpost .cw-crest { --s: 84px; } .cw-flagpost > b { margin-top: 8px; font: 800 1.08rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .7); overflow-wrap: anywhere; }
.cw-flagpost > small { max-width: 22ch; font: 700 .9rem/1.4 var(--label); letter-spacing: .01em; color: #f3dcb0; text-shadow: 0 1px 2px #000; }
.cw-clashart { position: relative; display: grid; place-items: center; align-self: center; height: 130px; }
.cw-bigswords { width: 76px; height: 76px; filter: drop-shadow(0 8px 10px #000) drop-shadow(0 0 22px rgba(255, 130, 34, .6)); animation: cw-throb 3s ease-in-out infinite; }
.cw-bigswords .cwi { width: 100%; height: 100%; }
.cw-clashart::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 60, .36), rgba(255, 90, 20, .1) 52%, transparent 70%); animation: cw-fire 2.4s ease-in-out infinite alternate; }
.cw-clashart i { display: none; }

/* alerts and steps (hub and guide) */
.cw-cols { align-items: start; }
.cw-newcrews { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cw-newcrews a { display: flex; align-items: center; gap: 14px; padding: 20px 24px; min-height: 84px; color: var(--text); text-decoration: none; transition: transform .15s; }
.cw-newcrews a:hover { transform: translateY(-3px); } .cw-newcrews span:not(.cw-crest) { display: flex; flex-direction: column; min-width: 0; } .cw-newcrews small { color: var(--muted); }
.cw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.cw-steps-long { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw-steps li { padding: 34px 24px 22px; }
.cw-steps li > b { position: absolute; top: -10px; left: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; font: 800 1.2rem/1 var(--cw-serif); 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 5px 6px rgba(0, 0, 0, .7); }
.cw-steps h3 { margin: 4px 0 8px; font: 800 1rem/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff1d4; text-shadow: 0 2px 0 #000; }
.cw-steps p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.55; }
.cw-twocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 14px; }
.cw-card { padding: 28px; overflow: hidden; }
.cw-card > .cwi { position: absolute; right: 18px; top: 16px; width: 92px; height: 92px; opacity: .16; filter: drop-shadow(0 4px 6px #000); pointer-events: none; }
.cw-card h3 { margin: 0 0 8px; font: 800 1.4rem/1.05 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--kc); text-shadow: 0 2px 0 #000; } .cw-card h3 small { font: 800 .72rem/1 var(--label); letter-spacing: .14em; color: var(--muted); }
.cw-bigmode { margin: 0 0 8px; font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1 var(--display); letter-spacing: .06em; color: #fff; text-shadow: 0 3px 0 #000, 0 0 20px color-mix(in srgb, var(--kc) 45%, transparent); } .cw-bigmode i { font-style: normal; color: var(--muted); font-size: .55em; }
.cw-facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cw-facts li { padding: 15px 20px 15px 40px; line-height: 1.55; }
.cw-facts li > * { position: relative; }
.cw-facts li::before { background-image: linear-gradient(135deg, #e6c27a, #8a6420), linear-gradient(90deg, rgba(255, 168, 90, .07), transparent 55%), var(--cw-tex-paper); background-size: 9px 9px, auto, 640px; background-position: 14px 50%, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat; }

/* ---------------------------------------------------------------- the bounty board: wanted posters, the bounty is the crew's Glory */
.cw-wanted { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 196px)); justify-content: center; gap: 30px 18px; padding: 16px 0 8px; }
.cw-poster { --tilt: -1.3deg; --pk: #8a2a14; position: relative; display: block; text-decoration: none; color: #2a1608; transform: rotate(var(--tilt)); transform-origin: 50% 0;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.25), filter .2s; filter: drop-shadow(0 12px 9px rgba(0, 0, 0, .55)); }
.cw-poster.k-pub { --pk: #1f4a68; }
.cw-poster:nth-child(2n) { --tilt: 1.2deg; } .cw-poster:nth-child(3n) { --tilt: -.5deg; }
.cw-poster:hover, .cw-poster:focus-visible { transform: rotate(0deg) translateY(-8px) scale(1.05); filter: drop-shadow(0 18px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 190, 80, .5)); }
.cw-poster-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 290px; padding: 34px 22px 26px; text-align: center; background: url("../img/cw/poster-a.webp?v=886d8d4e9e") center / 100% 100% no-repeat; }
.cw-poster:nth-child(2n) .cw-poster-in { background-image: url("../img/cw/poster-b.webp?v=8b01de47dd"); }
.cw-nail { position: absolute; top: 16px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8dcc4, #8a7a60 52%, #2a2218); box-shadow: 0 2px 3px rgba(0, 0, 0, .7), 0 0 0 1px #14100a; }
.cw-poster-w { margin-top: 6px; font: 800 1.9rem/1 var(--cw-serif); letter-spacing: .12em; text-transform: uppercase; color: #3a1a08; text-shadow: 0 1px 0 rgba(255, 238, 196, .7), 0 -1px 0 rgba(70, 30, 8, .3); }
.cw-poster-art { display: grid; place-items: center; padding: 12px 18px 8px; background: radial-gradient(circle at 50% 40%, rgba(255, 236, 190, .4), rgba(120, 76, 24, .2)); box-shadow: inset 0 0 0 2px rgba(91, 58, 32, .8), inset 0 0 0 4px rgba(255, 236, 190, .3); }
.cw-poster-art .cw-crest { --s: 82px; }
.cw-poster-name { margin-top: 4px; font: 800 1.05rem/1.1 var(--cw-serif); letter-spacing: .05em; text-transform: uppercase; color: #2a1608; overflow-wrap: anywhere; }
.cw-poster-b { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cw-poster-b small { font: 900 .62rem/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: #6a3a14; }
.cw-poster-b strong { display: inline-flex; align-items: center; gap: 6px; font: 800 1.55rem/1 var(--cw-serif); letter-spacing: .03em; color: #7a1a10; text-shadow: 0 1px 0 rgba(255, 238, 196, .7); }
.cw-poster-b strong::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d890, #b88a2a 52%, #6a4408); box-shadow: 0 0 0 1.5px #5b3a20; }
.cw-poster-k { margin-top: auto; padding: 4px 11px; font: 900 .66rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--pk); border: 2px solid var(--pk); border-radius: 3px; transform: rotate(-4deg); opacity: .88; }
.cw-poster.r1::before { content: "1"; position: absolute; z-index: 3; top: -8px; right: -8px; display: grid; place-items: center; width: 38px; height: 38px; padding-top: 2px; border-radius: 50%; font: 800 1.4rem/1 var(--cw-serif); color: #3a1a02;
  background: radial-gradient(circle at 35% 30%, #f6e6b0, #d9ad5c 52%, #8a6420); box-shadow: 0 0 0 2.5px #3a2208, 0 4px 6px rgba(0, 0, 0, .6); transform: rotate(10deg); }

/* ---------------------------------------------------------------- filters (Challenge and Wars) */
.cw-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 18px; padding: 22px 24px; }
.cw-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; padding: 0 12px; background: linear-gradient(180deg, #0c0805, #1a110b); box-shadow: inset 0 0 0 1px #6a5238, inset 0 3px 8px rgba(0, 0, 0, .7); border-radius: 3px; }
.cw-search .ic { width: 16px; height: 16px; color: var(--muted); flex: none; } .cw-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; color: var(--text); }
.cw-search:focus-within { box-shadow: inset 0 0 0 2px var(--cw-gold), 0 0 18px -4px rgba(217, 173, 92, .6); }
.cw-select { display: flex; flex-direction: column; gap: 5px; } .cw-select span { font: 800 .72rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--cw-fire-2); } .cw-select select { min-width: 150px; }
.cw-check { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-size: .9rem; }

/* ---------------------------------------------------------------- Challenge: the roll of arms */
.cw-dir { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.cw-dir-head { display: grid; grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1.2fr) 150px 176px; gap: 14px; padding: 0 22px; font: 800 .7rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw-row { display: grid; grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1.2fr) 150px 176px; align-items: center; gap: 14px; padding: 18px 24px; transition: transform .18s ease, filter .18s ease; }
.cw-row:hover { transform: translateX(5px); filter: drop-shadow(-6px 0 16px rgba(217, 173, 92, .26)) drop-shadow(0 7px 6px rgba(0, 0, 0, .5)); }
/* the place number is a brass medal; gold, silver and bronze for the podium */
.cw-n { display: grid; place-items: center; width: 44px; height: 44px; font: 800 1.15rem/1 var(--cw-serif); color: #170f08; text-shadow: 0 1px 0 rgba(255, 236, 200, .4); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #d8cdb6, #8a7e6a 56%, #4a4236); box-shadow: 0 0 0 2px #0b0806, inset 0 -3px 5px rgba(0, 0, 0, .3), 0 3px 4px rgba(0, 0, 0, .7); }
.cw-row.top1 .cw-n { background: radial-gradient(circle at 36% 30%, #f6e6b0, #d9ad5c 56%, #8a6420); } .cw-row.top2 .cw-n { background: radial-gradient(circle at 36% 30%, #ece6da, #b8b0a2 56%, #6a6256); } .cw-row.top3 .cw-n { background: radial-gradient(circle at 36% 30%, #e6bc90, #b07a4a 56%, #6a4220); }
.cw-row-who { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--text); text-decoration: none; } .cw-row-who > span:not(.cw-crest) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cw-row-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.2rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #f6e9cc; text-shadow: 0 2px 0 #000; }
.cw-row-who small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.cw-row-who:hover b { color: var(--cw-ember); }
.cw-row-ranks, .cw-row-rules { display: flex; flex-wrap: wrap; gap: 6px; } .cw-row-act { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cw-why { max-width: 176px; text-align: right; color: var(--muted); font-size: .76rem; line-height: 1.3; } .cw-you { font: 900 .72rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--cw-gold); }

/* ---------------------------------------------------------------- ladders: three hanging banners, then the full roll */
.cw-seg { display: inline-flex; padding: 5px; gap: 5px; background: linear-gradient(180deg, #2c2016, #120c08); box-shadow: inset 0 0 0 1px #8a6a3c, inset 0 4px 8px rgba(0, 0, 0, .6); border-radius: 4px; }
.cw-seg a { padding: 11px 20px; font: 800 .8rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text-soft); border-radius: 3px; }
.cw-seg a.on { color: #231000; background: linear-gradient(180deg, #f6c47a, #e08a38 55%, #b8541a); box-shadow: 0 0 16px rgba(255, 140, 40, .45), inset 0 1px 0 rgba(255, 236, 200, .5); }
.cw-ladders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.cw-ladder { min-width: 0; padding: 26px 24px; }
.cw-ladder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 16px; }
.cw-ladder-head h2 { margin: 0; font: 800 1.3rem/1.05 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--kc); text-shadow: 0 2px 0 #000, 0 0 18px color-mix(in srgb, var(--kc) 40%, transparent); } .cw-ladder-head small { color: var(--muted); }
.cw-towers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 10px 0 20px; }
.cw-towers[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 210px; margin-inline: auto; } .cw-towers[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-tower { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-decoration: none; color: #fff; }
.cw-tower-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-bottom: -22px; }
.cw-tower-top .cw-crest { --s: 62px; } .cw-tower.r1 .cw-tower-top .cw-crest { --s: 78px; }
.cw-tower-crown { width: 38px; height: 38px; margin-bottom: -6px; filter: drop-shadow(0 3px 4px #000); animation: cw-bob 3.4s ease-in-out infinite; } .cw-tower-crown .cwi { width: 100%; height: 100%; }
/* each place is a banner of its own cloth: gold, grey, brown, hung longer for the higher rank */
.cw-tower-body { position: relative; width: 100%; padding: 46px 8px 44px; text-align: center; background: url("../img/cw/banner-grey.webp?v=b57950326b") center top / 100% 100% no-repeat; filter: drop-shadow(0 12px 9px rgba(0, 0, 0, .65)); }
.cw-tower-body > * { position: relative; }
.cw-tower.r1 .cw-tower-body { min-height: 190px; background-image: url("../img/cw/banner-gold.webp?v=00156e8174"); } .cw-tower.r2 .cw-tower-body { min-height: 156px; } .cw-tower.r3 .cw-tower-body { min-height: 130px; background-image: url("../img/cw/banner-brown.webp?v=bc4ef9eea0"); }
.cw-tower-n { display: block; font: 800 1.6rem/1 var(--cw-serif); color: var(--cw-gold-hi); text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 190, 80, .5); }
.cw-tower b { display: block; margin-top: 4px; font: 800 .92rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 2px 0 #000; }
.cw-tower small { display: block; margin-top: 4px; font: 700 .76rem/1.2 var(--label); letter-spacing: .06em; color: #e0d4b8; }
.cw-tower-flag { position: absolute; z-index: 3; top: -34px; right: 16%; width: 30px; height: 36px; pointer-events: none; }
.cw-tower:hover .cw-tower-body { filter: drop-shadow(0 12px 9px rgba(0, 0, 0, .65)) brightness(1.18); }
.cw-lrows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cw-lrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 12px; padding: 14px 18px; transition: transform .15s, filter .15s; }
.cw-lrow:hover { transform: translateX(3px); filter: drop-shadow(-4px 0 10px rgba(217, 173, 92, .26)) drop-shadow(0 7px 6px rgba(0, 0, 0, .5)); }
.cw-lrow .cw-row-who b { font-size: 1rem; }
.cw-elo { display: flex; flex-direction: column; align-items: flex-end; font: 800 1.2rem/1 var(--cw-serif); color: var(--cw-gold); text-shadow: 0 2px 0 #000; } .cw-elo small { font: 800 .6rem/1.2 var(--label); letter-spacing: .14em; color: var(--muted); text-shadow: none; }
.cw-rec { font-weight: 800; color: var(--text-soft); min-width: 44px; text-align: center; }
.cw-waiting { margin-top: 16px; padding: 12px 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .1); border-radius: 3px; } .cw-waiting summary { cursor: pointer; font-weight: 800; color: var(--muted); }
.cw-waiting ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; } .cw-waiting li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cw-waiting li a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; } .cw-waiting small { color: var(--muted); }

@media (max-width: 1250px) {
  .cw-hero { grid-template-columns: 1fr; gap: 28px; }
  .cw-arena { width: min(100%, 620px); margin-inline: auto; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
  .cw-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .cw-ladders { grid-template-columns: 1fr; }
  .cw-ladders[data-kind="regular"] .cw-ladder[data-kind="pub"], .cw-ladders[data-kind="pub"] .cw-ladder[data-kind="regular"] { display: none; }
  .cw-cols { grid-template-columns: 1fr; } .cw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cw-steps-long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cw-dir-head { display: none; }
  .cw-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n who" "ranks ranks" "rules rules" "act act"; } .cw-n { grid-area: n; } .cw-row-who { grid-area: who; } .cw-row-ranks { grid-area: ranks; } .cw-row-rules { grid-area: rules; }
  .cw-row-act { grid-area: act; flex-direction: row; align-items: center; justify-content: space-between; } .cw-why { max-width: none; text-align: left; }
  .cw-lrow { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "m who elo" "m rec form" "act act act"; } .cw-lrow .cw-medal { grid-area: m; } .cw-lrow .cw-row-who { grid-area: who; } .cw-lrow .cw-elo { grid-area: elo; }
  .cw-lrow .cw-rec { grid-area: rec; text-align: left; } .cw-lrow .cw-form { grid-area: form; justify-self: end; } .cw-lrow .btn { grid-area: act; justify-self: start; }
  .cw-twocards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cw-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-cta { align-items: stretch; flex-direction: column; } .cw-cta .btn { justify-content: center; width: 100%; }
  .cw-arena { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cw-clashart { display: none; }
  .cw-flagpost { padding: 40px 8px 56px; min-height: 270px; } .cw-champ-flag { font-size: .72rem; } .cw-flagpost > b { font-size: .95rem; } .cw-flagpost > small { font-size: .8rem; } .cw-flagpost .cw-crest { --s: 62px; }
  body.page-cw .logo::after { font-size: 11px; padding: 5px 14px; bottom: 0; }
}
@media (max-width: 560px) {
  .cw-steps, .cw-steps-long { grid-template-columns: 1fr; }
  .cw-hero { padding-bottom: 56px; } .cw-tower-body { padding-inline: 4px; } .cw-tower b { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .cw-s-art, .cw-s-fire, .cw-s-mist { animation: none !important; } .cw-hero-sky video { display: none; } }

/* hero embers */
.cw-hero-embers i:nth-child(1) { --x: 4%; --s: 4px; --t: 8s; --d: -1s; }
.cw-hero-embers i:nth-child(2) { --x: 10%; --s: 6px; --t: 11s; --d: -5s; }
.cw-hero-embers i:nth-child(3) { --x: 18%; --s: 3px; --t: 9s; --d: -3s; }
.cw-hero-embers i:nth-child(4) { --x: 27%; --s: 5px; --t: 12s; --d: -7s; }
.cw-hero-embers i:nth-child(5) { --x: 36%; --s: 4px; --t: 8.5s; --d: -2s; }
.cw-hero-embers i:nth-child(6) { --x: 45%; --s: 6px; --t: 10s; --d: -6s; }
.cw-hero-embers i:nth-child(7) { --x: 54%; --s: 3px; --t: 9.5s; --d: -4s; }
.cw-hero-embers i:nth-child(8) { --x: 62%; --s: 5px; --t: 11.5s; --d: -8s; }
.cw-hero-embers i:nth-child(9) { --x: 70%; --s: 4px; --t: 8s; --d: -0.5s; }
.cw-hero-embers i:nth-child(10) { --x: 78%; --s: 6px; --t: 12s; --d: -9s; }
.cw-hero-embers i:nth-child(11) { --x: 85%; --s: 3px; --t: 10s; --d: -3.5s; }
.cw-hero-embers i:nth-child(12) { --x: 91%; --s: 4px; --t: 13s; --d: -10s; }
.cw-hero-embers i:nth-child(13) { --x: 50%; --s: 5px; --t: 9s; --d: -1.5s; }
.cw-hero-embers i:nth-child(14) { --x: 96%; --s: 3px; --t: 10.5s; --d: -6.5s; }