/* ============================================================
   HORDA :: Lobby / Intro  —  estilo arcade-táctico, acento ámbar
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  /* superficies */
  --bg-0:#070809;
  --bg-1:#0d0f12;
  --bg-2:#14171c;
  --panel:#16191f;
  --panel-edge:#262b33;
  --line:rgba(255,255,255,.06);

  /* texto / metal */
  --ink:#e7ebf0;
  --ink-dim:#9aa3ad;
  --ink-faint:#5d646d;
  --metal:#c9ced6;

  /* acento ámbar / peligro */
  --amber:#ff8a1f;
  --amber-hot:#ffb454;
  --amber-deep:#c9560a;
  --danger:#ff3b2f;

  /* colores de rol */
  --r-soldier:#9bb04a;
  --r-medic:#e8453c;
  --r-scientist:#48a7c8;
  --r-bomber:#8d8a86;

  --glow-amber:0 0 18px rgba(255,138,31,.55), 0 0 48px rgba(255,138,31,.22);
  --font-display:'Teko',sans-serif;
  --font-ui:'Chakra Petch',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg-0);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- fondo atmosférico ---------- */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,138,31,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,138,31,.05) 1px,transparent 1px);
  background-size:46px 46px;
  background-position:center;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{to{background-position:center calc(50% + 46px)}}
.bg-vignette{
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%,rgba(255,138,31,.07),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 120%,rgba(201,86,10,.18),transparent 60%),
    radial-gradient(circle at 50% 45%,transparent 40%,rgba(0,0,0,.6) 100%);
}
.bg-scan{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px);
  opacity:.35;mix-blend-mode:multiply;
}
.bg-pulse{
  background:radial-gradient(ellipse 90% 60% at 50% 50%,transparent 60%,rgba(255,59,47,.10) 100%);
  animation:dangerPulse 3.4s ease-in-out infinite;
}
@keyframes dangerPulse{0%,100%{opacity:.35}50%{opacity:.85}}

/* ---------- shell ---------- */
.shell{position:relative;z-index:2;max-width:1480px;margin:0 auto;padding:22px 26px 30px;min-height:100%}

/* ---------- HUD corners util ---------- */
.hud{position:relative}
.hud::before,.hud::after,
.hud > .corner-bl,.hud > .corner-br{
  content:"";position:absolute;width:14px;height:14px;border:2px solid var(--amber);opacity:.7;
}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner-bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner-br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ================= HEADER ================= */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:16px}
.brand .emblem{
  width:62px;height:62px;flex:none;position:relative;
  display:grid;place-items:center;
}
.brand .emblem img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(72,167,200,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.brand .emblem::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed rgba(255,138,31,.4);animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand .titles{display:flex;flex-direction:column;line-height:.82}
.brand h1{
  font-family:var(--font-display);font-weight:700;font-size:54px;letter-spacing:5px;
  color:var(--amber-hot);
  text-shadow:var(--glow-amber);
}
.brand h1 b{color:#fff;-webkit-text-stroke:0}
.brand .sub{
  font-family:var(--font-mono);font-size:11px;letter-spacing:3.5px;color:var(--ink-dim);
  margin-top:4px;
}

.alert{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end;
  font-family:var(--font-mono);
}
.alert .dot{width:11px;height:11px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 0 rgba(255,59,47,.6);animation:rec 1.4s ease-out infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,59,47,.6)}100%{box-shadow:0 0 0 12px rgba(255,59,47,0)}}
.alert .ticker{
  background:linear-gradient(90deg,rgba(255,59,47,.16),rgba(255,138,31,.08));
  border:1px solid rgba(255,59,47,.35);
  color:var(--amber-hot);font-size:12px;letter-spacing:2px;padding:9px 16px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  animation:flick 4s steps(1) infinite;
}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.55}}
.alert .online{font-size:12px;color:var(--ink-dim);letter-spacing:1px;white-space:nowrap}
.alert .online b{color:var(--amber-hot)}

/* ================= MAIN GRID ================= */
.layout{display:grid;grid-template-columns:1fr 372px;gap:22px;align-items:start}

/* ---- lore strip ---- */
.lore{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--panel-edge);padding:16px 20px;margin-bottom:18px;
  display:flex;gap:18px;align-items:flex-start;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.lore .tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--amber);
  border:1px solid rgba(255,138,31,.4);padding:5px 9px;white-space:nowrap;
  align-self:flex-start;background:rgba(255,138,31,.06);
}
.lore p{font-size:15.5px;line-height:1.55;color:var(--ink-dim);max-width:78ch}
.lore p b{color:var(--ink)}
.lore p .hl{color:var(--amber-hot);font-weight:600}

/* ---- section heading ---- */
.sec-head{display:flex;align-items:baseline;gap:14px;margin:4px 2px 12px}
.sec-head h2{font-family:var(--font-display);font-weight:600;font-size:28px;letter-spacing:3px;color:var(--ink);white-space:nowrap}
.sec-head h2 .num{color:var(--amber);margin-right:8px;font-family:var(--font-mono);font-size:15px;letter-spacing:1px}
.sec-head .hint{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:1px;margin-left:auto}
.sec-head .hint::before{content:"▸ "}

/* ================= ROLE ACCORDION ================= */
.roles{display:flex;gap:12px;height:340px}
.role{
  position:relative;flex:1 1 0;min-width:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2),#0c0e11);
  border:1px solid var(--panel-edge);
  transition:flex-grow .5s cubic-bezier(.7,0,.2,1),border-color .3s,box-shadow .3s,filter .3s;
  filter:grayscale(.55) brightness(.82);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  --rc:var(--amber);
}
.role::before{ /* top accent stripe */
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rc);opacity:.85;z-index:4;
}
.role .glow{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 38%,transparent),transparent 62%);
  opacity:.5;transition:opacity .3s;
}
.role .portrait{
  position:absolute;top:8%;left:0;right:0;height:58%;z-index:2;
  display:grid;place-items:center;
}
.role .portrait img{
  height:100%;width:auto;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.65));
  transition:transform .45s cubic-bezier(.5,1.6,.5,1);
}
.role .label{
  position:absolute;bottom:0;left:0;right:0;z-index:3;padding:12px 12px 16px;
  text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 55%);
}
.role .label .rname{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:.5px;line-height:.9;color:#fff;white-space:nowrap}
.role .label .rfun{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--rc);margin-top:3px;text-transform:uppercase}

/* hover */
.role:hover{filter:grayscale(.1) brightness(1);border-color:color-mix(in srgb,var(--rc) 55%,var(--panel-edge))}
.role:hover .portrait img{transform:translateY(-6px) scale(1.05)}
.role:hover .glow{opacity:.8}

/* ---- detail panel (revealed when selected) ---- */
.role .detail{
  position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;
  padding:20px 22px;
  background:linear-gradient(105deg,rgba(8,9,11,.72),rgba(8,9,11,.94));
  transition:opacity .35s .12s;
}
.role .detail .dport{position:relative;display:grid;place-items:center;height:100%}
.role .detail .dport img{width:100%;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--rc) 60%,transparent)) drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.role .detail .dport::after{
  content:"";position:absolute;width:128px;height:128px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);
  animation:spin 9s linear infinite;
}
.dbody .deyebrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;min-height:16px}
.dbody .deyebrow .chip{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;padding:3px 8px;color:#0a0a0a;background:var(--rc);font-weight:700}
.dbody .deyebrow .role-fn{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;color:var(--ink-dim);white-space:nowrap}
.dbody h3{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.2vw,42px);letter-spacing:1.5px;line-height:.9;color:#fff;margin-bottom:8px}
.dbody .ddesc{font-size:14px;line-height:1.5;color:var(--ink-dim);max-width:46ch;margin-bottom:14px}
.dbody .stats{display:flex;flex-wrap:wrap;gap:8px}
.dbody .stat{
  display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.5px;
  background:rgba(255,255,255,.04);border:1px solid var(--panel-edge);padding:7px 11px;
  border-left:3px solid var(--rc);
}
.dbody .stat .k{font-family:var(--font-mono);font-size:10px;color:var(--rc);letter-spacing:1px}
.dbody .stat .v{color:var(--ink)}
.dbody .key{
  font-family:var(--font-mono);font-size:11px;color:var(--amber-hot);
  background:#0a0c0f;border:1px solid var(--panel-edge);border-bottom-width:2px;
  padding:2px 7px;border-radius:3px;
}

/* SELECTED state */
.role.active{flex-grow:3.4;filter:none;border-color:var(--rc);
  box-shadow:0 0 0 1px var(--rc),0 0 34px color-mix(in srgb,var(--rc) 40%,transparent)}
.role.active .portrait,.role.active .label{opacity:0;transition:opacity .2s}
.role.active .detail{opacity:1;pointer-events:auto}
.role.active .glow{opacity:.6}

/* ================= DEPLOY BAR ================= */
.deploy{
  margin-top:18px;display:flex;gap:14px;align-items:stretch;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--panel-edge);padding:14px;
}
.field{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--ink-faint)}
.field label::before{content:"▸ ";color:var(--amber)}
.field input,.field select{
  font-family:var(--font-ui);font-weight:500;font-size:15px;letter-spacing:1px;
  color:var(--ink);background:#0a0c0f;border:1px solid var(--panel-edge);
  padding:11px 13px;text-transform:uppercase;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 14px rgba(255,138,31,.25)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.btn-deploy{
  flex:none;align-self:stretch;min-width:268px;cursor:pointer;border:0;
  font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:3px;
  color:#1a0c00;
  background:linear-gradient(180deg,var(--amber-hot),var(--amber) 55%,var(--amber-deep));
  position:relative;overflow:hidden;text-transform:uppercase;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:var(--glow-amber);transition:transform .12s,filter .2s;
  padding:0 22px;
}
.btn-deploy .sm{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#3a1c00;font-weight:400;margin-top:-2px}
.btn-deploy::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%{left:-60%}40%,100%{left:130%}}
.btn-deploy:hover{filter:brightness(1.08)}
.btn-deploy:active{transform:translateY(2px)}

/* ================= CONTROLS ASIDE ================= */
.controls{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--panel-edge);padding:18px 18px 20px;
  position:sticky;top:22px;
}
.controls .chead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.controls .chead h2{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:1.5px;color:var(--ink);white-space:nowrap}
.controls .chead .ico{width:9px;height:9px;background:var(--amber);transform:rotate(45deg);box-shadow:var(--glow-amber)}
.controls .csub{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);margin-bottom:16px}

.cgroup{margin-bottom:16px}
.cgroup .gt{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--amber);margin-bottom:9px;
  display:flex;align-items:center;gap:8px}
.cgroup .gt::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,138,31,.35),transparent)}

.crow{display:flex;align-items:center;gap:11px;padding:6px 0}
.crow .keys{display:flex;gap:4px;flex:none}
.kbd{
  font-family:var(--font-mono);font-size:11px;min-width:24px;height:26px;padding:0 7px;
  display:grid;place-items:center;color:var(--metal);
  background:linear-gradient(180deg,#23272e,#13161b);
  border:1px solid #353b44;border-bottom:3px solid #0a0c0f;border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.kbd.mouse{min-width:32px}
.crow .ctext{font-size:13px;color:var(--ink-dim);line-height:1.3}
.crow .ctext b{color:var(--ink);font-weight:600}

/* dynamic role-special block */
.special{
  margin-top:4px;border:1px solid var(--panel-edge);border-left:3px solid var(--amber);
  background:rgba(255,138,31,.05);padding:12px 13px;
  transition:border-color .3s,background .3s;
}
.special .st{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--amber);margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between}
.special .st .who{color:var(--ink);font-weight:700;letter-spacing:1px}
.special .srow{display:flex;align-items:flex-start;gap:10px;padding:5px 0}
.special .srow .ctext{font-size:12.5px;color:var(--ink-dim);line-height:1.35}
.special .srow .ctext b{color:#fff}
.special.is-set{border-left-color:var(--rc,var(--amber))}

/* footer line */
.footer{margin-top:18px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--ink-faint)}
.footer .v{color:var(--ink-dim)}

/* deploy flash (preview feedback) */
.flash{
  position:fixed;inset:0;z-index:50;display:none;place-items:center;
  background:radial-gradient(circle at 50% 50%,rgba(255,138,31,.16),rgba(0,0,0,.92));
  backdrop-filter:blur(3px);
}
.flash.show{display:grid;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.flash .card{text-align:center}
.flash .card .big{font-family:var(--font-display);font-weight:700;font-size:84px;letter-spacing:8px;color:var(--amber-hot);text-shadow:var(--glow-amber);line-height:.9}
.flash .card .small{font-family:var(--font-mono);font-size:13px;letter-spacing:3px;color:var(--ink-dim);margin-top:10px}
.flash .card .role-line{margin-top:18px;font-family:var(--font-display);font-size:34px;letter-spacing:3px}

/* responsive */
@media (max-width:1180px){
  .layout{grid-template-columns:1fr}
  .controls{position:relative;top:0}
  .roles{height:300px}
}
@media (max-width:720px){
  .topbar{flex-direction:column;align-items:flex-start;gap:14px}
  .brand h1{font-size:48px}
  .roles{flex-direction:column;height:auto}
  .role{height:96px}
  .role.active{height:340px}
  .deploy{flex-wrap:wrap}
  .btn-deploy{width:100%;min-width:0}
}