/* =====================================================================
   DARK OPS STREAM PACK — shared design system (dark minimal esports)
   layered diamonds · halftone dots · metallic silver text · tactical frames
   ===================================================================== */
:root{
  --paper:#0d0d0d;
  --panel:#111113;
  --ink:#f2f2f2;
  --dim:#8f8f92;
  --faint:#3a3a3e;
  --edge:#c9c9cc;                 /* metal edge */
  --glow:0 0 8px rgba(255,255,255,.35);
  --head:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--paper);font-family:var(--body);color:var(--ink)}

/* ---------- layered diamond backdrop ---------- */
.dia-bg{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(ellipse at center,#17171a 0%,#0d0d0d 70%)}
.dia{position:absolute;left:50%;top:50%;border:2px solid #1f1f23;rotate:45deg;
  translate:-50% -50%;animation:diapulse var(--dp,7s) ease-in-out infinite}
.dia.fill{background:#141417;border-color:#232327}
@keyframes diapulse{0%,100%{scale:1;opacity:1}50%{scale:1.045;opacity:.85}}
/* halftone dot patch */
.dots{position:absolute;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#3c3c40 1.6px,transparent 1.6px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%);
          mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%)}

/* ---------- deco marks ---------- */
.mk{position:absolute;color:var(--dim);font-family:var(--head);letter-spacing:.2em}
.mk.squares::before{content:'▪▪▪▪';font-size:22px;letter-spacing:.34em;color:#b9b9be;text-shadow:var(--glow)}
.mk.dashes::before{content:'— — —';font-size:19px;color:#b9b9be}
.slants{position:absolute;display:flex;gap:5px}
.slants i{width:14px;height:12px;background:var(--ink);transform:skewX(-30deg);
  box-shadow:var(--glow)}
.slants.dim i{background:var(--faint);box-shadow:none}
.tri{position:absolute;color:var(--dim);font-size:20px}
.cross{position:absolute;width:22px;height:22px}
.cross::before,.cross::after{content:'';position:absolute;background:var(--dim)}
.cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.cross i{position:absolute;inset:8px;background:var(--paper)}
/* signal ripple */
.sig{position:absolute;width:34px;height:34px}
.sig i{position:absolute;right:0;bottom:0;border:1.5px solid var(--dim);border-radius:50%;
  border-left-color:transparent;border-top-color:transparent;
  animation:sigfade 2.2s ease-out infinite}
.sig i:nth-child(1){width:10px;height:10px}
.sig i:nth-child(2){width:20px;height:20px;animation-delay:.25s}
.sig i:nth-child(3){width:30px;height:30px;animation-delay:.5s}
@keyframes sigfade{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* ---------- metallic display text ---------- */
.metal{font-family:var(--head);font-weight:700;text-transform:uppercase;
  background:linear-gradient(180deg,#ffffff 8%,#d9d9de 38%,#77777c 58%,#e8e8ec 82%,#9a9aa0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.35));
  animation:metalsheen 5s linear infinite;background-size:100% 220%}
@keyframes metalsheen{0%{background-position:0 0}50%{background-position:0 90%}100%{background-position:0 0}}
.kick{font-family:var(--head);font-weight:500;letter-spacing:.55em;text-indent:.55em;
  color:var(--ink);text-transform:uppercase;text-shadow:var(--glow)}

/* ---------- tactical frame (notched corners + deco) ---------- */
.tac{position:absolute;border:1.5px solid var(--edge);box-shadow:var(--glow), inset 0 0 8px rgba(255,255,255,.12);
  clip-path:polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px))}
.tacwrap{position:absolute;pointer-events:none}
.tacwrap .tac{inset:0}
.tacwrap .mk,.tacwrap .slants,.tacwrap .tri{z-index:3}

/* ---------- live chat panel ---------- */
.chatbox{position:absolute;border:1.5px solid var(--edge);box-shadow:var(--glow);
  background:linear-gradient(160deg,#131316,#0d0d0f)}
.chatbox .cap{position:absolute;left:0;right:0;text-align:center;
  font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:.3em;text-indent:.3em;
  color:var(--ink);text-shadow:var(--glow);text-transform:uppercase}
.chatbox .capbar{position:absolute;left:0;right:0;top:0;height:44px;background:#1a1a1e;
  border-bottom:1.5px solid var(--edge);display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:.3em;text-indent:.3em;
  color:var(--ink);text-shadow:var(--glow);text-transform:uppercase}