/* Valor Player Tools — shared Rev. 1 skin (Valor Art Style Guide Rev. 1, §3–§5).
   Near-black ground, hairline gold frames with filigree corners, gold-ring medallions, one crimson CTA,
   classical serif everywhere (Cinzel for titles and small caps, EB Garamond for text and numbers).
   Shared by the hosted Sim and Planner (the same file in both) and ported from the local tools'
   Rev. 1 restyle (Code/Tools/Battle Planner/assets/valor.css, Sep 24, 2026). The fonts are Latin subsets in WOFF2
   (Cinzel + EB Garamond, OFL; every weight kept). The "hosted" section at the end adds what the web tools need. */
@font-face{font-family:"Cinzel";src:url(fonts/Cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-Italic.woff2) format("woff2");font-style:italic;font-weight:400 800;font-display:swap}

:root{
  color-scheme:dark;
  /* Rev. 1 palette (§3) */
  --page:#050403; --card:#0F0E0D; --row:#0F0E0D; --navfill:#151413; --steel:#282726;
  --g-dim:#554028; --g-frame:#6A5233; --g-inner:#33271A; --g-body:#AD8445; --g-text:#BD9F6F; --g-hi:#EDD69D;
  --crim:#501614; --crim-hi:#B84C37;
  --cream-t:#F0E7D8; --cream:#D0BEA3; --grey:#83817E; --grey2:#56554F; --green-c:#6EA859;
  --title:"Cinzel","Trajan Pro","Times New Roman",serif; --text:"EB Garamond","Baskerville","Hoefler Text",Georgia,serif;
  /* the names the tools' CSS and scripts already use, mapped onto Rev. 1 */
  --gold:#AD8445; --gold-ink:#BD9F6F; --gold-hi:#EDD69D; --gold-dim:rgba(173,132,69,.15); --gold-line:rgba(173,132,69,.5); --gold-glow:rgba(173,132,69,.35);
  --bg:#050403; --panel:#0F0E0D; --raised:#171615; --well:#0F0E0D; --hover:#1A1918;
  --ink:#F0E7D8; --ink2:#D0BEA3; --mut:#8D8A84; --mut2:#5E5C57;
  --line:#221C14; --line2:#3B2D1C;
  --red:#8E2C21; --red-ink:#D39580; --red-bg:rgba(142,44,33,.18); --red-line:rgba(184,76,55,.5);
  --green:#6EA859; --green-ink:#94C680; --green-bg:rgba(110,168,89,.12); --green-line:rgba(110,168,89,.42);
  --blue:#6F8596; --blue-ink:#B3BFC9; --blue-bg:rgba(111,133,150,.16); --blue-line:rgba(111,133,150,.5);
  --amber-ink:#E3C07E;
  --field:#090807; --chip:#191817; --chip-ink:#D0BEA3;
  --shadow:0 2px 0 rgba(0,0,0,.5);
  --serif:var(--title); --sans:var(--text); --cond:var(--title); --mono:var(--text);
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--page)}
body{min-height:calc(100vh * var(--vfix,1));color:var(--ink);font:16.5px/1.45 var(--text);-webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum";
  background:radial-gradient(ellipse 80% 55% at 12% -8%,#171615 0%,#080706 55%,#050403 100%) fixed,var(--page)}
::selection{background:var(--g-body);color:#140E06}
button,input,select,textarea{font-family:var(--text);font-size:inherit;font-variant-numeric:lining-nums tabular-nums}
:focus-visible{outline:1.5px solid var(--g-hi);outline-offset:2px}
[hidden]{display:none !important}
a{color:var(--g-text)}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#0A0908}
::-webkit-scrollbar-thumb{background:#2A2218;border-radius:6px;border:2px solid #0A0908} ::-webkit-scrollbar-thumb:hover{background:#4A3A24}

/* ---------- top rule with the crimson gem ---------- */
.toprule{position:relative;height:1px;margin:10px 0 0;
  background:linear-gradient(90deg,transparent 0,var(--g-dim) 12%,var(--g-body) 50%,var(--g-dim) 88%,transparent 100%)}
.toprule::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);
  background:linear-gradient(135deg,#D65B43,#5A1712);border:1px solid var(--g-body);box-shadow:0 0 8px rgba(184,76,55,.45)}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;gap:16px;padding:12px 28px 10px;max-width:1560px;margin:0 auto;position:relative}
.mast .spacer{flex:1}
.wm{display:flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none}
.wm-row{display:flex;align-items:center;gap:6px}
.wm-row::before,.wm-row::after{content:"";width:48px;height:12px;background:center/contain no-repeat}
.wm-row::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-2 -8 66 16%22 width=%2266%22 height=%2216%22%3E%3Cg transform=%22translate(62 0) scale(-1 1)%22%3E%3Cpath d=%22M0 0 C10 -7 18 -7 26 0 C34 7 42 7 54 0%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M14 -3 q-6 -6 -12 -1 M40 3 q6 6 12 1%22 fill=%22none%22 stroke=%22%23EDD69D%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 opacity=%22.9%22/%3E%3Crect x=%2257%22 y=%22-3%22 width=%226%22 height=%226%22 transform=%22rotate(45 60 0)%22 fill=%22%23EDD69D%22/%3E%3Ccircle cx=%2226%22 cy=%220%22 r=%221.8%22 fill=%22%23EDD69D%22/%3E%3C/g%3E%3C/svg%3E")} .wm-row::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-2 -8 66 16%22 width=%2266%22 height=%2216%22%3E%3Cg transform=%22%22%3E%3Cpath d=%22M0 0 C10 -7 18 -7 26 0 C34 7 42 7 54 0%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M14 -3 q-6 -6 -12 -1 M40 3 q6 6 12 1%22 fill=%22none%22 stroke=%22%23EDD69D%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 opacity=%22.9%22/%3E%3Crect x=%2257%22 y=%22-3%22 width=%226%22 height=%226%22 transform=%22rotate(45 60 0)%22 fill=%22%23EDD69D%22/%3E%3Ccircle cx=%2226%22 cy=%220%22 r=%221.8%22 fill=%22%23EDD69D%22/%3E%3C/g%3E%3C/svg%3E")}
.wordmark{font:700 34px/1 var(--title);letter-spacing:.06em;
  background:linear-gradient(180deg,#F6E7B8 0%,#E2C47C 30%,#A47B3B 58%,#E7CC8C 76%,#8A6733 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(173,132,69,.22))}
.tagline{font:600 10px/1 var(--caps);letter-spacing:.42em;color:var(--g-text);margin-top:6px;padding-left:.42em;text-transform:uppercase}
.tabs{display:flex;gap:4px;margin-left:18px;align-self:stretch;align-items:center}
.tabs a{position:relative;font:600 12.5px/1 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:#8E7A58;padding:12px 14px;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--g-text)}
.tabs a.on{color:var(--g-hi)}
.tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--g-body),transparent)}
.tabs a.on::before{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;transform:rotate(45deg);background:var(--g-hi)}
.who{display:flex;align-items:center;gap:10px;white-space:nowrap}
.who .nm{font:500 16px/1.1 var(--text);color:var(--g-text)}
.who .meta{font:400 12.5px/1.2 var(--text);color:var(--grey)}

/* ---------- pills (HUD style) ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;border-radius:16px;white-space:nowrap;
  background:linear-gradient(180deg,#171615,#0F0E0D);border:1px solid var(--g-dim);color:var(--cream-t);font:500 14.5px/1 var(--text);letter-spacing:0;text-transform:none}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--grey2);flex:none}
.pill .dim{color:var(--grey);font-size:13px}
.pill.ok i{background:var(--green-c);box-shadow:0 0 6px rgba(110,168,89,.6)} .pill.ok{color:var(--cream-t);border-color:var(--g-dim)}
.pill.bad i{background:var(--crim-hi);box-shadow:0 0 6px rgba(184,76,55,.6)} .pill.bad{color:var(--red-ink);border-color:var(--red-line)}
.pill svg{width:16px;height:16px}
/* the World pill: the world switcher for every screen (assets/mast.js) */
.pill.wpill{gap:7px;padding:0 6px 0 11px;cursor:pointer}
.pill.wpill[hidden]{display:none}
.pill.wpill .wlbl{font:600 9.5px/1 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.pill.wpill select{background:transparent;border:0;color:var(--cream-t);font:500 14.5px/1 var(--text);padding:4px 2px;cursor:pointer;max-width:170px}
.pill.wpill select:focus-visible{outline:1px solid var(--g-body);outline-offset:2px;border-radius:3px}
.pill.wpill select option,.pill.wpill select optgroup{background:var(--panel);color:var(--cream-t)}
.pill.wpill .wother{width:62px;background:var(--field);border:1px solid var(--g-inner);color:var(--cream-t);border-radius:3px;padding:3px 6px;font:500 14px/1 var(--text)}

/* ---------- medallions ---------- */
.medal{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;position:relative;vertical-align:middle;
  background:radial-gradient(circle at 40% 35%,#21201F 0%,#0D0C0B 72%) padding-box,
             linear-gradient(145deg,#F0DA9F 0%,#AD8445 45%,#5E4425 100%) border-box;
  border:2px solid transparent;box-shadow:0 0 0 1px #1E160C,inset 0 0 0 1px #2A1F12,0 2px 5px rgba(0,0,0,.6);color:var(--g-hi)}
.medal svg{width:58%;height:58%}
.medal.glow{box-shadow:0 0 0 1px #1E160C,inset 0 0 10px rgba(237,214,157,.18),0 0 16px rgba(173,132,69,.55)}
button.medal,a.medal{cursor:pointer;padding:0} button.medal:hover,a.medal:hover{filter:brightness(1.15)}
.medal img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.badge{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;
  background:linear-gradient(180deg,#C2513A,#6E1E17);border:1px solid var(--g-body);
  color:#fff;font:600 12.5px/17px var(--text);text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.7)}
.badge:empty{display:none}
.g{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g .f{fill:currentColor;stroke:none}
.g .crim{fill:#8A2A20;stroke:currentColor}

/* ---------- framed cards: double hairline + filigree corners (softened Sep 29, 2026: 24px, no highlight gold) ---------- */
.frame{position:relative;border-radius:6px;border:1.5px solid var(--g-frame);
  background:linear-gradient(135deg,rgba(58,50,38,.16) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.2) 100%),var(--card)}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--g-inner);border-radius:4px;pointer-events:none}
.frame::after{content:"";position:absolute;inset:2px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 38 38%22 width=%2238%22 height=%2238%22%3E%3Cg transform=%22%22%3E%3Cpath d=%22M1 30 V1 H30%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.3%22 opacity=%22.8%22/%3E%3Cpath d=%22M7 24 Q7 7 24 7%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Cpath d=%22M7 24 q-5 3 -3 8 M24 7 q3 -5 8 -3%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Ccircle cx=%2224%22 cy=%227%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Ccircle cx=%227%22 cy=%2224%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Crect x=%22-1%22 y=%22-1%22 width=%224%22 height=%224%22 transform=%22rotate(45 1 1)%22 fill=%22%23BD9F6F%22/%3E%3C/g%3E%3C/svg%3E") left top/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 38 38%22 width=%2238%22 height=%2238%22%3E%3Cg transform=%22translate(30 0) scale(-1 1)%22%3E%3Cpath d=%22M1 30 V1 H30%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.3%22 opacity=%22.8%22/%3E%3Cpath d=%22M7 24 Q7 7 24 7%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Cpath d=%22M7 24 q-5 3 -3 8 M24 7 q3 -5 8 -3%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Ccircle cx=%2224%22 cy=%227%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Ccircle cx=%227%22 cy=%2224%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Crect x=%22-1%22 y=%22-1%22 width=%224%22 height=%224%22 transform=%22rotate(45 1 1)%22 fill=%22%23BD9F6F%22/%3E%3C/g%3E%3C/svg%3E") right top/24px 24px no-repeat,
             url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 38 38%22 width=%2238%22 height=%2238%22%3E%3Cg transform=%22translate(30 30) scale(-1 -1)%22%3E%3Cpath d=%22M1 30 V1 H30%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.3%22 opacity=%22.8%22/%3E%3Cpath d=%22M7 24 Q7 7 24 7%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Cpath d=%22M7 24 q-5 3 -3 8 M24 7 q3 -5 8 -3%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Ccircle cx=%2224%22 cy=%227%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Ccircle cx=%227%22 cy=%2224%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Crect x=%22-1%22 y=%22-1%22 width=%224%22 height=%224%22 transform=%22rotate(45 1 1)%22 fill=%22%23BD9F6F%22/%3E%3C/g%3E%3C/svg%3E") right bottom/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 38 38%22 width=%2238%22 height=%2238%22%3E%3Cg transform=%22translate(0 30) scale(1 -1)%22%3E%3Cpath d=%22M1 30 V1 H30%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.3%22 opacity=%22.8%22/%3E%3Cpath d=%22M7 24 Q7 7 24 7%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Cpath d=%22M7 24 q-5 3 -3 8 M24 7 q3 -5 8 -3%22 fill=%22none%22 stroke=%22%23AD8445%22 stroke-width=%221.1%22 opacity=%22.55%22/%3E%3Ccircle cx=%2224%22 cy=%227%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Ccircle cx=%227%22 cy=%2224%22 r=%221.2%22 fill=%22%23BD9F6F%22 opacity=%22.7%22/%3E%3Crect x=%22-1%22 y=%22-1%22 width=%224%22 height=%224%22 transform=%22rotate(45 1 1)%22 fill=%22%23BD9F6F%22/%3E%3C/g%3E%3C/svg%3E") left bottom/24px 24px no-repeat}
.frame>*{position:relative;z-index:1}
.sechead{display:flex;align-items:center;gap:12px}
.sechead h2,.sechead h3{font:600 14.5px/1 var(--title);letter-spacing:.2em;color:var(--g-text);text-transform:uppercase;margin:0;white-space:nowrap}
.sechead .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--g-dim),transparent);min-width:20px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 12px/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 15px;border-radius:3px;white-space:nowrap;cursor:pointer;text-decoration:none;
  color:var(--cream);background:linear-gradient(180deg,#343332 0%,#282726 55%,#1D1C1B 100%);
  border:1px solid #6A5233;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.6)}
.btn:hover{border-color:var(--g-body);color:var(--cream-t);background:linear-gradient(180deg,#3D3C3B 0%,#2E2D2C 55%,#222120 100%)}
.btn svg{width:15px;height:15px}
.btn.primary{color:var(--cream-t);background:linear-gradient(180deg,#B84C37 0%,#8E2C21 36%,#5E1A16 70%,#501614 100%);
  border:1px solid #C9A05A;box-shadow:inset 0 1px 0 rgba(255,214,170,.38),inset 0 -1px 0 rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.7),0 3px 10px rgba(80,22,20,.45);
  text-shadow:0 1px 1px rgba(0,0,0,.7)}
.btn.primary:hover{background:linear-gradient(180deg,#C8583F 0%,#9C3224 36%,#6A1E19 70%,#5A1916 100%);border-color:var(--g-hi)}
.btn.goldb{color:#2A1C0C;background:linear-gradient(180deg,#F1DC9E 0%,#D2AE62 40%,#A47B3B 75%,#C9A45C 100%);border:1px solid #EDD69D;text-shadow:none}
.btn:disabled,.btn[disabled]{opacity:.42;cursor:default;filter:saturate(.6)}
.btn.big{padding:13px 22px;font-size:13.5px}
.mini{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--g-inner);color:var(--g-text);border-radius:3px;padding:5px 9px;cursor:pointer;
  font:600 10.5px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mini:hover{color:var(--g-hi);border-color:var(--g-body)}
.mini:disabled{opacity:.4;cursor:default}

/* ---------- inputs ---------- */
input.t,input.n,input.tin,select.s,textarea,.tin{background:var(--field);border:1px solid var(--g-inner);color:var(--cream-t);border-radius:3px;padding:6px 9px;
  font:500 16px/1.2 var(--text);box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
input:focus,select:focus,textarea:focus{border-color:var(--g-body);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 0 2px rgba(173,132,69,.18)}
input::placeholder,textarea::placeholder{color:var(--grey2)}
select.s{padding-right:26px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M5 9 L12 16 L19 9' fill='none' stroke='%23BD9F6F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center/11px no-repeat}
input[type=range]{accent-color:var(--g-body)}
input[type=checkbox],input[type=radio]{accent-color:var(--g-body)}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;border:1px solid var(--g-dim);border-radius:3px;overflow:hidden;vertical-align:middle}
.seg button{background:transparent;border:0;color:var(--grey);padding:7px 12px;cursor:pointer;font:600 10.5px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase}
.seg button+button{border-left:1px solid var(--g-inner)}
.seg button:hover{color:var(--g-text)}
.seg button.on{color:var(--g-hi);background:linear-gradient(180deg,rgba(173,132,69,.32),rgba(173,132,69,.1))}

/* ---------- modal + toast ---------- */
.modal{position:fixed;inset:0;background:rgba(1,2,4,.72);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:50;overflow:auto}
.modal[hidden]{display:none}
.mcard,.mbox{width:min(760px,100%);padding:22px 26px 22px 28px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mhead h2,.mhead h3{font:600 15px/1.2 var(--title);letter-spacing:.18em;text-transform:uppercase;margin:0;color:var(--g-text)}
.xbtn,.x{background:transparent;border:0;color:var(--grey);cursor:pointer;font-size:18px;line-height:1;padding:4px 8px;border-radius:3px}
.xbtn:hover,.x:hover{color:var(--g-hi);background:rgba(173,132,69,.1)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:60;pointer-events:none;max-width:92vw;
  background:linear-gradient(180deg,#191817,#0F0E0D);border:1px solid var(--g-body);color:var(--cream-t);padding:10px 16px;border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);transition:.2s;font:500 15px/1.35 var(--text)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- misc ---------- */
.eyebrow{font:600 10.5px/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--g-text)}
.lbl{font:600 10px/1 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.muted{color:var(--mut)} .dim{color:var(--mut2)}
.foot{max-width:1560px;margin:18px auto 0;padding:0 28px 28px;font-size:13.5px;color:var(--grey);line-height:1.5}
.foot a{color:var(--g-text)}
/* the site's footer (Sep 29, 2026): the same links on every page, tool tab and side page — Privacy · Terms · Discord bot ·
   Get the app (not inside the installed app: body.app, set by assets/theme.js, frames too) */
.vfoot{max-width:1560px;margin:0 auto;padding:22px 28px 30px;font-size:13.5px;line-height:1.6;color:var(--grey);text-align:center}
.vfoot a{color:var(--grey);text-decoration:none;white-space:nowrap} .vfoot a:hover,.vfoot a:focus-visible{color:var(--g-text)}
.vfoot a+a::before{content:"\00B7";display:inline-block;margin:0 8px;color:var(--grey2)}
body.app .vfoot .getapp{display:none}
/* the masthead's brand (the hourglass medallion and VALOR · Player Tools) is a name, not a link: nothing happens on it */
.mast .brand,.mast .wm{cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.painted{position:relative;overflow:hidden;border-radius:4px;background:#0A0908}
.painted>img{display:block;width:100%;height:100%;object-fit:cover}
.painted::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(173,132,69,.55),inset 0 0 40px rgba(0,0,0,.55)}

@media (max-width:760px){
  .mast{padding:10px 12px 6px;gap:10px;flex-wrap:wrap}
  .wordmark{font-size:26px} .wm-row::before,.wm-row::after{width:30px}
  .tagline{font-size:8.5px;letter-spacing:.32em}
  .tabs{order:5;flex-basis:100%;margin:2px 0 0;justify-content:center}
  .tabs a{padding:9px 10px;font-size:11px}
  .tabs:has(#dashTab:not([hidden])) a{padding:9px 6px;font-size:10.5px;letter-spacing:.08em}   /* four tabs (admins: the Dashboard tab) */
  .tabs:has(#dashTab:not([hidden])) a.on::after{left:6px;right:6px}
  .who .nm,.who .meta{display:none}
  .mast .pill{display:none}
  .mast .pill.wpill:not([hidden]){display:inline-flex;order:4;height:30px;padding:0 4px 0 9px}
  .mast .pill.wpill .wlbl{display:none}
  .mast .pill.wpill select{font-size:16px;max-width:130px}
  .pill.wpill .wother{font-size:16px}
  .foot{padding:0 14px 110px}
  .vfoot{padding:18px 14px 24px}
  input.t,input.n,select.s,textarea,.tin{font-size:16px}
}

/* ======================================================================== hosted additions ===
   Account links in the masthead, the phone menu, sub-page titles, and the Valor Tools app (installed). */
.who .meta a{color:var(--grey);text-decoration:none} .who .meta a:hover{color:var(--g-text)}
.who .meta a+a::before{content:"\00B7";display:inline-block;margin:0 6px;color:var(--grey2)}
.mast .ptitle{font:600 12.5px/1 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--g-hi);margin-left:18px;padding:12px 0}
.mast .back{margin-left:6px}
.menu-btn{display:none}
.menu-pop{position:absolute;right:16px;top:calc(100% + 4px);z-index:70;width:250px;padding:12px 10px;display:grid;gap:1px}
.menu-pop[hidden]{display:none}
.menu-pop .mhd{padding:6px 10px 10px;border-bottom:1px solid var(--g-inner);margin-bottom:6px}
.menu-pop .mhd b{display:block;font:500 17px/1.2 var(--text);color:var(--g-text)} .menu-pop .mhd span{font-size:13px;color:var(--grey)}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;color:var(--cream);
  font:500 16.5px/1.2 var(--text);padding:10px 10px;border-radius:3px;text-decoration:none;cursor:pointer;text-align:left}
.menu-pop a:hover,.menu-pop button:hover{background:rgba(173,132,69,.1);color:var(--cream-t)}
.menu-pop svg{width:18px;height:18px;color:var(--g-text);flex:none}
.menu-pop hr{border:0;border-top:1px solid var(--g-inner);margin:6px 4px}
.mast .medal .badge{top:-4px;right:-5px}
@media (max-width:760px){
  .mast{padding:10px 12px 4px;gap:8px}
  .mast .wm{flex:1;align-items:center} .mast .spacer{display:none}
  .mast .ptitle{order:5;flex-basis:100%;text-align:center;margin:0;padding:6px 0 4px}
  .mast .shopen{order:6;flex:1 1 100%}   /* the public link pages' "Open Valor Tools": a row of its own */
  .who,.mast #themeBtn,.mast #timeBtn,.mast .back{display:none}
  .menu-btn{display:inline-grid}
  .menu-pop{right:10px;left:10px;width:auto}
}
/* narrower windows (tablets, small laptops): the account block folds into the menu, then the tabs take a row of their own */
@media (min-width:761px) and (max-width:1560px){ .mast .who{display:none} .menu-btn{display:inline-grid} }
@media (min-width:761px) and (max-width:1315px){ .mast{flex-wrap:wrap} .mast .tabs{order:5;flex-basis:100%;margin:2px 0 0;justify-content:center} }
@media (min-width:761px) and (max-width:1375px){ .pill.wpill .wlbl{display:none} .pill.wpill select{max-width:130px} }
/* wide windows: the account block keeps the name; its links are in the menu (room for the clock medallion) */
@media (min-width:1561px){ .mast .who .meta{display:none} .menu-btn{display:inline-grid} }
/* inside the Valor Tools app, the Sim tab frames the sim: the planner's masthead is the one on screen */
html.embed .toprule,html.embed .mast{display:none!important}
html.embed body{background:var(--page)}
/* refresh: the medallion in the app's masthead turns while it works; pulling the page down (assets/pull.js) brings one down */
.medal.busy svg,.pull.spin svg{animation:vspin .9s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
html.pull-on,html.pull-on body{overscroll-behavior-y:none}
.pull{position:fixed;left:50%;top:0;z-index:95;margin-left:-21px;opacity:0;pointer-events:none;transform:translateY(-52px);transition:transform .25s ease,opacity .25s ease}
.pull.drag{transition:none}
.pull .medal{--s:42px;box-shadow:0 0 0 1px #1E160C,inset 0 0 0 1px #2A1F12,0 6px 16px rgba(0,0,0,.55)}
.pull.armed .medal,.pull.spin .medal{box-shadow:0 0 0 1px #1E160C,inset 0 0 10px rgba(237,214,157,.18),0 0 18px rgba(173,132,69,.65),0 6px 16px rgba(0,0,0,.5)}
html[data-theme=light] .pull .medal{box-shadow:0 0 0 1px rgba(94,68,37,.25),0 6px 14px rgba(60,44,20,.22)}
html[data-theme=light] .pull.armed .medal,html[data-theme=light] .pull.spin .medal{box-shadow:0 0 0 1px rgba(94,68,37,.25),0 0 14px rgba(184,145,62,.5),0 6px 14px rgba(60,44,20,.2)}
@media (prefers-reduced-motion:reduce){ .medal.busy svg,.pull.spin svg{animation-duration:2.6s} .pull{transition:opacity .2s} }
/* the app's refresh medallion (the masthead is tight on phones: the wordmark's flourishes give way) */
.mast #refreshBtn[hidden]{display:none}
@media (max-width:420px){ body.app .mast .wm-row::before,body.app .mast .wm-row::after{width:22px} }
@media (max-width:380px){ body.app .mast .wm-row::before,body.app .mast .wm-row::after{display:none} }
@media (max-width:380px){ .tabs:has(#dashTab:not([hidden])){gap:2px} .tabs:has(#dashTab:not([hidden])) a{padding:9px 4px;font-size:10px;letter-spacing:.06em} }
@media (max-width:340px){ .tabs:has(#dashTab:not([hidden])) a{padding:9px 3px;font-size:9.5px;letter-spacing:.04em} }
@media (min-width:1561px){ .mast{gap:11px} .mast .tabs{margin-left:10px} }

/* times in UTC or the player's own time (assets/clock.js): the masthead's clock medallion shows the zone in use */
.medal.tzbtn .tzt{font:600 10px/1 var(--caps);letter-spacing:.06em;color:var(--g-text);max-width:36px;overflow:hidden;text-overflow:clip;white-space:nowrap}
.medal.tzbtn.utc .tzt{color:var(--g-hi)}

/* ---- Text size (assets/theme.js, Sep 29, 2026): the − % + row in the menus and the slider on Account › Display ---- */
.tsz{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 10px}
.tsz .tsz-l{flex:1;display:flex;align-items:center;gap:12px;font:500 16.5px/1.2 var(--text);color:var(--cream);white-space:nowrap}
.tsz .tsz-ic{width:18px;flex:none;text-align:center;font:600 13px/1 var(--title);color:var(--g-text);letter-spacing:0}
.menu-pop .tsz .tsz-b,.tsz .tsz-b{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;padding:0;border-radius:50%;
  border:1px solid var(--g-frame);background:var(--field);color:var(--g-hi);font:600 19px/1 var(--text);cursor:pointer}
.menu-pop .tsz .tsz-b:hover:not(:disabled),.tsz .tsz-b:hover:not(:disabled){border-color:var(--g-body);background:rgba(173,132,69,.12);color:var(--g-hi)}
.tsz .tsz-b:disabled{opacity:.35;cursor:default}
.tsz .tsz-v{min-width:46px;text-align:center;font:600 15px/1 var(--text);color:var(--g-hi)}
.tsz.full{display:block;padding:0}
.tsz.full .tsz-row{display:flex;align-items:center;gap:12px}
.tsz.full .tsz-b{width:40px;height:40px}
.tsz.full .a{font-family:var(--title);font-weight:600;line-height:1} .tsz.full .a.sm{font-size:13px} .tsz.full .a.lg{font-size:21px}
.tsz.full .tsz-r{flex:1;min-width:0;height:28px;margin:0}
.tsz.full .tsz-v{min-width:54px;font-size:18px;text-align:right}
.tsz.full .tsz-foot{display:flex;justify-content:flex-end;margin-top:6px}
.tsz .tsz-reset{background:none;border:0;padding:4px 0;color:var(--g-text);font:500 14.5px/1.2 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tsz .tsz-reset:disabled{color:var(--grey2);text-decoration:none;cursor:default}
/* a page keeps its width on screen whatever the text size (smaller text = more columns in the same space, not a smaller
   page with wider margins): the widest frames are divided by --tzf (the size / 100, set by theme.js) */
html[data-text] .mast,html[data-text] .foot{max-width:calc(1560px / var(--tzf,1))}
/* bigger text on a phone: the tool tabs may take two rows rather than run off the screen */
@media (max-width:760px){
  html[data-text="110"] .tabs,html[data-text="120"] .tabs{flex-wrap:wrap;gap:0 2px}
  html[data-text="110"] .tabs a,html[data-text="120"] .tabs a{padding:9px 5px;letter-spacing:.06em}
  html[data-text="110"] .tabs a.on::after,html[data-text="120"] .tabs a.on::after{left:5px;right:5px}
}
/* bigger text in a window that would otherwise fit the masthead on one row (theme.js sets tz-mwrap): fold it like 761–1315 px */
html.tz-mwrap .mast{flex-wrap:wrap} html.tz-mwrap .mast .tabs{order:5;flex-basis:100%;margin:2px 0 0;justify-content:center}
html.tz-mwrap .mast .who{display:none} html.tz-mwrap .menu-btn{display:inline-grid} html.tz-mwrap .pill.wpill .wlbl{display:none}
/* a sale's list price, struck through before the sale price (Oct 6, 2026) */
s.was{color:var(--grey,#9a8f7c);font-weight:400;text-decoration-thickness:1px;margin-right:2px}

/* ---- skeletons (Oct 6, 2026, the performance review, idea 6): the shape of a page while it opens, instead of "Opening…" text.
   <div class="skel" role="status"><i class="sk-ctx"></i><div class="sk-row"><i></i><i></i><i></i></div><i class="sk-wide"></i><span class="sk-cap">Opening…</span></div> */
.skel{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1320px;margin:0 auto;padding:22px 26px;box-sizing:border-box}
.skel i{display:block;height:118px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,var(--panel) 30%,var(--raised) 50%,var(--panel) 70%) 0 0/300% 100%;animation:vt-sk 1.6s ease-in-out infinite}
.skel .sk-ctx{height:50px}
.skel .sk-wide{height:210px}
.skel .sk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.skel .sk-cap{text-align:center;color:var(--grey);font-style:italic}
@keyframes vt-sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}
@media (max-width:620px){.skel{padding:14px 12px}.skel .sk-row i:nth-child(n+2){display:none}}
.loading .skel{padding:0;max-width:none;text-align:left}

/* ===== Touch screens (Oct 7, 2026; most players are on phones): small buttons and links get a thumb-sized hit area, and every
   text box is at least 16px so iOS Safari doesn't zoom the page when one is tapped. */
@media (pointer:coarse){
  .mini{min-height:34px}
  .vfoot a{display:inline-block;padding:8px 2px}
  input.t,input.n,select.s,textarea,select{font-size:max(16px,1em)}
}