/* COINWAR · war-room stylesheet. Slate-olive table, cream ink, one molten orange. No gradients, no glows. */
:root{
  --ground:#1d1f1a;--panel:#262820;--panel-2:#2c2e25;--line:#3a3b31;--stone:#6b6a5c;
  --cream:#ede6d6;--cream-2:#c9c2b0;--orange:#e8642c;--orange-d:#b94b1d;--moss:#7d8a5a;
  --stencil:'Black Ops One',Impact,'Arial Narrow',sans-serif;
  --body:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gap:8px;--wrap:1440px
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--cream);font:500 17px/1.45 var(--body);letter-spacing:.01em;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
a:hover{color:var(--orange)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--stencil);font-weight:400;letter-spacing:.02em;margin:0;line-height:1.02}
h2{font-size:26px}
h3{font-size:20px}
p{margin:0}
dl,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
dd{margin:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--orange);color:var(--ground);padding:8px 12px;font-weight:700}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide,[hidden]{display:none!important}
#app{max-width:var(--wrap);margin:0 auto;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap);min-height:100vh}
main{display:flex;flex-direction:column;gap:var(--gap);flex:1}

/* Framed panel: 1px cream line at low opacity, hollow hex ticks on the corners. */
.frame{position:relative;background:var(--panel);border:1px solid rgba(237,230,214,.16)}
.frame::before,.frame::after{content:"";position:absolute;width:9px;height:9px;background:var(--ground);border:1px solid rgba(237,230,214,.55);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);pointer-events:none;z-index:2}
.frame::before{top:-5px;left:-5px}
.frame::after{bottom:-5px;right:-5px}

/* Buttons: square corners, solid orange primary, cream outline secondary. */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid var(--cream);background:transparent;color:var(--cream);font:700 15px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover,.button:hover{background:rgba(237,230,214,.08);color:var(--cream)}
.btn.solid,.button.primary{background:var(--orange);border-color:var(--orange);color:var(--ground)}
.btn.solid:hover,.button.primary:hover{background:#f2763f;color:var(--ground)}
.btn.ghost-o{border-color:rgba(237,230,214,.5)}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.btn.block,.button.block{display:flex;width:100%}
.btn[disabled],.button[disabled]{opacity:.45;cursor:not-allowed}
.btn b{font-weight:700}

/* Header bar */
.bar{display:flex;align-items:center;gap:22px;padding:10px 16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 24px/1 var(--stencil);letter-spacing:.04em}
.brand img{width:40px;height:40px}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{padding:10px 12px;text-decoration:none;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px;color:var(--cream-2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--cream)}
.nav a.on,.nav a[aria-current="page"]{color:var(--orange);border-bottom-color:var(--orange)}
.bar-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.ca{background:none;border:1px dashed var(--line);padding:8px 10px;font:400 12px/1 var(--mono);color:var(--cream-2);cursor:pointer;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca:hover{border-color:var(--orange);color:var(--cream)}
.social{display:inline-flex;text-decoration:none;gap:6px;min-width:34px;height:34px;align-items:center;justify-content:center;color:var(--cream)}
.social svg,.social img{width:18px;height:18px}
.rule-v{display:block;width:1px;height:22px;background:var(--line)}

/* Footer */
.foot{display:flex;align-items:center;gap:18px;padding:14px 16px;flex-wrap:wrap}
.foot .brand{font-size:18px}
.foot .brand img{width:28px;height:28px}
.foot small,.foot-note{font:400 12px/1.4 var(--mono);color:var(--stone)}
.foot-end{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Home hero: the shared 3D war map */
.hero{position:relative;height:560px;background:var(--ground);border:1px solid rgba(237,230,214,.16);overflow:hidden}
.map{position:absolute;inset:0}
.hero-copy{position:absolute;left:32px;top:40px;z-index:3;max-width:520px;pointer-events:none}
.hero-copy h1{font-size:60px;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 0 var(--ground)}
.hero-copy h1 span{display:block}
.hero-copy h1 span:last-child{color:var(--orange)}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:28px;width:290px;pointer-events:auto}
.hero-cta .btn{justify-content:space-between;background-color:var(--ground)}
.hero-cta .btn.solid{background:var(--orange)}
.demo-badge,.live-badge{position:absolute;top:16px;right:16px;z-index:3;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--orange);color:var(--orange);background:var(--ground)}
.live-badge{border-color:var(--moss);color:var(--cream)}
.map-ctl{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:4px}
.map-ctl button{width:34px;height:34px;background:var(--panel);border:1px solid var(--line);font:600 16px/1 var(--mono);cursor:pointer}
.map-ctl button:hover{border-color:var(--orange);color:var(--orange)}
.hero .map-ctl{left:auto;right:16px;bottom:auto;top:52px}
.hero .pick:not([hidden])~.map-ctl{right:332px}
.log{position:absolute;right:16px;bottom:16px;z-index:3;width:380px;padding:14px 16px;background:rgba(38,40,32,.94)}
.log h2{font-size:18px;margin-bottom:8px}
.log ol{display:flex;flex-direction:column;gap:6px;font:400 12px/1.45 var(--mono);color:var(--cream-2)}
.log li b,.raid-log li b{color:var(--orange);font-weight:600}
.log li .r,.raid-log .r{color:var(--stone);margin-right:6px}
.quiet{color:var(--stone)!important}
.pick{position:absolute;right:16px;top:52px;z-index:4;width:300px;padding:14px 16px}
.pick-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pick-head strong{font:400 20px/1 var(--stencil)}
.pick dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:12px}
.pick dt,.intel dt{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:3px}
.pick dd,.intel dd{font:600 14px/1.2 var(--mono)}
.swatch{display:inline-block;width:14px;height:14px;background:var(--b,var(--stone));border:1px solid rgba(237,230,214,.4);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);flex:none}
.hot{color:var(--orange)!important}

/* Tags (tier chips) */
.tag{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 7px;border:1px solid var(--line);color:var(--cream-2)}
.tag.warn{border-color:var(--orange);color:var(--orange)}

/* 3D view overlays from world-view.js */
.world{overflow:hidden}
.world canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none;outline:none}
.tilt{position:absolute;inset:0;pointer-events:none;z-index:1}
.tilt i{position:absolute;left:0;right:0;height:16%;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.tilt i:first-child{top:0}
.tilt i:last-child{bottom:0}
.tags{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tags .tag{position:absolute;left:0;top:0;padding:3px 6px;background:var(--ground);border:1px solid rgba(237,230,214,.35);color:var(--cream);font:600 10px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;will-change:transform}
.tags .tag.down{border-color:var(--orange);color:var(--orange);text-decoration:line-through}

/* 2D fallback */
.fallback{display:flex;flex-direction:column;gap:10px;padding:14px;overflow:auto}
.fallback-label{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.fallback-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;max-width:520px;width:100%;margin:0 auto}
.fallback-grid .tile{aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);font:600 11px/1 var(--mono);cursor:pointer;padding:0}
.fallback-grid .tile.filled{background:var(--stone);color:var(--ground)}
.fallback-grid .tile.core{background:var(--orange);color:var(--ground)}
.fallback-grid .tile.shut{opacity:.3}
.fallback-bases{display:flex;flex-wrap:wrap;gap:6px}
.fallback-bases button{padding:6px 10px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--banner,var(--stone));font:600 12px/1 var(--mono);cursor:pointer}

/* Unit cards */
.units{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.unit{display:flex;flex-direction:column}
.unit-art{height:150px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:var(--panel-2)}
.unit-art svg{width:130px;height:130px}
.unit-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.unit-body h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.unit-body dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:8px 0}
.unit-body dt{font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:3px}
.unit-body dd{font:600 13px/1 var(--mono);color:var(--orange)}
.unit-body p{color:var(--cream-2);font-size:15px}
svg.mini{overflow:visible}

/* War board */
.board{padding:18px 20px}
.board-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.board-head .note{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border:1px dashed var(--orange);padding:5px 8px}
.demo-flag{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2);border:1px solid var(--line);padding:5px 8px}
.fine{font:400 12px/1.5 var(--mono);color:var(--stone)}
.fine a{color:var(--cream-2)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px}
th{text-align:left;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid rgba(58,59,49,.6);white-space:nowrap}
tbody tr:hover td{background:var(--panel-2)}
tbody tr{cursor:pointer}
td.n,th.n{font-family:var(--mono);text-align:right;font-weight:600}
td.score{color:var(--orange)}
td.tk{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em}
td.tk a{text-decoration:none}

/* Rules + tiers */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap)}
.rules,.tiers{padding:18px 20px}
.rules h2,.tiers h2{margin-bottom:14px}
.rules ol{display:flex;flex-direction:column;gap:10px}
.rules li{display:grid;grid-template-columns:38px 1fr;gap:10px;color:var(--cream-2);line-height:1.5}
.rules li b{font:600 13px/1.6 var(--mono);color:var(--orange)}
.tiers ol{display:flex;flex-direction:column;gap:6px}
.tiers li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:4px 12px;padding:8px 10px;border:1px solid var(--line);background:var(--panel-2)}
.tiers li svg{width:40px;height:40px;grid-row:span 2}
.tiers li strong{font:400 17px/1 var(--stencil)}
.tiers li span{font:400 12px/1.3 var(--mono);color:var(--cream-2);text-align:right;white-space:nowrap}
.tiers li span:nth-of-type(2){text-align:left}

/* Base page */
.loading{padding:60px 20px;text-align:center;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.head{display:flex;align-items:center;gap:18px;padding:14px 18px;flex-wrap:wrap}
.head > a:first-child{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);text-decoration:none}
.head h1{font-size:34px;display:flex;align-items:baseline;gap:12px}
.head h1 small{font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--orange);text-transform:uppercase}
.head p{color:var(--cream-2);flex:1;min-width:220px}
.head.err h1{color:var(--orange)}
.base{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap)}
.stage{position:relative;min-height:620px;overflow:hidden;background:var(--ground)}
.world-host{position:absolute;inset:0}
.stage-top{position:absolute;left:14px;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:10px;pointer-events:none}
.stage-top > *{pointer-events:auto}
.core-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(38,40,32,.94);border:1px solid var(--line);font:600 12px/1 var(--mono);flex:1;max-width:520px}
.core-bar span{letter-spacing:.14em;color:var(--stone)}
.core-bar i{flex:1;height:8px;background:var(--ground);border:1px solid var(--line);display:block}
.core-bar i b{display:block;height:100%;background:var(--cream)}
.core-bar small{font:400 11px/1 var(--mono);color:var(--stone)}
.core-bar.down{border-color:var(--orange)}
.core-bar.down i b{background:var(--orange)}
.core-bar.down strong{color:var(--orange)}
.stage .map-ctl{bottom:44px}
.stage-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;font:400 11px/1.3 var(--mono);color:var(--stone);pointer-events:none}
.stage-cap span{color:var(--cream-2);margin-left:10px}
.log time,.raid-log time,.events time{margin-left:8px;color:var(--stone)}
.room{display:flex;flex-direction:column;gap:var(--gap)}
.panel{padding:14px 16px}
.panel h2{font-size:20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.orders{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:10px}
.order{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;background:var(--panel-2);border:1px solid var(--line);cursor:pointer;font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.order svg{width:42px;height:42px}
.order small{font:400 10px/1 var(--mono);color:var(--stone);letter-spacing:0;text-transform:none}
.order:hover{border-color:var(--cream-2)}
.order.on{border-color:var(--orange);color:var(--orange)}
.tile-info{font:400 12px/1.5 var(--mono);color:var(--cream-2);padding:8px 10px;border:1px dashed var(--line);margin-bottom:10px;min-height:38px}
.status{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--cream-2);min-height:18px}
.status.err{color:var(--orange)}
.armoury{display:flex;flex-direction:column;gap:10px}
.weapons{display:flex;flex-direction:column;gap:3px;font:400 12px/1.3 var(--mono)}
.weapons li{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid var(--line);color:var(--stone)}
.weapons li.on{color:var(--cream);border-color:var(--cream-2)}
.weapons li.on:last-of-type,.weapons li.on + li:not(.on){}
.weapons li.lock{opacity:.45}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.field input,.field select,.field textarea{width:100%;min-height:40px;padding:8px 10px;background:var(--ground);border:1px solid var(--line);border-radius:0;font:500 15px/1.3 var(--body);letter-spacing:.02em;text-transform:none;color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);outline:none}
.raid-log{display:flex;flex-direction:column;gap:5px;margin-top:10px;font:400 12px/1.45 var(--mono);color:var(--cream-2)}
.raid-log.big{margin-top:0}
.raid-log li{padding:5px 0;border-bottom:1px dashed var(--line)}
.raid-log time,.feed time{color:var(--stone);margin-right:6px}
.base-low{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--gap)}
.intel{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.feed{display:flex;flex-direction:column;gap:6px;font:400 12px/1.45 var(--mono);color:var(--cream-2)}
.feed li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:5px}

/* Launch page (src/launch.js) */
.launch-page{display:flex;flex-direction:column;gap:var(--gap)}
.page-heading{padding:22px 22px 18px;background:var(--panel);border:1px solid rgba(237,230,214,.16)}
.page-heading h1{font-size:44px}
.page-heading p{color:var(--cream-2);margin-top:8px;max-width:680px}
.launch-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap)}
.plate{background:var(--panel);border:1px solid rgba(237,230,214,.16);padding:20px}
.launch-form{display:flex;flex-direction:column;gap:12px}
.launch-form label{display:flex;flex-direction:column;gap:5px;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.launch-form input,.launch-form textarea,.launch-form select{width:100%;min-height:40px;padding:8px 10px;background:var(--ground);border:1px solid var(--line);border-radius:0;font:500 15px/1.3 var(--body);text-transform:none;letter-spacing:.02em;color:var(--cream)}
.launch-form input:focus,.launch-form textarea:focus{border-color:var(--orange);outline:none}
.upload{border:1px dashed var(--stone);padding:14px;text-align:center;cursor:pointer}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.launch-form{gap:16px}
.launch-form label{gap:7px;line-height:1.3}
.launch-form label:not(.upload){margin-top:10px}
.launch-form label small{font-size:9px;letter-spacing:.14em;color:var(--stone);opacity:.8}
.launch-form .upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:18px;color:var(--cream-2);font-size:11px}
.launch-form .upload:hover{border-color:var(--orange);color:var(--cream)}
.launch-form .upload span{display:flex;flex-direction:column;gap:6px}
.launch-form .upload small{display:block;color:var(--stone)}
.launch-form .upload img{max-width:120px;max-height:120px}
.launch-form h2{margin-top:6px}
.launch-explainer{padding:22px;background:var(--panel);border:1px solid rgba(237,230,214,.16);align-self:start}
.launch-explainer dl{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.launch-explainer dl>div{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.launch-explainer dt{font:600 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.launch-explainer dd{margin:0;color:var(--cream-2);line-height:1.45}
@media (max-width:560px){.launch-explainer dl>div{grid-template-columns:1fr;gap:4px}}
.build-status{font:400 12px/1.5 var(--mono);color:var(--cream-2);min-height:18px}
.launch-explainer{display:flex;flex-direction:column;gap:12px;color:var(--cream-2)}
.launch-explainer h2,.launch-explainer h3{color:var(--cream)}
.launch-explainer ol{counter-reset:s;display:flex;flex-direction:column;gap:8px}
.launch-explainer li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:8px}
.launch-explainer li::before{content:counter(s,decimal-leading-zero);font:600 12px/1.6 var(--mono);color:var(--orange)}
.launch-mark{width:96px;height:96px}
.pending{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* Admin (src/admin.js) */
.doc{display:flex;flex-direction:column;gap:var(--gap);max-width:880px;width:100%;margin:0 auto}
.crumb{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.lede{color:var(--cream-2);font-size:18px}
.card{background:var(--panel);border:1px solid rgba(237,230,214,.16);padding:18px 20px;display:flex;flex-direction:column;gap:10px}

/* Toasts */
.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:var(--cream);color:var(--ground);padding:10px 16px;font:600 13px/1.3 var(--mono);border-left:4px solid var(--orange);transition:opacity .3s,transform .3s}
.toast.out{opacity:0;transform:translateY(6px)}

/* Responsive */
@media (max-width:1100px){
  .units{grid-template-columns:repeat(2,1fr)}
  .base{grid-template-columns:1fr}
  .stage{min-height:520px}
  .base-low{grid-template-columns:1fr}
  .launch-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .bar{flex-wrap:wrap;gap:10px}
  .nav{order:3;width:100%;margin:0;overflow-x:auto}
  .nav a{padding:8px 10px;font-size:13px;white-space:nowrap}
  .ca{max-width:140px}
  .split{grid-template-columns:1fr}
  .hero{height:auto;display:flex;flex-direction:column}
  .map{position:relative;height:380px;order:2}
  .hero-copy{position:relative;left:auto;top:auto;padding:22px 18px 16px;order:1;max-width:none}
  .hero-copy h1{font-size:40px}
  .hero-cta{width:100%}
  .hero .demo-badge,.hero .live-badge{position:relative;top:auto;right:auto;order:0;align-self:flex-start;margin:14px 18px 0}
  .map-ctl{bottom:auto;top:12px;left:12px}
  .hero .map-ctl{display:none}
  .log{position:relative;right:auto;bottom:auto;width:auto;order:3;margin:var(--gap)}
  .pick{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto}
  .tiers li{grid-template-columns:40px 1fr}
  .tiers li span{grid-column:2;text-align:left}
}
@media (max-width:560px){
  .units{grid-template-columns:repeat(2,1fr)}
  .bar-end .ca{display:none}
  .head h1{font-size:26px}
  .orders{grid-template-columns:repeat(4,1fr)}
  .pair{grid-template-columns:1fr}
  .page-heading h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}