/* TsBot War — the app in the new TsBot design system (ds.css: Geist / Instrument Serif / JetBrains Mono, one coral
   accent, glass cards, pill buttons). Loaded AFTER ds.css and app.css: it only re-skins the wa-* pieces; markup,
   class names and behaviour are untouched. Strict-CSP friendly (no inline styles, no remote resources). */

/* ── tokens: app.css names mapped onto the ds palette and type ── */
:root {
  --accent: var(--acc); --coral: #ff6f55; --coral-soft: var(--acc-text);
  --display: var(--sans); --body: var(--sans);
  --line: var(--line-soft); --line-2: #1c2a36; --card-line: #1c2a36;
  --wa-card: linear-gradient(180deg, var(--glass-2), var(--glass));
  --wa-card-sh: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 70px -40px rgba(0, 0, 0, .8);
  /* ONE side padding for the whole app, fluid at every width (no centred box): the site's gutter, a little more on
     very wide screens (up to 64 px). Header, sub-nav, board and pages all use it, so their edges line up */
  --wa-pad: max(var(--gut), min(64px, 2.6vw));
}
body.wa { font-family: var(--sans); font-size: 14px; }
/* the site's light layer (beam.js, «Signal», <canvas id="beam">) sits behind the app; the app passes over it.
   Every screen, the board too, uses the site's calm level (data-beam-dim 0.55, normal speed); the lists and the
   sound strip are nearly opaque glass, so rows never sit on top of moving light. */
.wa-app { position: relative; z-index: 1; }
/* text that sits straight on the page (not in a card) keeps a dark halo, as the site's section heads do, so the light
   never runs through letters; the filter pills and chips are opaque for the same reason */
.wa-eyebrow, .wa-h1, .wa-h2, .wa-lead, .wa-count, .wa-tagl, .wa-head .wa-hint { text-shadow: 0 0 18px rgba(7, 11, 16, .95), 0 0 5px rgba(7, 11, 16, .9); }
.wa h1, .wa h2, .wa h3 { font-family: var(--sans); letter-spacing: -.02em; }
.wa a { color: var(--mut); }
.wa :focus-visible { outline-color: var(--acc); outline-offset: 3px; }

/* ── header: the site's nav (translucent, blurred, coral underline on the current page) ── */
.wa-top { height: var(--nav-h); gap: 26px; padding: 0 var(--wa-pad); background: rgba(7, 11, 16, .86); border-bottom-color: var(--line-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wa-brand { display: inline-flex; align-items: center; gap: 9px; font: 600 16px/1 var(--mono); letter-spacing: .08em; color: var(--strong) !important; }
.wa-brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; animation: dsBeat 2.2s ease-out infinite; }
.wa-brand b { color: var(--acc); font-weight: 600; }
.wa-nav { gap: clamp(14px, 1.8vw, 26px); font-size: 14.5px; align-self: stretch; }
.wa-nav a { display: inline-flex; align-items: center; padding: 0 2px; border-radius: 0; color: var(--mut); }
.wa-nav a:hover { color: var(--strong); }
.wa-nav a[aria-current="page"] { background: none; color: var(--strong); box-shadow: inset 0 -2px 0 var(--acc); }
.wa-lang { gap: 2px; padding: 3px; border-color: var(--line); border-radius: 999px; background: #0a1017; }
.wa-lang button { height: auto; padding: 7px 9px; border-radius: 999px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .06em; }
.wa-lang button[aria-pressed="true"] { background: rgba(255, 255, 255, .09); color: var(--strong); }
.wa-user-btn { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.wa-user-btn:hover { border-color: rgba(255, 255, 255, .28); }
.wa-ava { font-family: var(--mono); font-weight: 500; background: var(--friend-soft); box-shadow: inset 0 0 0 1px var(--friend-line); }
.wa-role { color: var(--acc-text); }
.wa-demo { padding: 8px var(--wa-pad); background: var(--acc-soft); border-bottom-color: var(--acc-line); color: var(--acc-text); }
.wa-demo b { padding: 3px 8px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 600; }
.wa-demo a { color: var(--soft); }
.wa-demo a:hover { color: var(--strong); }
.wa-staffbar { padding: 8px var(--wa-pad); background: var(--friend-soft); border-bottom-color: var(--friend-line); }

/* ── shared pieces ── */
.wa-eyebrow { font-weight: 500; letter-spacing: .1em; color: var(--friend); }
.wa-h1 { font-weight: 500; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(30px, 3.2vw, 42px); }
.wa-h1 .vs, .wa-h2 .vs { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--dim); }
.wa-h2 { font-weight: 500; letter-spacing: -.025em; }
.wa-card { border-color: var(--line); border-radius: var(--r-lg); background: var(--wa-card); box-shadow: var(--wa-card-sh); }
.wa-btn { min-height: 44px; padding: 0 20px; border-radius: 999px; border-color: var(--line-2); background: #0c131a;
  font-family: var(--sans); transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
.wa-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, .28); background: #131d27; }
.wa-btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wa-btn.pri:hover:not(:disabled) { background: var(--acc-hi); border-color: var(--acc-hi);
  box-shadow: 0 0 30px -6px rgba(255, 90, 51, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
.wa-btn.sm { min-height: 32px; padding: 0 12px; }
.wa-btn.danger { border-color: var(--acc-line); background: var(--acc-soft); }
.wa-inp, .wa-sel { border-color: var(--line-2); border-radius: var(--r-sm); background: rgba(7, 11, 16, .7); }
.wa-inp:focus, .wa-sel:focus { border-color: var(--friend-line); box-shadow: 0 0 0 3px var(--friend-soft); }
.wa-selb { border-color: var(--line-2); border-radius: var(--r-sm); background: rgba(7, 11, 16, .7); }
.wa-selb:hover, .wa-selb[aria-expanded="true"] { border-color: var(--friend-line); }
.wa-menu { border-color: var(--line-2); border-radius: var(--r-md); background: rgba(13, 20, 28, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .8); }
.wa-mi { border-radius: var(--r-sm); }
.wa-mi.cur { background: var(--friend-soft); }
.wa-note { border-color: var(--friend-line); border-radius: var(--r-md); background: linear-gradient(var(--friend-soft), var(--friend-soft)) #0a1017; }
.wa-note.warn { border-color: var(--acc-line); background: linear-gradient(var(--acc-soft), var(--acc-soft)) #0a1017; }
.wa-pillbadge { font-weight: 500; }
.wa-toast { border-color: var(--friend-line); border-radius: 999px; background: rgba(11, 35, 48, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wa-toast.bad { border-color: var(--acc-line); background: rgba(42, 19, 12, .96); }

/* ── board: head ── */
.wa-bhead { padding: 30px var(--wa-pad) 20px; gap: 18px 28px; }
.wa-bhead .wa-headtxt { gap: 12px; flex: 1 1 360px; }
.wa-bhead > .wa-grow { display: none; }
.wa-live { min-height: 38px; padding: 0 16px 0 14px; border-color: var(--friend-line); border-radius: 999px; background: linear-gradient(var(--friend-soft), var(--friend-soft)) #0a1017; }
.wa-live .dot { background: var(--ok); animation: waLiveBeat 2.2s ease-out infinite; }
/* the seconds: sans with tabular figures (a monospace space made «1 s» read as «1  s») */
.wa-live .n { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-live.stale { border-color: var(--acc-line); background: linear-gradient(var(--acc-soft), var(--acc-soft)) #0a1017; }
.wa-live.stale .dot { animation: none; }
@keyframes waLiveBeat { 0% { box-shadow: 0 0 0 0 rgba(70, 209, 127, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(70, 209, 127, 0); } }
.wa-counts { gap: 28px; }
.wa-count b { font: 500 40px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--friend); }
.wa-count.en b { color: var(--acc); }
.wa-count span { margin-top: 6px; font-weight: 500; }

/* ── board: filter bar ── */
.wa-bar { padding: 0 var(--wa-pad) 18px; gap: 10px; }
.wa-tabs { padding: 3px; border-color: var(--line); border-radius: 999px; background: #0a1017; }
.wa-tab { height: 36px; padding: 0 18px; border-radius: 999px; color: var(--mut); }
.wa-tab:hover { color: var(--strong); }
.wa-tab[aria-pressed="true"] { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc-text); }
.wa-tab.fr[aria-pressed="true"] { border-color: var(--friend-line); background: var(--friend-soft); color: var(--friend); }
.wa-tagl { font-weight: 500; }
.wa-pill { height: 34px; padding: 0 14px; border-color: var(--line-2); background: #0c131a; transition: border-color .2s, background-color .2s, color .2s; }
.wa-pill:hover { border-color: rgba(255, 255, 255, .28); color: var(--strong); }
.wa-pill[aria-pressed="true"] { border-color: var(--friend-line); background: linear-gradient(var(--friend-soft), var(--friend-soft)) #0a1017; color: var(--friend); }
.wa-pill.en[aria-pressed="true"] { border-color: var(--acc-line); background: linear-gradient(var(--acc-soft), var(--acc-soft)) #0a1017; color: var(--acc-text); }
.wa-pill .mono, .wa-tab .mono { opacity: .85; }
.wa-search { height: 38px; padding: 0 14px; border-color: var(--line-2); background: rgba(7, 11, 16, .92); }
.wa-search:focus-within { border-color: var(--friend-line); box-shadow: 0 0 0 3px var(--friend-soft); }
.wa-search input { font-family: var(--sans); }
.wa-newlist { height: 38px; padding: 0 18px; border-radius: 999px; background: var(--acc); color: var(--acc-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background-color .2s, box-shadow .2s; }
.wa-newlist:hover { background: var(--acc-hi); box-shadow: 0 0 30px -6px rgba(255, 90, 51, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ── board: sound-alert strip, plan note and the legend card ── */
.wa-albar { margin: 0 var(--wa-pad) 18px; padding: 10px 16px; border-color: var(--line); border-radius: var(--r-md); background: var(--wa-card); }
.wa-albar.on { border-color: rgba(70, 209, 127, .4); background: rgba(70, 209, 127, .07); }
.wa-albar.off, .wa-albar.cant { padding: 20px 22px; gap: 18px; border: 1px solid var(--acc-line); border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 0% 0%, rgba(255, 90, 51, .22), transparent 60%), linear-gradient(180deg, rgba(42, 19, 12, .95), rgba(27, 12, 8, .95));
  box-shadow: 0 0 0 1px rgba(255, 90, 51, .25), 0 0 40px -12px rgba(255, 90, 51, .55); }
.wa-albar.off > svg, .wa-albar.cant > svg { color: var(--acc); }
.wa-albar.off strong, .wa-albar.cant strong { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.wa-albar.off .wa-btn { min-height: 48px; padding: 0 24px; }
.wa-albar.off .wa-btn.wa-altest { border-color: var(--acc-line); background: rgba(255, 255, 255, .04); }
.wa-albar.off .wa-btn.wa-altest:hover:not(:disabled) { border-color: var(--acc-text); }
.wa-btn.wa-altest { border-color: var(--friend-line); background: linear-gradient(var(--friend-soft), var(--friend-soft)) #0a1017; color: var(--friend) !important; }
.wa-blnote { margin: 18px var(--wa-pad) 0; }
.wa-lgc { margin: 0 var(--wa-pad) 18px; border-color: var(--line); border-radius: var(--r-md); background: var(--wa-card); box-shadow: var(--wa-card-sh); }
.wa-lgh { min-height: 46px; padding: 10px 18px; line-height: 1.45; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.wa-lgb { padding: 14px 18px 18px; border-top-color: var(--line-soft); }
.wa-lgb .items > span > :first-child { border-color: var(--line-2); border-radius: var(--r-sm); background: rgba(7, 11, 16, .7); }

/* ── board: the lists ── */
.wa-lists { padding: 0 var(--wa-pad) 96px; gap: 18px; }
.wa-col { gap: 18px; }
.wa-list { border-color: var(--line); border-radius: 20px; background: var(--wa-card); box-shadow: var(--wa-card-sh); }
.wa-list.hotl::before { background: conic-gradient(from var(--pc-a), transparent 0deg 240deg, rgba(255, 90, 51, .95) 300deg, rgba(255, 157, 138, .7) 330deg, transparent 360deg); }
.wa-lhead { min-height: 56px; padding: 12px 16px; }
.wa-lhead h3 { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.wa-lcount { border-color: var(--line-2); padding: 2px 9px; }
.wa-list.has .wa-lcount.en { color: var(--acc-text); background: var(--acc-soft); border-color: var(--acc-line); }
.wa-list.has .wa-lcount.fr { color: var(--friend); background: var(--friend-soft); border-color: var(--friend-line); }
.wa-th, .wa-r { padding: 0 16px; }
.wa-th { height: 32px; border-top-color: var(--line-soft); background: rgba(255, 255, 255, .015); font-weight: 500; }
.wa-sort.on { color: var(--friend); }
.wa-r { min-height: 34px; border-top-color: rgba(28, 42, 54, .55); transition: background-color .2s; }
.wa-r:hover { background: rgba(255, 255, 255, .025); }
.wa-r.hot { background: linear-gradient(90deg, rgba(255, 90, 51, .16), rgba(255, 90, 51, .06)); box-shadow: inset 2px 0 0 var(--acc); }
.wa-r.hot .wa-nm { color: var(--acc-text); }
.wa-nm { font-weight: 500; }
.wa-nm:hover { color: var(--friend); }
.wa-voc { border-color: var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.wa-grp { min-height: 32px; padding: 0 16px; border-top-color: var(--line-soft); background: rgba(34, 188, 214, .05); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; color: var(--friend); }
.wa-ic { border-radius: 999px; }
.wa-ic:hover { background: rgba(255, 255, 255, .07); }
.wa-ic.box { border-color: var(--line-2); }
.up { color: var(--ok); } .dn { color: var(--coral); }
@keyframes waDead { 0%, 30% { background: rgba(255, 90, 51, .4); } 100% { background: transparent; } }

/* ── pages (My wars, members, settings…): the same gutter and width as the header ── */
.wa-page { padding-left: var(--wa-pad); padding-right: var(--wa-pad); }
/* the page is never a centred box: it fills the width. Forms and reading text keep their width inside it, aligned
   with the header's left edge */
.wa-page, .wa-page.wide, .wa-page.mid, .wa-page.narrow { max-width: none; margin-left: 0; margin-right: 0; }
.wa-page.mid > * { max-width: 860px; }
.wa-page.narrow > * { max-width: 520px; }
.wa-wars { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (min-width: 1361px) { .wa-mgrid { grid-template-columns: minmax(0, 1fr) minmax(450px, .5fr); } }
/* the board's lists: as many columns as app.js decides for the width (wa-lists c1…c6) */
.wa-lists.c1 { grid-template-columns: minmax(0, 1fr); } .wa-lists.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-lists.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wa-lists.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-lists.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .wa-lists.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wa-head { gap: 16px 24px; }
.wa-lead { color: var(--mut); }

/* ── My wars ── */
.wa-wars { gap: 20px; }
.wa-war { padding: 24px 24px 20px; gap: 16px; }
.wa-war.live::before { inset: -1px; background: conic-gradient(from var(--pc-a), rgba(34, 57, 74, .9) 0deg 230deg, rgba(34, 188, 214, .95) 285deg,
  rgba(83, 224, 143, .8) 315deg, rgba(255, 90, 51, .85) 340deg, rgba(34, 57, 74, .9) 360deg); animation-duration: 6s; }
.wa-war h2 { font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.wa-war h2 .vs { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--dim); }
.wa-status { color: var(--ok); }
.wa-pdot { background: var(--ok); box-shadow: 0 0 10px rgba(70, 209, 127, .7); }
.wa-pdot::after { border-color: rgba(70, 209, 127, .5); }
.wa-world { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.wa-chip { border-color: var(--friend-line); background: var(--friend-soft); color: var(--friend); }
.wa-chip.en { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc-text); }
.wa-sep { border-top-color: var(--line); }
.wa-newwar { border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: rgba(10, 16, 23, .55); transition: border-color .2s, background-color .2s; }
.wa-newwar:hover { border-color: var(--acc-line); background: rgba(255, 90, 51, .04); }
.wa-newwar h2, .wa-newwar h3 { font-weight: 500; }
.wa-plus { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc); }

/* ── members & roles ── */
.wa-chead { padding: 20px 22px; }
.wa-chead h2 { font-weight: 500; letter-spacing: -.02em; }
.wa-mrow { border-top-color: var(--line-soft); padding-left: 22px; padding-right: 22px; }
.wa-mrow:not(.th):hover { background: rgba(255, 255, 255, .02); }
.wa-mrow.th { background: rgba(255, 255, 255, .015); }
.wa-btn.sm { padding: 0 10px; }
/* the actions column takes what its two buttons need in every language (ES «Desactivar» is wide); they never stack */
@media (min-width: 761px) {
  .wa-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 122px 64px 96px minmax(148px, auto); }
  .wa-macts { flex-wrap: nowrap; }
}
/* the character's badge stays inside its column: a long state («Code issued · not confirmed yet») wraps */
.wa-mver .wa-ver.sm { flex: 0 1 auto; min-width: min-content; max-width: 100%; white-space: normal; min-height: 20px; padding-top: 2px; padding-bottom: 2px; border-radius: 10px; }
.wa-mver small { flex: 1 1 0; }
.wa-prow { border-top-color: var(--line-soft); padding-left: 22px; padding-right: 22px; }
.wa-prow.th { background: rgba(255, 255, 255, .015); }
.wa-cklg, .wa-foot { border-top-color: var(--line-soft); }
/* the role matrix shows only the roles the war has (4 with the four roles, 6 before): one column each */
.wa-prow.n4 { grid-template-columns: minmax(0, 1fr) repeat(4, 64px); }
.wa-prow.n5 { grid-template-columns: minmax(0, 1fr) repeat(5, 54px); }
.wa-prow.n7 { grid-template-columns: minmax(0, 1fr) repeat(7, 42px); }
.wa-arow, .wa-cklg { border-top-color: var(--line-soft); }
.wa-linkbox { border-color: var(--line-2); border-radius: var(--r-sm); background: rgba(7, 11, 16, .7); }
.wa-ckb { border-color: #40586b; }
.wa-ck:checked + .wa-ckb, .wa-ckb.on { background: var(--teal); border-color: var(--cyan); }

/* ── phone ── */
/* between phone and desktop the header never overflows: the user pill keeps only its initial and the nav scrolls */
.wa-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; padding-right: 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.wa-user-btn .nm { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-nav::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
  .wa-top { gap: 16px; }
  .wa-nav { gap: 14px; font-size: 14px; }
  .wa-user-btn .nm, .wa-user-btn .wa-role { display: none; }
  .wa-user-btn { padding: 4px; }
}
@media (max-width: 760px) {
  .wa-top { height: 62px; padding: 0 16px; gap: 10px; }
  .wa-brand { font-size: 14px; }
  .wa-lang button { padding: 6px 7px; }
  .wa-demo, .wa-staffbar { padding: 8px 16px; }
  .wa-bhead { padding: 18px 16px 12px; gap: 12px; }
  .wa-bhead .wa-headtxt { flex-basis: 100%; }
  .wa-bhead .wa-h1 { font-size: 26px; }
  .wa-count b { font-size: 28px; }
  .wa-counts { gap: 18px; }
  .wa-bar { padding: 0 16px 12px; }
  .wa-tab { height: 42px; }
  .wa-pill, .wa-search, .wa-newlist { height: 42px; }
  .wa-albar, .wa-lgc { margin: 0 16px 12px; }
  .wa-albar.off, .wa-albar.cant { padding: 16px; }
  .wa-blnote { margin: 12px 16px 0; }
  .wa-lists { padding: 0 0 96px; }
  .wa-list { border-radius: 0; border-left: 0; border-right: 0; background: rgba(13, 20, 28, .9); box-shadow: none; }
  .wa-r { min-height: 52px; }
  .wa-tabbar { background: rgba(7, 11, 16, .92); border-top-color: var(--line-soft); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .wa-tabbar a { color: var(--dim); }
  .wa-tabbar a[aria-current="page"] { color: var(--acc); }
  .wa-page { padding-left: 16px; padding-right: 16px; }
  .wa-war { padding: 20px 18px 18px; }
  .wa-chead, .wa-mrow, .wa-prow { padding-left: 16px; padding-right: 16px; }
  .wa-prow.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wa-prow.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wa-prow.n7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wa-prow.th { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wa-brand::before, .wa-live .dot { animation: none; } }

/* ── variant (preview, ?hdr=site): the site's own header (ds.css .nav) with War's sections underneath ── */
.nav.wa-site .wa-lang { border-color: var(--line); }
.nav.wa-site .nav-actions { margin-left: auto; }
.wa-acct { gap: 8px; padding: 0 14px 0 6px; max-width: 220px; }
.wa-acct .wa-ava { width: 26px; height: 26px; font-size: 11px; }
.wa-acct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-acct:not(:has(.wa-ava)) { padding: 0 16px; }
.wa-subnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 39; background: rgba(7, 11, 16, .82);
  border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav.wa-site .wrap, .wa-subnav .wrap { max-width: none; padding-left: var(--wa-pad); padding-right: var(--wa-pad); }
.wa-subnav .wrap { display: flex; align-items: center; gap: 22px; height: 54px; }
.wa-subnav-t { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-text); }
.wa-subnav-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: dsBeat 2.2s ease-out infinite; }
.wa-sublinks { display: flex; align-self: stretch; gap: clamp(18px, 2vw, 32px); min-width: 0; overflow-x: auto; scrollbar-width: none; font-size: 15px; font-weight: 500; }
.wa-sublinks::-webkit-scrollbar { display: none; }
.wa-sublinks a { display: inline-flex; align-items: center; padding: 0 2px; color: var(--mut); white-space: nowrap; }
.wa-sublinks a:hover { color: var(--strong); }
.wa-sublinks a[aria-current="page"] { color: var(--strong); box-shadow: inset 0 -2px 0 var(--acc); }
@media (max-width: 760px) {
  .wa-subnav { display: none; }                      /* on the phone, War's sections are the bottom tab bar */
  .wa-acct { padding: 0 6px; }
  .wa-acct .nm { display: none; }
  .wa-acct:not(:has(.wa-ava)) .nm { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .wa-subnav-t i { animation: none; } }

/* ── the four roles (phase 2): one line per role above the matrix, and the guest colour ── */
/* the members table needs its width: below 1360 px the roles card goes under it instead of beside it */
@media (max-width: 1360px) { .wa-mgrid { grid-template-columns: minmax(0, 1fr); } .wa-mgrid > .wa-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; } }
@media (max-width: 760px) { .wa-mgrid > .wa-col { display: flex; } }
.wa-r4 { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px 22px 18px; list-style: none; }
.wa-r4 li { display: grid; grid-template-columns: 8px 64px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; color: var(--mut); }
.wa-r4 li b { color: var(--strong); font-weight: 500; }
.wa-r4 .sq, .wa-selb .sq.t-guest, .wa-opt .sq.t-guest { width: 8px; height: 8px; border-radius: 2px; background: var(--dim); align-self: center; }
.wa-r4 .sq.t-owner { background: var(--acc); } .wa-r4 .sq.t-admin { background: var(--coral); }
.wa-r4 .sq.t-member { background: var(--cyan); } .wa-r4 .sq.t-guest { background: var(--dim); }

/* ── war settings (phase 2): each option is a whole clickable row with its real checkbox ── */
.wa-vm { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(7, 11, 16, .45);
  cursor: pointer; transition: border-color .2s, background-color .2s; }
.wa-vm:hover { border-color: var(--line-2); }
.wa-vm:has(.wa-ck:checked) { border-color: var(--friend-line); background: var(--friend-soft); }
.wa-vm .wa-ckl { flex: none; width: 28px; height: 28px; }
.wa-vmtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-vmtx b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; font-weight: 500; color: var(--strong); }
.wa-vmtx > span { font-size: 13.5px; color: var(--mut); }
@media (max-width: 760px) { .wa-r4 { padding: 4px 16px 16px; } .wa-r4 li { grid-template-columns: 8px 58px minmax(0, 1fr); } }

/* ── the other screens: text straight on the page keeps the dark halo (inside cards it is not needed) ── */
.wa-page { text-shadow: 0 0 16px rgba(7, 11, 16, .92), 0 0 4px rgba(7, 11, 16, .85); }
.wa-page .wa-card, .wa-page .wa-btn, .wa-page .wa-note, .wa-page .wa-inp, .wa-page .wa-selb, .wa-page .wa-pillbadge { text-shadow: none; }

/* ── statistics (app-stats.css): the site's segmented pills and numbers ── */
.ws-secs a { font-family: var(--sans); font-weight: 500; letter-spacing: -.01em; }
.ws-secs a[aria-current="page"] { border-bottom-color: var(--acc); }
.ws-seg:not(.pill) { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #0a1017; }
.ws-seg:not(.pill) button { height: 32px; border: 0 !important; border-radius: 999px !important; margin-left: 0 !important; background: none; }
.ws-seg:not(.pill) button[aria-pressed="true"] { background: var(--friend-soft); box-shadow: inset 0 0 0 1px var(--friend-line); color: var(--friend); }
.ws-seg.pill { border-color: var(--line); background: #0a1017; }
.ws-seg.pill button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
.ws-num { font-family: var(--sans); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ws-num.co { color: var(--acc); }
.ws-chead h2 { font-weight: 500; letter-spacing: -.02em; }
.ws { --ws-en: #ff5a33; }

/* help (tsbot.co/war/help; owner, 07-10-2026): the last of War's sections, at the end of the row; on the phone it is in
   the site menu (.nav-panel-m); on the sign-in card, a line under the buttons */
.wa-sublinks { flex: 1; }
.wa-sublinks .wa-help { margin-left: auto; }
.wa-helpline { margin-top: 14px; }
.wa-helpline a { color: var(--friend, inherit); font-weight: 500; }

/* ── outside characters (Pro Advanced): «Add character» is the ghost pill beside the coral «New list» (and stays a ghost
   on hover: only «New list» lights up); the tag next to a name is a pill, like the vocation. The window and its list
   use the pieces above as they are (card, tabs, field, small buttons) ── */
.wa-newlist.alt { border: 1px solid var(--line-2); background: #0c131a; color: var(--fg) !important; box-shadow: none; transition: background-color .2s, border-color .2s; }
.wa-newlist.alt:hover { border-color: rgba(255, 255, 255, .28); background: #131d27; box-shadow: none; }
.wa-xtag { padding: 3px 8px; border-radius: 999px; }