/* =====================================================================================================================
   Crew Wars, the world: the whole site chrome becomes a burning harbour at night while you are in the crews section.
   Painted, not drawn: dark weathered timber, old paper scorched at the edges, tattered cloth, firelight and smoke.
   Everything the eye touches is a material (timber, vellum, cloth, iron); the only bright things are fire, gold leaf and live things.
   (The Light theme keeps its own daylight palette; a crew page whose captain picked custom colours keeps those.)
   Built by cw-world.js: .cw-bg (timber wall, firelight, embers, smoke), the war plate, the garland, the fuse.
   Nothing here needs a script to be readable. Every animation is slow, transform/opacity only, and stops under reduced motion.
   No inline styles anywhere: the site's CSP forbids them.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- the dimension: site tokens become soot, umber and brass */
html[data-theme]:not([data-theme="white"]):not([data-crew-theme]):has(body.page-cw) {
  --bg: #070504; --bg-2: #0c0907;
  --panel: rgba(30, 22, 16, .96); --panel-solid: #1e1610; --plate: #2a1e15; --plate-2: #3a2a1d; --fade: #040302;
  --red: #7a2a22; --red-rgb: 122, 42, 34; --red-hot: #e8741f; --blood: #3e140f; --blood-rgb: 62, 20, 15;
  --hot: #e8892e; --hot-rgb: 232, 137, 46; --hot-ink: #1d0f02; --hot-text: #ffd9a0; --rim: #8a5a22; --frame: #d8bc84;
  --text: #f2e6cc; --muted: #b8a688; --text-soft: #e6d8bc; --placeholder: #8a7a62;
  --pop-bg: #1e1610; --row-bg: rgba(30, 22, 16, .92); --chip-bg: rgba(64, 46, 30, .9); --danger-fill: #2a1e15;
  --btn-fill: linear-gradient(180deg, #e9a352, #c4601c 55%, #8e3c0c);
  --live: #ff8a2b;
}
html[data-theme="white"]:has(body.page-cw) { --hot: #b8480e; --hot-rgb: 184, 72, 14; --hot-text: #8f3205; --muted: #6b5638; --placeholder: #8a7550; }

.cw .k-regular, .cw-rail .k-regular, .cw-moment .k-regular { --kc: #e9a64e; }
.cw .k-pub, .cw-rail .k-pub, .cw-moment .k-pub { --kc: #78a2bd; }

/* the stage every Crew Wars object sits on */
.cw, .cw-rail, .cw-bg, .cw-moment, .cw-warplate {
  --cw-serif: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --display: var(--cw-serif);
  --cw-chunk: var(--cw-serif);
  --cw-fire: #ee8a2c; --cw-fire-2: #dcb878; --cw-fire-deep: #a8460e; --cw-ember: #ffd9a0;
  --cw-gold: #d9ad5c; --cw-gold-hi: #f6e2b0; --cw-gold-deep: #8a6420; --cw-blood: #c4443a; --cw-azure: #78a2bd; --cw-azure-deep: #2f4a5e;
  --cw-steel-hi: #ece2cf; --cw-steel: #b8ad9c; --cw-steel-lo: #6a6256; --cw-iron: #241a12; --cw-iron-deep: #120c08;
  --cw-oak: #5a3a1e; --cw-oak-deep: #24160a; --cw-parch: #d8c394; --cw-ink: #2a1a0c;
  --cw-win: #7cc386; --cw-lose: #e07468; --cw-warn: #e6b450;
  --cw-line: rgba(217, 173, 92, .26); --cw-soft: rgba(217, 173, 92, .07);
  /* materials (all generated art, see web/static/img/cw): timber, vellum, and the nine-slice burnt edges */
  --cw-tex-planks: url("../img/cw/planks.webp?v=fbc0cfd2d4"); --cw-tex-paper: url("../img/cw/paper-dark.webp?v=70474c1a5b"); --cw-tex-paper-lt: url("../img/cw/paper-light.webp?v=090e2c7ee1");
  --cw-burn-1: url("../img/cw/burn-p1.webp?v=f83ad1c382"); --cw-burn-2: url("../img/cw/burn-p2.webp?v=a2ee5c02a2"); --cw-burn-3: url("../img/cw/burn-p3.webp?v=2966d51c41");
  --cw-burn-r: url("../img/cw/burn-r.webp?v=d23f5aecd1"); --cw-burn-rl: url("../img/cw/burn-rl.webp?v=57116a9e86"); --cw-burn-l: url("../img/cw/burn-l.webp?v=3eacaaddfb"); --cw-burn-w: url("../img/cw/burn-w.webp?v=0657b10269"); --cw-burn-h: url("../img/cw/burn-h.webp?v=fef9f9be14");
  --cw-paper-tone: #4a372a; --cw-paper-lt-tone: #cfb68a;
  --cw-painting: url("../img/cw/battle.webp?v=9eb2b76169");
}
html[data-theme="white"] .cw, html[data-theme="white"] .cw-rail, html[data-theme="white"] .cw-moment {
  --cw-fire: #c2530f; --cw-fire-2: #8a5a1a; --cw-fire-deep: #a63f05; --cw-gold: #9a6a10; --cw-azure: #2f5f84;
  --cw-win: #1f7a3a; --cw-lose: #b8301f; --cw-warn: #8a5a00; --cw-line: rgba(90, 50, 20, .26); --cw-soft: rgba(120, 70, 30, .07);
}

/* ---------------------------------------------------------------- the backdrop: a ship's hold, lit by lanterns, with smoke and embers drifting through */
.cw-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #060403; }
.cw-wall { position: absolute; inset: -4% 0 -4% 0; background: var(--cw-tex-planks) 0 0 / 560px auto repeat; opacity: .78; translate: 0 calc(var(--sy, 0) * -0.04px); }
.cw-wall::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 32%, rgba(6, 4, 3, .26), rgba(3, 2, 2, .93) 82%), linear-gradient(180deg, rgba(3, 2, 2, .62), rgba(3, 2, 2, 0) 26%, rgba(60, 22, 6, .3)); }
.cw-glow { position: absolute; width: 84vmax; height: 84vmax; border-radius: 50%; mix-blend-mode: screen; }
.cw-glow.a { left: -46vmax; top: 6vh; background: radial-gradient(circle, rgba(255, 128, 40, .44), rgba(214, 84, 20, .14) 38%, transparent 66%); animation: cw-fire 5.3s ease-in-out infinite alternate; }
.cw-glow.b { right: -46vmax; top: 6vh; background: radial-gradient(circle, rgba(255, 120, 34, .4), rgba(200, 70, 14, .12) 40%, transparent 66%); animation: cw-fire 6.7s ease-in-out -2s infinite alternate; }
.cw-glow.c { left: 24vw; top: -66vmax; width: 70vmax; height: 70vmax; background: radial-gradient(circle, rgba(120, 140, 170, .12), transparent 62%); animation: cw-moon 22s ease-in-out infinite alternate; }
@keyframes cw-fire { 0% { opacity: .62; scale: .97; } 30% { opacity: .96; scale: 1.02; } 55% { opacity: .74; } 100% { opacity: 1; scale: 1.05; } }
@keyframes cw-moon { to { translate: 14vw 4vh; opacity: .6; } }
.cw-embers { position: absolute; inset: 0; }
.cw-embers i { position: absolute; bottom: -14px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff3d6 0, #ffbb55 34%, #ff7a1f 62%, rgba(255, 90, 10, 0) 72%); box-shadow: 0 0 calc(var(--s) * 2.4) calc(var(--s) * .5) rgba(255, 120, 30, .5);
  animation: cw-rise var(--t) linear var(--d) infinite, cw-wob calc(var(--t) / 7) ease-in-out var(--d) infinite alternate; }
@keyframes cw-rise { 0% { translate: 0 0; opacity: 0; scale: 1; } 8% { opacity: var(--o, .85); } 60% { opacity: calc(var(--o, .85) * .7); } 100% { translate: var(--dx) -112vh; opacity: 0; scale: .25; } }
@keyframes cw-wob { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.cw-smoke { position: absolute; inset: 0; }
.cw-smoke i { position: absolute; bottom: -30vh; left: var(--x); width: 46vmax; height: 46vmax; border-radius: 50%; opacity: 0; filter: blur(46px);
  background: radial-gradient(circle, rgba(140, 118, 96, .2), rgba(90, 72, 56, .08) 50%, transparent 70%); animation: cw-smoke var(--t) linear var(--d) infinite; }
@keyframes cw-smoke { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .5; } 85% { opacity: .3; } 100% { translate: var(--dx) -150vh; opacity: 0; } }
.cw-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0, 0, 0, .6)); }
/* the light pulses along the bottom of the screen like a lantern line */
.cw-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; background: linear-gradient(0deg, rgba(255, 90, 20, .16), transparent); animation: cw-floor 4.2s ease-in-out infinite alternate; }
@keyframes cw-floor { from { opacity: .55; } to { opacity: 1; } }

/* daylight: the same hold with the lamps out and a pale deck */
html[data-theme="white"] .cw-bg { background: #d9ccb2; }
html[data-theme="white"] .cw-wall { background-image: var(--cw-tex-paper-lt); background-size: 640px auto; opacity: .9; }
html[data-theme="white"] .cw-wall::after { background: linear-gradient(180deg, rgba(255, 244, 224, .35), rgba(226, 204, 166, .55)); }
html[data-theme="white"] .cw-glow, html[data-theme="white"] .cw-embers, html[data-theme="white"] .cw-smoke, html[data-theme="white"] .cw-floor, html[data-theme="white"] .cw-vig { display: none; }

/* ---------------------------------------------------------------- the logo: forged steel, heated at the edges, with a CREW WARS plate */
body.page-cw .logo { position: relative; isolation: isolate; }
body.page-cw .logo-img { filter: url(#cw-steel) drop-shadow(0 3px 0 #1a0a04) drop-shadow(0 0 14px rgba(255, 110, 30, .38)); animation: cw-forge 5.5s ease-in-out infinite alternate; }
@keyframes cw-forge {
  from { filter: url(#cw-steel) drop-shadow(0 3px 0 #1a0a04) drop-shadow(0 0 8px rgba(255, 110, 30, .22)); }
  to   { filter: url(#cw-steel) drop-shadow(0 3px 0 #1a0a04) drop-shadow(0 0 26px rgba(255, 130, 34, .7)); } }
body.page-cw .logo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask: url(/static/img/logo-custom.png) center 40% / cover no-repeat; mask: url(/static/img/logo-custom.png) center 40% / cover no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 220, .95) 50%, transparent 60%) -160% 0 / 250% 100% no-repeat; mix-blend-mode: overlay; animation: cw-glint 9s ease-in-out infinite; }
@keyframes cw-glint { 0%, 58% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
body.page-cw .logo::after { content: "\2694\FE0E\0000a0\0000a0CREW WARS\0000a0\0000a0\2694\FE0E"; position: absolute; z-index: 2; left: 50%; bottom: 2px; translate: -50% 0; padding: 4px 30px 5px; border-radius: 4px; white-space: nowrap;
  font: 800 .95rem/1 var(--display); letter-spacing: .4em; text-indent: .4em; color: #ffd98f; text-shadow: 0 1px 0 #000, 0 0 10px rgba(255, 120, 30, .9);
  background:
    radial-gradient(circle at 9px 50%, #ffb870 0 1.4px, #1a0d06 2.2px, transparent 2.8px), radial-gradient(circle at calc(100% - 9px) 50%, #ffb870 0 1.4px, #1a0d06 2.2px, transparent 2.8px),
    linear-gradient(180deg, #4a3322, #2a1a0f 54%, #170d07);
  box-shadow: inset 0 0 0 1.5px #8a5a32, inset 0 0 0 2.5px #000, 0 0 0 1px #000, 0 8px 16px -4px rgba(0, 0, 0, .85), 0 0 22px rgba(255, 110, 30, .35); }
/* the flames behind the letters are the supplied clip (cw-refined.css) */
.cw-logofire { position: absolute; left: 2%; right: 2%; bottom: 18%; height: 62%; z-index: -1; pointer-events: none; }
html[data-theme="white"] body.page-cw .logo-img { filter: url(#cw-steel) drop-shadow(0 3px 0 rgba(60, 30, 10, .35)); animation: none; }
html[data-theme="white"] .cw-logofire { display: none; }

/* ---------------------------------------------------------------- header chrome: a charred war plate, a garland of tattered pennants */
body.page-cw .topbar { position: relative; padding-bottom: 64px; }
.cw-warplate { grid-column: 1; justify-self: start; align-self: center; position: relative; display: grid; gap: 4px; min-width: 196px; padding: 12px 18px 13px; color: #f1e6d2;
  border: 14px solid transparent; border-image: var(--cw-burn-w) 48 / 14px round; background: #2a1a10 var(--cw-tex-planks) 0 0 / 300px padding-box;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(255, 130, 40, .22)); margin: -4px; }
.cw-warplate > * { position: relative; }
.cw-wp-l { display: flex; align-items: center; gap: 8px; font: 800 .7rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--cw-fire-2); }
.cw-wp-l i { width: 8px; height: 8px; border-radius: 50%; background: #ff6a1f; box-shadow: 0 0 10px #ff6a1f; animation: cw-pulse 2.2s ease-in-out infinite; }
.cw-wp-v { font: 800 1.7rem/1 var(--cw-serif); letter-spacing: .05em; color: var(--cw-gold-hi); text-shadow: 0 2px 0 #1a0f06, 0 0 14px rgba(255, 150, 50, .5); }
.cw-wp-s { font: 700 .76rem/1 var(--label); letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
@keyframes cw-pulse { 50% { opacity: .3; } }
.cw-warplate.bump .cw-wp-v { animation: cw-bump 1.1s ease-out; }
@keyframes cw-bump { 30% { filter: brightness(1.7) drop-shadow(0 0 12px #ffb15c); } }
@media (max-width: 1100px) { .cw-warplate { display: none; } }

/* the garland: faded crimson, navy and bone pennants on a twisted rope, torn and singed (the art is one tiling raster) */
.cw-bunting { position: absolute; left: 0; right: 0; bottom: -8px; height: 78px; z-index: 3; pointer-events: none; background: url("../img/cw/pennants.webp?v=a4922d2817") 0 0 / 312px 78px repeat-x; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .6)); }
html[data-theme="white"] .cw-bunting { display: none; }

/* sidebar and chrome pick up the palette */
body.page-cw .nav-group { color: var(--cw-fire-2); letter-spacing: .24em; }
body.page-cw .nav-group::before { content: "\2694\FE0E\00a0"; color: var(--cw-steel); }
body.page-cw .sidebar .box { box-shadow: 0 0 22px -14px rgba(255, 150, 50, .8); }
body.page-cw .theme-picker { opacity: .85; }
body.page-cw .box.stat b, body.page-cw .stat b { color: var(--cw-gold-hi); background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 0 #1a0f06; filter: none; }

/* ---------------------------------------------------------------- page chrome: the fuse (scroll progress), back to top */
.cw-progress { position: fixed; z-index: 70; left: 0; top: 0; right: 0; height: 4px; pointer-events: none; background: rgba(0, 0, 0, .5); }
.cw-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #5a3414, #d9873a 55%, #ffd9a0); box-shadow: 0 0 12px rgba(255, 150, 60, .8); position: relative; }
.cw-progress i::after { content: ""; position: absolute; right: -6px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0, #ffbb55 40%, rgba(255, 110, 20, 0) 70%); animation: cw-pulse 1s ease-in-out infinite; }
.cw-top-btn { position: fixed; z-index: 70; right: 22px; bottom: 22px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 3px solid #1a0f08; border-radius: 50%; cursor: pointer; color: #fff;
  background: #3a2616 var(--cw-tex-planks) center / 220px; box-shadow: inset 0 0 0 2px #b88a46, inset 0 -6px 10px rgba(0, 0, 0, .55), 0 10px 14px rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .25s, translate .25s; }
.cw-top-btn.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.cw-top-btn svg { width: 28px; height: 28px; transition: transform .2s; }
.cw-top-btn:hover svg, .cw-top-btn:focus-visible svg { transform: translateY(-3px) scale(1.08); }

/* scroll reveal: panels slide up out of the dark */
html.cw-js .rv { opacity: 0; translate: 0 22px; transition: opacity .5s ease var(--rd, 0s), translate .6s cubic-bezier(.2, .8, .3, 1) var(--rd, 0s); }
html.cw-js .rv.in { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------- right rail: the war council */
.cw-rail { display: flex; flex-direction: column; gap: 14px; }
.cw-rail .box { position: relative; padding: 22px 20px 20px; }
.cw-rail-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 0 12px; font: 800 1rem/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--cw-gold-hi);
  text-shadow: 0 2px 0 #1a0f06, 0 0 14px rgba(217, 173, 92, .22); background: linear-gradient(90deg, transparent, rgba(217, 173, 92, .5) 18% 82%, transparent) center bottom / 100% 1px no-repeat; }
.cw-rail-h .cwi { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.cw-rail-h small { margin-left: auto; font: 800 .6rem/1 var(--label); letter-spacing: .14em; color: var(--muted); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cw-glow, .cw-embers i, .cw-smoke i, .cw-floor, .cw-wp-l i, body.page-cw .logo-img, body.page-cw .logo::before, .cw-progress i::after { animation: none !important; }
  .cw-embers, .cw-smoke { display: none; }
  html.cw-js .rv { opacity: 1; translate: none; transition: none; }
}