/* Core theme, layout primitives and menu shell. */

:root{
  --bg:#04090e;
  --bg-deep:#02060a;
  --panel:rgba(6,16,23,.94);
  --panel-solid:#06111a;
  --line:rgba(118,231,212,.18);
  --line-strong:rgba(118,231,212,.42);
  --ink:#dceef2;
  --ink-dim:#8fa9ae;
  --muted:#67878d;
  --accent:#76e7d4;
  --accent-2:#7db2ff;
  --warn:#ff7068;
  --gold:#f5d27a;
  --purple:#c79bff;
  --good:#8bff9b;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --radius:2px;
  --ui-scale:1;
  --touch-scale:1;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

html,body,#app{
  margin:0;padding:0;
  width:100%;height:100%;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% -10%,#0d2531 0,#061019 42%,#02060a 100%);
  color:var(--ink);
  font-family:var(--mono);
  font-size:calc(14px * var(--ui-scale));
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

button,select,input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0}

.screen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

.scanlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5;
}

.menu-bg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.75;
}

.eyebrow{
  display:block;
  font-size:10px;letter-spacing:.24em;
  color:var(--accent);text-transform:uppercase;
}

.muted{color:var(--muted);line-height:1.65}
.small{font-size:11px}
.center{text-align:center}

/* ---- Buttons ------------------------------------------------------------ */

.btn{
  border:1px solid var(--line);
  background:rgba(7,20,28,.8);
  color:var(--ink);
  padding:11px 18px;
  letter-spacing:.12em;font-size:11px;
  cursor:pointer;
  transition:border-color .14s,background .14s,transform .14s,color .14s;
  border-radius:var(--radius);
}
.btn:hover,.btn:focus-visible{
  border-color:var(--accent);
  background:rgba(18,48,58,.9);
  transform:translateY(-1px);
  outline:none;
}
.btn.primary{
  background:linear-gradient(135deg,rgba(24,80,78,.95),rgba(12,44,46,.95));
  border-color:var(--accent);
  color:#e9fffb;
}
.btn.primary:hover{box-shadow:0 0 26px rgba(118,231,212,.22)}
.btn.large{width:100%;padding:16px;font-size:13px;letter-spacing:.2em;margin-top:8px}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;font-size:10px}
.btn.danger{border-color:rgba(255,112,104,.5);color:#ffd3cf}
.btn.danger:hover{border-color:var(--warn);background:rgba(60,16,16,.7)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.button-row.center{justify-content:center}

/* ---- Bars --------------------------------------------------------------- */

.bar{
  height:6px;background:rgba(8,22,28,.9);
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;position:relative;border-radius:1px;
}
.bar>i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--accent),#d9fff8);
  box-shadow:0 0 10px rgba(118,231,212,.3);
  transition:width .2s ease;
}
.bar.mini{height:4px;margin:6px 0}
.bar.account>i{background:linear-gradient(90deg,var(--accent-2),#cfe3ff)}

/* ---- Menu shell --------------------------------------------------------- */

.menu-shell{
  position:relative;z-index:1;
  width:min(1180px,96vw);height:min(800px,94vh);
  display:grid;grid-template-columns:minmax(320px,38%) 1fr;
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(6,17,25,.94),rgba(3,9,14,.96));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.brand{
  container-type:inline-size;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:38px 34px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,24,32,.5),transparent);
  overflow:auto;
}
.brand h1{
  font-family:var(--font);
  /* Sized against the brand column, not the viewport, so the wordmark cannot
     overflow when the webfont is unavailable and a wider fallback is used.
     Retuned for RED / STATIC: the longest line is two characters shorter than
     the name this was first set for, and at the old size it sat marooned in
     the column. It fills about four fifths of the width, which leaves the
     headroom a wider fallback face needs. */
  font-size:clamp(44px,23cqw,108px);
  line-height:.86;margin:16px 0 16px;
  letter-spacing:-.06em;
  overflow-wrap:break-word;
  max-width:100%;
  background:linear-gradient(180deg,#e9fbff,#6fb4b0);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.tagline{color:var(--muted);line-height:1.75;max-width:38ch;font-size:12px}

.nav{display:grid;gap:6px;margin:26px 0}
.nav-item{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid transparent;
  border-left:2px solid var(--line);
  background:rgba(6,17,24,.5);
  padding:11px 14px;text-align:left;cursor:pointer;
  transition:.14s ease;
}
.nav-item:hover,.nav-item.focused,.nav-item:focus{
  border-left-color:var(--accent);
  background:rgba(16,44,53,.75);
  transform:translateX(4px);
}
.nav-label{font-size:13px;letter-spacing:.16em;display:flex;align-items:center;gap:8px}
.nav-hint{font-size:10px;color:var(--muted);letter-spacing:.04em}

/* A section the operator has not been cleared for. It keeps its place in the
   list and its shape — the point is that the division is visibly larger than
   the part of it you have access to. It reads as withheld, not as broken. */
.nav-item.classified{
  cursor:not-allowed;
  border-left-color:rgba(120,140,150,.35);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.012) 0 6px,transparent 6px 12px),
    rgba(6,17,24,.35);
}
.nav-item.classified:hover{transform:none;background:rgba(10,24,32,.5)}
.nav-item.classified .nav-label{color:rgba(160,180,188,.55);letter-spacing:.24em}
.nav-item.classified .nav-hint{color:rgba(150,175,185,.6)}
.nav-item.classified .nav-hint.flash{animation:hint-flash .5s ease}
@keyframes hint-flash{
  0%{color:var(--gold);transform:translateX(0)}
  25%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{color:rgba(150,175,185,.6);transform:none}
}

/* Something arrived while the operator was away. Deliberately small — this is a
   notification, not an advertisement. */
.new-flag{
  font-style:normal;font-size:8px;letter-spacing:.18em;
  padding:1px 5px;border:1px solid var(--gold);color:var(--gold);
  animation:new-pulse 2.4s ease-in-out infinite;
}
@keyframes new-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.nav-item.has-new{border-left-color:var(--gold)}

.brand-foot{
  opacity:.78;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.brand-foot .support-development{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;
  color:var(--gold);
  border-color:rgba(255,210,107,.42);
  text-decoration:none;
  white-space:nowrap;
}
.brand-foot .support-development:hover,
.brand-foot .support-development:focus-visible{
  color:#fff3c9;
  border-color:var(--gold);
  background:rgba(74,50,8,.44);
  box-shadow:0 0 22px rgba(255,210,107,.12);
}

.intel-panel{
  position:relative;z-index:1;
  padding:38px 34px;
  display:flex;flex-direction:column;gap:20px;
  overflow:auto;
}

.operator-card{
  border:1px solid var(--line);
  background:rgba(6,18,26,.7);
  padding:16px;
}
.operator-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.account-level{font-size:14px;color:var(--accent-2)}
.account-xp{display:block;margin-top:6px;font-size:10px;color:var(--muted)}

.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.statbox{border-top:1px solid var(--line);padding-top:10px}
.statbox b{display:block;font-size:20px;color:#eafffc}
.statbox span{font-size:9.5px;color:var(--muted);letter-spacing:.1em}

.next-directive{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  background:rgba(9,20,24,.6);
  padding:16px;
}
.next-directive h4{margin:8px 0 6px;font-size:15px;color:var(--gold)}
.next-directive p{font-size:11px;color:var(--muted);line-height:1.6}
.next-directive.complete{border-left-color:var(--good)}
.next-directive.complete h4{color:var(--good)}
.progress-text{font-size:10px;color:var(--muted);letter-spacing:.08em}

.completion-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto}
.completion{border-top:1px solid var(--line);padding-top:10px}
.completion span{display:block;font-size:9px;color:var(--muted);letter-spacing:.14em}
.completion b{font-size:12px}

/* ---- Panels (sub-screens) ----------------------------------------------- */

.panel{
  position:relative;z-index:1;
  width:min(1180px,96vw);max-height:94vh;
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.panel.wide{width:min(1400px,97vw)}

.panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:24px 26px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,26,34,.6),transparent);
}
.panel-head h2{font-size:26px;margin:8px 0 6px;font-family:var(--font)}
.panel-head .sub{color:var(--muted);font-size:12px;max-width:80ch;line-height:1.6}
.panel-head .jp{color:var(--gold)}
.panel-actions{display:flex;gap:8px;flex-shrink:0}

.panel-body{padding:22px 26px 26px;overflow:auto;flex:1}

.section-title{
  font-size:11px;letter-spacing:.2em;color:var(--accent);
  margin:26px 0 12px;padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.section-title:first-child{margin-top:0}

/* ---- Cards -------------------------------------------------------------- */

.card-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.card-grid.tight{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.card{
  border:1px solid var(--line);
  border-top:2px solid var(--c,var(--line-strong));
  background:rgba(7,19,27,.72);
  padding:16px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .16s,transform .16s;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card.locked{opacity:.55;filter:saturate(.35)}
.card.locked.recruiting,.card.locked.discovered{opacity:.9;filter:saturate(.85)}
.card h3{font-size:16px}
.card h4{font-size:13px}
.card p{font-size:11px}

.card-top{display:flex;gap:12px;align-items:center}
.weapon-glyph{
  width:44px;height:44px;flex-shrink:0;
  display:grid;place-items:center;
  border:1px solid var(--c,var(--line));
  background:rgba(118,231,212,.06);
  color:var(--c,var(--accent));
  font-size:11px;letter-spacing:.06em;
}
.weapon-glyph.small{font-size:20px}

.mini-stats{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--muted)}
.mini-stats b{color:var(--ink)}

.record-row{display:flex;gap:12px;font-size:10px;color:var(--muted);margin-top:auto}
.record-row b{color:var(--ink)}

.tag{
  display:inline-block;padding:3px 7px;margin:2px 3px 0 0;
  border:1px solid var(--line);font-size:9px;
  color:var(--accent);letter-spacing:.08em;
}
.tag-row{display:flex;flex-wrap:wrap;gap:2px}

.real-name{font-size:11px;color:var(--muted);letter-spacing:.1em}

/* ---- Operative portraits ------------------------------------------------ */

.portrait{
  align-self:flex-start;line-height:0;
  border:1px solid var(--line);
  background:#050b0d;
}
.portrait svg{display:block;width:100%;height:auto}

/* Authored dossier art, with the procedural portrait behind it for a browser
   that cannot decode WebP. Only one of the two is ever shown. */
.portrait-art{display:block;position:relative;line-height:0}
.portrait-art img{display:block;width:100%;height:auto;aspect-ratio:1}
.portrait-art-fallback{display:none}
.portrait-art.art-failed img{display:none}
.portrait-art.art-failed .portrait-art-fallback{display:block}
.creed{
  margin-top:2px;font-size:10px;line-height:1.5;font-style:italic;
  color:var(--c,var(--accent));opacity:.7;
}
.file-btn{margin-top:auto;align-self:stretch}

/* The full personnel file: the card is the screen. */
.briefing-inner.narrow{max-width:760px}
.dossier-card{display:block;margin:18px auto}
.dossier-card img{
  display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;
  border:1px solid var(--line);
  box-shadow:0 0 60px rgba(0,0,0,.7);
}
.operative-card .portrait{width:100%;max-width:132px;margin-bottom:2px}
.portrait.small{width:84px;flex:0 0 84px}
.brief-identity{display:flex;gap:12px;align-items:center}
.brief-identity h3{margin-bottom:2px}

/* Recovered-but-unscheduled and mid-counseling roster cards read as live
   leads rather than dead locked slots. */
.operative-card.discovered,.operative-card.recruiting{
  opacity:.9;filter:none;border-color:var(--c,var(--gold));
}
.operative-card.discovered h3,.operative-card.recruiting h3{color:var(--c,var(--gold))}
.counsel-btn{margin-top:auto;align-self:stretch;border-color:var(--gold);color:var(--gold)}
.counsel-btn:hover{background:rgba(245,210,122,.12)}

.recovered{margin-top:24px}
.recovered-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.recovered-card{
  display:flex;gap:12px;align-items:center;
  padding:10px;border:1px solid var(--c,var(--gold));
  background:linear-gradient(120deg,rgba(245,210,122,.08),rgba(3,10,14,.6));
}
.recovered-card .portrait{width:96px;flex:0 0 96px}
.recovered-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.recovered-body p{font-size:10.5px}

.stat-bars{display:grid;gap:5px;margin:4px 0}
.stat-bar{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:8px;font-size:9px;color:var(--muted)}
.stat-bar b{text-align:right;color:var(--ink)}
.stat-bar .bar{margin:0}

.brief-line{
  display:grid;grid-template-columns:74px 1fr;gap:10px;
  font-size:10.5px;line-height:1.55;padding:5px 0;
  border-top:1px solid rgba(255,255,255,.04);
}
.brief-line b{color:var(--accent);letter-spacing:.1em}
.brief-line span{color:var(--ink-dim)}

.mastery{margin-top:6px}
.unlock-req{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:10px;margin-top:auto}
.unlock-req b{color:var(--warn);letter-spacing:.1em}

/* ---- Tabs --------------------------------------------------------------- */

.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tab{
  border:1px solid transparent;border-bottom:none;
  background:transparent;color:var(--muted);
  padding:9px 14px;font-size:10.5px;letter-spacing:.14em;
  cursor:pointer;transition:.14s;
}
.tab i{font-style:normal;opacity:.6;margin-left:5px}
.tab:hover{color:var(--ink)}
.tab.active{
  color:var(--accent);
  border-color:var(--line);
  background:rgba(12,32,40,.7);
}

/* ---- Deploy ------------------------------------------------------------- */

.deploy-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px}
.deploy-column{display:flex;flex-direction:column;gap:18px}
.field-group{display:flex;flex-direction:column;gap:8px}

.chip-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.chip-row.compact{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}

.chip{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  border:1px solid var(--line);
  border-left:2px solid transparent;
  background:rgba(6,17,24,.6);
  padding:10px 12px;cursor:pointer;transition:.14s;
}
.chip b{font-size:12px;letter-spacing:.1em}
.chip span{font-size:9px;color:var(--muted);letter-spacing:.05em}
.chip:hover{background:rgba(16,42,50,.8)}
.chip.active{
  border-color:var(--c,var(--accent));
  border-left-color:var(--c,var(--accent));
  background:rgba(18,50,58,.85);
}
.chip.active b{color:var(--c,var(--accent))}
.chip.small{padding:8px 10px}
.chip.locked{opacity:.42;cursor:not-allowed}

.deploy-brief{
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--line);
  background:rgba(4,12,18,.6);
  padding:18px;overflow:auto;max-height:70vh;
}
.brief-block{display:flex;flex-direction:column;gap:6px}
.brief-block h3{font-size:17px;margin:4px 0}
.brief-block .muted{font-size:11px}
.payout{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;padding-top:10px;border-top:1px solid var(--line);
}
.payout span{font-size:10px;color:var(--muted);letter-spacing:.14em}
.payout b{font-size:18px;color:var(--gold)}

/* ---- Development tree --------------------------------------------------- */

.dev-summary{
  border:1px solid var(--line);background:rgba(6,18,26,.6);
  padding:14px;margin-bottom:20px;
}
.dev-tier{margin-bottom:20px}
.tier-label{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  font-size:10px;letter-spacing:.24em;color:var(--muted);
}
.tier-label::after{content:"";flex:1;height:1px;background:var(--line)}

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

.dev-node{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  border:1px solid var(--line);
  border-top:2px solid var(--branch,var(--line));
  background:rgba(6,17,24,.7);
  padding:14px;cursor:pointer;transition:.15s;
}
.dev-node.branch-offense{--branch:#ff8b68}
.dev-node.branch-defense{--branch:#7db2ff}
.dev-node.branch-utility{--branch:#76e7d4}
.dev-node .node-branch{font-size:8.5px;letter-spacing:.2em;color:var(--branch)}
.dev-node h4{font-size:13px}
.dev-node p{font-size:10px;line-height:1.5}
.dev-node.ready:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* An upgrade the operator cannot pay for yet. The cost is the only thing on
   the card, because the cost is the only actionable part of it. */
.dev-node.classified{
  cursor:not-allowed;
  border-top-color:rgba(120,140,150,.3);
  border-color:rgba(120,140,150,.18);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.014) 0 7px,transparent 7px 14px),
    rgba(4,12,18,.6);
}
.dev-node.classified .node-branch{color:rgba(140,160,170,.45)}
.dev-node.classified h4{color:rgba(160,180,188,.5);letter-spacing:.22em;font-size:11px}
.dev-node.classified p{color:rgba(140,165,175,.42)}
.dev-node.classified .pips i{opacity:.18}
.dev-node.classified .node-cost{color:var(--gold);opacity:.75}
.dev-node.blocked{opacity:.4;cursor:not-allowed}
.dev-node.poor{opacity:.72;cursor:not-allowed}
.dev-node.maxed{border-color:var(--gold);opacity:.9}
.dev-node.maxed .node-cost{color:var(--gold)}

.pips{display:flex;gap:3px}
.pips i{width:14px;height:4px;background:rgba(255,255,255,.1);display:block}
.pips i.on{background:var(--branch);box-shadow:0 0 6px var(--branch)}

.node-effect{font-size:10px;color:var(--ink-dim)}
.node-effect b{color:var(--accent)}
.node-cost{
  margin-top:auto;font-size:10px;letter-spacing:.1em;
  color:var(--muted);padding-top:6px;border-top:1px solid rgba(255,255,255,.05);
}
.dev-node.ready .node-cost{color:var(--gold)}

/* ---- Directives & achievements ------------------------------------------ */

.directive-ladder{display:grid;gap:6px}
.directive{
  display:grid;grid-template-columns:44px 1fr 160px;gap:14px;align-items:center;
  border:1px solid var(--line);border-left:2px solid var(--line);
  background:rgba(6,17,24,.55);padding:12px 14px;
}
.directive.done{border-left-color:var(--good);background:rgba(10,28,22,.5)}
.directive.done .directive-index{color:var(--good)}
.directive-index{font-size:18px;color:var(--muted);text-align:center}
.directive-body h4{font-size:13px;margin-bottom:3px}
.directive-body p{font-size:10.5px}
.directive-reward{text-align:right}
.directive-reward b{display:block;color:var(--gold);font-size:13px}

.achievement.earned{border-top-color:var(--good)}
.achievement.earned .eyebrow{color:var(--good)}
.achievement-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto}
.achievement-foot b{color:var(--gold);font-size:11px}

/* ---- Evolutions --------------------------------------------------------- */

.evolution-card{border-top-color:var(--gold)}
.evolution-card.undiscovered{border-top-color:var(--line);opacity:.7}
.fusion{display:flex;align-items:center;gap:8px;margin:4px 0;flex-wrap:wrap}
.fusion-part{
  flex:1;min-width:90px;
  border:1px solid var(--line);padding:7px 9px;
  font-size:10px;line-height:1.4;
}
.fusion-part i{display:block;color:var(--accent);font-style:normal;font-size:9px}
.fusion-op{color:var(--gold);font-size:16px}

/* ---- Intelligence ------------------------------------------------------- */

.intel-list{display:grid;gap:12px}
.intel-file{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:rgba(5,14,20,.65);padding:18px 20px;
}
.intel-file.locked{border-left-color:var(--muted);opacity:.72}
.intel-head{margin-bottom:10px}
.intel-head h3{font-size:16px;margin-top:5px}
.intel-body{
  font-size:12px;line-height:1.85;color:var(--ink-dim);
  max-width:104ch;white-space:pre-wrap;
}
.intel-locked{max-width:400px}

/* ---- Statistics --------------------------------------------------------- */

.stat-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.stat-grid.compact{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.stat-cell{
  border:1px solid var(--line);border-top:1px solid var(--line-strong);
  background:rgba(6,17,24,.55);padding:11px 13px;
}
.stat-cell span{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted)}
.stat-cell b{display:block;margin-top:5px;font-size:17px;color:#eafffc}

.history{display:grid;gap:2px;font-size:10.5px}

/* The replay shelf reuses the operation log's row, with one fewer column and
   the last one holding buttons rather than a number. */
.replay-shelf .history-row{grid-template-columns:80px 1fr 1fr 64px 64px 60px 96px}
.replay-actions{display:flex;gap:4px;justify-content:flex-end;align-items:center}
/* A recording the current simulation cannot run. Still listed, because the
   player saved it and deleting it behind their back would be worse. */
.replay-shelf .history-row.stale{opacity:.55}
.replay-shelf .history-row.stale span:first-child{color:var(--muted)}
.replay-actions .btn{padding:2px 8px;font-size:9px;letter-spacing:.1em}
.replay-actions .btn.ghost{padding:2px 7px}
@media(max-width:760px){
  .replay-shelf .history-row{grid-template-columns:1fr 1fr;gap:4px}
  .replay-actions{grid-column:1/-1;justify-content:flex-start}
}
.history-row{
  display:grid;grid-template-columns:80px 1fr 1fr 90px 64px 64px 44px 56px;
  gap:8px;padding:9px 12px;
  border:1px solid var(--line);background:rgba(6,17,24,.5);
}
.history-row.head{color:var(--muted);letter-spacing:.14em;font-size:9px;background:transparent;border-color:transparent}
.history-row.win{border-left:2px solid var(--good)}
.history-row.loss{border-left:2px solid var(--warn)}

/* ---- Settings ----------------------------------------------------------- */

.settings-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.settings-block{display:flex;flex-direction:column}
.setting{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.setting label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;color:var(--ink-dim);
}
.setting label b{color:var(--accent);font-size:11px}
.setting label i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);margin-top:3px}
.setting.toggle{flex-direction:row;justify-content:space-between;align-items:center}
.setting.toggle label{flex-direction:column;align-items:flex-start;gap:0}

.setting select{
  background:#061018;border:1px solid var(--line);
  padding:9px 11px;color:var(--ink);font-size:11px;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;background:rgba(118,231,212,.16);
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(118,231,212,.5);
  cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border:none;border-radius:50%;
  background:var(--accent);cursor:pointer;
}

.switch{
  width:44px;height:22px;flex-shrink:0;
  border:1px solid var(--line);background:rgba(6,17,24,.8);
  cursor:pointer;position:relative;transition:.16s;padding:0;
}
.switch i{
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;background:var(--muted);
  transition:.16s;display:block;
}
.switch.on{border-color:var(--accent);background:rgba(18,58,58,.9)}
.switch.on i{left:24px;background:var(--accent);box-shadow:0 0 10px rgba(118,231,212,.6)}
.switch.labelled{
  width:auto;height:auto;display:flex;align-items:center;gap:9px;
  padding:8px 12px;font-size:10px;letter-spacing:.1em;
}
.switch.labelled i{position:static;width:10px;height:10px}
.switch.labelled span{color:var(--ink-dim)}

.control-legend{
  display:grid;gap:5px;margin-top:8px;
  font-size:10px;color:var(--muted);
}
.control-legend b{color:var(--accent);margin-right:6px}

/* ---- Results ------------------------------------------------------------ */

.results{
  position:relative;z-index:1;
  width:min(1180px,96vw);max-height:94vh;overflow:auto;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.results.victory{border-top:3px solid var(--good)}
.results.defeat{border-top:3px solid var(--warn)}
.results-inner{padding:34px}
.results h1{
  font-family:var(--font);font-size:clamp(30px,4.4vw,52px);
  letter-spacing:-.04em;margin:10px 0 6px;
}
.results.victory h1{color:var(--good)}
.results.defeat h1{color:var(--warn)}
.results-reason{color:var(--muted);font-size:12px;letter-spacing:.1em;margin-bottom:22px}

.payout-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.payout-cell{border:1px solid var(--line);border-top:2px solid var(--gold);background:rgba(6,17,24,.6);padding:14px}
.payout-cell span{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted)}
.payout-cell b{display:block;margin-top:6px;font-size:24px;color:var(--gold)}

.results-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}

.loadout-list{display:grid;gap:4px}
.loadout-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  border:1px solid var(--line);background:rgba(6,17,24,.5);
  padding:9px 12px;font-size:11px;
}
.loadout-row i{font-style:normal;font-size:9.5px;color:var(--accent);letter-spacing:.08em}
.loadout-row b{color:var(--gold);font-size:11px}
.loadout-row.evolved{border-left:2px solid var(--gold)}
.loadout-row.passive{opacity:.82}

.awards{margin-top:24px}
.award-list{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.award{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  background:rgba(6,17,24,.55);padding:10px 12px;
}
.award-type{font-size:8.5px;letter-spacing:.2em;color:var(--muted)}
.award b{font-size:12px}
.award i{font-style:normal;font-size:10px;color:var(--gold)}
.award-unlock{border-left-color:var(--gold)}
.award-achievement{border-left-color:var(--accent-2)}
.award-intel{border-left-color:var(--purple)}


/* ---- Campaign, briefings and documents ---------------------------------- */

.campaign-progress{margin-bottom:16px}
.campaign-progress .eyebrow{display:block;margin-bottom:6px}
.campaign-closing{margin-top:18px;font-size:11px;font-style:italic}

.op-list{display:flex;flex-direction:column;gap:8px}
.op-row{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;
  padding:12px 14px;border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(8,20,26,.6),rgba(3,10,14,.5));
}
.op-index{
  font-size:18px;color:var(--muted);font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);padding-right:12px;
}
.op-body h3{font-size:15px;margin:2px 0}
.op-body p{font-size:11px;margin:0}
.op-row.next{border-color:var(--accent);box-shadow:0 0 0 1px rgba(118,231,212,.12)}
.op-row.next .op-index{color:var(--accent)}
.op-row.done{opacity:.86}
.op-row.done .op-index{color:#8bff9b}
.op-row.locked{opacity:.45}
.op-doc{
  margin-top:8px;display:flex;gap:10px;align-items:baseline;
  font-size:10px;border-left:2px solid var(--gold);padding-left:8px;
}
.op-doc b{color:var(--gold)}
.op-doc span{color:var(--muted);letter-spacing:.1em}

/* Briefing / debrief / document reader share one presentation. */
.briefing{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  min-height:100%;padding:32px 20px;
}
/* Sized against the container, not the viewport: .screen already carries the
   safe-area padding, and 94vw ignored it — which pushed every briefing screen
   8px past the edge on a narrow phone. */
.briefing-inner{width:min(760px,100%)}
.briefing h1{font-size:clamp(26px,5vw,44px);margin:4px 0 20px}
.dialogue{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.dialogue .line{
  display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:10px 12px;border-left:2px solid var(--line-strong);
  background:rgba(6,16,22,.5);
  opacity:0;animation:line-in .45s ease forwards;
}
.dialogue .line b{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.dialogue .line p{font-size:13px;line-height:1.65;margin:0;color:#dceceb}

/* Typed dialogue. Every line carries its full text as an invisible ghost that
   sets the box height before a character is typed, and the visible text is
   painted over the top — otherwise the container grows line by line and walks
   the DEPLOY button down the screen while the player is reading. The ghost is
   also the copy assistive tech reads, so a screen reader gets the whole
   briefing at once instead of waiting out the animation. */
.dialogue.typing .line,.dialogue.typed-out .line{
  animation:none;opacity:0;transition:opacity .3s ease;
}
.dialogue.typing .line.revealed,.dialogue.typed-out .line.revealed{opacity:1}
.dialogue .line p{position:relative}
.dialogue .ghost{visibility:hidden}
.dialogue .typed{position:absolute;left:0;top:0;width:100%}

/* Caret on the line currently being typed. */
.dialogue .line.typing .typed::after{
  content:'';display:inline-block;
  width:.5em;height:1em;margin-left:1px;
  vertical-align:-.15em;
  background:currentColor;opacity:.75;
  animation:caret-blink .9s steps(1,end) infinite;
}
@keyframes caret-blink{0%,49%{opacity:.75}50%,100%{opacity:0}}

.dialogue-skip{
  font-size:9px;letter-spacing:.2em;color:var(--muted);
  margin:-14px 0 20px;text-align:right;opacity:.7;
  transition:opacity .3s ease;
}
.dialogue-skip.spent{opacity:0}
@media(prefers-reduced-motion:reduce){
  /* Nothing types, so nothing to skip and nothing to blink. */
  .dialogue-skip{display:none}
  .dialogue .line.typing .typed::after{animation:none;opacity:0}
}
.dialogue .speaker-vector{border-left-color:var(--accent)}
.dialogue .speaker-vector b{color:var(--accent)}
.dialogue .speaker-archivist{border-left-color:#7db2ff}
.dialogue .speaker-archivist b{color:#7db2ff}
.dialogue .speaker-operative{border-left-color:var(--gold)}
.dialogue .speaker-operative b{color:var(--gold)}
.dialogue .speaker-signal{border-left-color:#ff7068;background:rgba(30,8,10,.45)}
.dialogue .speaker-signal b{color:#ff7068}
.dialogue .speaker-signal p{font-style:italic;letter-spacing:.04em}
@keyframes line-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.objective-card{
  border:1px solid var(--accent);padding:14px;margin-bottom:22px;
  background:rgba(118,231,212,.05);
}
.objective-card p{font-size:12px;margin:6px 0 10px}
.objective-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:10px;color:var(--muted)}
.objective-meta b{color:#eafffc;margin-left:6px}

.briefing.document .briefing-inner{width:min(680px,100%)}
.doc-body{
  border:1px solid var(--gold);border-left-width:3px;
  background:rgba(24,18,6,.4);padding:18px 20px;margin-bottom:22px;
}
.doc-body p{font-size:13px;line-height:1.8;margin:0;color:#f0e6cf}

@media(max-width:720px){
  .op-row{grid-template-columns:34px 1fr;gap:10px}
  .op-action{grid-column:1/-1}
  .op-action .btn{width:100%}
  .dialogue .line{grid-template-columns:1fr;gap:4px}
}

/* ---- Gunsmith ----------------------------------------------------------- */

.gs-layout{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:start}

.gs-rack{display:flex;flex-direction:column;gap:4px;position:sticky;top:0}
.gs-rack .eyebrow{margin-bottom:6px}
.gs-rack-item{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;
  border:1px solid var(--line);border-left:2px solid var(--c,var(--line));
  background:rgba(6,17,24,.55);padding:8px 9px;cursor:pointer;text-align:left;
  transition:.14s ease;
}
.gs-rack-item:hover{background:rgba(16,44,53,.7);transform:translateX(3px)}
.gs-rack-item.active{border-color:var(--c);background:rgba(16,44,53,.85)}
.gs-rack-glyph{
  display:grid;place-items:center;height:26px;
  border:1px solid var(--line);color:var(--c,var(--accent));font-size:9px;
}
.gs-rack-name{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-rack-rank{font-size:9px;color:var(--muted);letter-spacing:.08em}

.gs-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--c,var(--accent));
  padding:0 0 14px 14px;margin-bottom:16px;
}
.gs-head h3{font-size:19px;margin:2px 0 4px;color:var(--c,var(--ink))}
.gs-head p{font-size:11px;max-width:52ch}
.gs-rank{min-width:190px;text-align:right}
.gs-rank b{font-size:11px;letter-spacing:.14em;color:var(--gold)}

.gs-columns{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
.gs-slots{display:flex;flex-direction:column;gap:14px}

.gs-slot-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.gs-next{font-style:normal;font-size:9px;letter-spacing:.12em;color:var(--muted)}
.gs-next.done{color:var(--good)}
.gs-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.gs-option{
  display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:rgba(6,17,24,.5);
  padding:8px 10px;transition:.14s ease;
}
.gs-option:hover:not(:disabled){border-color:var(--accent);background:rgba(16,44,53,.7)}
.gs-option b{font-size:11px}
.gs-option span{font-size:9.5px;color:var(--muted);line-height:1.5}
.gs-option.active{border-color:var(--accent);background:rgba(24,80,78,.45)}
.gs-option.active b{color:var(--accent)}
.gs-option.locked{opacity:.4;cursor:not-allowed}

.gs-readout{
  border:1px solid var(--line);background:rgba(4,12,18,.6);
  padding:14px;position:sticky;top:0;
}
.gs-stats{display:flex;flex-direction:column;gap:3px;margin:8px 0 14px}
.gs-stat{
  display:grid;grid-template-columns:1fr auto 52px;align-items:baseline;gap:8px;
  font-size:10px;padding:3px 0;border-bottom:1px solid rgba(118,231,212,.07);
}
.gs-stat span{color:var(--muted);letter-spacing:.1em}
.gs-stat b{color:#eafffc;font-variant-numeric:tabular-nums}
.gs-stat i{font-style:normal;font-size:9px;text-align:right;color:var(--muted)}
.gs-stat.better i{color:var(--good)}
.gs-stat.worse i{color:var(--warn)}

.gs-profile{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.gs-axis{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px}
.gs-axis span{font-size:8.5px;color:var(--muted);letter-spacing:.12em}
.gs-axis .bar{margin:0}

/* ---- Gunsmith presets ----------------------------------------------------
   A weapon's bench state is three things — attachments, secondary module and
   livery — and a preset is one named copy of all of it. Sits above the bench
   buttons because loading one is a bigger action than stripping a slot. */
.gs-presets{
  display:flex;flex-direction:column;gap:6px;
  padding:10px 0;margin:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.gs-preset-list{display:flex;flex-direction:column;gap:4px}
.gs-preset{display:flex;gap:4px;align-items:stretch}
.gs-preset-load{
  flex:1;min-width:0;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;
  padding:5px 8px;
  border:1px solid var(--line);background:rgba(6,17,24,.5);color:var(--ink);
  transition:border-color .14s,background .14s;
}
.gs-preset-load:hover{border-color:var(--accent);background:rgba(12,32,40,.6)}
.gs-preset-load b{font-size:10px;letter-spacing:.12em}
.gs-preset-load span{
  font-size:8.5px;letter-spacing:.06em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gs-preset-save{display:flex;gap:4px}
.gs-preset-save input{
  flex:1;min-width:0;
  padding:5px 8px;font:inherit;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid var(--line);background:rgba(3,10,14,.7);color:var(--ink);
}
.gs-preset-save input:focus{outline:none;border-color:var(--accent)}
.gs-preset-note{font-size:8px;letter-spacing:.14em;color:var(--muted)}
.muted.small{font-size:9px;line-height:1.5}

.gs-record{display:flex;flex-direction:column;gap:3px;font-size:9.5px;color:var(--muted)}
.gs-record b{color:#eafffc;float:right}
.gs-primary-note{display:block;margin-top:8px;font-size:9.5px;color:var(--good)}

/* Loadout strip on the deploy screen and the campaign briefing. */
.primary-fitted{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.fitted-tag{
  font-size:9px;letter-spacing:.06em;padding:3px 7px;
  border:1px solid var(--line);color:var(--accent);
  background:rgba(118,231,212,.06);
}
.briefing-loadout{
  border:1px solid var(--line);padding:14px;margin-bottom:20px;
  background:rgba(6,16,22,.45);
}
.briefing-loadout .field-group{margin:0}

@media(max-width:900px){
  .gs-layout{grid-template-columns:1fr}
  .gs-rack{flex-direction:row;overflow-x:auto;position:static}
  .gs-rack .eyebrow{display:none}
  .gs-rack-item{flex:0 0 auto;grid-template-columns:auto auto;gap:6px}
  .gs-rack-name{display:none}
  .gs-columns{grid-template-columns:1fr}
  .gs-readout{position:static}
  .gs-head{flex-direction:column;gap:12px}
  .gs-rank{text-align:left;min-width:0;width:100%}
}

/* ---- Boot title screen --------------------------------------------------
   The artwork carries its own logo, tagline and buttons, so the stage keeps
   the artwork's aspect ratio and is never cropped — the hit areas over the
   painted buttons are positioned in percentages of that untouched frame. */
.splash{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  background:#02060a;
  opacity:0;transition:opacity .5s ease;
}
.splash.ready{opacity:1}
.splash.leaving{opacity:0;transition:opacity .35s ease}

/* The letterbox is a blurred, dimmed copy of the same frame rather than bars,
   so the artwork appears to bleed off the edges of any screen shape. */
.splash-backdrop{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  filter:blur(46px) brightness(.4) saturate(.8);
  transform:scale(1.08);
}

.splash-stage{
  position:relative;
  --splash-ratio:1.333;
  aspect-ratio:var(--splash-ratio);
  width:min(100vw,calc(100vh * var(--splash-ratio)));
  width:min(100vw,calc(100dvh * var(--splash-ratio)));
  max-height:100vh;
  max-height:100dvh;
  box-shadow:0 0 90px rgba(0,0,0,.75);
}

.splash-art{display:block;width:100%;height:100%;object-fit:fill}

/* Anywhere on the frame starts the operation, so the painted buttons never
   have to be a precise touch target. It sits under them, so SETTINGS wins. */
.splash-anywhere{
  position:absolute;inset:0;z-index:1;
  appearance:none;border:0;padding:0;margin:0;
  background:transparent;cursor:pointer;
}
.splash-anywhere:focus-visible{outline:none}

/* Transparent until touched: the painted button is the button. */
.splash-hit{
  z-index:2;
  position:absolute;
  appearance:none;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,0);
  border-radius:2px;
  transition:background .18s ease,box-shadow .18s ease;
}
.splash-hit:hover,.splash-hit:focus-visible{
  background:rgba(190,232,255,.13);
  box-shadow:0 0 26px rgba(120,200,255,.35),inset 0 0 18px rgba(150,215,255,.18);
  outline:none;
}
.splash-hit:active{background:rgba(255,90,90,.2)}

.splash-hint{
  position:absolute;left:0;right:0;bottom:1.5%;
  text-align:center;margin:0;
  font-size:10px;letter-spacing:.34em;color:rgba(220,238,242,.5);
  animation:splashPulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes splashPulse{0%,100%{opacity:.28}50%{opacity:.75}}

@media(pointer:coarse){
  .splash-hint{bottom:2.5%}
}

/* Contract board — the two rotating assignments. */
.contract-terms{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.55rem}
.contract-terms span{
  font-size:.68rem;letter-spacing:.09em;padding:.2rem .55rem;
  border:1px solid rgba(118,231,212,.3);border-radius:2px;
  color:#76e7d4;white-space:nowrap;
}
.contract-best{margin-top:.55rem;font-size:.72rem;letter-spacing:.06em}
.op-row .op-index{white-space:nowrap}

/* Secondary fire — the HUD's ordnance button. */
.ordnance-btn span{letter-spacing:.12em}
.ordnance-btn.ready{border-color:rgba(255,179,92,.55)}

/* Campaign acts — twelve operations need a spine to hang off. */
.act-block{margin-bottom:2rem}
.act-head{margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid rgba(118,231,212,.16)}
.act-head h2{margin:.2rem 0 .3rem;font-size:1.15rem;letter-spacing:.1em}
.act-head p{margin:0;max-width:62ch}
.act-block.locked .act-head h2{color:rgba(220,238,242,.35)}
.act-block.locked{opacity:.72}

/* Command doctrine — the fourth branch. */
.dev-node.branch-command{border-color:rgba(245,210,122,.34)}
.dev-node.branch-command .node-branch{color:var(--gold)}
.doctrine-blurb{margin:.1rem 0 .7rem;max-width:70ch;font-size:.8rem}

/* Weapon liveries — a swatch beside the name, since the name alone is not a colour. */
.livery-swatch{
  display:inline-block;width:.62rem;height:.62rem;margin-right:.42rem;
  border-radius:1px;vertical-align:baseline;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 6px currentColor;
}
.livery-option.active{border-color:rgba(245,210,122,.5)}


/* ---- Controller focus ----------------------------------------------------
   Focus navigation moves the browser's own focus, which a mouse player should
   never see and a player across a room from a television must not be able to
   miss. The ring is therefore keyed to a controller actually being in use —
   `.pad-nav` goes on the root the moment a pad is touched and comes off again
   on the first mouse move — rather than to :focus-visible, which a
   programmatic focus() does not reliably trigger with no keyboard involved. */
.pad-nav :focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent),
             0 0 24px color-mix(in srgb,var(--accent) 34%,transparent);
}
/* Cards and rack items carry their own borders; the ring sits outside them so
   it never reads as the item being selected rather than highlighted. */
.pad-nav .adapt-card:focus,
.pad-nav .gs-rack-item:focus,
.pad-nav .nav-item:focus{outline-offset:3px}
/* The splash's full-screen hit area would otherwise draw a ring around the
   entire artwork. */
.pad-nav .splash-anywhere:focus{outline:none;box-shadow:none}