/* =========================================================================
   ANSEM Battlefield — desktop app shell.

   Three docked columns: market data on the left, the field in the middle,
   the armory on the right. The field is the only thing that stretches; both
   rails hold their width so the numbers never reflow while you read them.
   ========================================================================= */
:root{
  --bg:#05070a;
  --stage:#0a1622;
  --panel:#0b0e11;
  --panel-2:#101418;
  --panel-3:#151a1f;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --bone:#eceae4;
  --dim:#8e959d;
  --dim-2:#666d75;
  --green:#22c55e;
  --green-2:#4ade80;
  --green-3:#86efac;
  --red:#e8505b;
  --red-2:#ff8189;
  --gold:#ffe031;
  --amber:#e0a33c;
  --head-h:72px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
/* Starts hidden, and JS turns it on by setting an inline display.

   These two were `style="display:none"` in the markup, which is the obvious
   way to write it and is also an inline style — and the site's CSP is
   `style-src 'self'`, which forbids those. The qualifier is what makes this
   a drop-in swap rather than a bug: `html .prehide` outranks `.blink` and
   `.bnote`, so the element really is hidden to begin with, and it is NOT
   !important, so the `el.style.display = 'block'` that reveals it still
   wins. Both halves are load-bearing. */
html .prehide{display:none;}
html,body{height:100%;background:var(--bg);color:var(--bone);font-family:var(--ui);overflow:hidden;}
body{-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit;}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ======================================================== app header */
.apphead{
  height:var(--head-h);display:flex;align-items:center;gap:14px;padding:0 16px;
  border-bottom:1px solid var(--line);background:var(--bg);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;width:260px;}
.mark{width:42px;height:42px;border-radius:11px;object-fit:cover;display:block;
  border:1px solid rgba(34,197,94,.34);box-shadow:0 0 20px rgba(34,197,94,.24);background:#0b0d0b;}
.wordmark b{display:block;font-size:22px;font-weight:700;letter-spacing:.4px;line-height:1.05;}
.wordmark span{display:block;font-size:10.5px;letter-spacing:3.4px;color:var(--dim);margin-top:2px;}

.statstrip{
  flex:1;min-width:0;display:flex;align-items:stretch;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:9px 4px;overflow:hidden;
}
.stat{flex:1 1 0;padding:0 20px;min-width:0;display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--line);}
.stat.live{flex:0 0 auto;}
.stat:last-child{border-right:0;}
.stat>span{font-size:10px;letter-spacing:1.5px;color:var(--dim-2);text-transform:uppercase;white-space:nowrap;}
.stat em{font-style:normal;font-family:var(--mono);font-size:17px;font-weight:600;margin-top:3px;white-space:nowrap;}
.pricerow{display:flex;align-items:baseline;gap:8px;}
.pricerow .chg{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--dim);}
.chg.up{color:var(--green-2);} .chg.down{color:var(--red-2);}
.stat em.press{font-family:var(--ui);font-size:17px;font-weight:600;}
.stat em.press.bull{color:var(--green-2);} .stat em.press.bear{color:var(--red-2);}
.stat.live{flex-direction:row;align-items:center;gap:10px;padding-right:22px;}
.stat.live>div{display:flex;flex-direction:column;}
.stat.live i{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 9px var(--green);animation:blip 1.7s ease-in-out infinite;flex:0 0 auto;}
.stat.live em{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--green-2);margin:0;}
.stat.live span{font-size:11px;letter-spacing:.6px;color:var(--dim);text-transform:none;margin-top:1px;}
.stat.live.stale i{background:var(--amber);box-shadow:0 0 9px var(--amber);}
.stat.live.err i{background:var(--red);box-shadow:0 0 9px var(--red);}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.headright{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.ca{display:flex;align-items:center;gap:9px;height:44px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--bone);
  font-family:var(--mono);font-size:13px;}
.ca img{border-radius:50%;display:block;}
.ca svg{width:15px;height:15px;color:var(--dim);}
.ca:hover{border-color:var(--line-2);}
.cta{height:44px;padding:0 22px;border-radius:11px;font-size:13px;font-weight:700;letter-spacing:.5px;
  color:#04120a;background:linear-gradient(180deg,#4ade80,#16a34a);
  box-shadow:0 6px 20px rgba(34,197,94,.26);}
.cta:hover{filter:brightness(1.07);}
.cta:active{transform:scale(.985);}
.cta.on{background:linear-gradient(180deg,#1c2a20,#131b16);color:var(--green-3);
  box-shadow:none;border:1px solid rgba(34,197,94,.4);}
.gear{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);border:1px solid transparent;}
.gear:hover{color:var(--bone);border-color:var(--line);}
.gear svg{width:19px;height:19px;}

/* ======================================================== shell */
.shell{
  height:calc(100vh - var(--head-h));display:grid;gap:12px;padding:12px;
  grid-template-columns:316px minmax(0,1fr) 348px;
}
.rail{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.pnl .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px 11px;flex:0 0 auto;
  /* The panel clips its overflow, so anything the header cannot fit is not
     merely cramped — it is cut in half at the border. Wrapping is the floor
     under that: whatever will not sit beside the title drops under it. */
  flex-wrap:wrap;}
.pnl .ph .k{font-size:13px;font-weight:600;letter-spacing:1.3px;white-space:nowrap;
  flex:0 1 auto;min-width:0;}
.livedot{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.3px;color:var(--green-2);}
.livedot i{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px var(--green);animation:blip 1.7s infinite;}

/* ---------------------------------------------- order book */
/* THE TWO DROPDOWNS USED TO BE CUT IN HALF BY THE PANEL EDGE.

   A <select> sizes itself to its longest option and, unlike text, will not
   shrink below that on its own — so the tick-size box was laid out 53px wider
   than the panel it lives in, and the panel's overflow:hidden sliced it. On
   screen that read as "0.000100" with its right side missing and no way to
   tell there was a control there at all.

   Both of them shrink now: flex-basis zero so they divide whatever the title
   leaves, min-width:0 so the intrinsic size of the longest option stops being
   a floor, and a cap so they never grow silly on a wide rail. The browser
   truncates the label itself, which is what it does with a narrow select
   everywhere else. */
.phsel{display:flex;gap:6px;align-items:center;min-width:0;flex:1 1 auto;
  justify-content:flex-end;}
#srcSel,#bookStep{flex:1 1 0;min-width:0;max-width:96px;
  background:var(--panel-2);color:var(--dim);border:1px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:11px;padding:6px 8px;outline:none;
  text-overflow:ellipsis;}
.bkcols{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0 14px 7px;
  font-size:9.5px;letter-spacing:1.1px;color:var(--dim-2);}
.bkcols span:nth-child(2){text-align:right;}
.bkcols span:nth-child(3){text-align:right;}
.bkside{padding:0 14px;flex:0 0 auto;}
.bkrow{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;
  padding:3.5px 0;font-family:var(--mono);font-size:11.5px;}
.bkrow .bar{position:absolute;top:1px;bottom:1px;left:-6px;border-radius:3px;z-index:0;}
.bkrow span{position:relative;z-index:1;}
.bkrow .sz,.bkrow .tt{text-align:right;color:var(--bone);}
.bkrow .tt{color:var(--dim);}
.asks .bkrow .px{color:var(--red-2);}
.asks .bkrow .bar{background:linear-gradient(90deg,rgba(232,80,91,.30),rgba(232,80,91,.05));}
.bids .bkrow .px{color:var(--green-2);}
.bids .bkrow .bar{background:linear-gradient(90deg,rgba(34,197,94,.28),rgba(34,197,94,.04));}
.bkmid{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 14px;margin:5px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.bkmid em{font-style:normal;font-family:var(--mono);font-size:21px;font-weight:600;}
.bkmid .chg{font-style:normal;font-family:var(--mono);font-size:12.5px;}

#depthCanvas{display:block;width:100%;height:104px;margin-top:8px;flex:0 0 auto;}
.dlabels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  padding:2px 14px 12px;flex:0 0 auto;}
.dlabels .lo{color:var(--green-2);} .dlabels .mid{color:var(--dim);} .dlabels .hi{color:var(--red-2);}

/* ---------------------------------------------- market feed */
.feed{flex:1 1 auto;min-height:0;}
/* ======================================================== community panel

   The slot the market feed used to hold. Same slab, same rules as every other
   panel on this rail — it must not read as an advert bolted onto a product,
   because it is not one: it is where the money goes, and that is part of the
   product. So it uses the same border, the same header and the same green,
   and it says its numbers in the same mono the price is set in. */
.pnl.community{flex:0 0 auto;}
.cmsite{font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;
  color:var(--dim);text-decoration:none;white-space:nowrap;}
.cmsite:hover{color:var(--green-2);}
.cmbody{display:flex;flex-direction:column;gap:12px;padding:12px 12px 14px;}

/* ---- the one big button ---- */
.cmtg{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:11px;
  background:linear-gradient(180deg,rgba(34,197,94,.20),rgba(34,197,94,.09));
  border:1px solid rgba(34,197,94,.42);text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .12s ease;}
.cmtg:hover{background:linear-gradient(180deg,rgba(34,197,94,.30),rgba(34,197,94,.14));
  border-color:rgba(34,197,94,.66);}
.cmtg:active{transform:translateY(1px);}
.cmtg svg{width:26px;height:26px;flex:0 0 auto;color:var(--green-2);stroke-width:1.6;}
.cmtg span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cmtg b{font-size:13px;font-weight:700;letter-spacing:.7px;color:var(--bone);}
.cmtg i{font-style:normal;font-size:11.5px;color:var(--green-3);}
/* No channel yet: still on the page, visibly not a link, and not clickable. */
.cmtg.soon{background:var(--panel-2);border-color:var(--line-2);
  cursor:default;pointer-events:none;}
.cmtg.soon svg{color:var(--dim-2);}
.cmtg.soon b{color:var(--dim);}
.cmtg.soon i{color:var(--dim-2);}

/* ---- where every mint dollar goes ----

   The modifiers are cm-prefixed, and that is not tidiness. The first pass
   called them `.give` and `.burn`, and `.burn` is already the burn strip's
   own class further down this file — a four-column grid with a red gradient.
   `.cmhalf.burn` inherited all of it, so the row came out red with its text
   crushed into a grid cell one word wide. Every class in this panel is
   namespaced now. */
.cmsplit{border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:var(--panel-2);}
.cmk{font-size:9.5px;letter-spacing:1.7px;color:var(--dim-2);font-weight:700;
  padding:10px 13px 8px;border-bottom:1px solid var(--line);}
.cmhalf{display:flex;align-items:center;gap:12px;padding:11px 13px;}
.cmhalf + .cmhalf{border-top:1px solid var(--line);}
.cmhalf em{font-style:normal;font-family:var(--mono);font-size:19px;font-weight:700;
  line-height:1;flex:0 0 auto;width:44px;font-variant-numeric:tabular-nums;}
.cmhalf.cm-give em{color:var(--green-2);}
.cmhalf.cm-burn em{color:var(--gold);}
.cmhalf div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cmhalf b{font-size:12.5px;font-weight:600;color:var(--bone);}
.cmhalf span{font-size:11px;color:var(--dim);line-height:1.4;}

/* ---- the draw ---- */
.cmwin{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:11px;
  text-decoration:none;background:rgba(255,224,49,.07);
  border:1px solid rgba(255,224,49,.26);transition:background .16s ease;}
.cmwin:hover{background:rgba(255,224,49,.13);}
.cmwin b{font-size:12px;font-weight:700;letter-spacing:1.1px;color:var(--gold);}
.cmwin span{font-size:11px;color:var(--dim);line-height:1.4;}

.statgrid{padding:0 14px 14px;display:grid;gap:8px;}
.statgrid div{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;
  padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);}
.statgrid b{color:var(--bone);font-weight:600;}
.statgrid span{color:var(--dim-2);}

/* ======================================================== centre

   The field is the product, so it gets a real height rather than whatever is
   left after everything under it has taken its share. The column scrolls: the
   field and the buy/sell buttons fill the screen, and the burn strip and the
   four claim cards sit below the fold where somebody goes looking for them
   instead of eating a third of the view.

   Squeezing the field to fit was what made it small — every strip added under
   it came straight out of the one thing anybody came to look at. */
.centre{display:grid;grid-template-rows:auto auto auto auto auto;gap:12px;
  min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
.centre::-webkit-scrollbar{width:8px;}
.centre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:8px;}
.centre::-webkit-scrollbar-track{background:transparent;}

.fieldbar{display:flex;align-items:center;gap:16px;padding:0 16px;height:48px;flex:0 0 auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;}
.fbname{font-size:14px;font-weight:600;letter-spacing:.6px;white-space:nowrap;}
.fbname b{color:var(--green-2);font-weight:600;}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--green-2);
  padding:4px 10px;border-radius:20px;background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.28);white-space:nowrap;}
.fbtag{flex:1;min-width:0;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fbstats{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.fbstat{display:flex;align-items:center;gap:9px;}
.fbstat svg{width:17px;height:17px;color:var(--green-2);flex:0 0 auto;}
.fbstat span{display:block;font-size:9px;letter-spacing:1.2px;color:var(--dim-2);}
.fbstat em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--green-2);margin-top:1px;}
.fbicon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);}
.fbicon:hover{color:var(--bone);background:rgba(255,255,255,.05);}
.fbicon svg{width:17px;height:17px;}

/* ---------------------------------------------- the field */
/* Tall enough that the field and the trade buttons are the screen, with the
   burn strip just under the fold. */
.stage{position:relative;overflow:hidden;background:var(--stage);border:1px solid var(--line);
  border-radius:14px;height:calc(100vh - var(--head-h) - 196px);min-height:430px;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;}
#gl.grabbing{cursor:grabbing;}
#gl.rotating{cursor:move;}
/* The grade. A vignette that actually closes down the corners, a cold lift so
   the shadows are blue rather than black, and a fine grain — the three things
   that stop a real-time render looking like a screenshot of a 3D editor. */
.vig{position:absolute;inset:0;pointer-events:none;z-index:4;background:
  radial-gradient(118% 92% at 50% 44%,transparent 42%,rgba(2,6,10,.30) 74%,rgba(1,4,7,.72) 100%),
  linear-gradient(180deg,rgba(6,12,17,.9) 0%,rgba(6,12,17,.22) 24%,rgba(6,12,17,0) 44%),
  linear-gradient(0deg,rgba(4,9,13,.88) 0%,rgba(4,9,13,0) 30%),
  linear-gradient(90deg,rgba(9,26,34,.20) 0%,transparent 22%,transparent 78%,rgba(34,12,14,.18) 100%);}
/* The split tone. Film does not render a scene in one colour temperature:
   the sunlit half runs warm and everything the sun missed falls toward blue.
   Soft-light over the render does that in one composited layer, which costs
   nothing next to a post-processing pass. */
.grade{position:absolute;inset:0;pointer-events:none;z-index:3;
  mix-blend-mode:soft-light;opacity:.46;
  background:
    radial-gradient(58% 46% at 30% 16%,rgba(255,198,130,.72) 0%,rgba(255,198,130,0) 66%),
    linear-gradient(158deg,rgba(255,186,116,.34) 0%,rgba(255,255,255,0) 46%,rgba(58,110,158,.5) 100%);}
.grain{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.05;
  mix-blend-mode:overlay;background-repeat:repeat;background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");}
@media (prefers-reduced-motion:reduce){.grain{display:none;}}

/* Three cards across the top of the field, the price over the field itself,
   and four glass panels in the corners. Everything here floats above the
   render, so each one is its own dark slab rather than text on grass. */
/* Sized down deliberately. These are read at a glance and then ignored; the
   field behind them is the thing worth looking at, and at the old size the
   three of them plus the price took the top third of it. Same numbers, two
   thirds of the furniture. */
.fieldtop{position:absolute;top:0;left:0;right:0;z-index:6;pointer-events:none;
  display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:start;gap:10px;padding:9px 10px;}
.hcard{background:rgba(9,14,18,.78);border:1px solid var(--line);border-radius:11px;
  padding:7px 11px;backdrop-filter:blur(10px);min-width:0;}
.hcard .k{display:flex;align-items:center;gap:5px;font-size:8.5px;letter-spacing:1.2px;color:var(--dim);}
.hcard .k i{font-style:normal;opacity:.8;}
.hcard .v{font-family:var(--mono);font-size:clamp(15px,1.35vw,20px);font-weight:600;
  line-height:1.15;margin-top:2px;text-shadow:0 2px 18px rgba(0,0,0,.8);}
.hcard .s{font-size:8px;letter-spacing:1px;color:var(--dim-2);margin-top:4px;}
.hcard .n{font-family:var(--mono);font-size:10px;color:var(--bone);margin-top:0;}
.hcard.sell{border-color:rgba(232,80,91,.26);}
.hcard.sell .k,.hcard.sell .v{color:var(--red-2);}
.hcard.buy{text-align:right;border-color:rgba(34,197,94,.26);}
.hcard.buy .k{justify-content:flex-end;}
.hcard.buy .k,.hcard.buy .v{color:var(--green-2);}
.hcard.status{text-align:center;}
.statusline{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;margin-top:1px;
  font-size:11.5px;font-weight:600;letter-spacing:.3px;color:var(--green-2);}
.statusline svg{width:11px;height:11px;}
.statusline:hover{color:var(--green-3);}
.statusline.bear{color:var(--red-2);}
.engbar{height:5px;border-radius:5px;margin:7px 0 4px;overflow:hidden;
  background:rgba(255,255,255,.08);}
.engbar i{display:block;height:100%;border-radius:5px;transition:width .5s ease;
  background:linear-gradient(90deg,#15803d,#4ade80 70%,#86efac);}
.engrow{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--dim-2);}
.engrow b{font-family:var(--mono);font-size:9.5px;color:var(--green-2);}

.fieldmid{position:absolute;top:88px;left:0;right:0;z-index:5;text-align:center;pointer-events:none;}
.fieldmid .k{font-size:8.5px;letter-spacing:1.8px;color:var(--dim);text-transform:uppercase;}
.fieldmid .price{font-family:var(--mono);font-size:clamp(22px,2.2vw,30px);font-weight:600;
  letter-spacing:.5px;line-height:1.1;text-shadow:0 3px 30px rgba(0,0,0,.9);}
.fieldmid .chg{font-family:var(--mono);font-size:10.5px;margin-top:1px;color:var(--dim);}

/* Corner panels. Instruments, not scenery: pulled back they are three slabs
   of chrome sitting on a landscape, so they only come out when you zoom in
   close enough to need them. */
.tacmap,.spark,.unitov{position:absolute;z-index:6;background:rgba(9,14,18,.82);
  border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);padding:10px 11px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s;}
.stage.closeup .tacmap,.stage.closeup .spark,.stage.closeup .unitov{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;}
/* A quiet line telling you they exist at all. */
.zoomhint{position:absolute;right:10px;top:108px;z-index:6;pointer-events:none;
  font-size:10px;letter-spacing:1.4px;color:var(--dim-2);text-transform:uppercase;
  background:rgba(9,14,18,.7);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;backdrop-filter:blur(8px);opacity:.9;transition:opacity .3s ease;}
.stage.closeup .zoomhint,.zoomhint.gone{opacity:0;}
.tk{font-size:9px;letter-spacing:1.6px;color:var(--dim-2);margin-bottom:7px;}
.tacmap{left:10px;top:104px;}
.tacmap canvas{display:block;width:160px;height:100px;border-radius:8px;background:#070c10;}
.spark{right:10px;top:104px;}
.spark canvas{display:block;width:180px;height:60px;border-radius:6px;background:#070c10;}
.hilo{display:flex;justify-content:space-between;gap:14px;margin-top:7px;}
.hilo span{display:block;font-size:8.5px;letter-spacing:1.2px;color:var(--dim-2);}
.hilo b{font-family:var(--mono);font-size:12px;font-weight:600;}
.hilo .r{text-align:right;}
.hilo .up{color:var(--green-2);} .hilo .down{color:var(--red-2);}
.unitov{left:12px;bottom:96px;min-width:184px;}
.unitov .army{margin-bottom:9px;}
.unitov .army:last-child{margin-bottom:0;}
.unitov .an{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.3px;color:var(--bone);}
.unitov .an i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.unitov .bull .an i{background:var(--green);box-shadow:0 0 8px var(--green);}
.unitov .bear .an i{background:var(--red);box-shadow:0 0 8px var(--red);}
.unitov .ar{display:flex;flex-direction:column;gap:2px;margin:4px 0 0 14px;
  font-family:var(--mono);font-size:12px;}
.unitov .bull .ar{color:var(--green-2);} .unitov .bear .ar{color:var(--red-2);}

.tools{position:absolute;top:calc(50% - 60px);right:16px;display:flex;flex-direction:column;gap:8px;z-index:7;}
.tools button{width:36px;height:36px;border-radius:50%;background:rgba(10,14,17,.72);
  border:1px solid var(--line);color:var(--dim);display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:.15s;}
.tools button:hover{color:var(--bone);border-color:var(--line-2);}
.tools button.on{color:var(--green-2);border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.12);}
.tools button.fs{color:#04160b;background:linear-gradient(180deg,#4ade80,#16a34a);
  border-color:transparent;box-shadow:0 4px 16px rgba(34,197,94,.34);}
.tools button.fs:hover{filter:brightness(1.09);color:#04160b;}
body.isfull .tools button.fs{background:rgba(10,14,17,.72);color:var(--green-2);
  border-color:rgba(34,197,94,.42);box-shadow:none;}
.tools svg{width:16px;height:16px;}
.tools button.zm{width:31px;height:31px;align-self:center;}
.tools button.zm svg{width:13px;height:13px;stroke-width:2;}
.tools button:active{transform:scale(.93);}

/* ---------------------------------------------- battle bar */
.round{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:6;
  display:flex;align-items:center;gap:12px;padding:6px 12px;width:min(470px,62%);
  background:rgba(10,13,16,.86);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(9px);box-shadow:0 18px 44px rgba(0,0,0,.5);}
.round .army{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto;min-width:50px;}
.round .army .tag{font-size:7.5px;letter-spacing:1.3px;color:var(--dim-2);}
.round .army .cnt{font-family:var(--mono);font-size:11px;font-weight:600;}
.round .army.bulls .cnt{color:var(--green-2);}
.round .army.bears .cnt{color:var(--red-2);}
.round .mid{flex:1;min-width:0;}
.rname{display:flex;justify-content:space-between;align-items:baseline;font-size:8.5px;
  letter-spacing:1.2px;color:var(--bone);text-transform:uppercase;}
.rname .clk{font-family:var(--mono);color:var(--dim);letter-spacing:1px;}
.strength{display:flex;height:4px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.06);margin:4px 0 3px;}
.s-bull{background:linear-gradient(90deg,#15803d,#4ade80);transition:width .4s ease;}
.s-bear{background:linear-gradient(90deg,#e8505b,#7d1f2a);transition:width .4s ease;}
.rmeta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:var(--dim-2);}
.rbar{height:2px;background:rgba(255,255,255,.07);border-radius:2px;margin-top:4px;overflow:hidden;}
.rbar i{display:block;height:100%;background:var(--amber);width:0;transition:width .6s linear;}
.round.won.bull{border-color:rgba(34,197,94,.5);box-shadow:0 0 40px rgba(34,197,94,.18);}
.round.won.bear{border-color:rgba(232,80,91,.5);box-shadow:0 0 40px rgba(232,80,91,.18);}

/* ---------------------------------------------- trade row */
.traderow{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:0 0 auto;}
.trade{display:flex;align-items:center;justify-content:center;gap:12px;height:62px;border-radius:14px;
  transition:filter .14s,transform .08s;}
.trade:hover{filter:brightness(1.08);}
.trade:active{transform:scale(.992);}
.ticon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.24);flex:0 0 auto;}
.ticon svg{width:17px;height:17px;stroke-width:2.2;}
.ticon img{border-radius:50%;display:block;}
.tlab{text-align:left;}
.tlab b{display:block;font-size:16px;font-weight:700;letter-spacing:.4px;}
.tlab em{display:block;font-style:normal;font-size:11.5px;opacity:.72;margin-top:1px;}
.trade.sell{background:linear-gradient(180deg,#dc4652,#a92834);color:#fff;
  box-shadow:0 8px 22px rgba(220,70,82,.2);}
.trade.buy{background:linear-gradient(180deg,#3ddc7a,#16a34a);color:#04160b;
  box-shadow:0 8px 22px rgba(34,197,94,.22);}

/* ---------------------------------------------- feature cards */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:0 0 auto;}
.feat{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;}
.fi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;background:rgba(34,197,94,.1);color:var(--green-2);border:1px solid rgba(34,197,94,.2);}
.fi svg{width:18px;height:18px;}
.feat b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.9px;white-space:nowrap;}
.feat p{font-size:11px;line-height:1.45;color:var(--dim);margin-top:4px;}

/* ======================================================== armory */
.rail.right{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;gap:14px;overflow-y:auto;}
.ahead{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;}
.ahead .k{font-size:15px;font-weight:600;letter-spacing:1.2px;}
.ahead button{color:var(--dim);font-size:15px;padding:4px 6px;border-radius:6px;}
.ahead button:hover{color:var(--bone);background:rgba(255,255,255,.06);}

.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;flex:0 0 auto;
  padding:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;}
.tabs button{padding:9px 4px;border-radius:8px;font-size:11.5px;font-weight:600;letter-spacing:1.1px;
  color:var(--dim);transition:.14s;}
.tabs button:hover{color:var(--bone);}
.tabs button.on{color:var(--green-2);background:rgba(34,197,94,.12);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.4);}

.acards{display:grid;grid-template-columns:1fr 1fr;gap:11px;flex:0 0 auto;}
.acard{display:flex;flex-direction:column;padding:11px 10px 10px;border-radius:13px;
  background:var(--panel-2);border:1px solid var(--line);text-align:center;transition:.15s;}
.acard:hover{border-color:rgba(34,197,94,.4);}
.acard.on{border-color:var(--green);box-shadow:0 0 0 1px rgba(34,197,94,.35),0 0 26px rgba(34,197,94,.12);}
.acard.gold{border-color:rgba(255,224,49,.34);}
.acard.gold:hover,.acard.gold.on{border-color:var(--gold);box-shadow:0 0 26px rgba(255,224,49,.14);}
.acard h4{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--bone);}
.acard .art{margin:9px 0 8px;border-radius:10px;overflow:hidden;background:#0a0d09;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.acard .art img{width:100%;height:100%;object-fit:cover;display:block;}
.acard .pr{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--green-2);}
.acard.gold .pr{color:var(--gold);}
.acard .pr span{display:block;font-family:var(--ui);font-size:9.5px;font-weight:400;
  letter-spacing:.6px;color:var(--dim-2);margin-top:2px;}
.acard .sup{font-size:10px;color:var(--dim-2);margin-top:5px;}
.acard .go{margin-top:9px;padding:9px 0;border-radius:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.8px;color:#04160b;background:linear-gradient(180deg,#4ade80,#16a34a);}
.acard.gold .go{color:#181300;background:linear-gradient(180deg,#ffe873,#d9b70b);}
.acard .go:hover{filter:brightness(1.08);}

/* sold out: the card stays, greyed and inert, so the supply story is visible */
.acard.out{opacity:.55;border-color:var(--line);box-shadow:none;filter:grayscale(1);}
.acard.out:hover{border-color:var(--line);}
.acard.out .art img{opacity:.6;}
.acard.out .pr,.acard.out .sup{color:var(--dim-2);}
.acard.out .go{background:rgba(255,255,255,.06);color:var(--dim-2);cursor:not-allowed;
  border:1px solid var(--line);filter:none;}
.acard .go:disabled{cursor:not-allowed;filter:none;}
.acard.out .sup b{color:var(--dim-2);}

.dominate{margin-top:auto;padding:14px;border-radius:13px;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--line);}
.dominate{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;}
.di{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.1);color:var(--green-2);}
.di svg{width:19px;height:19px;}
.dominate b{display:block;font-size:12px;font-weight:700;letter-spacing:1px;}
.dominate p{font-size:11px;line-height:1.45;color:var(--dim);margin-top:3px;}
.cta.wide{grid-column:1/-1;width:100%;height:46px;border-radius:11px;margin-top:3px;}

/* ======================================================== banner / errors */
.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:8;pointer-events:none;opacity:0;transition:opacity .5s;text-align:center;}
.banner.show{opacity:1;}
.banner .big{font-size:clamp(34px,5vw,68px);font-weight:800;letter-spacing:2px;
  text-shadow:0 6px 40px rgba(0,0,0,.85);}
.banner .sub{font-family:var(--mono);font-size:clamp(12px,1.4vw,18px);margin-top:8px;color:var(--bone);
  text-shadow:0 3px 18px rgba(0,0,0,.9);}
.banner .sub.dim{font-size:12px;color:var(--dim);margin-top:5px;}
.banner.bull .big{color:var(--green-2);}
.banner.bear .big{color:var(--red-2);}
.err{position:absolute;left:0;right:0;bottom:42%;text-align:center;font-family:var(--mono);
  font-size:12px;color:var(--amber);z-index:9;display:none;}

/* hover card for a named unit */
.herotip{position:fixed;z-index:50;pointer-events:none;opacity:0;transition:opacity .12s;
  padding:9px 12px;border-radius:9px;background:rgba(10,13,17,.95);border:1px solid var(--line-2);
  box-shadow:0 12px 32px rgba(0,0,0,.6);max-width:260px;}
.herotip.show{opacity:1;}
.herotip b{display:block;font-size:13.5px;color:var(--bone);}
.herotip span{display:block;font-size:11px;color:var(--dim);margin-top:2px;}
.herotip em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--green-2);margin-top:4px;}
.herotip q{display:block;font-style:italic;font-size:12px;color:var(--bone);margin-top:7px;
  padding-left:8px;border-left:2px solid rgba(34,197,94,.5);quotes:none;line-height:1.4;}
.herotip .xh{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--green-2);}
.herotip .xh u{text-decoration:none;color:var(--dim-2);font-size:10px;margin-left:auto;}
/* what the unit is doing right now — the answer to "where has mine gone" */
.herotip .hstate{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;
  color:var(--green-2);}
.herotip .hstate.rest{color:var(--amber,#f0c53a);}
.herotip u{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  text-decoration:none;font-size:10.5px;color:var(--dim-2);}

/* ======================================================== buy / swap panel */
#buyPanel{position:fixed;top:calc(var(--head-h) + 8px);right:16px;z-index:40;
  width:min(360px,calc(100vw - 24px));max-height:calc(100vh - var(--head-h) - 28px);
  overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(20,24,29,.98),rgba(12,15,19,.98));
  border:1px solid var(--line-2);border-radius:14px;box-shadow:0 26px 70px rgba(0,0,0,.66);
  backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transition:opacity .2s,transform .2s,visibility .2s;}
#buyPanel.open{opacity:1;visibility:visible;transform:none;}
.bhead{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 15px 10px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,rgba(20,24,29,.99),rgba(18,22,27,.97));}
.bhead .k{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:var(--dim-2);}
.bhead .n{font-size:15px;font-weight:650;margin-top:3px;}
.bhead button{color:var(--dim);font-size:15px;line-height:1;padding:4px 6px;border-radius:6px;}
.bhead button:hover{color:var(--bone);background:rgba(255,255,255,.06);}
.bbody{padding:13px 15px 15px;}
.brow.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.bpreset{padding:9px 0;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--dim);font-family:var(--mono);font-size:13px;font-weight:600;}
.bpreset:hover{color:var(--bone);border-color:var(--line-2);}
.bpreset.on{color:var(--green-2);border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12);}
.bfield{display:block;margin-top:13px;}
.bfield>span,.bget>span{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim-2);}
.binput{display:flex;align-items:center;gap:6px;margin-top:6px;padding:11px 12px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);}
.binput i{font-style:normal;color:var(--dim);font-family:var(--mono);font-size:17px;}
.binput input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--bone);
  font-family:var(--mono);font-size:19px;font-weight:600;-moz-appearance:textfield;}
.binput input::-webkit-outer-spin-button,.binput input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.binput textarea{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--bone);
  font-family:var(--ui);font-size:13.5px;line-height:1.45;resize:none;}
.binput textarea::placeholder{color:var(--dim-2);}
.bfield>span i{font-style:normal;color:var(--dim-2);letter-spacing:.6px;opacity:.7;}
.bfield em,.bget em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim-2);margin-top:5px;}
.bget{margin-top:13px;padding:11px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(34,197,94,.05);}
.bget b{display:block;font-family:var(--mono);font-size:19px;font-weight:650;color:var(--green-2);margin-top:5px;}
.bget em.warn{color:var(--amber);}
.baction{width:100%;margin-top:14px;padding:13px;border-radius:10px;font-size:14px;font-weight:700;
  letter-spacing:.6px;color:#04120a;background:linear-gradient(180deg,#4ade80,#16a34a);
  box-shadow:0 10px 24px rgba(34,197,94,.22);}
.baction:hover{filter:brightness(1.07);}
.baction:active{transform:scale(.99);}
.baction:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none;}
.bstatus{min-height:15px;margin-top:9px;font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.4;}
.bstatus.err{color:var(--red-2);} .bstatus.ok{color:var(--green-2);}
.blink{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--green-2);}
.balt{display:grid;gap:7px;margin-top:10px;}
.baltbtn{display:block;text-align:center;padding:10px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--dim);font-size:12.5px;text-decoration:none;}
.baltbtn:hover{color:var(--bone);border-color:var(--line-2);background:rgba(255,255,255,.06);}
.bwarn{margin-top:11px;border:1px solid var(--line);border-radius:9px;background:rgba(224,163,60,.05);}
.bwarn summary{cursor:pointer;list-style:none;padding:9px 11px;font-size:11.5px;color:var(--amber);}
.bwarn summary::-webkit-details-marker{display:none;}
.bwarn summary::before{content:'⚠ ';}
.bwarn[open] summary{border-bottom:1px solid var(--line);}
.bwarn p{padding:8px 11px 0;font-size:11px;line-height:1.55;color:var(--dim);}
.bwarn p:last-child{padding-bottom:10px;}
.bwarn b{color:var(--bone);} .bwarn em{color:var(--bone);font-style:italic;}
.bwarn code{font-family:var(--mono);font-size:10.5px;color:var(--amber);}
.bnote{margin-top:11px;font-size:11px;line-height:1.5;color:var(--dim-2);}
.bnote.dim{padding-top:10px;border-top:1px solid var(--line);}
.bnote a{color:var(--green-2);}

/* ======================================================== mint sheet */
.mintsheet{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(3,6,4,.74);backdrop-filter:blur(8px);}
.mintsheet.on{display:flex;}
.msinner{width:min(400px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:16px;
  background:linear-gradient(180deg,rgba(20,24,29,.99),rgba(12,15,19,.99));
  border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.7);}
.mshead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.mshead .k{font-size:11px;letter-spacing:1.7px;color:var(--dim-2);text-transform:uppercase;}
.mshead .n{font-size:17px;font-weight:700;margin-top:3px;color:var(--green-2);}
.mshead button{color:var(--dim);font-size:16px;padding:4px 6px;border-radius:6px;}
.mshead button:hover{color:var(--bone);background:rgba(255,255,255,.06);}
.rcard{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid rgba(34,197,94,.24);background:#0c0e0b;}
.rname .binput input{font-size:16px;text-transform:uppercase;}
.rprice{display:grid;gap:6px;margin-top:11px;}
.rprice span{font-family:var(--mono);font-size:11.5px;color:var(--dim);
  padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);}
.rprice span b{color:var(--green-2);}
.rbal{color:var(--dim);}
.rbal.ok{color:var(--green-2);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06);}
.rbal.short{color:var(--amber);border-color:rgba(224,163,60,.4);background:rgba(224,163,60,.07);}
.rpreview{width:100%;margin-top:9px;padding:11px;border-radius:10px;
  border:1px solid rgba(34,197,94,.34);background:rgba(34,197,94,.08);
  color:var(--green-2);font-size:12.5px;font-weight:600;}
.rpreview:hover{background:rgba(34,197,94,.16);}
.rmint{margin-top:11px;}
.rmint:disabled{background:rgba(255,255,255,.06);color:var(--dim-2);box-shadow:none;
  border:1px solid var(--line);}

/* ======================================================== find a recruit */
/* Bottom-left: the top corners belong to the walls, and the search box was
   parked squarely on top of the sell wall. */
/* Bottom centre, directly above the battle bar. Every corner of the field now
   holds a panel, and the search box had been sitting on top of the tactical
   map. */
.finder{position:absolute;left:50%;transform:translateX(-50%);bottom:86px;width:min(300px,60%);z-index:7;}
.fresults{position:absolute;bottom:100%;left:0;right:0;margin:0 0 6px;}
.finder .fbox{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;
  background:rgba(8,12,9,.8);border:1px solid var(--line);backdrop-filter:blur(7px);}
.finder .fbox:focus-within{border-color:var(--green);}
.finder svg{width:14px;height:14px;flex:none;stroke:var(--dim-2);stroke-width:2;}
.finder input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--bone);
  font:600 12px/1.2 var(--mono);letter-spacing:.3px;}
.finder input::placeholder{color:var(--dim-2);letter-spacing:.2px;}
.finder #findClear{color:var(--dim-2);font-size:11px;padding:0 2px;display:none;}
.finder.has #findClear{display:block;}
.fresults{display:none;flex-direction:column;gap:4px;}
.finder.has .fresults{display:flex;}
.fres{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;cursor:pointer;
  background:rgba(8,12,9,.92);border:1px solid var(--line);text-align:left;width:100%;color:var(--bone);}
.fres:hover{border-color:rgba(34,197,94,.45);}
.fres .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 11.5px var(--mono);letter-spacing:.4px;}
.fres .fk{font-size:9px;color:var(--dim-2);letter-spacing:.6px;text-transform:uppercase;}
.fres .fs{font:700 9px var(--mono);letter-spacing:.6px;padding:2px 6px;border-radius:20px;flex:none;}
.fres .fs.fight{color:#04160b;background:var(--green-2);}
.fres .fs.rest{color:var(--dim);background:rgba(255,255,255,.08);}
.fres.none{color:var(--dim-2);font-size:11px;cursor:default;}
.fres .fp{flex:none;text-decoration:none;color:var(--dim-2);font-size:12px;line-height:1;
  padding:4px 6px;border-radius:6px;border:1px solid var(--line);}
.fres .fp:hover{color:var(--green-2);border-color:rgba(34,197,94,.45);}

/* ======================================================== NFT reveal */
body.rv-open{overflow:hidden;}
.reveal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:28px;}
.reveal.on{display:flex;animation:rvIn .28s ease both;}
@keyframes rvIn{from{opacity:0}to{opacity:1}}
.rv-back{position:absolute;inset:0;background:rgba(3,6,4,.88);backdrop-filter:blur(10px);}
.rv-wrap{position:relative;display:flex;align-items:center;gap:42px;max-width:1060px;width:100%;}
.rv-stage{position:relative;flex:none;width:min(46vh,430px);aspect-ratio:1;
  perspective:1100px;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--go:0;}
.rv-stage canvas{width:100%;height:100%;display:block;border-radius:20px;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .12s ease-out;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(34,197,94,.22),0 0 60px rgba(34,197,94,.14);}
.rv-gloss{position:absolute;inset:0;border-radius:20px;pointer-events:none;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .12s ease-out,opacity .2s;opacity:var(--go);
  background:radial-gradient(circle at var(--gx) var(--gy),
    rgba(255,255,255,.30),rgba(255,255,255,.06) 34%,transparent 62%);
  mix-blend-mode:screen;}
.rv-side{flex:1;min-width:0;}
.rv-tag{font:700 10px var(--mono);letter-spacing:2.4px;color:var(--green-2);margin-bottom:10px;}
.rv-side h2{font:800 clamp(30px,5vw,54px)/1.02 var(--mono);color:#fff;margin:0 0 12px;
  letter-spacing:1px;word-break:break-word;}
.rv-sub{color:var(--dim);font-size:13px;line-height:1.55;margin:0 0 22px;max-width:42ch;}
.rv-acts{display:flex;gap:10px;flex-wrap:wrap;}
.rv-acts button{font:700 12.5px var(--mono);letter-spacing:.6px;padding:13px 22px;border-radius:10px;
  border:1px solid transparent;}
.rv-dl{background:var(--green-2);color:#04160b;}
.rv-dl:hover{background:var(--green-3);}
.rv-x{background:#111813;color:var(--bone);border-color:#24352a;
  text-decoration:none;display:inline-block;}
.rv-x:hover{border-color:var(--green);}
.rv-hint{color:var(--dim-2);font-size:11px;margin:16px 0 0;}
.rv-close{position:absolute;top:-10px;right:-6px;color:var(--dim);font-size:19px;padding:8px;}
.rv-close:hover{color:var(--bone);}

/* ======================================================== small-screen gate */
.gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,6,10,.72);backdrop-filter:blur(18px) saturate(.7);opacity:0;transition:opacity .32s ease;}
.gate.show{opacity:1;}
.gate[hidden]{display:none;}
.gate-card{width:min(420px,100%);text-align:center;padding:26px 22px 22px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,24,29,.96),rgba(12,15,19,.96));
  border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.98);transition:transform .32s cubic-bezier(.2,.8,.3,1);}
.gate.show .gate-card{transform:none;}
.gate-card img{width:62px;height:62px;border-radius:14px;object-fit:cover;margin:0 auto 14px;display:block;
  border:1px solid rgba(34,197,94,.32);box-shadow:0 0 26px rgba(34,197,94,.28);}
.gate-card h2{font-size:20px;font-weight:650;}
.gate-card p{font-size:13.5px;line-height:1.55;color:var(--dim);margin-top:9px;}
.gate-card p.tips{font-size:12px;color:var(--dim-2);background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:14px;line-height:1.5;}
.gate-card p.tips b{color:var(--bone);font-weight:600;}
.gate-card button{display:block;width:100%;border-radius:10px;font-size:14px;}
.gate-card .go{margin-top:16px;padding:13px;font-weight:650;color:#04120a;
  background:linear-gradient(180deg,#4ade80,#16a34a);box-shadow:0 10px 26px rgba(34,197,94,.24);}
.gate-card .alt{margin-top:9px;padding:11px;color:var(--dim);border:1px solid var(--line);}
.gate-card .alt:hover{color:var(--bone);border-color:var(--line-2);}
.gate-card .note{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim-2);
  margin-top:10px;word-break:break-all;min-height:13px;}
body.gated .shell{pointer-events:none;}

/* ======================================================== mobile tab bar */
.tabbar{display:none;}
.livepill{display:none;}

/* The explicit height above must not survive into full screen — an author
   rule can beat the UA's fullscreen sizing, and a stage pinned to the viewport
   with a 732px height is a window, not full screen. */
.stage:fullscreen{border-radius:0;border:0;height:auto;min-height:0;}
.stage:fullscreen .fieldtop{padding:26px 34px;}
.stage:-webkit-full-screen{border-radius:0;border:0;height:auto;min-height:0;}

/* ======================================================== responsive */
@media (max-width:1500px){
  .shell{grid-template-columns:290px minmax(0,1fr) 320px;}
  .stat{padding:0 14px;}
}
@media (max-width:1320px){
  .brand{width:auto;}
  .wordmark span{display:none;}
  .fbtag{display:none;}
  .shell{grid-template-columns:262px minmax(0,1fr) 300px;}
  .acards{gap:9px;}
  .features{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1120px){
  .statstrip .stat:nth-child(3){display:none;}   /* volume goes first, it is the least urgent */
  .shell{grid-template-columns:240px minmax(0,1fr) 280px;}
}

/* ---------------------------------------------- phone / tablet */
@media (max-width:980px){
  html,body{overflow:auto;height:auto;}
  :root{--head-h:auto;}

  /* One row across the top, as in the design: mark, live, contract, connect.
     Everything shrinks to fit rather than wrapping into three rows. */
  .apphead{flex-wrap:wrap;gap:8px;padding:9px 10px;position:sticky;top:0;z-index:30;
    background:rgba(5,7,10,.94);backdrop-filter:blur(10px);}
  .brand{width:auto;gap:8px;flex:0 1 auto;min-width:0;}
  .mark{width:32px;height:32px;border-radius:9px;}
  .wordmark b{font-size:15px;letter-spacing:.2px;}
  .wordmark span{display:block;font-size:7.5px;letter-spacing:2.2px;}
  .statstrip{order:3;width:100%;flex-basis:100%;padding:8px 0;}
  .statstrip .stat.live{display:none;}          /* it moves up beside the logo */
  .statstrip .stat:nth-child(3){display:flex;}
  .stat{flex:1 1 0;padding:0 10px;}
  .stat>span{font-size:8.5px;letter-spacing:1.1px;}
  .stat em,.stat em.press{font-size:13.5px;}
  .pricerow{gap:5px;flex-wrap:wrap;}
  .pricerow .chg{font-size:10.5px;}
  .headright{margin-left:auto;gap:6px;flex:0 0 auto;}
  .ca{height:34px;padding:0 8px;font-size:10.5px;gap:6px;max-width:118px;overflow:hidden;}
  .ca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ca img{width:16px;height:16px;}
  .cta{height:34px;padding:0 12px;font-size:10.5px;letter-spacing:.2px;}
  .gear{display:none;}                          /* the stats panel lives on the MARKET tab */

  /* the live pill rides in the header on small screens */
  .apphead .livepill{display:flex;align-items:center;gap:6px;height:34px;padding:0 9px;
    border-radius:10px;background:var(--panel);border:1px solid var(--line);flex:0 0 auto;}
  .apphead .livepill>div{display:flex;flex-direction:column;line-height:1.15;}
  .apphead .livepill i{width:7px;height:7px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px var(--green);animation:blip 1.7s infinite;}
  .apphead .livepill b{font-size:10px;font-weight:600;color:var(--green-2);}
  .apphead .livepill span{font-size:8px;color:var(--dim);white-space:nowrap;}

  .shell{height:auto;grid-template-columns:1fr;gap:10px;padding:10px 10px 92px;}
  .rail{order:2;}
  .rail.right{order:3;}
  .centre{order:1;grid-template-rows:auto auto auto auto;}

  .fieldbar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 12px;}
  .fbstats{width:100%;justify-content:space-between;gap:10px;}

  .stage{height:64vh;min-height:360px;}

  /* ---- the field HUD on a small screen ----
     Three glass cards, a price, a search box, a battle bar and six round
     buttons over a stage 370 pixels wide is not a layout, it is a pile. The
     same numbers survive; the chrome around them does not. The three cards
     become one strip with two dividers, and every sub-line that restates
     something already on screen goes. */
  .fieldtop{padding:7px 4px;gap:0;align-items:center;
    grid-template-columns:0.92fr 1.45fr 0.92fr;
    background:linear-gradient(180deg,rgba(7,11,15,.92),rgba(7,11,15,.72) 78%,transparent);}
  .hcard{background:transparent;border:0;border-radius:0;padding:0 9px;backdrop-filter:none;}
  .hcard.status{border-left:1px solid var(--line);border-right:1px solid var(--line);}
  .hcard .k{font-size:7.5px;letter-spacing:.9px;}
  .hcard .k i{display:none;}
  .hcard .v{font-size:15px;margin-top:1px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
  .hcard .s,.hcard .n{display:none;}      /* ASK DEPTH · +10% · 586,118 */
  /* One line, always. Wrapped onto two it grew the middle cell and pushed the
     engagement bar down over the price underneath it. */
  .statusline{font-size:9.5px;margin-top:2px;gap:3px;white-space:nowrap;
    max-width:100%;overflow:hidden;}
  .statusline svg{width:9px;height:9px;flex:0 0 auto;}
  .engbar{height:4px;margin:5px 0 3px;}
  .engrow{font-size:7px;letter-spacing:.8px;}
  .engrow b{font-size:9px;}

  /* The corner instruments are a desktop thing. On a 390-pixel screen the
     tactical map and the price trace alone cover the top third of the field,
     and the unit overview repeats numbers the battle bar is already showing —
     which is the pile this whole block exists to clear. */
  .tacmap,.spark,.unitov{display:none;}

  .fieldmid{top:70px;}
  /* Under the price, centred: the right-hand slot it uses on a desktop is
     where the tools column lives on a phone. */
  /* left:50% with no right leaves the element half a stage to grow into, which
     is not enough — it wrapped onto the price. */
  .zoomhint{bottom:auto;right:auto;left:50%;transform:translateX(-50%);
    top:124px;font-size:9px;padding:4px 10px;white-space:nowrap;}
  .fieldmid .k{display:none;}             /* the header already says ANSEM PRICE */
  .fieldmid .price{font-size:28px;}
  .fieldmid .chg{font-size:11px;}

  /* Pinch to zoom, so the two zoom buttons are a duplicate of a gesture the
     screen already has. Rotate needs two fingers here, which is the same. */
  .tools{top:auto;bottom:122px;right:10px;flex-direction:column;gap:7px;}
  .tools button{width:33px;height:33px;}
  .tools button.zm,#btnRotate{display:none;}

  /* the battle bar: who, how far to a break, and how many have fallen */
  .round{width:calc(100% - 16px);bottom:8px;gap:9px;padding:7px 10px;border-radius:11px;}
  .round .army{min-width:0;}
  .round .army .tag{display:none;}
  .round .army .cnt{font-size:11.5px;}
  .rname{font-size:9px;letter-spacing:1px;}
  .strength{height:5px;margin:5px 0 4px;}
  .rmeta{font-size:8px;}
  .rmeta span:first-child{display:none;}   /* the range is on the price above */
  .rbar{margin-top:4px;}

  .finder{width:calc(100% - 24px);left:50%;bottom:80px;}

  .traderow{gap:10px;}
  .trade{height:58px;}
  .features{grid-template-columns:1fr 1fr;gap:10px;}

  /* the two data panels sit side by side under the field, as in the mockup */
  .rail.left{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .rail.left .pnl{min-height:0;}
  #depthCanvas{height:92px;}

  .rail.right{padding:12px;}
  .acards{grid-template-columns:repeat(2,1fr);}

  /* bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:35;height:74px;padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    background:rgba(8,10,13,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim-2);
    font-size:8.5px;letter-spacing:.7px;font-weight:600;padding:4px 0;}
  .tabbar button svg{width:20px;height:20px;}
  .tabbar button.on{color:var(--green-2);}
  .tabbar button.mid{position:relative;}
  .tabbar button.mid .plus{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(180deg,#4ade80,#16a34a);color:#04160b;
    box-shadow:0 6px 20px rgba(34,197,94,.4);margin-top:-24px;}
  .tabbar button.mid .plus svg{width:23px;height:23px;stroke-width:2.6;}

  #buyPanel{top:auto;bottom:0;right:0;left:0;width:100%;border-radius:16px 16px 0 0;
    max-height:82vh;transform:translateY(14px);}
  #buyPanel.open{transform:none;}
  .mintsheet{padding:0;align-items:flex-end;}
  .msinner{width:100%;max-height:88vh;border-radius:18px 18px 0 0;}
}

@media (max-width:640px){
  /* Keep the top bar to a single row. Below this width the only way to do
     that is to drop the live pill's sub-label; the dot and the word still
     say everything it needs to. */
  .apphead{gap:6px;padding:9px 8px;}
  .brand{gap:7px;}
  .mark{width:30px;height:30px;}
  .wordmark b{font-size:14px;}
  .wordmark span{font-size:7px;letter-spacing:1.8px;}
  .apphead .livepill{padding:0 8px;gap:5px;}
  .apphead .livepill span{display:none;}
  .ca{max-width:102px;padding:0 7px;font-size:10px;}
  .cta{padding:0 11px;font-size:10.5px;}

  .rail.left{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr;}
  /* three cells, one row — wrapping them turned the strip into a paragraph */
  .stat{flex:1 1 0;padding:0 8px;}
  .stat>span{font-size:8px;letter-spacing:.9px;}
  .stat em,.stat em.press{font-size:12.5px;}
  .pricerow{flex-direction:column;align-items:flex-start;gap:0;}
  .pricerow .chg{font-size:10px;}
  .stage{height:60vh;min-height:320px;}
  .fieldmid .price{font-size:26px;}
  .acards{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
  .stage{height:76vh;min-height:240px;}
  .tools{bottom:auto;top:10px;right:10px;}
}

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

/* =========================================================================
   The first-run walkthrough.

   One dark layer with a hole in it. The hole is a real element whose
   box-shadow spreads far enough to cover any screen, so the lit area is
   exactly the element being talked about, corners and all.
   ========================================================================= */
.tour{position:fixed;inset:0;z-index:200;opacity:0;transition:opacity .26s ease;}
.tour.show{opacity:1;}
.thole{position:absolute;left:0;top:0;width:0;height:0;border-radius:14px;
  box-shadow:0 0 0 9999px rgba(3,7,11,.76);border:1px solid rgba(74,222,128,.55);
  transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1),
             width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
.tcard{position:absolute;width:420px;max-width:calc(100vw - 16px);
  background:rgba(12,18,23,.97);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px 14px;box-shadow:0 26px 70px rgba(0,0,0,.6);
  transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1);}
.tcard .tstep{font-size:9.5px;letter-spacing:1.8px;color:var(--green-2);}
.tcard h4{margin:7px 0 6px;font-size:16.5px;font-weight:600;letter-spacing:.2px;}
.tcard p{margin:0;font-size:13px;line-height:1.55;color:var(--bone);}
.tcard p b{color:#fff;font-weight:600;}
.trow{display:flex;align-items:center;gap:8px;margin-top:14px;}
.tdots{display:flex;gap:5px;margin-right:auto;margin-left:10px;}
.tdots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);}
.tdots i.on{background:var(--green);box-shadow:0 0 7px var(--green);}
.trow button{font-size:12px;letter-spacing:.3px;border-radius:9px;padding:7px 14px;
  border:1px solid var(--line);color:var(--bone);background:transparent;cursor:pointer;}
.trow button:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.trow .tskip{margin-right:0;border-color:transparent;color:var(--dim);}
.trow .tback:disabled{opacity:.32;cursor:default;}
.trow .tnext{background:var(--green);border-color:var(--green);color:#04140a;font-weight:700;}
.trow .tnext:hover{background:var(--green-3);color:#04140a;}
@media (max-width:900px){
  .tcard{width:calc(100vw - 24px);}
  .tdots{display:none;}
}

/* =========================================================================
   The wallet: what you hold, and the account menu behind the button.
   ========================================================================= */
.stat.holding em{color:var(--green-2);}
.stat.holding .chg{color:var(--dim);font-style:normal;}
.stat.holding .chg.up{color:var(--green-3);}

.wwrap{position:relative;}
.wmenu{position:fixed;top:64px;right:16px;z-index:200;width:268px;
  background:rgba(12,18,23,.98);border:1px solid var(--line);border-radius:14px;
  padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.62);backdrop-filter:blur(12px);}
.wtitle{font-size:9.5px;letter-spacing:1.6px;color:var(--dim-2);
  text-transform:uppercase;padding:2px 4px 8px;}
.waddr{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  cursor:pointer;margin-bottom:8px;}
.waddr code{font-family:var(--mono);font-size:11.5px;color:var(--bone);}
.waddr span{font-size:10px;letter-spacing:1px;color:var(--green-2);}
.waddr:hover{border-color:rgba(74,222,128,.4);}
.wrow{display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;font-size:11px;letter-spacing:1px;color:var(--dim);}
.wrow b{font-family:var(--mono);font-size:13px;color:#fff;letter-spacing:0;}
.wnote{padding:6px 10px 8px;font-size:11px;line-height:1.45;color:var(--amber,#e7b55c);}
.wopt{display:block;width:100%;text-align:left;padding:9px 10px;margin-top:4px;text-decoration:none;
  border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--bone);font-size:12.5px;cursor:pointer;}
.wopt:hover{background:rgba(255,255,255,.06);color:#fff;}
.wopt.danger{color:var(--red-2);}
.wopt.danger:hover{background:rgba(232,80,91,.12);}
.wopt.strong{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.35);
  color:#dbffe8;font-weight:600;}
.wopt.strong:hover{background:rgba(74,222,128,.22);}
.wnote a{color:var(--green-2);text-decoration:underline;}
.wnote.dim{color:var(--dim-2);font-size:10.5px;padding-top:10px;}

/* ---- the connect sheet's hierarchy ----

   Three levels and no more: the title says what this is, the two wallet
   buttons are the only bright things in the panel, and everything under them
   is grey and small. The first version had five near-identical mentions of
   the same two wallet names competing at the same weight, which is how a
   two-tap job reads as a decision.

   .wbig is the primary: the wallet's name, large, centred, and nothing else
   in it — no verb, no arrow, no explanation. The sentence above it already
   said what pressing it does. */
/* The lead sentence. .wnote is amber because it is the class warnings use —
   "low SOL", "the mint is closed" — and an amber sentence sitting above two
   green buttons reads as a problem rather than an instruction. This is not a
   warning; it is the one line that says what the buttons do. */
.wnote.wlead{color:var(--bone);opacity:.82;}

.wbig{text-align:center;font:700 15px var(--mono);letter-spacing:1.4px;
  padding:15px 12px;margin-top:7px;}
.wbig + .wbig{margin-top:8px;}

/* The secondary routes, folded away. They are real and some people need them;
   nobody needs them first. */
.wmore{margin-top:12px;border-top:1px solid var(--line);padding-top:8px;}
.wmore summary{list-style:none;cursor:pointer;padding:6px 4px;
  font-size:11px;letter-spacing:.6px;color:var(--dim-2);}
.wmore summary::-webkit-details-marker{display:none;}
.wmore summary::after{content:' \25be';}
.wmore[open] summary::after{content:' \25b4';}
.wmore summary:hover{color:var(--bone);}
.wmore .wopt{font-size:12px;}

/* On a phone the menu is a sheet, not a dropdown. The wallet button lives in
   the header, and the tab bar at the bottom opens the same panel — a 268px
   box pinned under a header the reader has scrolled away from is a panel
   nobody sees. */
@media (max-width:980px){
  .wmenu{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));
    top:auto;width:auto;padding:14px;border-radius:18px;}
  .wopt{padding:14px 12px;font-size:14px;text-align:center;}
  .wopt.strong{border-width:1px;}
  .wbig{font-size:17px;padding:17px 12px;letter-spacing:1.8px;}
  .wtitle{font-size:11px;letter-spacing:2px;padding-bottom:6px;}
  .wmore summary{font-size:12.5px;padding:10px 4px;text-align:center;}
  .wmore .wopt{font-size:13px;}
  .waddr{padding:12px;}
  .wnote{font-size:12.5px;}
}

/* ---- theatre mode ----
   The same thing the Fullscreen API does, done in CSS, because iOS Safari has
   no element fullscreen at all — only video can go full screen there — and a
   tap that silently does nothing is worse than no gesture. The stage is pinned
   over everything and the page underneath stops scrolling. */
body.theatre{overflow:hidden;}
body.theatre .stage{position:fixed;inset:0;width:auto;height:auto;min-height:0;
  margin:0;border-radius:0;z-index:150;}
body.theatre .tabbar{display:none;}
body.theatre .fieldtop{padding-top:calc(7px + env(safe-area-inset-top));}
body.theatre .round{bottom:calc(8px + env(safe-area-inset-bottom));}

/* The field is clickable: one click or tap takes it full screen. The cursor
   stays a grab hand — dragging the map is the thing people do most, and
   telling them it zooms would be advertising the rarer action. */
/* Centred over the field rather than pinned to an edge: every edge of this
   screen already has a panel on it, and a mode notice that overlaps the
   battle status card is worse than no notice. Transient, and click-through. */
.fullhint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:8;
  pointer-events:none;font-size:12px;letter-spacing:1.3px;color:var(--bone);
  background:rgba(6,10,14,.78);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;backdrop-filter:blur(10px);opacity:0;
  transition:opacity .45s ease;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.fullhint.show{opacity:1;}

/* =========================================================================
   The weekly burn.

   A clock, what it is worth, and a link to the transaction once there is one.
   The strip is a promise with a countdown on it, so it says plainly what the
   page can prove and what it cannot: the raid over the field is automatic,
   the burn itself is a transaction somebody sends.
   ========================================================================= */
.burn{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;align-items:center;gap:16px;
  padding:12px 16px;border-radius:14px;background:
    linear-gradient(90deg,rgba(58,22,10,.55),rgba(12,16,20,.7) 46%),var(--panel);
  border:1px solid rgba(232,120,60,.24);flex:0 0 auto;}
.bhead{display:flex;align-items:center;gap:11px;min-width:0;}
.bico{font-size:20px;line-height:1;filter:saturate(1.2);}
.bhead b{display:block;font-size:11px;letter-spacing:1.6px;color:#ffb27a;}
.bhead em{display:block;font-style:normal;font-size:11px;line-height:1.4;color:var(--dim);margin-top:2px;}
.bnum{display:flex;flex-direction:column;gap:1px;min-width:0;}
.bnum span{font-size:8.5px;letter-spacing:1.3px;color:var(--dim-2);}
.bnum b{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--bone);}
.bnum i{font-style:normal;font-size:10px;color:var(--dim-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.blinks{display:flex;flex-direction:column;gap:6px;}
.bhead em a{color:#ffb27a;text-decoration:underline;}
.bproof.done{color:var(--green-2);border-color:rgba(74,222,128,.34);}
.bproof.done:hover{background:rgba(74,222,128,.12);}
.bproof{font-size:11px;letter-spacing:.4px;color:#ffb27a;border:1px solid rgba(232,120,60,.34);
  border-radius:9px;padding:7px 12px;white-space:nowrap;}
.bproof:hover{background:rgba(232,120,60,.12);}
/* the last stretch */
.burn.soon{border-color:rgba(232,80,91,.5);animation:burnpulse 1.6s infinite;}
.burn.soon .bnum b{color:#ff9a86;}
.burn.live{border-color:rgba(255,140,60,.75);background:
  linear-gradient(90deg,rgba(120,38,12,.72),rgba(20,12,10,.75) 60%);}
@keyframes burnpulse{0%,100%{box-shadow:0 0 0 rgba(232,80,91,0);}
  50%{box-shadow:0 0 26px rgba(232,80,91,.28);}}
@media (max-width:980px){
  .burn{grid-template-columns:1fr 1fr;gap:10px;padding:11px 12px;}
  .bhead{grid-column:1 / -1;}
  .blinks{grid-column:1 / -1;flex-direction:row;}
  .bproof{flex:1;text-align:center;}
  .bnum b{font-size:15px;}
}

/* ================================================= "your NFT is minting"
   The screen between approving the payment and seeing the card. It exists so
   that nobody is ever told to reload the page after paying. */
.minting{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:20px;}
.minting.on{display:flex;}
.mt-back{position:absolute;inset:0;background:rgba(4,6,8,.86);backdrop-filter:blur(8px);}
.mt-card{position:relative;width:min(430px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  padding:26px 26px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(20,25,29,.99),rgba(11,14,18,.99));
  border:1px solid var(--line-2);box-shadow:0 34px 90px rgba(0,0,0,.72);}
.mt-badge{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(74,222,128,.3);background:rgba(34,197,94,.08);}
.mt-spin{width:22px;height:22px;border-radius:50%;border:2px solid rgba(74,222,128,.22);
  border-top-color:var(--green-2);animation:mtspin .9s linear infinite;}
@keyframes mtspin{to{transform:rotate(360deg);}}
.mt-tag{font:700 9.5px var(--mono);letter-spacing:2.4px;color:var(--green-2);}
.mt-card h2{font:800 clamp(24px,6vw,34px)/1.05 var(--mono);letter-spacing:1px;margin:8px 0 10px;
  word-break:break-word;}
.mt-lead{font-size:13px;line-height:1.5;color:var(--dim);}
.mt-steps{list-style:none;margin:20px 0 0;padding:0;text-align:left;}
.mt-steps li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;
  color:var(--dim-2);}
.mt-steps li i{width:9px;height:9px;flex:none;border-radius:50%;border:1px solid var(--line-2);}
.mt-steps li.now{color:var(--bone);}
.mt-steps li.now i{border-color:var(--green-2);background:var(--green-2);
  box-shadow:0 0 0 4px rgba(74,222,128,.16);animation:mtpulse 1.3s ease-in-out infinite;}
.mt-steps li.done{color:var(--dim);}
.mt-steps li.done i{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.5);}
@keyframes mtpulse{50%{box-shadow:0 0 0 8px rgba(74,222,128,.06);}}
.mt-note{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font:600 11.5px var(--mono);color:var(--green-2);letter-spacing:.3px;}
.mt-fine{margin-top:9px;font-size:10.5px;line-height:1.55;color:var(--dim-2);}
body.mt-open{overflow:hidden;}

/* =========================================================== playing a unit
   The dock sits under the field, above the round bar. Three shapes: an offer,
   a live HUD, and a live HUD that is shouting about a hospital. */
.playdock{position:absolute;left:50%;transform:translateX(-50%);bottom:86px;z-index:22;
  display:none;align-items:center;flex-wrap:wrap;gap:11px;padding:8px 10px;border-radius:12px;
  max-width:min(560px,calc(100% - 24px));
  background:rgba(9,13,17,.93);border:1px solid var(--line-2);
  box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(8px);}
.playdock.on{display:flex;}
.playdock.live{border-color:rgba(89,224,255,.4);}
.playdock.hurt{border-color:rgba(232,80,91,.65);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(232,80,91,.2);
  animation:pdpulse 1.1s ease-in-out infinite;}
.playdock.ward{border-color:rgba(89,224,255,.7);animation:none;}
.playdock.auto{border-color:var(--line-2);}
@keyframes pdpulse{50%{border-color:rgba(232,80,91,.28);}}

.pd-lead{min-width:0;flex:none;max-width:150px;}
.pd-lead b{display:block;font:700 12.5px var(--mono);letter-spacing:.4px;color:var(--bone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-lead span{display:block;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.pd-hp{position:relative;flex:none;width:96px;height:16px;border-radius:8px;
  background:rgba(255,255,255,.07);overflow:hidden;}
.pd-hp i{display:block;height:100%;border-radius:8px;transition:width .18s linear;
  background:linear-gradient(90deg,#4ade80,#22c55e);}
.playdock.hurt .pd-hp i,.playdock.ward .pd-hp i{background:linear-gradient(90deg,#e8505b,#f0777f);}
.pd-hp u{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;
  font:700 9.5px var(--mono);color:#04140a;}

.pd-hint{flex:1 1 170px;min-width:130px;font-size:11px;line-height:1.35;color:var(--dim);}
.playdock.hurt .pd-hint{color:#ffb3b8;font-weight:600;}
.playdock.ward .pd-hint{color:#9fe9ff;font-weight:600;}

.pd-go,.pd-auto{flex:none;padding:8px 13px;border-radius:9px;cursor:pointer;
  font:700 11px var(--mono);letter-spacing:.7px;border:1px solid transparent;
  background:linear-gradient(180deg,#4ade80,#16a34a);color:#04160b;}
.pd-go:hover,.pd-auto:hover{filter:brightness(1.08);}
.pd-auto{background:rgba(255,255,255,.06);color:var(--bone);border-color:var(--line-2);}
.pd-auto:hover{background:rgba(255,255,255,.11);}
.pd-pick{flex:none;max-width:150px;padding:7px 8px;border-radius:8px;font:600 11px var(--mono);
  background:rgba(255,255,255,.05);color:var(--bone);border:1px solid var(--line-2);}
.pd-x{flex:none;width:26px;height:26px;border-radius:7px;color:var(--dim-2);font-size:12px;
  border:1px solid var(--line);cursor:pointer;}
.pd-x:hover{color:var(--bone);border-color:var(--line-2);}

/* the way to the hospital, when the camera is pointed at whatever hit you */
.playarrow{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:21;
  display:none;flex-direction:column;align-items:center;gap:3px;pointer-events:none;
  padding:10px 14px;border-radius:12px;background:rgba(9,16,20,.82);
  border:1px solid rgba(89,224,255,.5);}
.playarrow.on{display:flex;animation:pafade .3s ease both;}
@keyframes pafade{from{opacity:0}to{opacity:1}}
.playarrow svg{width:34px;height:34px;fill:none;stroke:#59e0ff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(calc(var(--rot,0deg) + 90deg));
  transition:transform .12s linear;}
.playarrow b{font:700 9px var(--mono);letter-spacing:1.8px;color:#9fe9ff;}
.playarrow .pa-m{font:700 15px var(--mono);color:#fff;}

/* ---- the crosshair ----
   Four ticks and a dot, drawn dead centre. Not a reticle with a scope in it:
   the shot picks the man nearest the middle of the screen inside a wide cone,
   so a crosshair that promised pixel accuracy would be lying. This says
   "the middle of the screen is where you are pointing", which is true. */
.crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;z-index:20;
  transform:translate(-50%,-50%);display:none;pointer-events:none;}
.crosshair.on{display:block;}
.crosshair i{position:absolute;background:rgba(255,255,255,.82);
  box-shadow:0 0 3px rgba(0,0,0,.9);}
.crosshair i:nth-child(1){left:50%;top:0;width:1.5px;height:9px;margin-left:-.75px;}
.crosshair i:nth-child(2){left:50%;bottom:0;width:1.5px;height:9px;margin-left:-.75px;}
.crosshair i:nth-child(3){top:50%;left:0;height:1.5px;width:9px;margin-top:-.75px;}
.crosshair i:nth-child(4){top:50%;right:0;height:1.5px;width:9px;margin-top:-.75px;}
/* THE GAP IS THE CONE.

   --gap is written every frame from the weapon's actual spread in radians,
   converted to the pixels that cone covers at this field of view. So the
   crosshair is not a picture of a stance any more, it is a picture of where
   the rounds will go: it breathes open on every shot, opens wide when you
   run, and closes to almost nothing down the sights. A crosshair that
   promises an accuracy the gun does not have is worse than none. */
.crosshair{--gap:6px;}
.crosshair i:nth-child(1){transform:translateY(calc(var(--gap) * -1));}
.crosshair i:nth-child(2){transform:translateY(var(--gap));}
.crosshair i:nth-child(3){transform:translateX(calc(var(--gap) * -1));}
.crosshair i:nth-child(4){transform:translateX(var(--gap));}
.crosshair s{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:#59e0ff;box-shadow:0 0 6px rgba(89,224,255,.9);}
/* No separate rule for running any more: sprinting is already four times the
   cone, so --gap says it. Two selectors both writing transform on the same
   arms is how one of them silently wins. */
.crosshair i{transition:transform .07s linear;}

/* The tick that says the shot landed, and the one that says he went down.
   Same mark, turned and reddened — you learn one shape, not two. */
.crosshair u{position:absolute;inset:-4px;display:none;text-decoration:none;}
.crosshair u::before,.crosshair u::after{content:'';position:absolute;left:50%;top:50%;
  width:15px;height:2px;margin:-1px 0 0 -7.5px;background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.9);}
.crosshair u::before{transform:rotate(45deg);}
.crosshair u::after{transform:rotate(-45deg);}
.crosshair.hit u{display:block;animation:chpop .22s ease-out both;}
.crosshair.kill u{display:block;animation:chpop .5s ease-out both;}
.crosshair.kill u::before,.crosshair.kill u::after{background:#ff5a63;width:19px;margin-left:-9.5px;
  box-shadow:0 0 8px rgba(255,90,99,.9);}
@keyframes chpop{from{opacity:1;transform:scale(.55)}to{opacity:0;transform:scale(1.25)}}

/* ---- the scope ----
   Past 3.6x the gun is put away and this takes the screen. A black surround
   with a circle cut out of it, two hairlines and a dot: everything the eye
   needs to know it is looking through something. */
.scope{position:absolute;inset:0;z-index:20;display:none;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 0,rgba(0,0,0,0) 27vmin,rgba(0,0,0,.86) 27.6vmin,rgba(0,0,0,.97) 34vmin,#000 100%);}
.scope.on{display:block;animation:scfade .16s ease both;}
@keyframes scfade{from{opacity:0}to{opacity:1}}
.scope i{position:absolute;background:rgba(255,255,255,.5);}
.scope .sc-h{left:50%;top:50%;width:54vmin;height:1px;margin:0 0 0 -27vmin;}
.scope .sc-v{left:50%;top:50%;height:54vmin;width:1px;margin:-27vmin 0 0 0;}
.scope s{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;background:#ff5a63;text-decoration:none;}

/* ---- taking fire ----
   The edges go red when the health drops, and breathe when it is nearly gone.
   Nothing is drawn into the scene for this: it belongs to the screen. */
.hurtvign{position:absolute;inset:0;z-index:19;pointer-events:none;opacity:0;
  transition:opacity .22s ease;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 42%,rgba(190,20,32,.55) 100%);}
.hurtvign.on{opacity:1;}
.hurtvign.low{opacity:.55;animation:hbeat 1.15s ease-in-out infinite;}
@keyframes hbeat{50%{opacity:.9}}

/* ---- where it came from ----

   The vignette says you are hit. This says by whom, and it is the half that
   was missing: a wedge at the edge of the frame, rotated to the bearing the
   round arrived on, relative to where you are looking. Turn toward the fire
   and it climbs to the top of the screen. */
.dmgarc{position:absolute;inset:0;z-index:20;pointer-events:none;
  display:none;--rot:0deg;--a:1;}
.dmgarc.on{display:block;}
.dmgarc i{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--rot));}
.dmgarc i::before{content:'';position:absolute;left:-88px;top:-42vmin;
  width:176px;height:74px;opacity:var(--a);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,72,84,.92) 0,rgba(255,72,84,.34) 46%,rgba(255,72,84,0) 72%);
  clip-path:polygon(50% 100%,0 0,100% 0);
  filter:blur(1px);}

/* The way in for somebody with no wallet. Same dock, and deliberately not a
   dimmed or secondary-looking version of it — it is the primary door for
   almost everybody who arrives. */
.playdock.try .pd-go{background:var(--green);color:#04120a;}
.playdock.try .pd-lead span{color:var(--green-3);}

/* ---- what you just killed ----

   A kill was a tick on the crosshair and a number going up. Neither says WHAT
   died, and on a field with riflemen, armour and helicopters on it that is
   the interesting half. Sits above the crosshair rather than on it, so it
   never covers the thing you are still shooting at. */
.killbn{position:absolute;left:50%;top:calc(50% - 76px);transform:translateX(-50%);
  z-index:21;display:none;pointer-events:none;white-space:nowrap;
  align-items:baseline;gap:7px;}
.killbn.on{display:flex;}
.killbn b{font-size:15px;font-weight:800;letter-spacing:2.6px;color:#ff8189;
  text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 16px rgba(255,90,99,.5);}
.killbn u{text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.95);}
.killbn.pop{animation:kbpop .34s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes kbpop{from{opacity:0;transform:translateX(-50%) scale(.7)}
  to{opacity:1;transform:translateX(-50%) scale(1)}}

/* ---- the settings, inside the controls card ----
   Sliders, switches and one segmented control. Same slab as the key binds,
   because they are the same job: making the game fit the hand it is in. */
.pt-box h4{margin:20px 0 10px;font-size:10.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--dim-2);font-weight:700;}
.pt-box h4:first-of-type{margin-top:14px;}

.pt-set{margin:0 0 14px;}
.pt-set label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--bone);margin-bottom:6px;}
.pt-set label b{font-family:var(--mono);font-size:12px;color:var(--green-2);
  font-variant-numeric:tabular-nums;}
.pt-set i{display:block;font-style:normal;font-size:11px;color:var(--dim-2);
  margin-top:5px;line-height:1.4;}
.pt-set input[type=range]{width:100%;height:22px;-webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;display:block;}
.pt-set input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:rgba(255,255,255,.16);}
.pt-set input[type=range]::-moz-range-track{height:3px;border-radius:3px;
  background:rgba(255,255,255,.16);}
.pt-set input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-6.5px;border-radius:50%;background:var(--green);
  border:0;box-shadow:0 0 10px rgba(34,197,94,.55);}
.pt-set input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;
  border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.55);}
.pt-set input[type=range]:focus-visible{outline:2px solid var(--green-2);outline-offset:4px;}

.pt-togs{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:14px;}
.pt-tog{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
  padding:11px 13px;background:var(--panel-2);text-align:left;width:100%;}
.pt-tog span{font-size:12.5px;color:var(--bone);}
.pt-tog i{grid-column:1;font-style:normal;font-size:11px;color:var(--dim-2);line-height:1.35;}
.pt-tog u{grid-column:2;grid-row:1/3;text-decoration:none;font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;color:var(--dim-2);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 9px;}
.pt-tog.on u{color:#04120a;background:var(--green);border-color:var(--green);}
.pt-tog:hover{background:var(--panel-3);}

.pt-seg{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;}
.pt-seg button{flex:1;padding:9px 6px;background:var(--panel-2);font-size:12px;
  color:var(--dim);}
.pt-seg button:hover{background:var(--panel-3);color:var(--bone);}
.pt-seg button.on{background:var(--green);color:#04120a;font-weight:700;}
.pt-note{font-size:11px;color:var(--dim-2);margin-top:8px;line-height:1.45;}

/* the magnification, for a moment after it changes */
.zoomtag{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);z-index:21;
  font:800 12px var(--mono);letter-spacing:1.4px;color:#9fe9ff;pointer-events:none;
  opacity:0;transition:opacity .18s ease;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.zoomtag.on{opacity:1;}

/* ---- rounds left ---- */
.ammo{position:absolute;right:16px;bottom:96px;z-index:21;display:none;
  align-items:baseline;gap:3px;padding:6px 12px;border-radius:10px;pointer-events:none;
  background:rgba(9,13,17,.86);border:1px solid var(--line-2);}
.ammo.on{display:flex;}
.ammo b{font:800 21px var(--mono);color:var(--bone);line-height:1;}
.ammo span{font:700 11px var(--mono);color:var(--dim-2);}
.ammo.low b{color:#ffb3b8;}
.ammo.low{border-color:rgba(232,80,91,.55);}
.ammo.rl b{font-size:12px;color:#9fe9ff;letter-spacing:1.2px;}
.ammo.rl{border-color:rgba(89,224,255,.55);}

/* ---- thumb stick, look pad and triggers: phone only ---- */
.playpad{position:absolute;inset:0;z-index:19;display:none;pointer-events:none;}
.playpad.on{display:block;}
/* the whole screen is somewhere to drag to look; the controls sit on top of it */
.plook{position:absolute;inset:0;pointer-events:auto;touch-action:none;}
.pstick{position:absolute;left:18px;bottom:20px;width:112px;height:112px;border-radius:50%;
  pointer-events:auto;
  background:rgba(9,13,17,.5);border:1px solid rgba(255,255,255,.14);touch-action:none;
  display:grid;place-items:center;backdrop-filter:blur(3px);}
.pknob{width:46px;height:46px;border-radius:50%;background:rgba(89,224,255,.5);
  border:1px solid rgba(89,224,255,.8);transition:transform .05s linear;}
.pbtns{position:absolute;right:16px;bottom:18px;display:flex;align-items:flex-end;gap:10px;}
.pfire{pointer-events:auto;width:92px;height:92px;border-radius:50%;touch-action:none;
  font:800 13px var(--mono);letter-spacing:1.2px;color:#2a0509;cursor:pointer;
  background:radial-gradient(circle at 40% 34%,#ff8f97,#e8505b);
  border:1px solid rgba(255,255,255,.28);box-shadow:0 8px 24px rgba(232,80,91,.35);}
.pfire:active{filter:brightness(.9);transform:scale(.96);}
.preload,.pscope,.pduck{pointer-events:auto;width:62px;height:62px;border-radius:50%;touch-action:none;
  font:800 9.5px var(--mono);letter-spacing:.6px;color:var(--bone);cursor:pointer;
  background:rgba(9,13,17,.72);border:1px solid rgba(89,224,255,.45);}
.preload:active,.pscope:active,.pduck:active{filter:brightness(.85);transform:scale(.96);}
.pscope.on,.pduck.on{background:rgba(89,224,255,.24);border-color:#59e0ff;color:#dffaff;}
.pzoom{position:absolute;right:20px;bottom:96px;display:flex;flex-direction:column;gap:8px;}
.pzoom button{pointer-events:auto;width:44px;height:44px;border-radius:50%;touch-action:none;
  font:800 18px var(--mono);line-height:1;color:var(--bone);cursor:pointer;
  background:rgba(9,13,17,.72);border:1px solid var(--line-2);}
.pzoom button:active{filter:brightness(.85);transform:scale(.94);}

/* ---- how to play ----
   Shown once, the first time anybody takes control, and reachable afterwards
   from the ? in the dock. Nobody reads a manual; this is the shortest one that
   still covers every control there is. */
.playteach{position:absolute;inset:0;z-index:31;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(4,7,10,.86);backdrop-filter:blur(7px);}
.playteach.on{display:flex;animation:pafade .22s ease both;}
.pt-box{width:min(560px,100%);max-height:100%;overflow:auto;padding:20px 22px 18px;border-radius:16px;
  background:rgba(10,15,19,.97);border:1px solid var(--line-2);
  box-shadow:0 30px 90px rgba(0,0,0,.7);}
.pt-box h3{font:800 16px var(--mono);letter-spacing:1px;color:var(--bone);margin:0 0 8px;}
.pt-box p{font-size:12.5px;line-height:1.6;color:var(--dim);margin:0 0 14px;}
.pt-box dl{display:grid;gap:7px;margin:0 0 16px;}
.pt-box dl>div{display:grid;grid-template-columns:132px 1fr;gap:10px;align-items:baseline;}
.pt-box dt{font:800 10px var(--mono);letter-spacing:.9px;color:#9fe9ff;
  background:rgba(89,224,255,.09);border:1px solid rgba(89,224,255,.22);
  border-radius:6px;padding:5px 6px;text-align:center;}
.pt-box dd{margin:0;font-size:12px;line-height:1.5;color:var(--dim);}
.pt-go{width:100%;padding:11px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  font:800 12px var(--mono);letter-spacing:1.2px;color:#04160b;
  background:linear-gradient(180deg,#4ade80,#16a34a);}
.pt-go:hover{filter:brightness(1.08);}
.pt-keys{width:100%;padding:9px;margin:0 0 8px;border-radius:10px;cursor:pointer;
  font:700 11px var(--mono);letter-spacing:.9px;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);}
.pt-keys:hover{color:var(--bone);background:rgba(255,255,255,.09);}

/* the rebinding grid */
.pt-binds{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 14px;}
.pt-bind{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid var(--line);}
.pt-bind:hover{border-color:var(--line-2);background:rgba(255,255,255,.07);}
.pt-bind span{font-size:11.5px;color:var(--dim);}
.pt-bind b{font:800 9.5px var(--mono);letter-spacing:.6px;color:#9fe9ff;white-space:nowrap;}
.pt-bind.grab{border-color:#59e0ff;background:rgba(89,224,255,.12);}
.pt-bind.grab b{color:#fff;}
@media (max-width:560px){ .pt-binds{grid-template-columns:1fr;} }
@media (max-width:560px){
  .pt-box dl>div{grid-template-columns:96px 1fr;}
  .pt-box p{font-size:11.5px;}
}

/* ---- turn the phone ----
   Portrait is not enough screen for a stick, a trigger and a battle. Rather
   than shrinking all three until none of them work, ask. */
.rotateme{position:absolute;inset:0;z-index:30;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:0 34px;background:rgba(5,8,11,.94);backdrop-filter:blur(6px);}
.rotateme.on{display:flex;}
.rotateme svg{width:54px;height:54px;fill:none;stroke:#59e0ff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  animation:rotanim 2.4s ease-in-out infinite;}
@keyframes rotanim{0%,42%{transform:rotate(0)}58%,100%{transform:rotate(90deg)}}
.rotateme b{font:800 14px var(--mono);letter-spacing:2px;color:var(--bone);}
.rotateme span{font-size:12px;line-height:1.5;color:var(--dim);max-width:300px;}
.rotateme span b{color:var(--bone);}
.rotateme .rot-copy{pointer-events:auto;margin-top:4px;padding:10px 16px;border-radius:10px;
  cursor:pointer;font:700 11px var(--mono);letter-spacing:.8px;color:#04160b;
  background:linear-gradient(180deg,#4ade80,#16a34a);border:1px solid transparent;}
.rotateme{pointer-events:auto;}

/* While somebody is driving, the field is a fight and not a dashboard. The
   search box is where the dock wants to sit and nobody looks anybody up
   mid-firefight, so it stands down; on a phone the wall cards go with it,
   because the thumb stick needs the bottom of the screen and the dock needs
   the top. Everything comes straight back the moment control is handed over. */
body.playing #finder{display:none;}
/* Inside the unit's head there is nothing to hover and nothing to point at,
   and a cursor sitting in the middle of a firefight is just litter. */
body.fpv #gl{cursor:none;}
body.fpv .herotip{display:none;}

@media (max-width:760px){
  /* The offer sits low, out of the way of the wall cards it would otherwise
     cover; the live HUD goes to the top, because the bottom of a phone is
     where the thumbs are. */
  .playdock{left:8px;right:8px;transform:none;max-width:none;
    flex-wrap:wrap;gap:8px;padding:7px 8px;}
  .playdock.offer{bottom:76px;top:auto;}
  .playdock.live{top:8px;bottom:auto;z-index:24;}
  .pd-hint{flex:1 0 100%;order:9;font-size:10.5px;}
  .pd-lead{max-width:110px;}
  .pd-hp{width:70px;}
  .playarrow{top:34%;}
  .ammo{bottom:auto;top:78px;right:12px;padding:4px 9px;}
  .ammo b{font-size:16px;}
  body.playing .fieldtop{opacity:0;pointer-events:none;}
  body.playing .round{opacity:.35;}
  /* Driving takes the whole screen: the wall, the ticker and the round bar are
     all somewhere a thumb is about to be. */
  body.playing .wall,body.playing .round{display:none;}
}

/* A phone held sideways is short, so the live HUD gets out of the way of the
   sky and the controls keep the corners. */
@media (max-height:520px) and (orientation:landscape){
  /* `bottom` is still 86px from the base rule, and a box with both a top and
     a bottom is a box stretched between them: this is why the live HUD came
     up on a sideways phone as an empty card four hundred pixels tall with the
     name floating in the middle of it. */
  .playdock.live{top:6px;bottom:auto;padding:5px 7px;gap:7px;}
  .pd-hint{display:none;}
  .pstick{width:96px;height:96px;left:14px;bottom:14px;}
  .pfire{width:76px;height:76px;}
  .preload,.pscope,.pduck{width:52px;height:52px;font-size:8.5px;}
  .pzoom{bottom:82px;right:16px;}
  .pzoom button{width:38px;height:38px;font-size:16px;}
}


/* ======================================================= the Ansem button
   His face in the field's tool rail. It is the only round button on the page
   with a picture in it, which is the point: everything else there is a line
   drawing of a camera control, and this one is a person. */
.tools .bull{padding:0;overflow:hidden;}
.tools .bull img{width:26px;height:26px;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.tools .bull:hover img{transform:scale(1.06);}
.tools .bull img{transition:transform .16s ease;}

/* the plate that names him when the camera gets there */
.throneplate{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:22;
  display:none;flex-direction:column;align-items:center;gap:3px;pointer-events:none;
  padding:10px 22px;border-radius:12px;text-align:center;
  background:rgba(7,16,11,.86);border:1px solid rgba(62,240,138,.4);
  box-shadow:0 18px 50px rgba(0,0,0,.6);backdrop-filter:blur(6px);}
.throneplate.on{display:flex;animation:tpin .5s cubic-bezier(.2,.9,.25,1) both;}
@keyframes tpin{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
.throneplate b{font:800 17px var(--mono);letter-spacing:4px;color:#8affc0;}
.throneplate span{font-size:11.5px;color:var(--dim);}

/* ============================================================ the sound button */
.tools #btnSound .snd-off{display:none;}
.tools #btnSound:not(.on) .snd-on{display:none;}
.tools #btnSound:not(.on) .snd-off{display:block;}
.tools #btnSound:not(.on){color:var(--dim-2);}

.sndpop{position:fixed;z-index:60;display:flex;align-items:center;gap:9px;
  padding:8px 12px;border-radius:11px;
  background:rgba(9,13,17,.96);border:1px solid var(--line-2);
  box-shadow:0 14px 40px rgba(0,0,0,.6);}
.sndpop label{font:700 9.5px var(--mono);letter-spacing:1.1px;color:var(--dim-2);}
.sndpop input{width:104px;accent-color:#4ade80;}

@media (max-width:760px){
  .throneplate{bottom:auto;top:62px;left:8px;right:8px;transform:none;padding:8px 12px;}
  .throneplate.on{animation:none;}
  .throneplate b{font-size:14px;letter-spacing:3px;}
  .throneplate span{font-size:10.5px;}
}

/* a linked (deeplink) session is a connection that cannot sign — labelled, so
   nobody discovers it three steps into a purchase */
.wtag{display:inline-block;vertical-align:middle;margin-left:7px;padding:2px 6px;border-radius:5px;
  font:700 8.5px var(--mono);letter-spacing:1px;font-style:normal;text-transform:uppercase;
  color:#9fe9ff;background:rgba(89,224,255,.12);border:1px solid rgba(89,224,255,.3);}
.wsep{height:1px;margin:9px 0 3px;background:var(--line);}

/* ============================================================= arena mode
   While somebody is driving a unit, this is a game and not a page.

   Everything the site normally shows is for a person watching a market: the
   header, the book, the walls, the round bar, the buy buttons, the burn
   strip. None of it belongs on screen while somebody is being shot at, and on
   a sideways phone there is no room for it anyway — the whole viewport is
   about 360 CSS pixels tall.

   So the stage is pinned over the document and everything else is taken off
   the screen, not dimmed. The controls, the crosshair, the ammo and a thin
   line of status are what is left. See arena.js for the browser half — real
   fullscreen, orientation lock, wake lock — which this does not depend on. */
body.arena{overflow:hidden;height:100%;}
html:has(body.arena){overflow:hidden;}

body.arena .apphead,
body.arena .rail,
body.arena .fieldbar,
body.arena .traderow,
body.arena .burn,
body.arena .features,
body.arena .tabbar,
body.arena .buy,
body.arena .mintsheet,
body.arena .gate{display:none !important;}

body.arena .shell{display:block;margin:0;padding:0;max-width:none;gap:0;}
body.arena .centre{display:block;margin:0;padding:0;gap:0;}

body.arena .stage{position:fixed;inset:0;width:auto;height:auto;min-height:0;
  margin:0;border:0;border-radius:0;z-index:200;}

/* The instruments. Every one of these is a readout for a spectator, and a
   spectator is exactly what a player is not. */
body.arena .fieldtop,
body.arena .fieldmid,
body.arena .tacmap,
body.arena .spark,
body.arena .unitov,
body.arena .round,
body.arena .zoomhint,
body.arena .finder,
body.arena .throneplate,
body.arena .banner,
body.arena .herotip{display:none !important;}

/* The camera tool rail goes too: in first person the camera is your head, and
   a zoom button beside a trigger is a mis-tap waiting to happen. */
body.arena .tools{display:none;}

/* ---- the in-game HUD ----
   Not a card. A card has a border, a background and a shadow, and all three
   of those say "a panel on a website". This is four readouts laid along the
   top edge of the picture, which is what a game puts there. */
body.arena .playdock.live{
  position:fixed;left:0;right:0;top:0;bottom:auto;transform:none;
  max-width:none;width:auto;flex-wrap:nowrap;gap:12px;z-index:210;
  padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
          10px calc(12px + env(safe-area-inset-left));
  border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(4,7,10,.72),rgba(4,7,10,0));}
body.arena .playdock.offer{display:none;}

body.arena .pd-lead{flex:none;max-width:40vw;}
body.arena .pd-lead b{font-size:12px;letter-spacing:1.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.9);}
body.arena .pd-lead span{font-size:9px;letter-spacing:.8px;
  text-shadow:0 1px 6px rgba(0,0,0,.9);}
body.arena .pd-hp{width:132px;height:8px;border-radius:4px;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.14);}
body.arena .pd-hp u{display:none;}
/* The hint is the game talking — one line, centred, no chrome. */
body.arena .pd-hint{flex:1 1 auto;order:0;min-width:0;text-align:center;
  font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(236,234,228,.72);text-shadow:0 1px 6px rgba(0,0,0,.9);}
body.arena .pd-auto,body.arena .pd-x{flex:none;background:rgba(6,10,14,.5);
  border-color:rgba(255,255,255,.16);color:var(--bone);}
body.arena .pd-auto{padding:6px 11px;font-size:10px;}
body.arena .pd-x{width:30px;height:30px;}

/* Sideways on a phone there is no room for a sentence, and the thumbs are
   already told what to do by the buttons under them. */
@media (max-height:460px){
  body.arena .pd-hint{display:none;}
  body.arena .playdock.live{gap:9px;padding-top:calc(4px + env(safe-area-inset-top));}
  body.arena .pd-hp{width:104px;}
}

/* The pad keeps the corners it already had, but arena mode is the only place
   it has the whole screen to use, so it can be a little bigger than it was
   when it had to share with a round bar. */
body.arena .playpad{z-index:206;}
body.arena .ammo{z-index:208;bottom:auto;top:calc(46px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));}
body.arena .playarrow{z-index:207;}
body.arena .crosshair,body.arena .scope{z-index:205;}
body.arena .hurtvign{z-index:204;}
body.arena .playteach,body.arena .rotateme{z-index:220;}

/* Watching somebody else play is the same picture with a different HUD: no
   controls, because it is not your unit. */
body.arena.watching .playpad,
body.arena.watching .ammo,
body.arena.watching .crosshair,
body.arena.watching .scope{display:none !important;}

/* ====================================================== watching somebody
   A list of the people driving a unit right now, and the thin HUD that
   stands in for theirs while you are behind their shoulder.

   Everything about the list says "these are people": names first, tier and
   kills after, and a health bar that is the same bar they are looking at. */

/* the eye in the tool rail */
.tools #btnWatch{position:relative;}
.tools #btnWatch.live{color:var(--green-2);border-color:rgba(74,222,128,.42);}
.wcount{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;font:800 9.5px var(--mono);
  font-style:normal;color:#04160b;background:var(--green-2);
  box-shadow:0 2px 8px rgba(0,0,0,.55);}
.wcount:empty{display:none;}

/* the list */
.watchlist{position:absolute;right:56px;top:52px;z-index:40;width:min(310px,calc(100vw - 74px));
  max-height:min(60vh,420px);overflow:auto;padding:9px;border-radius:13px;
  background:rgba(9,13,17,.97);border:1px solid var(--line-2);
  box-shadow:0 22px 60px rgba(0,0,0,.68);backdrop-filter:blur(10px);}
.watchlist[hidden]{display:none;}
/* A sideways phone gives this panel about 170px of height, so the list
   scrolls — and the two controls that must never scroll away are the title
   you close it by and the button you leave by. */
.wl-head{position:sticky;top:-9px;z-index:2;display:flex;align-items:center;gap:8px;
  padding:9px 4px;margin:-9px -9px 0;padding-left:13px;padding-right:13px;
  background:rgba(9,13,17,.97);}
.wl-head b{font:800 10.5px var(--mono);letter-spacing:2px;color:var(--bone);}
.wl-head em{flex:1;font-style:normal;font-size:10px;letter-spacing:.6px;color:var(--dim-2);}
.wl-x{width:24px;height:24px;border-radius:7px;color:var(--dim-2);font-size:12px;
  border:1px solid var(--line);}
.wl-x:hover{color:var(--bone);border-color:var(--line-2);}
.wl-rows{display:flex;flex-direction:column;gap:5px;}
.wl-row{display:grid;grid-template-columns:4px 1fr auto;grid-template-rows:auto auto;
  align-items:center;gap:3px 9px;width:100%;padding:8px 10px;border-radius:10px;
  cursor:pointer;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid var(--line);}
.wl-row:hover{background:rgba(255,255,255,.075);border-color:var(--line-2);}
.wl-row.on{border-color:rgba(89,224,255,.55);background:rgba(89,224,255,.09);}
.wl-side{grid-row:1 / span 2;width:4px;height:100%;min-height:26px;border-radius:3px;}
.wl-side.bull{background:var(--green);}
.wl-side.bear{background:var(--red,#e8505b);}
.wl-who{min-width:0;}
.wl-who b{display:block;font:700 12px var(--mono);letter-spacing:.3px;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wl-who em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--dim-2);}
.wl-k{font:800 15px var(--mono);color:var(--green-2);text-align:right;line-height:1;}
.wl-k i{display:block;font-style:normal;font:600 8px var(--mono);letter-spacing:1px;
  color:var(--dim-2);margin-top:2px;}
.wl-hp{grid-column:2 / span 2;height:4px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.09);}
.wl-hp i{display:block;height:100%;background:linear-gradient(90deg,#4ade80,#8affc0);}
.wl-empty{padding:16px 10px;font-size:12px;line-height:1.55;color:var(--dim);text-align:center;}
.wl-stop{position:sticky;bottom:-9px;width:100%;margin-top:8px;padding:9px;
  border-radius:10px;cursor:pointer;
  font:800 10px var(--mono);letter-spacing:1.4px;color:#ffb3b8;
  background:rgba(232,80,91,.12);border:1px solid rgba(232,80,91,.4);}
.wl-stop:hover{background:rgba(232,80,91,.2);}
.wl-note{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:10px;line-height:1.5;color:var(--dim-2);}

/* the spectator HUD: the same shape as a player's, minus everything a player
   needs a thumb for */
.watchhud{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:26;
  display:none;align-items:center;gap:11px;padding:7px 9px 7px 11px;border-radius:12px;
  max-width:min(520px,calc(100% - 24px));
  background:rgba(9,13,17,.9);border:1px solid rgba(89,224,255,.4);
  box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(8px);}
.watchhud.on{display:flex;}
.watchhud.hurt{border-color:rgba(232,80,91,.6);}
.wh-tag{display:flex;align-items:center;gap:6px;flex:none;
  font:800 9px var(--mono);letter-spacing:1.6px;color:#9fe9ff;}
.wh-tag i{width:6px;height:6px;border-radius:50%;background:#59e0ff;
  animation:whpulse 1.5s ease-in-out infinite;}
@keyframes whpulse{50%{opacity:.25;}}
.wh-who{min-width:0;flex:none;max-width:170px;}
.wh-who b{display:block;font:700 12.5px var(--mono);letter-spacing:.4px;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wh-who span{display:block;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wh-hp{flex:none;width:96px;height:8px;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.1);}
.wh-hp i{display:block;height:100%;background:linear-gradient(90deg,#4ade80,#8affc0);
  transition:width .2s linear;}
.watchhud.hurt .wh-hp i{background:linear-gradient(90deg,#e8505b,#f0777f);}
.wh-x{flex:none;font:600 11px var(--mono);color:#9fe9ff;text-decoration:none;}
.wh-x:hover{text-decoration:underline;}
.wh-x2{flex:none;width:26px;height:26px;border-radius:7px;color:var(--dim-2);font-size:12px;
  border:1px solid var(--line);cursor:pointer;}
.wh-x2:hover{color:var(--bone);border-color:var(--line-2);}

/* In arena mode the spectator HUD is the game's HUD, so it loses the box for
   the same reason the player's does. */
body.arena .watchhud.on{position:fixed;left:0;right:0;top:0;transform:none;max-width:none;
  border:0;border-radius:0;box-shadow:none;backdrop-filter:none;z-index:210;
  padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
          10px calc(12px + env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(4,7,10,.72),rgba(4,7,10,0));}
/* Name, then health, then everything is pushed to the far edge. Letting the
   name take the slack instead left the bar and the handle stranded in the
   middle of the sky with a hand's width of nothing on either side. */
body.arena .wh-who{flex:none;max-width:34vw;}
body.arena .wh-hp{margin-right:auto;}
body.arena .wh-x2{background:rgba(6,10,14,.5);border-color:rgba(255,255,255,.16);
  color:var(--bone);width:30px;height:30px;}
/* The watch list is reachable from inside arena mode too — you should be able
   to hop from one player to the next without leaving the game. */
body.arena .watchlist{position:fixed;right:10px;top:52px;z-index:215;}

@media (max-width:760px){
  .watchlist{right:8px;left:8px;width:auto;top:auto;bottom:76px;max-height:52vh;}
  body.arena .watchlist{left:auto;right:10px;width:min(300px,calc(100vw - 20px));
    top:50px;bottom:auto;}
  .watchhud{left:8px;right:8px;transform:none;max-width:none;}
}
.wl-row.me{opacity:.62;cursor:default;}
.wl-row.me:hover{background:rgba(255,255,255,.035);border-color:var(--line);}
.wl-who b u{text-decoration:none;font:700 8.5px var(--mono);letter-spacing:1px;
  padding:1px 5px;margin-left:5px;border-radius:5px;vertical-align:middle;
  color:#9fe9ff;background:rgba(89,224,255,.14);border:1px solid rgba(89,224,255,.3);}

/* The walkthrough is for somebody looking at a market. Arena mode is not that,
   and a card over the middle of a firefight is the single most unwelcome thing
   on this site. */
body.arena .tour{display:none !important;}

/* ---- the helicopter's controls, and what vehicles have that men do not ----

   Three extra buttons and a three-row read-out, both hidden for anything that
   walks. A soldier's HUD is deliberately unchanged: adding a fuel gauge to a
   rifleman would be the clearest possible way of saying "this game has
   vehicles in it now" to the one player who does not have one. */
.pair{position:absolute;left:146px;bottom:22px;display:none;flex-direction:column;gap:9px;}
.playpad.air .pair{display:flex;}
.pair button{pointer-events:auto;touch-action:none;cursor:pointer;color:var(--bone);
  background:rgba(9,13,17,.72);border:1px solid rgba(89,224,255,.45);}
.pup,.pdn{width:52px;height:44px;border-radius:11px;font:800 15px var(--mono);line-height:1;}
.pbomb{width:52px;height:44px;border-radius:11px;font:800 9.5px var(--mono);letter-spacing:.6px;
  border-color:rgba(255,176,64,.6);color:#ffd79a;background:rgba(38,24,6,.8);}
.pair button:active{filter:brightness(.82);transform:scale(.95);}
.pbomb:disabled{opacity:.4;border-color:var(--line-2);color:var(--dim-2);}

/* Clear of the zoom column, which runs up the right edge from 96px. Two
   read-outs stacked in the same corner is how a HUD ends up with a number
   nobody can read behind a button nobody can press. */
.vstat{position:absolute;right:74px;bottom:96px;z-index:21;display:none;
  flex-direction:column;gap:5px;padding:8px 11px;border-radius:10px;pointer-events:none;
  background:rgba(9,13,17,.86);border:1px solid var(--line-2);min-width:146px;}
.vstat.on{display:flex;}
.vs-row{display:none;align-items:center;gap:8px;}
.vs-row.on{display:flex;}
.vs-row u{font:700 9px var(--mono);letter-spacing:.9px;color:var(--dim-2);
  text-decoration:none;width:42px;flex:0 0 auto;}
.vs-row i{flex:1 1 auto;height:5px;border-radius:3px;background:rgba(255,255,255,.12);
  overflow:hidden;display:block;}
.vs-row i s{display:block;height:100%;width:100%;background:#59e0ff;
  text-decoration:none;transition:width .18s linear;}
.vs-row b{font:800 10.5px var(--mono);color:var(--bone);
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:34px;text-align:right;}
#vsArmour i s{background:linear-gradient(90deg,#7ef0b4,#37c98a);}
#vsArmour.low i s{background:linear-gradient(90deg,#ffb3b8,#e8505b);}
#vsFuel i s{background:linear-gradient(90deg,#ffd79a,#ffab3d);}
#vsFuel.low i s{background:linear-gradient(90deg,#ffb3b8,#e8505b);}
.vs-pips{color:#ffab3d;letter-spacing:2px;min-width:44px;}
.vs-pips.none{color:var(--dim-2);}

@media (max-height:520px) and (orientation:landscape){
  /* A landscape phone has no vertical room to stack anything, so the read-out
     sits beside the zoom buttons rather than above them. */
  .vstat{right:74px;bottom:88px;padding:6px 9px;min-width:132px;gap:4px;}
  .vs-row u{font-size:8px;width:36px;}
  .vs-row b{font-size:9.5px;min-width:30px;}
  .pair{left:140px;bottom:16px;gap:7px;}
  .pup,.pdn,.pbomb{width:46px;height:38px;}
}
body.arena .vstat{z-index:208;}
body.arena .pair button{pointer-events:auto;}
body.arena.watching .vstat{display:none;}

/* ======================================================== hospital & throne

   Two things on the field you can point at. The hover tip follows the cursor
   like the unit card does; the card itself is a modal over the whole page,
   because it holds a number input and a leaderboard and neither of those
   belongs in a tooltip. */
.lmktip{position:fixed;z-index:60;pointer-events:none;display:none;
  background:rgba(8,12,16,.96);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 12px;max-width:250px;box-shadow:0 10px 34px rgba(0,0,0,.6);}
.lmktip.show{display:block;}
.lmktip b{display:block;font-size:12.5px;letter-spacing:1.2px;color:var(--bone);}
.lmktip span{display:block;font-size:11px;color:var(--dim);margin-top:3px;}
.lmktip u{display:block;text-decoration:none;font-size:10.5px;color:var(--green-2);margin-top:6px;}

.lmkcard{position:fixed;inset:0;z-index:80;display:none;align-items:center;
  justify-content:center;padding:20px;background:rgba(3,5,8,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.lmkcard.on{display:flex;animation:lmkin .18s ease both;}
@keyframes lmkin{from{opacity:0}to{opacity:1}}

.hoBox{position:relative;width:min(460px,100%);max-height:86vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:16px;
  padding:22px 22px 20px;box-shadow:0 30px 90px rgba(0,0,0,.7);}
.hoBox.throne{border-color:rgba(255,224,49,.3);}
.hoBox.throne.lit{border-color:rgba(255,224,49,.6);
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(255,224,49,.16);}
.hoX{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;
  color:var(--dim);font-size:13px;border:1px solid var(--line);}
.hoX:hover{color:var(--bone);background:var(--panel-3);}
.hoBox h3{font-size:15px;font-weight:700;letter-spacing:2.2px;color:var(--bone);
  margin:0 0 10px;}
.hoBox.throne h3{color:var(--gold);}
.hoBox h4{font-size:10px;letter-spacing:2px;color:var(--dim-2);font-weight:700;
  margin:18px 0 9px;}
.hoBox h4 s{text-decoration:none;color:var(--amber);}
.hoLede{font-size:12.5px;line-height:1.55;color:var(--dim);margin:0 0 14px;}
.hoLede b{color:var(--bone);font-weight:600;}
.hoFoot{font-size:11px;line-height:1.5;color:var(--dim-2);margin:14px 0 0;}
.hoBox code{font-family:var(--mono);font-size:10.5px;color:var(--green-3);
  background:rgba(255,255,255,.06);border-radius:4px;padding:1px 4px;
  word-break:break-all;}

.hoStats{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-bottom:16px;}
.hoStats>div{flex:1;background:var(--panel-2);padding:10px 12px;min-width:0;}
.hoStats span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--dim-2);}
.hoStats b{display:block;font-family:var(--mono);font-size:17px;font-weight:700;
  color:var(--bone);margin-top:3px;}
.hoStats i{font-style:normal;font-size:10px;color:var(--dim-2);}
.hoStats .you b{color:var(--green-2);}

.hoGive label{display:block;font-size:9.5px;letter-spacing:1.6px;color:var(--dim-2);
  font-weight:700;margin-bottom:7px;}
.hoRow{display:flex;gap:8px;}
.hoRow input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:9px;padding:11px 12px;color:var(--bone);font-family:var(--mono);
  font-size:14px;outline:none;}
.hoRow input:focus{border-color:var(--green);}
.hoGo{flex:0 0 auto;padding:11px 15px;border-radius:9px;background:var(--green);
  color:#04120a;font-size:11.5px;font-weight:700;letter-spacing:1.1px;}
.hoGo:hover{background:var(--green-2);}
.hoGo:disabled{background:var(--panel-3);color:var(--dim-2);cursor:default;}
.hoQuick{display:flex;gap:6px;margin-top:8px;}
.hoQuick button{flex:1;padding:7px 4px;border-radius:7px;background:var(--panel-2);
  border:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--dim);}
.hoQuick button:hover{color:var(--green-2);border-color:rgba(34,197,94,.4);}
.hoMsg{font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:10px;min-height:1px;}
.hoMsg.good{color:var(--green-2);}
.hoMsg.bad{color:var(--red-2);}
.hoMsg.warn{color:var(--amber);}

.hoBoard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.hoBoard li{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--panel-2);}
.hoBoard li.me{background:rgba(34,197,94,.10);}
.hoBoard b{width:20px;font-family:var(--mono);font-size:11px;color:var(--dim-2);
  font-weight:600;flex:0 0 auto;}
.hoBoard li:nth-child(1) b{color:var(--gold);}
.hoBoard li:nth-child(2) b,.hoBoard li:nth-child(3) b{color:var(--bone);}
.hoBoard span{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;
  color:var(--bone);overflow:hidden;text-overflow:ellipsis;}
.hoBoard i,.hoBoard em{font-style:normal;font-size:9.5px;letter-spacing:1px;}
.hoBoard i{color:var(--green-2);}
.hoBoard em{color:var(--gold);}
.hoBoard u{text-decoration:none;font-family:var(--mono);font-size:12px;
  color:var(--green-2);flex:0 0 auto;}
.hoNone{font-size:11.5px;line-height:1.55;color:var(--dim-2);padding:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;}
.hoWatch{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;}
.hoWatch span{font-size:9px;letter-spacing:1.6px;color:var(--dim-2);font-weight:700;}
.hoWatch b{font-family:var(--mono);font-size:12px;color:var(--gold);}