/* Death Valley — shared design system.
   Served at /app.css by hub.py. Page-specific rules stay inline in each page. */

:root{
  /* nation + status colors */
  --red:#ff4d5e;        /* Lunaskar */
  --red-soft:rgba(255,77,94,.14);
  --blue:#4da3ff;       /* Protean  */
  --blue-soft:rgba(77,163,255,.14);
  --grn:#3fd964;
  --amber:#ffb03a;
  --gold:#ffd24a;

  /* surfaces */
  --bg:#070910;
  --panel:#0d1320;
  --panel-2:#111a2b;
  --raise:rgba(255,255,255,.035);
  --raise-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);

  /* text */
  --ink:#e7eef9;
  --ink-2:#9fb0c9;      /* secondary — passes AA on --panel */
  --dim:#7488a3;

  /* shape + motion */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.7);
  --shadow-lg:0 18px 50px -18px rgba(0,0,0,.85);
  --ease:cubic-bezier(.2,.7,.3,1);
  --t:.16s var(--ease);

  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.5 var(--font);
  font-feature-settings:"cv02","cv03","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ambient war glow — red (Lunaskar) vs blue (Protean) */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(255,77,94,.10), transparent 65%),
    radial-gradient(900px 500px at 88% -10%, rgba(77,163,255,.10), transparent 65%),
    radial-gradient(1200px 700px at 50% 110%, rgba(77,163,255,.05), transparent 70%);
}

::selection{background:rgba(77,163,255,.3)}

/* ---------- scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* ---------- typography ---------- */
h1,h2,h3{letter-spacing:-.015em;margin:0}
.mono{font-family:var(--mono)}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}

/* ---------- surfaces ---------- */
.panel{
  background:linear-gradient(180deg,var(--raise),transparent) var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel h2{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin:0;padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;
}

/* stat card */
.card{
  position:relative;
  background:linear-gradient(180deg,var(--raise),transparent) var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:13px 15px;
  transition:border-color var(--t),transform var(--t);
}
.card:hover{border-color:var(--line-2)}
.card .lbl{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
}
.card .val{
  font-size:27px;font-weight:700;line-height:1.15;margin-top:5px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;
}

/* ---------- controls ---------- */
button,.btn{
  font:inherit;font-size:13px;
  background:var(--raise-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  border-radius:var(--r-sm);
  padding:6px 12px;
  cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t);
}
button:hover,.btn:hover{background:rgba(255,255,255,.1);color:var(--ink);border-color:var(--line-2)}
button:active,.btn:active{transform:translateY(.5px)}
button.on{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.45);color:#fff}

/* segmented control — wrap sibling buttons in .seg */
.seg{
  display:inline-flex;gap:2px;padding:3px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.seg button{
  border:0;background:transparent;color:var(--dim);
  border-radius:var(--r-pill);padding:5px 13px;font-size:12.5px;font-weight:500;
  white-space:nowrap;
}
.seg button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.seg button.on{
  background:linear-gradient(180deg,rgba(77,163,255,.28),rgba(77,163,255,.16));
  color:#fff;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 8px -2px rgba(77,163,255,.5);
}

/* pill link */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-2);text-decoration:none;font-size:12.5px;font-weight:500;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 13px;
  transition:background var(--t),border-color var(--t),color var(--t);
  white-space:nowrap;
}
.pill:hover{background:rgba(255,255,255,.09);border-color:var(--line-2);color:var(--ink)}

input,select,textarea{font:inherit}
input[type=text],input:not([type]),input[type=number],input[type=search]{
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:var(--r-sm);
  padding:6px 11px;
  transition:border-color var(--t),box-shadow var(--t);
}
input::placeholder{color:var(--dim)}
input:focus{border-color:rgba(77,163,255,.6);box-shadow:0 0 0 3px rgba(77,163,255,.14);outline:none}

/* ---------- realm badge ---------- */
/* One image serves several game servers; this says which one you are on.
   :empty hides it when REALM is unset, so a single-realm deploy looks
   exactly as it did before. */
.realm{
  display:inline-block;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  line-height:15px;
  color:var(--ink-2);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:0 7px;
  white-space:nowrap;vertical-align:middle;
  /* bounded so a long realm name can never be what breaks the header layout */
  max-width:88px;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;
}
.realm:empty{display:none}

/* ---------- nation dots ---------- */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;flex:none}
.n1,.bl{background:var(--blue);box-shadow:0 0 8px rgba(77,163,255,.6)}
.n2,.rd{background:var(--red);box-shadow:0 0 8px rgba(255,77,94,.6)}
.n0{background:#3d4a5c;box-shadow:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
th{
  color:var(--dim);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.02);position:sticky;top:0;z-index:2;backdrop-filter:blur(8px);
}
tbody tr{transition:background var(--t)}
tbody tr:hover td{background:rgba(255,255,255,.045)}
tbody tr:last-child td{border-bottom:0}
td.name,.name{font-weight:600}

/* ---------- live badge ---------- */
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--dim)}
.live::before{
  content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
.live.up{color:var(--grn)}
.live.up::before{animation:pulse 2s var(--ease) infinite}
.live.down{color:var(--red)}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,217,100,.55)}
  70%{box-shadow:0 0 0 6px rgba(63,217,100,0)}
}

/* ---------- tooltip (?) ---------- */
.help{
  display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border-radius:50%;border:1px solid var(--line-2);color:var(--dim);
  font-size:9px;font-weight:700;margin-left:6px;cursor:help;position:relative;vertical-align:middle;
  transition:color var(--t),border-color var(--t);flex:none;
}
.help:hover{color:var(--ink);border-color:var(--ink)}
.help .tip{
  visibility:hidden;opacity:0;transform:translateX(-50%) translateY(4px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
  position:absolute;bottom:165%;left:50%;
  background:#131c2b;border:1px solid var(--line-2);color:var(--ink);
  padding:9px 12px;border-radius:10px;width:215px;
  font:400 12px/1.45 var(--font);text-transform:none;letter-spacing:0;z-index:60;
  box-shadow:var(--shadow-lg);pointer-events:none;white-space:normal;
}
.help .tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--line-2);
}
.help.down .tip{bottom:auto;top:165%;transform:translateX(-50%) translateY(-4px)}
.help.down .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--line-2)}
/* :focus (not just :focus-visible) so a tap opens the tooltip on touch devices */
.help:hover .tip,.help:focus .tip{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- empty state ---------- */
.empty{color:var(--dim);padding:26px 16px;text-align:center;font-size:13px}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}