/* ============================================================
   SEGA — Desert Storm Command
   Fonts live in these four lines. Change them here and change
   the Google Fonts link in lib.php to match.
   ============================================================ */
:root{
  --font-display:"Poppins", system-ui, sans-serif;
  --font-body:"Poppins", system-ui, sans-serif;
  --font-name:"Noto Sans", system-ui, sans-serif;
  --font-num:"IBM Plex Mono", ui-monospace, monospace;

  /* WATY — navy + white. Two colours: the navy background (in a
     few shades) and white. */
  --bg:#111D35;
  --panel:#1C2D50;
  --raise:#233863;
  --line:#2C4270;
  --acc:#FFFFFF;
  --acc-ink:#111D35;
  --blue:#FFFFFF;
  --blue-soft:#C5D0E0;
  --pink:#FFFFFF;
  --pink-soft:#DCE6F5;
  --ice:#F4F7FB;
  --frost:#C5D0E0;
  --dim:#8FA0BD;

  --roam:#FFFFFF;
  --medic:#D9A48F;
  --intel:#C2B6D6;
  --sci:#B5C99A;
  --oil:#E2C08F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ice);font-family:var(--font-body);font-size:15px;line-height:1.6;padding-bottom:70px}
.wrap{max-width:960px;margin:0 auto;padding:0 18px}
/* The roll has more columns than any other page, so it is allowed
   more of the screen. Everything else keeps its comfortable width. */
body.wide .wrap{max-width:1360px}
a{color:var(--blue)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--line);background:var(--bg)}
.mast-in{display:flex;align-items:center;gap:16px;padding:16px 18px 12px}
.mast-titles{flex:none;min-width:0}
.mast-right{
  margin-left:auto;flex:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px
}
.mast-top{display:flex;align-items:center;gap:16px}
.langs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.langs a{
  text-decoration:none;color:var(--frost);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:6px 10px;border-radius:6px;line-height:1.2;white-space:nowrap
}
.langs a:hover{color:var(--ice);background:var(--raise)}
.langs a.on{background:var(--acc);color:var(--acc-ink)}
/* The banner keeps its own shape. It used to be pinned to 150px
   and cropped to fit, which cut the tops of everybody's heads on
   a wide screen. */
.banner{width:100%;line-height:0;overflow:hidden;border-bottom:3px solid var(--pink)}
.banner picture{display:block}
.banner img{width:100%;height:auto;display:block}
.signout{
  text-align:right;text-decoration:none;font-size:11.5px;letter-spacing:.06em;
  color:var(--dim);padding:2px 4px;border-radius:6px
}
.signout:hover{color:var(--pink-soft);background:rgba(255,255,255,.08)}
.adminbtn{
  display:block;text-align:center;text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--pink-soft);border:1px solid var(--pink);border-radius:9px;
  padding:8px 14px;white-space:nowrap
}
.adminbtn:hover{background:var(--pink);color:var(--acc-ink)}
.adminbtn.on{background:var(--acc);border-color:transparent;color:var(--acc-ink)}
.mark{height:34px;width:auto;display:block;flex:none}
.kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-soft)}
.mast h1{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:.005em;line-height:1.25}
.mast-note{font-size:12px;color:var(--dim);margin:0}
/* Eleven tabs have to sit on one line, so the type is smaller
   than it would otherwise be and nothing is allowed to wrap. */
/* With ten tabs signed in, the bar runs off the side of a phone.
   The fade on the right edge is the only thing that says so. */
.nav{
  display:flex;gap:18px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;position:relative;
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent 100%)
}
[dir="rtl"] .nav{
  mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent 100%);
  -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent 100%)
}
/* nothing to fade once it all fits */
@media (min-width:900px){
  .nav{mask-image:none;-webkit-mask-image:none}
}
.nav::-webkit-scrollbar{display:none}
.nav{scrollbar-width:none}
.nav a{
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--frost);text-decoration:none;padding:12px 0;border-bottom:3px solid transparent;
  white-space:nowrap;flex:none
}
.nav a:hover{color:var(--ice)}
.nav a.on{color:#fff;border-bottom-color:var(--pink)}

/* ---------- page furniture ---------- */
main.wrap{padding-top:30px}
.lede{margin-bottom:24px;max-width:none}
.lede .kicker{line-height:1.6}
.lede h2{
  font-family:var(--font-display);font-size:20px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.3;margin:6px 0 12px
}
.lede p{color:var(--frost);font-size:13px;line-height:1.65}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.hint{font-size:13px;color:var(--dim);line-height:1.6;margin-top:8px}
.hint b{color:var(--frost);font-weight:600}
.flash{border-radius:9px;padding:13px 17px;font-size:14px;margin-bottom:20px}
.flash.ok{background:rgba(134,208,106,.13);border:1px solid #46702F;color:#C6E5AF}
.flash.bad{background:rgba(255,255,255,.12);border:1px solid #A8664F;color:var(--pink-soft)}
.flash.warn{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ice)}
.foot{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.srv-no{color:var(--frost)}

/* ---------- form ---------- */
.form label,.pick legend{
  display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pink-soft);margin:22px 0 8px
}
.form label:first-of-type{margin-top:0}
input[type=text],input[type=password]{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--ice);font:inherit;padding:13px 15px
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(220,232,255,.3)}
.pick{border:none;margin-top:30px}
.opt{display:block;margin:0 0 10px}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt > span{display:block;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:14px 16px;cursor:pointer}
.opt strong{display:block;font-size:16px;font-weight:600;margin-bottom:5px}
.opt em{font-style:normal;display:block}
.opt .srv{font-size:13.5px;font-weight:600;color:var(--ice);letter-spacing:.03em}
.opt .tzrow{font-size:12px;color:var(--frost);margin-top:5px;line-height:1.7}
.opt .cnt{font-size:12px;color:var(--dim);margin-top:6px}
.opt input:checked + span{border-color:var(--pink);background:var(--raise)}
.opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.go{
  margin-top:26px;background:var(--acc);border:none;border-radius:9px;
  color:var(--acc-ink);cursor:pointer;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 32px
}
.go.small{padding:0 22px;margin:0;height:42px;display:inline-flex;align-items:center;justify-content:center}
.go:hover{filter:brightness(1.12)}
.ghost{
  background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--frost);cursor:pointer;
  font:inherit;font-size:13px;padding:0 18px;height:42px;
  display:inline-flex;align-items:center;justify-content:center
}
.ghost:hover{border-color:var(--blue);color:var(--ice)}
a.ghost{display:inline-flex;align-items:center;text-decoration:none;line-height:1.2}
.inline{display:inline}
.row-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}

.tz{display:inline;white-space:nowrap;border:0;background:none;padding:0;border-radius:0}
.tz b{font-weight:500;color:var(--dim);margin-right:4px}
.tz i{font-style:normal;color:var(--roam);font-size:10.5px;margin-left:3px}

/* ---------- team switch ---------- */
.switch{display:flex;gap:10px;margin:6px 0 22px;flex-wrap:wrap}
.switch a{
  font-size:14px;font-weight:600;text-decoration:none;color:var(--frost);
  border:1px solid var(--line);border-radius:9px;padding:11px 19px
}
.switch a em{font-style:normal;color:var(--dim);margin-left:7px;font-weight:400}
.switch a.on{background:var(--acc);border-color:transparent;color:var(--acc-ink)}
.switch a.on em{color:rgba(255,255,255,.8)}

/* the export panel and the folded importer, under the board */
.exportpanel{margin-top:28px}
.exportpanel .tplpick{margin-bottom:18px}

.tuckpanel{margin-top:20px;padding:0}
.tuckpanel summary{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:12px;padding:20px 24px
}
.tuckpanel summary::-webkit-details-marker{display:none}
.tuckpanel summary::before{content:"\25B8";color:var(--dim);margin-right:2px}
.tuckpanel[open] summary::before{content:"\25BE"}
.tuckpanel summary:hover .tuck-title{color:var(--ice)}
.tuck-title{
  font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--pink-soft)
}
.tuck-note{font-size:12px;color:var(--dim)}
.tuck-body{padding:0 24px 24px}
.tuck-body > .panel{padding:0;border:none;background:none;margin:0 0 18px}
@media (max-width:720px){
  .tuckpanel summary{padding:16px}
  .tuck-body{padding:0 16px 18px}
  .exportpanel .export-bar .go,
  .exportpanel .export-bar .ghost{flex:1 1 auto;justify-content:center}
}

/* ---------- picking an export design ----------
   This had no styling at all, so it read as one run-on sentence
   and nobody could tell it was a choice. */
.tplpick{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.tplpick-lbl{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-right:4px
}
.tplpick a{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;
  font-size:13.5px;font-weight:500;text-decoration:none;color:var(--frost);
  border:1px solid var(--line);border-radius:9px;padding:0 15px
}
.tplpick a:hover{border-color:var(--blue);color:var(--ice)}
.tplpick a.on{border-color:var(--blue);background:rgba(220,232,255,.16);color:var(--ice)}
.tplpick a em{font-style:normal;font-size:11px;color:var(--dim)}
.tplpick a.on em{color:var(--frost)}
@media (max-width:720px){
  .tplpick{gap:8px}
  .tplpick-lbl{flex:1 1 100%;margin:0 0 2px}
  .tplpick a{flex:1 1 auto;justify-content:center}
}

/* ---------- the board ---------- */
.stage{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.board{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:22px 26px;border-bottom:3px solid var(--pink)}
.board-kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-soft)}
.board-title{font-family:var(--font-display);font-size:38px;font-weight:500;letter-spacing:.005em;line-height:1.05;margin-top:5px}
.board-when{text-align:right}
.clock{display:inline-block;background:var(--blue);color:var(--acc-ink);border-radius:5px;padding:7px 15px;font-weight:600;font-size:15px}
.tally{display:block;font-size:12px;color:var(--frost);margin-top:8px}
.tzbar{
  padding:10px 26px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--frost);line-height:1.7
}
.notfinal{
  padding:11px 26px;font-size:12px;line-height:1.6;color:var(--frost);
  border-bottom:1px solid var(--line);
  border-left:3px solid var(--pink)
}
.legend{display:flex;flex-wrap:wrap;gap:7px 22px;padding:12px 26px;background:var(--panel);font-size:12px;color:var(--frost)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
.sw.roam{background:var(--roam)}.sw.medic{background:var(--medic)}
.sw.intel{background:var(--intel)}.sw.sci{background:var(--sci)}.sw.oil{background:var(--oil)}

.sheet{width:100%;border-collapse:collapse}
.sheet th{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:left;padding:15px 0 10px}
.sheet td{padding:9px 0;border-top:1px solid rgba(44,66,112,.5);font-size:15px}
.c-no{width:56px;padding-left:26px !important;color:var(--dim);font-family:var(--font-num);font-size:13px}
.c-nm{font-family:var(--font-name);font-weight:600}

/* On the officer view the row also carries three buttons, so the
   name takes whatever space is left and shrinks rather than
   pushing them onto a second line. */
.sheet.editing .c-nm{display:flex;align-items:center;flex-wrap:nowrap;gap:0}
.sheet.editing .pname{
  flex:0 1 auto;min-width:0;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sheet.editing .rowbtns{flex:0 0 auto}
.sheet.editing .tag-ns{flex:0 0 auto}
.subs.editing .nm{font-size:13px}
.c-pw{width:96px;text-align:center;font-family:var(--font-num);font-size:14px}
.sheet th.c-pw{text-align:center}
.c-as{width:310px;padding-left:18px !important;padding-right:26px !important;border-left:3px solid transparent}
.sheet.editing .c-as{width:250px;font-size:13.5px}
/* Colour belongs on the exported picture, not in the tables.
   Here the assignment reads as plain text with a quiet edge. */
.c-as{border-left-color:var(--line);color:var(--ice)}
.c-as.roam,.c-as.medic,.c-as.intel,.c-as.sci,.c-as.oil{
  border-left-color:var(--line);color:var(--ice)
}
.band td{background:var(--raise);border-top:1px solid var(--line);padding:8px 0 8px 26px !important;font-size:12.5px}
.band.roam td{border-left:3px solid var(--line);color:var(--frost)}
.band.hold td{border-left:3px solid var(--line);color:var(--frost)}

.subs{background:var(--raise);padding:18px 26px 22px}
.subs ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;margin-top:11px}
.subs li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:var(--frost);border-bottom:1px solid rgba(44,66,112,.45);padding-bottom:4px}

/* With the officer controls showing there is no room for two
   columns, so the substitutes run down the page instead. */
.subs.editing ul{grid-template-columns:1fr;gap:2px}
.subs.editing li{
  flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 0;
  border-bottom:1px solid rgba(44,66,112,.45)
}
.subs.editing .nm{flex:0 1 auto;min-width:120px;overflow-wrap:anywhere}
.subs.editing .pw{flex:0 0 auto}
.subs.editing .kill{margin-left:auto}
.subs.editing .pwedit{justify-content:flex-start}
.subs.editing .swapbox,
.subs.editing .nsbtn,
.subs.editing .kill{margin-left:0}
.subs .sn{font-family:var(--font-num);font-size:12px;color:var(--dim);width:24px;flex:none}
.subs .nm{flex:1;font-family:var(--font-name)}
.subs .pw{font-family:var(--font-num);font-size:12.5px}
.board-foot{display:flex;justify-content:space-between;padding:14px 26px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.board-empty{padding:56px 26px;text-align:center;color:var(--frost)}

.rowbtns{display:inline-flex;align-items:center;gap:7px;margin-left:12px;vertical-align:middle}
.rowbtns .inline{display:inline-flex}
.rowbtns .nsbtn,
.rowbtns .swapbox,
.rowbtns .kill{
  height:26px;min-width:88px;margin:0;padding:0 10px;border-radius:6px;
  font:inherit;font-size:11px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap
}
.kill{background:none;border:1px solid #A8664F;color:var(--pink-soft);border-radius:6px;font-size:11px;padding:2px 10px;margin-left:12px;cursor:pointer}
.kill:hover{background:rgba(255,255,255,.15)}
.export-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.export-bar .hint{margin:0}
.toggle input[type=checkbox]{width:22px;height:22px;accent-color:var(--pink);flex:none}
.toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--frost);cursor:pointer}
.toggle input{width:17px;height:17px;accent-color:var(--pink)}


/* ============================================================
   PHONES — most of the alliance will only ever see this size.
   ============================================================ */
@media (max-width:720px){
  .wrap{padding:0 14px}
  main.wrap{padding-top:24px}

  /* header */

  .mast-in{gap:10px 11px;padding:11px 14px 9px;flex-wrap:wrap;align-items:center}
  .mark{height:28px}
  .mast h1{font-size:17px;line-height:1.15}
  .kicker{font-size:9.5px;letter-spacing:.16em}
  .mast-right{margin-left:0;order:3;width:100%;align-items:stretch;gap:8px}
  .mast-top{gap:10px}
  .mast-note{display:none}
  .signout{text-align:left}
  .langs{flex:1;justify-content:space-between;padding:2px}
  .langs a{font-size:11.5px;padding:7px 8px;flex:1;text-align:center}
  .signout{
  text-align:right;text-decoration:none;font-size:11.5px;letter-spacing:.06em;
  color:var(--dim);padding:2px 4px;border-radius:6px
}
.signout:hover{color:var(--pink-soft);background:rgba(255,255,255,.08)}
.adminbtn{font-size:11px;padding:8px 12px}

  /* The bar scrolls sideways instead of wrapping. It runs to the
     edges of the screen, but the first and last tabs keep their
     own breathing room so nothing sits against the glass. */
  /* The bar is itself a .wrap, so it already sits at the page edge.
     The old negative margin cancelled its own padding, which is why
     the first tab ended up hard against the glass. */
  .nav{gap:0;padding:0 14px;margin:0;
       scroll-padding-left:14px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:13px 11px;font-size:11.5px;white-space:nowrap}
  .nav a:first-child{padding-left:0}
  .nav a:last-child{padding-right:22px}

  /* type and forms */
  .lede h2{font-size:17px;letter-spacing:.11em}
  .lede{margin-bottom:18px}
  .panel{padding:18px 16px}
  input[type=text],input[type=password]{font-size:16px;padding:14px}
  .go{width:100%;padding:16px}
  .go.small{width:auto}
  .opt > span{padding:15px 14px}
  .row-btns .ghost{width:100%;text-align:center}

  /* team buttons share the width */
  .switch{gap:8px;margin-top:4px}
  .switch a{flex:1;text-align:center;padding:12px 8px;font-size:13px}
  .switch a em{display:block;margin:2px 0 0}

  /* the board becomes stacked cards instead of a wide table */
  .board-head{flex-direction:column;align-items:flex-start;gap:11px;padding:16px}
  .board-title{font-size:29px}
  .board-when{text-align:left}
  .legend{padding:10px 16px;gap:6px 14px;font-size:11px}
  .tzbar{padding:10px 16px;font-size:11.5px}
  .notfinal{padding:10px 16px;font-size:11.5px}

  .sheet thead{display:none}
  .sheet,.sheet tbody,.sheet tr,.sheet td{display:block}
  .sheet tr{
    display:grid;grid-template-columns:26px minmax(0,1fr) 62px;align-items:baseline;
    gap:3px 10px;padding:11px 16px;border-top:1px solid rgba(44,66,112,.5)
  }
  .sheet td{border-top:none;padding:0}
  .c-no{width:auto;padding-left:0 !important;grid-column:1;text-align:right}
  .c-nm{grid-column:2;font-size:15px;overflow-wrap:anywhere}
  .c-pw{width:auto;grid-column:3;text-align:right;font-size:14px}
  .c-as{
    grid-column:2 / -1;width:auto;font-size:13px;
    padding:4px 0 1px 10px !important;margin-top:3px
  }
  .sheet tr.band{display:block;padding:0}
  .band td{padding:9px 16px !important;font-size:12px}

  .subs{padding:16px}
  .board-foot{padding:12px 16px;font-size:10.5px}
  .kill{display:inline-block;margin:7px 0 0 0}

  .danger-zone{padding:18px 16px}
  .export-bar{gap:12px}
}

@media (max-width:400px){
  .mast h1{font-size:15.5px}
  .signout{
  text-align:right;text-decoration:none;font-size:11.5px;letter-spacing:.06em;
  color:var(--dim);padding:2px 4px;border-radius:6px
}
.signout:hover{color:var(--pink-soft);background:rgba(255,255,255,.08)}
.adminbtn{font-size:10px;padding:8px 9px}
  .board-title{font-size:25px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}


/* The export card is built off-screen so the page stays clean.
   It must stay in the layout (not display:none) for the PNG to render. */
.offstage{position:absolute;left:-10000px;top:0;width:941px}

/* Weekly reset block on the admin page */
.danger-zone{
  margin-top:32px;border:1px solid #A8664F;border-radius:12px;padding:22px 24px;
  background:rgba(255,255,255,.06)
}
.danger-zone h3{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--pink-soft);margin-bottom:8px}
.danger-zone p{font-size:13.5px;color:var(--frost);margin-bottom:16px;max-width:560px}
.ghost.danger{border-color:var(--pink);color:var(--pink-soft)}
.ghost.danger:hover{background:var(--pink);color:var(--acc-ink)}


/* ============================================================
   ARABIC — right to left
   ============================================================ */
[dir="rtl"] body{font-family:"Noto Sans Arabic","Poppins",system-ui,sans-serif}
[dir="rtl"] .mast-right{margin-left:0;margin-right:auto}
[dir="rtl"] .mast-note{text-align:left}
[dir="rtl"] .nav a:first-child{padding-left:14px;padding-right:0}
[dir="rtl"] .c-no{padding-left:0 !important;padding-right:26px !important}
[dir="rtl"] .c-as{
  border-left:none;border-right:3px solid transparent;
  padding-left:26px !important;padding-right:18px !important
}
[dir="rtl"] .c-as.roam,[dir="rtl"] .c-as.medic,[dir="rtl"] .c-as.intel,
[dir="rtl"] .c-as.sci,[dir="rtl"] .c-as.oil{border-right-color:var(--line)}
[dir="rtl"] .band td{padding:8px 26px 8px 0 !important}
[dir="rtl"] .band.roam td{border-left:none;border-right:3px solid var(--line)}
[dir="rtl"] .band.hold td{border-left:none;border-right:3px solid var(--line)}
[dir="rtl"] .sw{margin-right:0;margin-left:7px}
[dir="rtl"] .board-when{text-align:left}
[dir="rtl"] .switch a em{margin-left:0;margin-right:7px}
[dir="rtl"] .kill{margin-left:0;margin-right:12px}
@media (max-width:720px){
  [dir="rtl"] .mast-right{margin-right:0}
  [dir="rtl"] .c-no{padding-right:0 !important}
    [dir="rtl"] .c-as{padding:4px 10px 1px 0 !important}
  [dir="rtl"] .band td{padding:9px 16px !important}
  [dir="rtl"] .nav a:first-child{padding-right:0;padding-left:14px}
}

/* Arabic: the roster columns mirror too */
[dir="rtl"] .tzbar .tz b{margin-right:0;margin-left:5px}
@media (max-width:720px){
  [dir="rtl"] .sheet tr{grid-template-columns:62px minmax(0,1fr) 26px}
  [dir="rtl"] .c-no{grid-column:3;text-align:left}
  [dir="rtl"] .c-pw{grid-column:1;text-align:left}
  [dir="rtl"] .c-as{grid-column:1 / 3;padding:4px 10px 1px 0 !important}
  /* the number belongs beside the name, not stranded on its own line */
  [dir="rtl"] .sheet tr:has(.pwedit){grid-template-columns:132px minmax(0,1fr) 26px}
  [dir="rtl"] .sheet.editing .pname{grid-column:2;grid-row:1}
  [dir="rtl"] .sheet tr:has(.pwedit) .c-pw{grid-column:1;grid-row:1;justify-self:start}
  [dir="rtl"] .sheet tr:has(.pwedit) .c-no{grid-column:3;grid-row:1}
  [dir="rtl"] .sheet.editing .c-as{grid-column:1 / -1}
  [dir="rtl"] .pwedit{justify-content:flex-start}
}

/* ---------- waiting list (admin only) ---------- */
.waitbox{margin-top:30px;border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--panel)}
.waitbox h3{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--blue-soft);margin-bottom:8px}
.waitbox p{font-size:13.5px;color:var(--frost);margin-bottom:14px;max-width:640px}
.waitbox .hint{margin:0}
.waitlist{list-style:none}
.waitlist li{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid rgba(44,66,112,.5);font-size:14px
}
.waitlist .wn{font-family:var(--font-num);font-size:12px;color:var(--dim);width:22px;flex:none}
.waitlist .wnm{font-family:var(--font-name);flex:1;min-width:0;overflow-wrap:anywhere}
.waitlist .wpw{font-family:var(--font-num);font-size:13px;color:var(--frost)}
.waitlist .wbtns{display:inline-flex;gap:7px;align-items:center;flex:none;margin-left:0}
.ghost.tiny{
  font-size:11px;padding:0 14px;min-height:34px;border-radius:6px;
  display:inline-flex;align-items:center
}
@media (max-width:720px){ .ghost.tiny{min-height:40px;padding:0 16px} }
.waitlist .kill{margin-left:0}

/* removed-with-reason: same shape as the waiting list, plus the
   reason shown under the name, and the two-step remove control
   used everywhere someone can be taken off the sheet */
.removedbox h3{color:var(--pink-soft)}
.removedlist .wnm{display:flex;flex-direction:column;gap:2px}
.rm-reason{font-size:11.5px;color:var(--dim)}
.rm-wrap{position:relative;display:inline-flex}
.reasonpick{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px
}
.reasonpick[hidden]{display:none}
.reasonpick .rm-warn{font-size:11.5px;color:var(--pink-soft);flex-basis:100%}
.reasonpick select,.reasonpick input[type=text]{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--ice);
  font:inherit;font-size:12px;padding:5px 8px;min-width:0
}
.reasonpick .newreason-box{width:150px}
@media (max-width:520px){
  .reasonpick{flex-direction:column;align-items:stretch}
  .reasonpick select,.reasonpick .newreason-box{width:100%}
}

/* ---------- shuffle tab ---------- */
.shuffle-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.shuffle-bar .hint{margin:0}
.shuffle-reset{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.orderbar{margin-top:18px;margin-bottom:0}
.orderbar .hint{flex:1 1 240px;min-width:0}
.shuffle-reset .hint{margin:0}
.picklist{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.pickrow{
  display:grid;grid-template-columns:26px 26px minmax(0,1fr) 64px 214px;
  align-items:center;gap:12px 20px;padding:12px 18px;cursor:pointer;
  border-top:1px solid rgba(44,66,112,.5)
}
.pickhead{
  display:grid;grid-template-columns:22px 26px minmax(0,1fr) 64px 214px;
  gap:12px 20px;padding:12px 18px 10px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line)
}
.pickhead .h-no{text-align:right}
.pickhead .h-pw{text-align:right}
.pickhead .h-as{padding-left:10px}
.pickrow:first-child{border-top:none}
.pickrow:hover{background:var(--raise)}
.pickrow input{width:22px;height:22px;accent-color:var(--pink);margin:0}
.pickrow.sub{background:rgba(20,53,103,.45)}
.pr-no{font-family:var(--font-num);font-size:12px;color:var(--dim);text-align:right}
.pr-nm{font-family:var(--font-name);font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.pr-pw{font-family:var(--font-num);font-size:13px;text-align:right;color:var(--frost)}
.pr-as{font-size:13px;padding-left:10px}
.pr-as{color:var(--ice)}
.pr-as.roam,.pr-as.medic,.pr-as.intel,.pr-as.sci,.pr-as.oil{color:var(--ice)}
.pr-as.k-sub{color:var(--frost)}
.closed{color:var(--pink-soft);font-weight:600}

@media (max-width:720px){
  .waitbox{padding:18px 16px}
  .waitlist li{flex-wrap:wrap;gap:8px 10px}
  .waitlist .wbtns{width:100%;justify-content:flex-start}
  .pickrow{grid-template-columns:26px 24px minmax(0,1fr) 54px;padding:14px 14px;gap:8px 10px}
  .pr-as{grid-column:3 / -1;font-size:12.5px;margin-top:-2px;padding-left:0}
  .pickhead{display:none}
}

/* ---------- no shows ---------- */
.nsbtn{
  background:none;border:1px solid var(--line);color:var(--frost);border-radius:6px;
  font:inherit;font-size:11px;padding:2px 10px;margin-left:10px;cursor:pointer
}
.nsbtn:hover{border-color:var(--roam);color:var(--roam)}
.nsbtn.on{border-color:var(--ice);color:var(--ice);background:rgba(255,255,255,.1)}
.tag-ns{
  display:inline-block;background:rgba(255,255,255,.14);color:var(--ice);
  border-radius:5px;font-size:10.5px;padding:2px 8px;margin-left:9px;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px
}
.sheet tr.missed .c-nm,.subs li.missed .nm{color:var(--roam)}
.sheet tr.missed .c-pw,.subs li.missed .pw{opacity:.65}

/* One rhythm across every page: 8 inside a group, 16 under a
   heading, 24 between panels. */
.blocktitle{
  font-family:var(--font-display);font-size:16px;font-weight:600;
  color:var(--blue-soft);margin-bottom:16px;letter-spacing:.01em
}
/* a heading immediately followed by its explanation sits closer */
.blocktitle + .hint{margin-top:-8px;margin-bottom:16px}
.nslist{list-style:none;margin-bottom:14px}
.nslist li{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid rgba(44,66,112,.5);font-size:14px
}
.nslist .team{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);width:64px;flex:none}
.nslist .nm{font-family:var(--font-name);flex:1;min-width:0;overflow-wrap:anywhere}
.nslist .pw{font-family:var(--font-num);font-size:13px;color:var(--frost)}

table.record{width:100%;border-collapse:collapse}
table.record th{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  font-weight:600;text-align:left;padding:0 10px 10px 0
}
table.record th.num,table.record td.num{text-align:right;padding-right:0;width:110px}
table.record td{
  padding:11px 10px 11px 0;border-top:1px solid rgba(44,66,112,.5);font-size:14px;
  vertical-align:top
}
table.record .rn{font-family:var(--font-name);font-weight:500}
table.record .num{font-family:var(--font-num);font-size:13.5px}
table.record .when{font-size:13px;color:var(--frost);width:130px}
/* Two lists of names side by side need a real gap between them —
   with only 10px, a long list on the left ran into the column on
   the right and the two read as one. */
table.record .whomissed{
  font-family:var(--font-name);font-size:13px;color:var(--medic);line-height:1.7;
  padding-right:30px;vertical-align:top;width:26%
}
table.record th:last-child,table.record td:last-child{padding-right:0}
/* belt and braces: the second list is pushed off the first from its
   own side too, so the gap survives whatever else changes */
table.record .whomissed + .whomissed,
table.record th + th.mcol{padding-left:24px}
table.record .rn{vertical-align:top;white-space:nowrap}

/* the quiet note saying whose clock the log is showing */
.yourclock{color:var(--dim);font-size:12.5px}
.tlocal{cursor:help}
table.record td.out{width:110px}
table.record tr.has-missed .miss{color:var(--roam)}
table.record .miss{color:var(--dim)}
table.record .ecol{white-space:nowrap;width:1%}
table.record .ecol .ghost.tiny{margin-right:5px}
table.record .ecol .ghost.tiny:last-child{margin-right:0}

@media (max-width:720px){
  .nsbtn{margin-left:0;margin-top:6px}
  .nslist li{flex-wrap:wrap;gap:8px 10px}
  table.record th.num,table.record td.num{width:60px}
  table.record .when{width:96px;font-size:12px}
  table.record td.out{width:auto;font-size:11.5px}
  /* Five columns will not fit on a phone. The win or loss moves
     under the date, so the two lists of names get the width. */
  table.record .whomissed{font-size:12px;width:auto;padding-right:12px}
  table.record .whomissed + .whomissed{padding-left:14px}
  table.record td,table.record th{padding-right:6px}
  table.record.fridays th:nth-child(2),table.record.fridays th:nth-child(3),
  table.record.fridays td.out{display:none}
  table.record.fridays .rn{white-space:normal}
}

/* ---------- registration window ---------- */
.window{border-radius:10px;padding:14px 18px;margin-bottom:22px;font-size:13.5px}
.window.open{
  background:rgba(134,208,106,.1);border:1px solid #46702F;color:#C6E5AF
}
.window.shut{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ice);
  display:flex;flex-direction:column;gap:6px
}
.window.shut strong{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.window.shut span{color:var(--frost);line-height:1.6}
.window.shut em{font-style:normal;font-size:12.5px;color:var(--frost);margin-top:4px}

/* ---------- officer power edit ---------- */
.pwedit{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.pwedit input{
  width:56px;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  color:var(--ice);font-family:var(--font-num);font-size:13px;padding:4px 7px;text-align:right
}
.pwedit input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(220,232,255,.28)}
.pwedit button{
  background:none;border:1px solid var(--line);border-radius:6px;color:var(--dim);
  font:inherit;font-size:11px;padding:0 12px;min-height:34px;cursor:pointer
}
.pwedit button:hover{border-color:var(--blue);color:var(--blue-soft)}
.c-pw:has(.pwedit){width:168px;padding-right:16px !important}
.subs .pw:has(.pwedit){min-width:130px;padding-right:6px}

@media (max-width:720px){
  /* editing a power: the box sits beside the name, not below it */
  .pwedit{display:flex;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
  .pwedit input{width:66px;height:36px;font-size:15px;text-align:center;padding:0 4px;box-sizing:border-box}
  .pwedit button{height:36px;min-height:0;padding:0 10px;font-size:11.5px;border-radius:8px}
  .sheet tr:has(.pwedit){grid-template-columns:26px minmax(0,1fr) 132px}
  .sheet tr:has(.pwedit) .c-pw{grid-column:3;grid-row:1;justify-self:end;width:auto;margin:0}
  .c-pw:has(.pwedit){width:auto;padding-right:0 !important}
}

/* ---------- spreadsheet import ---------- */
input[type=file]{
  width:100%;background:var(--bg);border:1px dashed var(--line);border-radius:9px;
  color:var(--frost);font:inherit;font-size:13.5px;padding:14px 15px;cursor:pointer
}
input[type=file]:hover{border-color:var(--blue)}
input[type=file]::file-selector-button{
  background:var(--raise);border:1px solid var(--line);border-radius:7px;color:var(--ice);
  font:inherit;font-size:12.5px;padding:7px 13px;margin-right:12px;cursor:pointer
}
textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--ice);font-family:var(--font-num);font-size:13.5px;line-height:1.7;padding:13px 15px;
  resize:vertical
}
textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(220,232,255,.3)}
/* The import preview has five columns and needed real gaps
   between them — the rank was running into the name and the
   power into the assignment. Widths are set on the column so
   the heading and the values below it always line up. */
table.imp th,table.imp td{padding-right:20px}
table.imp th:last-child,table.imp td:last-child{padding-right:0}
table.imp th.num,table.imp td.num{text-align:right;padding-right:22px;width:auto}
table.imp th:nth-child(2),table.imp td:nth-child(2){width:52px}
table.imp th:nth-child(4),table.imp td:nth-child(4){width:86px}
table.imp .rn{padding-right:24px}

table.imp tr.over td{opacity:.55}
table.imp .dim{color:var(--dim)}
table.imp .k-roam,table.imp .k-medic,table.imp .k-intel,
table.imp .k-sci,table.imp .k-oil{color:var(--ice)}
table.shapedemo{max-width:340px;margin-bottom:14px}

@media (max-width:720px){
  textarea{font-size:16px}
  input[type=file]{font-size:12.5px;padding:12px}
}

/* ---------- officer accounts and activity ---------- */
/* ---------- the officers, one tidy row each ----------
   Four columns that line up all the way down, rather than each
   row wrapping wherever it happens to run out of space. */
.officers{list-style:none;margin:0;padding:0}
.on-row{
  display:grid;
  grid-template-columns:minmax(150px,1.1fr) minmax(180px,1.4fr) 120px minmax(210px,auto);
  align-items:center;gap:14px;padding:14px 0;
  border-top:1px solid rgba(44,66,112,.5)
}
.on-row:first-child{border-top:none}

/* one set of column titles at the top, instead of the same three
   words repeated on every single row */
.on-head{
  padding:0 0 10px;border-top:none;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)
}
.on-head + .on-row{border-top:none}

.on-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.on-name{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.on-user{font-family:var(--font-num);font-size:12px;color:var(--dim);overflow-wrap:anywhere}

.on-cell{min-width:0}
.on-cell form{display:block}
.on-cell label{
  display:block;margin:0 0 6px;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)
}
.on-cell select{width:100%;padding:9px 34px 9px 12px;font-size:13px}

.on-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.on-acts .ghost.tiny,.on-acts .kill.tiny{margin:0;white-space:nowrap}
.on-you{font-size:12.5px;color:var(--dim)}

@media (min-width:901px){
  .on-cell label{display:none}       /* the titles above say it once */
}
@media (max-width:900px){
  .on-head{display:none}
  .on-row{
    grid-template-columns:1fr 1fr;
    align-items:end;gap:12px 14px;padding:16px 0
  }
  .on-who{grid-column:1 / -1}
  .on-acts{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:520px){
  .on-row{grid-template-columns:1fr}
  .on-acts .ghost.tiny,.on-acts .kill.tiny{flex:1 1 auto;justify-content:center}
}

.actlog{list-style:none}
.actlog li{
  display:grid;grid-template-columns:96px 96px 200px minmax(0,1fr);
  gap:4px 14px;align-items:baseline;padding:9px 0;
  border-top:1px solid rgba(44,66,112,.5);font-size:13.5px
}
.actlog li:first-child{border-top:none}
/* one row of column titles, so the list is not a wall of text */
.actlog li.a-head{
  padding-bottom:10px;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)
}
.actlog li.a-head span{color:inherit;font-family:inherit;font-size:inherit}
.actlog li.a-head + li{border-top:none}
@media (max-width:720px){
  .actlog li.a-head{display:none}
}
.a-when{font-family:var(--font-num);font-size:12px;color:var(--dim)}
.a-who{font-weight:600;color:var(--blue-soft);overflow-wrap:anywhere}
.a-what{color:var(--frost)}
.a-detail{font-family:var(--font-name);color:var(--ice);overflow-wrap:anywhere}
.actlog li.warn .a-what{color:var(--pink-soft)}
.actlog li.big .a-what{color:var(--roam)}
.actlog li.quiet .a-what,.actlog li.quiet .a-who{color:var(--dim)}
.actlog li.quiet .a-detail{color:var(--dim)}

@media (max-width:720px){
  .officers li{gap:6px 10px}
  .on-seen{margin-left:0;width:100%}
  .actlog li{grid-template-columns:auto minmax(0,1fr);gap:2px 10px}
  .a-when{grid-column:1}
  .a-who{grid-column:2}
  .a-what{grid-column:1 / -1;font-size:13px}
  .a-detail{grid-column:1 / -1;font-size:13px}
}

/* ============================================================
   OFFICER THEMES
   The default above is what members and signed-out visitors
   see. Each block below repaints the site for one officer.
   Only the palette changes; every layout rule stays put.
   ============================================================ */

/* Quinn and Jaszz — pink into violet */
[data-theme="pink"]{
  --bg:#230A1B;
  --panel:#380F2E;
  --raise:#4C1740;
  --line:#7C2A5E;
  --blue:#FFFFFF;
  --blue-soft:#FFA9CE;
  --pink:#FFFFFF;
  --pink-soft:#DFA6F4;
  --ice:#FCEBF4;
  --frost:#DFA9C7;
  --dim:#A17193;
}

/* Ahmad — blue into cyan, no pink at all */
[data-theme="blue"]{
  --bg:#04162E;
  --panel:#0A2749;
  --raise:#103A68;
  --line:#1B5390;
  --blue:#FFFFFF;
  --blue-soft:#93C4F8;
  --pink:#FFFFFF;
  --pink-soft:#8CE0F1;
  --ice:#E8F2FD;
  --frost:#9EC0E4;
  --dim:#628BB4;
}

/* ============================================================
   THEME BACKGROUNDS
   Drop a picture in assets/themes/ named after the theme and
   it appears behind everything, dimmed so the text stays
   readable. Delete the file and the plain colour comes back.
   ============================================================ */
[data-theme="panda"] body{
  background-image:url('themes/panda-bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
[data-theme="panda"] body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(14,16,19,.38);
  pointer-events:none;
}
[data-theme="panda"] .mast,
[data-theme="panda"] .panel,
[data-theme="panda"] .board,
[data-theme="panda"] .picklist{
  background-color:rgba(25,28,33,.91);
}
@media (max-width:720px){
  [data-theme="panda"] body{background-attachment:scroll}
}

/* Panda — charcoal, white and bamboo */
[data-theme="panda"]{
  --bg:#0E1013;
  --panel:#191C21;
  --raise:#242830;
  --line:#3B424C;
  --blue:#5C6672;
  --blue-soft:#C6CED7;
  --pink:#3E9077;
  --pink-soft:#84CDB4;
  --ice:#F3F6F9;
  --frost:#AAB4BF;
  --dim:#727C88;
}

/* must-play ticks on the import preview */
table.record th.lockcol,table.record td.lockcol{width:78px;text-align:center;padding-right:0}
.lockbox{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:4px}
.lockbox input{width:17px;height:17px;accent-color:var(--pink);margin:0;cursor:pointer}
table.record tr:has(.lockbox input:checked) .rn{color:var(--pink-soft);font-weight:600}
table.record tr:has(.lockbox input:checked){background:rgba(255,255,255,.07)}
@media (max-width:720px){
  table.record th.lockcol,table.record td.lockcol{width:44px}
  table.record th.lockcol{font-size:9.5px;letter-spacing:.06em}
  table.imp th,table.imp td{padding-right:10px}
  table.imp th.num,table.imp td.num{padding-right:12px}
  table.imp th:nth-child(2),table.imp td:nth-child(2){width:34px}
  table.imp th:nth-child(4),table.imp td:nth-child(4){width:58px}
  table.imp .rn{padding-right:12px;font-size:13px}
  table.imp td{font-size:12.5px}
}

/* ============================================================
   THE WAY IN
   A short loading beat, then the question. Pure CSS, so it
   still works with JavaScript switched off — and the answers
   are ordinary links, so nobody can get stuck here.
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;text-align:center
}
.sp-inner{position:relative;width:100%;max-width:460px}

.sp-load{animation:spOut .5s ease 3s forwards}
.sp-name{
  font-family:var(--font-display);font-size:19px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ice);
  animation:spIn .7s ease both
}
.sp-dots{
  margin-top:14px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--frost);animation:spIn .7s ease .25s both
}
.sp-dots span::after{content:"";animation:spDots 1.5s steps(1,end) infinite}

.sp-ask{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;opacity:0;animation:spIn .55s ease 3.4s forwards
}
.sp-q{
  font-family:var(--font-display);font-size:15px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--frost);margin-bottom:22px
}
.sp-picks{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.sp-btn{
  text-decoration:none;font-family:var(--font-display);font-size:15px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:16px 34px;border-radius:10px;min-width:168px
}
.sp-btn.kirke{
  background:var(--acc);
  display:inline-flex;align-items:center;justify-content:center;gap:9px
}
.sp-btn.kirke .crown{
  font-style:normal;font-size:19px;line-height:1;
  color:#FFE9A8;text-shadow:0 2px 6px rgba(0,0,0,.35)
}
.sp-btn.abuzer{background:var(--acc)}
.sp-btn:hover{filter:brightness(1.12)}
.sp-panda{
  display:inline-flex;align-items:center;gap:11px;margin-top:16px;text-decoration:none;
  border:1px solid var(--line);border-radius:10px;padding:9px 20px 9px 12px;
  background:rgba(255,255,255,.03)
}
.sp-panda img{height:34px;width:auto;display:block}
.sp-panda span{
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--frost)
}
.sp-panda:hover{border-color:#3E9077;background:rgba(62,144,119,.12)}
.sp-panda:hover span{color:var(--ice)}
.sp-skip{
  margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 12px;border-radius:8px
}
.sp-skip:hover{color:var(--frost)}
/* the line-up and the roll disagreeing about somebody's power */
.stepwarn{
  margin-top:18px;border:1px solid rgba(255,255,255,.45);border-radius:12px;
  padding:18px 20px;background:rgba(255,255,255,.05)
}
.stepwarn p{margin:0 0 10px;font-size:13.5px;color:var(--frost);line-height:1.6}
.stepwarn .who{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:12.5px;color:var(--roam);margin-bottom:14px
}
.stepwarn .go{margin:0}
@media (max-width:720px){
  .stepwarn{padding:16px}
  .stepwarn .go{width:100%}
}

/* the admin page is long — this saves scrolling past everything */
.jumpbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.jump-lbl{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)
}
.jumpbar a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  font-size:12.5px;text-decoration:none;color:var(--frost);
  border:1px solid var(--line);border-radius:8px
}
.jumpbar a:hover{border-color:var(--blue);color:var(--ice)}
@media (max-width:720px){
  .jump-lbl{flex:1 1 100%}
  .jumpbar a{flex:1 1 auto;justify-content:center;min-height:40px}
}
html{scroll-behavior:smooth}

/* nobody arriving for the first time knows what this question is for */
.sp-why{
  margin-top:16px;max-width:300px;font-size:11.5px;line-height:1.6;
  color:var(--dim);text-align:center
}
.side-again{color:var(--dim);text-decoration:none}
.side-again:hover{color:var(--frost)}

@keyframes spIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spOut{to{opacity:0;visibility:hidden}}
@keyframes spDots{0%{content:"."}33%{content:".."}66%{content:"..."}}

@media (max-width:720px){
  /* side by side on a phone, with Kirke taking 1.3 times the
     width of Abuzer. The flex numbers are what set that ratio. */
  .splash{padding:20px 16px}
  .sp-picks{flex-wrap:nowrap;gap:10px;width:100%}
  .sp-btn{flex:1 1 0;min-width:0;padding:15px 8px;font-size:13px;letter-spacing:.1em}

  .sp-btn.kirke .crown{font-size:16px}
  .sp-btn.panda{flex:0 0 auto;font-size:13px;padding:12px 22px 12px 16px;letter-spacing:.12em}
  .sp-btn.panda img{width:28px}
  .sp-name{font-size:16px;letter-spacing:.18em}
  .sp-panda{padding:8px 16px 8px 10px;gap:9px}
  .sp-panda img{height:29px}
  .sp-panda span{font-size:12px}
  /* a phone spends the first moment painting, so hold the
     loading screen a little longer here */
  .sp-load{animation-delay:3.8s}
  .sp-ask{animation-delay:4.2s}
}

/* No animation for anyone who has asked their device to avoid it:
   show the question straight away. */
/* Phones with Reduce Motion switched on were skipping the loading
   screen altogether, because a rule further up switches off every
   animation on the page. These put the timing back while keeping
   the movement out of it: the screens swap instantly rather than
   sliding or fading. */
@media (prefers-reduced-motion:reduce){
  .sp-name,.sp-dots{animation:spIn .01s linear both !important}
  .sp-load{animation:spOut .01s linear 3s forwards !important}
  .sp-ask{animation:spIn .01s linear 3.4s forwards !important}
  .sp-dots span::after{animation:none !important;content:"..." !important}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){
  .sp-load{animation-delay:3.8s !important}
  .sp-ask{animation-delay:4.2s !important}
}

/* ---------- battle results ---------- */
.reslots{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reslot{
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--bg)
}
.reslot.has-win{border-color:#46702F;background:rgba(134,208,106,.07)}
.reslot.has-loss{border-color:#8C3B38;background:rgba(255,123,142,.07)}
.re-team{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ice)}
.re-now{font-size:13px;color:var(--frost);margin-top:4px}
.reslot.has-win .re-now{color:#C6E5AF}
.reslot.has-loss .re-now{color:var(--medic)}
.re-buttons{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.re-btn{
  flex:1;min-width:64px;background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--frost);font:inherit;font-size:12.5px;font-weight:600;padding:9px 6px;cursor:pointer
}
.re-btn.win:hover{border-color:#46702F;color:#C6E5AF;background:rgba(134,208,106,.12)}
.re-btn.loss:hover{border-color:#8C3B38;color:var(--medic);background:rgba(255,123,142,.12)}
.re-btn.clear{flex:0 0 auto;color:var(--dim)}
.re-btn.clear:hover{color:var(--ice)}
.re-record{margin-top:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

table.record td.out{font-size:13px;color:var(--dim);white-space:nowrap}
table.record td.o-win{color:#9FD684}
table.record td.o-loss{color:var(--medic)}

@media (max-width:720px){
  .reslots{grid-template-columns:1fr}
  .reslot{padding:14px}
  .re-btn{font-size:12px;padding:10px 4px;min-width:56px}
  table.record td.out{font-size:11.5px}
}

/* picking two people to change places */
.swapbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)
}
.swapbar .hint{margin:0}
.swapbar .go:disabled{opacity:.45;cursor:not-allowed;filter:none}
.swapbox{
  display:inline-flex;align-items:center;gap:6px;margin-left:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;padding:2px 9px 2px 7px;vertical-align:1px
}
.rowbtns .swapbox input{width:18px;height:18px;flex:none}
.swapbox:hover{border-color:var(--blue)}
.swapbox input{width:18px;height:18px;accent-color:var(--blue);margin:0;cursor:pointer}
.swapbox span{font-size:11px;color:var(--frost)}
.swapbox:has(input:checked){border-color:var(--blue);background:rgba(220,232,255,.16)}
.swapbox:has(input:checked) span{color:var(--ice)}
.subs .swapbox{margin-left:10px}

/* moving someone between the twenty and the bench */
.mvbtn{
  background:none;border:1px solid var(--line);color:var(--frost);border-radius:6px;
  font:inherit;font-size:11px;padding:2px 10px;margin-left:8px;cursor:pointer;white-space:nowrap
}
.mvbtn:hover{border-color:var(--blue);color:var(--blue-soft)}
.mvbtn.up{border-color:var(--blue);color:var(--blue-soft)}
.mvbtn.up:hover{background:rgba(220,232,255,.14)}
.subs .mvbtn{margin-left:10px}
@media (max-width:720px){
  .mvbtn{margin-left:0;margin-top:6px}
  .swapbox{margin-left:0;margin-top:6px}
  .sheet.editing .c-nm{flex-wrap:wrap}
  .sheet.editing .pname{flex:1 1 100%;font-size:14.5px;white-space:normal;overflow-wrap:anywhere}
  /* ---- the roster row while an officer is editing ----
     Reading order first: name, power, where they are assigned.
     The buttons come last, all the same size, two to a line. */
  .sheet.editing tr:has(.rowbtns){align-items:center}
  .sheet.editing .c-nm{display:contents}
  .sheet.editing .pname{grid-column:2;grid-row:1;font-size:15px;
    white-space:normal;overflow-wrap:anywhere;min-width:0}
  .sheet.editing .c-as{order:0}
  .sheet.editing .rowbtns{grid-column:1 / -1;order:9;margin:10px 0 0}

  .rowbtns{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    width:100%;margin-left:0;margin-top:10px
  }
  .rowbtns .inline{display:block;min-width:0}
  .rowbtns .nsbtn,
  .rowbtns .swapbox,
  .rowbtns .kill,
  .rowbtns .mvteam,
  .rowbtns .mvbtn{
    width:100%;min-width:0;height:36px;margin:0;
    font-size:12px;padding:0 8px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px
  }
  .swapbox input{width:20px;height:20px}
  .swapbar{padding:12px 14px;gap:10px}
  .subs.editing li{gap:6px 8px}
  .subs.editing .nm{flex:1 1 100%;min-width:0}
  .subs.editing .kill{margin-left:0}
  .subs.editing .rowbtns{margin-top:6px}
}

/* what the backup file holds */
.bklist{list-style:none}
.bklist li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-top:1px solid rgba(44,66,112,.5);font-size:13.5px;color:var(--frost)
}
.bklist li:first-child{border-top:none}
.bklist b{font-family:var(--font-body);font-size:14px;color:var(--ice);font-weight:600}
/* next and previous, under the activity log */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(44,66,112,.5)
}
.pager .nsbtn{
  margin:0;height:32px;padding:0 14px;font-size:12px;
  display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap
}
.pager .nsbtn.off{opacity:.32;cursor:default}
.pager .nsbtn.off:hover{border-color:var(--line);color:var(--frost)}
.pg-where{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:12px;color:var(--dim);letter-spacing:.04em;text-align:center;flex:1 1 auto
}
@media (max-width:520px){
  .pager .nsbtn{flex:1 1 auto;justify-content:center}
  .pg-where{order:-1;flex:1 1 100%;margin-bottom:4px}
}

/* what the roll has for you, on your own details tab */
.minelist{list-style:none;margin:0;padding:0}
.minelist li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-top:1px solid rgba(44,66,112,.5);
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:13.5px;color:var(--frost)
}
.minelist li:first-child{border-top:none}
.minelist b{font-size:14.5px;color:var(--ice);font-weight:600}
.minelist li.tot{margin-top:4px;border-top-width:2px}
.minelist li.tot span{color:var(--ice)}
.minelist li.tot b{font-size:17px}
/* the read-only copy of your figures on the DSB tab */
/* it was sitting flush against the "signed in as" panel above it */
.yourfigures{margin-top:22px}
.yourfigures .ghost{
  display:inline-flex;align-items:center;min-height:40px;
  text-decoration:none;margin-top:4px
}

/* who turns up, on the results tab */
table.attend{width:100%;table-layout:fixed;border-collapse:collapse}
table.attend th,table.attend td{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  text-align:left;padding:11px 8px;white-space:normal;overflow-wrap:break-word
}
table.attend th{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:0 8px 12px
}
table.attend th.num,table.attend td.num{text-align:center;width:auto}
table.attend td{font-size:13.5px;color:var(--ice);border-top:1px solid rgba(44,66,112,.5)}
table.attend td.rn{font-weight:600}
table.attend td.num.bad{color:var(--pink-soft);font-weight:600}
table.attend td.when{color:var(--frost);font-size:12.5px}
table.attend th:nth-child(1),table.attend td:nth-child(1){width:36%}
table.attend th:nth-child(2),table.attend td:nth-child(2){width:18%}
table.attend th:nth-child(3),table.attend td:nth-child(3){width:16%}
table.attend th:nth-child(4),table.attend td:nth-child(4){width:30%}
@media (max-width:720px){
  table.attend th{font-size:9.5px;padding:0 4px 9px;white-space:nowrap}
  table.attend td{font-size:12px;padding:9px 4px}
  table.attend td.when{font-size:11px}
  /* MISSED was breaking across two lines at this width */
  table.attend th:nth-child(1),table.attend td:nth-child(1){width:31%}
  table.attend th:nth-child(2),table.attend td:nth-child(2){width:19%}
  table.attend th:nth-child(3),table.attend td:nth-child(3){width:19%}
  table.attend th:nth-child(4),table.attend td:nth-child(4){width:31%}
}

/* the book of name changes on the activity tab */
/* Four columns, four widths adding up to 100. If a column is ever
   added here, add its width too — leaving one out is what made the
   date print a letter per line. */
table.namechanges{width:100%;table-layout:fixed;border-collapse:collapse}
table.namechanges th,table.namechanges td{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  text-align:left;padding:11px 8px;white-space:normal;overflow-wrap:break-word
}
table.namechanges th{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:0 8px 12px
}
table.namechanges td{font-size:13.5px;color:var(--ice);border-top:1px solid rgba(44,66,112,.5)}
table.namechanges td.was{color:var(--dim)}
table.namechanges td.was .old{text-decoration:line-through}
table.namechanges td.now{font-weight:600}
table.namechanges td.when{color:var(--frost);font-size:12.5px}
/* the Friday that has not happened yet, at the top of the record */
table.record tr.thisweek td{background:rgba(220,232,255,.07)}
.wk-now{
  display:inline-block;margin-left:8px;font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-soft);border:1px solid var(--line);border-radius:20px;padding:2px 8px
}

table.namechanges td.who{color:var(--frost)}
table.namechanges td.who .self{color:var(--dim);font-style:italic}
table.namechanges td.who .unknown{opacity:.72}
table.namechanges th:nth-child(1),table.namechanges td:nth-child(1){width:26%}
table.namechanges th:nth-child(2),table.namechanges td:nth-child(2){width:28%}
table.namechanges th:nth-child(3),table.namechanges td:nth-child(3){width:23%}
table.namechanges th:nth-child(4),table.namechanges td:nth-child(4){width:23%}
table.namechanges td.was,table.namechanges td.now{overflow-wrap:anywhere}
table.namechanges td.when{white-space:nowrap}
@media (max-width:720px){
  /* four columns is too many at this width, so the date goes
     under the name it belongs to rather than being squeezed */
  table.namechanges th:nth-child(4),table.namechanges td:nth-child(4){display:none}
  table.namechanges th{font-size:9.5px;padding:0 4px 9px;white-space:nowrap}
  table.namechanges td{font-size:12px;padding:9px 4px}
  table.namechanges td.was{text-decoration:none}
  table.namechanges td.was .old{text-decoration:line-through}
  table.namechanges td.was::after{
    content:attr(data-when);display:block;margin-top:3px;
    font-size:10.5px;color:var(--dim)
  }
  table.namechanges th:nth-child(1),table.namechanges td:nth-child(1){width:36%}
  table.namechanges th:nth-child(2),table.namechanges td:nth-child(2){width:36%}
  table.namechanges th:nth-child(3),table.namechanges td:nth-child(3){width:28%}
}

@media (max-width:720px){
}

/* a randomizer row that cannot be ticked */
.pickrow.noPick{cursor:default}
.pickrow.noPick:hover{background:none}

.kill.tiny{
  font-size:11px;padding:0 12px;min-height:34px;border-radius:6px;
  display:inline-flex;align-items:center;margin-left:8px
}
@media (max-width:720px){
  .kill.tiny{min-height:40px;margin-left:0}
}

/* the box for adding another officer */
.addofficer{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.addofficer h4{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--pink-soft);margin:0 0 6px
}
.addofficer-row{
  display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 10px
}
.addofficer-row .sq{flex:1 1 200px;min-width:0}
.addofficer-row .sq label{
  display:block;margin:0 0 7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:600
}
.addofficer-row .sq input{margin:0}
.addofficer-row .go{flex:0 0 auto}
@media (max-width:720px){
  /* Stacked, the 200px was being read as a height, which is why
     each box had a great empty gap under it. */
  .addofficer-row{flex-direction:column;align-items:stretch;gap:16px}
  .addofficer-row .sq{flex:0 0 auto}
  .addofficer-row .go{width:100%;margin-top:2px}
}

/* the backup block, now the last thing on the admin page */
.backupblock{margin-top:30px}
.backupblock .go{text-decoration:none;display:inline-flex;align-items:center}

/* the name the site already knows */
.namehint{font-size:12.5px;color:var(--blue-soft);margin-top:7px}

/* someone ticked must-play at import */
.tag-mp{
  display:inline-block;background:rgba(220,232,255,.18);color:var(--blue-soft);
  border-radius:5px;font-size:10.5px;padding:2px 8px;margin-left:9px;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;white-space:nowrap
}
.sheet.editing .tag-mp{flex:0 0 auto}


/* move a player to the other team */
.rowbtns .mvteam{
  height:26px;min-width:76px;margin:0;padding:0 10px;border-radius:6px;
  background:none;border:1px solid var(--line);color:var(--frost);
  font:inherit;font-size:11px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap
}
.rowbtns .mvteam:hover{border-color:var(--blue);color:var(--blue-soft)}
@media (max-width:720px){
  .rowbtns .mvteam{min-width:0;height:40px;font-size:12px}
}


/* someone removed a moment ago, still recoverable */
.putback{border-color:var(--blue);margin-bottom:22px}
.pblist{list-style:none}
.pblist li{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0;
  border-top:1px solid rgba(44,66,112,.5);font-size:14px
}
.pblist li:first-child{border-top:none}
.pb-name{font-family:var(--font-name);font-weight:600;color:var(--ice)}
.pb-team{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pb-pw{font-family:var(--font-num);font-size:13px;color:var(--frost);margin-left:auto}
@media (max-width:720px){
  .pblist li{gap:10px}
  .pb-pw{margin-left:0}
}


/* the waiting list uses the same button sizes as the line-up */
.waitlist .rowbtns .nsbtn,
.waitlist .rowbtns .mvteam,
.waitlist .rowbtns .kill{height:26px;min-width:88px;font-size:11px}
@media (max-width:720px){
  .waitlist .rowbtns{margin-top:6px}
  .waitlist .rowbtns .nsbtn,
  .waitlist .rowbtns .mvteam,
  .waitlist .rowbtns .kill{min-width:76px;height:28px}
}

/* ---------- the randomizer's picking box ---------- */
.randobox{
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:18px 20px;margin-bottom:16px
}
.rb-empty{font-size:13.5px;color:var(--dim);text-align:center;padding:14px 0}
.rb-body{display:block}
.rb-side{padding:2px 0}
.rb-head{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink-soft);margin-bottom:10px
}
.rb-count{
  display:inline-block;background:var(--raise);border-radius:20px;padding:1px 9px;
  font-family:var(--font-num);font-size:11px;color:var(--frost);margin-left:6px;letter-spacing:0
}
.rb-rule{height:1px;background:var(--line);margin:16px 0}
.rb-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 18px}
.rb-list li{
  display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--ice);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px
}
.rb-pos{font-family:var(--font-num);font-size:11px;color:var(--dim);flex:none;min-width:18px}
.rb-name{font-family:var(--font-name);overflow-wrap:anywhere}
.rb-list:empty::after{
  content:"—";color:var(--dim);font-size:13px;padding:6px 2px
}

.randobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.randobar .hint{margin:0;flex:1 1 180px}
.go.alt{background:var(--raise);border:1px solid var(--blue);color:var(--blue-soft)}
.go.alt:hover:not(:disabled){background:var(--blue);color:var(--acc-ink);filter:none}
.go:disabled{opacity:.4;cursor:not-allowed;filter:none}

@media (max-width:720px){
  .randobox{padding:14px}
  .rb-list{grid-template-columns:1fr;gap:6px}
  .randobar{gap:8px}
  .randobar .go.small{flex:1 1 auto}
}

[dir="rtl"] .notfinal{border-left:none;border-right:3px solid var(--pink)}


/* the queue, shown to members under the substitutes */
.waitshow{background:var(--raise);padding:16px 26px 18px;border-top:1px solid var(--line)}
.waitshow ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;margin-top:11px}
.waitshow li{
  display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:var(--frost);
  border-bottom:1px solid rgba(44,66,112,.45);padding-bottom:4px
}
.waitshow .sn{font-family:var(--font-num);font-size:12px;color:var(--dim);width:24px;flex:none}
.waitshow .nm{flex:1;font-family:var(--font-name)}
.waitnote{font-size:12px;color:var(--dim);margin-top:12px;line-height:1.6}
@media (max-width:720px){
  .waitshow{padding:16px}
  .waitshow ul{grid-template-columns:1fr}
}

/* ---------- the alliance member list ---------- */
.mb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.mb-row label{margin-top:0}
select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--ice);font:inherit;padding:13px 14px;cursor:pointer;

  /* our own arrow, so the box matches the rest of the site */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--frost) 50%),
                   linear-gradient(135deg,var(--frost) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:42px
}
select:hover{border-color:var(--blue)}
select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(220,232,255,.3)}

/* The open list is drawn by the phone or computer, not by this page,
   so how much of this it honours depends on the browser. */
select option{background:var(--raise);color:var(--ice);padding:10px}
select option:checked{background:var(--blue);color:var(--acc-ink)}

[dir="rtl"] select{
  background-position:20px center,14px center;
  padding-right:14px;padding-left:42px
}
.memberadd .go{margin-top:22px}

table.members td.ty{font-size:12.5px;color:var(--frost)}
table.members td.pin{font-family:var(--font-num);font-size:13.5px;color:var(--blue-soft);letter-spacing:.04em;word-break:break-all}
.latinfix{display:flex;gap:6px;align-items:center}
.latinfix input{width:120px;padding:5px 8px;font-size:12px;border-radius:6px}
.latinfix .nsbtn{height:26px;min-width:52px}
table.members td.mb-btns{width:200px;text-align:right}
table.members th,table.members td{padding-right:18px}
table.members th:last-child,table.members td:last-child{padding-right:0}

/* ---------- the power calculator ---------- */
.calcout{margin-top:22px}
.calc-big{
  font-family:var(--font-num);font-size:38px;font-weight:600;
  color:var(--ice);margin:6px 0 2px;letter-spacing:-.01em;line-height:1.1
}
.calc-m{font-size:13.5px;color:var(--pink-soft);margin:0 0 18px}
.calcout.quiet .calc-big{color:var(--dim)}

.calc-steps{list-style:none;margin:0 0 16px;padding:0}
.calc-steps li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-top:1px solid rgba(44,66,112,.5);
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:13.5px;color:var(--frost)
}
.calc-steps li:first-child{border-top:none}
.calc-steps b{font-family:var(--font-num);font-size:14.5px;color:var(--ice);font-weight:500}
.calc-steps li.tot{border-top-width:2px;margin-top:4px}
.calc-steps li.tot span{color:var(--ice)}
.calc-steps li.tot b{font-size:17px;font-weight:600}

/* the four little drawings showing where each number lives */
/* it was sitting flush against the answer panel above it */
.wherepanel{margin-top:22px}
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.guide{margin:0}
/* the screenshots she took, sitting on a light card so the game's
   own pale artwork does not float on the dark page */
.guide img{
  width:100%;height:auto;display:block;border-radius:10px;
  background:#E9E3DC;border:1px solid rgba(44,66,112,.5)
}
.guide figcaption{
  display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:13px;line-height:1.6;color:var(--frost)
}
.g-step{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--pink);
  color:#fff;font-size:12px;font-weight:700;margin-top:1px
}
/* the long game figures need a smaller size to stay inside their box */

@media (max-width:720px){
  .guides{grid-template-columns:1fr;gap:20px}
  .calc-big{font-size:30px}
}

/* the randomizer sits above the board it shuffles, so it needs a
   clear gap below it — open, the two ran together */
.randopanel{margin-bottom:24px}
.randopanel[open]{margin-bottom:28px}

/* the officers' own row of tabs, quieter than the one above it */
.officernav{
  padding-top:0;margin-top:-6px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:12px
}
.officernav a{font-size:11.5px;color:var(--dim)}
.officernav a:hover{color:var(--frost)}
.officernav a.on{color:var(--pink-soft);border-bottom-color:var(--pink)}
.navtag{
  font-family:var(--font-display);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);opacity:.75
}
@media (max-width:720px){
  .officernav{gap:14px}
  .navtag{width:100%;margin-bottom:-4px}
}

/* the tick list and the pictures, side by side */
.shotsplit{display:block}
body.has-shotpic .shotsplit{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:26px;align-items:start
}
.shotpic{position:sticky;top:16px}
/* the strip is tall and thin, so it scrolls on its own rather
   than dragging the whole page down with it */
.shotpic .picwrap{
  max-height:78vh;overflow-y:auto;border-radius:10px;
  border:1px solid var(--line);background:var(--ink)
}
.shotpic img{
  width:100%;height:auto;display:block;cursor:zoom-in
}

/* clicking it puts the strip over the page at full size */
.shotover{
  position:fixed;inset:0;z-index:60;background:rgba(8,14,30,.94);
  overflow:auto;padding:20px;cursor:zoom-out
}
.shotover img{
  display:block;margin:0 auto;max-width:min(900px,100%);height:auto;border-radius:10px
}
.shotpic .ns-sub{margin-bottom:6px}
@media (max-width:900px){
  body.has-shotpic .shotsplit{grid-template-columns:1fr}
  .shotpic{position:static;margin-top:22px}
  .shotpic img{max-height:none}
}

/* the whole line-up, shown after a reading so an officer can
   compare it against what was ticked */
.lineupall{line-height:1.9}
.lu-ok{color:var(--dim)}
.lu-no{color:var(--ice);font-weight:600}

/* who the pictures will be checked against */
.whoagainst{
  margin-top:16px;padding:14px 16px;border:1px solid var(--line);
  border-radius:10px;background:rgba(220,232,255,.06)
}
.whoagainst .hint{line-height:1.6;overflow-wrap:anywhere}

/* reading the result screenshots */
.shotpanel{margin-top:26px}
.shotpanel input[type=file]{
  width:100%;padding:12px;box-sizing:border-box;font-size:13px;
  background:var(--ink);border:1px dashed var(--line);border-radius:9px;color:var(--frost)
}
.shotpanel .row-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0}
.ns-sub{
  margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)
}
.shotlist{list-style:none;margin:0;padding:0}
.shotlist li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid rgba(44,66,112,.5)
}
.shotlist li:first-child{border-top:none}
.shotlist .toggle{margin:0}
.sl-name{font-weight:600;font-size:14px;color:var(--ice);overflow-wrap:anywhere}
.sl-note{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:12px;color:var(--dim);overflow-wrap:anywhere
}
.shotlist.seen .sl-name{font-weight:400;color:var(--frost)}
.shotlist.seen li.shaky .sl-name{color:var(--roam);font-weight:600}
.shotlist.seen li.shaky .sl-note{color:var(--roam)}
.sl-empty{color:var(--dim);font-size:13.5px}
.shotseen{margin-top:20px}
.shotseen summary{
  cursor:pointer;font-size:12.5px;color:var(--dim);list-style:none;padding:6px 0
}
.shotseen summary::-webkit-details-marker{display:none}
.shotseen summary::before{content:"\25B8 ";color:var(--dim)}
.shotseen[open] summary::before{content:"\25BE "}
@media (max-width:720px){
  .shotpanel .row-btns .go{width:100%;justify-content:center}
  .shotlist li{align-items:flex-start}
}

/* the standing signpost at the top of the join page */
.alreadyin{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:26px
}
.ai-title{
  margin:0;font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--blue-soft)
}
.alreadyin .go{
  flex:0 0 auto;height:44px;padding:0 20px;text-decoration:none;
  display:inline-flex;align-items:center
}
@media (max-width:720px){
  .alreadyin{gap:14px}
  .alreadyin .go{width:100%;justify-content:center}
}

/* the squads panel carries its own total, so a second panel is
   not needed just to repeat the numbers */
.squadhead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:6px
}
.squadtotal{margin:0;display:flex;align-items:baseline;gap:9px}
.squadtotal span{
  font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)
}
.squadtotal b{font-family:var(--font-num);font-size:19px;color:var(--ice)}

/* a quiet link that sits inside a line of text */
.quietlink{color:var(--blue-soft);text-decoration:none;border-bottom:1px solid rgba(220,232,255,.4)}
.quietlink:hover{border-bottom-color:var(--blue)}

/* the PIN and the name, folded away until wanted */
.accountpanel .tuck-body form + .tuckrule{margin:22px 0}
.tuckrule{border:none;border-top:1px solid rgba(44,66,112,.5)}

/* asking whether a near-identical name is the same person */
.asknear{margin-bottom:22px;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.asknear .blocktitle{color:var(--pink-soft)}
.asknear p{font-size:13.5px;line-height:1.65;color:var(--frost);margin:0}
.asknear .row-btns{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.asknear .go,.asknear .ghost{
  margin:0;height:44px;padding:0 20px;font-size:13px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center
}
@media (max-width:720px){
  .asknear .go,.asknear .ghost{flex:1 1 auto}
}

/* the way onward when somebody has already joined */
.gotodsb{margin:-6px 0 20px}
.gotodsb .go{display:inline-flex;align-items:center;height:44px;text-decoration:none}
@media (max-width:720px){ .gotodsb .go{width:100%;justify-content:center} }

/* putting a registration right, from the registration tab */
.regfix{margin-top:18px;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.regfix .blocktitle{color:var(--pink-soft)}
.regfix .row-btns{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.regfix .row-btns .ghost,.regfix .row-btns .kill{
  margin:0;height:44px;padding:0 20px;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center
}
@media (max-width:720px){
  .regfix .row-btns .ghost,.regfix .row-btns .kill{flex:1 1 auto;justify-content:center}
}

/* an officer standing in for a member, so it is never mistaken
   for the member being signed in themselves */
.youare.standin{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.youare.standin .board-kicker{color:var(--pink-soft)}
.foundrow .openas{flex:0 0 auto}
.foundrow .openas .ghost{height:48px;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:720px){
  .foundrow .openas{flex:1 1 100%}
  .foundrow .openas .ghost{width:100%;justify-content:center}
}

/* a PIN box with an eye to reveal it */
.peekwrap{position:relative;display:block}
.peekwrap input{width:100%;padding-right:46px;box-sizing:border-box}
.peekbtn{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;margin:0;
  background:none;border:none;border-radius:8px;
  color:var(--dim);cursor:pointer
}
.peekbtn:hover{color:var(--blue-soft);background:rgba(220,232,255,.12)}
.peekbtn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.foundrow .peekwrap{flex:0 0 auto;width:120px}
@media (max-width:720px){
  .foundrow .peekwrap{flex:1 1 auto;width:auto;min-width:0}
}

/* the little list of names that appears as you type */
.lookupwrap{position:relative}
.suggest{
  list-style:none;margin:6px 0 0;padding:6px;position:absolute;z-index:40;
  left:0;right:0;top:100%;
  background:var(--raise);border:1px solid var(--blue);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);max-height:280px;overflow-y:auto
}
.suggest li{
  padding:11px 12px;border-radius:7px;cursor:pointer;
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;font-size:14.5px;color:var(--ice)
}
.suggest li:hover,.suggest li.on{background:rgba(220,232,255,.22)}
.suggest li.none{color:var(--dim);cursor:default;font-size:13.5px}
.suggest li.none:hover{background:none}

/* finding yourself */
.foundlist{list-style:none}
.foundlist li{border-top:1px solid rgba(44,66,112,.5);padding:12px 0}
.foundlist li:first-child{border-top:none}
.foundrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.fd-name{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;font-size:15px;font-weight:600;
  flex:1 1 160px;min-width:0;overflow-wrap:anywhere;padding-bottom:12px
}
/* the box says what it wants above it, rather than in faint grey inside it */
.fd-pin{display:block;flex:0 0 auto}
.fd-pin label{
  display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-soft)
}
/* the box and the button are the same height, so their tops and
   bottoms line up rather than one floating inside the other */
.foundrow input{
  width:120px;height:48px;margin:0;padding:0 12px;box-sizing:border-box;
  text-align:center;letter-spacing:.14em;
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;font-size:15px
}
.foundrow .go{flex:0 0 auto;height:48px;padding:0 22px;display:inline-flex;
  align-items:center;justify-content:center}
.youare{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mt-panel{margin-top:20px}
.you-name{font-family:var(--font-name);font-size:19px;font-weight:600;color:var(--ice);margin-top:3px}
.youare form{margin-left:auto}

@media (max-width:720px){
  .mb-row{grid-template-columns:1fr 1fr;gap:10px}
  table.members td.mb-btns{width:auto}
  table.members th,table.members td{padding-right:10px}
  /* On a phone the name takes its own line, then the box and the
     button share the next one, bottoms level. */
  .foundrow{align-items:flex-end}
  .fd-name{flex:1 1 100%;padding-bottom:0}
  .fd-pin{flex:1 1 0;min-width:0}
  .foundrow input{width:100%;height:48px}
  .foundrow .go{flex:0 0 auto;height:48px;padding:0 18px}
  .youare form{margin-left:0}
}

/* the officer's edit panel on the alliance tab */
.editmember{margin-bottom:26px}
.editmember .row-btns{margin-top:20px;align-items:center}

/* the same search box, above the log */
.logfind{margin-bottom:20px}
.logfind label{color:var(--dim)}

/* the search box above the roll */
.rollfind{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 18px
}
.rollfind label{
  display:block;width:100%;margin:0 0 7px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)
}
.rollfind input[type=text]{
  width:260px;height:44px;margin:0;padding:0 14px;box-sizing:border-box;font-size:14px
}
.rollfind .go{height:44px;padding:0 20px;display:inline-flex;align-items:center}
.rollfind .ghost.tiny{height:44px;min-height:44px}
.rf-count{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  font-size:12px;color:var(--dim);padding-bottom:14px;margin-left:auto
}
@media (max-width:720px){
  .rollfind{gap:10px}
  .rollfind input[type=text]{flex:1 1 auto;width:auto;min-width:0}
  .rollfind .go{flex:0 0 auto}
  .rf-count{flex:1 1 100%;margin:0;padding:0}
}

/* the spreadsheet button, beside Search */
.rollfind .rollcsv{
  display:inline-flex;align-items:center;height:44px;padding:0 18px;
  text-decoration:none;white-space:nowrap
}
@media (max-width:720px){
  .rollfind .rollcsv{flex:1 1 auto;justify-content:center}
}

/* ---------- the alliance roll ----------
   Everything fits on the page, so there is no sideways scrolling.
   One font, one size, everything centred. */
.tablewrap{overflow:visible;margin:0;padding:0}

table.alliance{width:100%;table-layout:fixed;border-collapse:collapse}

table.alliance th,
table.alliance td,
table.alliance td.rn,
table.alliance td.num,
table.alliance td.ty,
table.alliance td.total,
table.alliance th.num{
  font-family:"Poppins","Noto Sans",system-ui,sans-serif;
  text-align:center;
  vertical-align:middle;
  white-space:normal;
  width:auto;
}

table.alliance th,
table.alliance th.num{
  font-size:11px;font-weight:600;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  padding:0 6px 6px;
}

table.alliance td,
table.alliance td.rn,
table.alliance td.num,
table.alliance td.ty,
table.alliance td.total{
  font-size:13.5px;font-weight:400;color:var(--ice);
  padding:12px 6px;
  border-top:1px solid rgba(44,66,112,.5);
}
table.alliance td.rn{font-weight:400;overflow-wrap:break-word;word-break:normal}
table.alliance td.total{font-weight:600}
table.alliance td.ty{color:var(--frost)}

/* column widths — these add up to 100 so nothing overflows */
table.alliance th:nth-child(1),table.alliance td:nth-child(1){width:4%}
table.alliance th:nth-child(2),table.alliance td:nth-child(2){width:15%}
table.alliance th:nth-child(3),table.alliance td:nth-child(3){width:8%}
table.alliance th:nth-child(4),table.alliance td:nth-child(4){width:7.5%}
table.alliance th:nth-child(5),table.alliance td:nth-child(5){width:8%}
table.alliance th:nth-child(6),table.alliance td:nth-child(6){width:7.5%}
table.alliance th:nth-child(7),table.alliance td:nth-child(7){width:8%}
table.alliance th:nth-child(8),table.alliance td:nth-child(8){width:7%}
table.alliance th:nth-child(9),table.alliance td:nth-child(9){width:6.5%}
table.alliance th:nth-child(10),table.alliance td:nth-child(10){width:8.5%}
table.alliance th:nth-child(11),table.alliance td:nth-child(11){width:20%}

/* when the figures were last touched */
table.alliance td.upd{color:var(--dim);font-size:12.5px}
table.alliance td.upd.stale{color:#FF9B9B;font-weight:600}
table.alliance td.upd.never{color:var(--dim);opacity:.55}

/* figures over STALE_AFTER days old — whole row picked out in red */
table.alliance tr:has(td.upd.stale) td{background:rgba(226,75,74,.26);color:#FFFFFF}
table.alliance tr:has(td.upd.stale) td:first-child{box-shadow:inset 3px 0 0 #E24B4A}
table.alliance tr:has(td.upd.stale) td.ty{color:#FFE1E1}
table.alliance tr:has(td.upd.stale) td.cnum{color:#FFE1E1}

/* ---------- polls ---------- */
.pollbadge{
  display:inline-block;border-radius:5px;font-size:10.5px;padding:2px 8px;margin-left:8px;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px
}
.pollbadge.open{background:rgba(134,208,106,.18);color:#C6E5AF}
.pollbadge.closed{background:rgba(255,255,255,.14);color:var(--ice)}
.pollmeta{font-size:12.5px;color:var(--dim);margin:4px 0 18px}
.pollcard h2{
  font-family:var(--font-display);font-size:18px;font-weight:500;
  letter-spacing:.04em;margin:4px 0 2px
}
.pollvoters{font-size:12.5px;color:var(--frost);margin-top:4px;line-height:1.6}
.polloptrow{margin-bottom:14px}
.polloptline{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.polloptline strong{font-size:15px;font-weight:600}
.polloptline .cnt{font-size:12.5px;color:var(--dim);white-space:nowrap}
.notyet{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.notyet .lbl{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:8px
}
.notyet .names{font-size:13px;color:#FFFFFF;line-height:1.7}
.votedlist{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.votedlist .lbl{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:8px
}
.votedlist .names{font-size:13px;color:var(--frost);line-height:1.7}

/* the roll-call lists: bulleted, alphabetical already from the
   query, laid out in as many columns as comfortably fit — 3 or 4
   on desktop, fewer as the screen narrows, one on a phone */
.namegrid{list-style:none;margin:0;padding:0;column-width:180px;column-gap:22px}
.namegrid li{
  font-size:13px;line-height:1.9;break-inside:avoid;-webkit-column-break-inside:avoid;
  padding-left:13px;position:relative
}
.namegrid li::before{content:'\2022';position:absolute;left:0;color:var(--dim)}
.notyet .namegrid li{color:#FFFFFF}
.votedlist .namegrid li{color:var(--frost)}

/* the counting column down the left */
table.alliance th.cnum,table.alliance td.cnum{color:var(--dim);font-weight:400}

/* ---------- members who left ---------- */
/* A plain, auto-sized table on purpose — this is a different
   shape from the main roll (5 columns, not 11), so it must not
   inherit table.alliance's fixed column widths, which were sized
   for a completely different table and mangled names here. */
table.leftroll{table-layout:auto}
table.leftroll td.mb-btns{width:1%;white-space:nowrap;text-align:right}
@media (max-width:520px){
  table.leftroll th.mvcol,table.leftroll td.mvcol{display:none}
}

/* a header you can press to sort by it */
table.alliance th a{
  color:inherit;text-decoration:none;display:block;
  border-bottom:1px solid transparent;padding:13px 0 8px
}
table.alliance th a:hover{color:var(--ice);border-bottom-color:var(--blue)}
table.alliance th a.sorted{color:var(--pink-soft)}

/* the long heading on a screen with room, the short one on a phone */
table.alliance th .h-short{display:none}

/* the buttons, centred under their heading — wraps to a second
   line rather than spilling into the next column if there isn't
   room for all of them side by side */
table.alliance td.mb-btns{padding-left:4px;padding-right:4px}
table.alliance .rowbtns{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 6px;margin:0}
table.alliance .rowbtns .nsbtn,
table.alliance .rowbtns .kill{
  min-width:0;height:26px;margin:0;padding:0 9px;font-size:11px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;line-height:1;white-space:nowrap
}

/* On a phone it stays the same table. The two "type" columns fold in
   under the power beside them, which is what makes it fit. */
@media (max-width:720px){
  table.alliance th.typecol,table.alliance td.typecol{display:none}

  table.alliance th .h-long{display:none}
  table.alliance th .h-short{display:inline;white-space:nowrap;letter-spacing:0}

  table.alliance th,
  table.alliance th.num{font-size:8px;letter-spacing:0;padding:0 2px 4px;line-height:1.3}
  table.alliance td,
  table.alliance td.rn,
  table.alliance td.num,
  table.alliance td.ty,
  table.alliance td.total{font-size:11.5px;padding:10px 3px}

  table.alliance td.num[data-type]:not([data-type=""])::after{
    content:attr(data-type);display:block;
    font-size:9.5px;color:var(--frost);margin-top:3px;line-height:1.2
  }

  /* the date folds away on a phone, the same way the types do */
  table.alliance th.upcol,table.alliance td.upcol{display:none}

  table.alliance th:nth-child(1),table.alliance td:nth-child(1){width:5%}
  table.alliance th:nth-child(2),table.alliance td:nth-child(2){width:20%}
  table.alliance th:nth-child(3),table.alliance td:nth-child(3){width:13.5%}
  table.alliance th:nth-child(5),table.alliance td:nth-child(5){width:13.5%}
  table.alliance th:nth-child(7),table.alliance td:nth-child(7){width:13.5%}
  table.alliance th:nth-child(8),table.alliance td:nth-child(8){width:9%}
  table.alliance th:nth-child(9),table.alliance td:nth-child(9){width:8.5%}
  table.alliance th:nth-child(11),table.alliance td:nth-child(11){width:17%}

  /* the three buttons sit one above the other once the column narrows */
  table.alliance .rowbtns{flex-direction:column;align-items:stretch;gap:4px}
  table.alliance .rowbtns .nsbtn,
  table.alliance .rowbtns .kill{min-width:0;width:100%;height:22px;padding:0 4px;font-size:9.5px}
}

/* the narrowest phones — keep the headings on one line */
@media (max-width:400px){
  table.alliance th,
  table.alliance th.num{font-size:7.5px}
  table.alliance .rowbtns .nsbtn,
  table.alliance .rowbtns .kill{font-size:9px;padding:0 2px}
}

/* the squad boxes, wherever they appear */
.squadgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:8px}
.squadgrid.three{grid-template-columns:repeat(3,1fr)}
.squadgrid .sq label{display:block;margin:0 0 7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:600}
.squadgrid .sq input,.squadgrid .sq select{margin:0}

/* the steps down the joining page */
.steps{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;counter-reset:s}
.steps li{
  counter-increment:s;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:7px 14px 7px 10px;
  display:flex;align-items:center;gap:7px
}
.steps li::before{
  content:counter(s);font-family:var(--font-num);font-size:10px;
  width:18px;height:18px;border-radius:50%;background:var(--raise);
  display:flex;align-items:center;justify-content:center;flex:none
}
.steps li.on{color:var(--ice);border-color:var(--pink)}
.steps li.on::before{background:var(--pink);color:var(--acc-ink)}
.steps li.done{color:var(--frost)}
.steps li.done::before{background:var(--blue);color:var(--acc-ink);content:"✓"}

@media (max-width:720px){
  .squadgrid{grid-template-columns:1fr 1fr;gap:12px}
  .squadgrid.three{grid-template-columns:1fr}
  .steps{gap:6px}
  .steps li{font-size:10.5px;padding:6px 11px 6px 8px;letter-spacing:.06em}
}

/* ============================================================
   SEGA UNMUTED
   ============================================================ */

/* the big hero header — breaks out of the normal centred .wrap
   to run full width, the same trick as no other page on the site
   needed until now */
.unmuted-hero{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
  background:
    none;
  border-bottom:1px solid var(--line);
  padding:44px 18px 32px;margin-bottom:26px;text-align:left
}
.unmuted-hero.small{padding:26px 18px 22px;margin-bottom:20px}
.unmuted-hero .hero-kicker{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-soft);
  margin-bottom:8px;max-width:680px;margin-left:auto;margin-right:auto
}
.unmuted-hero .hero-title{
  font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.01em;
  background:linear-gradient(var(--ice),var(--ice));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;max-width:680px;margin-left:auto;margin-right:auto
}
.unmuted-hero .hero-body{margin-top:10px;font-size:14.5px;color:var(--frost);max-width:480px;margin-left:auto;margin-right:auto}
@media (min-width:720px){ .unmuted-hero .hero-title{font-size:56px} }

/* avatars — a photo, or a coloured initial when there isn't one */
.avatar{
  border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;color:#fff;overflow:hidden
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-md{width:44px;height:44px;font-size:16px}
.avatar-xl{width:92px;height:92px;font-size:30px}
.av-1{background:#3A5A8C}
.av-2{background:#4A6FA5}
.av-3{background:#2F4F7F}
.av-4{background:#5B7DB1}
.av-5{background:#34558A}
.av-6{background:#46628F}

/* the composer */
.composer{display:flex;gap:12px}
.composer-body{flex:1;min-width:0}
.composer textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ice);
  font:inherit;font-size:15px;padding:12px 14px;resize:vertical;min-height:50px
}
.composer-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;flex-wrap:wrap}
.attach-btn{
  background:none;border:1px dashed var(--line);border-radius:8px;color:var(--frost);cursor:pointer;
  font-size:12.5px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;outline:none
}
.attach-btn:hover{border-color:var(--pink-soft);color:var(--pink-soft)}
.attach-btn:focus-visible{border-color:var(--blue-soft);box-shadow:0 0 0 2px rgba(220,232,255,.3)}
.attach-preview{margin-top:10px;position:relative;display:inline-block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.attach-preview[hidden]{display:none}
.attach-preview img{display:block;max-height:180px;max-width:100%}
.attach-x{
  position:absolute;top:6px;right:6px;background:rgba(8,14,30,.8);border:none;color:#fff;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1
}

/* one post */
#feed .post{padding:22px 0;border-top:1px solid rgba(44,66,112,.5)}
#feed .post:first-child{border-top:none;padding-top:0}
.post-head{display:flex;gap:12px}
.post-main{flex:1;min-width:0}
.post-headline,.reply-headline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p-name,.reply-name{font-family:var(--font-name);font-weight:600;color:#fff;text-decoration:none}
.p-name{font-size:15px}
.reply-name{font-size:13px}
.p-time,.reply-time{font-size:12px;color:var(--dim)}
.wu-edited{font-size:11px;color:var(--dim);font-style:italic}
.p-text,.reply-text{white-space:pre-wrap;overflow-wrap:anywhere}
.p-text{margin-top:5px;font-size:14.5px;color:var(--ice)}
.reply-text{font-size:13.5px;margin-top:2px}
.p-photo{margin-top:12px;display:flex;justify-content:flex-start;max-height:520px}
.p-photo img{max-width:100%;max-height:520px;width:auto;height:auto;display:block;object-fit:contain;border-radius:12px}

/* reactions */
.reactbar{display:inline-flex;gap:4px;flex-wrap:wrap}
.react-btn{
  background:none;border:1px solid transparent;border-radius:16px;color:var(--dim);font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;transition:transform .12s
}
.react-btn:hover{border-color:var(--line);color:var(--frost)}
.react-btn.mine{border-color:var(--pink);color:var(--pink-soft);background:rgba(255,255,255,.08)}
.react-btn.bump{transform:scale(1.22)}
.react-emoji{font-size:14px;line-height:1}
.react-count{font-family:var(--font-num);font-size:11.5px}

.post-actions,.reply-actions{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.reply-actions{margin-top:6px;gap:14px}
/* Reply · Translate · Edit · Delete — clear breathing room between
   each one (margin, not gap, so it holds everywhere; inline-end so
   Arabic's right-to-left layout spaces the same way) */
.post-utility{display:flex;align-items:center;flex-wrap:wrap}
.post-utility > *{margin-inline-end:22px}
.post-utility > *:last-child{margin-inline-end:0}
.rlink{background:none;border:none;color:var(--dim);font-size:13px;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.reply-actions .rlink{font-size:11.5px}
.rlink:hover{color:var(--pink-soft)}

/* replies, nested however deep */
.replies{margin-top:14px;padding-left:56px;display:flex;flex-direction:column;gap:14px}
.reply{display:flex;gap:10px}
.reply-body{flex:1;min-width:0;background:var(--bg);border-radius:10px;padding:9px 13px}
.nested{margin-top:10px;padding-left:26px;display:flex;flex-direction:column;gap:10px}

.reply-compose{display:flex;gap:8px;margin-top:12px}
.reply-compose[hidden]{display:none}
.reply-compose.top{padding-left:56px}
.reply-compose .reply-input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:18px;color:var(--ice);
  font:inherit;font-size:13px;padding:8px 15px
}

/* inline editing */
.edit-box{
  width:100%;background:var(--bg);border:1px solid var(--pink);border-radius:8px;color:var(--ice);
  font:inherit;font-size:inherit;padding:8px 10px;resize:vertical;min-height:50px;margin-top:4px
}
.edit-row{display:flex;gap:8px;margin-top:6px}

/* a member's profile */
.profile-panel{position:relative;overflow:hidden}
.profile-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:90px;
  background:none;
  pointer-events:none
}
.profile-head{position:relative;display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-top:6px}
.profile-head-text{display:flex;flex-direction:column;gap:14px}
.profile-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avatar-edit-wrap{position:relative;flex:none;width:92px;height:92px}
.avatar-edit-btn{
  position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--acc);display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;cursor:pointer;border:2px solid var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.5)
}
.avatar-edit-btn:hover{filter:brightness(1.15)}
.plain-link{
  background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px
}
.plain-link:hover{color:var(--pink-soft)}
.profile-name{font-family:var(--font-display);font-size:24px;font-weight:600;color:#fff}
.sq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.sq-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-height:74px}
.sq-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sq-power{font-family:var(--font-num);font-size:19px;font-weight:600;color:#fff;margin-top:5px}
.sq-type{font-size:12px;color:var(--frost);margin-top:3px}
.total-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.total-num{font-family:var(--font-num);font-size:28px;font-weight:600;color:var(--pink-soft)}

@media (max-width:640px){
  .unmuted-hero .hero-title{font-size:34px}
  .replies{padding-left:0}
  .reply-compose.top{padding-left:0}
  .nested{padding-left:18px}
  .sq-grid{grid-template-columns:1fr}
}

/* the "signed in as" bar is also the way to your own profile now */
.youare-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex:1;min-width:0}
.youare-link:hover .you-name{color:var(--pink-soft)}
.youare-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* a link typed into a post or reply */
.wu-link{color:var(--blue-soft);word-break:break-all}
.wu-link:hover{color:var(--pink-soft);text-decoration:underline}

/* a little life in the reactions */
.react-btn{transition:transform .12s,border-color .12s,color .12s}
.react-btn:hover{transform:translateY(-1px)}

/* the poll builder, inside the composer */
.composer-toggles{display:flex;gap:8px;flex-wrap:wrap}
#pollToggle.mine{border-color:var(--pink);color:var(--pink-soft);background:rgba(255,255,255,.08)}
.poll-builder{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.poll-builder[hidden]{display:none}
.poll-q-input{
  background:var(--bg);border:1px solid var(--pink);border-radius:10px;color:var(--ice);
  font:inherit;font-size:15px;padding:11px 14px
}
.poll-opts-build{display:flex;flex-direction:column;gap:8px}
.poll-opt-input{
  background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ice);
  font:inherit;font-size:13.5px;padding:9px 13px
}

/* a poll, live in the feed */
.wu-poll{margin-top:8px}
.wu-poll-q{font-size:15px;font-weight:600;color:#fff;margin-bottom:10px}
.wu-poll-opts{display:flex;flex-direction:column;gap:8px}
.wu-poll-opt{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:10px 14px;cursor:pointer;overflow:hidden;color:var(--ice);font:inherit;font-size:13.5px
}
.wu-poll-opt:hover{border-color:var(--blue-soft)}
.wu-poll-opt.voted{border-color:var(--pink)}
.wu-poll-bar{
  position:absolute;left:0;top:0;bottom:0;background:rgba(220,232,255,.18);
  transition:width .3s ease;z-index:0
}
.wu-poll-opt.voted .wu-poll-bar{background:rgba(255,255,255,.2)}
.wu-poll-label{position:relative;z-index:1;font-weight:500}
.wu-poll-count{position:relative;z-index:1;font-family:var(--font-num);font-size:12px;color:var(--dim);white-space:nowrap}
.wu-poll-total{font-size:12px;color:var(--dim);margin-top:8px}

/* the emoji picker */
.emoji-wrap{position:relative;display:inline-block}
.emoji-btn{font-size:15px;line-height:1;padding:8px 12px}
.emoji-picker{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:50;
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:min(300px,85vw);
  max-height:280px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:var(--raise);border:1px solid var(--blue);border-radius:10px;padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.emoji-picker[hidden]{display:none}
.emoji-opt{
  background:none;border:none;font-size:20px;line-height:1;padding:7px 4px;border-radius:6px;cursor:pointer
}
.emoji-opt:hover{background:var(--line)}

/* the link builder, inside the composer */
.link-builder{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.link-builder[hidden]{display:none}
.wu-link-status{margin:0}
.link-preview{
  position:relative;display:flex;gap:12px;align-items:center;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:10px;overflow:hidden
}
.link-preview[hidden]{display:none}
.link-preview img{width:64px;height:64px;object-fit:cover;border-radius:7px;flex:none}
.link-preview-text{flex:1;min-width:0}
.link-preview-title{font-size:13.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-preview-domain{font-size:11.5px;color:var(--dim);margin-top:2px}
.link-preview .attach-x{position:static;margin-left:auto;flex:none}

/* a link card, once posted */
.link-card{
  margin-top:12px;display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;background:var(--bg)
}
.link-card:hover{border-color:var(--blue-soft)}
.link-card-img{width:120px;flex:none;background:rgba(0,0,0,.2)}
.link-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.link-card-text{padding:12px 14px;min-width:0}
.link-card-domain{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.link-card-title{font-size:14px;font-weight:600;color:#fff;margin-top:4px}
.link-card-desc{font-size:12.5px;color:var(--frost);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.translation{
  margin-top:8px;padding:9px 12px;background:rgba(220,232,255,.08);border:1px dashed var(--blue-soft);
  border-radius:8px;font-size:13.5px;font-style:italic;color:var(--ice);white-space:pre-wrap
}
.translation[hidden]{display:none}

.tr-wrap{position:relative;display:inline-block}
.lang-picker{
  position:absolute;bottom:calc(100% + 6px);left:0;z-index:45;
  display:flex;flex-direction:column;gap:2px;min-width:140px;
  background:var(--raise);border:1px solid var(--blue);border-radius:9px;padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.4)
}
.lang-picker[hidden]{display:none}
.lang-opt{
  background:none;border:none;color:var(--frost);font-size:12.5px;text-align:left;
  padding:7px 10px;border-radius:6px;cursor:pointer
}
.lang-opt:hover{background:var(--line);color:var(--ice)}

@media (max-width:520px){
  .link-card{flex-direction:column}
  .link-card-img{width:100%;height:140px}
}

/* the wall on a phone — proper margin from the screen edge, real
   separation between reactions and the reply/translate/edit/delete
   row below them, and touch-sized buttons instead of tiny cramped
   text all fighting for the same line */
@media (max-width:640px){
  .unmuted-hero{padding:32px 18px 26px}
  .mt-panel{margin-top:14px;padding:20px 18px}
  .youare{gap:10px;padding:20px 18px}

  /* signed-in bar: drop the redundant "My profile" text link on
     mobile — tapping the avatar or name already goes there, and
     without it "Signed in as [name]" has room to sit on one line */
  .my-profile-link,.youare-actions .my-profile-link{display:none}
  .youare .board-kicker{letter-spacing:.08em;font-size:10.5px;white-space:nowrap}
  .youare-actions{gap:0}

  .post{padding:18px 0}
  .post-head{gap:10px}
  .avatar-md{width:36px;height:36px;font-size:13px}

  /* reactions get their own line, sized for a thumb */
  .reactbar{gap:6px;flex-wrap:wrap}
  .react-btn{padding:6px 9px;font-size:13px;min-height:32px}

  /* reply / translate / edit / delete: a clearly separate row,
     wrapping freely, each one a real tap target */
  .post-utility,.reply-actions{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:12px
  }
  .post-utility > *,.reply-actions > *{margin-right:16px;margin-bottom:6px}
  .post-utility > *:last-child,.reply-actions > *:last-child{margin-right:0}
  .post-actions{flex-direction:column;align-items:flex-start;gap:0}
  .rlink{font-size:13px;min-height:30px;display:inline-flex;align-items:center}

  .replies{margin-top:12px}
  .reply-body{padding:10px 12px}
  .reply-actions{margin-top:8px;gap:12px 16px}
  .wu-poll-q{font-size:14px}
  .wu-poll-opt{padding:10px 12px;font-size:13px;min-height:40px}
  .composer-toggles{gap:8px}
  .attach-btn{padding:8px 12px;font-size:12.5px;min-height:36px}
  .link-card-text{padding:10px 12px}
  .lang-picker{min-width:150px}
  .lang-opt{padding:9px 11px;font-size:13px;min-height:36px}

  /* the profile page — this never actually got its own mobile
     pass before, it just inherited whatever the desktop numbers
     happened to be, which is why it felt cramped */
  .profile-panel{padding:24px 20px}
  .profile-head{gap:16px;padding-top:2px}
  .avatar-xl{width:72px;height:72px;font-size:24px}
  .profile-name{font-size:20px}
  .profile-head-text{gap:12px}
  .avatar-edit-btn{width:26px;height:26px;font-size:12px}
  .avatar-edit-wrap{width:72px;height:72px}
  .plain-link{font-size:11.5px}

  .sq-grid{gap:12px;margin-top:24px}
  .sq-card{padding:16px 18px;min-height:auto}
  .sq-label{font-size:10px;letter-spacing:.1em}
  .sq-power{font-size:22px;margin-top:6px}
  .sq-type{font-size:12.5px;margin-top:4px}

  .total-row{margin-top:22px;padding-top:18px}
  .total-num{font-size:26px}
}


/* ============================================================
   THE LOGIN GATE — every page goes through this now, styled to
   feel like a popup even though it sits in the normal page flow
   ============================================================ */
.login-gate{display:flex;justify-content:center;padding:36px 0 10px}
.login-modal{
  max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);
  border-color:var(--blue)
}
.lg-h2{
  font-family:var(--font-display);font-size:24px;font-weight:600;color:#fff;margin:6px 0 20px
}
.lg-join-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--frost)}
.lg-join-note a{color:var(--pink-soft);font-weight:600;text-decoration:none}
.lg-join-note a:hover{text-decoration:underline}
.sr-only-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

@media (max-width:520px){
  .login-gate{padding:20px 0 0}
  .login-modal{padding:20px 18px}
}

/* ============================================================
   @ TAGS + THE NOTIFICATION BELL
   ============================================================ */
.mention{
  color:var(--pink-soft);font-weight:600;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.10);padding:0 4px;border-radius:5px
}
.mention:hover{background:rgba(255,255,255,.2);color:#fff}
.avatar-xs{width:26px;height:26px;font-size:11px}

.mention-sug{
  position:absolute;z-index:120;width:250px;max-width:calc(100vw - 24px);
  background:var(--raise);border:1px solid var(--blue);border-radius:10px;padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.mention-sug[hidden]{display:none}
.mention-opt{
  display:flex;align-items:center;padding:7px 9px;border-radius:7px;
  font-size:13.5px;color:var(--ice);cursor:pointer
}
.mention-opt .avatar{margin-inline-end:9px}
.mention-opt.on,.mention-opt:hover{background:rgba(220,232,255,.22)}

.mast-sub{display:flex;align-items:center;justify-content:flex-end}
.mast-sub .signout,.mast-sub .mast-note{margin-inline-start:6px}
.bell-wrap{position:relative}
.bell{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:none;background:none;
  color:var(--frost);cursor:pointer
}
.bell:hover,.bell[aria-expanded="true"]{background:rgba(255,255,255,.07);color:#fff}
.bell-count{
  position:absolute;top:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--pink);color:var(--acc-ink);font-size:10.5px;font-weight:700;line-height:17px;text-align:center
}
.bell-panel{
  position:absolute;top:calc(100% + 8px);right:-8px;z-index:110;width:360px;
  max-height:70vh;overflow-y:auto;text-align:left;
  background:var(--raise);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.45)
}
.bell-panel[hidden]{display:none}
.bell-head{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ice)
}
.bell-head .plain-link{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--pink-soft);font-weight:500}
.bell-empty{padding:18px 14px;font-size:13px;color:var(--frost);margin:0}
.bell-item{
  display:flex;align-items:flex-start;padding:11px 14px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:rgba(255,255,255,.04)}
.bell-item.unread{background:rgba(255,255,255,.08)}
.bell-item .avatar{margin-inline-end:10px}
.bell-text{flex:1;min-width:0;display:block}
.bell-line{display:block;font-size:13px;color:var(--ice);line-height:1.4}
.bell-line strong{color:#fff}
.bell-quote{
  display:block;margin-top:3px;font-size:12px;color:var(--frost);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.bell-when{display:block;margin-top:3px;font-size:11px;color:var(--dim)}
.bell-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink);margin:6px 0 0 10px}
[dir="rtl"] .bell-panel{right:auto;left:-8px;text-align:right}

/* the post or reply a notification points at */
.post,.reply{scroll-margin-top:90px}
.post:target{outline:2px solid var(--pink);outline-offset:6px;border-radius:10px}
.reply:target > .reply-body{box-shadow:0 0 0 2px var(--pink) inset}

@media (max-width:720px){
  .mast-sub{justify-content:space-between}
  .mast-sub .bell-wrap{order:2}
  .bell-panel,[dir="rtl"] .bell-panel{position:fixed;left:12px;right:12px;width:auto;max-height:65vh}
}

/* a send that didn't go through — shown right under the box */
.send-err{
  margin:8px 0 0;padding:8px 11px;border-radius:8px;font-size:12.5px;line-height:1.45;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45)
}
.send-err a{color:var(--pink-soft);font-weight:600;white-space:nowrap}
.reply-compose.top + .send-err{margin-left:56px}
[dir="rtl"] .reply-compose.top + .send-err{margin-left:0;margin-right:56px}
@media (max-width:720px){
  .reply-compose.top + .send-err,[dir="rtl"] .reply-compose.top + .send-err{margin-left:0;margin-right:0}
}

/* Phones make every main button full width, which squeezed the
   reply box down to a sliver beside a giant Send. Keep Send its
   own size so the box gets the room. */
.reply-compose .reply-send{flex:none;width:auto;white-space:nowrap}
@media (max-width:720px){
  .reply-compose .reply-send{width:auto;padding:0 16px;min-height:40px}
  .reply-compose .reply-input{font-size:16px;min-height:40px}
}

/* the Post button while it works: stays bright, says what it's doing */
.go.working,.go.working:disabled{opacity:1;cursor:progress;filter:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btn-spin{
  width:14px;height:14px;flex:none;margin-inline-end:9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btnspin .8s linear infinite
}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* "Edit my powers" on your own profile */
.pf-edit{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.pf-edit > summary{list-style:none;display:inline-flex;cursor:pointer;user-select:none}
.pf-edit > summary::-webkit-details-marker{display:none}
.pf-edit[open] > summary{border-color:var(--pink);color:var(--pink-soft)}
.pf-edit-form{margin-top:16px}

/* ============================================================
   CLEANER POSTS AND REPLIES
   Only reactions in use show (as chips); one quiet action line
   (React · Reply · Translate); Edit/Delete live behind ⋯.
   ============================================================ */
.reactbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0}
.reactbar:not(:empty){margin-top:8px}
.react-chip{
  display:inline-flex;align-items:center;margin:0 6px 4px 0;padding:2px 9px 2px 7px;min-height:0;
  border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:var(--frost);font-size:12px;line-height:20px;cursor:pointer
}
.react-chip:hover{border-color:var(--line);color:var(--ice)}
.react-chip.mine{border-color:var(--pink);background:rgba(255,255,255,.10);color:var(--pink-soft)}
.react-chip .react-emoji{font-size:13px;margin-inline-end:4px}
.react-chip .react-count{font-size:11.5px}
[dir="rtl"] .react-chip{margin:0 0 4px 6px}

.post-actions{margin-top:12px}
.post-utility > *{margin-inline-end:22px}
.post-utility > *:last-child{margin-inline-end:0}
.reply-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:8px}
.reply-actions > *{margin-inline-end:18px}
.reply-actions > *:last-child{margin-inline-end:0}
.reply-actions .rlink{font-size:12px}
.react-toggle.on{color:var(--pink-soft)}
.react-toggle.bump{transform:scale(1.08)}

.react-wrap{position:relative;display:inline-block}
.react-pop{
  position:absolute;bottom:calc(100% + 8px);left:-8px;z-index:50;display:flex;white-space:nowrap;
  background:var(--raise);border:1px solid var(--line);border-radius:24px;padding:4px 6px;
  box-shadow:0 10px 26px rgba(0,0,0,.4)
}
.react-pop[hidden]{display:none}
[dir="rtl"] .react-pop{left:auto;right:-8px}
.react-pop .react-btn{
  background:none;border:none;border-radius:50%;padding:4px 6px;min-height:0;margin:0;
  font-size:21px;line-height:1.2;cursor:pointer;transition:transform .12s
}
.react-pop .react-btn:hover{transform:scale(1.2);background:rgba(255,255,255,.08)}
.react-pop .react-btn.mine{background:rgba(255,255,255,.18)}

.has-more{position:relative}
.post.has-more .post-headline,.reply-body.has-more .reply-headline{padding-inline-end:34px}
.more-wrap{position:absolute;top:6px;right:0;z-index:40}
.reply-body .more-wrap{top:6px;right:8px}
[dir="rtl"] .more-wrap{right:auto;left:0}
[dir="rtl"] .reply-body .more-wrap{left:8px}
.more-btn{
  width:30px;height:30px;border-radius:50%;border:none;background:none;color:var(--dim);
  font-size:18px;line-height:1;cursor:pointer;letter-spacing:1px
}
.more-btn:hover,.more-btn.open{background:rgba(255,255,255,.07);color:#fff}
.more-menu{
  position:absolute;top:34px;right:0;min-width:140px;background:var(--raise);border:1px solid var(--line);
  border-radius:10px;padding:5px;box-shadow:0 10px 26px rgba(0,0,0,.4)
}
.more-menu[hidden]{display:none}
[dir="rtl"] .more-menu{right:auto;left:0}
.more-menu button{
  display:block;width:100%;text-align:start;background:none;border:none;border-radius:7px;
  padding:9px 11px;font:inherit;font-size:13px;color:var(--ice);cursor:pointer
}
.more-menu button:hover{background:rgba(255,255,255,.06)}
.more-menu button.danger{color:#FFFFFF}

@media (max-width:720px){
  .post-utility{gap:0;margin-top:0}
  .post-utility > *,.reply-actions > *{margin-right:0;margin-inline-end:18px;margin-bottom:0}
  .post-utility > *:last-child,.reply-actions > *:last-child{margin-inline-end:0}
  .reply-actions{gap:0;margin-top:6px}
  .rlink{min-height:34px}
  .react-pop .react-btn{font-size:23px;padding:5px 7px;min-height:0}
  .more-btn{width:34px;height:34px}
}

/* React: the "+" for any emoji, and the full emoji panel */
.react-plus{
  width:32px;height:32px;margin:3px 2px 3px 4px;border-radius:50%;flex:none;cursor:pointer;
  border:1px dashed var(--line);background:none;color:var(--frost);font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center
}
.react-plus:hover{border-color:var(--pink);color:var(--pink-soft)}
.react-plus.mine{border-style:solid;border-color:var(--pink);background:rgba(255,255,255,.18);font-size:18px}
.react-grid{
  position:fixed;z-index:130;width:312px;max-width:calc(100vw - 16px);max-height:260px;overflow-y:auto;
  display:grid;grid-template-columns:repeat(8,1fr);padding:6px;
  background:var(--raise);border:1px solid var(--blue);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45)
}
.react-grid[hidden]{display:none}
.react-any{background:none;border:none;border-radius:8px;font-size:21px;line-height:1;padding:6px 0;cursor:pointer}
.react-any:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}

/* ============================================================
   NEW APPLICATIONS WAITING FOR AN OFFICER
   ============================================================ */
.nav-badge{
  display:inline-block;min-width:17px;height:17px;padding:0 5px;margin-inline-start:6px;border-radius:9px;
  background:var(--pink);color:var(--acc-ink);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  vertical-align:1px;letter-spacing:0
}
.approvals{margin:6px 0 26px;border-color:rgba(255,255,255,.5)}
.approvals .blocktitle{display:flex;align-items:center;margin:0 0 4px}
.approvals .blocktitle .nav-badge{margin-inline-start:10px}
.ap-list{margin-top:10px}
.ap-row{display:flex;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ap-row:first-child{border-top:none}
.ap-row > .avatar{margin-inline-end:14px}
.ap-who{flex:1;min-width:0}
.ap-name{font-weight:600;color:#fff;font-size:15px;word-break:break-word}
.ap-meta{font-size:12.5px;color:var(--frost);margin-top:3px;line-height:1.5}
.ap-meta b{color:var(--pink-soft);font-weight:600}
.ap-acts{display:flex;flex:none;margin-inline-start:14px}
.ap-acts form + form{margin-inline-start:8px}
.ap-acts .go.small,.ap-acts .ghost.small{height:38px;margin:0}
.applied{margin-top:20px;border-color:rgba(255,255,255,.5)}
.applied .blocktitle{margin:0 0 8px}
@media (max-width:720px){
  .ap-row{flex-wrap:wrap}
  .ap-acts{width:100%;margin:12px 0 0}
  .ap-acts form{flex:1}
  .ap-acts .go.small,.ap-acts .ghost.small{width:100%}
}

/* ============================================================
   ALLIANCE CHAT
   ============================================================ */
.chat{
  position:relative;display:flex;flex-direction:column;margin-top:18px;
  height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:460px;max-height:900px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden
}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
.chat-head h3{margin:0;font-size:14px;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.chat-online{font-size:12px;color:var(--frost);white-space:nowrap}
.chat-online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ddc84;margin-inline-end:6px}
.chat-feed{flex:1;overflow-y:auto;padding:12px 16px 8px;overscroll-behavior:contain}
.chat-older{display:block;margin:0 auto 10px}
.chat-older[hidden]{display:none}
.chat-empty{text-align:center;color:var(--frost);margin:40px 0;font-size:14px}
.chat-newpill{
  position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:5;border:none;border-radius:16px;
  padding:7px 14px;background:var(--pink);color:var(--acc-ink);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.chat-newpill[hidden]{display:none}
.c-day{text-align:center;font-size:11px;color:var(--dim);margin:14px 0 12px;letter-spacing:.08em;text-transform:uppercase}
.c-msg{display:flex;align-items:flex-end;margin-top:12px}
.c-msg.cont{margin-top:3px}
.c-msg > .avatar{margin-inline-end:9px;flex:none}
.c-msg.cont > .avatar{visibility:hidden}
.c-msg.cont .c-name{display:none}
.c-body{max-width:72%;min-width:0}
.c-name{font-size:12px;font-weight:600;color:var(--frost);margin:0 0 3px 4px}
.c-name span{font-weight:400;color:var(--dim);margin-inline-start:6px}
.c-bubble{
  display:inline-block;max-width:100%;background:var(--raise);color:var(--ice);border-radius:16px 16px 16px 5px;
  padding:8px 13px;font-size:14px;line-height:1.45;overflow-wrap:anywhere;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default;transition:transform .12s
}
.c-bubble.only-photo{padding:4px;background:transparent}
.c-text{white-space:normal}
.c-photo{display:block;max-width:260px;max-height:320px;border-radius:12px;margin-top:4px}
.c-bubble.only-photo .c-photo{margin:0}
.c-quote{
  border-inline-start:3px solid var(--pink);background:rgba(0,0,0,.2);border-radius:6px;padding:5px 8px;margin:2px 0 6px;
  font-size:12px;color:var(--frost);cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.c-quote b{display:block;color:var(--pink-soft);font-size:11.5px}
.c-tr{margin-top:5px;padding:6px 10px;border:1px dashed var(--blue-soft);border-radius:10px;font-size:12.5px;font-style:italic;color:var(--ice);background:rgba(220,232,255,.08);white-space:pre-wrap}
.c-tr[hidden]{display:none}
.c-chips{display:flex;flex-wrap:wrap}
.c-chips:empty{display:none}
.c-chip{
  margin:4px 5px 0 0;padding:1px 8px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--frost);cursor:pointer;line-height:20px
}
.c-chip.mine{border-color:var(--pink);color:var(--pink-soft);background:rgba(255,255,255,.1)}
.c-time{font-size:10.5px;color:var(--dim);margin:3px 6px 0}
.c-msg.me{justify-content:flex-end}
.c-msg.me .c-body{text-align:end}
.c-msg.me .c-bubble{background:var(--acc);color:var(--acc-ink);border-radius:16px 16px 5px 16px;text-align:start}
.c-msg.me .c-bubble.only-photo{background:transparent}
.c-msg.me .c-quote{background:rgba(255,255,255,.18);border-color:#fff;color:rgba(255,255,255,.92)}
.c-msg.me .c-quote b{color:#fff}
.c-msg.me .c-chips{justify-content:flex-end}
.c-msg.me .c-bubble .mention{background:rgba(255,255,255,.22);color:#fff}
.c-msg.me .c-bubble a.wu-link{color:#fff}
.c-msg.flash .c-bubble{box-shadow:0 0 0 2px var(--pink)}
.c-msg.cont.me .c-time{display:none}

/* long-press menu: dim everything, lift the held bubble, menu beside it */
.c-dim{position:fixed;inset:0;z-index:900;background:rgba(8,14,30,.62)}
.c-ghost{position:fixed;z-index:950;pointer-events:none}
.c-ghost .c-bubble{transform:scale(1.02);box-shadow:0 0 0 2px var(--pink),0 10px 30px rgba(0,0,0,.5)}
.c-ghost.me .c-bubble{background:var(--acc);color:var(--acc-ink);border-radius:16px 16px 5px 16px}
.c-menu{
  position:fixed;z-index:1000;background:var(--raise);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);padding:6px;min-width:250px;max-width:calc(100vw - 16px)
}
.c-dim[hidden],.c-ghost[hidden],.c-menu[hidden]{display:none}
.c-emos{display:flex;align-items:center;padding:2px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.c-emos button{background:none;border:none;font-size:22px;padding:3px 5px;border-radius:50%;cursor:pointer;line-height:1.2}
.c-emos button:hover{background:rgba(255,255,255,.08)}
.c-emos button.mine{background:rgba(255,255,255,.2)}
.c-emos button.plus{font-size:16px;border:1px dashed var(--line);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:4px;color:var(--frost);padding:0}
.c-act{display:flex;align-items:center;width:100%;background:none;border:none;text-align:start;padding:9px 10px;border-radius:8px;font:inherit;font-size:14px;color:var(--ice);cursor:pointer}
.c-act:hover{background:rgba(255,255,255,.07)}
.c-act i{font-style:normal;width:26px}
.c-act.danger{color:#FFFFFF}
.c-grid{display:grid;grid-template-columns:repeat(8,1fr);max-height:250px;overflow-y:auto;width:300px;max-width:calc(100vw - 32px)}
.c-grid button{background:none;border:none;font-size:21px;padding:6px 0;border-radius:8px;cursor:pointer;line-height:1}
.c-grid button:hover{background:rgba(255,255,255,.08)}

/* writing */
.c-compose{position:relative;flex:none;border-top:1px solid var(--line);padding:10px 12px}
.c-replying,.c-attached{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--frost);background:rgba(0,0,0,.2);border-inline-start:3px solid var(--pink);border-radius:6px;padding:6px 10px;margin-bottom:8px}
.c-replying[hidden],.c-attached[hidden]{display:none}
.c-replying b{color:var(--pink-soft)}
.c-replying > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.c-attached img{width:36px;height:36px;object-fit:cover;border-radius:6px;margin-inline-end:10px}
.c-attached span{flex:1}
.c-x{background:none;border:none;color:var(--frost);font-size:14px;cursor:pointer;padding:2px 6px;flex:none}
.c-row{display:flex;align-items:flex-end}
.c-icon{width:38px;height:40px;flex:none;border:none;background:none;color:var(--frost);font-size:19px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.c-input{
  flex:1;min-width:0;resize:none;background:var(--bg);border:1px solid var(--line);border-radius:20px;color:var(--ice);
  font:inherit;font-size:15px;line-height:1.35;padding:9px 15px;margin:0 6px;max-height:120px
}
.c-send{flex:none;height:40px;padding:0 18px;border:none;border-radius:20px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.c-send:disabled{opacity:.7;cursor:progress}
.c-compose .send-err{margin:8px 0 0}
.c-compose .send-err[hidden]{display:none}
.c-emoji-pick{
  position:absolute;bottom:calc(100% + 6px);left:8px;z-index:60;padding:6px;background:var(--raise);
  border:1px solid var(--blue);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45)
}
.c-emoji-pick[hidden]{display:none}
.chat-readonly{flex:none;margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--frost)}
[dir="rtl"] .c-msg.me .c-bubble{border-radius:16px 16px 16px 5px}
[dir="rtl"] .c-bubble{border-radius:16px 16px 5px 16px}
@media (max-width:720px){
  .chat{margin-top:8px;height:calc(100vh - 70px);height:calc(100dvh - 70px);border-radius:12px}
  .chat-feed{padding:10px 10px 6px}
  .c-body{max-width:80%}
  .c-photo{max-width:200px}
  .c-compose{padding:8px}
  .c-icon{width:32px}
  .c-send{padding:0 14px}
}


/* ============================================================
   CHAT ON A PHONE: a fixed screen — nothing slides about, only
   the messages scroll. (The chat's height is set by chat.php to
   exactly the visible screen, keyboard or not.)
   ============================================================ */
@media (max-width:720px){
  html:has(body.chat-mode),body.chat-mode{height:100%;overflow:hidden;overscroll-behavior:none}
  body.chat-mode{position:fixed;inset:0;width:100%}
  body.chat-mode .banner,body.chat-mode .foot{display:none}
  body.chat-mode main.wrap{padding-bottom:0}
  body.chat-mode .chat{margin-top:6px;height:auto;min-height:0;max-height:none}
  body.chat-mode .chat-feed{-webkit-overflow-scrolling:touch}

  /* phones zoom in on any text box under 16px — which is what slid the
     page sideways. 16px everywhere stops that, on every page. */
  input[type=text],input[type=password],input[type=number],input[type=search],
  input[type=tel],input[type=email],input:not([type]),textarea,select{font-size:16px !important}

  /* keyboard open: fold the header and tabs away so the messages get
     the room — they come back the moment the keyboard closes */
  body.chat-mode.kb-open header,body.chat-mode.kb-open .mast,body.chat-mode.kb-open nav.nav{display:none}
  body.chat-mode.kb-open .chat{margin-top:0;border-radius:0;border-left:0;border-right:0}
  body.chat-mode.kb-open main.wrap{padding-left:0;padding-right:0}
}

.c-input{overflow-y:hidden}
.c-input::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the chat page, any screen: no footer, nothing to scroll past */
body.chat-mode .foot{display:none}
body.chat-mode main.wrap{padding-bottom:0}
@media (min-width:721px){
  body.chat-mode .chat{max-height:none}
}
@media (max-width:720px){
  /* slim header in the chat: language and Admin live on every other tab */
  body.chat-mode .mast-top{display:none}
  body.chat-mode .mast-in{padding-top:8px;padding-bottom:4px}
  body.chat-mode .mark{height:24px}
  body.chat-mode .mast h1{font-size:15px}
}

body.chat-mode{padding-bottom:0}
body.chat-mode .chat{min-height:280px}
body.chat-mode main.wrap{padding-top:14px}
body.chat-mode .chat{margin-top:0}
@media (max-width:720px){body.chat-mode main.wrap{padding-top:8px}}


/* ============================================================
   FLOATING BELL + POP-UP NOTIFICATIONS
   ============================================================ */
.bell-float{
  position:fixed;top:12px;right:12px;z-index:800;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:var(--raise);
  box-shadow:0 8px 22px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;animation:bellin .18s ease-out
}
.bell-float[hidden]{display:none}
.bell-float svg{width:22px;height:22px}
.bell-float .bell-count{top:-3px;right:-3px;min-width:20px;height:20px;line-height:20px;font-size:11px;box-shadow:0 0 0 2px var(--bg)}
@keyframes bellin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
[dir="rtl"] .bell-float{right:auto;left:12px}
.bell-panel.from-float{position:fixed;top:70px;right:12px;left:auto;z-index:850}
[dir="rtl"] .bell-panel.from-float{right:auto;left:12px}
@media (max-width:720px){
  .bell-panel.from-float,[dir="rtl"] .bell-panel.from-float{left:12px;right:12px;width:auto}
}

.pn-banner{display:flex;align-items:center;margin:10px 12px 0;padding:10px 12px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45)}
.pn-banner[hidden]{display:none}
.pn-banner p{margin:0;flex:1;min-width:0;font-size:13px;color:var(--ice);line-height:1.4}
.pn-banner p b{color:#fff}
.pn-turn{flex:none;margin-inline-start:10px;border:none;border-radius:18px;padding:8px 14px;cursor:pointer;
  background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:12px;white-space:nowrap}
.pn-x{flex:none;background:none;border:none;color:var(--frost);font-size:14px;padding:4px 6px;margin-inline-start:4px;cursor:pointer}

.pn-card{margin-top:20px}
.pn-card[hidden],.pn-card [hidden]{display:none}
.pn-card .blocktitle{margin:0 0 8px}
.pn-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.pn-row:first-child{border-top:none}
.pn-row > span{font-size:14px;color:var(--ice);padding-inline-end:12px}
.pn-row small{display:block;color:var(--frost);font-size:12px;margin-top:2px}
input.tog{-webkit-appearance:none;appearance:none;flex:none;width:46px;height:26px;border-radius:13px;margin:0;
  background:var(--line);position:relative;cursor:pointer;transition:background .15s}
input.tog::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
input.tog:checked{background:var(--acc)}
input.tog:checked::after{left:23px}
input.tog:disabled{opacity:.5}
.pn-off{margin-top:10px;font-size:12.5px}

.ios-dim{position:fixed;inset:0;z-index:1200;background:rgba(8,14,30,.62);display:flex;align-items:flex-end;justify-content:center}
.ios-sheet{width:100%;max-width:520px;background:var(--raise);border-radius:18px 18px 0 0;padding:18px 18px 26px;box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.ios-sheet h3{margin:0 0 4px;color:#fff;font-size:17px}
.ios-sheet p.sub{margin:0 0 12px;color:var(--frost);font-size:13px;line-height:1.5}
.ios-step{display:flex;align-items:center;padding:9px 0}
.ios-step i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;margin-inline-end:12px;
  background:var(--acc);color:var(--acc-ink);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
.ios-step span{font-size:14px;color:var(--ice);line-height:1.45}
.ios-step kbd{display:inline-block;background:#fff;color:#1a73e8;border-radius:6px;padding:0 6px;font:600 13px/1.5 sans-serif}
.ios-ok{margin-top:12px;width:100%;border:none;border-radius:12px;padding:12px;cursor:pointer;
  background:var(--acc);color:var(--acc-ink);font-weight:700;letter-spacing:.08em}

/* chat: "hold a message to react, reply or translate" hint */
.c-tip{text-align:center;font-size:11.5px;line-height:1.4;color:var(--dim);margin:0 0 7px}
.c-tip[hidden]{display:none}
.c-tip b{color:var(--frost);font-weight:600}
.c-tip .tip-mouse{display:none}
@media (hover:hover) and (pointer:fine){.c-tip .tip-touch{display:none}.c-tip .tip-mouse{display:inline}}

/* chat: no gliding — the page must snap, never slide (the smooth
   scrolling used elsewhere made the phone chat drift up and down) */
html:has(body.chat-mode){scroll-behavior:auto}
/* the @ name list in the chat sits just above the typing box */
.c-sug{position:absolute;left:10px;right:auto;bottom:calc(100% + 6px);top:auto;width:260px;
  max-height:min(236px,45vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.c-sug .mention-opt{padding:10px 10px;font-size:15px}

/* chat on a phone: no box — the chat fills the screen edge to edge,
   like a messaging app (computers keep the framed box) */
@media (max-width:720px){
  body.chat-mode main.wrap{padding:0}
  body.chat-mode .chat{margin:0;border:0;border-radius:0;background:transparent}
  body.chat-mode .chat-head{padding:8px 14px}
  body.chat-mode .chat-feed{padding:10px 12px 6px}
  body.chat-mode .c-compose{padding:6px 10px 8px}
}

/* wall: "Show older posts" */
.wall-more{text-align:center;margin:16px 0 8px}
.wall-more .ghost{min-width:200px}

/* right-to-left: arrows and the fold-out triangle point the other way,
   and the wall's language list lines up on the right like the chat's */
[dir="rtl"] .back-arrow{display:inline-block;transform:scaleX(-1)}
.tuckpanel summary::before{margin-right:0;margin-inline-end:2px}
[dir="rtl"] .tuckpanel summary::before{content:"\25C2"}
[dir="rtl"] .tuckpanel[open] summary::before{content:"\25BE"}
[dir="rtl"] .lang-picker{text-align:right;left:auto;right:0}
[dir="rtl"] .lang-opt{text-align:right}
.bell-quote,.c-quote{unicode-bidi:plaintext}

/* ============================================================
   EASIER TO TAP, EASIER TO FIND (usability sweep)
   Everything a thumb needs is at least ~40px, the tab row wraps
   instead of hiding tabs off the edge, and the Join steps stay
   on one line on small phones.
   ============================================================ */
@media (max-width:720px){
  .nav{flex-wrap:wrap;column-gap:16px;row-gap:0;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .nav a{padding:11px 0}
  .steps{flex-wrap:nowrap;gap:5px}
  .steps li{padding:6px 8px 6px 6px;font-size:10px;letter-spacing:.04em;gap:5px;min-width:0}
  .langs a{min-height:36px;display:inline-flex;align-items:center}
  .rlink,.reply-actions .rlink{min-height:40px;padding:0 4px}
  .rowbtns .nsbtn,.rowbtns .kill{min-height:36px;padding:0 12px;display:inline-flex;align-items:center}
  .rowbtns{gap:10px;flex-wrap:wrap}
  .rowbtns form:last-child{margin-inline-start:8px}
}
.bell{width:40px;height:40px}
.pn-x{min-width:40px;min-height:40px}
.pn-turn{min-height:40px;padding:0 16px}
.c-emos button{min-width:40px;min-height:40px;padding:4px}
.c-emos button.plus{width:36px;height:36px}
.avatar-edit-btn{min-width:34px;min-height:34px}
.bell-panel .plain-link[name="markall"]{min-height:36px;padding:6px 4px}
/* signing out: a real button, not a tiny link */
.signout-btn{min-height:38px;padding:0 14px;font-size:12px;white-space:nowrap}
.profile-name-row{flex-wrap:wrap;gap:10px}
/* chat: a language switch right in the chat on phones (the header one
   is folded away there to give the messages room) */
.chat-lang{display:none;position:relative}
@media (max-width:720px){
  .chat-lang{display:inline-flex}
  .chat-lang summary{list-style:none;cursor:pointer;min-width:40px;min-height:36px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:18px;padding:0 10px;font-size:12px;color:var(--frost)}
  .chat-lang summary::-webkit-details-marker{display:none}
  .chat-lang[open] summary{border-color:var(--blue);color:#fff}
  .chat-lang .cl-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:var(--raise);border:1px solid var(--blue);
    border-radius:10px;padding:5px;box-shadow:0 10px 24px rgba(0,0,0,.45);display:flex;flex-direction:column;min-width:130px}
  [dir="rtl"] .chat-lang .cl-menu{right:auto;left:0}
  .chat-lang .cl-menu a{padding:10px 12px;border-radius:7px;color:var(--ice);text-decoration:none;font-size:14px}
  .chat-lang .cl-menu a.on{background:rgba(220,232,255,.22)}
  .chat-head{gap:10px}
  .chat-head h3{flex:1;min-width:0}
}
/* chat: the "no connection" line while the phone is offline */
.chat-offline{flex:none;margin:0;padding:6px 12px;font-size:12px;text-align:center;color:#ffd48a;background:rgba(255,180,60,.12);border-bottom:1px solid rgba(255,180,60,.25)}
.chat-offline[hidden]{display:none}

/* "Translating…" gently pulses while the translation is on its way */
.tr-busy{animation:trPulse 1.1s ease-in-out infinite;font-style:italic}
@keyframes trPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- Translate: choose once ---- */
.tr-foot{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--frost)}
.tr-change{background:none;border:none;padding:4px 2px;font:inherit;font-weight:600;color:var(--pink-soft);cursor:pointer;min-height:32px}
.c-act-note{margin-inline-start:auto;padding-inline-start:12px;font-size:12px;color:var(--frost)}
.c-act{display:flex;align-items:center}
.trs-dim{position:fixed;inset:0;z-index:5000;background:rgba(8,14,30,.6);display:flex;align-items:flex-end;justify-content:center}
.trs-sheet{width:100%;max-width:460px;background:var(--raise);border:1px solid var(--blue);border-bottom:0;border-radius:18px 18px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 30px rgba(0,0,0,.5);animation:trsUp .18s ease-out}
@media (min-width:721px){.trs-dim{align-items:center}.trs-sheet{border-radius:16px;border-bottom:1px solid var(--blue)}}
@keyframes trsUp{from{transform:translateY(30px);opacity:0}}
.trs-sheet h4{margin:0 0 4px;font-size:16px;color:#fff}
.trs-sheet p{margin:0 0 12px;font-size:13px;color:var(--frost)}
.trs-opt{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;margin-bottom:6px;padding:0 14px;
  border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ice);font:inherit;font-size:15px;cursor:pointer;text-align:start}
.trs-opt.on{background:rgba(220,232,255,.22);border-color:var(--blue)}
.trs-opt small{font-size:11.5px;color:var(--frost)}
.trs-cancel{display:block;width:100%;min-height:44px;margin-top:4px;background:none;border:none;color:var(--frost);font:inherit;cursor:pointer}
.tr-card select{width:100%;min-height:46px;margin:4px 0 8px;font-size:16px}

/* ---- "Don't miss out" notification nudge ---- */
.pna-dim{position:fixed;inset:0;z-index:5000;background:rgba(8,14,30,.62);display:flex;align-items:center;justify-content:center;padding:18px}
.pna-card{width:100%;max-width:360px;background:var(--raise);border:1px solid var(--blue);border-radius:18px;padding:24px 20px 16px;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.55);animation:trsUp .2s ease-out}
.pna-bell{font-size:44px;line-height:1;margin-bottom:10px;animation:pnaRing 1.6s ease-in-out 2}
@keyframes pnaRing{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-14deg)}50%{transform:rotate(0)}}
.pna-card h3{margin:0 0 8px;font-size:20px;color:#fff}
.pna-card p{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ice)}
.pna-yes{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:var(--acc);
  color:var(--acc-ink);font-weight:700;font-size:16px;text-decoration:none;letter-spacing:.02em}
.pna-no{display:block;width:100%;min-height:46px;margin-top:6px;background:none;border:none;color:var(--frost);font:inherit;font-size:15px;cursor:pointer}
/* arriving from the nudge: the Notifications card stands out */
.pn-card:target{animation:pnaGlow 1.4s ease-out 2;border-color:var(--pink)}
@keyframes pnaGlow{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.pn-card [data-push-on]{min-height:48px;font-size:15px;padding:0 22px}

/* the banner keeps its shape while it loads, so nothing jumps */
.banner picture{aspect-ratio:1242/353}
@media (min-width:721px){.banner picture{aspect-ratio:1600/246}}
.banner img{height:100%;object-fit:cover}

/* ---- chat: who's here now (hover / tap the green dot) ---- */
.chat-online-wrap{position:relative}
button.chat-online{background:none;border:1px solid transparent;border-radius:16px;padding:6px 10px;margin:-6px -10px;cursor:pointer;font:inherit;font-size:12px;color:var(--frost);min-height:34px;display:inline-flex;align-items:center}
button.chat-online:hover,button.chat-online[aria-expanded="true"]{border-color:var(--line);color:var(--ice);background:rgba(255,255,255,.04)}
.who-pop{position:absolute;top:calc(100% + 8px);right:-6px;z-index:70;min-width:210px;max-width:260px;max-height:320px;overflow-y:auto;
  background:var(--raise);border:1px solid var(--blue);border-radius:12px;padding:8px 6px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
[dir="rtl"] .who-pop{right:auto;left:-6px}
.who-pop[hidden]{display:none}
.who-title{margin:2px 8px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.who-pop ul{list-style:none;margin:0;padding:0}
.who-pop li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:13.5px;color:var(--ice)}
.who-pop li:hover{background:rgba(255,255,255,.05)}
.who-pop li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-pop li::after{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;margin-inline-start:auto;flex:none}

/* ============ MUSIC & VIDEO PLAYERS ============ */
.mp-list{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-width:440px}
.mplay{position:relative;display:block;width:100%;border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(143,192,255,.25);background:#111D35;color:#fff;font-family:var(--font-body,inherit);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.mplay:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.mplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.mplay.on{cursor:default}
.mplay.on > :not(iframe){visibility:hidden}
/* YouTube: the video's picture with a big red play button */
.mp-yt{aspect-ratio:16/9;background:#000}
.mp-yt .mp-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.mp-yt .mp-title{position:absolute;left:0;right:0;top:0;padding:10px 12px 24px;font-weight:600;font-size:13.5px;line-height:1.3;
  background:linear-gradient(rgba(0,0,0,.72),transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-yt .mp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:45px;border-radius:12px;background:#ff0033;
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s}
.mp-yt .mp-play:after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -6px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.mp-yt:hover .mp-play{transform:translate(-50%,-50%) scale(1.07)}
.mp-yt .mp-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:20px 12px 9px;font-size:12px;font-weight:500;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.mp-yt .mp-foot b{background:rgba(0,0,0,.6);padding:1px 7px;border-radius:4px;font-weight:600}
/* Spotify / SoundCloud / Anghami: a compact bar in the site's colour */
.mp-sp,.mp-sc,.mp-ag{display:flex;align-items:center;gap:12px;min-height:78px;padding:10px 12px}
.mp-sp{background:linear-gradient(120deg,#1db954,#0f6b33 60%,#111D35)}
.mp-sc{background:linear-gradient(120deg,#ff7a1a,#c2410c 60%,#111D35)}
.mp-ag{background:linear-gradient(120deg,#a855f7,#6d28d9 60%,#111D35)}
.mp-disc{position:relative;flex:none;width:56px;height:56px;border-radius:10px;background:rgba(0,0,0,.28);overflow:hidden}
.mp-disc img{width:100%;height:100%;object-fit:cover;display:block}
.mp-disc i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.mp-disc i:after{content:"";position:absolute;left:50%;top:50%;margin:-7px 0 0 -4px;border-left:12px solid #111;border-top:7px solid transparent;border-bottom:7px solid transparent}
.mp-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mp-info b{font-size:14px;font-weight:700;letter-spacing:.02em}
.mp-info .mp-name{font-size:13px;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-info .mp-tap{font-size:12.5px;color:rgba(255,255,255,.85)}
.mplay.on.mp-sp,.mplay.on.mp-sc,.mplay.on.mp-ag{padding:0;background:#111D35}
/* looking up a share-link / can't be played here */
.mp-wait,.mp-cant{display:none;position:absolute;left:0;right:0;bottom:0;padding:6px 12px;font-size:12px;background:rgba(0,0,0,.78);text-align:center}
.mplay.busy .mp-wait,.mplay.cant .mp-cant{display:block}
.mplay.cant .mp-tap{visibility:hidden}
.mp-under{margin:0 0 4px;font-size:11.5px;color:var(--dim)}
.mp-under a{color:var(--frost);text-decoration:none}
.mp-under a:hover{color:var(--pink-soft,#ff8cc0);text-decoration:underline}
/* inside a chat bubble */
.c-bubble .mp-list{width:min(300px,64vw);margin:8px 0 2px}
.c-msg.me .c-bubble .mp-under a,.c-msg.me .c-bubble .mp-under{color:rgba(255,255,255,.85)}
.reply-body .mp-list{max-width:360px}

/* ============ WHO REACTED ============ */
.rx-line{-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:8px;margin-top:6px;padding:3px 0;background:none;border:0;cursor:pointer;
  color:var(--frost);font:inherit;font-size:12.5px;text-align:start;max-width:100%}
.rx-line[hidden]{display:none}
.rx-line b{color:var(--ice);font-weight:600}
.rx-line:hover .rx-text{text-decoration:underline;text-decoration-color:rgba(143,192,255,.45)}
.rx-faces{display:flex;flex:none}
.rx-faces .avatar{width:22px;height:22px;font-size:9.5px;border:2px solid var(--raise,#1C2D50);margin-inline-start:-7px}
.rx-faces .avatar:first-child{margin-inline-start:0}
.rx-text{min-width:0}
.rx-dim{position:fixed;inset:0;z-index:300;background:rgba(3,8,20,.62);display:flex;align-items:flex-end;justify-content:center}
.rx-sheet{width:100%;max-width:480px;max-height:78vh;display:flex;flex-direction:column;background:var(--raise,#1C2D50);
  border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:12px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.rx-grip{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 10px;flex:none}
.rx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex:none}
.rx-head h3{margin:0;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.rx-x{background:none;border:0;color:var(--frost);font-size:26px;line-height:1;width:40px;height:40px;cursor:pointer;margin-inline-end:-8px}
.rx-tabs{display:flex;gap:8px;margin-bottom:6px;overflow-x:auto;flex:none;padding-bottom:4px}
.rx-tab{flex:none;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--frost);font:inherit;font-size:13px;cursor:pointer}
.rx-tab.on{background:rgba(255,255,255,.14);border-color:var(--pink);color:#fff}
.rx-list{overflow-y:auto;-webkit-overflow-scrolling:touch}
.rx-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.rx-row[hidden]{display:none}
.rx-row:last-child{border-bottom:0}
.rx-nm{flex:1;min-width:0;color:#fff;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-nm small{color:var(--dim);font-size:12px}
.rx-em{font-size:20px;flex:none}
body.rx-open{overflow:hidden}
@media (min-width:700px){
  .rx-dim{align-items:center}
  .rx-sheet{max-width:400px;max-height:70vh;border-radius:16px;border-bottom:1px solid var(--line);padding-bottom:16px}
  .rx-grip{display:none}
  .rx-tabs{flex-wrap:wrap;overflow:visible}
}

/* ============================================================
   WATY — finishing touches for the olive + cream look
   ============================================================ */
.wordmark{flex:none;font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1;letter-spacing:.22em;
  color:var(--ice);text-decoration:none;padding:4px 0}
.kicker{color:var(--dim)}
.adminbtn{color:var(--ice);border-color:var(--line)}
.adminbtn:hover{background:var(--raise);color:var(--ice)}
.langs{background:transparent}
.langs a{color:var(--dim)}
a:hover{color:var(--ice)}
.go:hover{filter:brightness(1.06)}
.nav a.on{color:var(--ice)}
/* Korean and Turkish words don't want wide letter-spacing */
html[lang="ko"] *{letter-spacing:0!important}
html[lang="ko"] .wordmark{letter-spacing:.22em!important}
html[lang="ko"] body{word-break:keep-all}
@media (max-width:720px){
  .wordmark{font-size:34px}
}
/* dark writing on the cream accent */
.switch a.on em{color:rgba(17,29,53,.7)}
.clock{color:var(--acc-ink)}

/* ============================================================
   WATY — navy details: glow, dotted header with dunes, badge,
   tab icons, cards with a shine along the top
   ============================================================ */
body{background:radial-gradient(900px 520px at 12% -5%,rgba(96,150,255,.22),transparent 60%),
  radial-gradient(700px 500px at 100% 30%,rgba(255,255,255,.05),transparent 60%),
  linear-gradient(180deg,#1A2B4E 0%,#111D35 420px);background-color:#111D35;background-attachment:fixed}
.mast{position:relative;background:transparent;border-bottom:1px solid var(--line);overflow:hidden}
.mast:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.mast .dunes{position:absolute;left:0;right:0;bottom:0;width:100%;height:70px;pointer-events:none}
.mast-in,.mast .nav{position:relative;z-index:1}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark .em{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;letter-spacing:0}
.wordmark .em svg{width:22px;height:22px}
.nav a{display:inline-flex;align-items:center;gap:7px}
.nav a svg{width:16px;height:16px;opacity:.8;flex:none}
.nav a.on{border-bottom-color:#fff}
.langs{background:rgba(255,255,255,.06)}
.adminbtn{background:rgba(255,255,255,.06)}
.panel{position:relative;background:rgba(30,48,86,.72);border-color:rgba(160,190,240,.18);
  box-shadow:0 10px 30px rgba(0,0,10,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.panel:before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);pointer-events:none}
main > .kicker{display:flex;align-items:center;gap:10px}
main > .kicker:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.go{box-shadow:0 6px 18px rgba(0,0,0,.25)}
input,select,textarea{background-color:rgba(5,12,30,.35)}
@media (max-width:720px){.wordmark .em{width:36px;height:36px}}

/* the finished export picture on an iPhone */
.pic-dim{position:fixed;inset:0;z-index:400;background:rgba(5,10,24,.78);display:flex;align-items:center;justify-content:center;padding:14px}
.pic-sheet{width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:14px 14px 16px}
.pic-head{display:flex;justify-content:space-between;align-items:center}
.pic-head b{font-size:15px;color:var(--ice)}
.pic-x{background:none;border:0;color:var(--frost);font-size:28px;line-height:1;width:40px;height:40px;cursor:pointer}
.pic-hint{margin:0;font-size:13px;color:var(--frost)}
.pic-wrap{flex:1;min-height:0;overflow:auto;border-radius:10px;background:#000;-webkit-overflow-scrolling:touch}
.pic-wrap img{display:block;width:100%;height:auto;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.pic-share{margin:0;width:100%}
body.pic-open{overflow:hidden}

/* language buttons: labels centred in each button */
.langs a{justify-content:center;text-align:center}

/* line-up order setting (top of the Line-up tab, officers only) */
.ordset{margin:0 0 22px;padding:16px 18px}
.ordset h4{margin:0 0 4px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.ordset .ordrow{display:flex;gap:8px;margin:12px 0 10px;flex-wrap:wrap}
.ordset .ordrow button{flex:1 1 200px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);color:var(--frost);font-family:inherit;font-weight:600;font-size:14px;line-height:1.3;text-align:start;
  background:rgba(255,255,255,.03);cursor:pointer;min-height:0;box-shadow:none;text-transform:none;letter-spacing:0}
.ordset .ordrow button:hover{border-color:rgba(255,255,255,.45)}
.ordset .ordrow button small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
.ordset .ordrow button.on{background:#fff;color:#111D35;border-color:#fff;cursor:default}
.ordset .ordrow button.on small{color:#3a4a6a}
.ordset .ordrow button i{font-style:normal;font-size:18px}
.ordset p.hint{margin:0}
.ordset .ordreset{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ordset .ordreset .hint{margin:0;font-size:12.5px}