/* ─────────────────────────  TOKENS  ───────────────────────── */
:root{
  --bg:#EEF3F7; --surface:#FFFFFF; --surface-2:#F5F9FC; --surface-3:#E9F0F6;
  --line:#D2DEE9; --line-strong:#B2C3D2;
  --text:#152230; --text-dim:#576B7E; --text-faint:#8194A6;
  --accent:#0F7488; --accent-soft:rgba(15,116,136,.10); --accent-line:rgba(15,116,136,.32);
  --gold:#8A6414; --gold-soft:rgba(138,100,20,.10); --gold-line:rgba(138,100,20,.30);
  --good:#1B7A57; --good-soft:rgba(27,122,87,.10);
  --warn:#A2551F; --warn-soft:rgba(162,85,31,.10);
  --bad:#9E2E2A;  --bad-soft:rgba(158,46,42,.10);
  --shadow:0 1px 2px rgba(21,34,48,.06), 0 10px 28px rgba(21,34,48,.07);
  --f-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:7px;
  --layout-max:1280px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0C141D; --surface:#141F2B; --surface-2:#1A2734; --surface-3:#22323F;
    --line:#233444; --line-strong:#374E63;
    --text:#D4E1ED; --text-dim:#8DA4B8; --text-faint:#62798E;
    --accent:#57C9DE; --accent-soft:rgba(87,201,222,.12); --accent-line:rgba(87,201,222,.34);
    --gold:#E7C27B; --gold-soft:rgba(231,194,123,.12); --gold-line:rgba(231,194,123,.32);
    --good:#5FC698; --good-soft:rgba(95,198,152,.13);
    --warn:#E09257; --warn-soft:rgba(224,146,87,.13);
    --bad:#E4736E;  --bad-soft:rgba(228,115,110,.13);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --bg:#0C141D; --surface:#141F2B; --surface-2:#1A2734; --surface-3:#22323F;
  --line:#233444; --line-strong:#374E63;
  --text:#D4E1ED; --text-dim:#8DA4B8; --text-faint:#62798E;
  --accent:#57C9DE; --accent-soft:rgba(87,201,222,.12); --accent-line:rgba(87,201,222,.34);
  --gold:#E7C27B; --gold-soft:rgba(231,194,123,.12); --gold-line:rgba(231,194,123,.32);
  --good:#5FC698; --good-soft:rgba(95,198,152,.13);
  --warn:#E09257; --warn-soft:rgba(224,146,87,.13);
  --bad:#E4736E;  --bad-soft:rgba(228,115,110,.13);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
}
:root[data-theme="light"]{
  --bg:#EEF3F7; --surface:#FFFFFF; --surface-2:#F5F9FC; --surface-3:#E9F0F6;
  --line:#D2DEE9; --line-strong:#B2C3D2;
  --text:#152230; --text-dim:#576B7E; --text-faint:#8194A6;
  --accent:#0F7488; --accent-soft:rgba(15,116,136,.10); --accent-line:rgba(15,116,136,.32);
  --gold:#8A6414; --gold-soft:rgba(138,100,20,.10); --gold-line:rgba(138,100,20,.30);
  --good:#1B7A57; --good-soft:rgba(27,122,87,.10);
  --warn:#A2551F; --warn-soft:rgba(162,85,31,.10);
  --bad:#9E2E2A;  --bad-soft:rgba(158,46,42,.10);
  --shadow:0 1px 2px rgba(21,34,48,.06), 0 10px 28px rgba(21,34,48,.07);
}

/* ─────────────────────────  BASE  ───────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.01em}
h1{font-size:1.5rem; line-height:1.2}
h2{font-size:1.18rem; line-height:1.25}
h3{font-size:1rem}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint);
}
.dim{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.hidden{display:none !important}
/* Keep essential progress spinners and KvK flip flaps out of this. The old
   * rule made them look broken when Windows has "Animation effects" off
   (animation-duration collapses to 0.01ms — a stuck disc or a blur). */
@media (prefers-reduced-motion:reduce){
  *:not(.spinner):not(.boot-loader-spin):not(.kvk-cd-flap){
    animation-duration:.01ms !important; transition-duration:.01ms !important
  }
}

/* ─────────────────────────  SHARED CONTROLS  ───────────────────────── */
.btn{
  background:var(--accent); color:var(--bg); border-radius:5px;
  padding:10px 14px; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn.gold{background:var(--gold); color:var(--bg)}
.btn.sm{padding:5px 10px; font-size:.8rem}
.btn:disabled{opacity:.45; cursor:not-allowed}
/* Busy state for the screenshot-scan label (a <label>, not a <button>, so
   :disabled doesn't apply) - the OCR call takes several seconds and the
   control itself must look busy, not just a toast. Don't opacity-dim the
   whole label: that washed out the spinner and made "Reading…" look stuck.
   Same for scheduled-job buttons that are both .busy and :disabled. */
.btn.busy{
  cursor:progress; pointer-events:none;
  background:var(--surface-2); color:var(--text-dim);
}
.btn.busy:disabled{opacity:1; cursor:progress}
/* Open accent arc on a transparent track - a full-ring border reads as a
   solid disc at this size, especially once reduced-motion painted every
   side accent. Spinner + scan-bar stay hidden until .busy / .on. */
.spinner{
  display:none; width:1.05em; height:1.05em; flex:none; border-radius:50%;
  box-sizing:border-box;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-right-color:var(--accent);
  animation:sp-spin .7s linear infinite;
}
.busy .spinner{display:block}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.scan-bar{display:none; height:3px; border-radius:2px; background:var(--surface-3); overflow:hidden; margin:-3px 0 11px}
.scan-bar.on{display:block}
.scan-bar span{display:block; height:100%; width:40%; background:var(--accent); border-radius:2px; animation:sp-slide 1.1s ease-in-out infinite}
@keyframes sp-slide{0%{transform:translateX(-120%)} 100%{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){
  .scan-bar span{animation:none; width:100%; opacity:.55}
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.input{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:9px 11px; width:100%;
}
.input:focus{border-color:var(--accent-line); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--bad); font-size:.82rem; min-height:1.1em}
.hint{
  font-size:.78rem; color:var(--text-faint); background:var(--surface-2);
  border:1px dashed var(--line); border-radius:5px; padding:8px 10px;
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 15px; border-bottom:1px solid var(--line)}
.card-h .spacer{margin-inline-start:auto}
.card-b{padding:15px}
.row{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.toggle-row{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; margin:2px 0;
}
.toggle-copy{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.toggle-label{font-size:.86rem; color:var(--text); line-height:1.35}
.toggle-hint{font-size:.76rem; line-height:1.35}
.toggle{
  position:relative; flex-shrink:0; width:44px; height:26px; margin-top:1px;
}
.toggle input{
  position:absolute; inset:0; z-index:1; margin:0; opacity:0; cursor:pointer;
  width:100%; height:100%;
}
.toggle-track{
  display:block; width:100%; height:100%; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line);
  transition:background .15s ease, border-color .15s ease;
}
.toggle-track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--text-dim); box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .15s ease, background .15s ease;
}
.toggle input:checked + .toggle-track{
  background:var(--accent); border-color:var(--accent);
}
.toggle input:checked + .toggle-track::after{
  transform:translateX(18px); background:#fff;
}
.toggle input:focus-visible + .toggle-track{
  outline:2px solid var(--accent); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .toggle-track, .toggle-track::after{transition:none}
}
.divider{height:1px; background:var(--line); border:none; margin:0}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--text-dim); white-space:nowrap;
}
/* Alliance tags are case-sensitive in-game - never fold through pill/eyebrow uppercase. */
.alliance-tag{text-transform:none; letter-spacing:.04em}
.pill.good{color:var(--good); background:var(--good-soft); border-color:transparent}
.pill.warn{color:var(--warn); background:var(--warn-soft); border-color:transparent}
.pill.bad{color:var(--bad); background:var(--bad-soft); border-color:transparent}
.pill.acc{color:var(--accent); background:var(--accent-soft); border-color:transparent}
.pill.gold{color:var(--gold); background:var(--gold-soft); border-color:transparent}
/* Long sentence pills (titles role banner, etc.) - default .pill is nowrap. */
.pill.pill-wrap{
  white-space:normal; max-width:100%; box-sizing:border-box;
  align-items:flex-start; line-height:1.35; padding:6px 10px;
}
.pill-icon{font-size:.85em; line-height:1; text-transform:none; letter-spacing:0}
/* Removable pill (plan-attack callers): × sits in the pill, no nested box. */
.pill.pill-dismiss{
  padding:2px 4px 2px 9px; gap:2px;
}
.pill-x{
  appearance:none; border:0; background:transparent; color:inherit;
  margin:0; padding:0 5px; font:inherit; font-size:1.05em; line-height:1;
  letter-spacing:0; text-transform:none; cursor:pointer; opacity:.55;
  border-radius:999px;
}
.pill-x:hover{opacity:1; color:var(--text); background:var(--surface-2)}
.card-h .members-count{
  font-variant-numeric:tabular-nums; letter-spacing:.04em; margin-left:2px;
}
/* Members tab - a pending row needs to read as "different" at a glance, not
   just carry a small pill at the end of it (see renderMembers in app.js). */
.pending-row{background:var(--warn-soft)}
/* Members nav badge - count of pending members, so leadership sees there is
   work without opening the tab (see renderNav() in app.js). */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-inline-start:auto;
  border-radius:9px; background:var(--warn); color:#fff;
  font-family:var(--f-mono); font-size:.64rem; font-weight:700; line-height:1;
}
.tag{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:1px 5px; border-radius:3px; border:1px solid var(--line-strong); color:var(--text-dim);
  text-transform:none;
}
.avatar{
  width:21px; height:21px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--f-mono); font-size:.6rem; font-weight:700;
  /* Portrait sits on top of the initials rather than replacing them, so any
     failure to load (expired URL, upstream down, 404 from our proxy) reveals
     the initials underneath instead of an empty circle. See
     js/core/avatar.js, which removes the <img> on error. */
  position:relative; overflow:hidden;
}
.avatar .avatar-i{grid-area:1/1; line-height:1}
.avatar .avatar-img{
  grid-area:1/1; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.crest{
  width:29px; height:29px; border-radius:50%; flex:none;
  border:1px solid var(--gold-line); background:var(--gold-soft);
  display:grid; place-items:center; font-size:14px;
}
.icon-btn{
  width:31px; height:31px; border-radius:5px; border:1px solid var(--line);
  background:var(--surface-2); display:grid; place-items:center; font-size:.85rem;
}
.icon-btn:hover{border-color:var(--line-strong)}
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.85rem}
.sp-updated-cell{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.sp-action-col{width:1%; padding-left:6px; padding-right:6px}
.sp-edit-btn{min-width:0; padding:1px 5px; line-height:1.2; font-size:.78rem}
th,td{padding:8px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line)}
th{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; position:sticky; top:0; background:var(--surface); z-index:1;
}
th.s{cursor:pointer; user-select:none}
th.s:hover{color:var(--text)}
th.s.act{color:var(--accent)}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right}
th.num{text-align:right}
button.name-link{
  font:inherit; font-weight:600; color:var(--accent); padding:0; border:0; background:none;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
button.name-link:hover{color:var(--text)}
button.pill.ap-link{
  cursor:pointer; font:inherit;
}
button.pill.ap-link:hover{color:var(--text); border-color:var(--text-dim)}
button.ap-power-link{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  font:inherit; color:var(--accent); padding:0; border:0; background:none;
  cursor:pointer; text-align:left;
}
button.ap-power-link:hover{color:var(--text)}
button.ap-power-link .pill{color:inherit; border-color:currentColor}
button.ap-field-link{
  font:inherit; color:var(--accent); background:var(--surface-2); border:1px solid var(--line);
}
button.ap-field-link:hover{color:var(--text); border-color:var(--text-dim)}

/* King / UL read-only member profile - identity + vertical speedups side by side */
.mp-top{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:12px; align-items:start;
}
@media (max-width:720px){
  .mp-top{grid-template-columns:1fr}
}
.mp-facts{display:flex; flex-direction:column; gap:8px}
.mp-facts-2col{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 16px;
}
@media (max-width:520px){
  .mp-facts-2col{grid-template-columns:1fr}
}
.mp-fact{
  display:grid; grid-template-columns:minmax(6.5rem,9rem) minmax(0,1fr); gap:10px;
  align-items:baseline;
}
.mp-fact-k{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500;
}
.mp-fact-v{font-size:.92rem; color:var(--text); word-break:break-word}
.mp-fact-v.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.mp-power-chart-wrap{
  position:relative; width:min(100%, 360px); aspect-ratio:360 / 140; height:auto;
}
.mp-power-chart{color:var(--accent); display:block; width:100%; height:100%}
.mp-power-chart text{fill:currentColor}
.mp-power-chart text.faint{color:var(--text-faint)}
.mp-power-dot{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:2px solid var(--surface); border-radius:50%; padding:0;
  background:var(--accent); cursor:pointer; z-index:2;
}
.mp-power-dot:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mp-power-pop{
  display:none; position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%); z-index:40;
  min-width:max-content; padding:8px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.35);
  text-align:center; pointer-events:none;
}
.mp-power-pop-date{
  display:block; font-size:.72rem; letter-spacing:.04em; color:var(--text-faint); margin-bottom:2px;
}
.mp-power-pop-power{
  display:block; font-size:.92rem; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.mp-power-dot:hover .mp-power-pop,
.mp-power-dot:focus-visible .mp-power-pop{display:block}
.alliance-rank-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start;
}
@media (max-width:720px){
  .alliance-rank-grid{grid-template-columns:1fr}
}
.mp-speedups{display:flex; flex-direction:column; gap:7px}
.mp-su{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.mp-su-k{font-size:.84rem; color:var(--text-dim)}
.mp-su .mv{font-family:var(--f-mono); font-size:1.05rem; font-variant-numeric:tabular-nums; line-height:1.2}
.mp-su-total{margin-top:4px; padding-top:10px; border-top:1px solid var(--line)}
.mp-su-total .mp-su-k{font-weight:600; color:var(--text)}
.mp-su-total .mv{font-weight:600}

.mp-hero-grid,.mp-govgear-grid{
  display:grid; gap:12px; align-items:stretch;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.mp-hero-card,.mp-govgear-card{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:var(--surface-2);
}
.mp-hero-card-stack{
  display:flex; flex-direction:column; height:100%; min-height:0;
}
.mp-hero-card-stack .mp-hero-card-body{flex:1 1 auto; min-height:0}
.mp-hero-card-stack .mp-hero-card-desc{margin:0 0 10px; line-height:1.45}
.mp-hero-card-stack .mp-hero-card-section{margin-top:auto; flex-shrink:0}
.mp-hero-card-head,.mp-govgear-card-head{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;
}
.mp-hero-portrait,.mp-govgear-portrait{
  width:72px; height:72px; border-radius:10px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line); background:transparent;
}
.mp-govgear-portrait{width:56px; height:56px}
.mp-hero-portrait-fallback,.mp-govgear-portrait-fallback{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.4rem; color:var(--text-dim);
}
.mp-hero-card-title{min-width:0; flex:1}
.mp-hero-card-title strong{display:block; font-size:1rem}
.mp-hero-card-meta{font-size:.82rem; color:var(--text-dim); margin-top:4px}
.mp-hero-card-power{font-size:1.05rem; font-weight:600; margin-top:6px}
.mp-hero-card-section{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.mp-hero-card-k{font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin-bottom:4px}
.mp-hero-gear-mini-list{display:flex; flex-direction:column; gap:6px}
.mp-hero-gear-mini{
  display:block; width:100%; padding:8px 12px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.03em; line-height:1.35;
  text-transform:uppercase; font-family:var(--f-mono);
  border:1px solid var(--line); background:var(--surface);
  color:var(--text-dim);
}
.mp-hero-gear-mini.mythic{
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color:color-mix(in srgb, var(--accent) 38%, var(--line));
  color:color-mix(in srgb, var(--accent) 82%, #fff);
}
.mp-hero-gear-mini.red{
  background:color-mix(in srgb, var(--bad) 14%, var(--surface-2));
  border-color:color-mix(in srgb, var(--bad) 32%, var(--line));
  color:color-mix(in srgb, var(--warn) 78%, #fff);
}
.mp-govgear-gems{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.mp-govgear-card-stack{
  display:flex; flex-direction:column; height:100%; min-height:0;
}
.mp-govgear-card-stack .mp-govgear-card-body{flex:1 1 auto; min-height:0}
.mp-govgear-card-stack .mp-govgear-card-desc{margin:0 0 10px; line-height:1.45}
.mp-govgear-card-stack .mp-govgear-upgrades{margin-top:auto; flex-shrink:0; padding-top:10px; border-top:1px solid var(--line)}
.mp-govgear-card-stack .mp-govgear-upgrades .mp-hero-card-k{margin-bottom:8px}

.hc-grid{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.hc-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--surface-2); cursor:pointer;
}
.hc-card:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.hc-card-portrait{width:64px; height:64px; border-radius:10px; object-fit:cover; background:transparent}
.hc-card-portrait-fallback{
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.3rem; color:var(--text-dim);
  border:1px solid var(--line);
}
.hc-detail-card{margin-bottom:2px}
.hc-detail-head{display:flex; gap:14px; align-items:center; flex-wrap:nowrap}
.hc-detail-copy{min-width:0; flex:1}
.hc-detail-name{margin:2px 0 0; font-size:clamp(1.35rem,4vw,1.75rem); line-height:1.15}
.hc-detail-tags{flex-wrap:wrap; gap:6px; margin-top:8px}
.hc-detail-unlock{margin:10px 0 0; font-size:.88rem; line-height:1.45}
.hc-detail-portrait{width:88px; height:88px; border-radius:14px; object-fit:cover; flex-shrink:0; background:transparent}
.hc-detail-portrait-fallback{
  display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:14px;
  border:1px solid var(--line); font-size:1.85rem; font-weight:700; color:var(--text-dim); flex-shrink:0;
}
.hc-gear-head{display:flex; gap:12px; align-items:center}
.hc-upgrade-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.hc-upgrade-row{
  display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line);
}
.hc-upgrade-lv{
  font-size:.72rem; font-weight:700; color:var(--accent); min-width:2.1rem; flex-shrink:0; padding-top:1px;
}
.hc-upgrade-stats{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.hc-upgrade-stat{font-size:.82rem; color:var(--text); line-height:1.4}
.hc-profile-skills{display:flex; flex-direction:column; gap:8px}
.hc-profile-skill{
  display:flex; gap:8px; align-items:center; padding:8px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
}
.hc-profile-skill-icon{
  width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line); background:transparent;
}
.hc-profile-skill-icon-fallback{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem; color:var(--text-dim);
}
.hc-profile-skill-has-tip{cursor:help}
.hc-profile-skill-body{min-width:0; flex:1; position:relative}
.hc-profile-skill-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px}
.hc-profile-skill-title strong{font-size:.95rem}
.hc-profile-skill-lv{font-size:.72rem; color:var(--accent)}
.hc-skill-pop{
  display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:30;
  min-width:min(100%, 280px); max-width:320px; padding:10px 12px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-size:.82rem; line-height:1.45; color:var(--text-dim);
}
.hc-profile-skill-has-tip:hover .hc-skill-pop,
.hc-profile-skill-has-tip:focus-within .hc-skill-pop{display:block}
.hc-profile-skill .hc-upgrade-stats{margin-top:0; gap:4px}
.hc-profile-exgear{
  padding:10px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
}
.hc-profile-exgear-head{
  display:flex; gap:10px; align-items:center;
}
.hc-profile-exgear-title{min-width:0; flex:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px}
.hc-profile-exgear-title strong{font-size:.95rem}
.hc-profile-exgear-facts{
  margin-top:10px; display:flex; flex-direction:column; gap:6px;
}
.hc-profile-exgear-fact{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.hc-profile-exgear-fact .mp-fact-k{
  flex:1 1 auto; min-width:0; text-transform:none; letter-spacing:.04em;
}
.hc-profile-exgear-fact .mp-fact-v{
  flex:0 0 auto; white-space:nowrap; text-align:right; word-break:normal;
}

tbody tr:hover{background:var(--surface-2)}
tbody tr.me{background:var(--accent-soft)}
tbody tr.me td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.empty{padding:26px 15px; text-align:center; color:var(--text-faint); font-size:.88rem}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:4px 10px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2); font-size:.78rem; color:var(--text-dim)}
button.chip{cursor:pointer; font:inherit; font-family:inherit}
.chip.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}
.roles-cols{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 24px; align-items:start;
  margin-top:14px;
}
@media (max-width:720px){
  .roles-cols{grid-template-columns:1fr}
}
.roles-col-h{font-size:.95rem; margin:0 0 8px; font-weight:600}
.roles-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.roles-list li{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; line-height:1.35; color:var(--text)}
.roles-list .mark{flex:0 0 auto; width:1.1em; font-weight:700; line-height:1.35}
.roles-list.can .mark{color:var(--good)}
.roles-list.cannot .mark{color:var(--bad)}
.roles-list .roles-item{flex:1 1 auto}
.alliance-roles-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:stretch;
  margin-top:12px;
}
@media (max-width:720px){
  .alliance-roles-grid{grid-template-columns:1fr}
}
.alliance-role-card{display:flex; flex-direction:column; min-width:0}
.alliance-role-card .card-b{flex:1 1 auto; display:flex; flex-direction:column}
.alliance-role-title-link{
  appearance:none; background:none; border:none; padding:0; margin:0;
  font:inherit; font-weight:inherit; color:var(--accent); cursor:pointer; text-align:left;
}
.alliance-role-title-link:hover{text-decoration:underline}
.alliance-role-duties{margin-top:2px}
.alliance-role-section{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.card-b > .alliance-role-section:first-child{margin-top:0; padding-top:0; border-top:none}
.alliance-role-section h3{font-size:.88rem; margin:0 0 8px; font-weight:600; color:var(--text)}
.alliance-role-holders{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.alliance-role-holders li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.86rem}
.alliance-role-holder-name{flex:1 1 auto; min-width:0; font-weight:600}
.alliance-role-empty{margin:0; font-size:.84rem}
.alliance-role-actions{margin-top:auto; padding-top:14px; gap:8px; flex-wrap:wrap}
.roles-hierarchy{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.roles-hierarchy-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-size:.88rem;
}
.roles-hierarchy-n{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; font-family:var(--f-mono);
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
}
/* Searchable select (alliance / rank roster filters) */
.roster-filters{align-items:center}
.ss{position:relative}
.ss-menu{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; min-width:160px;
  margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); max-height:220px; overflow:auto;
}
.ss-menu li{
  display:flex; justify-content:space-between; gap:10px;
  padding:6px 10px; border-radius:4px; cursor:pointer; font-size:.86rem;
}
.ss-menu li:hover,
.ss-menu li[aria-selected="true"]{background:var(--accent-soft); color:var(--accent)}
.ss-menu li.hidden{display:none}

.note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r);
  padding:11px 14px; font-size:.86rem; color:var(--text);
}
.note.warn{background:var(--warn-soft); border-color:var(--warn)}
.note a{color:var(--accent); font-weight:600; text-decoration:underline; cursor:pointer}
button.note.note-btn{
  width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
}
button.note.note-btn:hover{filter:brightness(0.97)}
td.faint{color:var(--text-faint)}

/* ─────────────────────────  PUBLIC LANDING  ───────────────────────── */
#public{display:none}
#public.on{display:block}

/* Boot: full-screen hold while an existing session cookie is verified. */
.boot-loader{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.boot-loader.hidden{display:none !important}
.boot-loader-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--text-dim); font-size:.94rem;
}
.boot-loader-spin{
  width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:boot-spin 1.15s linear infinite;
}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.pub-bar{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 14px;
}
.pub-bar .topbar-right{position:relative}
.pub-wrap{max-width:940px; margin:0 auto; padding:0 14px 60px}
.hero{padding:38px 0 26px; display:flex; flex-direction:column; gap:14px; max-width:62ch}
.hero h1{font-size:2.15rem; line-height:1.1}
@media (min-width:700px){.hero h1{font-size:2.7rem} .hero{padding:56px 0 34px}}
.hero p{font-size:1.02rem; color:var(--text-dim)}
.pub-sec{padding-top:30px; display:flex; flex-direction:column; gap:13px}
.steps{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.step-n{
  font-family:var(--f-mono); font-size:.72rem; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  width:23px; height:23px; border-radius:50%; display:grid; place-items:center; margin-bottom:9px;
}
.gcards{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.gcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px; text-align:left; display:flex; flex-direction:column; gap:6px; height:100%;
}
.gcard:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.gcard[href]{color:inherit; text-decoration:none; cursor:pointer}

/* ─────────────────────────  MODALS  ───────────────────────── */
/* Shared backdrop for #gate and #confirmModal (and any future .modal). */
.modal, #gate{
  position:fixed; inset:0; z-index:100; background:rgba(8,14,20,.62);
  display:flex; align-items:center; justify-content:center; padding:18px; overflow-y:auto;
}
/* Confirm/select stack above the titles slot panel so Assign / Cancel keep it open. */
#confirmModal{z-index:110}
.modal.hidden, #gate.hidden{display:none !important}
.modal-card, .gate-card{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:15px;
}
.modal-card{max-width:420px}
.modal-card-wide{max-width:520px}
.modal-card-wide .modal-body{font-size:.92rem}
.modal-card-wide .member-speedup-edit-modal .sp-row{padding:12px 0}
.slot-modal-card{max-width:560px; max-height:min(90vh, 760px); overflow:auto}
.slot-modal-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.slot-modal-heading{min-width:0; flex:1}
.slot-modal-heading h2{margin:0}
.slot-modal-header #slotModalAssign{flex-shrink:0; align-self:flex-start; white-space:nowrap}
.slot-modal-utc{font-size:.72rem; margin:4px 0 0}
.slot-modal-section{padding:10px 0 0; border-top:1px solid var(--line); margin-top:10px}
.slot-modal-section:first-child{border-top:0; margin-top:0; padding-top:0}
.slot-modal-section .claimant-row{padding-left:0; padding-right:0}
.modal-card h2{font-size:1.12rem}
.modal-body{font-size:.9rem; line-height:1.5; color:var(--text-dim)}
.modal-body.plain{white-space:pre-wrap}
.modal-body .confirm-list{
  list-style:none; margin:10px 0 0; padding:0; max-height:40vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
}
.modal-body .confirm-list li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  color:var(--text); font-size:.86rem;
}
.modal-input textarea{
  width:100%; min-height:96px; resize:vertical;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:9px 11px; line-height:1.4;
}
.modal-input input[type="text"],
.modal-input input[type="number"]{
  width:100%;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:9px 11px; line-height:1.4;
}
.modal-input textarea:focus,
.modal-input input[type="text"]:focus,
.modal-input input[type="number"]:focus{outline:none; border-color:var(--accent-line)}
.modal-select-label{display:block; font-size:.78rem; color:var(--text-dim); margin-bottom:6px}
.modal-input select.input{width:100%}
.modal-input .ss{width:100%}
.modal-input .ss .input{max-width:100% !important; width:100%}
.modal-input .ss-menu{z-index:40}
.modal-multi-list{
  margin-top:10px; display:flex; flex-direction:column; gap:6px;
  max-height:36vh; overflow-y:auto;
}
.modal-multi-list.hidden{display:none}
.modal-multi-list .modal-multi-empty{
  font-size:.8rem; color:var(--text-faint); padding:4px 2px;
}
.modal-multi-list .modal-multi-item{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:7px 10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; color:var(--text); font-size:.86rem;
}
.modal-multi-list .modal-multi-item .modal-multi-label{min-width:0; flex:1}
.modal-multi-list .modal-multi-item .icon-btn{
  flex:0 0 auto; width:28px; height:28px; font-size:1rem; line-height:1;
}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.modal-actions .btn{min-width:96px}
.btn.bad{background:var(--bad); color:#fff}
.btn.bad:hover{filter:brightness(1.08)}
.gate-step{display:none; flex-direction:column; gap:14px}
.gate-step.on{display:flex}
/* Searchable alliance pick on signup/sign-in - scroll the dropdown only, not a nested pick-list. */
.gate-alliance-select{display:flex; flex-direction:column; gap:7px; overflow:visible}
.gate-card .ss .input{width:100%; max-width:100%}
.gate-card .ss-menu{
  z-index:50; max-height:min(240px, 38vh); overflow-y:auto; overflow-x:hidden;
}
.pick-list{display:flex; flex-direction:column; gap:7px; max-height:46vh; overflow-y:auto}
.pick{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:9px 11px;
}
.pick:hover{border-color:var(--accent-line); background:var(--accent-soft)}

/* ─────────────────────────  APP SHELL  ───────────────────────── */
#app{display:none}
#app.on{display:block}
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:10px 14px;
}
.brand{display:flex; align-items:center; gap:9px; min-width:0; flex:none}
.brand-txt{min-width:0}
.brand-txt strong{font-family:var(--f-display); font-size:.95rem; display:block; line-height:1.15}
.topbar-right{margin-inline-start:auto; display:flex; align-items:center; gap:8px; position:relative; min-width:0}
.utc-clock{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:.78rem; color:var(--text-dim); letter-spacing:.02em;
  white-space:nowrap; user-select:none;
}
.lang-select{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:5px 7px; font-size:.8rem; width:auto; max-width:88px;
}
.lang-select:focus{border-color:var(--accent-line); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.whoami-wrap{position:relative; flex:none; min-width:0}
.whoami{
  display:flex; align-items:center; gap:7px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:20px; padding:4px 10px 4px 6px;
  font-size:.8rem; cursor:pointer; max-width:100%;
}
.whoami:hover{border-color:var(--accent-line)}
.whoami-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:11rem;
}
.whoami-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  min-width:168px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:6px;
  display:flex; flex-direction:column; gap:2px;
}
.whoami-menu.hidden{display:none}
.whoami-menu button{
  display:block; width:100%; text-align:left; background:transparent; border:0;
  border-radius:5px; padding:8px 10px; font-size:.86rem; color:var(--text); cursor:pointer;
}
.whoami-menu button:hover{background:var(--accent-soft); color:var(--accent)}
/* Phone/tablet: collapse clock / language / theme into a hamburger that also
   carries the full rail nav (bottom tabs stay for quick jumps; rail is
   desktop-only below). Matches the rail breakpoint at 860px. */
.topbar-burger{display:none}
.topbar-panel{
  display:none; flex-direction:column; gap:10px;
  position:absolute; right:0; top:calc(100% + 8px); z-index:55;
  min-width:min(260px, calc(100vw - 28px));
  max-height:min(70vh, 520px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:10px;
}
.topbar-panel.hidden{display:none}
.topbar-panel:not(.hidden){display:flex}
.topbar-nav{display:flex; flex-direction:column; gap:2px}
.topbar-nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:6px;
  padding:9px 10px; font-size:.9rem; color:var(--text-dim); cursor:pointer;
}
.topbar-nav-item .ti{font-size:1rem; width:18px; text-align:center; flex:none}
.topbar-nav-item:hover{background:var(--surface-2); color:var(--text)}
.topbar-nav-item.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.topbar-nav-item .nav-badge{margin-inline-start:auto}
.topbar-panel-sep{
  border:0; border-top:1px solid var(--line); margin:2px 0;
}
.topbar-panel-label{
  display:flex; flex-direction:column; gap:5px;
  font-size:.72rem; color:var(--text-dim); letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--f-mono);
}
.topbar-panel .lang-select{max-width:none; width:100%}
.topbar-panel .utc-clock{font-size:.85rem; color:var(--text)}
.topbar-panel-action{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:8px 10px; font-size:.86rem; color:var(--text); cursor:pointer;
}
.topbar-panel-action:hover{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
@media (max-width:859px){
  .topbar-desktop{display:none !important}
  .topbar-burger{display:grid}
}
@media (max-width:640px){
  .topbar, .pub-bar{gap:8px; padding:8px 10px}
  .brand .eyebrow{display:none}
  .whoami{padding:3px 6px 3px 4px; gap:5px}
  .whoami-name{display:none}
  .whoami .tag{display:none}
}
.actions-cell{width:1%; white-space:nowrap; text-align:right; vertical-align:middle}
.actions-wrap{position:relative; display:inline-flex; justify-content:flex-end}
.actions-trigger{
  width:32px; height:32px; padding:0; font-size:1.15rem; line-height:1;
  color:var(--text-faint); border-radius:8px;
}
.actions-trigger:hover{color:var(--text); background:var(--surface-2)}
/* Fixed so the menu overlays the page instead of expanding .tw's scrollbox
   (overflow-x:auto forces a vertical scrollport that would otherwise grow). */
.actions-menu{
  position:fixed; z-index:60;
  min-width:188px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:6px;
  display:flex; flex-direction:column; gap:2px;
}
.actions-menu.hidden{display:none}
.actions-menu .actions-item{
  display:block; width:100%; text-align:left; background:transparent; border:0;
  border-radius:5px; padding:8px 10px; font-size:.86rem; color:var(--text); cursor:pointer;
}
.actions-menu .actions-item:hover{background:var(--accent-soft); color:var(--accent)}
.actions-menu .actions-item.danger{color:var(--bad)}
.actions-menu .actions-item.danger:hover{background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad)}
.actions-menu .actions-item.gold{color:var(--gold)}
.actions-menu .actions-item.gold:hover{background:var(--gold-soft); color:var(--gold)}
.card-h .actions-wrap{margin-left:6px}
.page-banner{
  max-width:var(--layout-max); margin:0 auto; padding:10px 14px 0;
}
.page-banner.hidden{display:none}
.page-banner .note{margin:0}
.page-banner .profile-banner-note{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.page-banner .profile-banner-body{flex:1; min-width:0}
.page-banner .profile-banner-dismiss{flex-shrink:0; margin-inline-start:auto}
.page-banner a{color:var(--accent); font-weight:600; text-decoration:underline; cursor:pointer}
.layout{display:flex; max-width:var(--layout-max); margin:0 auto; gap:22px; padding:0 14px}
.rail{display:none}
/* Bottom pad clears the fixed phone tab bar (+ home-indicator safe area).
   84px was short once the bar grew with seven tabs / larger type. */
main{flex:1; min-width:0; padding:18px 0 calc(112px + env(safe-area-inset-bottom, 0px))}
.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; padding:5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 1px; border-radius:6px; color:var(--text-faint);
  font-size:.58rem; letter-spacing:.03em; text-transform:uppercase; font-family:var(--f-mono);
}
.tab .ti{font-size:1.05rem; line-height:1}
.tab.on{color:var(--accent); background:var(--accent-soft)}
@media (min-width:860px){
  .tabs{display:none}
  .rail{display:block; width:198px; flex:none; position:sticky; top:64px; align-self:flex-start; padding:18px 0}
  .rail-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:8px 11px; border-radius:6px; color:var(--text-dim); font-size:.88rem; border:1px solid transparent;
  }
  .rail-item:hover{background:var(--surface-2); color:var(--text)}
  .rail-item.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); font-weight:600}
  .rail-item .ti{font-size:1rem; width:18px; text-align:center}
  main{padding:22px 0 60px}
}
.screen{display:none; flex-direction:column; gap:16px}
.screen.on{display:flex}
.section-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.section-head .spacer{margin-inline-start:auto}
.section-head.kingdom-head{flex-wrap:nowrap; align-items:flex-end; gap:12px}
.section-head.kingdom-head > div{min-width:0; flex:1}
.section-head.kingdom-head .btn{align-self:flex-end; flex-shrink:0}
.kingdom-last-sync{margin:4px 0 0; font-size:.82rem}
.kingdom-banner{display:block; width:100%; max-width:320px; max-height:120px; object-fit:contain; margin:0 0 14px; border-radius:var(--radius)}

.kl-overview{display:flex; flex-direction:column; gap:14px}
.kl-hero-card .card-b{padding-top:16px; padding-bottom:16px}
.kl-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:center;
}
@media (min-width:640px){
  .kl-hero{
    grid-template-columns:minmax(0, 1fr) minmax(240px, 300px);
    gap:24px;
    justify-content:space-between;
  }
}
.kl-hero-main{min-width:0; text-align:left}
.kl-hero-name{margin:0 0 6px; font-size:1rem; font-weight:600; color:var(--text-dim)}
.kl-hero-power{margin:0; font-size:clamp(2rem, 6vw, 2.75rem); font-weight:700; line-height:1.05; color:var(--text)}
.kl-hero-rank{margin:6px 0 0; font-size:.92rem; color:var(--gold); font-weight:600}
.kl-hero-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  width:100%;
}
@media (min-width:640px){
  .kl-hero-stats{width:100%; justify-self:end}
}
.kl-stat{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2);
  min-width:0;
}
.kl-stat-k{
  display:block; font-size:.74rem; font-weight:500; line-height:1.25;
  color:var(--text-dim); margin-bottom:5px;
}
.kl-hero-stats .kl-stat-k{text-transform:none; letter-spacing:0}
.kl-stat-meta .kl-stat-k{text-transform:none; letter-spacing:0; font-size:.72rem; color:var(--text-faint)}
.kl-stat-v{
  display:block; font-size:1.02rem; font-weight:600; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kl-meta-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap:10px;
}
.kl-breakdown{display:flex; flex-direction:column; gap:14px}
.kl-bar-row{min-width:0}
.kl-bar-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.kl-bar-k{font-size:.84rem; color:var(--text-dim)}
.kl-bar-v{font-size:.92rem; font-weight:600}
.kl-meta{margin-top:0}

/* ─────────────────────────  BLOCKS  ───────────────────────── */
.meters{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:13px}
.meter .mv{font-family:var(--f-mono); font-size:1.24rem; font-variant-numeric:tabular-nums; line-height:1.2}
.bar{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:7px}
.bar span{display:block; height:100%; background:var(--accent); border-radius:3px}
.bar.g span{background:var(--good)} .bar.w span{background:var(--warn)} .bar.gd span{background:var(--gold)}

.ann{display:flex; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line)}
.ann:last-child{border-bottom:none}
.ann-mark{width:3px; border-radius:2px; background:var(--line-strong); flex:none}
.ann.pinned .ann-mark{background:var(--gold)}

.ev{display:flex; gap:12px; align-items:flex-start; padding:12px 15px; border-bottom:1px solid var(--line); width:100%; text-align:left}
.ev:last-child{border-bottom:none}
.ev:hover{background:var(--surface-2)}
.ev-when{flex:none; width:74px; text-align:center; border:1px solid var(--line); border-radius:5px; padding:5px 3px; background:var(--surface-2)}
.ev-when .d{font-family:var(--f-mono); font-size:1.05rem; line-height:1.1}
.ev-when .m{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint)}
.cd{font-family:var(--f-mono); font-size:.78rem; color:var(--accent); font-variant-numeric:tabular-nums}
.cd.live{color:var(--good)}

/* Home KvK countdown — split-flap flip clock + day plan */
.kvk-cd-layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:22px 28px;
  align-items:start;
}
.kvk-cd-layout.solo{grid-template-columns:1fr}
.kvk-cd-clock{min-width:0}
.kvk-cd-side{
  min-width:0;
  display:flex; flex-direction:column; gap:10px;
  padding-inline-start:22px;
  border-inline-start:1px solid var(--line);
}
.kvk-cd-plan-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:5px;
}
.kvk-cd-plan-list li{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:8px 10px;
  align-items:baseline;
  font-size:.84rem;
  padding:4px 8px;
  border-radius:5px;
}
.kvk-cd-plan-list li.on{
  background:var(--accent-soft);
}
.kvk-cd-plan-day{
  font-family:var(--f-mono); font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  white-space:nowrap;
}
.kvk-cd-plan-date{
  font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.kvk-cd-plan-buff{
  color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kvk-cd-side .btn{align-self:flex-start; margin-top:2px}
@media (max-width:720px){
  .kvk-cd-layout{grid-template-columns:1fr; gap:16px}
  .kvk-cd-side{
    padding-inline-start:0; padding-top:14px;
    border-inline-start:none; border-top:1px solid var(--line);
  }
}

.kvk-cd-parts{
  display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start;
}
.kvk-cd-unit{min-width:0; display:flex; flex-direction:column; gap:7px; align-items:center}
.kvk-cd-digit{
  --kvk-tile-h: 3.4rem;
  --kvk-tile-w: 3.25rem;
  position:relative;
  width:var(--kvk-tile-w);
  height:var(--kvk-tile-h);
  perspective:900px;
  font-family:var(--f-mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:1.85rem; line-height:1; letter-spacing:-.03em; color:var(--accent);
  border-radius:8px;
  background:var(--surface-3);
  box-shadow:0 2px 0 color-mix(in srgb, #000 12%, transparent);
}
/* Centre hinge */
.kvk-cd-digit::before{
  content:"";
  position:absolute; left:0; right:0; top:50%; z-index:6;
  height:1px; pointer-events:none;
  background:color-mix(in srgb, var(--line) 70%, #000);
  box-shadow:0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.kvk-cd-half,
.kvk-cd-flap{
  position:absolute; left:0; right:0;
  height:50%;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--accent-line);
}
.kvk-cd-half.top,
.kvk-cd-flap.top{
  top:0;
  border-radius:8px 8px 0 0;
  border-bottom:none;
}
.kvk-cd-half.bot,
.kvk-cd-flap.bot{
  bottom:0;
  border-radius:0 0 8px 8px;
  border-top:none;
}
.kvk-cd-num{
  position:absolute; left:0; right:0;
  height:200%;
  display:flex; align-items:center; justify-content:center;
}
.kvk-cd-half.top .kvk-cd-num,
.kvk-cd-flap.top .kvk-cd-num{ top:0; }
.kvk-cd-half.bot .kvk-cd-num,
.kvk-cd-flap.bot .kvk-cd-num{ bottom:0; }

.kvk-cd-flap{
  z-index:4;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:var(--surface-2);
  /* Transform is driven by the Web Animations API in boot.js — CSS
     keyframes alone were getting crushed by the global reduced-motion rule. */
}
.kvk-cd-flap.top{
  transform-origin:bottom center;
  z-index:5;
}
.kvk-cd-flap.bot{
  transform-origin:top center;
  z-index:4;
  transform:rotateX(90deg);
}
.kvk-cd-digit.kvk-cd-tick{
  box-shadow:
    0 2px 0 color-mix(in srgb, #000 12%, transparent),
    0 0 0 3px var(--accent-soft);
}
.kvk-cd-sep{
  align-self:flex-start;
  padding-top:.45rem;
  font-family:var(--f-mono); font-weight:700; font-size:1.55rem;
  line-height:var(--kvk-tile-h, 3.4rem);
  color:var(--text-faint);
  user-select:none;
}
@media (max-width:640px){
  .kvk-cd-parts{gap:5px}
  .kvk-cd-digit{
    --kvk-tile-h: 2.7rem;
    --kvk-tile-w: 2.55rem;
    font-size:1.4rem; border-radius:6px;
  }
  .kvk-cd-half.top,
  .kvk-cd-flap.top{ border-radius:6px 6px 0 0; }
  .kvk-cd-half.bot,
  .kvk-cd-flap.bot{ border-radius:0 0 6px 6px; }
  .kvk-cd-sep{font-size:1.15rem; padding-top:.3rem}
}

/* The label column used to be a bare `1fr` track. A grid track's automatic
   minimum size is its content's min-content width, and "Construction" can't
   shrink below that word - so on a 360px phone the row was forced wider
   than the viewport regardless of how narrow the days input was. That was
   the actual overflow risk a past review was guarding against by shrinking
   the days field. `minmax(0,1fr)` removes the content floor so the label
   column (and its text) can actually shrink/wrap first. */
.sp-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.sp-row:last-child{border-bottom:none}
.sp-row>div:first-child{min-width:0; overflow-wrap:break-word}
.dhm{display:flex; gap:5px}
.dhm .u{position:relative}
.dhm input{
  /* border-box is global, so `width` must cover digits + padding + border.
     Hours/minutes: 2 digits (0–23 / 0–59). Days: 3 digits (override below).
     Spinners are hidden - on narrow number inputs they steal the digit column. */
  width:calc(2ch + 30px); background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:7px 14px 7px 8px;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right;
  -moz-appearance:textfield; appearance:textfield;
}
.dhm input::-webkit-outer-spin-button,
.dhm input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.dhm .u[data-u="d"] input{width:calc(3ch + 30px)}
.dhm input:focus{border-color:var(--accent-line); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.dhm input:disabled{opacity:.45; cursor:not-allowed}
.dhm .u::after{
  content:attr(data-u); position:absolute; right:5px; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:.68rem; color:var(--text-faint); pointer-events:none;
}

.titles{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:12px}
.title-card{border-color:var(--gold-line)}
/* Icon + title stay on one row even when the buff line is long (Chief
 * Minister). Default .card-h flex-wrap would park the icon on its own line. */
.title-card .card-h{background:var(--gold-soft); flex-wrap:nowrap; align-items:flex-start}
.title-card-icon{flex:none; font-size:1.15rem; color:var(--gold); line-height:1.25; margin-top:.12em}
.title-card-head{min-width:0; flex:1; /* title + up to 2 eyebrow lines so NA/CM headers match */
  min-height:calc(1.25em + 2 * (0.66rem * 1.45) + 6px)}
.title-card-head h2{white-space:nowrap}
.title-card-head .eyebrow{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; line-height:1.45; margin-top:4px;
}
.holder{display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line)}
.q-item{display:flex; align-items:center; gap:9px; padding:9px 15px; border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:none}
.q-n{width:19px; height:19px; flex:none; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; font-family:var(--f-mono); font-size:.66rem; color:var(--text-dim)}

.rally{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.rally-h{display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.slot{display:flex; align-items:center; gap:9px; padding:7px 13px; border-bottom:1px solid var(--line); font-size:.86rem}
.slot:last-child{border-bottom:none}
.slot.empty{color:var(--text-faint); font-style:italic}

.guide-body{display:flex; flex-direction:column; gap:12px; font-size:.94rem; line-height:1.68; max-width:68ch}
.guide-body h3{font-family:var(--f-display); margin-top:6px; font-size:1.06rem}
.guide-body ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px}
.guide-body .callout{border-left:3px solid var(--accent); background:var(--accent-soft); padding:10px 13px; border-radius:0 5px 5px 0}

.member-cell{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.audit-filter-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.audit-filters .ss{width:100%}
.audit-filters .ss .input{max-width:100% !important; width:100%}
.audit-table-wrap{overflow:auto}
.audit-table{width:100%; border-collapse:collapse; font-size:.82rem}
.audit-table th,.audit-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.audit-table th{color:var(--text-dim); font-weight:600; white-space:nowrap}
.audit-col-view{width:2.5rem; text-align:center !important}
.audit-view-btn{width:32px; height:32px; font-size:.95rem}
.audit-diff-meta{display:grid; gap:8px; margin:0}
.audit-diff-meta > div{display:grid; grid-template-columns:7rem 1fr; gap:8px; align-items:start}
.audit-diff-meta dt{margin:0; color:var(--text-dim); font-size:.8rem}
.audit-diff-meta dd{margin:0; font-size:.88rem}
.audit-diff-table{width:100%; border-collapse:collapse; font-size:.82rem}
.audit-diff-table th,.audit-diff-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.audit-diff-table th{color:var(--text-dim); font-weight:600}
.audit-diff-val{margin:0; white-space:pre-wrap; word-break:break-word; font-family:var(--f-mono); font-size:.78rem; line-height:1.45}

/* ─────────────────────────  CLAIM CALENDAR  ───────────────────────── */
.cal-slots{display:flex; gap:6px; flex-wrap:wrap}
.cal-slot{
  display:flex; flex-direction:column; align-items:center; gap:1px; min-width:64px;
  padding:6px 8px; border-radius:5px; border:1px solid var(--line); background:var(--surface-2);
  font-family:var(--f-mono);
}
.cal-slot:hover{border-color:var(--accent-line)}
.cal-slot .cs-local{font-size:.9rem; font-weight:600}
.cal-slot .cs-utc{font-size:.72rem; color:var(--text-faint)}
.cal-slot .cs-n{font-size:.68rem; color:var(--accent)}
.cal-slot.claimed{border-color:var(--warn); background:var(--warn-soft)}
.cal-slot.confirmed{border-color:var(--good); background:var(--good-soft)}
.cal-slot.mine{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* The slot whose detail panel is open. Deliberately the strongest state on
   the button - a solid accent fill rather than another tinted border -
   because claimed/confirmed/mine already use borders and tints, and a fourth
   variation on those would be indistinguishable at a glance. Placed after
   them so it wins regardless of the slot's booking state, and it keeps the
   accent ring for a slot that is also yours. */
.cal-slot.sel{
  border-color:var(--accent); background:var(--accent); color:var(--bg);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.cal-slot.sel .cs-utc, .cal-slot.sel .cs-n{color:var(--bg); opacity:.75}
.cal-slot.sel.mine{box-shadow:0 0 0 3px var(--accent-soft), inset 0 0 0 1.5px var(--bg)}
.cal-buff-day{border-color:var(--gold-line) !important; background:var(--gold-soft) !important; color:var(--gold) !important; font-weight:600}
.claimant-row{display:flex; align-items:center; gap:9px; padding:9px 15px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.claimant-row:last-child{border-bottom:none}
.claimant-row.mine{background:var(--accent-soft)}

/* ─────────────────────────  KINGDOM COMPARE (battle report)  ───────────────────────── */
.kc-report{display:flex; flex-direction:column; gap:14px; margin-top:14px}
.kc-matchup .card-b{display:flex; flex-direction:column; gap:14px}
.kc-sides{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
}
.kc-side{min-width:0; text-align:center}
.kc-side-a{text-align:left}
.kc-side-b{text-align:right}
.kc-side-tag{
  margin:0; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.kc-side-a .kc-side-tag{color:var(--accent)}
.kc-side-b .kc-side-tag{color:var(--bad)}
.kc-side-name{margin:4px 0 0; font-size:1.05rem; font-weight:600; line-height:1.2; color:var(--text)}
.kc-side-kid{margin:2px 0 0; font-size:.78rem; color:var(--text-dim)}
.kc-side-power{margin:8px 0 0; font-size:clamp(1.35rem, 4vw, 1.85rem); font-weight:700; line-height:1.05}
.kc-side-a .kc-side-power{color:var(--accent)}
.kc-side-b .kc-side-power{color:var(--bad)}
.kc-vs{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface-2);
  font-family:var(--f-display); font-weight:700; font-size:.78rem; color:var(--text-dim);
}
.kc-verdicts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){
  .kc-verdicts{grid-template-columns:1fr}
}
.kc-verdict{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--surface-2);
}
.kc-verdict-k{
  margin:0 0 4px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.kc-verdict-v{margin:0; font-size:.95rem; font-weight:600; color:var(--text)}
.kc-verdict-a{border-color:var(--accent-line); background:var(--accent-soft)}
.kc-verdict-a .kc-verdict-v{color:var(--accent)}
.kc-verdict-b{border-color:var(--bad); background:var(--bad-soft)}
.kc-verdict-b .kc-verdict-v{color:var(--bad)}
.kc-verdict-tie .kc-verdict-v{color:var(--text-dim)}
.kc-disclaimer{margin:0; font-size:.78rem; line-height:1.4}
.kc-section-label{
  margin:0 0 10px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); font-weight:600;
}
.kc-bars,.kc-rows{
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface);
  box-shadow:var(--shadow);
}
.kc-bar{margin-bottom:12px}
.kc-bar:last-child{margin-bottom:0}
.kc-bar-head{
  display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:baseline; margin-bottom:5px;
}
.kc-bar-side{font-size:.78rem; font-weight:600}
.kc-bar-head .kc-bar-side:first-child{text-align:left; color:var(--accent)}
.kc-bar-head .kc-bar-side:last-child{text-align:right; color:var(--bad)}
.kc-bar-label{font-size:.74rem; color:var(--text-dim); text-align:center; white-space:nowrap}
.kc-bar-track{
  display:flex; height:11px; border-radius:999px; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line);
}
.kc-bar-a{display:block; height:100%; background:var(--accent); min-width:0}
.kc-bar-b{display:block; height:100%; background:var(--bad); min-width:0}
.kc-row-list{display:flex; flex-direction:column}
.kc-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
  gap:8px; align-items:baseline; padding:9px 6px;
  border-bottom:1px solid var(--line);
}
.kc-row:nth-child(odd){background:var(--surface-2)}
.kc-row:last-child{border-bottom:none}
.kc-row-k{font-size:.78rem; color:var(--text-dim); text-align:center; line-height:1.25}
.kc-val{font-size:.9rem; font-weight:600}
.kc-row .kc-val:first-child{text-align:left}
.kc-row .kc-val:last-child{text-align:right}
.kc-val.win{color:var(--good)}
.kc-val.lose{color:var(--bad)}
.kc-val.tie{color:var(--text-dim)}

#toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(96px + env(safe-area-inset-bottom, 0px)); z-index:110; background:var(--text); color:var(--bg);
  padding:9px 15px; border-radius:20px; font-size:.85rem; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
@media (min-width:860px){#toast{bottom:26px}}

/* ─────────────────────────  THE LADDER (home)  ─────────────────────────
   Rank, rivalry and growth. Semantic colour (good/warn/bad) stays separate
   from --accent throughout: accent means "this is you", never "this is
   good", so a member sitting last still reads as themselves, not as an
   error. */

/* The hero carries the whole standing at display scale - this is the one
   place on the screen that is meant to be read from across the room. */
.ldr-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--accent-line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--accent-soft), transparent 62%), var(--surface);
  box-shadow:var(--shadow);
}
.ldr-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.ldr-hero-b{position:relative; padding:20px}

.ldr-stats{display:flex; gap:34px; flex-wrap:wrap; align-items:flex-start}
.ldr-stat{min-width:0; display:flex; flex-direction:column; gap:3px}
.ldr-stat-end{margin-inline-start:auto; text-align:right}
.ldr-big{
  font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:2.45rem; line-height:1; letter-spacing:-.03em;
}
.ldr-big.gold{color:var(--gold)}
.ldr-rule{border:none; border-top:1px solid var(--line); margin:22px 0 16px}
.delta{font-family:var(--f-mono); font-size:.75rem; font-weight:500; display:inline-flex; align-items:center; gap:4px}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)} .delta.flat{color:var(--text-faint)}

/* head to head */
.h2h{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center}
.h2h-who{min-width:0; text-align:center}
.h2h-n{font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.h2h-p{font-family:var(--f-mono); font-size:1.6rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:4px; line-height:1.1}
.h2h-r{font-size:.75rem; margin-top:2px}
.h2h-vs{
  font-family:var(--f-display,var(--f-body)); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint); white-space:nowrap;
}
.gapbar{position:relative; height:8px; border-radius:100px; background:var(--surface-3); margin-top:16px; overflow:hidden}
.gapbar i{position:absolute; inset:0 auto 0 0; display:block; border-radius:100px; background:var(--accent)}
.gapbar u{position:absolute; inset:0 0 0 auto; width:3px; background:var(--gold); text-decoration:none}

/* board + movers share one row primitive */
.board-row{
  display:flex; align-items:center; gap:11px;
  padding:10px 15px; border-bottom:1px solid var(--line);
}
.board-row:last-child{border-bottom:none}
.board-row.me{background:var(--accent-soft)}
.board-pos{
  font-family:var(--f-mono); font-weight:600; font-size:.84rem; width:20px;
  flex:none; text-align:right; color:var(--text-faint);
}
.board-row.me .board-pos{color:var(--accent)}
.board-n{flex:1; min-width:0; font-size:.87rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board-p,.board-gain{font-size:.82rem; font-weight:600; white-space:nowrap; flex:none; font-family:var(--f-mono)}
.board-gain{color:var(--good)}
.board-medal{width:8px; height:8px; border-radius:2px; flex:none; background:transparent}
.board-medal.m1{background:var(--gold)}
.board-medal.m2{background:var(--line-strong)}
.board-medal.m3{background:var(--warn)}

/* Composed onto .avatar (see js/core/avatar.js), so this only overrides
   size and colour - positioning and the portrait layer come from .avatar. */
.avatar.board-av{
  width:27px; height:27px;
  background:var(--surface-3); color:var(--text-dim);
  font-size:.66rem; font-weight:600;
}

/* alliance race */
.race{display:flex; flex-direction:column; gap:13px}
.race-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.race-top .spacer{margin-inline-start:auto}
.bar.muted span{background:var(--line-strong)}

/* growth streak strip */
.streak{display:flex; gap:3px; margin-top:8px}
.streak i{flex:1; height:20px; border-radius:3px; display:block; background:var(--surface-3)}
.streak i.on{background:var(--good)}
.streak i.off{background:var(--bad-soft)}

/* earned */
.earned{display:flex; flex-direction:column; gap:12px}
.earned-row{display:flex; align-items:center; gap:11px}
.earned-row .earned-t{flex:1; min-width:0; font-size:.86rem}
.earned-row.pending{opacity:.5}

/* two columns under the hero, matching the rest of the app's rhythm */
.ldr-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:13px; align-items:start; margin-top:13px}
.ldr-grid .stack-col{display:flex; flex-direction:column; gap:13px}

@media (max-width:900px){
  .ldr-grid{grid-template-columns:minmax(0,1fr)}
  .ldr-stats{gap:22px}
  .ldr-big{font-size:2rem}
  .ldr-stat-end{margin-left:0; text-align:left}
}
@media (max-width:560px){
  .h2h{grid-template-columns:1fr; gap:10px}
  .h2h-vs{text-align:center}
  .ldr-big{font-size:1.75rem}
  .ldr-stats{gap:18px}
}

/* ─────────────────────────  PLAYER RECORD (home, card 2)  ─────────────────
   Six figures, three per row. Every one carries its kingdom rank and a meter
   whose tick is the kingdom median - a rank alone says "9th of 179", which
   means nothing until you can see whether 9th is ahead of the middle or
   behind it. Class names checked against this file first: an earlier draft
   used .rail, which is the sidebar, and rendered as a broken block. */
.pcols{display:grid; grid-template-columns:repeat(3,1fr)}
.pcol{padding:15px 17px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0}
.pcol:nth-child(3n){border-right:none}
.pcol:nth-last-child(-n+3){border-bottom:none}
.pcol .pv{
  font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:1.58rem; line-height:1.05; letter-spacing:-.02em; margin-top:5px;
}
.pcol .pv .u{font-size:.78rem; font-weight:400; color:var(--text-faint); letter-spacing:0}
.pcol .pv.gold{color:var(--gold)}
.pcol .pfoot{display:flex; align-items:center; gap:7px; margin-top:8px; flex-wrap:wrap}
.pcol .prk{font-family:var(--f-mono); font-size:.69rem; color:var(--text-faint)}
.pc-meter{position:relative; height:5px; border-radius:100px; background:var(--surface-3); margin-top:9px}
.pc-meter i{position:absolute; top:0; bottom:0; left:0; border-radius:100px; background:var(--accent); display:block}
.pc-meter i.gold{background:var(--gold)}
.pc-meter u{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text-faint); text-decoration:none}
.hero-chip{display:flex; align-items:center; gap:10px; margin-top:5px}
.hero-chip img{width:40px; height:40px; border-radius:8px; flex:none; object-fit:cover; background:var(--surface-3)}
.hero-chip .hname{font-size:.77rem; font-weight:600; color:var(--gold)}
@media (max-width:860px){
  .pcols{grid-template-columns:repeat(2,1fr)}
  .pcol:nth-child(3n){border-right:1px solid var(--line)}
  .pcol:nth-child(2n){border-right:none}
  .pcol:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .pcol:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:520px){
  .pcols{grid-template-columns:1fr}
  .pcol{border-right:none !important}
}

/* ─────────────────────────  KINGDOM FEED  ─────────────────────────
   The first place in the hub where members write text everyone reads. The
   composer sits at the top so posting is the obvious action, and replies are
   indented under their post rather than flattened, so a conversation reads
   as one. Class names checked against this file before writing. */
.composer{display:flex; gap:9px; padding:12px 15px; border-bottom:1px solid var(--line); align-items:flex-start}
.composer textarea{
  flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:8px 10px; font-size:.87rem; resize:vertical;
  min-height:36px; max-height:190px; color:var(--text); font-family:var(--f-body);
}
.composer textarea:focus{outline:none; border-color:var(--accent-line)}
.composer .btn{flex:none}
.composer-tools{display:flex; align-items:center; gap:6px; flex:none}
.emoji-wrap{position:relative}
.emoji-trigger{font-size:1rem; line-height:1}
.emoji-picker{
  position:fixed; z-index:60;
  display:flex; flex-direction:column; gap:8px;
  width:min(100vw - 16px, 19.5rem);
  padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow);
}
.emoji-picker.hidden{display:none}
.emoji-search-wrap{flex:none}
.emoji-search{
  width:100%; box-sizing:border-box;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px;
  padding:7px 9px; font-size:.82rem; color:var(--text); font-family:var(--f-body);
}
.emoji-search:focus{outline:none; border-color:var(--accent-line)}
.emoji-grid{
  display:grid; grid-template-columns:repeat(8, 1.75rem); gap:2px;
  max-height:14.5rem; overflow-y:auto; overscroll-behavior:contain;
  padding-right:2px;
}
.emoji-section{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.emoji-section[hidden]{display:none}
.emoji-section-label{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-faint);
}
.emoji-grid-ks{max-height:7.5rem}
.emoji-btn{
  width:1.75rem; height:1.75rem; padding:0; border:0; border-radius:5px;
  background:transparent; display:grid; place-items:center; font-size:1.05rem; line-height:1;
  cursor:pointer;
}
.emoji-btn:hover{background:var(--accent-soft)}
.emoji-btn[hidden]{display:none}
.ks-icon{
  width:1.15rem; height:1.15rem; object-fit:contain; vertical-align:-0.2em;
  display:inline-block;
}
.ks-icon-pick{width:1.35rem; height:1.35rem; vertical-align:middle}
.post-b .ks-icon, .reply-b .ks-icon{margin:0 1px}
.emoji-empty{
  margin:0; padding:6px 2px 2px; text-align:center;
  font-size:.78rem; color:var(--text-faint);
}
.emoji-empty.hidden{display:none}
.post{padding:12px 15px; border-bottom:1px solid var(--line)}
.post:last-child{border-bottom:none}
.post.pinned{background:var(--gold-soft)}
.post-h{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.post-au{font-size:.85rem; font-weight:600}
.post-b{font-size:.88rem; margin-top:5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.post-f{display:flex; align-items:center; gap:13px; margin-top:7px; flex-wrap:wrap}
/* .spacer is scoped to .card-h / .section-head in this file, so the feed
   footer needs its own rule to push Delete to the right. */
.post-f .spacer{margin-inline-start:auto}
.post-act{
  font-family:var(--f-mono); font-size:.71rem; color:var(--text-faint);
  background:none; border:none; padding:0; cursor:pointer;
}
.post-act:hover{color:var(--accent)}
.post-act.danger:hover{color:var(--bad)}
.thread{margin:8px 0 0 12px; padding-left:11px; border-left:2px solid var(--line)}
.reply{padding:7px 0}
.reply-b{font-size:.845rem; margin-top:3px; color:var(--text-dim); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.feed-empty{padding:22px 15px; text-align:center; color:var(--text-faint); font-size:.85rem}

/* The member's own portrait in the standing hero. Bigger than a row avatar
   because it is the one place on the screen that is about them specifically. */
.avatar.ldr-face{width:42px; height:42px; font-size:.86rem}

/* The feed grows without bound as people post, which pushed Kingdom
   readiness off the bottom of a long screen. Cap it and scroll inside the
   card instead, so the page keeps its shape however busy the feed gets.
   The composer sits outside this box so it never scrolls away. */
.feed-scroll{max-height:420px; overflow-y:auto; overscroll-behavior:contain}

/* Days / hours / minutes for a speedup pledge. Speedups are stored in
   minutes, but nobody thinks in minutes at this scale - 2.4M minutes is 1666
   days - so the form asks for the units people actually use and multiplies
   back up before sending. */
.commit-part{display:flex; align-items:center; gap:6px}
.commit-part input{width:82px}
.commit-part span{font-size:.79rem; color:var(--text-faint)}

/* ─────────────────────────  RIGHT-TO-LEFT (Arabic)  ─────────────────────────
   dir="rtl" on <html> (set by i18n/index.js) already flips text flow and
   flex/grid ordering natively. This block only corrects what the browser
   cannot infer: rules that hardcode a physical side. Everything above is
   left untouched, so the left-to-right layout cannot regress. A full RTL
   polish pass against real screens is still worth doing once members use it. */
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] th.num, [dir="rtl"] td.num, [dir="rtl"] .actions-cell { text-align: left; }
/* Menus, tooltips and dropdowns anchor to a physical edge; flip the anchor so
   they open on the correct side and stay on-screen. */
[dir="rtl"] .tip { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .actions-menu, [dir="rtl"] .whoami-menu { right: auto; left: 0; }
/* Emoji picker is position:fixed with computed left; no edge flip needed. */
[dir="rtl"] .searchable-select__menu { left: 0; right: 0; }
/* Buttons and cells that hardcode text-align:left read as ragged-right in an
   RTL column; align them to the start instead. Scoped to the containers that
   set it, not a blanket override. */
[dir="rtl"] .meter, [dir="rtl"] .ev, [dir="rtl"] .board-n, [dir="rtl"] .pcol,
[dir="rtl"] .ldr-stat, [dir="rtl"] .post-b, [dir="rtl"] .reply-b { text-align: right; }

/* Utilities — gift code rows */
.code-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.code-row:last-child{border-bottom:none}
.code-val{font-family:var(--f-mono); font-size:.95rem; font-weight:600; letter-spacing:.04em;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:4px 9px; color:var(--text)}

/* Login screen "your session ended" notice. Informational (accent), not an
   error - the member did nothing wrong, they just need to sign in again. */
.gate-notice{font-size:.85rem; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:var(--r-sm,6px); padding:9px 11px; margin-bottom:11px}

/* Utilities — troop calculator */
.calc-inputs{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.calc-inputs .modal-select-label{margin:0}
.calc-inputs input, .calc-inputs select{min-width:120px}
.calc-out{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start}
.calc-stat .cv{font-family:var(--f-mono); font-weight:600; font-size:1.5rem; line-height:1.05; color:var(--accent)}
.calc-res{display:flex; gap:8px; flex-wrap:wrap; align-self:center}
.calc-chip{font-family:var(--f-mono); font-size:.82rem; background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:5px 11px}

.calc-buffs{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.calc-extra{display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--text-dim)}

.calc-mode{display:flex; gap:7px; margin-bottom:10px}

/* Battle board — the send countdown is the hero: big, bold, mono. */
.battle-timer{
  font-family:var(--f-mono); font-size:2.4rem; font-weight:800; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
  color:var(--text); display:block; margin:2px 0;
}
.battle-timer.send-now{
  color:var(--warn); display:inline-block;
  background:var(--warn-soft); border-radius:var(--r-sm,6px); padding:2px 14px;
}
/* "Your rallies" panel — the member's primary view */
.battle-rally-card{ border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.battle-rally-card .card-h h2{ color:var(--accent); }
.battle-rally{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm,6px); padding:14px 15px;
}
.battle-rally-target{ font-weight:700; font-size:1.02rem; margin-bottom:8px; }
.battle-rally-times{ font-size:.82rem; margin-top:10px; color:var(--text-dim,var(--text)); line-height:1.7; }
.battle-rally-times .faint{ color:var(--text-faint,#889); }
.battle-caller{
  display:flex; justify-content:space-between; gap:10px;
  flex-wrap:wrap; align-items:baseline;
}
.battle-hint{
  font-size:.76rem; color:var(--text-dim,var(--text));
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-sm,6px);
  padding:8px 11px; margin:2px 0 11px;
}
.battle-utc{
  font-family:var(--f-mono); font-size:.9rem; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  color:var(--accent); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm,6px);
  padding:5px 11px; margin-top:8px; display:inline-block;
}
.battle-utc-wrap{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:8px}
.battle-utc-wrap .battle-utc{margin-top:0}
/* Collapsible "where UTC lives in-game" reference screenshot next to the live clock. */
.battle-utc-ref{flex-basis:100%}
.battle-utc-ref>summary{
  cursor:pointer; display:inline-block; font-size:.74rem; color:var(--accent);
  padding:3px 0; user-select:none; list-style:none;
}
.battle-utc-ref>summary::-webkit-details-marker{display:none}
.battle-utc-figure{margin:6px 0 0}
.battle-utc-figure img{
  display:block; width:100%; max-width:240px; height:auto;
  border:1px solid var(--line); border-radius:var(--r-sm,6px);
}
.battle-utc-figure figcaption{font-size:.72rem; max-width:240px; margin-top:5px; line-height:1.35}