/* =========================================================================
   IRON MERIDIAN — design system.

   Command table, printed military map, rugged console. Restrained palette,
   chunky framing, dithered surfaces, sharp labels (Art Direction Spec).
   Every colour, radius and space is a token; nothing below the token block
   should hard-code a hex value.
   ========================================================================= */

/* ------------------------------------------------------------- tokens */
:root {
  /* surfaces — charcoal through to field green */
  --ink-0:#080a07;  --ink-1:#0e120c;  --ink-2:#151a12;  --ink-3:#1e2419;
  --ink-4:#28301f;

  /* structure — gunmetal */
  --steel-0:#242b31; --steel-1:#38424c; --steel-2:#4d5a66; --steel-3:#6a7a88;

  /* accents */
  --olive:#6b7a4a;   --khaki:#a9a071;   --brass:#c39b3e;   --brass-dim:#8a6c2a;
  --parchment:#d8cfae; --parchment-dim:#9d9781;
  --rust:#b4613a;

  /* semantic */
  --good:#8fae54;   --warn:#e2a33a;   --bad:#c8503c;   --info:#5d87b0;

  /* type */
  --text:#ded6bd;   --text-dim:#98917a; --text-faint:#6d6857;
  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Segoe UI",system-ui,-apple-system,sans-serif;
  --f-pixel:"Press Start 2P",ui-monospace,monospace;
  --f-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r1:2px; --r2:3px;

  /* chrome */
  --bevel: inset 1px 1px 0 rgba(255,255,255,.06), inset -1px -1px 0 rgba(0,0,0,.5);
  --plate: 0 2px 0 rgba(0,0,0,.55), 0 0 0 1px var(--steel-0);
  --lift: 0 6px 20px rgba(0,0,0,.55);

  --rail-w:58px;
  --resbar-h:52px;
  --panel-w:330px;
}

/* dither: a 2px checker used to break up flat fills without a texture file */
.dither, .wr-panel, .wr-plate {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.014) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.014) 75%),
    linear-gradient(45deg, rgba(255,255,255,.014) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.014) 75%);
  background-size:4px 4px;
  background-position:0 0, 2px 2px;
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--ink-0); color:var(--text);
  font-family:var(--f-body); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select,textarea{ font:inherit; color:inherit; }
/* Kill the 300ms double-tap-zoom delay on everything interactive. */
button,a,select,input,.wr-btn,.wr-fac,.wr-mode,.wr-build,.wr-unit,.wr-rail-btn{ touch-action:manipulation; }
::selection{ background:var(--brass-dim); color:var(--ink-0); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--ink-1); }
::-webkit-scrollbar-thumb{ background:var(--steel-1); border:2px solid var(--ink-1); }
::-webkit-scrollbar-thumb:hover{ background:var(--steel-2); }

/* ------------------------------------------------------- typography */
.wr-h{ font-family:var(--f-display); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.wr-num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.wr-dim{ color:var(--text-dim); }
.wr-faint{ color:var(--text-faint); }
.wr-good{ color:var(--good); } .wr-warn{ color:var(--warn); } .wr-bad{ color:var(--bad); }

/* ============================================================ SHELL
   `--wr-vh` is the *visible* viewport height, kept current from
   visualViewport by app.js. On iOS the address bar grows and shrinks the
   visible area without changing 100vh, so anything sized in vh ends up
   partly under the chrome. dvh fixes this on modern browsers; the variable
   covers the rest and the on-screen keyboard case. */
:root{ --wr-vh:100vh; }
#wr-app{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* ---------------------------------------------------- resource bar */
#wr-resbar{
  height:var(--resbar-h); flex:0 0 auto; display:flex; align-items:stretch;
  background:linear-gradient(180deg,var(--steel-0),var(--ink-1));
  border-bottom:2px solid var(--ink-0); box-shadow:var(--plate); z-index:40;
}
.wr-res-brand{
  display:flex; align-items:center; gap:var(--s2); padding:0 var(--s4);
  border-right:1px solid rgba(0,0,0,.5); min-width:150px;
}
.wr-res-brand b{ font-family:var(--f-display); font-size:15px; letter-spacing:.14em; color:var(--brass); text-transform:uppercase; }
.wr-res-brand span{ font-size:9px; color:var(--text-faint); letter-spacing:.16em; text-transform:uppercase; }

.wr-res-list{ display:flex; flex:1; min-width:0; overflow-x:auto; }
.wr-res{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:0 var(--s3); min-width:96px; border-right:1px solid rgba(0,0,0,.35);
  box-shadow:var(--bevel); position:relative; cursor:default;
}
.wr-res-top{ display:flex; align-items:baseline; gap:5px; }
.wr-res-glyph{ color:var(--khaki); font-size:12px; width:12px; text-align:center; }
.wr-res-val{ font-family:var(--f-mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.wr-res-name{ font-family:var(--f-display); font-size:9px; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase; }
.wr-res-net{ font-family:var(--f-mono); font-size:10px; }
.wr-res.deficit{ background:linear-gradient(180deg, rgba(200,80,60,.22), transparent); }
.wr-res.deficit .wr-res-val{ color:var(--bad); }
/* deficits never rely on colour alone — the strip gets a hazard hatch */
.wr-res.deficit::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:repeating-linear-gradient(45deg,var(--bad) 0 4px,var(--ink-1) 4px 8px);
}

.wr-res-meta{ display:flex; align-items:center; gap:var(--s3); padding:0 var(--s4); border-left:1px solid rgba(0,0,0,.5); }
.wr-meta-cell{ display:flex; flex-direction:column; align-items:flex-end; }
.wr-meta-cell b{ font-family:var(--f-mono); font-size:14px; }
.wr-meta-cell span{ font-family:var(--f-display); font-size:9px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; }

/* ------------------------------------------------------------- body */
#wr-body{ flex:1; display:flex; min-height:0; position:relative; }

/* ------------------------------------------------------------- rail */
#wr-rail{
  width:var(--rail-w); flex:0 0 auto; display:flex; flex-direction:column; gap:2px;
  padding:var(--s2) 0; background:linear-gradient(90deg,var(--ink-2),var(--ink-1));
  border-right:2px solid var(--ink-0); z-index:30;
}
.wr-rail-btn{
  position:relative; width:100%; height:46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; background:none; border:0;
  border-left:3px solid transparent; color:var(--text-dim); cursor:pointer; transition:.12s;
}
.wr-rail-btn:hover{ background:var(--ink-3); color:var(--text); }
.wr-rail-btn.active{ background:var(--ink-4); color:var(--brass); border-left-color:var(--brass); }
.wr-rail-ico{ font-size:16px; line-height:1; }
.wr-rail-lbl{ font-family:var(--f-display); font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; }
.wr-rail-badge{
  position:absolute; top:5px; right:8px; min-width:15px; height:15px; padding:0 3px;
  background:var(--bad); color:#fff; border-radius:8px; font-family:var(--f-mono);
  font-size:9px; line-height:15px; text-align:center; font-weight:700;
}
.wr-rail-spacer{ flex:1; }

/* -------------------------------------------------------------- map */
#wr-mapwrap{ flex:1; position:relative; min-width:0; overflow:hidden; background:var(--ink-0); }
/* touch-action:none everywhere, not just on small screens — a touch laptop
   would otherwise let the browser pan and double-tap-zoom the page while the
   renderer is trying to own those same gestures. */
#wr-map{
  position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
#wr-map.panning{ cursor:grabbing; }

#wr-mapinfo{
  position:absolute; left:var(--s3); bottom:var(--s3); z-index:5;
  display:flex; gap:var(--s2); align-items:center; pointer-events:none;
}
.wr-chip{
  background:rgba(8,10,7,.82); border:1px solid var(--steel-0); padding:3px 8px;
  font-family:var(--f-display); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); backdrop-filter:blur(3px);
}
.wr-chip b{ color:var(--text); font-family:var(--f-mono); letter-spacing:0; }

#wr-zoom{ position:absolute; right:var(--s3); bottom:var(--s3); z-index:5; display:flex; flex-direction:column; gap:2px; }
#wr-zoom button{
  width:30px; height:28px; background:var(--ink-2); border:1px solid var(--steel-1);
  color:var(--text-dim); cursor:pointer; font-size:15px; line-height:1;
}
#wr-zoom button:hover{ background:var(--ink-4); color:var(--text); border-color:var(--steel-2); }

/* hover tooltip that follows the cursor over the map */
#wr-tip{
  position:absolute; z-index:20; pointer-events:none; display:none;
  background:rgba(8,10,7,.94); border:1px solid var(--steel-1); box-shadow:var(--lift);
  padding:6px 9px; max-width:250px;
}
#wr-tip .t{ font-family:var(--f-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
#wr-tip .s{ font-size:11px; color:var(--text-dim); margin-top:2px; }

/* ----------------------------------------------------------- panels */
#wr-panel{
  width:var(--panel-w); flex:0 0 auto; display:flex; flex-direction:column;
  background:var(--ink-1); border-left:2px solid var(--ink-0); z-index:20; overflow:hidden;
}
#wr-panel.empty{ width:0; border:0; }

.wr-panel-head{
  flex:0 0 auto; padding:var(--s3) var(--s4); border-bottom:1px solid var(--steel-0);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); position:relative;
}
.wr-panel-head h2{
  margin:0; font-family:var(--f-display); font-size:17px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--parchment);
}
.wr-panel-head .sub{ font-size:10.5px; color:var(--text-dim); margin-top:2px; letter-spacing:.04em; }
.wr-panel-close{
  position:absolute; top:var(--s2); right:var(--s2); width:22px; height:22px;
  background:none; border:1px solid var(--steel-1); color:var(--text-dim); cursor:pointer; line-height:1;
}
.wr-panel-close:hover{ color:var(--bad); border-color:var(--bad); }
.wr-panel-body{ flex:1; overflow-y:auto; padding:var(--s3) var(--s4) var(--s5); }

/* owner ribbon: colour AND label AND pattern, never colour alone */
.wr-owner{ display:flex; align-items:center; gap:var(--s2); padding:5px var(--s2); margin-bottom:var(--s3); border-left:4px solid var(--steel-2); background:var(--ink-2); }
.wr-owner .sw{ width:14px; height:14px; border:1px solid rgba(0,0,0,.6); }
.wr-owner .nm{ font-family:var(--f-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

.wr-rows{ display:flex; flex-direction:column; gap:1px; margin-bottom:var(--s4); }
.wr-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); padding:4px var(--s2); background:var(--ink-2); }
.wr-row:nth-child(odd){ background:var(--ink-1); }
.wr-row .k{ font-family:var(--f-display); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.wr-row .v{ font-family:var(--f-mono); font-size:12px; text-align:right; }

.wr-section{ font-family:var(--f-display); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-dim); border-bottom:1px solid var(--steel-0); padding-bottom:3px; margin:var(--s4) 0 var(--s2); }
.wr-section:first-child{ margin-top:0; }

/* meters */
.wr-meter{ height:9px; background:var(--ink-0); border:1px solid var(--steel-0); position:relative; overflow:hidden; }
.wr-meter i{ position:absolute; inset:0 auto 0 0; background:var(--olive); }
.wr-meter.hp i{ background:linear-gradient(90deg,var(--good),#b6cf7a); }
.wr-meter.morale i{ background:linear-gradient(90deg,var(--brass-dim),var(--brass)); }
.wr-meter.ready i{ background:linear-gradient(90deg,#3f6b8c,var(--info)); }
.wr-meter.capture i{ background:repeating-linear-gradient(45deg,var(--bad) 0 5px,#8c3527 5px 10px); }
.wr-meter.prog i{ background:linear-gradient(90deg,var(--steel-2),var(--steel-3)); }

/* unit counters in lists */
.wr-unit{
  display:flex; align-items:center; gap:var(--s2); padding:5px var(--s2); margin-bottom:2px;
  background:var(--ink-2); border-left:3px solid var(--steel-1); cursor:pointer;
}
.wr-unit:hover{ background:var(--ink-3); }
.wr-unit.sel{ background:var(--ink-4); border-left-color:var(--brass); }
.wr-unit .ctr{
  width:30px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:9.5px; letter-spacing:.04em; border:1px solid rgba(0,0,0,.55);
}
.wr-unit .nm{ flex:1; min-width:0; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wr-unit .st{ font-family:var(--f-mono); font-size:10px; color:var(--text-dim); }

/* buttons */
.wr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px var(--s3); background:linear-gradient(180deg,var(--steel-1),var(--steel-0));
  border:1px solid var(--steel-2); color:var(--text); cursor:pointer;
  font-family:var(--f-display); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--bevel); transition:.1s;
}
.wr-btn:hover:not(:disabled){ background:linear-gradient(180deg,var(--steel-2),var(--steel-1)); border-color:var(--steel-3); }
.wr-btn:active:not(:disabled){ transform:translateY(1px); }
.wr-btn:disabled{ opacity:.4; cursor:not-allowed; }
.wr-btn.primary{ background:linear-gradient(180deg,var(--brass),var(--brass-dim)); border-color:var(--brass); color:var(--ink-0); font-weight:600; }
.wr-btn.primary:hover:not(:disabled){ background:linear-gradient(180deg,#dcb04a,var(--brass)); }
.wr-btn.danger{ background:linear-gradient(180deg,#a8402f,#7a2c1f); border-color:var(--bad); }
.wr-btn.ghost{ background:none; border-color:var(--steel-1); color:var(--text-dim); }
.wr-btn.ghost:hover:not(:disabled){ color:var(--text); border-color:var(--steel-2); background:var(--ink-3); }
.wr-btn.wide{ width:100%; }
.wr-btn.sm{ padding:4px 8px; font-size:9.5px; }

.wr-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s3); }
.wr-actions .span2{ grid-column:span 2; }

/* build cards */
.wr-build{
  display:flex; gap:var(--s2); align-items:flex-start; padding:var(--s2); margin-bottom:3px;
  background:var(--ink-2); border:1px solid var(--steel-0); cursor:pointer; text-align:left; width:100%;
}
.wr-build:hover:not(:disabled){ background:var(--ink-3); border-color:var(--steel-1); }
.wr-build:disabled{ opacity:.45; cursor:not-allowed; }
.wr-build .ico{ width:26px; height:26px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ink-0); border:1px solid var(--steel-1); color:var(--khaki); font-size:13px; }
.wr-build .bd{ flex:1; min-width:0; }
.wr-build .bt{ font-family:var(--f-display); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; }
.wr-build .bc{ font-family:var(--f-mono); font-size:10px; color:var(--text-dim); margin-top:1px; }
.wr-build .bd-desc{ font-size:10.5px; color:var(--text-faint); margin-top:2px; line-height:1.35; }

/* queue */
.wr-q{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2); background:var(--ink-2); border-left:3px solid var(--brass-dim); margin-bottom:3px; }
.wr-q.blocked{ border-left-color:var(--bad); }
.wr-q .qi{ flex:1; min-width:0; }
.wr-q .qn{ font-family:var(--f-display); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.wr-q .qe{ font-family:var(--f-mono); font-size:10px; color:var(--text-dim); }
.wr-q .qb{ font-size:10px; color:var(--bad); margin-top:1px; }

/* ------------------------------------------------------------ toasts */
#wr-toasts{ position:absolute; top:var(--s3); right:var(--s3); z-index:60; display:flex; flex-direction:column; gap:var(--s2); width:290px; pointer-events:none; }
.wr-toast{
  display:flex; gap:var(--s2); padding:var(--s2) var(--s3); pointer-events:auto; cursor:pointer;
  background:rgba(14,18,12,.96); border:1px solid var(--steel-1); border-left:4px solid var(--steel-2);
  box-shadow:var(--lift); animation:wrSlide .18s ease-out;
}
.wr-toast.good{ border-left-color:var(--good); }
.wr-toast.warn{ border-left-color:var(--warn); }
.wr-toast.bad{ border-left-color:var(--bad); }
.wr-toast .ti{ font-size:14px; color:var(--khaki); }
.wr-toast .tt{ font-family:var(--f-display); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.wr-toast .tm{ font-size:11px; color:var(--text-dim); margin-top:1px; line-height:1.35; }
@keyframes wrSlide{ from{ transform:translateX(14px); opacity:0; } to{ transform:none; opacity:1; } }

/* ------------------------------------------------------------ modals */
.wr-scrim{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,4,.78); backdrop-filter:blur(2px); padding:var(--s5);
}
.wr-modal{
  width:min(560px,100%); max-height:86vh; max-height:86dvh; display:flex; flex-direction:column;
  background:var(--ink-1); border:2px solid var(--steel-1); box-shadow:var(--lift);
  animation:wrPop .16s ease-out;
}
@keyframes wrPop{ from{ transform:scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.wr-modal-head{
  padding:var(--s3) var(--s4); background:linear-gradient(180deg,var(--ink-4),var(--ink-2));
  border-bottom:2px solid var(--ink-0); display:flex; align-items:center; gap:var(--s3);
}
.wr-modal-head .mi{ font-size:22px; color:var(--brass); }
.wr-modal-head h2{ margin:0; font-family:var(--f-display); font-size:19px; letter-spacing:.06em; text-transform:uppercase; color:var(--parchment); }
.wr-modal-head .ms{ font-size:10.5px; color:var(--text-dim); letter-spacing:.05em; }
.wr-modal-body{ padding:var(--s4); overflow-y:auto; font-size:13px; line-height:1.6; }
.wr-modal-foot{ padding:var(--s3) var(--s4); border-top:1px solid var(--steel-0); display:flex; gap:var(--s2); justify-content:flex-end; background:var(--ink-2); }
.wr-modal.bad .wr-modal-head{ background:linear-gradient(180deg,#3a1d16,var(--ink-2)); }
.wr-modal.bad .wr-modal-head .mi{ color:var(--bad); }
.wr-modal.good .wr-modal-head{ background:linear-gradient(180deg,#25301a,var(--ink-2)); }
.wr-modal.good .wr-modal-head .mi{ color:var(--good); }

/* --------------------------------------------------------- log drawer */
#wr-log{
  position:absolute; top:0; right:0; bottom:0; width:340px; z-index:50;
  background:var(--ink-1); border-left:2px solid var(--ink-0); box-shadow:var(--lift);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .18s ease-out;
}
#wr-log.open{ transform:none; }
.wr-log-item{ display:flex; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--ink-2); cursor:pointer; }
.wr-log-item:hover{ background:var(--ink-2); }
.wr-log-item .li{ font-size:13px; width:16px; text-align:center; color:var(--khaki); }
.wr-log-item .lt{ font-family:var(--f-display); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; }
.wr-log-item .lm{ font-size:11px; color:var(--text-dim); line-height:1.35; }
.wr-log-item .lk{ font-family:var(--f-mono); font-size:9px; color:var(--text-faint); }
.wr-log-item.good .li{ color:var(--good); }
.wr-log-item.warn .li{ color:var(--warn); }
.wr-log-item.bad .li{ color:var(--bad); }

/* ------------------------------------------------------------ tutorial */
#wr-tut{ position:fixed; inset:0; z-index:70; pointer-events:none; }
#wr-tut.blocking{ pointer-events:auto; }
.wr-tut-ring{
  position:absolute; border:2px solid var(--brass); box-shadow:0 0 0 9999px rgba(4,6,4,.62), 0 0 16px rgba(195,155,62,.5);
  pointer-events:none; transition:all .2s ease-out;
}
.wr-tut-ring::after{
  content:""; position:absolute; inset:-5px; border:1px dashed rgba(195,155,62,.55); animation:wrPulse 1.5s infinite;
}
@keyframes wrPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }
.wr-tut-card{
  position:absolute; width:308px; pointer-events:auto;
  background:var(--ink-1); border:2px solid var(--brass-dim); box-shadow:var(--lift);
}
.wr-tut-card .h{ padding:var(--s2) var(--s3); background:linear-gradient(180deg,var(--ink-4),var(--ink-2)); border-bottom:1px solid var(--brass-dim);
  font-family:var(--f-display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass);
  display:flex; justify-content:space-between; align-items:center; }
.wr-tut-card .h span{ font-family:var(--f-mono); font-size:10px; color:var(--text-faint); letter-spacing:0; }
.wr-tut-card .b{ padding:var(--s3); font-size:12px; line-height:1.55; white-space:pre-line; }
.wr-tut-card .f{ padding:var(--s2) var(--s3); border-top:1px solid var(--ink-3); display:flex; gap:var(--s2); justify-content:flex-end; }

/* ============================================================ SCREENS */
.wr-screen{
  position:fixed; inset:0; z-index:90; overflow-y:auto;
  max-height:var(--wr-vh); -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(107,122,74,.13), transparent 60%),
    radial-gradient(900px 600px at 15% 110%, rgba(195,155,62,.07), transparent 60%),
    var(--ink-0);
  display:flex; align-items:center; justify-content:center; padding:var(--s5);
}
.wr-screen::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.35;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}
.wr-sheet{ width:min(940px,100%); position:relative; }

.wr-title{ text-align:center; margin-bottom:var(--s5); }
.wr-title h1{
  margin:0; font-family:var(--f-display); font-size:clamp(30px,5.5vw,52px); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--parchment);
  text-shadow:0 2px 0 var(--ink-0), 0 0 26px rgba(195,155,62,.22);
}
.wr-title h1 em{ font-style:normal; color:var(--brass); }
.wr-title p{ margin:var(--s2) 0 0; color:var(--text-dim); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }

.wr-panelbox{
  background:var(--ink-1); border:2px solid var(--steel-0); box-shadow:var(--plate);
  padding:var(--s4); margin-bottom:var(--s3);
}
.wr-panelbox > h3{
  margin:0 0 var(--s3); font-family:var(--f-display); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-dim); border-bottom:1px solid var(--steel-0); padding-bottom:var(--s2);
}

.wr-grid{ display:grid; gap:var(--s3); }
.wr-grid.two{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.wr-grid.four{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* faction cards */
.wr-fac{
  position:relative; text-align:left; padding:var(--s3); cursor:pointer; width:100%;
  background:var(--ink-2); border:2px solid var(--steel-0); border-top-width:5px; transition:.12s;
}
.wr-fac:hover:not(:disabled){ background:var(--ink-3); transform:translateY(-2px); }
.wr-fac.sel{ border-color:var(--brass); background:var(--ink-4); }
.wr-fac:disabled{ opacity:.45; cursor:not-allowed; }
.wr-fac h4{ margin:0 0 3px; font-family:var(--f-display); font-size:15px; letter-spacing:.07em; text-transform:uppercase; }
.wr-fac .doc{ font-family:var(--f-display); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.wr-fac .bl{ font-size:11px; color:var(--text-dim); margin-top:var(--s2); line-height:1.45; }
.wr-fac .dd{ font-size:10.5px; color:var(--khaki); margin-top:var(--s2); border-top:1px dashed var(--steel-0); padding-top:var(--s2); }
.wr-fac .taken{ position:absolute; top:var(--s2); right:var(--s2); font-family:var(--f-mono); font-size:9.5px;
  background:var(--ink-0); border:1px solid var(--steel-1); padding:1px 5px; color:var(--text-dim); }

.wr-field{ margin-bottom:var(--s3); }
.wr-field label{ display:block; font-family:var(--f-display); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.wr-input, .wr-select{
  width:100%; padding:8px var(--s2); background:var(--ink-0); border:1px solid var(--steel-1);
  color:var(--text); font-family:var(--f-mono); font-size:13px; outline:none;
}
.wr-input:focus, .wr-select:focus{ border-color:var(--brass-dim); }
.wr-input.code{ font-family:var(--f-display); font-size:26px; letter-spacing:.4em; text-align:center; text-transform:uppercase; }

.wr-note{ font-size:11px; color:var(--text-faint); line-height:1.5; }
.wr-err{ color:var(--bad); font-size:11.5px; min-height:16px; }

/* custom-rules sliders in the lobby */
.wr-custom{ display:flex; flex-direction:column; gap:var(--s3); }
.wr-slider-top{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;
  font-family:var(--f-display); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint);
}
.wr-slider-top b{ font-family:var(--f-mono); font-size:12px; letter-spacing:0; color:var(--brass); text-transform:none; }
.wr-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; background:var(--ink-0);
  border:1px solid var(--steel-1); outline:none; cursor:pointer;
}
.wr-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:20px;
  background:linear-gradient(180deg,var(--brass),var(--brass-dim));
  border:1px solid var(--ink-0); cursor:grab;
}
.wr-range::-moz-range-thumb{
  width:16px; height:20px; border-radius:0;
  background:linear-gradient(180deg,var(--brass),var(--brass-dim));
  border:1px solid var(--ink-0); cursor:grab;
}
.wr-range:disabled{ opacity:.45; cursor:not-allowed; }
.wr-range:disabled::-webkit-slider-thumb{ cursor:not-allowed; }
.wr-field.span2{ grid-column:1 / -1; }

/* voice-chat mount inherits pixel-voice's own styling; just give it room */
#wr-voice-mount{ min-height:34px; }

/* mode picker on the menu */
.wr-mode{
  display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3); width:100%; text-align:left;
  background:var(--ink-2); border:2px solid var(--steel-0); cursor:pointer; transition:.12s;
}
.wr-mode:hover{ background:var(--ink-3); border-color:var(--steel-1); transform:translateY(-2px); }
.wr-mode .mico{ width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ink-0); border:1px solid var(--steel-1); color:var(--brass); font-size:19px; }
.wr-mode h4{ margin:0 0 3px; font-family:var(--f-display); font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.wr-mode p{ margin:0; font-size:11px; color:var(--text-dim); line-height:1.45; }

/* lobby code display */
.wr-code{
  font-family:var(--f-display); font-size:38px; letter-spacing:.34em; text-align:center;
  color:var(--brass); background:var(--ink-0); border:2px dashed var(--brass-dim);
  padding:var(--s3); margin-bottom:var(--s2); text-transform:uppercase;
}

/* summary table */
.wr-table{ width:100%; border-collapse:collapse; font-size:12px; }
.wr-table th{
  font-family:var(--f-display); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); text-align:right; padding:var(--s2); border-bottom:1px solid var(--steel-0);
}
.wr-table th:nth-child(-n+2){ text-align:left; }
.wr-table td{ padding:7px var(--s2); border-bottom:1px solid var(--ink-2); text-align:right; font-family:var(--f-mono); }
.wr-table td:nth-child(-n+2){ text-align:left; font-family:var(--f-body); }
.wr-table tr.win td{ background:rgba(195,155,62,.10); }
.wr-table .pl{ font-family:var(--f-display); font-size:15px; color:var(--brass); }
.wr-table .fc{ display:inline-flex; align-items:center; gap:6px; }
.wr-table .fc i{ width:11px; height:11px; display:inline-block; border:1px solid rgba(0,0,0,.6); }

/* boot / connecting overlay */
#wr-boot{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,4,.90); backdrop-filter:blur(3px); flex-direction:column; gap:var(--s3); }
#wr-boot .bt{ font-family:var(--f-display); font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment); }
#wr-boot .bs{ font-size:11.5px; color:var(--text-dim); max-width:380px; text-align:center; line-height:1.5; }
.wr-bars{ display:flex; gap:4px; }
.wr-bars i{ width:7px; height:22px; background:var(--brass-dim); animation:wrBar .9s infinite ease-in-out; }
.wr-bars i:nth-child(2){ animation-delay:.12s; } .wr-bars i:nth-child(3){ animation-delay:.24s; }
.wr-bars i:nth-child(4){ animation-delay:.36s; } .wr-bars i:nth-child(5){ animation-delay:.48s; }
@keyframes wrBar{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* back to the hall */
#wr-hall{
  position:fixed; left:10px; bottom:10px; z-index:100; display:inline-flex; align-items:center; gap:7px;
  background:rgba(8,10,7,.86); color:var(--text-faint); text-decoration:none;
  border:1px solid var(--steel-0); padding:6px 11px; font-size:11px; backdrop-filter:blur(4px);
}
#wr-hall:hover{ color:var(--text); border-color:var(--steel-2); }
#wr-hall .dot{ width:8px; height:8px; background:var(--brass); }

/* ---------------------------------------------------- march (touch only)
   Shown by app.js when a formation is selected on a touch device, because
   there is no right-click to march with. */
/* Hidden by default; app.js toggles `.show`. A class rather than an inline
   style, because clearing an inline display would just fall back to this
   rule and the button would never appear. */
#wr-march{
  position:absolute; left:50%; transform:translateX(-50%); bottom:var(--s3); z-index:12;
  display:none; padding:11px 20px; min-height:44px;
  background:linear-gradient(180deg,var(--brass),var(--brass-dim));
  border:1px solid var(--brass); color:var(--ink-0); cursor:pointer;
  font-family:var(--f-display); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; box-shadow:var(--lift);
}
#wr-march.show{ display:block; }
#wr-march.armed{
  background:linear-gradient(180deg,#a8402f,#7a2c1f); border-color:var(--bad); color:#fff;
  animation:wrPulseBtn 1.1s ease-in-out infinite;
}
@keyframes wrPulseBtn{ 0%,100%{ box-shadow:var(--lift); } 50%{ box-shadow:0 0 0 6px rgba(200,80,60,.22), var(--lift); } }

/* ------------------------------------------------------------- album
   Used in three places with the same markup: the rail panel (narrow), the
   full-screen sheet (wide), and the summary sheet (a strip of new cards).
   Everything below sizes off the container, never off the viewport, so the
   same component survives a 280px panel and a 940px sheet. */
.wr-al-head{
  display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
  background:var(--ink-1); border:2px solid var(--steel-0); box-shadow:var(--plate);
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
}
.wr-al-head.complete{ border-color:var(--brass-dim); background:linear-gradient(180deg, rgba(195,155,62,.10), var(--ink-1)); }
.wr-al-head h3{ margin:0 0 3px; font-family:var(--f-display); font-size:15px; letter-spacing:.1em; text-transform:uppercase; }
.wr-al-head p{ margin:0 0 var(--s2); font-size:11px; color:var(--text-dim); line-height:1.5; }
.wr-al-ring{
  width:82px; height:82px; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  border:3px solid var(--steel-1); background:var(--ink-0); box-shadow:var(--bevel);
}
.wr-al-head.complete .wr-al-ring{ border-color:var(--brass); }
.wr-al-ring b{ font-family:var(--f-mono); font-size:19px; color:var(--brass); }
.wr-al-ring span{ font-family:var(--f-display); font-size:9px; letter-spacing:.1em; color:var(--text-faint); }
.wr-al-stat{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s2); }
.wr-al-stat span{ font-family:var(--f-display); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

.wr-al-hall{
  background:linear-gradient(180deg, rgba(195,155,62,.12), var(--ink-1));
  border:2px solid var(--brass-dim); padding:var(--s3) var(--s4); margin-bottom:var(--s4);
}
.wr-al-hall h4{ margin:0 0 4px; font-family:var(--f-display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); }
.wr-al-hall p{ margin:0 0 var(--s3); font-size:11px; color:var(--text-dim); line-height:1.5; }
.wr-al-hall .wr-btn{ text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; }

.wr-al-set{ margin-bottom:var(--s4); }
.wr-al-sethead{ display:flex; align-items:center; gap:var(--s2); margin-bottom:5px; }
.wr-al-sethead .g{ font-size:15px; color:var(--khaki); width:18px; text-align:center; }
.wr-al-sethead h4{ margin:0; font-family:var(--f-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.wr-al-sethead p{ margin:1px 0 0; font-size:10.5px; color:var(--text-faint); line-height:1.45; }
.wr-al-sethead .n{ font-size:12px; color:var(--text-dim); }
.wr-al-set.done .wr-al-sethead h4{ color:var(--brass); }
.wr-al-set.done .wr-al-sethead .n{ color:var(--brass); }

.wr-al-grid{ display:grid; gap:5px; margin-top:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
.wr-al-grid.tight{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }

.wr-al-card{
  background:var(--ink-2); border:1px solid var(--steel-0); border-top:3px solid var(--steel-0);
  padding:7px 6px; text-align:center; min-height:78px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.wr-al-card .wr-al-glyph{ font-size:17px; line-height:1.1; color:var(--steel-2); }
.wr-al-card .wr-al-name{
  font-family:var(--f-display); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); line-height:1.25;
}
.wr-al-card .wr-al-how{ font-size:9px; color:var(--steel-2); line-height:1.35; }
/* Earned. Rarity is carried by the top rule AND the glyph colour, never by
   colour alone — the same rule the resource bar follows. */
.wr-al-card.got{ background:var(--ink-3); border-color:var(--steel-1); }
.wr-al-card.got .wr-al-glyph{ color:var(--parchment); }
.wr-al-card.got .wr-al-name{ color:var(--text); }
.wr-al-card.got .wr-al-how{ color:var(--text-faint); font-family:var(--f-mono); font-size:8.5px; }
.wr-al-card.got.common{ border-top-color:var(--olive); }
.wr-al-card.got.rare{ border-top-color:var(--info); }
.wr-al-card.got.rare .wr-al-glyph{ color:#9dc0e0; }
.wr-al-card.got.relic{ border-top-color:var(--brass); background:linear-gradient(180deg, rgba(195,155,62,.14), var(--ink-3)); }
.wr-al-card.got.relic .wr-al-glyph{ color:var(--brass); text-shadow:0 0 12px rgba(195,155,62,.5); }

/* one-line album summary, used on the menu and the summary sheet */
.wr-al-strip{
  display:flex; align-items:center; gap:var(--s3); width:100%; cursor:pointer; text-align:left;
  background:var(--ink-2); border:2px solid var(--steel-0); padding:8px var(--s3); transition:.12s;
}
.wr-al-strip:hover{ background:var(--ink-3); border-color:var(--steel-2); }
.wr-al-strip.complete{ border-color:var(--brass-dim); }
.wr-al-strip .g{ font-size:17px; color:var(--brass); width:20px; text-align:center; }
.wr-al-strip b{ display:block; font-family:var(--f-display); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text); margin-bottom:4px; }
.wr-al-strip .n{ font-size:12px; color:var(--text-dim); }

/* The full-screen sheet scrolls internally; 68 cards is taller than a phone. */
.wr-al-screen .wr-sheet{ width:min(1080px,100%); }
.wr-al-body{ max-height:calc(var(--wr-vh) - 220px); overflow-y:auto; padding-right:4px;
  -webkit-overflow-scrolling:touch; }

@media (max-width:1024px){
  :root{ --panel-w:280px; --rail-w:52px; }
}

/* ============================================== TOUCH / SMALL SCREENS
   The map stays the play surface. The rail becomes a bottom tab bar and the
   contextual panel becomes a bottom sheet, so nothing permanently eats the
   horizontal space a strategic map needs. */
@media (max-width:860px){
  :root{ --resbar-h:46px; }

  body{ overscroll-behavior:none; }

  /* --- resource bar: values only --- */
  .wr-res-brand{ display:none; }
  .wr-res{ min-width:72px; padding:0 9px; }
  .wr-res-val{ font-size:13px; }
  .wr-res-name{ font-size:8px; }
  .wr-res-net{ font-size:9px; }
  .wr-res-meta{ padding:0 9px; gap:10px; }
  .wr-meta-cell b{ font-size:12px; }
  .wr-meta-cell span{ font-size:7.5px; }

  /* --- rail: bottom tab bar --- */
  #wr-rail{
    position:fixed; left:0; right:0; bottom:0; width:auto; z-index:46;
    height:calc(54px + env(safe-area-inset-bottom,0px));
    padding:0 0 env(safe-area-inset-bottom,0px);
    flex-direction:row; border-right:0; border-top:2px solid var(--ink-0);
    background:linear-gradient(0deg,var(--ink-2),var(--ink-1));
  }
  .wr-rail-btn{ flex:1; height:54px; border-left:0; border-top:3px solid transparent; }
  .wr-rail-btn.active{ border-left-color:transparent; border-top-color:var(--brass); }
  .wr-rail-lbl{ font-size:7px; }
  .wr-rail-badge{ top:3px; right:calc(50% - 20px); }
  .wr-rail-spacer{ display:none; }

  /* --- contextual panel: bottom sheet above the rail --- */
  #wr-panel{
    position:fixed; left:0; right:0; top:auto; width:auto; z-index:45;
    bottom:calc(54px + env(safe-area-inset-bottom,0px));
    max-height:58vh; max-height:58dvh;
    border-left:0; border-top:2px solid var(--steel-1);
    box-shadow:0 -10px 26px rgba(0,0,0,.6);
  }
  #wr-panel.empty{ display:none; }
  .wr-panel-body{ padding:10px 13px 22px; -webkit-overflow-scrolling:touch; }
  .wr-panel-head h2{ font-size:15px; }

  #wr-log{ width:100%; bottom:calc(54px + env(safe-area-inset-bottom,0px)); }
  #wr-toasts{ left:8px; right:8px; width:auto; }
  #wr-zoom{ bottom:calc(66px + env(safe-area-inset-bottom,0px)); right:8px; }
  #wr-zoom button{ width:40px; height:38px; font-size:18px; }
  #wr-mapinfo{ bottom:calc(66px + env(safe-area-inset-bottom,0px)); left:8px; }
  #wr-mapinfo .wr-chip:last-child{ display:none; }
  /* There is no hover on touch — the panel carries this information. */
  #wr-tip{ display:none !important; }
  #wr-march{ bottom:calc(66px + env(safe-area-inset-bottom,0px)); }

  /* the hall link would sit under the tab bar mid-match */
  body.wr-in-match #wr-hall{ display:none; }

  /* --- generous targets --- */
  .wr-btn{ padding:10px var(--s3); min-height:40px; }
  .wr-btn.sm{ padding:7px 10px; min-height:32px; }
  .wr-unit{ padding:9px var(--s2); }
  .wr-build{ padding:10px var(--s2); }
  .wr-panel-close{ width:32px; height:32px; }

  /* --- shell screens --- */
  .wr-screen{ padding:14px 12px 28px; align-items:flex-start; }
  .wr-title h1{ font-size:clamp(26px,8vw,38px); letter-spacing:.12em; }
  .wr-title p{ font-size:10.5px; letter-spacing:.1em; }
  .wr-panelbox{ padding:var(--s3); }
  .wr-actions{ grid-template-columns:1fr; }
  .wr-code{ font-size:clamp(24px,9vw,34px); letter-spacing:.24em; }
  .wr-input.code{ font-size:22px; letter-spacing:.28em; }
  .wr-mode{ padding:var(--s3) var(--s2); }
  /* wide tables scroll inside their own box rather than the page */
  .wr-scrollx{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wr-scrollx .wr-table{ min-width:540px; }
  .wr-modal{ max-height:82vh; max-height:82dvh; }
  .wr-tut-card{ width:min(308px, calc(100vw - 24px)); }
}

/* ------------------------------------------------------------ landscape
   A phone on its side has ~375px of height. The resource bar and tab bar
   would eat two thirds of it, so both shrink and the map keeps the rest. */
@media (max-height:480px) and (orientation:landscape){
  :root{ --resbar-h:38px; }
  .wr-res{ min-width:62px; }
  .wr-res-val{ font-size:12px; }
  .wr-res-name, .wr-meta-cell span{ font-size:7px; }
  #wr-rail{ height:calc(42px + env(safe-area-inset-bottom,0px)); }
  .wr-rail-btn{ height:42px; }
  .wr-rail-lbl{ display:none; }
  .wr-rail-ico{ font-size:16px; }
  #wr-panel{
    bottom:calc(42px + env(safe-area-inset-bottom,0px));
    max-height:72vh; max-height:72dvh;
    /* half-width sheet so the map stays visible while reading a panel */
    left:auto; right:0; width:min(330px, 52vw); border-left:2px solid var(--steel-1);
  }
  #wr-log{ width:min(340px,60vw); bottom:calc(42px + env(safe-area-inset-bottom,0px)); }
  #wr-zoom, #wr-mapinfo, #wr-march{ bottom:calc(50px + env(safe-area-inset-bottom,0px)); }
  .wr-tut-card{ max-height:76vh; overflow-y:auto; }
}

@media (max-width:420px){
  .wr-rail-lbl{ display:none; }
  .wr-rail-ico{ font-size:19px; }
  .wr-res{ min-width:64px; padding:0 7px; }
  .wr-al-grid, .wr-al-grid.tight{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
  .wr-al-ring{ width:66px; height:66px; }
  .wr-al-ring b{ font-size:16px; }
  .wr-al-body{ max-height:calc(var(--wr-vh) - 180px); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}