/* ==========================================================================
   Mobsman - Port Ambrose
   Gunmetal and crimson on near-black.
   ========================================================================== */

:root{
  --ink:#08090A;
  --ground:#0B0D0F;
  --surface:#14181C;
  --surface-2:#1C2228;

  /* Crimson is the accent, and it is spent sparingly: the logo, the ribbon,
     the one button on a page that actually does something. */
  --blood:#6E0D14;
  --blood-2:#A8161F;
  --crimson:#C41E2A;
  --crimson-hi:#E8434E;

  /* Gunmetal is the structural metal - rules, frames, headings, borders. */
  --metal:#A8ADB4;
  --metal-hi:#E9EBEE;
  --metal-lo:#5D646C;
  --metal-wash:rgba(168,173,180,.09);

  --line:#2E353C;
  --line-soft:#20262B;
  --text:#C9CED4;
  --dim:#8B929B;
  --faint:#5F666E;

  --energy:#5FA05A;
  --nerve:#C4463A;
  --morale:#D3A33C;
  --health:#4C82AC;
  --heat:#E2762E;
  --good:#6FB45F;
  --bad:#D45E52;
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --body:"Barlow Semi Condensed","Helvetica Neue",Arial,sans-serif;
  --data:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{background:var(--ink)}
body{
  margin:0;color:var(--text);font-family:var(--body);font-size:13px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(168,173,180,.075), transparent 62%),
    radial-gradient(900px 620px at 108% 12%, rgba(150,20,32,.26), transparent 60%),
    linear-gradient(180deg,#0E1214 0%, var(--ground) 46%, #090C0D 100%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0,0,0,.62) 100%)}
.page{position:relative;z-index:1}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--metal-hi)}
:focus-visible{outline:2px solid var(--metal);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{display:block}
.ico{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:14px;height:14px;flex:0 0 14px}
.rule{height:3px;background:linear-gradient(90deg,transparent,var(--metal-lo) 12%,var(--metal) 50%,var(--metal-lo) 88%,transparent);opacity:.62}

/* ---------------------------------------------------------------- masthead */
.masthead{
  display:flex;align-items:center;gap:20px;height:46px;padding:0 18px;
  background:linear-gradient(180deg,rgba(168,173,180,.055),transparent 58%),linear-gradient(180deg,#1A2124 0%,#12181A 62%,#0D1214 100%);
  border-bottom:1px solid #000;box-shadow:0 2px 0 rgba(168,173,180,.10), 0 10px 26px rgba(0,0,0,.55);
}
.wordmark{display:flex;align-items:center;gap:11px;white-space:nowrap}
.wordmark .crest{
  width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 9px rgba(196,30,42,.30));
}
.wordmark .name{
  font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:.20em;
  color:transparent;background:linear-gradient(180deg,var(--metal-hi) 6%,var(--metal) 48%,#6E747C 100%);
  -webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.mastnav{display:flex;gap:16px;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.17em;color:var(--dim)}
.mastnav a:hover{color:var(--metal-hi);text-shadow:0 0 12px rgba(168,173,180,.45)}
.masthead .grow{flex:1}
.mastbtns{display:flex;gap:6px}
.mastbtn{
  position:relative;display:grid;place-items:center;width:26px;height:26px;color:var(--dim);
  background:linear-gradient(180deg,#242C30,#171D20);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mastbtn:hover{color:var(--metal-hi);border-color:var(--metal-lo)}
.mastbtn .tally{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  background:linear-gradient(180deg,#C74A3C,#8E2A20);border:1px solid #521812;border-radius:9px;
  color:#FFEDE6;font-family:var(--data);font-size:10px;font-weight:700;line-height:15px;text-align:center;
}

.wire{
  display:flex;align-items:center;gap:12px;padding:4px 18px;
  background:linear-gradient(180deg,#131819,#0D1113);border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--dim);
}
.wire .stamp{
  display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.22em;color:var(--metal);padding:2px 9px;border:1px solid var(--metal-lo);background:var(--metal-wash);
}
.wire b{color:#DDE2E7;font-weight:600}
.wire .clock{margin-left:auto;font-family:var(--data);font-size:11.5px;color:var(--faint)}

/* ------------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:210px minmax(0,1fr) 238px;align-items:start}
.rail,.side{background:linear-gradient(180deg,#161C1F 0%,#121719 55%,#0E1214 100%)}
.rail{border-right:1px solid #000;box-shadow:inset -1px 0 0 rgba(168,173,180,.09), 6px 0 22px rgba(0,0,0,.5)}
.side{border-left:1px solid #000;box-shadow:inset 1px 0 0 rgba(168,173,180,.09), -6px 0 22px rgba(0,0,0,.5);padding-bottom:26px}
.main{padding:12px 16px 34px;min-width:0}

/* -------------------------------------------------------------- left rail */
.portrait{padding:10px 11px 0}
.frame{
  position:relative;background:linear-gradient(180deg,#20282B,#141A1C);border:1px solid var(--metal-lo);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.55);padding:5px;
}
.frame .corner{position:absolute;width:14px;height:14px;stroke:var(--metal);fill:none;stroke-width:1.4;opacity:.85}
.frame .c-tl{top:3px;left:3px}
.frame .c-tr{top:3px;right:3px;transform:scaleX(-1)}
.frame .c-bl{bottom:3px;left:3px;transform:scaleY(-1)}
.frame .c-br{bottom:3px;right:3px;transform:scale(-1)}
/* ---- avatars -----------------------------------------------------------
   200x275 is the canonical portrait. The rail shows the same image at 120
   wide, and the target list at 44 - all locked to the same 40:55 ratio, so
   one uploaded file serves every surface without ever distorting. */
.frame{display:block}
/* The portrait fills its frame rather than sitting in the middle of it.
   A fixed pixel width was left behind by the density pass: the rail narrowed
   to 210px, the frame's inside came to 176px, and an 88px portrait covered
   exactly half of it with forty-four pixels of dead board either side.
   Filling the width and letting the 40:55 ratio set the height keeps the
   frame tight to the picture at every rail width, including the wider one
   below 900px where the rail becomes a full-width block. */
.frame .mug{
  display:block;width:100%;height:auto;aspect-ratio:200 / 275;
  object-fit:cover;background:#0A0D0E;
}
.avatar{
  display:block;width:200px;height:275px;
  object-fit:cover;background:#0A0D0E;
}
.tiny{
  display:block;width:44px;height:60px;
  object-fit:cover;background:#0A0D0E;
  border:1px solid var(--line);
}
.frame .lvlbadge{position:absolute;right:7px;bottom:7px;width:34px;height:39px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.8))}
.namecard{padding:7px 2px 0;text-align:center}
.namecard .handle{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.09em;color:#EDF0F3;text-shadow:0 1px 0 #000,0 0 20px rgba(168,173,180,.22)}
.namecard .uid{font-family:var(--data);font-size:10.5px;color:var(--faint);margin-top:1px}
.ribbon{
  margin-top:6px;padding:3px 9px;display:inline-block;
  background:linear-gradient(180deg,var(--blood-2),var(--blood));
  border-top:1px solid rgba(168,173,180,.5);border-bottom:1px solid rgba(0,0,0,.7);
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.19em;color:var(--metal-hi);
  box-shadow:0 3px 9px rgba(0,0,0,.55);
}
.xpbar{margin:7px 2px 0}
.xpbar .t{display:flex;justify-content:space-between;font-family:var(--data);font-size:9.5px;color:var(--faint);margin-bottom:3px}
.xpbar .b{height:4px;background:#050708;border:1px solid #000}
.xpbar .b i{display:block;height:100%;background:linear-gradient(90deg,var(--metal-lo),var(--metal))}

.purse{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.24)}
.purse > div{padding:6px 11px;display:flex;align-items:center;gap:8px}
.purse > div + div{border-left:1px solid var(--line-soft)}
.purse .coin{width:17px;height:17px;flex:0 0 17px}
.purse .k{font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.19em;color:var(--faint)}
.purse .v{font-family:var(--data);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--good);line-height:1.2}
.purse .v.mk{color:var(--metal-hi)}

.vitals{padding:9px 12px 2px;display:flex;flex-direction:column;gap:7px}
.vital .top{display:flex;align-items:center;gap:7px}
.vital .top .ico{opacity:.75}
.vital .name{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.2em;color:var(--dim)}
.vital .num{margin-left:auto;font-family:var(--data);font-size:11.5px;font-variant-numeric:tabular-nums;color:#DCE1E6}
.vital .num b{font-weight:700}
.track{
  position:relative;height:10px;margin-top:3px;background:linear-gradient(180deg,#050708,#0D1214);
  border:1px solid #000;box-shadow:inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04);overflow:hidden;
}
.fill{position:absolute;top:0;bottom:0;left:0;transition:width .5s linear}
.fill::after{content:"";position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.34),transparent)}
.pips{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;pointer-events:none}
.pips i{flex:1;border-right:1px solid rgba(0,0,0,.55)}
.pips i:last-child{border-right:0}
.vital .sub{display:flex;justify-content:space-between;margin-top:2px;font-family:var(--data);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.vital.is-full .sub .full{color:var(--good)}
.f-energy{background:linear-gradient(180deg,#8CC276,var(--energy) 55%,#3F6733)}
.f-nerve{background:linear-gradient(180deg,#D4574A,var(--nerve) 55%,#6E241C)}
.f-morale{background:linear-gradient(180deg,#EEC463,var(--morale) 55%,#8A6820)}
.f-health{background:linear-gradient(180deg,#68A2CE,var(--health) 55%,#2C516D)}

.heatbox{
  margin:10px 12px 0;padding:8px 10px 9px;
  background:linear-gradient(180deg,rgba(218,100,48,.13),rgba(0,0,0,.30));
  border:1px solid #6B3418;border-top-color:#9A4E22;
  box-shadow:inset 0 1px 0 rgba(255,180,120,.16), 0 5px 16px rgba(0,0,0,.5);
}
.heatbox .cap{display:flex;align-items:center;gap:7px}
.heatbox .cap .name{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.22em;color:#F0A472}
.heatbox .cap .state{margin-left:auto;font-family:var(--data);font-size:10px;color:var(--heat)}
.gauge{display:block;margin:3px auto 0;width:120px;height:67px}
.heatbox .note{margin:4px 0 0;font-size:10.5px;line-height:1.4;color:var(--dim);text-align:center}
.heatbox .note b{color:#F0A472;font-weight:600}

.nav{padding:10px 0 0}
.navgroup + .navgroup{margin-top:9px}
.navgroup > .gh{
  display:flex;align-items:center;gap:9px;margin-bottom:3px;padding:0 12px;
  font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.26em;color:var(--metal);opacity:.72;
}
.navgroup > .gh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--metal-lo),transparent)}
.navgroup a{display:flex;align-items:center;gap:9px;padding:3px 12px;font-size:12px;color:var(--dim);border-left:3px solid transparent}
.navgroup a .ico{opacity:.6}
.navgroup a:hover{background:linear-gradient(90deg,rgba(168,173,180,.10),transparent);color:#DCE1E6}
.navgroup a:hover .ico{opacity:1}
.navgroup a.on{background:linear-gradient(90deg,rgba(196,30,42,.20),rgba(196,30,42,.02));border-left-color:var(--crimson);color:#EDF0F3}
.navgroup a.on .ico{opacity:1;color:var(--metal-hi)}
.navgroup a .flag{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--metal);box-shadow:0 0 8px var(--metal)}
.navgroup a .cd{margin-left:auto;font-family:var(--data);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.skyline{display:block;width:100%;height:auto;margin-top:8px;opacity:.5}

/* ----------------------------------------------------------------- centre */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pagehead h1{
  margin:0;font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.13em;
  color:transparent;background:linear-gradient(180deg,#F2F5F8 18%,#9AA1A9 100%);
  -webkit-background-clip:text;background-clip:text;text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.pagehead .where{font-family:var(--data);font-size:11px;color:var(--faint);margin-top:3px}
.pagelinks{display:flex;gap:7px}
.plink{
  display:flex;align-items:center;gap:7px;padding:6px 12px;color:var(--dim);
  background:linear-gradient(180deg,#222A2D,#161B1E);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;
}
.plink:hover{color:var(--metal-hi);border-color:var(--metal-lo)}
.headrule{margin:8px 0 12px}

.dispatch{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:8px 12px;margin-bottom:10px;
  background:linear-gradient(180deg,#1F262A,#141A1C);border:1px solid var(--line);border-left:3px solid var(--crimson);
  box-shadow:0 5px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);font-size:12.5px;color:var(--dim);
}
.dispatch.good{border-left-color:var(--good)}
.dispatch.bad{border-left-color:var(--bad)}
.dispatch .seal{width:20px;height:20px;flex:0 0 20px;color:var(--metal)}
.dispatch.good .seal{color:var(--good)}
.dispatch.bad .seal{color:var(--bad)}
.dispatch b{color:#DFE4E9;font-weight:600}

/* crimson button - the one loud control on any page */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px;color:#FFF1F0;
  background:linear-gradient(180deg,var(--crimson-hi),var(--crimson) 45%,#8A0F18);
  border:1px solid #4A080E;border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,190,190,.35), 0 3px 9px rgba(0,0,0,.55);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.btn:hover{filter:brightness(1.1)}
.btn[disabled]{filter:grayscale(.8) brightness(.55);cursor:not-allowed}
.btn.quiet{
  color:var(--dim);background:linear-gradient(180deg,#242C30,#171D20);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.btn.quiet:hover{color:var(--metal-hi);border-color:var(--metal-lo);filter:none}
.btn.danger{color:#FFEDE6;background:linear-gradient(180deg,#C74A3C,#8E2A20);border-color:#521812}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.wide{grid-column:1 / -1}

.panel{
  background:linear-gradient(180deg,#1A2124 0%,#151A1D 40%,#111618 100%);
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045);
}
.panel > header{
  display:flex;align-items:center;gap:9px;padding:6px 11px;
  background:linear-gradient(180deg,#2A3338 0%,#1D2427 55%,#161C1F 100%);
  border-bottom:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(168,173,180,.20);
}
.panel > header .ico{color:var(--metal);opacity:.9}
.panel > header h2{margin:0;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.19em;color:#DFE4E9;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.panel > header .meta{margin-left:auto;font-family:var(--data);font-size:10px;color:var(--faint);padding:1px 7px;border:1px solid var(--line-soft);background:rgba(0,0,0,.3)}
.panel > header .fold{width:20px;height:20px;display:grid;place-items:center;color:var(--faint);font-family:var(--data);font-size:13px;line-height:1;border:1px solid var(--line-soft)}
.panel > header .fold:hover{color:var(--metal-hi);border-color:var(--metal-lo)}
.panel.lift{border-color:#6B3418;box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 26px rgba(218,100,48,.09), inset 0 1px 0 rgba(255,180,120,.10)}
.panel.lift > header{background:linear-gradient(180deg,#4A2314,#2B1710 60%,#1B1210);box-shadow:inset 0 1px 0 rgba(255,180,120,.18), 0 1px 0 rgba(218,100,48,.35)}
.panel.lift > header h2{color:#F3B98D}
.panel.lift > header .ico{color:var(--heat)}
.padded{padding:10px 12px}

.rows{width:100%;border-collapse:collapse;font-size:12.5px}
.rows tr + tr{border-top:1px solid var(--line-soft)}
.rows th{text-align:left;font-weight:500;color:var(--dim);padding:5px 11px;width:48%}
.rows td{padding:5px 11px;text-align:right;font-family:var(--data);font-size:12.5px;font-variant-numeric:tabular-nums;color:#D6DBE1}
.rows tr:nth-child(even){background:rgba(255,255,255,.017)}
.rows .mod{font-family:var(--body);font-size:11.5px;color:var(--faint)}
.rows td .mod{margin-left:8px}
.rows th .mod{margin-left:6px}
.rows .mod.up{color:var(--good)}
.rows tr.total{border-top:1px solid var(--metal-lo);background:rgba(168,173,180,.055)}
.rows tr.total th{color:var(--metal-hi);font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.16em}
.rows tr.total td{color:var(--metal-hi);font-weight:700;font-size:13px}
.money{color:var(--good)}
.cost{color:var(--bad)}
.barcell{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
.mini{width:66px;height:7px;background:#050708;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.mini i{display:block;height:100%;background:linear-gradient(180deg,var(--metal),var(--metal-lo))}
.locked{color:var(--faint);font-family:var(--body);font-size:12px;font-style:italic}

/* ---- stock portrait picker ----------------------------------------------
   Radio inputs, styled as cards. The input stays in the DOM and keyboard
   focus lands on it, so this is still a plain accessible radio group -
   the tile is only what it looks like. */
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ptile{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  background:linear-gradient(180deg,#1A1F24,#12161A);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.ptile input{position:absolute;opacity:0;width:1px;height:1px}
.ptile .pfig{display:block;overflow:hidden;background:#0A0D0E;line-height:0}
.ptile .pfig img,.ptile .pfig svg{
  display:block;width:100%;height:auto;aspect-ratio:200/275;object-fit:cover;
  filter:grayscale(.55) contrast(1.05);transition:filter .12s ease;
}
.ptile .pname{
  padding:7px 8px 0;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;color:var(--dim);
}
.ptile .pblurb{padding:2px 8px 9px;font-size:11.5px;line-height:1.35;color:var(--faint)}
.ptile:hover{border-color:var(--metal-lo)}
.ptile:hover .pfig img,.ptile:hover .pfig svg{filter:grayscale(.2) contrast(1.05)}
.ptile:has(input:checked){
  border-color:var(--crimson);
  box-shadow:0 0 0 1px var(--crimson), 0 6px 18px rgba(0,0,0,.55), 0 0 22px rgba(196,30,42,.18);
}
.ptile:has(input:checked) .pfig img,.ptile:has(input:checked) .pfig svg{filter:none}
.ptile:has(input:checked) .pname{color:var(--crimson-hi)}
.ptile:has(input:focus-visible){outline:2px solid var(--metal);outline-offset:2px}
.wide-presets{max-width:660px}

/* ---- personnel file (profile page) ---- */
.dossier{display:grid;grid-template-columns:auto minmax(0,1fr) 190px;gap:0}
.dossier > * + *{border-left:1px solid var(--line-soft)}
.mugshot{padding:11px;display:flex;flex-direction:column;gap:8px;align-items:center}
.avframe{
  position:relative;padding:5px;
  background:linear-gradient(180deg,#20282B,#141A1C);border:1px solid var(--metal-lo);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.55);
}
.avframe .corner{position:absolute;width:14px;height:14px;stroke:var(--metal);fill:none;stroke-width:1.4;opacity:.85}
.avframe .c-tl{top:3px;left:3px}
.avframe .c-tr{top:3px;right:3px;transform:scaleX(-1)}
.avframe .c-bl{bottom:3px;left:3px;transform:scaleY(-1)}
.avframe .c-br{bottom:3px;right:3px;transform:scale(-1)}
.avchange{width:100%;justify-content:center}

.idplate{padding:10px 0 0}
.idplate .who{padding:0 12px 9px;text-align:center;border-bottom:1px solid var(--line-soft)}
.idplate .nm{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.09em;color:#EDF0F3;text-shadow:0 2px 0 #000}
.idplate .id{font-family:var(--data);font-size:11px;color:var(--faint)}
.idplate .who .ribbon{margin-top:8px}
.bignums{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-soft)}
.bignums .bn{padding:7px 6px;text-align:center}
.bignums .bn + .bn{border-left:1px solid var(--line-soft)}
.bignums .k{display:block;font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.22em;color:var(--faint)}
.bignums .v{display:block;font-family:var(--display);font-weight:900;font-size:22px;line-height:1.1;color:var(--metal-hi)}
.bignums .v.hot{color:var(--heat)}

.actions{padding:11px;display:flex;flex-direction:column;gap:6px}
.actions .ah{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.26em;color:var(--metal);opacity:.8;margin-bottom:2px}
.actions .btn{justify-content:flex-start}
.actions .why{margin:4px 0 0;font-size:11.5px;color:var(--faint);line-height:1.4}

/* ---- target list ---- */
.choice .thumb{flex:0 0 44px}
.heatpips{display:flex;gap:3px;margin-top:5px}
.heatpips i{width:16px;height:4px;background:#0A0D0E;border:1px solid var(--line-soft)}
.heatpips i.on{background:var(--heat);border-color:var(--heat);box-shadow:0 0 5px rgba(226,118,46,.55)}
.hitform{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.hitform select{
  font-family:var(--body);font-size:12.5px;color:#D6DBE1;padding:5px 8px;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
}
.hitform .btn{justify-content:center}

/* ---- ledger ---- */
.ledgerday{
  padding:9px 14px 5px;
  font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  color:var(--metal);opacity:.8;
  border-top:1px solid var(--line-soft);background:rgba(0,0,0,.22);
}
.feed .ledgerday:first-child{border-top:0}

/* ---- administration ---- */
.mastbtn.admin{border-color:var(--blood-2);color:var(--crimson-hi)}
.mastbtn.admin:hover{background:linear-gradient(180deg,#3A1116,#1C0D10)}

.adminrow{margin-top:8px}
.adminrow > summary{
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:10px;
  letter-spacing:.18em;color:var(--faint);padding:4px 0;
}
.adminrow > summary:hover{color:var(--metal-hi)}
.adminform{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding:9px 0 0;
}
.adminform input[type=text],.adminform input[type=number],.adminform select{
  padding:6px 9px;font-family:var(--body);font-size:13px;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);
  border:1px solid var(--line);border-radius:2px;
}
.adminform input[type=text]{flex:1;min-width:170px}

/* artwork manager */
.medgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px;background:#000;
}
.medcard{
  background:linear-gradient(180deg,#1A2024,#12171A);padding:11px;
  display:flex;flex-direction:column;gap:7px;
}
.medcard.empty{background:repeating-linear-gradient(135deg,#141A1C,#141A1C 7px,#171E20 7px,#171E20 14px)}
.medart{
  display:grid;place-items:center;overflow:hidden;
  background:#0A0D0E;border:1px solid var(--line-soft);
}
.medart img{width:100%;height:100%;object-fit:contain;display:block}
.medempty{font-family:var(--data);font-size:10px;color:var(--faint)}
.medname{font-size:12.5px;color:#D6DBE1;line-height:1.25}
.medcode{font-family:var(--data);font-size:10px;color:var(--faint)}
.medform{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.medform input[type=file]{
  font-family:var(--body);font-size:11px;color:var(--dim);
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);padding:5px;width:100%;
}
.medform .btn{justify-content:center}

/* tuning grid */
.tunewrap{overflow-x:auto}
.rows.tune th{width:auto;white-space:nowrap}
.rows.tune td{padding:4px 8px}
.tunecell{margin:0}
.tunecell input{
  width:104px;padding:5px 7px;
  font-family:var(--data);font-size:12px;color:#D6DBE1;text-align:right;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);
  border:1px solid var(--line);border-radius:2px;
}
.tunecell input:focus{
  border-color:var(--crimson);outline:none;
  box-shadow:0 0 0 2px rgba(196,30,42,.18);
}

/* property photographs */
.propshot{
  width:150px;height:94px;object-fit:cover;flex:0 0 150px;
  border:1px solid var(--line);background:#0A0D0E;
}

/* ---- contracts ---- */
.job{padding:10px 12px;border-top:1px solid var(--line-soft)}
.job:first-child{border-top:0}
.job.off{opacity:.5}
.job.ready{background:linear-gradient(90deg,rgba(111,180,95,.07),transparent);box-shadow:inset 3px 0 0 var(--good)}
.jhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.jname{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.09em;color:#EDF0F3}
.jfixer{font-family:var(--data);font-size:10.5px;color:var(--faint);margin-top:2px}
.jpay{
  margin-left:auto;text-align:right;font-family:var(--data);font-size:12px;
  color:var(--metal-hi);padding:3px 9px;
  border:1px solid var(--metal-lo);background:var(--metal-wash);
}
.jdesc{margin:7px 0 8px;font-size:13px;color:var(--dim);line-height:1.55;max-width:70ch}

.steps{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-direction:column;gap:5px}
.step{
  display:grid;grid-template-columns:16px minmax(0,1fr) 90px auto;gap:10px;align-items:center;
  font-size:12.5px;color:var(--dim);
}
.step.done{color:var(--good)}
.step .stick{
  text-align:center;font-family:var(--data);font-size:12px;
  color:var(--faint);
}
.step.done .stick{color:var(--good)}
.step .sbar{height:6px;background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.step .sbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blood-2),var(--crimson))}
.step.done .sbar i{background:linear-gradient(90deg,#2F6B28,var(--good))}
.step .scount{
  font-family:var(--data);font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
@media (max-width:760px){
  .step{grid-template-columns:16px minmax(0,1fr) auto}
  .step .sbar{display:none}
}

/* ---- the parlour ------------------------------------------------------- */
.tblurb{margin:0 0 11px;font-size:13px;color:var(--dim);line-height:1.55}
.tblurb b{color:var(--metal-hi);font-weight:600}

/* the pot and the daily chips */
.parlourtop{display:grid;grid-template-columns:1fr 264px;gap:12px;margin-bottom:13px}
.jackbox{
  padding:13px 18px;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(196,30,42,.28), transparent 62%),
    linear-gradient(180deg,#1E1216,#0E1114);
  border:1px solid var(--blood-2);
  box-shadow:inset 0 1px 0 rgba(255,170,170,.14), 0 8px 26px rgba(0,0,0,.5);
}
.jackbox .jl{
  display:block;font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.34em;color:var(--crimson-hi);opacity:.85;
}
.jackbox .jv{
  display:block;margin-top:6px;
  font-family:var(--display);font-weight:900;font-size:34px;line-height:1;
  color:transparent;background:linear-gradient(180deg,#FFF3F2 10%,var(--crimson-hi) 55%,#7A0F17 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.jackbox .jn{display:block;margin-top:7px;font-size:12px;color:var(--dim)}

.chipbox{
  padding:12px 15px;
  background:linear-gradient(180deg,#1A2024,#111619);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.chipbox .cl{font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--faint)}
.chipbox .cv{
  display:block;margin-top:3px;
  font-family:var(--display);font-weight:900;font-size:25px;line-height:1;color:var(--metal-hi);
}
.chipbox .cv small{font-size:14px;color:var(--faint);font-weight:700}
.chipbox .cbar{display:block;height:6px;margin-top:9px;background:#06080A;border:1px solid #000}
.chipbox .cbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blood-2),var(--crimson-hi))}
.chipbox .cn{display:block;margin-top:7px;font-size:11.5px;color:var(--faint)}
.chipbox .cn b{color:var(--metal);font-family:var(--data)}
.chipcount{
  margin-left:auto;font-family:var(--data);font-size:12px;color:var(--metal-hi);
  padding:3px 10px;border:1px solid var(--metal-lo);background:var(--metal-wash);white-space:nowrap;
}

/* the tables on the hub */
.tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tablecard{
  display:flex;flex-direction:column;padding:0 0 11px;text-decoration:none;
  background:linear-gradient(180deg,#1A2124 0%,#151A1D 45%,#101518 100%);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045);
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.tablecard:hover{
  border-color:var(--blood-2);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 26px rgba(196,30,42,.12), inset 0 1px 0 rgba(255,170,170,.10);
}
.tartwrap{
  display:block;padding:12px 14px 9px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(196,30,42,.10), transparent 65%);
  border-bottom:1px solid var(--line-soft);
}
.tart{width:100%;height:auto;max-height:68px;display:block}
.tname{
  display:block;padding:9px 14px 0;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;color:#EDF0F3;
}
.tablecard .tblurb{
  display:block;margin:5px 0 0;padding:0 16px;
  font-size:12.5px;line-height:1.5;color:var(--dim);
}
.tfoot{display:flex;align-items:center;gap:10px;padding:9px 14px 0;margin-top:auto}
.tflag{
  font-family:var(--data);font-size:10.5px;color:var(--crimson-hi);
  padding:2px 8px;border:1px solid var(--blood-2);background:rgba(196,30,42,.10);
}
.trtp{margin-left:auto;font-family:var(--data);font-size:10.5px;color:var(--faint)}

/* ---- a table in play ---- */
.machine{
  padding:0 0 13px;
  background:linear-gradient(180deg,#1C2327 0%,#141A1D 45%,#0F1417 100%);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.machine.felt{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(60,110,70,.16), transparent 60%),
    linear-gradient(180deg,#16211A 0%,#111A15 50%,#0D1311 100%);
  border-color:#2C4234;
}
.mhead{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.mname{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:.16em;color:#EDF0F3}
.mpot{
  margin-left:auto;text-align:right;
  font-family:var(--display);font-weight:900;font-size:21px;line-height:1.1;color:var(--crimson-hi);
}
.mpot small{
  display:block;font-family:var(--display);font-weight:600;font-size:9px;
  letter-spacing:.24em;color:var(--faint);
}

.mreels{display:flex;gap:10px;justify-content:center;padding:14px 16px}
.mreel{
  flex:0 0 88px;height:100px;display:grid;place-items:center;
  background:linear-gradient(180deg,#0A0E10,#141B1F 45%,#0A0E10);
  border:1px solid var(--metal-lo);
  box-shadow:inset 0 10px 18px rgba(0,0,0,.8), inset 0 -10px 18px rgba(0,0,0,.8);
}
.rsym{width:50px;height:50px}

.mbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px 0;border-top:1px solid var(--line-soft);
}
.mbar.wide{gap:8px}
.mbar label{font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--faint)}
.mbar input[type=number],.mbar input[type=text],.mbar select{
  padding:8px 11px;font-family:var(--data);font-size:13px;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);
  border:1px solid var(--line);border-radius:2px;box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.mbar input[type=number]{width:130px}
.mbar input[type=text]{width:96px}
.mchips{margin-left:auto;font-family:var(--data);font-size:11.5px;color:var(--faint)}
.mhint{margin:9px 16px 0;font-size:12px;color:var(--faint);line-height:1.55;text-align:center}
.mhint b{color:var(--metal-hi)}

/* pay table */
.paytable{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:#000}
.prow{
  display:flex;align-items:center;gap:10px;padding:7px 11px;
  background:linear-gradient(180deg,#1A2024,#12181B);
}
.prow .pico{flex:0 0 38px;display:grid;place-items:center}
.prow .pico .rsym{width:34px;height:34px}
.prow .pname{font-size:12.5px;color:#D6DBE1}
.prow .pmult{margin-left:auto;font-family:var(--data);font-size:13px;font-weight:700;color:var(--metal-hi)}
.prow.pair{background:linear-gradient(180deg,#151A1E,#10151800)}
.prow.jack{
  grid-column:1 / -1;
  background:linear-gradient(90deg,rgba(196,30,42,.18),rgba(0,0,0,.25));
}
.prow.jack .pname{color:var(--crimson-hi);font-weight:600}
.prow.jack .pmult{color:var(--crimson-hi)}

/* ---- the wheel ---- */
.wheelwrap{padding:13px 16px;display:flex;flex-direction:column;align-items:center;gap:11px}
.lastpocket{
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--metal-lo);background:#0D1114;
  font-family:var(--display);font-weight:900;font-size:26px;color:#EDF0F3;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.5);
}
.lastpocket.red{background:linear-gradient(180deg,#8A0F18,#4A080E);border-color:var(--crimson)}
.lastpocket.black{background:linear-gradient(180deg,#20262B,#0B0E10)}
.lastpocket.green{background:linear-gradient(180deg,#2C5E38,#12301C);border-color:#4E8A5C}
.layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,1fr));gap:3px;width:100%;max-width:560px}
.pocket{
  display:grid;place-items:center;height:26px;
  font-family:var(--data);font-size:12px;color:#D6DBE1;
  border:1px solid #000;
}
.pocket.red{background:linear-gradient(180deg,#7A0F17,#4A080E)}
.pocket.black{background:linear-gradient(180deg,#1C2226,#0A0D0F)}
.pocket.green{background:linear-gradient(180deg,#2C5E38,#12301C)}
.pocket.hit{box-shadow:0 0 0 2px var(--metal-hi), 0 0 14px rgba(233,235,238,.5);color:#fff}

/* ---- high-low ---- */
.hlstart{padding:18px 16px;text-align:center}
.hlstart .mbar{justify-content:center;border-top:0}
.hltable{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:16px;align-items:center}
.hlside{text-align:center}
.hllabel{
  display:block;margin-bottom:10px;
  font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--faint);
}
.card{
  width:82px;height:115px;margin:0 auto;display:grid;place-items:center;
  border-radius:6px;border:1px solid var(--metal-lo);
  background:linear-gradient(180deg,#F2F4F6,#C9CED4);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}
.card .crank{
  font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.04em;color:#14181C;
}
.card.back{
  background:
    repeating-linear-gradient(45deg,#3A1116 0 7px,#26090D 7px 14px);
  border-color:var(--blood-2);
}
.card.back .cpip{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(232,67,78,.6);background:rgba(196,30,42,.18);
}
.hlmid{text-align:center;min-width:150px}
.hlstreak{
  display:block;font-family:var(--display);font-weight:600;font-size:9.5px;
  letter-spacing:.22em;color:var(--faint);
}
.hlpot{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:900;font-size:27px;line-height:1;color:var(--metal-hi);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.hlstake{display:block;margin-top:4px;font-family:var(--data);font-size:11px;color:var(--faint)}

.hlcalls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.callbtn{
  width:100%;padding:10px 8px;text-align:center;
  background:linear-gradient(180deg,#222A2E,#141A1D);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.callbtn:hover:not([disabled]){border-color:var(--metal);transform:translateY(-1px)}
.callbtn[disabled]{opacity:.35;cursor:not-allowed}
.callbtn .carrow{display:block;font-size:20px;line-height:1;color:var(--metal)}
.callbtn .clabel{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;color:#EDF0F3;
}
.callbtn .cmult{display:block;margin-top:4px;font-family:var(--data);font-size:12px;color:var(--dim)}
.callbtn.up{border-color:#2C4A32}
.callbtn.up .carrow,.callbtn.up .cmult{color:var(--good)}
.callbtn.down{border-color:#4A2128}
.callbtn.down .carrow,.callbtn.down .cmult{color:var(--crimson-hi)}
.callbtn.cash{background:linear-gradient(180deg,#2A2010,#16120A);border-color:var(--metal-lo)}
.callbtn.cash .carrow,.callbtn.cash .cmult{color:var(--metal-hi)}

.hlodds{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:#000}
.orow{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:7px 12px;background:#141A1D;font-size:12px;
}
.orow.on{background:linear-gradient(90deg,rgba(196,30,42,.2),#141A1D)}
.orow .ocard{color:#D6DBE1}
.orow .oup{font-family:var(--data);font-size:11px;color:var(--good)}
.orow .odown{font-family:var(--data);font-size:11px;color:var(--crimson-hi)}

/* ---- the draws ---- */
.draws{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.draw{
  padding:12px;text-align:center;
  background:linear-gradient(180deg,#1A2124,#0F1417);
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.draw .dname{
  display:block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.14em;color:#EDF0F3;
}
.draw .dblurb{display:block;margin-top:4px;font-size:12px;color:var(--faint);line-height:1.45}
.draw .dpot{
  margin:12px 0 4px;
  font-family:var(--display);font-weight:900;font-size:28px;line-height:1;color:var(--metal-hi);
}
.dring{position:relative;width:112px;height:112px;margin:6px auto 3px}
.dring svg{width:100%;height:100%}
.dring .dprog{stroke:var(--crimson)}
.draw.weekly .dring .dprog{stroke:#4C82AC}
.draw.grand  .dring .dprog{stroke:var(--metal-hi)}
.dtime{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dtime small{
  display:block;font-family:var(--display);font-weight:600;font-size:8.5px;
  letter-spacing:.22em;color:var(--faint);
}
.dtime b{font-family:var(--data);font-size:13px;color:#EDF0F3;font-variant-numeric:tabular-nums}
.dfoot{
  display:flex;justify-content:space-between;gap:8px;
  padding-top:10px;margin-top:6px;border-top:1px solid var(--line-soft);
  font-family:var(--data);font-size:11px;color:var(--faint);
}
.dbuy{display:flex;gap:8px;margin-top:10px}
.dbuy input{
  flex:1;min-width:0;padding:8px 10px;
  font-family:var(--data);font-size:13px;color:#DCE1E6;text-align:center;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);
  border:1px solid var(--line);border-radius:2px;
}

@media (max-width:820px){
  .parlourtop{grid-template-columns:minmax(0,1fr)}
  .hltable{grid-template-columns:minmax(0,1fr)}
  .hlcalls{grid-template-columns:minmax(0,1fr)}
  .mreel{flex:0 0 76px;height:88px}
  .rsym{width:44px;height:44px}
}

/* ---- messages ---- */
.field textarea{
  width:100%;padding:10px 11px;font-family:var(--body);font-size:14px;line-height:1.5;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);resize:vertical;min-height:120px;
}
.field textarea:focus{
  border-color:var(--blood-2);outline:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7), 0 0 0 2px rgba(196,30,42,.18);
}
.msgrow{text-decoration:none}
.msgrow .fig b{display:block;color:var(--metal-hi)}
.msgrow.unread{background:rgba(196,30,42,.055);box-shadow:inset 3px 0 0 var(--crimson)}
.msgrow.unread .nm{color:#EDF0F3}
.msgmeta{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--faint)}
.msgbody{font-size:14px;line-height:1.65;color:#D6DBE1;max-width:68ch;word-break:break-word}

/* ---- crew room ---- */
.chatlog{
  max-height:340px;overflow-y:auto;padding:12px 13px;
  display:flex;flex-direction:column;gap:7px;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent);
}
.chatempty{margin:0;color:var(--faint);font-style:italic;font-size:12.5px}
.chatline{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:baseline;
  font-size:13px;line-height:1.45;
}
.chatline .cwho{
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  color:var(--metal);white-space:nowrap;
}
.chatline.mine .cwho{color:var(--crimson-hi)}
.chatline .cbody{color:#D6DBE1;word-break:break-word}
.chatline .cwhen{font-family:var(--data);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.chatform{display:flex;gap:8px;padding:12px 13px;border-top:1px solid var(--line-soft)}
.chatform input[type=text]{
  flex:1;min-width:0;padding:8px 11px;font-family:var(--body);font-size:14px;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.chatform input[type=text]:focus{
  border-color:var(--blood-2);outline:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7), 0 0 0 2px rgba(196,30,42,.18);
}

/* ---- travel ---- */
.landing{
  margin-left:auto;padding:5px 12px;
  border:1px solid var(--metal-lo);background:rgba(0,0,0,.32);
}
.landing .cd{
  font-family:var(--data);font-size:14px;font-weight:700;
  color:var(--metal-hi);font-variant-numeric:tabular-nums;
}

/* ---- work ---- */
.workbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wnote{flex:1;min-width:220px;font-size:12px;color:var(--faint);line-height:1.5}
.wnote b{color:var(--good)}
.effbar{
  position:relative;height:14px;margin-top:6px;max-width:280px;
  background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.effbar i{display:block;height:100%;background:linear-gradient(90deg,#6E0D14,var(--crimson))}
.effbar b{
  position:absolute;top:0;right:6px;line-height:14px;
  font-family:var(--data);font-size:9.5px;font-weight:700;color:#EDF0F3;text-shadow:0 1px 2px #000;
}

/* ---- the chain ---- */
.chain{padding:4px 14px 0}
.chainbox{
  display:block;padding:10px 12px;text-align:center;
  background:linear-gradient(180deg,rgba(110,13,20,.55),rgba(0,0,0,.35));
  border:1px solid var(--blood-2);box-shadow:inset 0 1px 0 rgba(255,160,160,.10);
}
.chainbox.dead{background:linear-gradient(180deg,#161B20,rgba(0,0,0,.35));border-color:var(--line)}
.chainbox .n{
  display:block;font-family:var(--display);font-weight:900;font-size:34px;line-height:1;
  color:var(--crimson-hi);text-shadow:0 2px 0 #000,0 0 18px rgba(196,30,42,.4);
}
.chainbox.dead .n{color:var(--faint);text-shadow:0 2px 0 #000}
.chainbox .l{display:block;font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.24em;color:var(--dim);margin-top:2px}
.chainbox .exp{display:block;margin-top:7px;font-family:var(--data);font-size:11px;color:#E8A08E;font-variant-numeric:tabular-nums}
.chainbox.dead .exp{color:var(--faint)}
.chainbox .nextb{display:block;margin-top:6px;font-size:11.5px;color:var(--dim)}
.chainbox .nextb b{color:var(--crimson-hi);font-weight:700}
.chainbar{display:block;height:6px;margin-top:7px;background:#06080A;border:1px solid #000}
.chainbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blood-2),var(--crimson-hi));transition:width 1s linear}

.chainpanel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:16px;align-items:center}
.chainbig{
  text-align:center;padding:16px 22px;min-width:170px;
  background:linear-gradient(180deg,rgba(110,13,20,.5),rgba(0,0,0,.35));
  border:1px solid var(--blood-2);
}
.chainbig.dead{background:linear-gradient(180deg,#161B20,rgba(0,0,0,.3));border-color:var(--line)}
.chainbig .cn{
  display:block;font-family:var(--display);font-weight:900;font-size:58px;line-height:1;
  color:var(--crimson-hi);text-shadow:0 3px 0 #000,0 0 26px rgba(196,30,42,.45);
}
.chainbig.dead .cn{color:var(--faint);text-shadow:0 3px 0 #000}
.chainbig .cl{display:block;font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--dim);margin-top:4px}
.chainbig .cx{display:block;margin-top:8px;font-family:var(--data);font-size:13px;font-weight:700;color:var(--metal-hi)}
.ctimer{margin:0 0 12px;font-size:13px;color:var(--dim)}
.ctimer b{color:var(--crimson-hi);font-family:var(--data);font-weight:700}
.ctimer.dead{color:var(--faint);font-style:italic}
.tiers{display:flex;gap:6px;flex-wrap:wrap}
.tier{
  flex:1;min-width:64px;text-align:center;padding:7px 4px;
  background:#0E1216;border:1px solid var(--line);
}
.tier .ta{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--faint)}
.tier .tm{display:block;font-family:var(--data);font-size:10px;color:var(--faint);margin-top:1px}
.tier.on{background:linear-gradient(180deg,rgba(110,13,20,.55),#0E1216);border-color:var(--blood-2)}
.tier.on .ta{color:var(--crimson-hi)}
.tier.on .tm{color:var(--metal)}
.tier.next{border-color:var(--metal-lo);box-shadow:0 0 0 1px rgba(168,173,180,.18)}
.tier.next .ta{color:var(--metal-hi)}
.chint{margin:10px 0 0;font-size:12.5px;color:var(--dim)}
.chint b{color:var(--metal-hi)}
.cnote{margin:10px 0 0;font-size:12.5px;color:var(--faint);line-height:1.55}

/* ---- war scoreboard ---- */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding:18px 16px;align-items:center}
.side{text-align:center}
.side .stag{display:block;font-family:var(--data);font-size:11px;font-weight:700;color:var(--crimson-hi)}
.side .sname{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.08em;color:#DFE4E9;margin-top:2px}
.side .sscore{display:block;font-family:var(--display);font-weight:900;font-size:38px;line-height:1.1;color:var(--metal-hi);margin-top:6px}
.side.them .sscore{color:var(--dim)}
.versus{min-width:180px;text-align:center}
.versus .lead{display:block;font-family:var(--data);font-size:20px;font-weight:700;color:var(--dim)}
.versus .lead.up{color:var(--good)}
.versus .lead.down{color:var(--bad)}
.leadbar{height:9px;margin:8px 0 6px;background:#06080A;border:1px solid #000;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.leadbar i{display:block;height:100%}
.leadbar i.up{background:linear-gradient(90deg,#2F6B28,var(--good))}
.leadbar i.down{background:linear-gradient(90deg,#6E0D14,var(--crimson))}
.leadhint{font-size:11.5px;color:var(--faint)}

@media (max-width:900px){
  .chainpanel{grid-template-columns:minmax(0,1fr)}
  .scoreboard{grid-template-columns:minmax(0,1fr)}
}

/* ---- crews ---- */
.crewrank{
  flex:0 0 46px;text-align:center;
  font-family:var(--display);font-weight:900;font-size:19px;
  color:var(--metal-lo);text-shadow:0 1px 0 #000;
}
.choice:first-child .crewrank{color:var(--crimson)}
.crewtag{
  font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--crimson-hi);padding:1px 5px;margin-right:4px;
  border:1px solid var(--blood-2);background:rgba(196,30,42,.10);
}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---- category tabs ---- */
.tabs{display:flex;gap:2px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{
  padding:7px 14px;color:var(--dim);
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;
  background:linear-gradient(180deg,#1A2024,#12171A);
  border:1px solid var(--line);border-bottom:0;margin-bottom:-1px;
}
.tab:hover{color:var(--metal-hi);border-color:var(--metal-lo)}
.tab.on{
  color:var(--crimson-hi);background:linear-gradient(180deg,#2A1418,#14181C);
  border-color:var(--blood-2);box-shadow:inset 0 2px 0 var(--crimson);
}

/* two fields side by side inside a form */
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field select,.field input[type=number]{
  width:100%;padding:9px 11px;font-family:var(--body);font-size:14px;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.field select:focus,.field input:focus{
  border-color:var(--blood-2);outline:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7), 0 0 0 2px rgba(196,30,42,.18);
}
.hitform input[type=number]{
  font-family:var(--data);font-size:12.5px;color:#D6DBE1;padding:5px 8px;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
}

/* ---- item icons --------------------------------------------------------
   Real artwork drops into /assets/items and slots straight in; the drawn
   fallbacks inherit currentColor so both read as one set. */
.iicon{width:44px;height:44px;object-fit:contain;color:var(--metal);display:block}
.ithumb{
  flex:0 0 56px;display:grid;place-items:center;width:56px;height:56px;
  background:linear-gradient(180deg,#1A1F24,#101418);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.choice.off .ithumb{opacity:.5}
.wornbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wornstat{font-family:var(--data);font-size:12.5px;color:var(--dim)}
.wornbar .btn{margin-left:auto}

/* ---- paper doll --------------------------------------------------------
   Weapons down the left, protection down the right, the figure between them.
   Node positions come from the same percentage table the fight report uses,
   so coverage dots and damage markers always agree with each other. */
.doll{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding:16px;align-items:start}
.dcol{display:flex;flex-direction:column;gap:8px}
.dslot{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:linear-gradient(180deg,#1A2024,#12171A);
  border:1px solid var(--line);
}
.dslot.filled{border-color:var(--metal-lo);box-shadow:inset 0 0 0 1px rgba(196,30,42,.10)}
.dslot.empty{background:repeating-linear-gradient(135deg,#141A1C,#141A1C 7px,#171E20 7px,#171E20 14px)}
.dslot.right{flex-direction:row-reverse;text-align:right}
.dslot .dico{flex:0 0 40px;display:grid;place-items:center}
.dslot .dico .iicon{width:36px;height:36px}
.dslot.empty .dico{opacity:.32}
.dslot .dtext{display:flex;flex-direction:column;min-width:0;flex:1}
.dslot .dlbl{font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.2em;color:var(--faint)}
.dslot .dnm{font-size:12.5px;color:#D6DBE1;line-height:1.25}
.dslot .dnm.none{color:var(--faint);font-style:italic}
.dslot .dst{font-family:var(--data);font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.dslot form{flex:0 0 auto}
.dslot .slotbtn{width:auto;padding:4px 8px}

.dfigure,.figure{position:relative;width:300px;max-width:100%;margin:0 auto}
.bodyart{display:block;width:100%;height:auto}
svg.bodyart{color:var(--metal-lo);opacity:.85}

/* The equipment figure is left clean. Coverage is spelled out in the table
   below it, which says the same thing without obscuring the artwork. */

/* damage markers on the fight report figure */
.anatomy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:14px;align-items:start}
.mark{
  position:absolute;display:grid;place-items:center;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  transform:scale(var(--s,1));
}
.mark i{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(226,118,46,.85) 0%,rgba(196,30,42,.55) 55%,transparent 72%);
}
.mark b{
  position:relative;font-family:var(--data);font-size:11px;font-weight:700;
  color:#FFF1EC;text-shadow:0 1px 2px #000;
}
.mark.worst i{
  background:radial-gradient(circle,rgba(255,150,90,.95) 0%,rgba(196,30,42,.75) 55%,transparent 74%);
  box-shadow:0 0 18px rgba(226,118,46,.55);
}

/* per-region damage breakdown */
.breakdown{display:flex;flex-direction:column;gap:7px}
.brow{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;gap:10px;align-items:center;font-size:12.5px}
.brow .bl{color:var(--dim);white-space:nowrap}
.brow .bm{font-family:var(--data);font-size:10px;color:var(--faint);margin-left:6px}
.brow .bb{height:6px;background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.brow .bb i{display:block;height:100%;background:linear-gradient(90deg,var(--blood-2),var(--crimson))}
.brow .bb i.hot{background:linear-gradient(90deg,#8A3617,var(--heat))}
.brow .bv{font-family:var(--data);font-size:12px;color:#D6DBE1;font-variant-numeric:tabular-nums}
.breakdown .none{margin:0;color:var(--faint);font-style:italic;font-size:12.5px}

/* blow-by-blow log */
.blows{display:flex;flex-direction:column}
.blow{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:6px 13px;font-size:12.5px;color:var(--dim);border-top:1px solid var(--line-soft);
}
.blow:first-child{border-top:0}
.blow .rn{font-family:var(--data);font-size:10px;color:var(--faint);text-align:right}
.blow .hp{font-family:var(--data);font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.blow.mine{background:rgba(111,180,95,.045)}
.blow.theirs{background:rgba(196,30,42,.05)}
.blow.miss{opacity:.5}
.blow b{color:#D6DBE1;font-weight:600}
.blow b.d{color:var(--heat);font-family:var(--data);font-size:12px}
.rows tr.head th,.rows tr.head td{
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.2em;
  color:var(--metal);text-transform:uppercase;
}

@media (max-width:1000px){
  .doll{grid-template-columns:minmax(0,1fr)}
  .dfigure{order:-1}
  .dslot.right{flex-direction:row;text-align:left}
  .anatomy{grid-template-columns:minmax(0,1fr)}
}

/* ---- the nine-slot loadout grid ---- */
.loadout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#000}
.slot{
  position:relative;padding:9px;min-height:104px;
  display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(180deg,#1C2326,#12181A);
}
.slot .lbl{font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.2em;color:var(--faint)}
.slot .nm{font-size:12.5px;color:#D6DBE1;line-height:1.25}
.slot .st{
  display:flex;gap:9px;font-family:var(--data);font-size:10px;
  color:var(--dim);font-variant-numeric:tabular-nums;
}
.slot .st span::before{content:attr(data-k);color:var(--faint);margin-right:3px}
.slot.filled{box-shadow:inset 0 0 0 1px rgba(196,30,42,.16)}
.slot.empty{background:repeating-linear-gradient(135deg,#141A1C,#141A1C 7px,#171E20 7px,#171E20 14px)}
.slot.empty .nm{color:var(--faint);font-style:italic}
.slot .slotform{margin-top:auto}
.slot .slotbtn{
  width:100%;padding:4px 0;
  font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.16em;
  color:var(--faint);border:1px solid var(--line-soft);background:rgba(0,0,0,.32);
}
.slot .slotbtn:hover{color:var(--crimson-hi);border-color:var(--blood-2)}

/* stacked actions on an inventory row */
.itemacts{display:flex;flex-direction:column;gap:6px;min-width:98px}
.itemacts .btn{justify-content:center;width:100%}

/* ---- honours ---- */
.honors{display:flex;gap:13px;padding:14px 13px;flex-wrap:wrap}
.honor{width:58px;text-align:center}
.honor svg{width:45px;height:58px;margin:0 auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.honor .cap{
  margin-top:4px;font-family:var(--display);font-weight:600;font-size:8.5px;
  letter-spacing:.12em;color:var(--faint);line-height:1.25;
}
.honor.locked svg{filter:grayscale(1) brightness(.4)}

.combat{display:grid;grid-template-columns:1fr 158px}
.combat .radar{padding:8px;border-left:1px solid var(--line-soft);display:grid;place-items:center;background:radial-gradient(circle at 50% 45%, rgba(168,173,180,.07), transparent 65%)}

/* --------------------------------------------------------- gym / rackets */
.choices{display:flex;flex-direction:column}
.choice{
  display:flex;align-items:center;gap:11px;padding:8px 11px;
  border-top:1px solid var(--line-soft);
}
.choice:first-child{border-top:0}
.choice:hover{background:rgba(168,173,180,.045)}
.choice .body{flex:1;min-width:0}
.choice .nm{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:#EDF0F3}
.choice .ds{font-size:12px;color:var(--dim);margin-top:2px}
.choice .fig{
  text-align:right;font-family:var(--data);font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim);
  white-space:nowrap;
}
.choice .fig b{display:block;color:var(--metal-hi);font-size:13px;font-weight:700}
.choice.off{opacity:.45}
.chip{
  display:inline-block;padding:1px 7px;font-family:var(--data);font-size:10px;
  border:1px solid var(--line-soft);background:rgba(0,0,0,.34);color:var(--faint);
}
.chip.e{color:#8CC276;border-color:#2C4326}
.chip.n{color:#D4574A;border-color:#4B211C}
.chip.h{color:#E8A07A;border-color:#6B3418}
.chip.good{color:var(--good);border-color:#2C4326}

.trainbar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.trainbar label{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.18em;color:var(--faint)}
.trainbar select,.trainbar input[type=number]{
  font-family:var(--data);font-size:12.5px;color:#D6DBE1;padding:6px 9px;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.preview{
  margin-left:auto;font-family:var(--data);font-size:12px;color:var(--dim);
  padding:5px 10px;border:1px dashed var(--metal-lo);background:var(--metal-wash);
}
.preview b{color:var(--metal-hi);font-weight:700}

/* ------------------------------------------------------------ right rail */
.widget > header{display:flex;align-items:center;gap:8px;padding:7px 12px 4px;border-top:1px solid var(--line-soft)}
.widget:first-child > header{border-top:0}
.widget > header .ico{color:var(--metal);opacity:.8}
.widget > header h3{margin:0;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.26em;color:var(--metal);opacity:.85}
.widget > header .more{margin-left:auto;font-family:var(--data);font-size:10px;color:var(--faint)}
.widget .wbody{padding:0 0 8px}

.qa a{display:flex;align-items:center;gap:9px;padding:5px 12px;font-size:12.5px;color:var(--dim);border-left:3px solid transparent}
.qa a .ico{opacity:.6}
.qa a:hover{background:linear-gradient(90deg,rgba(168,173,180,.10),transparent);color:#DCE1E6;border-left-color:var(--metal-lo)}
.qa a:hover .ico{opacity:1}
.qa .cost{margin-left:auto;font-family:var(--data);font-size:10px;padding:1px 6px;border:1px solid var(--line-soft);background:rgba(0,0,0,.34);color:var(--faint)}
.qa .cost.e{color:#8CC276;border-color:#2C4326}
.qa .cost.n{color:#D4574A;border-color:#4B211C}

.timers{display:flex;flex-direction:column;gap:6px;padding:2px 12px 0}
.tm .r{display:flex;align-items:center;gap:8px}
.tm .lb{font-size:12px;color:var(--dim)}
.tm .cd{margin-left:auto;font-family:var(--data);font-size:11px;color:#D6DBE1;font-variant-numeric:tabular-nums}
.tm .cd.ready{color:var(--good)}
.tm .bar{height:5px;margin-top:4px;background:#050708;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.tm .bar i{display:block;height:100%;background:linear-gradient(180deg,#4E6A7C,#2C3F4C)}
.tm .bar i.done{background:linear-gradient(180deg,#8CC276,#3F6733)}

.feed{display:flex;flex-direction:column}
.ev{display:flex;gap:8px;padding:5px 12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--dim);line-height:1.35}
.ev:first-child{border-top:0}
.ev .dot{width:7px;height:7px;flex:0 0 7px;margin-top:5px;border-radius:50%;background:var(--faint)}
.ev.win .dot{background:var(--good);box-shadow:0 0 6px rgba(120,180,95,.7)}
.ev.loss .dot{background:var(--nerve);box-shadow:0 0 6px rgba(185,66,54,.7)}
.ev.gold .dot{background:var(--metal);box-shadow:0 0 6px rgba(168,173,180,.7)}
.ev b{color:#D6DBE1;font-weight:600}
.ev .t{display:block;font-family:var(--data);font-size:10px;color:var(--faint);margin-top:1px}
.ev.empty{color:var(--faint);font-style:italic}

/* ------------------------------------------------------------ auth pages */
.gate{min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.gatecard{width:100%;max-width:390px}
.gatecard.roomy{max-width:560px}
.gatecard .crest{
  display:block;width:132px;height:132px;object-fit:contain;margin:0 auto 10px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(196,30,42,.28));
}
.gatecard h1{
  margin:0;text-align:center;font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.22em;
  color:transparent;background:linear-gradient(180deg,var(--metal-hi) 8%,var(--metal) 50%,#6E747C 100%);
  -webkit-background-clip:text;background-clip:text;
}
.gatecard .tag{text-align:center;font-family:var(--display);font-size:10.5px;letter-spacing:.28em;color:var(--faint);margin:4px 0 20px}
.gateform{padding:18px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--faint);margin-bottom:5px}
.field input{
  width:100%;padding:9px 11px;font-family:var(--body);font-size:14px;color:#DCE1E6;
  background:linear-gradient(180deg,#0A0D0E,#131A1C);border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.field input:focus{border-color:var(--metal-lo);outline:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.7), 0 0 0 2px rgba(168,173,180,.18)}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:4px}
.gateform .btn{width:100%;justify-content:center;margin-top:4px}
.gatefoot{text-align:center;font-size:13px;color:var(--faint);margin-top:16px}
.gatefoot a{color:var(--metal)}
.err{
  padding:9px 12px;margin-bottom:14px;font-size:13px;color:#F0B6AB;
  background:rgba(185,66,54,.13);border:1px solid #6B2A22;border-left:3px solid var(--nerve);
}

.stamp-note{
  margin-top:28px;padding:13px 15px;border:1px solid var(--line-soft);border-left:3px solid var(--metal-lo);
  background:rgba(0,0,0,.24);font-size:12.5px;color:var(--faint);line-height:1.6;
}
.stamp-note b{display:block;color:var(--metal);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.2em;margin-bottom:3px}

@media (max-width:1180px){
  .shell{grid-template-columns:206px minmax(0,1fr)}
  .side{grid-column:1 / -1;border-left:0;border-top:1px solid #000;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 1px;background:#000}
  .side > .widget{background:linear-gradient(180deg,#161C1F,#0E1214)}
  .widget > header{border-top:0}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{border-right:0;border-bottom:1px solid #000}
  .mastnav{display:none}
  .main{padding:12px 12px 30px}
  .combat{grid-template-columns:1fr}
  .combat .radar{border-left:0;border-top:1px solid var(--line-soft)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Every animation here is decoration over a result the server already
   decided. The reels land on symbols that were chosen before the page was
   sent; the wheel stops on a pocket that is already in the database. Nothing
   below can change an outcome, and a player with animations disabled sees
   the same numbers - which is the only arrangement that is honest in a game
   with money in it.
   ========================================================================== */

/* ---- three reels ---- */
.mreels{--cell:100px}
.mreel{display:block;overflow:hidden;position:relative}
.mreel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent 26%,transparent 74%,rgba(0,0,0,.75));
}
.rstrip{
  display:flex;flex-direction:column;
  transform:translateY(calc(-1 * var(--cell) * var(--n)));
}
.rcell{flex:0 0 var(--cell);height:var(--cell);display:grid;place-items:center}
.spin .rstrip{
  animation:reelspin var(--dur,1.2s) cubic-bezier(.16,.62,.14,1) both;
  will-change:transform;
}
.spin .mreel:nth-child(2) .rstrip{--dur:1.55s}
.spin .mreel:nth-child(3) .rstrip{--dur:1.95s}
@keyframes reelspin{
  from{transform:translateY(0)}
  to  {transform:translateY(calc(-1 * var(--cell) * var(--n)))}
}
/* The flourish waits for the last reel to stop, or it celebrates a result
   the player cannot see yet. */
.machine.won .mreels{animation:paid .9s ease-out 2s 2}
@keyframes paid{
  0%,100%{filter:none}
  50%    {filter:drop-shadow(0 0 14px rgba(233,195,120,.75)) brightness(1.14)}
}
.machine.won .mpot{animation:potflash 1s ease-out 2s 2}
@keyframes potflash{0%,100%{color:var(--crimson-hi)}50%{color:#FFE9A8}}

/* ---- the wheel ---- */
.roulette{position:relative;width:260px;height:260px;margin:0 auto}
/* The pointer is also an svg inside .roulette, and a bare descendant rule
   here outranks .rpointer's own width - which stretches a 22px arrow across
   the whole wheel. Excluding it keeps the sizing where it is written. */
.roulette > svg:not(.rpointer){width:100%;height:100%;display:block}
/* The landed rotation is the element's resting state rather than something
   the animation leaves behind. It has to be, because the reduced-motion rule
   at the foot of this file switches every animation off - and a wheel frozen
   at zero would sit there showing somebody else's number under the pointer.
   The spin starts from zero and ends exactly here, so the two agree. */
.rwheel{transform-origin:50% 50%;transform:rotate(calc(-1 * var(--idx) * 9.72973deg))}
.spin .rwheel{animation:wheelspin 4.4s cubic-bezier(.15,.68,.1,1) both;will-change:transform}
@keyframes wheelspin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(calc(-1800deg - var(--idx) * 9.72973deg))}
}
.rpointer{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:22px;height:26px;color:var(--metal-hi);filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.rcall{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;
}
.rcall b{
  font-family:var(--display);font-weight:900;font-size:26px;line-height:1;color:#EDF0F3;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
}
.rcall small{display:block;font-family:var(--display);font-size:8.5px;letter-spacing:.24em;color:var(--faint);margin-bottom:3px}
.spin .rcall{animation:callin .5s ease-out 4.3s both}
@keyframes callin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ---- high-low ---- */
.card{perspective:700px}
.spin .card.dealt{animation:dealt .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes dealt{
  from{opacity:0;transform:translateY(-26px) rotate(-9deg) scale(.9)}
  to  {opacity:1;transform:none}
}
.spin .card.flip{animation:flip .7s cubic-bezier(.4,0,.2,1) both}
@keyframes flip{
  0%  {transform:rotateY(90deg) scale(.94)}
  60% {transform:rotateY(-8deg) scale(1.03)}
  100%{transform:none}
}
.lasthand{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px}
.lasthand .card{width:58px;height:82px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.lasthand .card .crank{font-size:17px}
.lasthand .vs{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.24em;color:var(--faint)}

/* ---- schema diagnostics ---- */
.gaplist{display:flex;flex-wrap:wrap;gap:6px}
.gap{
  font-family:var(--data);font-size:11px;color:#F0B6AB;
  padding:2px 8px;border:1px solid #6B2A22;background:rgba(185,66,54,.12);
}
.gap.col{color:#E8A07A;border-color:#6B3418;background:rgba(218,100,48,.10)}
.gap b{font-family:var(--display);font-size:9px;letter-spacing:.18em;color:var(--faint);margin-right:5px}
.sqlfix{
  margin:0;padding:12px 14px;overflow-x:auto;
  font-family:var(--data);font-size:11.5px;line-height:1.6;color:#C8D6C0;
  background:#06090A;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  white-space:pre;
}

@media (max-width:820px){
  .mreels{--cell:88px}
  .roulette{width:210px;height:210px}
}

/* ==========================================================================
   Rackets - the crime board
   --------------------------------------------------------------------------
   A grid of photographs rather than a list of rows, because a crime board is
   something a player scans for the one they want rather than reads top to
   bottom. Each tile carries its own level, its own progress, and nothing else
   until you look closer.
   ========================================================================== */

.crimebar{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(0,0,0,.4);
}
.crimebar .cb{padding:8px 16px;border-right:1px solid var(--line-soft);min-width:92px}
.crimebar .k{display:block;font-family:var(--display);font-weight:600;font-size:8.5px;letter-spacing:.22em;color:var(--faint)}
.crimebar .v{
  display:block;margin-top:1px;
  font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;color:var(--metal-hi);
}
.crimebar .v.hot{color:var(--heat)}
.crimebar .v small{font-family:var(--data);font-size:11px;font-weight:400;color:var(--faint)}
.crimebar .cbnote{
  flex:1;min-width:240px;margin:0;padding:8px 16px;
  font-size:12px;line-height:1.5;color:var(--faint);
}

.crimes{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}

.crime{
  position:relative;display:flex;flex-direction:column;margin:0;
  background:linear-gradient(180deg,#1A2124,#101518);
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.crime:hover{border-color:var(--metal-lo)}
.crime:not(.cold):not(.locked):hover{
  border-color:var(--blood-2);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(196,30,42,.12), inset 0 1px 0 rgba(255,170,170,.09);
}
.crime.cold{opacity:.55}
.crime.locked{background:repeating-linear-gradient(135deg,#141A1C,#141A1C 7px,#171E20 7px,#171E20 14px)}

.cgo{
  display:flex;flex-direction:column;width:100%;text-align:left;padding:0;
}
.cgo[disabled]{cursor:not-allowed}

.cart{
  position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;background:#0A0D0E;
  border-bottom:1px solid #000;
}
.cart img,.cart .cartdrawn{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.34) contrast(1.06) brightness(.92);
  transition:filter .18s ease, transform .5s ease;
}
.crime:not(.cold):not(.locked):hover .cart img,
.crime:not(.cold):not(.locked):hover .cart .cartdrawn{filter:none;transform:scale(1.04)}
.cart::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));
}

.crime.locked .cart{display:grid;place-items:center;aspect-ratio:16 / 9}
.crime.locked .clock{width:26px;height:26px;color:var(--faint);fill:none}

/* The level pip, bottom-left, exactly where a player's eye already is. */
.clvl{
  position:absolute;left:5px;bottom:8px;z-index:2;
  min-width:19px;height:19px;padding:0 4px;
  display:grid;place-items:center;
  font-family:var(--data);font-size:11px;font-weight:700;color:#EDF0F3;
  background:linear-gradient(180deg,#2A3338,#12181A);border:1px solid var(--metal-lo);
  box-shadow:0 2px 5px rgba(0,0,0,.7);
}
.clvl.max{
  color:#FFE9A8;border-color:#8A6820;
  background:linear-gradient(180deg,#4A3A16,#221A0B);
}
.cnerve{
  position:absolute;right:5px;top:5px;z-index:2;
  min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;
  font-family:var(--data);font-size:10px;font-weight:700;color:#E8A79E;
  background:rgba(110,13,20,.82);border:1px solid #8A0F18;
}
.cprog{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:block;height:3px;background:rgba(0,0,0,.72);
}
.cprog i{display:block;height:100%;background:linear-gradient(90deg,#6E0D14,var(--crimson-hi))}
.clvl.max ~ .cprog i{background:linear-gradient(90deg,#8A6820,#EEC463)}

.cfoot{display:block;padding:7px 9px 8px}
.cname{
  display:block;font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.11em;color:#EDF0F3;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cmeta{display:flex;align-items:center;gap:8px;margin-top:3px;font-family:var(--data);font-size:10.5px}
.cmeta .crank{color:var(--faint)}
.cmeta .cchance{margin-left:auto;color:var(--metal)}
.crime.locked .cmeta{color:var(--faint)}

/* The numbers, kept out of the way until somebody wants them. */
.cdetail{
  max-height:0;overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height .22s ease, border-color .22s ease;
}
.crime:hover .cdetail,.crime:focus-within .cdetail{max-height:260px;border-top-color:var(--line-soft)}
.cdetail p{margin:0;padding:8px 9px 6px;font-size:11.5px;line-height:1.45;color:var(--dim)}
.cdetail dl{margin:0;padding:0 9px 9px;display:flex;flex-direction:column;gap:2px}
.cdetail dl > div{display:flex;align-items:baseline;gap:8px;font-size:11px}
.cdetail dt{font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.cdetail dd{margin:0 0 0 auto;font-family:var(--data);font-size:11px;color:#D6DBE1}
.cdetail dd.hot{color:var(--heat)}
.cdetail dd.good{color:var(--good)}

/* The ladder reference */
.rungs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:#000}
.rung{
  display:flex;align-items:center;gap:9px;padding:6px 12px;
  background:linear-gradient(180deg,#1A2024,#12181B);
}
.rung .rn{
  min-width:18px;height:18px;display:grid;place-items:center;
  font-family:var(--data);font-size:10px;font-weight:700;color:var(--faint);
  border:1px solid var(--line-soft);background:rgba(0,0,0,.35);
}
.rung .rt{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.13em;color:#D6DBE1}
.rung .rp{margin-left:auto;font-family:var(--data);font-size:11px;color:var(--good)}
.rung:last-child .rn{color:#FFE9A8;border-color:#8A6820}
.rung:last-child .rt{color:#F0D08A}

@media (max-width:700px){
  .crimes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .crimebar .cbnote{display:none}
}

/* ==========================================================================
   Forums, the Wire, the Codex
   ========================================================================== */

.boards{display:flex;flex-direction:column}
.board{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-top:1px solid var(--line-soft);text-decoration:none;
}
.board:first-child{border-top:0}
.board:hover{background:rgba(168,173,180,.045)}
.board.off{opacity:.5}
.board .bico{
  flex:0 0 32px;height:32px;display:grid;place-items:center;color:var(--metal);
  border:1px solid var(--line-soft);background:rgba(0,0,0,.3);
}
.board .bbody{flex:1;min-width:0}
.bname{display:block;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:#EDF0F3}
.bblurb{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.bcount{flex:0 0 92px;text-align:right;font-family:var(--data);font-size:11px;color:var(--faint)}
.bcount b{display:block;font-size:15px;font-weight:700;color:var(--metal-hi)}
.bposts{display:block;font-size:10px}
.blast{flex:0 0 180px;min-width:0;text-align:right}
.blast .bt{display:block;font-size:12px;color:#D6DBE1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blast .bw{display:block;font-family:var(--data);font-size:10px;color:var(--faint)}
.bnone{font-size:11.5px;color:var(--faint);font-style:italic}

.threads{display:flex;flex-direction:column}
.thr{
  display:flex;align-items:center;gap:11px;padding:8px 12px;
  border-top:1px solid var(--line-soft);text-decoration:none;
}
.thr:first-child{border-top:0}
.thr:hover{background:rgba(168,173,180,.045)}
.thr.pinned{background:linear-gradient(90deg,rgba(196,30,42,.07),transparent);box-shadow:inset 3px 0 0 var(--blood-2)}
.thr .tflags{flex:0 0 26px;display:flex;gap:4px;color:var(--metal-lo)}
.thr .tbody{flex:1;min-width:0}
.ttitle{display:block;font-size:13px;color:#EDF0F3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tby{display:block;margin-top:1px;font-family:var(--data);font-size:10px;color:var(--faint)}
.tnums{flex:0 0 86px;text-align:right;font-family:var(--data);font-size:10.5px;color:var(--faint)}
.tnums b{color:var(--metal-hi);font-size:13px}
.tviews{display:block;font-size:10px}
.tlast{flex:0 0 120px;text-align:right}

.posts{display:flex;flex-direction:column;gap:10px}
.post{
  display:grid;grid-template-columns:132px minmax(0,1fr);
  background:linear-gradient(180deg,#1A2124,#111618);
  border:1px solid var(--line);box-shadow:0 5px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.post.house{border-color:#6B3418;box-shadow:0 5px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,180,120,.12)}
.post .pwho{
  padding:11px;text-align:center;border-right:1px solid var(--line-soft);
  background:rgba(0,0,0,.22);
}
.post .pface{display:block;margin:0 auto 7px;width:44px;height:60px}
.post .pface img,.post .pface svg{display:block;width:44px;height:60px;object-fit:cover;border:1px solid var(--line)}
.post .pname{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.09em;color:#EDF0F3}
.post .prank{display:block;margin-top:3px;font-family:var(--data);font-size:10px;color:var(--faint)}
.post .pbodywrap{min-width:0;display:flex;flex-direction:column}
.post .pmeta{
  display:flex;align-items:center;gap:10px;padding:6px 12px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--data);font-size:10px;color:var(--faint);
}
.post .pno{color:var(--metal-lo)}
.post .pmod{margin-left:auto}
.post .pmod button{font-family:var(--data);font-size:10px;color:var(--bad);text-decoration:underline}
.post .pmod button:hover{color:#F0B6AB}
.ptext{padding:11px 13px;font-size:13.5px;line-height:1.6;color:#D6DBE1;word-break:break-word}
.ptext p{margin:0 0 9px}
.ptext p:last-child{margin-bottom:0}

.pager{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.pg{
  min-width:26px;padding:3px 8px;text-align:center;
  font-family:var(--data);font-size:11.5px;color:var(--dim);
  background:linear-gradient(180deg,#222A2D,#161B1E);border:1px solid var(--line);
}
.pg:hover{color:var(--metal-hi);border-color:var(--metal-lo)}
.pg.on{color:#FFF1F0;background:linear-gradient(180deg,var(--crimson-hi),#8A0F18);border-color:#4A080E}
.gapdots{padding:3px 2px;color:var(--faint)}

/* ---- the wire ---- */
.wirepost{padding:13px 14px;border-top:1px solid var(--line-soft)}
.wirepost:first-child{border-top:0}
.wirepost .wh{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wkind{
  font-family:var(--display);font-weight:700;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--metal-lo);color:var(--metal);background:var(--metal-wash);
}
.wirepost.update .wkind{color:#8CC276;border-color:#2C4326;background:rgba(111,180,95,.1)}
.wirepost.warning .wkind{color:#E8A07A;border-color:#6B3418;background:rgba(218,100,48,.1)}
.wwhen{margin-left:auto;font-family:var(--data);font-size:10.5px;color:var(--faint)}
.whead{
  margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.06em;color:#EDF0F3;
}
.wbodytext{font-size:13px;line-height:1.6;color:var(--dim);max-width:76ch}
.wbodytext p{margin:0 0 8px}
.wbodytext p:last-child{margin-bottom:0}
.wby{margin:7px 0 0;font-family:var(--data);font-size:10.5px;color:var(--faint)}

.wire .stamp:hover{color:var(--metal-hi);border-color:var(--metal)}
.wire .tick{color:#DDE2E7;border-bottom:1px dotted var(--metal-lo)}
.wire .tick:hover{color:#fff}
.wire .tick.warning{color:#F0A472}
.wire .tick.update{color:#9ED188}

/* ---- codex and statutes ---- */
.codex{display:grid;grid-template-columns:252px minmax(0,1fr);gap:12px;align-items:start}
.cdxnav{
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.cdxh{
  padding:7px 12px;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.26em;
  color:var(--metal);background:linear-gradient(180deg,#2A3338,#161C1F);border-bottom:1px solid #000;
}
.cdxlink{display:block;padding:8px 12px;border-top:1px solid var(--line-soft);border-left:3px solid transparent}
.cdxlink:first-of-type{border-top:0}
.cdxlink:hover{background:rgba(168,173,180,.05)}
.cdxlink.on{background:linear-gradient(90deg,rgba(196,30,42,.18),transparent);border-left-color:var(--crimson)}
.cdxlink .cl{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.09em;color:#DFE4E9}
.cdxlink .cs{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--faint)}
.cdxlink.on .cl{color:#EDF0F3}

.cdxbody{
  padding:16px 20px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.cdxbody h2{
  margin:0 0 4px;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.1em;
  color:#EDF0F3;text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.cdxsum{margin:0 0 14px;font-size:12.5px;color:var(--metal);font-style:italic}
.cdxtext{font-size:13.5px;line-height:1.72;color:#D6DBE1;max-width:74ch}
.cdxtext p{margin:0 0 12px}
.cdxfoot{
  margin:18px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--faint);
}
.cdxfoot code{font-family:var(--data);font-size:11px;color:var(--metal)}

.checks{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 14px;font-size:12.5px;color:var(--dim)}
.checks label{display:flex;align-items:center;gap:7px}
.fieldrow{display:flex;gap:12px;flex-wrap:wrap}
.fieldrow .field{flex:1;min-width:180px}

@media (max-width:900px){
  .codex{grid-template-columns:minmax(0,1fr)}
  .post{grid-template-columns:minmax(0,1fr)}
  .post .pwho{
    display:flex;align-items:center;gap:9px;text-align:left;
    border-right:0;border-bottom:1px solid var(--line-soft);
  }
  .post .pface{margin:0}
  .post .prank{margin-left:auto}
  .board .blast,.thr .tlast{display:none}
}

/* ---- two rules the markup asked for and never had ---- */

/* head.php marks the current masthead link; nothing was listening. */
.mastnav a.on{color:var(--metal-hi);text-shadow:0 0 12px rgba(168,173,180,.45)}

/* profile.php tags a bounty-eligible player as "marked", which was rendering
   in the same faint grey as every other note beside it. */
.rows .mod.dn{color:var(--heat)}

/* ==========================================================================
   Small screens
   --------------------------------------------------------------------------
   The three-column layout collapses to one below 900px, and the naive way to
   do that - stack the columns in source order - buries the page a player
   asked for under seventeen hundred pixels of rail. Measured on a 375px
   phone: the portrait, purse, four bars, heat gauge and twenty-three nav
   links came to 1390px before the content began.

   So the rail stops being a column here and becomes a set of loose blocks
   (display:contents), which lets each piece be placed independently: the
   bars and the purse stay above the fold because they are what a player
   checks constantly, the page content comes next, and the navigation,
   portrait and gauge follow underneath.

   display:contents removes the rail's own background with it, so the pieces
   that relied on it are given their own below.
   ========================================================================== */

@media (max-width:900px){

  /* ---- the masthead keeps its links ----
     They were hidden at this width, which was harmless while Codex, Statutes,
     Forums and The Wire were placeholders and is not now that they are real
     pages. A wrapped, scrollable row costs one line and keeps them reachable. */
  .masthead{height:auto;min-height:46px;flex-wrap:wrap;padding:6px 12px;gap:8px 14px}
  .wordmark .name{font-size:16px;letter-spacing:.16em}
  .mastnav{
    display:flex;order:3;width:100%;gap:16px;font-size:11.5px;
    overflow-x:auto;scrollbar-width:none;padding-bottom:1px;
  }
  .mastnav::-webkit-scrollbar{display:none}
  .mastbtn{width:32px;height:32px}

  .wire{padding:4px 12px;gap:8px;font-size:11px}
  .wire .clock{display:none}

  /* ---- the rail becomes loose blocks ---- */
  .rail{display:contents}
  /* align-items:start is inherited from the three-column grid, where it stops
     short columns stretching to the tallest. In a flex column it means the
     cross axis too, so every block is sized to its own content instead of the
     screen - and the one page whose content is wider than a phone (the wheel,
     at 610px) dragged the whole layout sideways. */
  .shell{display:flex;flex-direction:column;align-items:stretch}

  .vitals{order:1}
  .purse{order:2}
  .main{order:3}
  .nav{order:4}
  .portrait{order:5}
  .heatbox{order:6}
  .side{order:7}
  .skyline{order:8}

  /* Four bars side by side rather than stacked: the same information in
     half the height, which is the difference between seeing the page and
     scrolling to find it. */
  .vitals{
    display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
    padding:9px 12px;margin:0;
    background:linear-gradient(180deg,#161C1F,#121719);
    border-bottom:1px solid var(--line-soft);
  }
  .vital .sub{font-size:9.5px}

  .purse{
    margin-top:0;
    background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.18));
  }

  .nav{
    padding:10px 0 14px;
    background:linear-gradient(180deg,#161C1F 0%,#121719 55%,#0E1214 100%);
    border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(168,173,180,.09);
  }
  /* A 23px row is a fine mouse target and a poor thumb one. */
  .navgroup a{padding:9px 14px;font-size:13.5px}
  .navgroup > .gh{padding:0 14px}

  .portrait{
    padding:14px 12px;
    background:linear-gradient(180deg,#161C1F,#0E1214);
    border-top:1px solid #000;
  }
  .heatbox{margin:0;border-left:0;border-right:0}
  .skyline{display:none}
}

/* ---- the personnel file ----
   Three columns - portrait, details, actions - inside a 375px phone forced
   the page into horizontal scrolling, which is the one layout failure a
   player cannot work around. */
@media (max-width:820px){
  .dossier{grid-template-columns:minmax(0,1fr)}
  .dossier > * + *{border-left:0;border-top:1px solid var(--line-soft)}
  .mugshot{padding:14px}
  .avatar{width:170px;height:234px}
  .actions{padding:12px}
  .actions .btn{justify-content:center}
  .idplate .nm{font-size:19px}
  .bignums .v{font-size:19px}
}

/* ---- narrow phones ---- */
@media (max-width:420px){
  .crimes{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .cname{font-size:11px;letter-spacing:.08em}
  .cmeta{font-size:9.5px}
  .pagehead h1{font-size:17px}
  .plink span,.pagelinks{display:none}
  .rows th,.rows td{padding:5px 8px}
  .bcount{display:none}
  .machine .mname{font-size:15px}
  .mpot{font-size:17px}
}

/* ---- thumbs, not cursors ----
   Measured on a 375px screen: the primary button came out 27px tall, the
   pager 24px and the panel collapse 20px. Those are comfortable with a
   mouse and fiddly with a thumb, so the controls a player actually presses
   are given room here rather than everywhere - the desktop density this
   design is built around stays exactly as it is. */
@media (max-width:900px){
  .btn{padding:10px 16px;font-size:12px}
  .btn.quiet{padding:9px 15px}
  .pg{min-width:34px;padding:8px 11px;font-size:12.5px}
  .panel > header .fold{width:30px;height:30px;font-size:15px}
  .mastnav a{display:inline-block;padding:7px 0}
  .wire .stamp{padding:5px 9px}
  .tab{padding:9px 13px}
  .plink{padding:9px 12px}
  .qa a{padding:9px 14px;font-size:13px}
  .cdxlink{padding:11px 12px}
  .board,.thr{padding:12px}
  .field input,.field select,.field textarea{font-size:16px}
  .mbar input,.mbar select,.trainbar input,.trainbar select,.dbuy input{
    font-size:16px;padding:9px 11px;
  }
  /* 9.5px is a design choice at desk distance and a squint on a phone. */
  .cmeta{font-size:10.5px}
  .choice .ds,.bblurb{font-size:12.5px}
}

@media (max-width:560px){
  /* Four stat cells across a phone wrap 3 + 1, stranding the last one beside
     an empty half-row. Two and two reads as a deliberate block. */
  .crimebar .cb{flex:1 1 40%;border-bottom:1px solid var(--line-soft)}
  .crimebar .cb:nth-child(2n){border-right:0}
}

/* ==========================================================================
   Bounties, the Fixer, honours
   ========================================================================== */

/* ---- the three stat strips ----
   Bounties, the Fixer and the honours board all open the same way: a row of
   figures, then a line explaining the rule that makes them mean something.
   One set of rules, three pages, so they stay in step. */
.bountytop,.fixertop,.honourtop{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(0,0,0,.4);
}
.btop,.ftop,.htop{padding:8px 16px;border-right:1px solid var(--line-soft);min-width:104px}
.btop .k,.ftop .k,.htop .k{
  display:block;font-family:var(--display);font-weight:600;font-size:8.5px;
  letter-spacing:.22em;color:var(--faint);
}
.btop .v,.ftop .v,.htop .v{
  display:block;margin-top:1px;
  font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;color:var(--metal-hi);
}
.btop .v.money{color:var(--good)}
.btop .v.hot,.htop .v.hot{color:var(--heat)}
.htop .v small{font-family:var(--data);font-size:11px;font-weight:400;color:var(--faint)}
.btopnote,.ftopnote,.htopnote{
  flex:1;min-width:250px;margin:0;padding:8px 16px;
  font-size:12px;line-height:1.5;color:var(--faint);
}

/* ---- a head with a price on it ---- */
.choice.wanted{
  background:linear-gradient(90deg,rgba(196,30,42,.09),transparent 62%);
  box-shadow:inset 3px 0 0 var(--blood-2);
}
.chip.bounty{
  color:#F0B6AB;border-color:var(--blood-2);background:rgba(196,30,42,.14);
  font-weight:700;
}

/* ---- the Fixer's stock ---- */
.stocklist{display:flex;flex-direction:column}
.stock{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-top:1px solid var(--line-soft);
}
.stock:first-child{border-top:0}
.stock:hover{background:rgba(168,173,180,.045)}
.stock.off{opacity:.5}
.stock .sart{
  flex:0 0 34px;height:34px;display:grid;place-items:center;color:var(--metal);
  border:1px solid var(--line-soft);background:rgba(0,0,0,.3);
}
.stock .sart .hart{width:22px;height:22px}
.stock .body{flex:1;min-width:0}
.stock .nm{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:#EDF0F3}
.stock .ds{font-size:12px;color:var(--dim);margin-top:2px}
.seffect{
  display:block;margin-top:3px;font-family:var(--data);font-size:11px;color:var(--metal);
}
.stock .fig{
  text-align:right;font-family:var(--data);font-size:11px;color:var(--faint);white-space:nowrap;
}
.stock .fig b{display:block;font-family:var(--display);font-size:17px;font-weight:900;color:var(--metal-hi)}
.sblock{display:block;margin-top:4px;font-size:10.5px;color:var(--faint);text-align:center;max-width:150px}
.stock .hitform{min-width:118px}

/* ---- honours ----
   A badge is a shape, a tier mark and a name. Earned ones carry their colour;
   the rest sit in the same grey as everything else a player has not done yet,
   with a bar showing how close they are. */
.honours{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:#000}
.honour{
  display:flex;align-items:flex-start;gap:11px;padding:10px 12px;
  background:linear-gradient(180deg,#1A2024,#12181B);
}
.honour.got{background:linear-gradient(180deg,#20282B,#141B1E)}

.hbadge{
  position:relative;flex:0 0 42px;width:42px;height:42px;
  display:grid;place-items:center;color:var(--metal-lo);
  background:linear-gradient(180deg,#171E21,#0C1113);
  border:1px solid var(--line);
}
.honour.got .hbadge{
  color:#E8C37A;border-color:#8A6820;
  background:linear-gradient(180deg,#2E2614,#14100A);
  box-shadow:inset 0 1px 0 rgba(255,220,150,.16), 0 0 12px rgba(233,195,120,.12);
}
.hbadge .hart{width:26px;height:26px}
.htier{
  position:absolute;right:-4px;bottom:-4px;
  min-width:16px;height:14px;padding:0 3px;display:grid;place-items:center;
  font-family:var(--data);font-size:8.5px;font-weight:700;line-height:1;
  color:var(--faint);background:#0A0D0E;border:1px solid var(--line);
}
.honour.got .htier{color:#F0D08A;border-color:#8A6820}

.hbody{flex:1;min-width:0}
.hname{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;color:#DFE4E9}
.honour.got .hname{color:#F0D08A}
.hblurb{font-size:11.5px;line-height:1.4;color:var(--faint);margin-top:2px}
.hwhen{margin-top:5px;font-family:var(--data);font-size:10px;color:var(--good)}
.hbar{height:4px;margin-top:6px;background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.hbar i{display:block;height:100%;background:linear-gradient(90deg,var(--metal-lo),var(--metal))}
.hcount{margin-top:3px;font-family:var(--data);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}

/* The row of best badges on a profile. */
.honourstrip{display:flex;flex-wrap:wrap;gap:12px;padding:12px}
.hpin{width:76px;text-align:center}
.hpin .hbadge{
  margin:0 auto;color:#E8C37A;border-color:#8A6820;
  background:linear-gradient(180deg,#2E2614,#14100A);
  box-shadow:inset 0 1px 0 rgba(255,220,150,.16), 0 0 12px rgba(233,195,120,.12);
}
.hpin .htier{color:#F0D08A;border-color:#8A6820}
.hpname{
  display:block;margin-top:6px;font-family:var(--display);font-weight:600;font-size:9.5px;
  letter-spacing:.1em;color:var(--dim);line-height:1.25;
}

@media (max-width:560px){
  .btop,.ftop,.htop{flex:1 1 40%;border-bottom:1px solid var(--line-soft)}
  .honours{grid-template-columns:minmax(0,1fr)}

  /* The stock row wraps, and the button goes with the price rather than
     becoming a full-width crimson bar. Three of those stacked down a phone
     read as an advertisement rather than a shop. */
  .stock{flex-wrap:wrap;row-gap:8px}
  .stock .body{flex:1 1 calc(100% - 46px)}
  .stock .fig{order:3}
  .stock .hitform{
    order:4;min-width:0;margin-left:auto;
    flex-direction:row;align-items:center;justify-content:flex-end;gap:10px;
  }
  .stock .hitform .btn{width:auto}
  .sblock{margin-top:0;text-align:right;max-width:none}
}

/* ---- list rows on a phone ----
   A .choice row is thumbnail, description, figure and controls in one line.
   That is four columns competing for 390px, and the description loses: it
   collapses to a column one word wide while the button keeps its full size.
   Wrapping puts the description on its own line and drops the figure and the
   controls underneath, which is the same shape the Fixer's stock uses. */
@media (max-width:560px){
  .choice{flex-wrap:wrap;row-gap:8px}
  .choice .thumb,.choice .ithumb,.choice .crewrank{order:0}
  .choice .body{order:1;flex:1 1 calc(100% - 58px);min-width:0}
  .choice .fig{order:2;text-align:left}
  .choice .hitform,.choice .itemacts{
    order:3;margin-left:auto;min-width:0;width:auto;
    flex-direction:row;align-items:center;gap:8px;
  }
  .choice .hitform input,.choice .hitform select{width:auto;max-width:96px}
  .choice .hitform .btn,.choice .itemacts .btn{width:auto}
  .heatpips{flex-basis:100%;order:4}
}

/* ==========================================================================
   The Ambrose Herald
   --------------------------------------------------------------------------
   A newspaper has to read like one or it is just a list of announcements with
   a fancy heading. Three things do most of the work here: a masthead with
   rules above and below it, a lead story set larger than everything around
   it, and a genuinely narrow measure on the side columns so they scan like
   newsprint rather than like a web page.
   ========================================================================== */

.masthead-paper{
  display:flex;align-items:center;gap:14px;padding:12px 18px 10px;margin-bottom:10px;
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(168,173,180,.07), transparent 62%),
    linear-gradient(180deg,#1C2327,#12181A);
  border:1px solid var(--line);border-top:3px solid var(--metal-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.45);
}
.mpleft,.mpright{flex:0 0 150px;font-family:var(--data);font-size:10px;color:var(--faint);line-height:1.5}
.mpright{text-align:right}
.mpest{display:block;letter-spacing:.12em}
.mpdate{display:block;color:var(--dim)}
.mpissue{display:block}
.mpname{flex:1;text-align:center;min-width:0}
.mptitle{
  display:block;font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.06em;
  color:transparent;background:linear-gradient(180deg,#F2F5F8 16%,#8B929B 100%);
  -webkit-background-clip:text;background-clip:text;text-shadow:0 2px 0 rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mprule{
  display:block;height:2px;margin:5px auto 4px;max-width:340px;
  background:linear-gradient(90deg,transparent,var(--metal-lo) 18%,var(--metal) 50%,var(--metal-lo) 82%,transparent);
  opacity:.7;
}
.mpsub{
  display:block;font-family:var(--display);font-weight:600;font-size:8.5px;
  letter-spacing:.26em;color:var(--faint);text-transform:uppercase;
}

.papertabs{
  display:flex;flex-wrap:wrap;gap:1px;margin-bottom:12px;background:#000;
  border:1px solid var(--line);
}
.ptab{
  flex:1 1 auto;padding:7px 14px;text-align:center;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  background:linear-gradient(180deg,#1E262A,#141A1D);
}
.ptab:hover{color:var(--metal-hi);background:linear-gradient(180deg,#283236,#171E21)}
.ptab.on{
  color:#F0D8B0;background:linear-gradient(180deg,#3A2414,#1E1410);
  box-shadow:inset 0 2px 0 var(--heat);
}

/* ---- the page ---- */
.paper{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:12px;align-items:start}
.pmain{min-width:0;display:flex;flex-direction:column;gap:12px}

.lead{
  padding:16px 20px;
  background:linear-gradient(180deg,#1A2124,#111618);
  border:1px solid var(--line);border-left:3px solid var(--metal-lo);
  box-shadow:0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.lead.update{border-left-color:var(--good)}
.lead.warning{border-left-color:var(--heat)}
.lkind,.skind{
  display:inline-block;margin-bottom:7px;padding:2px 9px;
  font-family:var(--display);font-weight:700;font-size:8px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--metal);border:1px solid var(--metal-lo);
  background:var(--metal-wash);
}
.lead.warning .lkind,.story.warning .skind{color:#E8A07A;border-color:#6B3418;background:rgba(218,100,48,.1)}
.lead.update .lkind,.story.update .skind{color:#8CC276;border-color:#2C4326;background:rgba(111,180,95,.1)}
.lhead{
  margin:0 0 10px;font-family:var(--display);font-weight:900;font-size:27px;line-height:1.14;
  letter-spacing:.02em;color:#EDF0F3;text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.lbody{font-size:13.5px;line-height:1.72;color:#D6DBE1;max-width:70ch}
.lbody p{margin:0 0 11px}
.lbody p:first-child::first-letter{
  float:left;margin:2px 8px 0 0;font-family:var(--display);font-weight:900;
  font-size:44px;line-height:.86;color:var(--metal-hi);
}
.lby{margin:12px 0 0;padding-top:9px;border-top:1px solid var(--line-soft);
  font-family:var(--data);font-size:10.5px;color:var(--faint)}

.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1px;background:#000;
  border:1px solid var(--line)}
.story{padding:12px 14px;background:linear-gradient(180deg,#1A2024,#12181B)}
.story h3{
  margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;
  letter-spacing:.03em;color:#DFE4E9;
}
.story p{margin:0;font-size:12.5px;line-height:1.55;color:var(--dim)}
.story .swhen{display:block;margin-top:7px;font-family:var(--data);font-size:10px;color:var(--faint)}

/* ---- classified advertising ---- */
.adstrip{
  padding:12px 14px 14px;
  background:linear-gradient(180deg,#161C1F,#0F1416);
  border:1px solid var(--line);border-top:2px solid var(--metal-lo);
}
.adhead{
  font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--metal);text-align:center;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.adcols{columns:2;column-gap:20px;column-rule:1px solid var(--line-soft)}
.adcols.full{columns:3}
.ad{break-inside:avoid;margin:0 0 12px}
.adtitle{
  display:block;font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.06em;color:#DFE4E9;
}
.ad p{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}
.adby{display:block;margin-top:3px;font-family:var(--data);font-size:10px;color:var(--faint)}
.adby a{color:var(--metal)}
.adpull{display:inline}
.adpull button{font-family:var(--data);font-size:10px;color:var(--bad);text-decoration:underline;margin-left:6px}
.admore{
  display:block;margin-top:4px;text-align:center;font-family:var(--data);font-size:11px;color:var(--metal);
}

/* ---- the desk down the side ---- */
.pdesk{display:flex;flex-direction:column;gap:10px;min-width:0}
.col{
  padding:10px 12px 11px;
  background:linear-gradient(180deg,#1A2124,#111618);
  border:1px solid var(--line);box-shadow:0 5px 16px rgba(0,0,0,.4);
}
.col.jack{
  border-color:var(--blood-2);
  background:radial-gradient(120% 140% at 50% -20%, rgba(196,30,42,.22), transparent 62%),
             linear-gradient(180deg,#1E1216,#0E1114);
  text-align:center;
}
.colh{
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--metal);
  padding-bottom:6px;margin-bottom:7px;border-bottom:1px solid var(--line-soft);
}
.colbig{
  font-family:var(--display);font-weight:900;font-size:25px;line-height:1;
  color:transparent;background:linear-gradient(180deg,#FFF3F2 10%,var(--crimson-hi) 60%,#7A0F17 100%);
  -webkit-background-clip:text;background-clip:text;
}
.colnote{margin:5px 0 0;font-size:11px;color:var(--faint);line-height:1.4}
.colline{
  margin:0 0 6px;font-size:12px;line-height:1.45;color:var(--dim);
  padding-bottom:6px;border-bottom:1px solid rgba(46,53,60,.5);
}
.colline:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0}
.colline b{color:#DFE4E9;font-weight:600}
.colline a{color:var(--metal)}
.colline .money{color:var(--good);font-family:var(--data);font-size:11.5px}
.colwhen{display:block;margin-top:1px;font-family:var(--data);font-size:10px;color:var(--faint)}
.colrank{
  display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;
  font-family:var(--data);font-size:9px;color:var(--faint);
  border:1px solid var(--line-soft);background:rgba(0,0,0,.35);
}
.colmore{display:block;margin-top:8px;font-family:var(--data);font-size:10.5px;color:var(--metal)}

/* ==========================================================================
   Situations vacant and the interview
   ========================================================================== */

.vintro{
  margin:0 0 12px;padding:10px 14px;font-size:12.5px;line-height:1.6;color:var(--dim);
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  border-left:3px solid var(--metal-lo);
}
.vintro b{color:#F0A472}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.vcard{
  display:flex;align-items:center;gap:12px;padding:11px 12px;text-decoration:none;
  background:linear-gradient(180deg,#1A2124,#101518);
  border:1px solid var(--line);
  box-shadow:0 5px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .14s ease, transform .14s ease;
}
.vcard:hover{border-color:var(--metal-lo);transform:translateY(-1px)}
.vcard.off{opacity:.55}
.vface{
  flex:0 0 54px;width:54px;height:54px;overflow:hidden;
  border:1px solid var(--line);background:#0A0D0E;
}
.vface img,.vface .ifacedrawn{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}
.vbody{flex:1;min-width:0}
.vemployer{display:block;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.09em;color:#EDF0F3}
.vtitle{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.vwage{display:block;font-family:var(--data);font-size:11px;color:var(--good);margin-top:2px}
.vreq{display:block;margin-top:5px}
.vgo{
  flex:0 0 auto;font-family:var(--display);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;color:var(--metal);text-transform:uppercase;white-space:nowrap;
}
.vcard.off .vgo{color:var(--faint)}

.firms{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:1px;background:#000}
.firm{display:block;padding:10px 12px;background:linear-gradient(180deg,#1A2024,#12181B);text-decoration:none}
.firm:hover{background:linear-gradient(180deg,#232B2F,#161D20)}
.firm.off{opacity:.5}
.fname{display:block;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.08em;color:#EDF0F3}
.ftype{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.fstaff{display:block;font-family:var(--data);font-size:10.5px;color:var(--faint);margin-top:3px}

/* ---- the interview room ---- */
.interview{
  padding:16px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(168,173,180,.05), transparent 62%),
    linear-gradient(180deg,#1A2124,#101518);
  border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045);
}
.ihead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.iface{
  flex:0 0 74px;width:74px;height:74px;overflow:hidden;
  border:1px solid var(--metal-lo);background:#0A0D0E;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.6);
}
.iface img,.iface .ifacedrawn{display:block;width:100%;height:100%;object-fit:cover}
.iwho{flex:1;min-width:0}
.iname{display:block;font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.06em;color:#EDF0F3}
.irole{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.ipost{display:block;font-family:var(--data);font-size:11px;color:var(--metal);margin-top:3px}
.ireqs{display:flex;flex-direction:column;gap:5px;align-items:flex-end}

.ispeech{
  position:relative;margin:14px 0 0;padding:12px 15px 13px;
  background:linear-gradient(180deg,#20282B,#141A1C);
  border:1px solid var(--line);border-left:3px solid var(--metal-lo);
}
.ispeech.answer{border-left-color:var(--heat)}
.iwho2{
  display:block;margin-bottom:5px;font-family:var(--display);font-weight:700;font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--metal);
}
.ispeech p{margin:0;font-size:13.5px;line-height:1.72;color:#D6DBE1;max-width:74ch}
.ihard{display:block;margin-top:8px;font-family:var(--data);font-size:11.5px;color:#F0A472}

.iyou{
  margin:12px 0 0;padding:8px 14px;text-align:right;
  font-size:13px;color:var(--dim);font-style:italic;
  border-right:3px solid var(--line);
}

.iasks{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.iask{
  display:block;width:100%;text-align:left;padding:11px 15px;
  font-size:13px;color:#9FC4DC;
  background:linear-gradient(180deg,#1D262B,#141A1E);
  border:1px solid var(--line);
  transition:border-color .14s ease, color .14s ease;
}
.iask:hover{border-color:var(--metal-lo);color:#C6E0F2}
.iask.asked{border-left:3px solid var(--heat);color:var(--dim)}
.iask.off{color:var(--faint);font-style:italic;cursor:default}
.iask.apply{
  color:#FFF1F0;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;
  background:linear-gradient(180deg,var(--crimson-hi),var(--crimson) 45%,#8A0F18);
  border-color:#4A080E;
}
.iask.apply:hover{filter:brightness(1.1)}
.iask.apply.longshot{
  background:linear-gradient(180deg,#3A2414,#1E1410);border-color:#6B3418;color:#F0A472;
}
.inote{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:12.5px;line-height:1.6;color:var(--faint);
}

@media (max-width:1000px){
  .paper{grid-template-columns:minmax(0,1fr)}
  .pdesk{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
}
@media (max-width:620px){
  .mpleft,.mpright{display:none}
  .mptitle{font-size:21px}
  .lhead{font-size:20px}
  .lead{padding:13px 14px}
  .adcols,.adcols.full{columns:1}
  .ihead{gap:10px}
  .ireqs{flex-direction:row;flex-basis:100%;justify-content:flex-start}
  .vcard{flex-wrap:wrap}
  .vgo{flex-basis:100%;text-align:right}
  .ptab{flex:1 1 40%;font-size:9px;letter-spacing:.14em;padding:8px 6px}
}

/* ==========================================================================
   Name banners
   --------------------------------------------------------------------------
   A strip with the name inside it and a device on each end. Four palettes,
   ten devices, one worn at a time. An uploaded image replaces the whole
   strip; everything else here is the drawn version, which has to hold up on
   its own because most banners will never have artwork made for them.
   ========================================================================== */

.nb{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:3px 12px;max-width:100%;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#242C30,#151B1E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.5);
}
.nb .nbname{
  font-family:var(--display);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#EDF0F3;text-shadow:0 1px 0 rgba(0,0,0,.75);
}
.nb .nbcap{flex:0 0 auto;display:block;width:17px;height:17px;opacity:.9}
.nb .nbcap svg{width:100%;height:100%;display:block}
.nb .nbcap.flip{transform:scaleX(-1)}

/* No banner worn: the name, with nothing round it. */
.nb-none{padding:0;border:0;background:none;box-shadow:none}

/* ---- palettes ---- */
.nb-steel{
  border-color:var(--metal-lo);color:var(--metal);
  background:linear-gradient(180deg,#2C353A,#151B1E);
}
.nb-brass{
  border-color:#8A6820;color:#D9B25E;
  background:linear-gradient(180deg,#3A2F16,#171208);
}
.nb-brass .nbname{color:#F0D9A4}
.nb-gold{
  border-color:#B08A2A;color:#F0D08A;
  background:linear-gradient(180deg,#4A3A16,#221A0B);
  box-shadow:inset 0 1px 0 rgba(255,220,150,.2), 0 0 12px rgba(233,195,120,.14), 0 2px 6px rgba(0,0,0,.5);
}
.nb-gold .nbname{color:#FFE9A8}
.nb-crimson{
  border-color:var(--blood-2);color:#E8858C;
  background:linear-gradient(180deg,#3A1116,#1A0B0D);
  box-shadow:inset 0 1px 0 rgba(255,170,170,.16), 0 0 12px rgba(196,30,42,.16), 0 2px 6px rgba(0,0,0,.5);
}
.nb-crimson .nbname{color:#FFD9DC}

/* An uploaded strip: the artwork is the background, the name sits over it. */
.nb-art{
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  border-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.5);
  min-width:190px;padding:5px 22px;
}
.nb-art .nbname{text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8)}

/* ---- where they appear ---- */
.nb.rail{font-size:13px}
.nb.rail .nbname{font-size:14px;letter-spacing:.1em}
.nb.big{font-size:15px;padding:5px 16px}
.nb.big .nbname{font-size:19px;letter-spacing:.09em}
.nb.post{padding:2px 8px;gap:6px}
.nb.post .nbname{font-size:11.5px;letter-spacing:.08em}
.nb.post .nbcap{width:13px;height:13px}
.nb.preview{font-size:13px;width:100%;justify-content:center}
.nb.preview .nbname{font-size:13px}

/* The rail namecard holds a banner now rather than bare text. */
.namecard .handle{line-height:1.2}
.namecard .handle .nb-none .nbname{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.09em;
  color:#EDF0F3;text-shadow:0 1px 0 #000,0 0 20px rgba(168,173,180,.22);
}
.idplate .nm .nb-none .nbname{
  font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.09em;
  color:#EDF0F3;text-shadow:0 2px 0 #000;
}
.post .pname .nb{max-width:100%}
.post .pname .nb-none .nbname{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.09em;color:#EDF0F3;
}

/* ==========================================================================
   The rack
   ========================================================================== */

.bannertop{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(0,0,0,.4);
}
.bannertop .btop{padding:8px 16px;border-right:1px solid var(--line-soft);min-width:118px}
.bannertop .btopnote{
  flex:1;min-width:250px;margin:0;padding:8px 16px;
  font-size:12px;line-height:1.5;color:var(--faint);
}

.brack{display:flex;flex-direction:column}
.brow{
  display:flex;align-items:center;gap:14px;padding:10px 12px;
  border-top:1px solid var(--line-soft);
}
.brow:first-child{border-top:0}
.brow:hover{background:rgba(168,173,180,.04)}
.brow.locked{opacity:.45}
.brow.worn{background:linear-gradient(90deg,rgba(233,195,120,.08),transparent 62%);
  box-shadow:inset 3px 0 0 #8A6820}

.bprev{flex:0 0 216px;min-width:0}
.brow.locked .bprev{filter:grayscale(1)}
.bmeta{flex:1;min-width:0}
.bmeta .bname{
  display:block;font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;color:#EDF0F3;
}
.bblurb2{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.bhow{
  display:block;margin-top:3px;font-family:var(--data);font-size:10.5px;color:var(--metal);
}
.brow.locked .bhow{color:var(--faint)}
.bact{flex:0 0 auto;min-width:118px;text-align:right}

@media (max-width:640px){
  .brow{flex-wrap:wrap;row-gap:9px}
  .bprev{flex:1 1 100%}
  .bact{flex:1 1 100%;text-align:left;min-width:0}
  .bannertop .btop{flex:1 1 40%;border-bottom:1px solid var(--line-soft)}
  .nb.big .nbname{font-size:16px}
}

/* On a phone the rail is a full-width block, so a portrait that fills its
   frame would fill the screen. Capping the frame rather than the picture
   keeps the two locked together at any width. */
@media (max-width:900px){
  .portrait .frame{max-width:196px;margin:0 auto}
}

/* ==========================================================================
   The garage and the city offices
   ========================================================================== */

.garagetop,.officehead{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(0,0,0,.4);
}
.gtop{padding:8px 16px;border-right:1px solid var(--line-soft);min-width:104px}
.gtop .k{display:block;font-family:var(--display);font-weight:600;font-size:8.5px;letter-spacing:.22em;color:var(--faint)}
.gtop .v{display:block;margin-top:1px;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;color:var(--metal-hi)}
.gtop .v.money{color:var(--good)}
.gtop .v.hot{color:var(--heat)}
.gtop .v small{font-family:var(--data);font-size:11px;font-weight:400;color:var(--faint)}
.gtopnote{flex:1;min-width:250px;margin:0;padding:8px 16px;font-size:12px;line-height:1.5;color:var(--faint)}

/* ---- where to steal from ---- */
.spots{display:flex;flex-direction:column}
.spot{
  display:flex;align-items:center;gap:13px;padding:10px 12px;
  border-top:1px solid var(--line-soft);
}
.spot:first-child{border-top:0}
.spot:hover{background:rgba(168,173,180,.04)}
.spot.off{opacity:.5}
.sbody{flex:1;min-width:0}
.snm{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:#EDF0F3}
.sds{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.5}
.sodds{display:block;margin-top:4px;font-family:var(--data);font-size:10.5px;color:var(--metal)}
.spot .hitform{min-width:126px}
.sblock{display:block;margin-top:4px;font-family:var(--data);font-size:10px;color:var(--heat);text-align:center}

/* ---- what is in the garage ---- */
.cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:#000}
.car{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1A2024,#12181B);
}
.car.straight{background:linear-gradient(180deg,#1E2520,#12181B)}
.cart2{display:block;aspect-ratio:16 / 9;overflow:hidden;background:#0A0D0E;border-bottom:1px solid #000}
.cart2 img,.cart2 .cardrawn{display:block;width:100%;height:100%;object-fit:cover}
.cbody{padding:9px 11px 4px}
.cnm{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.09em;color:#EDF0F3}
.cmaker{font-family:var(--data);font-size:10px;color:var(--faint);margin-left:6px}
.ccond{display:flex;align-items:center;gap:8px;margin-top:6px}
.cbar{flex:1;height:5px;background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.cbar i{display:block;height:100%}
.cbar i.good{background:linear-gradient(90deg,#2F6B28,var(--good))}
.cbar i.fair{background:linear-gradient(90deg,#8A6820,#EEC463)}
.cbar i.poor{background:linear-gradient(90deg,#6E0D14,var(--crimson))}
.cpct{font-family:var(--data);font-size:10.5px;color:var(--dim);min-width:34px;text-align:right}
.cnums{margin-top:5px;font-family:var(--data);font-size:10.5px;color:var(--faint);line-height:1.5}
.cnums b{color:var(--good)}
.cacts{padding:0 11px 10px;margin-top:auto}
.cacts form{display:flex;flex-wrap:wrap;gap:5px}
.cacts .btn{flex:1 1 auto;justify-content:center;font-size:10px;padding:6px 9px;letter-spacing:.1em}

/* ---- the office ---- */
.officehead{align-items:stretch}
.officehead.vacant{border-color:var(--line);opacity:.92}
.ohtitle{padding:11px 18px;border-right:1px solid var(--line-soft);min-width:190px}
.ohcity{
  display:block;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.06em;
  color:#EDF0F3;text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.ohrole{display:block;margin-top:1px;font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--metal);text-transform:uppercase}
.ohwho{flex:1;min-width:220px;padding:11px 18px;display:flex;flex-direction:column;justify-content:center}
.ohname{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.08em;color:#F0D08A}
.ohname.vacant{color:var(--faint);font-style:italic}
.ohnote{margin-top:3px;font-family:var(--data);font-size:10.5px;color:var(--faint)}

.ballot{display:flex;flex-direction:column}
.cand{
  display:grid;grid-template-columns:170px minmax(0,1fr) 150px 96px;gap:12px;align-items:center;
  padding:10px 12px;border-top:1px solid var(--line-soft);
}
.cand:first-child{border-top:0}
.cand.chosen{background:linear-gradient(90deg,rgba(111,180,95,.08),transparent 62%);box-shadow:inset 3px 0 0 var(--good)}
.cwho a{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.09em;color:#EDF0F3}
.clevel{display:block;font-family:var(--data);font-size:10px;color:var(--faint);margin-top:1px}
.cpledge{font-size:12px;line-height:1.5;color:var(--dim);font-style:italic}
.cvotes{display:flex;align-items:center;gap:8px}
.vbar{flex:1;height:7px;background:#06080A;border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.vbar i{display:block;height:100%;background:linear-gradient(90deg,var(--metal-lo),var(--metal))}
.vnum{font-family:var(--data);font-size:11.5px;color:var(--metal-hi);min-width:24px;text-align:right}
.cact{text-align:right}

@media (max-width:820px){
  .cand{grid-template-columns:minmax(0,1fr) auto;row-gap:7px}
  .cpledge{grid-column:1 / -1}
  .cvotes{grid-column:1 / -1}
  .ohtitle{border-right:0;border-bottom:1px solid var(--line-soft);flex:1 1 100%}
}
@media (max-width:560px){
  .gtop{flex:1 1 40%;border-bottom:1px solid var(--line-soft)}
  .spot{flex-wrap:wrap;row-gap:8px}
  .spot .hitform{flex:1 1 100%;min-width:0}
  .cars{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   Organised crime
   ========================================================================== */

.octop{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;
  background:linear-gradient(180deg,#1A2124,#111618);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(0,0,0,.4);
}
.octop .gtop .v{font-size:15px;max-width:252px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ocblurb{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--text);max-width:74ch}
.ocnote{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--faint);max-width:80ch}

/* ---- the four numbers that decide whether to go ---- */
.ocmeters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  border:1px solid var(--line-soft);background:rgba(0,0,0,.26);
}
.ocmeter{padding:7px 11px;border-right:1px solid var(--line-soft)}
.ocmeter:last-child{border-right:0}
.ocmeter .k{display:block;font-family:var(--display);font-weight:600;font-size:8.5px;letter-spacing:.2em;color:var(--faint)}
.ocmeter .v{display:block;margin-top:2px;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;color:var(--metal-hi)}
.ocmeter .v.small{font-size:13px;font-weight:700;letter-spacing:.02em}
.ocmeter .v.good{color:var(--good)}
.ocmeter .v.bad{color:var(--bad)}
.ocmeter .v small{font-family:var(--data);font-size:11px;font-weight:400;color:var(--faint)}

.ocbar{
  margin-top:9px;height:7px;background:#06080A;border:1px solid #000;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);overflow:hidden;
}
.ocbar i{display:block;height:100%;background:linear-gradient(90deg,#6E0D14,var(--crimson) 60%,var(--crimson-hi))}

/* ---- the seats ---- */
.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.slot{
  display:grid;grid-template-columns:minmax(0,1fr) 132px 128px;align-items:center;gap:12px;
  padding:8px 12px;border-top:1px solid var(--line-soft);
}
.slot:first-child{border-top:0}
.slot.open{background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(196,30,42,.035) 9px,rgba(196,30,42,.035) 18px)}
.slot.mine{box-shadow:inset 3px 0 0 var(--crimson)}

.srole h3{margin:0;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.11em;color:var(--metal-hi)}
.srole p{margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--dim)}
.sreq{display:block;margin-top:3px;font-family:var(--data);font-size:10.5px;color:var(--faint)}
.sreq b{color:var(--metal);font-weight:400}

.swho{min-width:0;text-align:right}
.sname{display:block;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.08em;color:var(--metal-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sname.empty{color:var(--faint);font-weight:400;font-style:italic;letter-spacing:.04em}
.sfit{display:block;margin-top:2px;font-family:var(--data);font-size:10.5px;color:var(--dim)}
.sfit.good{color:var(--good)}
.sfit.bad{color:var(--bad)}

.sact{text-align:right}
.scut{font-family:var(--data);font-size:12px;color:var(--good)}

.ocfoot{border-top:1px solid var(--line-soft);background:rgba(0,0,0,.2)}
.ocfootform{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ---- the board, when nothing is on ---- */
.ocboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line-soft)}
.occard{display:flex;flex-direction:column;padding:11px 12px;background:linear-gradient(180deg,#171D20,#121719)}
.occard.locked{opacity:.62}
.occard > header{display:flex;align-items:baseline;gap:9px;padding:0 0 6px;background:none;border:0;box-shadow:none;margin-bottom:7px;border-bottom:1px solid var(--line-soft)}
.occard > header h3{margin:0;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.13em;color:var(--metal-hi)}
.octake{margin-left:auto;font-family:var(--data);font-size:10.5px;color:var(--good);white-space:nowrap}
.occard .ocblurb{font-size:12px;color:var(--dim);margin-bottom:8px}

.ocroles{list-style:none;margin:0 0 8px;padding:0;border:1px solid var(--line-soft);background:rgba(0,0,0,.24)}
.ocroles li{display:grid;grid-template-columns:minmax(0,1fr) auto 38px;gap:8px;align-items:baseline;padding:4px 8px;border-top:1px solid var(--line-soft)}
.ocroles li:first-child{border-top:0}
.orname{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orstat{font-family:var(--data);font-size:10px;color:var(--faint);white-space:nowrap}
.orfit{font-family:var(--data);font-size:11px;color:var(--dim);text-align:right}
.orfit.good{color:var(--good)}
.orfit.bad{color:var(--bad)}

.ocfacts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:1px;margin:0 0 9px;
  border:1px solid var(--line-soft);background:var(--line-soft);
}
.ocfacts > div{padding:4px 6px;text-align:center;background:#12171A}
.ocfacts dt{font-family:var(--display);font-weight:600;font-size:8px;letter-spacing:.18em;color:var(--faint)}
.ocfacts dd{margin:1px 0 0;font-family:var(--data);font-size:12px;color:var(--metal-hi)}

.ocput{margin-top:auto}
.oclock{margin:0;font-size:11.5px;line-height:1.45;color:var(--faint)}

/* ---- the record ---- */
.ochist{list-style:none;margin:0;padding:0}
.ochist li{
  display:grid;grid-template-columns:150px minmax(0,1fr) 106px 84px;gap:11px;align-items:baseline;
  padding:7px 12px;border-top:1px solid var(--line-soft);
}
.ochist li:first-child{border-top:0}
.ochist li.won{box-shadow:inset 3px 0 0 var(--good)}
.ochist li.lost{box-shadow:inset 3px 0 0 var(--bad)}
.hname{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;color:var(--metal-hi)}
.hwhat{font-size:12px;line-height:1.45;color:var(--dim)}
.hsum{font-family:var(--data);font-size:12px;text-align:right;color:var(--faint)}
.ochist li.won .hsum{color:var(--good)}
.hwhen{font-family:var(--data);font-size:10.5px;color:var(--faint);text-align:right}

@media (max-width:820px){
  .slot{grid-template-columns:minmax(0,1fr) 120px;row-gap:8px}
  .sact{grid-column:1 / -1;text-align:left}
  .ochist li{grid-template-columns:minmax(0,1fr) 100px;row-gap:4px}
  .hwhat{grid-column:1 / -1;order:3}
  .hwhen{order:2;text-align:right}
}
@media (max-width:560px){
  .octop .gtop{flex:1 1 42%;border-bottom:1px solid var(--line-soft)}
  /* The crew and the job are the two names worth reading; the counts are
     not, so they share a row and these get one each. */
  .octop .gtop:nth-child(1),.octop .gtop:nth-child(4){flex:1 1 100%;border-right:0}
  .octop .gtop .v{max-width:none;white-space:normal}
  .slot{grid-template-columns:minmax(0,1fr)}
  .swho{text-align:left}
  .ocboard{grid-template-columns:minmax(0,1fr)}
}