/* =========================================================
   PORTHAS_PLAYS — Stream Kit Theme
   Palette pulled from the logo source file + banner art.
   ========================================================= */
@import url('fonts.css');

:root {
  /* --- Core palette --- */
  --void:        #05020c;   /* deepest background / outlines      */
  --space-900:   #0b0417;   /* panel interiors                   */
  --space-800:   #150838;   /* deep space                        */
  --space-700:   #2e1b6d;   /* indigo suit shadow                */
  --plum:        #521f86;   /* suit mid-tone                     */
  --violet:      #8000cf;   /* logo ring violet                  */
  --neon-purple: #a519d7;   /* wordmark bottom / glow            */
  --magenta:     #d25fdf;   /* nebula pink                       */
  --hot-pink:    #e93cf0;   /* cockpit buttons / accents         */
  --lavender:    #9f72e8;
  --periwinkle:  #6d63f0;
  --dolphin:     #609de1;   /* dolphin skin                      */
  --sky:         #4fb6ff;   /* wordmark top                      */
  --cyan:        #1dd2ff;   /* logo outer ring / HUD lines       */
  --ice:         #c7fffa;   /* letter outlines / highlights      */
  --white:       #f4f1ff;

  /* --- Gradients --- */
  --grad-wordmark: linear-gradient(180deg, #44b0ff 8%, #6a5cf2 50%, #a01de8 92%);
  --grad-ring:     linear-gradient(135deg, #1dd2ff 0%, #7b4dff 50%, #c21fe0 100%);
  --grad-ring-r:   linear-gradient(315deg, #1dd2ff 0%, #7b4dff 50%, #c21fe0 100%);
  --grad-bar:      linear-gradient(90deg, transparent 0%, #1dd2ff 18%, #7b4dff 60%, #c21fe0 85%, transparent 100%);

  /* --- Type --- */
  --font-display: 'Saira Condensed', 'Exo 2', sans-serif;  /* 800, uppercase, slanted -14deg: closest match to the wordmark */
  --slant: -14deg;
  --font-hud:     'Chakra Petch', 'Segoe UI', sans-serif;

  /* --- Shape --- */
  --cut: 22px;              /* chamfer size, echoes the wordmark plate */
  --border: 4px;
  --glow-cyan:   0 0 18px rgba(29,210,255,.55);
  --glow-purple: 0 0 26px rgba(165,25,215,.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-hud);
  color: var(--white);
  background: transparent;              /* overlays default to transparent for OBS */
  -webkit-font-smoothing: antialiased;
}
body.scene { background: var(--void); }  /* full-screen scenes */

/* ---------- Space background (scenes) ---------- */
.space {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 72% 38%, rgba(210,95,223,.45), transparent 70%),
    radial-gradient(ellipse 45% 55% at 28% 70%, rgba(128,0,207,.55), transparent 70%),
    radial-gradient(ellipse 40% 35% at 15% 18%, rgba(29,120,255,.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 90%, rgba(101,10,127,.6), transparent 70%),
    linear-gradient(160deg, #150838 0%, #1b083c 40%, #320546 75%, #0b0417 100%);
}
.space .nebula {
  position: absolute; inset: -25%;
  background:
    radial-gradient(closest-side at 38% 42%, rgba(233,60,240,.55), transparent),
    radial-gradient(closest-side at 66% 58%, rgba(109,99,240,.50), transparent),
    radial-gradient(closest-side at 28% 76%, rgba(165,25,215,.50), transparent),
    radial-gradient(closest-side at 80% 22%, rgba(29,160,255,.30), transparent);
  filter: blur(46px);
  mix-blend-mode: screen;
  animation: nebula-drift 26s ease-in-out infinite alternate;
}
.space .nebula.b {
  background:
    radial-gradient(closest-side at 60% 35%, rgba(210,95,223,.50), transparent),
    radial-gradient(closest-side at 25% 30%, rgba(29,210,255,.28), transparent),
    radial-gradient(closest-side at 75% 80%, rgba(128,0,207,.55), transparent);
  animation: nebula-drift-b 34s ease-in-out infinite alternate, nebula-pulse 9s ease-in-out infinite;
}
@keyframes nebula-drift {
  from { transform: translate3d(-8%, -5%, 0) scale(1) rotate(-3deg); }
  to   { transform: translate3d(8%, 5%, 0) scale(1.18) rotate(3deg); }
}
@keyframes nebula-drift-b {
  from { transform: translate3d(7%, 4%, 0) scale(1.12) rotate(2deg); }
  to   { transform: translate3d(-7%, -6%, 0) scale(1) rotate(-4deg); }
}
@keyframes nebula-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.space canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Orbit lines, like the banner */
.orbits { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.orbits ellipse { fill: none; stroke: url(#orbitGrad); stroke-width: 1.4; }
.orbits .spin { transform-origin: 50% 50%; animation: orbit 120s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Banded gas planet (bottom-left of the banner) */
.planet {
  position: absolute; border-radius: 50%;
  background:
    repeating-linear-gradient(-28deg, rgba(255,255,255,.07) 0 14px, transparent 14px 40px),
    radial-gradient(circle at 35% 30%, #7ff0ff 0%, #1dd2ff 18%, #5a6cf0 45%, #8000cf 72%, #2a0650 100%);
  box-shadow: 0 0 80px rgba(29,210,255,.35), inset -40px -30px 80px rgba(5,2,12,.65);
}
.planet::after { /* thin atmosphere rim */
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(199,255,250,.35);
}

/* ---------- Plate: the chamfered HUD panel used everywhere ---------- */
.plate {
  --c: var(--cut);
  position: relative;
  background: var(--grad-ring);
  padding: var(--border);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  filter: drop-shadow(0 0 14px rgba(128,0,207,.45));
}
.plate > .inner {
  --ci: calc(var(--c) - 2px);
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(21,8,56,.96), rgba(5,2,12,.98));
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
                     calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}
.plate.solid > .inner { background: var(--void); }
/* the cyan under-bar from the wordmark plate */
.underbar {
  height: 6px; border-radius: 3px; background: var(--grad-bar);
  box-shadow: var(--glow-cyan);
}

/* Frame: plate with a transparent window (webcam / chat / game) */
.frame {
  --c: var(--cut);
  position: absolute; inset: 0;
}
.frame .edge {
  position: absolute; inset: 0;
  background: var(--grad-ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  padding: 6px;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-style: normal; font-weight: 800;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1;
  position: relative; display: inline-block;
  transform: skewX(var(--slant));
}
/* gradient letters + ice outline + black keyline, like the wordmark */
/* base layer = thick black keyline; ::after = gradient fill with ice outline.
   Set data-text to the same text as the element. */
.display.grad {
  color: var(--void);
  -webkit-text-stroke: var(--keyline, 14px) var(--void);
  filter: drop-shadow(0 5px 0 var(--void)) drop-shadow(0 0 26px rgba(165,25,215,.55));
}
.display.grad::before,
.display.grad::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}
.display.grad::before {          /* ice outline (fill = stroke color hides glyph overlaps) */
  color: var(--ice);
  -webkit-text-stroke: var(--iceline, 5px) var(--ice);
}
.display.grad::after {           /* gradient face */
  color: transparent; -webkit-text-stroke: 0;
  background: var(--grad-wordmark);
  -webkit-background-clip: text; background-clip: text;
}
.hud {
  font-family: var(--font-hud); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ice);
}
.hud.cyan { color: var(--cyan); text-shadow: var(--glow-cyan); }
.mono-num { font-variant-numeric: tabular-nums; }

/* Blinking status light */
.blip {
  display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: var(--hot-pink); box-shadow: 0 0 12px var(--hot-pink);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 50% { opacity: .25; } }

/* Scanline sheen sweeping across plates */
.sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sheen::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(199,255,250,.16), transparent);
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { left: -40%; } 100% { left: 120%; } }

/* Static export mode (?static) — freezes animation for PNG renders */
/* ---------- Plotted courses (nav lines over the starfield) ---------- */
.courses { position: absolute; inset: 0; pointer-events: none; }
.courses text { font-family: var(--font-hud); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- Wordmark-style title plate (mimics the PORTHAS_PLAYS plate) ---------- */
.wmtitle { position: relative; display: inline-block; }
.wmtitle > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.wmtitle > .display { position: absolute; white-space: nowrap; }

/* Back glow behind the logo (?glow=0 to remove) */
.logo-glow { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(29,210,255,.0) 30%, rgba(29,210,255,.75) 41%, rgba(128,0,207,.7) 50%, rgba(233,60,240,.35) 60%, transparent 71%);
  filter: blur(22px); animation: glow-breathe 5s ease-in-out infinite; }
@keyframes glow-breathe { 0%, 100% { opacity: .7; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.no-glow .logo-glow { display: none; }

.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }

/* ---------- Stage (scenes authored at 1920x1080, auto-scaled) ---------- */
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.fade-in { animation: fade-in .9s ease-out both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Scene footer bar ---------- */
  .bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 70px;
            background: linear-gradient(180deg, transparent, rgba(5,2,12,.85) 40%); }
  .bottom .underbar { position: absolute; left: 0; right: 0; top: 0; }
  .bottom .hud { font-size: 22px; }

/* ---------- HUD frame (webcam / chat / game windows) ---------- */
.hudframe { position: relative; }
.hudframe-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hudframe .blipdot { animation: blip 1.6s ease-in-out infinite; }
.hudframe > *:not(svg) { position: relative; }

/* Name tag (badge + wordmark) that sits on a frame edge */
.nametag { position: absolute; display: flex; align-items: center; }
.nametag .badge { width: 92px; height: 92px; border-radius: 50%; position: relative; z-index: 2;
  box-shadow: 0 0 0 4px var(--void), 0 0 22px rgba(29,210,255,.55); }
.nametag .tagplate { --cut: 14px; height: 54px; margin-left: -30px; padding-left: 0; }
.nametag .tagplate .inner { display: flex; align-items: center; padding: 0 26px 0 44px; }
.nametag .tagplate .display { font-size: 32px; --keyline: 8px; --iceline: 3px; }
/* v2 name tag: round mascot badge + the real PORTHAS_PLAYS wordmark (assets/wordmark.png) */
.nametag .wm { height: 62px; margin-left: -22px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 12px rgba(128,0,207,.55)) drop-shadow(0 3px 0 var(--void)); }

/* HUD frame outer glow breathes slowly (subtle, so it never distracts from gameplay) */
.hudframe .hf-glow { animation: hf-breathe 6s ease-in-out infinite; }
@keyframes hf-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

/* Info label plate (put a Streamlabs/StreamElements text source on top of the value slot) */
.infolabel { --cut: 16px; }
.infolabel .inner { display: flex; flex-direction: column; justify-content: center; padding: 0 26px; gap: 4px; }
.infolabel .lbl { font-size: 15px; color: var(--cyan); letter-spacing: .24em; display: flex; align-items: center; gap: 10px; }
.infolabel .val { font-size: 26px; letter-spacing: .06em; color: var(--white); font-weight: 600; min-height: 32px; text-transform: none; }
.infolabel .lbl svg { width: 16px; height: 16px; }

/* ---------- Cockpit console FX (light layers over the cockpit art; the art is untouched) ----------
   Coordinates are stage px for the cockpit-hero placement used in brb/offline
   (right: 0, height: 1080). Injected by kit.js when the hero has data-console-fx. */
.console-fx { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.console-fx .key { position: absolute; width: 84px; height: 30px; border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(255,190,255,.95), rgba(233,60,240,.75) 45%, transparent 75%);
  filter: blur(5px); opacity: 0; transform: rotate(-4deg) skewX(-28deg); }
.console-fx .k1 { left: 963px; top: 710px; animation: key-blink 2.6s ease-in-out infinite; }
.console-fx .k2 { left: 918px; top: 741px; animation: key-blink 2.6s ease-in-out .45s infinite; }
.console-fx .k3 { left: 873px; top: 771px; animation: key-blink 2.6s ease-in-out .9s infinite; }
.console-fx .k2b { left: 918px; top: 741px; animation: key-flick 5.3s steps(1) 1.7s infinite; }
@keyframes key-blink { 0%, 100% { opacity: .15; } 12% { opacity: 1; } 30% { opacity: .25; } }
@keyframes key-flick { 0%, 100% { opacity: 0; } 41% { opacity: .9; } 44% { opacity: 0; } 47% { opacity: .9; } 50% { opacity: 0; } }

.console-fx .screen { position: absolute; inset: 0;
  clip-path: polygon(1040px 690px, 1290px 736px, 1303px 779px, 1236px 777px, 1072px 745px, 1046px 742px); }
/* owner: main screen effect brighter (v4) — stronger wash + white-hot core, brighter lines/scan,
   and a soft halo that blooms just past the screen edge */
.console-fx .screen .wash { position: absolute; left: 1030px; top: 680px; width: 300px; height: 180px;
  background: radial-gradient(ellipse at 45% 32%, rgba(255,215,255,1), rgba(240,90,245,.95) 30%, rgba(233,60,240,.55) 58%, transparent 85%);
  animation: screen-pulse 3.2s ease-in-out infinite; }
.console-fx .screen .lines { position: absolute; left: 1046px; top: 696px; width: 190px; height: 56px;
  background: radial-gradient(ellipse at center, rgba(220,255,255,1), rgba(29,210,255,.75) 55%, transparent 78%);
  filter: blur(5px); animation: screen-flicker 4.1s steps(1) infinite; }
.console-fx .screen .scan { position: absolute; left: 1030px; width: 310px; height: 32px; top: 680px;
  background: linear-gradient(180deg, transparent, rgba(235,255,255,1), transparent);
  animation: screen-scan 2.8s linear infinite; }
.console-fx .halo { position: absolute; left: 1036px; top: 682px; width: 268px; height: 76px; border-radius: 40%;
  background: radial-gradient(ellipse at center, rgba(240,90,245,.85), rgba(233,60,240,.35) 55%, transparent 75%);
  filter: blur(16px); transform: rotate(10deg); animation: screen-pulse 3.2s ease-in-out infinite; }
@keyframes screen-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes screen-flicker { 0%, 100% { opacity: .7; } 30% { opacity: 1; } 31% { opacity: .35; } 33% { opacity: 1; } 70% { opacity: .55; } 72% { opacity: 1; } }
@keyframes screen-scan { from { transform: translateY(0); opacity: .9; } 85% { opacity: .9; } to { transform: translateY(100px); opacity: 0; } }

/* radar ping on the ring icon + blinking bar-chart icon */
.console-fx .ping { position: absolute; left: 1256px; top: 760px; width: 0; height: 0; }
.console-fx .ping::before, .console-fx .ping::after { content: ''; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px;
  border-radius: 50%; border: 2px solid rgba(160,255,255,.95); animation: radar 2.2s ease-out infinite; }
.console-fx .ping::after { animation-delay: 1.1s; }
@keyframes radar { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.console-fx .bars { position: absolute; left: 1184px; top: 738px; width: 50px; height: 34px;
  background: radial-gradient(ellipse at center, rgba(160,255,255,.9), transparent 70%); filter: blur(4px);
  animation: key-blink 1.9s ease-in-out .3s infinite; }

/* ---------- Standalone elements (elements/*.html) ---------- */
body.element { background: transparent; }
body.element .el { position: absolute; left: 0; top: 0; transform-origin: 0 0; }