/* ============================================================
   URSHANABI // HUD  —  canonical design tokens & shared primitives.
   New / restyled pages link this; legacy pages still carry their own
   inline copies of these values (kept in sync by hand — if you change
   a token here, grep the other pages for the old value).

     <link rel="stylesheet" href="/urshanabi-hud.css">

   Canonical palette:
     bg #04070d · panel rgba(8,16,26,.86) · panel-solid #070d16
     cyan #36d6e7 · amber #ffb347 · green #46e08a · red #ff4d4d
     txt #bcd4dd · txt-dim #7c93a0
   ============================================================ */
:root{
  --bg:#04070d;
  --panel:rgba(8,16,26,0.86);
  --panel-solid:#070d16;
  --line:rgba(90,150,180,0.22);
  --line-bright:rgba(120,210,235,0.55);
  --txt:#bcd4dd;
  --txt-dim:#7c93a0;
  --cyan:#36d6e7;
  --amber:#ffb347;
  --green:#46e08a;
  --red:#ff4d4d;
  --un:#4da6ff; --mcr:#ff6b4a; --opa:#7ed957; --corp:#d36bd3;
}

html,body{margin:0;background:var(--bg);min-height:100%;}
body{
  color:var(--txt);
  font-family:'IBM Plex Mono',monospace;
  -webkit-font-smoothing:antialiased;
}

/* page frame: <div class="hud-frame"> content </div> */
.hud-frame{
  position:relative; isolation:isolate; background:var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(54,214,231,.06), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255,179,71,.05), transparent 55%);
  padding:clamp(28px,5vw,60px) clamp(20px,5vw,64px) 60px;
  margin:0 auto; max-width:1240px; overflow:hidden;
}
.hud-frame *{box-sizing:border-box;}

/* scanline layer: <div class="hud-scan"></div> first child of the frame */
.hud-scan{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);}
.hud-frame > *:not(.hud-scan):not(.hud-corner){position:relative;z-index:1;}

/* corner brackets: four <span class="hud-corner tl|tr|bl|br"></span> */
.hud-corner{position:absolute;width:24px;height:24px;border:1.5px solid var(--line-bright);opacity:.55;z-index:2;}
.hud-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;}
.hud-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;}
.hud-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;}
.hud-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;}

/* header block */
.hud-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px;}
.hud-head .t1{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(22px,4vw,34px);letter-spacing:5px;color:var(--cyan);
  text-shadow:0 0 18px rgba(54,214,231,.45);}
.hud-head .t2{font-size:11px;letter-spacing:2.5px;color:var(--txt-dim);
  text-transform:uppercase;margin-top:6px;}
.hud-stamp{text-align:right;font-size:10.5px;letter-spacing:1.5px;color:var(--txt-dim);line-height:1.9;}
.hud-stamp b{color:var(--amber);font-weight:500;}

/* prose */
.hud-frame h2{font-family:'Chakra Petch',sans-serif;font-size:14px;letter-spacing:2.5px;
  color:var(--cyan);text-transform:uppercase;margin:34px 0 12px;
  border-bottom:1px solid var(--line);padding-bottom:7px;}
.hud-frame h3{font-family:'Chakra Petch',sans-serif;font-size:12px;letter-spacing:1.5px;
  color:var(--amber);text-transform:uppercase;margin:20px 0 8px;}
.hud-frame p{font-size:12.5px;line-height:1.75;color:var(--txt);letter-spacing:.3px;margin:9px 0;}
.hud-frame ul,.hud-frame ol{margin:9px 0 9px 22px;padding:0;}
.hud-frame li{font-size:12.5px;line-height:1.7;color:var(--txt);margin:6px 0;letter-spacing:.3px;}
.hud-frame em{color:var(--cyan);font-style:italic;}
.hud-frame strong,.hud-frame b{color:var(--txt);font-weight:600;}
.hud-frame a{color:#7aa5d3;text-decoration:none;transition:color .2s;}
.hud-frame a:hover{color:#9ec0e8;text-decoration:underline;}

/* callout panels */
.hud-note{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  padding:14px 16px;margin:16px 0;}
.hud-note.cyan{border-left-color:var(--cyan);}
.hud-note.red{border-left-color:var(--red);}
.hud-block{background:var(--panel-solid);border:1px solid var(--line);padding:16px 18px;margin:16px 0;}

/* buttons / actions */
.act{font-family:'Chakra Petch',sans-serif;font-size:11px;letter-spacing:1px;color:var(--txt);
  border:1px solid var(--line);padding:7px 13px;background:transparent;cursor:pointer;
  text-transform:uppercase;transition:.15s;display:inline-block;text-decoration:none !important;}
.act:hover{border-color:var(--cyan);color:var(--cyan) !important;text-decoration:none !important;}
.act.red:hover{border-color:var(--red);color:var(--red) !important;}
.act.go{border-color:var(--cyan);color:var(--cyan);}
.act.go:hover{background:rgba(54,214,231,.1);}

/* footer */
.hud-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:1px;color:var(--txt-dim);text-align:center;}

@media (prefers-reduced-motion:reduce){
  .hud-frame *{animation:none !important;}
}