/* The Long Rivalry — two palettes, one layout.
   Accent tokens are swapped by [data-faction] on <body>. */

:root {
  --ink:      #0b0910;
  --ink-2:    #12101a;
  --panel:    #191524;
  --panel-2:  #221c31;
  --line:     #362c4a;
  --text:     #f1ecf8;
  --muted:    #9b8cb4;
  --dim:      #6b5f80;
  --good:     #3ad6a8;
  --bad:      #ef4b6b;

  /* neutral defaults, overridden per faction */
  --accent:   #a06bff;
  --accent-2: #ff6bc1;
  --gold:     #ffc94a;
  --glow:     rgba(160,107,255,.30);
  --sheen: linear-gradient(90deg,#ff5f6d,#ffc94a,#3ad6a8,#4aa8ff,#a06bff,#ff6bc1);

  --radius: 14px;
  --shadow: 0 12px 34px rgba(0,0,0,.5);
}

body[data-faction="unicorn"] {
  --accent:   #b47dff;
  --accent-2: #ff7ecb;
  --gold:     #ffd36b;
  --glow:     rgba(180,125,255,.32);
  --sheen: linear-gradient(90deg,#ff9ad5,#ffd36b,#b47dff,#7ee8fa,#ff9ad5);
}
body[data-faction="ninja"] {
  --accent:   #ff4d5e;
  --accent-2: #4aa8ff;
  --gold:     #e8c27a;
  --glow:     rgba(255,77,94,.28);
  --sheen: linear-gradient(90deg,#ff4d5e,#e8c27a,#6f7dff,#3ad6a8,#ff4d5e);
}

* { box-sizing: border-box; }
/* Firefox otherwise draws a pale scrollbar on every dark scrolling panel. */
html, .modal, .log, .arrange, .table-wrap { scrollbar-color: var(--line) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.5 "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--glow), transparent 60%),
    radial-gradient(900px 560px at 92% 4%, rgba(74,168,255,.14), transparent 62%),
    radial-gradient(700px 500px at 50% 108%, rgba(58,214,168,.10), transparent 60%),
    var(--ink);
  background-attachment: fixed;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
.hide { display: none !important; }
.empty { color: var(--muted); font-size: 13px; font-style: italic; }
.muted { color: var(--muted); }

/* --------------------------------------------------------------- shared -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 11px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { background: #2c2440; border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; }
.btn-primary {
  width: 100%; color: #14101c; border-color: transparent; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-ghost { padding: 7px 12px; font-size: 13px; }
.btn-danger { background: rgba(239,75,107,.14); border-color: rgba(239,75,107,.5); color: #ffbcc8; }
.btn-danger:hover:not(:disabled) { background: rgba(239,75,107,.26); border-color: var(--bad); }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.panel h2, .section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 12px; font-weight: 700;
}

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  background: #0e0b14; border: 1px solid var(--line); color: var(--text); font: inherit;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ----------------------------------------------------------------- gate -- */

.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.gate-card {
  width: min(440px, 100%); padding: 34px 30px; border-radius: 22px;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.gate-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--sheen); }
.crest { font-size: 44px; line-height: 1; margin-bottom: 12px; letter-spacing: 4px; }
.gate h1 { font-size: 27px; }
.gate .tagline { color: var(--muted); margin: 8px 0 26px; font-size: 14px; }
.switcher { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.switcher button { color: var(--gold); font-weight: 700; text-decoration: underline; }
.notice { margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(239,75,107,.14); border: 1px solid rgba(239,75,107,.42); color: #ffc9d2; }

/* -------------------------------------------------------------- factions - */

.oath { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 32px 20px; }
.oath-inner { width: min(940px, 100%); text-align: center; }
.oath h1 { font-size: 34px; margin-bottom: 8px; }
.oath > .oath-inner > p { color: var(--muted); max-width: 620px; margin: 0 auto 34px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .sides { grid-template-columns: 1fr; } }
.side {
  padding: 30px 26px; border-radius: 20px; text-align: left; position: relative;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease;
}
.side:hover { transform: translateY(-4px); }
.side[data-side="unicorn"]:hover { border-color: #b47dff; box-shadow: 0 16px 44px rgba(180,125,255,.28); }
.side[data-side="ninja"]:hover   { border-color: #ff4d5e; box-shadow: 0 16px 44px rgba(255,77,94,.24); }
.side .mark { font-size: 54px; line-height: 1; }
.side h2 { font-size: 24px; margin: 10px 0 4px; }
.side .motto { font-style: italic; color: var(--gold); font-size: 14px; margin-bottom: 12px; }
.side .desc { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.side .cur { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim); }
.side .cur b { color: var(--text); }
.oath .warn { margin-top: 26px; font-size: 12.5px; color: var(--dim); }

/* ------------------------------------------------------------------ app -- */

.app { max-width: 1400px; margin: 0 auto; padding: 18px 20px 60px; }

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(34,28,49,.94), rgba(18,16,26,.94));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brand .mark { font-size: 24px; }
.brand small { display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em; }
.topbar .spacer { flex: 1; }
.who { font-size: 13px; color: var(--muted); }
.who b { color: var(--gold); }

.bank { text-align: right; line-height: 1.15; }
.bank .amount {
  font-size: 30px; font-weight: 800;
  background: var(--sheen); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bank .rate { font-size: 12px; color: var(--muted); }

.levelbox { min-width: 180px; }
.levelbox .row { display: flex; justify-content: space-between; font-size: 12px;
  color: var(--muted); margin-bottom: 4px; }
.levelbox .lv { color: var(--text); font-weight: 800; }
.levelbox .pts { color: var(--gold); font-weight: 800; }

.bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--sheen); border-radius: 99px;
  transition: width .35s ease; }

.grid { display: grid; grid-template-columns: 310px 1fr 430px; gap: 18px; align-items: start; }
/* Tablets drop to two columns; phones stop stacking altogether and show one
   column at a time — see the mobile section at the foot of this file. */
@media (max-width: 1240px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .col-right { grid-column: 1 / -1; }
  /* The middle column is now narrow enough that a land's name and its blurb
     side by side squeeze both into two words a line. */
  .land-head { flex-wrap: wrap; gap: 4px 9px; }
  .land-head .nm { flex: none; }
  .land-head .bl { flex: 1 0 100%; }
}

/* ---------------------------------------------------------------- click -- */

.emblem {
  width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  display: grid; place-items: center; font-size: 78px; user-select: none;
  background: radial-gradient(circle at 34% 28%, #362350, #15111f 70%);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 8px var(--glow), inset 0 0 60px var(--glow);
  transition: transform .07s ease, box-shadow .2s ease;
}
.emblem:hover { box-shadow: 0 0 0 13px var(--glow), inset 0 0 76px var(--glow); }
.emblem:active { transform: scale(.955); }
.emblem .sub { position: absolute; bottom: 12%; font-size: 11px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

.floaty {
  position: absolute; pointer-events: none; font-weight: 800; font-size: 17px;
  color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.75); animation: rise 1s ease-out forwards;
}
.floaty.crit { color: #fff; font-size: 24px; text-shadow: 0 0 14px var(--accent-2); }
@keyframes rise {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -74px) scale(1.35); }
}
.clickline { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.clickline b { color: var(--text); }

/* ---------------------------------------------------------------- buffs -- */

.buffs { display: flex; flex-direction: column; gap: 6px; }
.buff { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  font-size: 12px;
  background: rgba(58,214,168,.10); border: 1px solid rgba(58,214,168,.34); color: #b6ffe9; }
.buff .ic { flex: none; width: 24px; text-align: center; font-size: 15px; }
.buff .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buff .nm { font-weight: 700; font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buff .sb { font-size: 11px; font-weight: 600; opacity: .72; }
.buff .mag { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.buff .pc { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.buff .mx { font-size: 10.5px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }

.buff.bad { background: rgba(239,75,107,.12); border-color: rgba(239,75,107,.38); color: #ffc2cd; }
.buff.perma { background: rgba(255,201,74,.11); border-color: rgba(255,201,74,.38); color: #ffe6ad; }

/* ----------------------------------------------------------------- list -- */

.buyrow { display: flex; gap: 6px; margin-bottom: 12px; }
.buyrow button { flex: 1; padding: 6px; border-radius: 9px; font-size: 12px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.buyrow button.on { background: var(--gold); border-color: var(--gold); color: #241a05; }

.land-head { display: flex; align-items: baseline; gap: 9px; margin: 18px 0 10px; }
.land-head:first-child { margin-top: 0; }
.land-head .ic { font-size: 17px; }
.land-head .nm { font-weight: 800; font-size: 14px; }
.land-head .bl { font-size: 11.5px; color: var(--dim); }

.gen {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 11px 12px; margin-bottom: 8px;
  border-radius: 12px; background: rgba(255,255,255,.028); border: 1px solid var(--line);
  transition: background .13s ease, border-color .13s ease, transform .07s ease;
}
.gen:hover:not(:disabled) { background: var(--glow); border-color: var(--accent); }
.gen:active:not(:disabled) { transform: translateY(1px); }
.gen:disabled { opacity: .46; }
.gen > div { min-width: 0; }
.gen .icon { font-size: 26px; text-align: center; }
.gen .name { font-weight: 700; }
.gen .blurb { font-size: 11.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen .stat { font-size: 11.5px; color: var(--good); margin-top: 3px; }
.gen .right { text-align: right; }
.gen .cost { font-weight: 800; color: var(--gold); white-space: nowrap; }
.gen .cost.poor { color: var(--dim); }
.gen .count { font-size: 22px; font-weight: 800; }
.gen.locked { opacity: .34; filter: grayscale(.7); }

.land-locked {
  padding: 16px; border-radius: 12px; margin-bottom: 10px; text-align: center;
  border: 1px dashed var(--line); background: rgba(255,255,255,.02);
}
.land-locked .nm { font-weight: 800; margin-bottom: 4px; }
.land-locked .bl { font-size: 12px; color: var(--muted); margin-bottom: 12px; }

/* ----------------------------------------------------------------- tabs -- */

.tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.tab { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); border: 1px solid transparent; }
.tab:hover { color: var(--text); }
.tab.on { background: var(--accent); color: #16111f; }
.tab .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); margin-left: 6px; vertical-align: middle; }

.card {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 11px 12px; margin-bottom: 8px;
  border-radius: 12px; background: rgba(255,255,255,.028); border: 1px solid var(--line);
}
button.card:hover:not(:disabled) { background: var(--glow); border-color: var(--gold); }
button.card:disabled { opacity: .5; }
.card .name { font-weight: 700; font-size: 14px; }
.card .blurb { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.card .price { font-weight: 800; color: var(--gold); white-space: nowrap; }
.card .price.poor { color: var(--dim); }

/* ----------------------------------------------------------- skill tree -- */

.class-banner {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: 12px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--glow), rgba(255,255,255,.03));
  border: 1px solid var(--accent);
}
.class-banner .ic { font-size: 32px; text-align: center; }
.class-banner .nm { font-weight: 800; font-size: 16px; }
.class-banner .fo { font-size: 12px; color: var(--muted); }

.choose-box { padding: 14px; border-radius: 12px; margin-bottom: 16px;
  border: 1px dashed var(--accent); background: rgba(255,255,255,.02); }
.choose-box p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.class-opt {
  display: block; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 9px;
  border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.class-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--glow); }
.class-opt:disabled { opacity: .45; }
.class-opt .top { display: flex; align-items: center; gap: 9px; }
.class-opt .ic { font-size: 24px; }
.class-opt .nm { font-weight: 800; }
.class-opt .arch { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold); border: 1px solid var(--line); padding: 2px 7px; border-radius: 99px; }
.class-opt .bl { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.55; }
.class-opt .fo { font-size: 11.5px; color: var(--good); margin-top: 6px; }

.tier { margin-bottom: 16px; }
.tier-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tier-head .t { font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 800; color: var(--muted); }
.tier-head .req { font-size: 10.5px; color: var(--dim); }
.tier-head .line { flex: 1; height: 1px; background: var(--line); }

.node {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 7px;
  border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--line);
  transition: border-color .13s ease, background .13s ease;
}
button.node:hover:not(:disabled) { border-color: var(--gold); background: var(--glow); }
.node:disabled { opacity: .48; }
.node.maxed { border-color: var(--good); background: rgba(58,214,168,.08); }
.node .nm { font-weight: 700; font-size: 13.5px; }
.node .bl { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.node .lock { font-size: 11px; color: var(--bad); margin-top: 4px; }
.node .side { text-align: right; white-space: nowrap; }
.node .pips { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 4px; }
.node .pip { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.14); }
.node .pip.on { background: var(--gold); }
.node .cst { font-size: 11px; color: var(--dim); }
.node.maxed .cst { color: var(--good); }

/* ------------------------------------------------------------- rebirth --- */

.rebirth-box {
  padding: 16px; border-radius: 12px; margin-bottom: 14px; text-align: center;
  background: linear-gradient(135deg, var(--glow), rgba(255,255,255,.03));
  border: 1px solid var(--accent);
}
.rebirth-box .big { font-size: 34px; font-weight: 800; color: var(--gold); }
.rebirth-box p { margin: 6px 0 12px; font-size: 12.5px; color: var(--muted); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stat-box { padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.028);
  border: 1px solid var(--line); }
.stat-box .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); }
.stat-box .v { font-size: 16px; font-weight: 800; margin-top: 2px; }

/* -------------------------------------------------------- achievements --- */

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach {
  padding: 10px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.025); opacity: .42; filter: grayscale(1);
}
.ach.have { opacity: 1; filter: none; border-color: var(--gold);
  background: rgba(255,201,74,.09); }
.ach .ic { font-size: 20px; }
.ach .nm { font-weight: 700; font-size: 12.5px; margin-top: 3px; }
.ach .bl { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.ach .bn { font-size: 10.5px; color: var(--good); margin-top: 4px; font-weight: 700; }

/* ------------------------------------------------------------------ war -- */

.war-bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); margin-bottom: 14px; }
.war-bar div { display: grid; place-items: center; font-size: 12px; font-weight: 800;
  transition: width .5s ease; overflow: hidden; }
.war-bar .u { background: linear-gradient(135deg,#b47dff,#ff7ecb); color: #1b1030; }
.war-bar .n { background: linear-gradient(135deg,#ff4d5e,#e8c27a); color: #2c0d12; }
.war-side { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255,255,255,.028); border: 1px solid var(--line); }
.war-side.mine { border-color: var(--gold); background: rgba(255,201,74,.08); }
.war-side .ic { font-size: 26px; text-align: center; }
.war-side .nm { font-weight: 800; }
.war-side .sub { font-size: 11.5px; color: var(--muted); }
.war-side .val { text-align: right; font-weight: 800; color: var(--gold); }
.war-side .val small { display: block; font-size: 10.5px; color: var(--dim); font-weight: 600; }

/* ---------------------------------------------------------- leaderboard -- */

table.board { width: 100%; border-collapse: collapse; font-size: 13px; }
.board th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.board td { padding: 7px 8px; border-bottom: 1px solid rgba(54,44,74,.5); }
.board tr.me { background: rgba(255,201,74,.11); }
.board tr.me td { color: var(--gold); font-weight: 700; }
.board .rank { color: var(--muted); width: 34px; }
.board .val { text-align: right; font-weight: 700; }
.board .who2 small { color: var(--dim); }

/* ------------------------------------------------------------------ log -- */

.log { max-height: 260px; overflow-y: auto; }
.log-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid rgba(54,44,74,.45); font-size: 12.5px; }
.log-row:last-child { border-bottom: none; }
.log-row .when { color: var(--dim); font-size: 11px; }

/* ---------------------------------------------------------------- modal -- */

.veil { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(5,4,8,.8); backdrop-filter: blur(5px); }
.modal {
  width: min(520px, 100%); border-radius: 20px; padding: 26px; position: relative;
  overflow: hidden; animation: pop .22s cubic-bezier(.2,.9,.3,1.3);
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  max-height: 86vh; overflow-y: auto;
}
.modal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--sheen); }
@keyframes pop { from { opacity: 0; transform: scale(.93) translateY(12px); } }
.modal .ic { font-size: 42px; }
.modal h2 { font-size: 22px; margin: 8px 0; }
.modal p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.modal .timer { font-size: 12px; color: var(--bad); font-weight: 700; margin-bottom: 14px; }
.opt { display: block; width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 9px;
  border-radius: 12px; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.opt:hover { background: var(--glow); border-color: var(--gold); }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 11px 20px; border-radius: 999px; z-index: 60; font-size: 13.5px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--accent); box-shadow: var(--shadow);
  animation: pop .2s ease; max-width: 90vw; text-align: center; }

/* A helpdesk quip, in the event dialog: a note left on the desk, not news. */
.quip-text { color: var(--text); font-style: italic; }

/* ------------------------------------------------------------- security -- */

.gate-card .lead { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.gate-card .tiny { font-size: 12px; color: var(--dim); margin: 10px 0 0; text-align: center; }
#passkeyLoginBtn { width: 100%; margin-top: 10px; padding: 11px; font-size: 14px; }

/* Step two of a sign-in: same reasoning as .code-entry, narrower card. */
.field input.code-input {
  text-align: center; font-size: 22px; font-weight: 700; letter-spacing: .22em;
  text-indent: .22em; padding: 13px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.field input.code-input::placeholder { color: var(--dim); letter-spacing: normal;
  text-indent: 0; font-size: 15px; font-weight: 400; }

.security { text-align: left; }
.security .ic, .security h2 { text-align: center; }
.security > h2 { text-align: center; }
.sec-block { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px;
  margin-bottom: 14px; background: rgba(255,255,255,.02); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sec-head h3 { font-size: 15px; margin: 0; }
.sec-note { font-size: 11.5px; color: var(--gold); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sec-blurb { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px !important; }
.sec-warn { font-size: 12.5px; color: var(--gold); margin: 8px 0 0 !important; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; margin-bottom: 8px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.sec-row .name { font-weight: 700; font-size: 13.5px; }
.sec-row .blurb { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sec-add { display: flex; gap: 8px; margin-top: 4px; align-items: stretch; }
.sec-add input { flex: 1 1 140px; min-width: 0; padding: 11px 13px; border-radius: 10px;
  background: var(--ink); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 15px; }
.sec-add input::placeholder { color: var(--dim); letter-spacing: normal; }
.sec-add input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* .btn-primary is full-width by default, which flattens anything beside it. */
.sec-add .btn { width: auto; flex: 0 0 auto; }

/* The one-time code is typed once, under pressure, off a phone screen. */
.code-entry { flex-direction: column; gap: 10px; }
.code-entry .btn { width: 100%; }
.code-entry input {
  width: 100%; text-align: center; font-size: 26px; font-weight: 700;
  letter-spacing: .34em; text-indent: .34em; padding: 14px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.btn.wide { width: 100%; margin-top: 4px; }
.btn.small { padding: 6px 11px; font-size: 12.5px; }

.qr { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 14px;
  display: grid; place-items: center; }
.qr svg { width: min(230px, 60vw); height: auto; display: block; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px;
  letter-spacing: .08em; text-align: center; padding: 10px; border-radius: 10px;
  background: var(--ink); border: 1px dashed var(--line); margin-bottom: 14px;
  word-break: break-all; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.codes code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px; text-align: center; padding: 9px; border-radius: 9px;
  background: var(--ink); border: 1px solid var(--line); letter-spacing: .06em; }

/* =============================================================== mobile === */
/* A phone gets one column at a time rather than three stacked on top of each
   other, because stacked they are a screen and a half of scrolling before the
   holdings even begin. The bottom bar chooses which; the top bar sticks so the
   balance is on screen wherever you are. Nothing here touches the desktop
   layout — the bar is hidden until the viewport is narrow enough to need it. */

.mobilenav { display: none; }

@media (max-width: 780px) {

  .app { padding: 0 12px calc(80px + env(safe-area-inset-bottom)); }
  .panel { padding: 14px; margin-bottom: 12px; }

  /* --------------------------------------------------------- the top bar -- */
  /* Two rows, full bleed, pinned: who you are above, what you have below. */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    display: grid; align-items: center; gap: 5px 10px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand who" "bank level";
    margin: 0 -12px 12px; border-radius: 0; border-width: 0 0 1px;
    padding: calc(9px + env(safe-area-inset-top)) 12px 10px;
    background: rgba(18, 16, 26, .97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .topbar .spacer { display: none; }

  .brand { grid-area: brand; gap: 0; }
  .brand .name { display: none; }
  .brand .mark { font-size: 25px; }

  .who { grid-area: who; display: flex; align-items: center; justify-content: flex-end;
         gap: 6px; min-width: 0; }
  .who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who .lbl { display: none; }
  .who .btn-ghost { flex: none; padding: 7px 10px; font-size: 15px; line-height: 1; }

  .bank { grid-area: bank; text-align: left; }
  .bank .amount { font-size: 27px; }

  .levelbox { grid-area: level; justify-self: end; width: 100%; max-width: 200px; min-width: 0; }

  /* ------------------------------------------------------------- columns -- */
  /* Act is the view you get with no choice made, including if the script that
     sets the attribute never runs. */
  .grid { display: block; }
  .col-left { display: block; }
  .col-mid, .col-right { display: none; }
  body[data-view="holdings"] .col-left { display: none; }
  body[data-view="holdings"] .col-mid { display: block; }
  body[data-view="progress"] .col-left { display: none; }
  body[data-view="progress"] .col-right { display: block; }

  /* ---------------------------------------------------- the bottom bar --- */
  .mobilenav {
    display: flex; gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(18, 16, 26, .98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .mobilenav button {
    position: relative; flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 7px 4px; border-radius: 12px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
  }
  .mobilenav button .ic { font-size: 21px; line-height: 1; filter: saturate(.35) opacity(.6); }
  .mobilenav button.on { color: var(--text); background: var(--glow); }
  .mobilenav button.on .ic { filter: none; }
  .mobilenav button:active { transform: translateY(1px); }
  .mobilenav .dot {
    position: absolute; top: 5px; left: 50%; margin-left: 8px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  }

  /* ---------------------------------------------------------------- act -- */
  /* Big enough to hit without looking, small enough to leave the counters on
     screen on a short phone. */
  .emblem { width: min(100%, 340px, 46vh); margin-inline: auto; font-size: 66px; }
  /* Dispatches is the last panel in the view, so letting all sixty entries run
     on costs a long scroll but spares the thumb a scrolling box inside a
     scrolling page, which is the worse of the two. */
  .log { max-height: none; }

  /* ----------------------------------------------------------- holdings -- */
  .gen { grid-template-columns: 38px 1fr auto; gap: 9px; padding: 10px; }
  .gen .icon { font-size: 22px; }
  .gen .count { font-size: 19px; }

  /* ----------------------------------------------------------- progress -- */
  /* Eight pills wrap to three lines and push the content off the screen, so
     they scroll sideways on one line instead. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 3px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }

  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .board th, .board td { padding: 7px 5px; }
  .war-side { grid-template-columns: 34px 1fr auto; padding: 10px; }
  .rebirth-box .big { font-size: 30px; }

  /* --------------------------------------------------- dialogs and gate -- */
  /* Anything under 16px is a cue for iOS to zoom the page on focus. */
  .field input, .sec-add input { font-size: 16px; }
  .sec-add { flex-wrap: wrap; }

  .veil { padding: 12px; }
  .modal { padding: 20px 18px; border-radius: 18px; max-height: 86vh; max-height: 86dvh; }
  .modal .ic { font-size: 34px; }
  .modal h2 { font-size: 19px; }
  .opt { padding: 14px; }

  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); }

  .gate { padding: 16px; }
  .gate-card { padding: 26px 20px; border-radius: 18px; }
  .gate h1 { font-size: 23px; }
  .crest { font-size: 36px; }

  .oath { padding: 22px 14px; }
  .oath h1 { font-size: 26px; }
  .oath > .oath-inner > p { margin-bottom: 24px; }
  .side { padding: 22px 19px; }
  .side .mark { font-size: 44px; }
}

/* The narrowest phones still in use. Around 320px the achievement grid is a
   few pixels short of fitting two 132px columns and auto-fill drops to one,
   which wastes the width — two narrower ones still read. */
@media (max-width: 360px) {
  .ach-grid { grid-template-columns: 1fr 1fr; }
  .bank .amount { font-size: 24px; }
  .mobilenav button { font-size: 9.5px; letter-spacing: .03em; }
}

/* Landscape on a phone is mostly a strip of height; the circle must not eat
   all of it. Applies at any width, including the two-column tablet layout. */
@media (max-height: 560px) {
  .emblem { width: min(100%, 300px, 54vh); margin-inline: auto; font-size: 54px; }

  /* A dialog here has about a third of the room it expects. The padding and
     the heading give up their share first, so the choices stay on screen. */
  .veil { padding: 10px; }
  .modal { padding: 16px 18px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .modal .ic { font-size: 26px; }
  .modal h2 { font-size: 18px; margin: 4px 0 6px; }
  .modal p { font-size: 13px; margin-bottom: 12px; }
  .modal .timer { margin-bottom: 10px; }
  .opt { padding: 10px 13px; margin-bottom: 7px; }
}

/* ================================================================= war === */
/* The weekly war. The strip is the always-visible summary and the button
   into the war's own page; the invasion and profiles have pages too. */

.warstrip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: 100%;
  margin: -6px 0 18px; padding: 10px 16px; border-radius: var(--radius); text-align: left;
  background: linear-gradient(90deg, rgba(255,201,74,.10), rgba(160,107,255,.10));
  border: 1px solid var(--line); font-size: 13px; color: var(--muted);
  transition: border-color .15s ease, background .15s ease;
}
.warstrip:hover { border-color: var(--gold); }
.warstrip .ws-ic { font-size: 22px; line-height: 1; }
.warstrip .ws-main { display: flex; flex-direction: column; line-height: 1.25; }
.warstrip .ws-main b { color: var(--text); font-size: 14px; }
.warstrip .ws-main small { font-size: 11.5px; }
.warstrip .ws-score { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.warstrip .ws-score i { font-style: normal; color: var(--dim); font-weight: 600; margin: 0 3px; }
.warstrip .ws-you { color: var(--gold); font-weight: 700; }
.warstrip .ws-clock { margin-left: auto; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.warstrip .ws-go { font-weight: 800; color: #16111f; background: var(--accent); padding: 4px 12px;
  border-radius: 99px; white-space: nowrap; }
.warstrip.invasion .ws-go { color: #2a1408; background: #ffb4c8; }
.warstrip.invasion {
  border-color: #c9807a; color: #f5d7cf;
  background: repeating-linear-gradient(135deg, rgba(255,160,180,.12) 0 14px, rgba(122,78,52,.20) 14px 28px),
              linear-gradient(90deg, rgba(122,78,52,.35), rgba(255,160,180,.15));
  animation: alarm 2.4s ease-in-out infinite;
}
@keyframes alarm { 50% { border-color: #ffb4c8; box-shadow: 0 0 0 3px rgba(255,160,180,.12); } }

.subtabs { margin-bottom: 14px; }
.subtabs .tab { font-size: 12px; padding: 6px 11px; }

.war-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 12px; }
.war-title { font-weight: 800; font-size: 16px; }
.war-sub { font-size: 12px; color: var(--muted); }
.war-clock { text-align: right; line-height: 1.1; }
.war-clock b { display: block; font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums; }
.war-clock small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.war-lead { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.war-lead b { color: var(--text); }
.war-note { font-size: 12px; color: var(--muted); margin: 8px 0 12px; line-height: 1.55; }
.war-note b { color: var(--text); }
.war-you { margin-bottom: 16px; }
.war-you.muted { font-size: 13px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.rally { margin-top: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px;
  background: rgba(58,214,168,.10); border: 1px solid rgba(58,214,168,.34); color: #b6ffe9; }
.dispatch { font-size: 12.5px; font-style: italic; color: var(--gold); margin: 14px 0; }
.prev-war { padding: 11px 13px; border-radius: 12px; margin: 10px 0; font-size: 13px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.prev-war .k { font-size: 11.5px; color: var(--muted); }
.prev-war .v { font-weight: 800; margin: 2px 0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.scoretable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.scoretable th { text-align: right; font-size: 11px; color: var(--muted); padding: 5px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.scoretable td { padding: 6px 8px; border-bottom: 1px solid rgba(54,44,74,.5); text-align: right;
  font-variant-numeric: tabular-nums; }
.scoretable td:first-child, .scoretable th:first-child { text-align: left; color: var(--muted); }
.scoretable tr.total td { font-weight: 800; color: var(--gold); border-bottom: none; }

.inv-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 15px; margin-bottom: 14px; border-radius: 14px; border: 1px solid #c9807a;
  background: repeating-linear-gradient(135deg, rgba(255,160,180,.10) 0 12px, rgba(122,78,52,.22) 12px 24px); }
.inv-banner .ic { font-size: 36px; line-height: 1; }
.inv-banner b { display: block; font-size: 15px; }
.inv-banner small { display: block; font-size: 12px; color: #f5d7cf; }
.inv-banner .go { margin-left: auto; font-weight: 800; white-space: nowrap; color: #ffb4c8; }

/* -- the fortress itself ------------------------------------------------- */
/* Layered CSS scenery stays crisp at every size and follows live stage progress. */
.scene { --stone: #555477; --roof: #26283e; --light: #f3cd88;
  position: relative; isolation: isolate; height: 340px; border-radius: 18px; overflow: hidden;
  margin-bottom: 18px; border: 1px solid #645578; background: #101322;
  box-shadow: inset 0 0 70px #080b19, 0 16px 40px #0004; }
.scene-unicorn { --stone: #8c71ae; --roof: #59436e; --light: #ffe6bc; }
.scene-ninja { --stone: #485369; --roof: #242d42; }
.scene-sky { position: absolute; inset: 0; background:
  radial-gradient(circle at 84% 26%, #fff4d7 0 22px, #e4d7fb22 23px, transparent 75px),
  radial-gradient(ellipse at 12% 30%, #8b539955, transparent 55%),
  linear-gradient(180deg, #11182e, #3b3558 70%, #555067); }
.scene-unicorn .scene-sky { background:
  radial-gradient(circle at 84% 26%, #fff4d7 0 22px, #e4d7fb22 23px, transparent 75px),
  linear-gradient(160deg, #443266, #85658c 65%, #444c6c); }
.scene-sky::after { content: ""; position: absolute; inset: 0; opacity: .65;
  background-image: radial-gradient(circle, #ffedce 1px, transparent 1.5px),
    radial-gradient(circle, #e6dbff 1px, transparent 1.5px);
  background-size: 113px 97px, 173px 131px; background-position: 31px 17px, 71px 49px; }
.scene-mountains { position: absolute; inset: 35% -5% 12%; background: #171d32;
  clip-path: polygon(0 50%, 9% 25%, 18% 55%, 30% 8%, 44% 64%, 57% 36%, 66% 62%, 80% 0, 94% 50%, 100% 30%, 100% 100%, 0 100%); }
.scene-ground { position: absolute; inset: 75% 0 0; background: linear-gradient(#29323f, #111823);
  border-top: 1px solid #838b9c44; }
.scene-ground::after { content: ""; position: absolute; inset: 0 25%;
  background: linear-gradient(#b4a69533, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.scene-towers { position: absolute; left: 12%; right: 12%; bottom: 85px; display: flex;
  align-items: flex-end; justify-content: center; gap: clamp(6px, 2vw, 24px); }
.scene-towers::before { content: ""; position: absolute; bottom: 0; left: -4%; right: -4%; height: 28px;
  background: repeating-linear-gradient(90deg, #444558 0 25px, #303343 26px 28px);
  border-top: 5px solid #727185; box-shadow: 0 8px 15px #0006; }
.scene-towers .tower { position: relative; flex: 1; max-width: 86px; height: calc(55px + var(--h) * 14px);
  border: 1px dashed #a9b5ce66; border-bottom: none; background: #29314755;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  color: #bdc7df; }
.tower-roof { position: absolute; bottom: 100%; left: -20%; width: 140%; height: 28px;
  background: #68718b55; clip-path: polygon(50% 0, 85% 76%, 100% 100%, 0 100%, 15% 76%); }
.tower-mark { font-size: 22px; opacity: .35; filter: grayscale(1); }
.tower-window { width: 9px; height: 18px; border-radius: 6px 6px 0 0; background: #101725; }
.scene-towers .tower.done { border: 1px solid #b4b0c377;
  background: repeating-linear-gradient(0deg, transparent 0 17px, #131e3033 18px 19px), linear-gradient(90deg, var(--stone), #30384e);
  box-shadow: 5px 0 12px #0004; }
.tower.done .tower-roof { background: var(--roof); filter: drop-shadow(0 -2px 0 #b6a7b8); }
.tower.done .tower-mark, .tower.current .tower-mark { opacity: 1; filter: none; }
.tower.done .tower-window { background: var(--light); box-shadow: 0 0 14px #ffd58e88; }
.scene-towers .tower.current { border: 1px solid #e4c58a;
  background: repeating-linear-gradient(90deg, transparent 0 16px, #d4b57844 17px 19px), #544c4f;
  box-shadow: 0 0 22px #e4c58a22; }
.tower.current .tower-roof { background: #ba9d72; }
.tower-unicorn, .tower-blend:nth-child(odd), .tower-alliance:nth-child(odd) { --stone: #9579b5; --roof: #655080; }
.tower-unicorn .tower-roof { height: 40px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.scene-crowd { position: absolute; left: 10%; right: 10%; bottom: 52px; display: flex;
  justify-content: center; gap: 5px; font-size: 13px; max-height: 23px; overflow: hidden; color: #d2c1df; }
.scene-label { position: absolute; left: 24px; top: 22px; right: 24px;
  text-shadow: 0 2px 8px #080b19; }
.scene-kicker { color: #e3cca0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; }
.scene-label h2 { margin-top: 5px; max-width: 75%; font: 600 clamp(20px, 3vw, 29px)/1.2 Georgia, serif; color: #fff2db; }
.scene-label .badge { display: inline-block; margin-top: 8px; }
.scene-status { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 22px;
  display: flex; justify-content: space-between; gap: 10px; background: #0c1323cc;
  border-top: 1px solid #b4b0c333; color: #dfd7e9; font-size: 11px; letter-spacing: .03em; }
.scene-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e9c480; margin-right: 6px; }
.stronghold > .war-note { color: #bfb2cb; line-height: 1.75; }
.stronghold > .war-note:first-of-type { color: #e3cfae; font: italic 15px/1.6 Georgia, serif;
  padding: 0 0 12px 14px; border-left: 2px solid #bda16b; }
.stronghold .meters { margin: 20px 0; padding: 20px; border: 1px solid #655575;
  border-radius: 12px; background: linear-gradient(120deg, #302738aa, #161c2caa); }
.stronghold .meter-top { color: #d5c8e1; }
.stronghold .bar { height: 10px; background: #0b101b; border: 1px solid #ffffff12; }
.stronghold .meter:not(.bad):not(.gold):not(.good) .bar i { background: linear-gradient(90deg, #8061b8, #c9b2eb, #ead2a0); }
.stronghold .meters .war-note { margin-bottom: 0; }
.stronghold .section-title { color: #e3cfae; letter-spacing: .14em; font-size: 11px; margin: 24px 0 12px; }
.stronghold .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stronghold .war-act { grid-template-columns: 1fr; align-content: space-between; gap: 16px; margin: 0;
  padding: 18px; border-color: #655575; background: linear-gradient(145deg, #352b41, #1a1d2b); }
.stronghold .war-act .name { color: #f0dfc1; }
.stronghold .war-act .blurb { color: #bfb2cb; }
.stronghold .war-act .detail { color: #a8d7c9; }
.stronghold .price-col { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #ffffff14; padding-top: 10px; }
.stronghold .war-act:hover:not(:disabled) { border-color: #e3c58d; background: #3c3049; }
.stronghold .war-act:focus-visible { outline: 2px solid #e3c58d; outline-offset: 3px; }
.stronghold .ladder { gap: 10px; }
.stronghold .rung { padding: 16px; opacity: 1; background: #171923; border-color: #3f394d; }
.stronghold .rung .ic { font-size: 24px; }
.stronghold .rung small { color: #b7abc5; }
.stronghold .rung small.req { color: #aa9db9; }
.stronghold .rung.current { border-color: #bda16b; background: linear-gradient(100deg, #bda16b1a, #171923); }
.stronghold .rung.done { border-color: #548e7c; background: #20332e66; }
@media (max-width: 600px) {
  .scene { height: 320px; }
  .scene-label { left: 16px; right: 16px; top: 17px; }
  .scene-label h2 { max-width: 85%; font-size: 22px; }
  .scene-towers { left: 7%; right: 7%; gap: 8px; }
  .tower-mark { font-size: 18px; }
  .scene-status { padding: 12px; font-size: 10px; letter-spacing: 0; }
  .stronghold .acts { grid-template-columns: 1fr; }
  .stronghold .war-act { grid-template-columns: 1fr auto; }
  .stronghold .price-col { flex-direction: column; justify-content: center; border: 0; padding: 0; }
  .stronghold .meters { padding: 15px; }
}
.badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.badge.good { background: rgba(58,214,168,.25); color: #c9ffee; }
.badge.bad { background: rgba(239,75,107,.3); color: #ffd3dc; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.meters { margin-bottom: 10px; }
.meter { margin-bottom: 9px; }
.meter-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  color: var(--muted); margin-bottom: 4px; }
.meter-top span:last-child { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.meter.bad .bar i { background: linear-gradient(90deg, #ef4b6b, #ff9a6b); }
.meter.good .bar i { background: linear-gradient(90deg, #3ad6a8, #7ee8fa); }
.meter.gold .bar i { background: linear-gradient(90deg, #e8c27a, #ffd36b); }
.orders-bar { margin-bottom: 14px; }
.orders-bar .meter { margin-bottom: 0; }

.ladder { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rung { display: grid; grid-template-columns: 30px 1fr 20px; gap: 9px; align-items: start;
  padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.025);
  border: 1px solid var(--line); opacity: .6; }
.rung .ic { font-size: 20px; text-align: center; }
.rung .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rung .mid b { font-size: 13px; }
.rung small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.rung small.req { color: var(--dim); }
.rung .st { font-weight: 800; color: var(--good); text-align: center; }
.rung.done { opacity: 1; border-color: rgba(58,214,168,.4); background: rgba(58,214,168,.06); }
.rung.current { opacity: 1; border-color: var(--gold); background: rgba(255,201,74,.07); }

.acts { display: flex; flex-direction: column; }
.war-act { grid-template-columns: 1fr auto; }
.war-act .detail { color: var(--good); margin-top: 4px; }
.war-act .detail .pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 4px; }
.war-act .pip { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.14); }
.war-act .pip.on { background: var(--gold); }
.price-col { text-align: right; }
.price-col .orders { font-size: 11.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.price-col .orders.poor { color: var(--bad); }
.card .price .unit { font-size: 10.5px; color: var(--muted); font-weight: 600; }
button.card.stance.on { border-color: var(--gold); background: rgba(255,201,74,.08); }
button.card.stance.voted .name::after { content: " · your vote"; color: var(--good); font-weight: 600;
  font-size: 12px; }
.army-stats { margin-bottom: 14px; }
.army-stats small { font-size: 11px; font-weight: 600; color: var(--muted); }

.ability { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 14px;
  border: 1px dashed var(--accent); background: rgba(255,255,255,.02); }
.ability .ic { font-size: 28px; text-align: center; }
.ability b { display: block; }
.ability small { font-size: 12px; color: var(--muted); }
.ability .btn-primary { width: auto; white-space: nowrap; }
.ability.live { border-style: solid; box-shadow: 0 0 0 3px var(--glow); }

.rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enemy-card { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px;
  background: rgba(239,75,107,.06); border: 1px solid rgba(239,75,107,.3); font-size: 12.5px; }
.enemy-card span { color: var(--muted); }
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--dim); }
a.plink:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ================================================================ pages === */

.page { min-height: 100vh; min-height: 100dvh; position: relative; }
.page-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto;
  padding: 22px 20px 70px; }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; }
.page-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); }

/* -- the invasion: a farm-themed emergency ------------------------------- */
.invasion-page { background:
  radial-gradient(900px 500px at 50% -10%, rgba(255,160,180,.20), transparent 60%),
  radial-gradient(700px 500px at 100% 100%, rgba(122,78,52,.30), transparent 60%), #140e0c; }
.invasion-page .section-title { color: #f0c3b8; margin-top: 22px; }
.inv-hero { position: relative; text-align: center; padding: 26px 18px 22px; border-radius: 22px;
  overflow: hidden; border: 1px solid #6b4436;
  background: linear-gradient(180deg, #5d8fc0 0%, #9ec8e3 46%, #7a9a4c 47%, #5b4230 100%); }
.inv-hero.quiet { background: linear-gradient(180deg, #2e3f5c, #3b5a3a 60%, #3a2a1f); }
.inv-army { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center;
  gap: 4px; font-size: 22px; opacity: .85; pointer-events: none; }
.inv-army span { animation: trot 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
@keyframes trot { 50% { transform: translateY(-5px) rotate(-6deg); } }
.inv-boss { font-size: 96px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
  animation: bob 3.2s ease-in-out infinite; }
.inv-hero h1 { font-size: 30px; margin: 8px 0 6px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.inv-desc { color: #fff; font-size: 15px; max-width: 620px; margin: 0 auto 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.inv-lore { color: #fdf3e7; font-size: 13px; max-width: 640px; margin: 0 auto 60px; font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.inv-hero .war-clock { text-align: center; margin-bottom: 40px; }
.inv-hero .war-clock b { color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.inv-hero .war-clock small { color: #fdf3e7; }
.inv-intel { position: relative; margin: 16px 0; padding: 16px 18px 14px; border-radius: 6px;
  background: #efe2c4; color: #3b2a16; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; box-shadow: var(--shadow); transform: rotate(-.4deg); }
.inv-intel .stamp { position: absolute; right: 14px; top: -12px; transform: rotate(6deg);
  border: 3px solid #b3261e; color: #b3261e; padding: 2px 10px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; background: #efe2c4; font-size: 12px; }
.inv-hp { padding: 14px 16px; border-radius: 14px; border: 1px solid #6b4436; background: rgba(0,0,0,.25); }
.hpbar { position: relative; height: 18px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.hpbar i { display: block; height: 100%; border-radius: 99px; transition: width .6s ease;
  background: linear-gradient(90deg, #ff6b8b, #ffb4c8 60%, #ffd6a0); }
.hpbar .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(0,0,0,.55); }
.inv-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.invasion-page .subtabs { margin-top: 18px; }
.ally-bar { margin-bottom: 10px; }

/* What a defeat would cost, always in view. */
.stakes { margin: 14px 0 0; padding: 13px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid rgba(239,75,107,.55); background: linear-gradient(135deg, rgba(239,75,107,.16), rgba(255,154,107,.08)); }
.stakes p { margin: 4px 0 0; }
.stakes b { color: #ffd3dc; }
.stakes-head { font-weight: 900; letter-spacing: .04em; color: #ffb4c8; }
.stakes.safe { border-color: rgba(58,214,168,.5); background: rgba(58,214,168,.1); }
.stakes.safe b { color: #c9ffee; }

/* Whose design a stage of the alliance's fortress wears. */
.rung small.lean { color: var(--text); }
.rung small.lean-unicorn { color: #ffb8e6; }
.rung small.lean-ninja { color: #ff9aa5; }
.rung small.lean-blend { color: #c9ffee; }
.rung .harmony { color: var(--good); }

/* The dialog after a lost invasion. */
.raid-row { text-align: left; margin: 12px 0; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(239,75,107,.45); background: rgba(239,75,107,.08); }
.raid-row ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.inv-top { display: flex; flex-direction: column; gap: 4px; }
.inv-top .row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 7px 10px;
  border-radius: 9px; background: rgba(255,255,255,.03); font-size: 13px; }
.inv-top .rank { color: var(--muted); }

/* -- trophies: weekly are metal, monthly are rosettes --------------------- */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.trophy { position: relative; padding: 14px; border-radius: 14px; text-align: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.trophy .ic { font-size: 34px; line-height: 1.1; }
.trophy b { display: block; font-size: 13.5px; margin-top: 6px; }
.trophy small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.trophy p { font-size: 12px; color: var(--muted); font-style: italic; margin: 8px 0 0; line-height: 1.5; }
.trophy.weekly.rank1 { border-color: #ffd36b;
  background: linear-gradient(160deg, rgba(255,211,107,.20), rgba(255,255,255,.02) 60%);
  box-shadow: 0 0 0 1px rgba(255,211,107,.25), 0 10px 26px rgba(255,190,60,.12); }
.trophy.weekly.rank2 { border-color: #c9d2e0;
  background: linear-gradient(160deg, rgba(201,210,224,.18), rgba(255,255,255,.02) 60%); }
.trophy.monthly { border: 2px dashed #c98a5a; border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(255,160,180,.18), transparent 70%), rgba(122,78,52,.14); }
.trophy.monthly::before { content: "🎀"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 20px; }
.trophy.featured { padding: 22px 18px; margin-bottom: 12px; }
.trophy.featured .ic { font-size: 64px; }
.trophy.featured b { font-size: 18px; }
.trophy.featured p { font-size: 13.5px; }

/* -- profiles ---------------------------------------------------------- */
.profile-page { background: var(--ink); overflow: hidden; }
.pbg-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pbg-motif span { position: absolute; font-size: 28px; opacity: .13;
  left: calc(mod(var(--i) * 37, 97) * 1%); top: calc(mod(var(--i) * 53, 91) * 1%);
  animation: drift 14s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
@supports not (left: calc(mod(3, 2) * 1%)) {
  .pbg-motif { display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; }
  .pbg-motif span { position: static; margin: 22px; }
}
@keyframes drift { 50% { transform: translateY(-10px) rotate(8deg); } }
.prof-card { position: relative; padding: 18px 20px; border-radius: 18px; margin-bottom: 16px;
  background: rgba(18,16,26,.82); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.prof-card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin-bottom: 12px; }
.prof-card > .btn-ghost { position: absolute; top: 16px; right: 16px; }
.prof-id { display: flex; gap: 16px; align-items: center; padding-right: 110px; }
.prof-crest { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.prof-id h1 { font-size: 28px; overflow-wrap: anywhere; }
.prof-title { color: var(--gold); font-weight: 700; font-style: italic; margin: 2px 0; }
.prof-meta { font-size: 13px; color: var(--muted); }
.prof-motto { font-size: 12px; color: var(--dim); font-style: italic; margin-top: 3px; }
.prof-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Backgrounds, by the ids content.PROFILE_BACKGROUNDS hands out. */
.pbg-plain    { background: linear-gradient(180deg, #191524, #0b0910); }
.pbg-dusk     { background: linear-gradient(180deg, #2b1d4a 0%, #7a3b5e 55%, #e0875b 100%); }
.pbg-glade    { background: radial-gradient(600px 300px at 80% 10%, rgba(230,240,255,.25), transparent 60%),
                            linear-gradient(180deg, #16323a 0%, #1f4d38 60%, #0f2619 100%); }
.pbg-valley   { background: radial-gradient(500px 260px at 20% 0%, rgba(255,77,94,.25), transparent 60%),
                            linear-gradient(180deg, #1a1733 0%, #3a1f2c 60%, #120d12 100%); }
.pbg-celestial { background: linear-gradient(120deg, #ff9ad5, #ffd36b, #7ee8fa, #b47dff, #ff9ad5);
  background-size: 400% 400%; animation: aurora 18s ease infinite; }
.pbg-celestial::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent),
              radial-gradient(1.5px 1.5px at 45% 70%, #fff, transparent), radial-gradient(2px 2px at 85% 60%, #fff, transparent),
              rgba(20,10,40,.35); }
@keyframes aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.pbg-orchard  { background: linear-gradient(180deg, #3f6b4a 0%, #7fa873 50%, #e7b8c8 100%); }
.pbg-rooftops { background: radial-gradient(160px 160px at 78% 16%, #f6efd7 45%, rgba(246,239,215,.15) 50%, transparent 70%),
                            linear-gradient(180deg, #070a1c 0%, #1b1f3d 70%, #0b0b12 100%); }
.pbg-bamboo   { background: repeating-linear-gradient(90deg, rgba(120,160,110,.18) 0 16px, transparent 16px 70px),
                            linear-gradient(180deg, #9aa9a0 0%, #4e6b56 60%, #22332a 100%); }
.pbg-invasion { background: repeating-linear-gradient(135deg, rgba(255,160,180,.10) 0 18px, rgba(122,78,52,.16) 18px 36px),
                            linear-gradient(180deg, #4a3226, #1c120d); }
.pbg-invasion-gold { background: radial-gradient(600px 300px at 50% 0%, rgba(255,211,107,.35), transparent 65%),
                                 repeating-linear-gradient(135deg, rgba(255,211,107,.12) 0 18px, rgba(122,78,52,.18) 18px 36px),
                                 linear-gradient(180deg, #5a3f1c, #1c120d); }

.customise .ic, .customise > h2 { text-align: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
  margin-bottom: 8px; }
.swatch { position: relative; height: 64px; border-radius: 12px; border: 2px solid var(--line);
  overflow: hidden; display: flex; align-items: flex-end; padding: 6px; text-align: left; }
.swatch span { font-size: 11px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.9); position: relative; z-index: 1; }
.swatch.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,201,74,.25); }
.swatch.locked { background: rgba(255,255,255,.03); opacity: .6; border-style: dashed; }
.picker { width: 100%; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; font: inherit;
  background: var(--ink); color: var(--text); border: 1px solid var(--line); }
.arrange { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; max-height: 240px; overflow-y: auto; }
.arr-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 12.5px; }
.arr-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1240px) { .rank-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 780px) {
  .warstrip { margin: 0 0 12px; padding: 9px 12px; gap: 6px 10px; font-size: 12px; }
  .warstrip .ws-main { flex: 1 1 60%; }
  .warstrip .ws-you { display: none; }
  .warstrip .ws-clock { margin-left: 0; }
  .rank-grid, .inv-sides { grid-template-columns: 1fr; }
  .inv-banner { flex-wrap: wrap; }
  .inv-banner > span:nth-child(2) { flex: 1 1 60%; }
  .inv-banner .go { margin-left: 48px; }
  .scene { height: 130px; }
  .page-inner { padding: 14px 12px 60px; }
  .inv-boss { font-size: 72px; }
  .inv-hero h1 { font-size: 23px; }
  .inv-army { font-size: 16px; }
  .prof-id { padding-right: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .prof-card > .btn-ghost { position: static; margin-top: 12px; }
  .prof-id h1 { font-size: 23px; }
  .trophy-grid { grid-template-columns: 1fr 1fr; }
  .picker { font-size: 16px; }
}
@media (max-width: 420px) { .trophy-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .warstrip.invasion, .scene-towers .tower.current, .scene-crowd span, .inv-army span, .inv-boss,
  .pbg-motif span, .pbg-celestial { animation: none !important; }
}

/* -- the war page: the same sections as before, with room to spread out -- */
.war-page { background:
  radial-gradient(1100px 620px at 12% -8%, var(--glow), transparent 60%),
  radial-gradient(900px 560px at 92% 4%, rgba(74,168,255,.12), transparent 62%), var(--ink); }
.war-page .page-inner { max-width: 1240px; }
.war-page .subtabs { margin-bottom: 18px; }
.war-page .subtabs .tab { font-size: 13px; padding: 8px 14px; }
.war-page #warBody { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--ink-2)); box-shadow: var(--shadow); }
@media (min-width: 900px) {
  .war-page .war-title { font-size: 20px; }
  .war-page .war-clock b { font-size: 26px; }
  .war-page .war-bar { height: 42px; font-size: 13px; }
  .war-page .stats { grid-template-columns: repeat(4, 1fr); }
  .war-page .acts, .war-page .ladder { display: grid; gap: 0 10px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .war-page .ladder { gap: 8px 10px; }
  .war-page .scene { height: 230px; }
  .war-page .scene-towers { bottom: 50px; gap: 10px; }
  .war-page .scene-towers .tower { font-size: calc(28px + var(--h) * 6px); }
  .war-page .scene-crowd { font-size: 14px; max-height: 60px; }
  .war-page .log { max-height: 420px; }
}
@media (max-width: 780px) {
  .war-page #warBody { padding: 14px 12px; }
}

/* The balance, top right of the war and invasion pages. */
.page-side { display: flex; align-items: center; gap: 16px; }
.page-bank .amount { font-size: 24px; }
.page-bank .rate { font-size: 11.5px; }
@media (max-width: 780px) {
  .page-side .page-kicker { display: none; }
  .page-bank .amount { font-size: 21px; }
}

/* Pixel-art muster field. Sprites are illustrative; the counters remain authoritative. */
.army-scene { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 22px;
  border: 1px solid #69607c; border-radius: 16px; background: #151c30;
  box-shadow: 0 12px 30px #0003; }
.muster-heading { padding: 22px 24px 16px; background:
  radial-gradient(circle at 91% 35%, #f5deb8 0 15px, #f5deb80a 16px, transparent 50px),
  linear-gradient(110deg, #3c2c50, #172438); }
.muster-heading h2 { color: #f3e4c9; font: 600 27px/1.25 Georgia, serif; margin: 5px 45px 8px 0; }
.muster-heading p { color: #c2b9d1; font-size: 12px; margin: 0; }
.muster-field { display: grid; grid-template-columns: 1fr; gap: 1px; background: #9991a333; }
.contested .muster-field { grid-template-columns: 1fr 1fr; }
.muster-company { min-width: 0; position: relative; padding: 17px 18px 12px; text-align: center;
  background: repeating-linear-gradient(0deg, transparent 0 23px, #b1b4c805 24px 25px),
    linear-gradient(#283749, #263438 70%, #202b31); }
.muster-company.hostile { background: repeating-linear-gradient(0deg, transparent 0 23px, #c8b7a105 24px 25px),
    linear-gradient(#403449, #483b38 70%, #322b2d); }
.muster-banner { display: inline-block; border: 1px solid #c1aed14d; padding: 5px 12px;
  background: #131c2bbf; color: #dfcceb; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; }
.hostile .muster-banner { color: #f3bbba; border-color: #cf8c8b66; background: #291b27bf; }
.muster-ranks { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: 61px 72px;
  justify-content: center; padding: 12px 16px 6px 0; }
.pixel-trooper { display: block; width: 72px; height: 72px; }
.pixel-trooper:nth-child(n+4) { transform: translateX(16px); }
.pixel-soldier { display: block; width: 72px; height: 72px; image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #0002); }
.pixel-trooper .pixel-soldier { animation: muster-idle 2.8s steps(1, end) infinite;
  animation-delay: calc(var(--i) * -.37s); }
.hostile .pixel-soldier { scale: -1 1; }
.muster-caption { color: #c0bac6; font-size: 10px; margin-top: 8px; }
.muster-company.routed .pixel-soldier { opacity: .5; scale: 1 1; animation: none; }
.pixel-fallback { display: block; font-size: 44px; line-height: 72px; }
.inv-army .pixel-soldier { width: 42px; height: 42px; }
.inv-army { gap: 0; overflow: hidden; }
.inv-army > span { flex: 0 0 42px; }
@keyframes muster-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (max-width: 600px) {
  .muster-heading { padding: 18px 16px 14px; }
  .muster-heading h2 { font-size: 24px; }
  .contested .muster-field { grid-template-columns: 1fr; }
  .muster-company { padding: 14px 10px 12px; }
  .muster-ranks { grid-template-columns: repeat(3, 64px); grid-template-rows: 52px 64px; }
  .pixel-trooper, .pixel-trooper .pixel-soldier { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-trooper .pixel-soldier, .inv-army span { animation: none; }
}