:root {
  --primary: #28e7ff;
  --secondary: #ff4bd6;
  --highlight: #fff06a;
  --text-color: #f8fbff;
  --muted-color: #a8d8e6;
  --panel: #07101f;
  --panel-2: #16284b;
  --edge: #020511;
  --opacity: 1;
  --glow: 1;
  --scale: 1;
  --thickness: 152px;
  --radius: 0px;
  --frame-art: url("/overlays/square-frame-packs/assets/cyber-xp-detailed-frame.png");
  --frame-art-16x9: url("/overlays/square-frame-packs/assets/cyber-xp-detailed-frame-16x9.png");
  --frame-mask-primary-16x9: url("/overlays/square-frame-packs/assets/cyber-xp-frame-16x9-mask-primary.png");
  --frame-mask-secondary-16x9: url("/overlays/square-frame-packs/assets/cyber-xp-frame-16x9-mask-secondary.png");
  --frame-mask-highlight-16x9: url("/overlays/square-frame-packs/assets/cyber-xp-frame-16x9-mask-highlight.png");
  --frame-art-goal: url("/overlays/square-frame-packs/assets/cyber-xp-goal-frame.png");
  --frame-mask-primary-goal: url("/overlays/square-frame-packs/assets/cyber-xp-goal-mask-primary.png");
  --frame-mask-secondary-goal: url("/overlays/square-frame-packs/assets/cyber-xp-goal-mask-secondary.png");
  --frame-mask-highlight-goal: url("/overlays/square-frame-packs/assets/cyber-xp-goal-mask-highlight.png");
  --frame-hue: 0deg;
  --frame-saturation: 140%;
  --frame-brightness: 118%;
  --frame-contrast: 102%;
  --frame-filter: hue-rotate(var(--frame-hue)) saturate(var(--frame-saturation)) brightness(var(--frame-brightness)) contrast(var(--frame-contrast));
  --offset-x: 0px;
  --offset-y: 0px;
  --font: Inter, Arial, system-ui, sans-serif;
  --demo-bg: #101827;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--demo-bg);
  color: var(--text-color);
  font-family: var(--font);
}

body {
  display: grid;
  place-items: center;
  padding: 24px;
}

html.obs,
html.transparent,
body.obs,
body.transparent {
  padding: 0;
  background: transparent;
}

body[data-widget="pack-preview"] {
  display: block;
  min-height: 100%;
  overflow: auto;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(40, 231, 255, 0.12), transparent 28%),
    radial-gradient(circle at 76% 12%, rgba(255, 75, 214, 0.18), transparent 30%),
    #070a11;
}

.source {
  position: relative;
  opacity: var(--opacity);
  transform: translate(var(--offset-x), var(--offset-y)) scale(var(--scale));
  transform-origin: center;
  isolation: isolate;
}

.square-frame-source {
  width: min(calc(100vw - 48px), 1600px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.5));
}

.square-frame-source::before {
  content: none;
}

body.obs .square-frame-source,
body.transparent .square-frame-source {
  width: 100vw;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  filter: none;
}

body.obs .square-frame-source::before,
body.transparent .square-frame-source::before {
  content: none;
}

.square-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 1;
}

.frame-plate,
.frame-art,
.frame-edge,
.frame-corner,
.frame-node,
.frame-trace,
.frame-status {
  position: absolute;
  pointer-events: none;
}

.frame-art {
  inset: 0;
  z-index: 1;
  padding: calc(var(--thickness) * 0.72);
  border-radius: var(--radius);
  background-image: var(--frame-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: var(--frame-filter) saturate(1.08) brightness(0.94);
  opacity: 0.96;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.frame-art::before,
.frame-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: inherit;
  pointer-events: none;
}

.frame-tint {
  display: none;
}

.frame-art::before {
  background:
    conic-gradient(from 45deg at 50% 50%,
      var(--primary) 0 18%,
      var(--secondary) 23% 42%,
      var(--highlight) 48% 56%,
      var(--primary) 63% 76%,
      var(--secondary) 82% 100%);
  opacity: 0.42;
  mix-blend-mode: color;
}

.frame-art::after {
  background:
    linear-gradient(90deg,
      transparent 0 10%,
      color-mix(in srgb, var(--primary) 82%, transparent) 14% 23%,
      transparent 29% 71%,
      color-mix(in srgb, var(--secondary) 82%, transparent) 77% 86%,
      transparent 90%),
    linear-gradient(180deg,
      transparent 0 8%,
      color-mix(in srgb, var(--highlight) 80%, transparent) 13% 20%,
      transparent 27% 73%,
      color-mix(in srgb, var(--primary) 76%, transparent) 80% 87%,
      transparent 92%);
  opacity: 0.62;
  filter: drop-shadow(0 0 calc(18px * var(--glow)) var(--primary)) drop-shadow(0 0 calc(14px * var(--glow)) var(--secondary));
  mix-blend-mode: screen;
}

.frame-plate {
  inset: 0;
  z-index: 2;
  padding: var(--thickness);
  background:
    linear-gradient(90deg, var(--edge) 0 var(--thickness), transparent var(--thickness) calc(100% - var(--thickness)), var(--edge) calc(100% - var(--thickness))),
    linear-gradient(180deg, var(--edge) 0 var(--thickness), transparent var(--thickness) calc(100% - var(--thickness)), var(--edge) calc(100% - var(--thickness))),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent), transparent 18% 82%, color-mix(in srgb, var(--secondary) 28%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 24% 76%, color-mix(in srgb, var(--primary) 22%, transparent));
  box-shadow:
    inset 0 0 0 8px color-mix(in srgb, var(--primary) 62%, black 28%),
    inset 0 0 0 16px #02050d,
    inset 0 0 calc(52px * var(--glow)) rgba(0, 0, 0, 0.86),
    0 0 calc(34px * var(--glow)) color-mix(in srgb, var(--primary) 42%, transparent);
  opacity: 0.58;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.frame-plate::before,
.frame-plate::after {
  content: "";
  position: absolute;
  inset: calc(var(--thickness) * 0.18);
}

.frame-plate::before {
  border: calc(var(--thickness) * 0.1) solid color-mix(in srgb, var(--primary) 54%, transparent);
  box-shadow:
    inset 0 0 0 calc(var(--thickness) * 0.06) color-mix(in srgb, var(--secondary) 48%, transparent),
    0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

.frame-plate::after {
  background:
    linear-gradient(90deg, transparent 0 22%, color-mix(in srgb, var(--highlight) 76%, transparent) 22% 28%, transparent 28% 72%, color-mix(in srgb, var(--primary) 72%, transparent) 72% 78%, transparent 78%) top / 100% calc(var(--thickness) * 0.16) no-repeat,
    linear-gradient(90deg, transparent 0 18%, color-mix(in srgb, var(--secondary) 76%, transparent) 18% 25%, transparent 25% 75%, color-mix(in srgb, var(--highlight) 72%, transparent) 75% 82%, transparent 82%) bottom / 100% calc(var(--thickness) * 0.16) no-repeat,
    linear-gradient(180deg, transparent 0 20%, color-mix(in srgb, var(--primary) 74%, transparent) 20% 27%, transparent 27% 73%, color-mix(in srgb, var(--secondary) 70%, transparent) 73% 80%, transparent 80%) left / calc(var(--thickness) * 0.16) 100% no-repeat,
    linear-gradient(180deg, transparent 0 20%, color-mix(in srgb, var(--highlight) 72%, transparent) 20% 27%, transparent 27% 73%, color-mix(in srgb, var(--primary) 70%, transparent) 73% 80%, transparent 80%) right / calc(var(--thickness) * 0.16) 100% no-repeat;
  filter: drop-shadow(0 0 calc(15px * var(--glow)) var(--primary));
}

.frame-edge {
  display: grid;
  gap: calc(var(--thickness) * 0.1);
  z-index: 2;
}

.frame-edge-top,
.frame-edge-bottom {
  left: calc(var(--thickness) * 0.82);
  right: calc(var(--thickness) * 0.82);
  height: calc(var(--thickness) * 0.42);
  grid-template-columns: 1.2fr 0.8fr 1.6fr 0.65fr 1fr 1.35fr;
}

.frame-edge-top { top: calc(var(--thickness) * 0.2); }
.frame-edge-bottom { bottom: calc(var(--thickness) * 0.2); }

.frame-edge-left,
.frame-edge-right {
  top: calc(var(--thickness) * 0.82);
  bottom: calc(var(--thickness) * 0.82);
  width: calc(var(--thickness) * 0.42);
  grid-template-rows: 1.2fr 0.8fr 1.6fr 0.65fr 1fr 1.35fr;
}

.frame-edge-left { left: calc(var(--thickness) * 0.2); }
.frame-edge-right { right: calc(var(--thickness) * 0.2); }

.frame-edge span {
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 3px, transparent 3px 14px),
    linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow:
    inset 0 0 0 3px #02050d,
    inset 0 0 0 6px color-mix(in srgb, var(--highlight) 34%, transparent),
    0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--primary) 44%, transparent);
}

.frame-edge span:nth-child(2n) {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.32) 0 9px, transparent 9px 16px),
    linear-gradient(90deg, var(--highlight), var(--primary));
}

.frame-edge-left span,
.frame-edge-right span {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12), transparent 48%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, var(--secondary), var(--primary));
}

.frame-corner {
  z-index: 4;
  width: calc(var(--thickness) * 1.15);
  height: calc(var(--thickness) * 1.15);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 40%),
    linear-gradient(135deg, var(--highlight), var(--primary) 50%, var(--secondary));
  box-shadow:
    inset 0 0 0 calc(var(--thickness) * 0.08) #02050d,
    inset 0 0 0 calc(var(--thickness) * 0.14) color-mix(in srgb, white 26%, transparent),
    0 0 calc(26px * var(--glow)) color-mix(in srgb, var(--highlight) 54%, transparent);
}

.frame-corner span,
.frame-corner::before,
.frame-corner::after {
  content: "";
  position: absolute;
}

.frame-corner span {
  inset: calc(var(--thickness) * 0.24);
  border: calc(var(--thickness) * 0.06) solid #02050d;
  background:
    linear-gradient(135deg, transparent 0 35%, rgba(255,255,255,0.32) 36% 48%, transparent 49%),
    color-mix(in srgb, var(--edge) 80%, transparent);
}

.frame-corner::before {
  inset: calc(var(--thickness) * 0.16);
  border-top: calc(var(--thickness) * 0.08) solid #02050d;
  border-left: calc(var(--thickness) * 0.08) solid #02050d;
}

.frame-corner::after {
  inset: calc(var(--thickness) * 0.18);
  background: color-mix(in srgb, var(--highlight) 78%, white 8%);
  clip-path: polygon(0 0, 42% 0, 0 42%);
  filter: drop-shadow(0 0 calc(10px * var(--glow)) var(--highlight));
}

.frame-corner-tl { top: 0; left: 0; }
.frame-corner-tr { top: 0; right: 0; transform: rotate(90deg); }
.frame-corner-br { right: 0; bottom: 0; transform: rotate(180deg); }
.frame-corner-bl { bottom: 0; left: 0; transform: rotate(270deg); }

.frame-node {
  z-index: 5;
  display: grid;
  place-items: center;
  min-width: calc(var(--thickness) * 0.88);
  height: calc(var(--thickness) * 0.34);
  border: 4px solid #02050d;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.2) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--highlight), var(--primary));
  color: #02050d;
  font-size: clamp(12px, calc(var(--thickness) * 0.13), 22px);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--highlight) 52%, transparent);
}

.frame-node-top {
  top: calc(var(--thickness) * 0.28);
  left: 50%;
  transform: translateX(-50%);
}

.frame-node-bottom {
  bottom: calc(var(--thickness) * 0.28);
  right: calc(var(--thickness) * 0.72);
}

.frame-trace {
  z-index: 3;
  opacity: 0.9;
  filter: drop-shadow(0 0 calc(12px * var(--glow)) currentColor);
}

.frame-trace-a {
  top: calc(var(--thickness) * 0.58);
  left: calc(var(--thickness) * 1.35);
  width: 24%;
  height: calc(var(--thickness) * 0.08);
  color: var(--secondary);
  background: currentColor;
}

.frame-trace-b {
  right: calc(var(--thickness) * 0.58);
  bottom: calc(var(--thickness) * 1.35);
  width: calc(var(--thickness) * 0.08);
  height: 24%;
  color: var(--primary);
  background: currentColor;
}

.frame-status {
  left: calc(var(--thickness) * 0.52);
  bottom: calc(var(--thickness) * 0.48);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--thickness) * 0.08);
  border: 4px solid color-mix(in srgb, var(--secondary) 64%, white 8%);
  background: rgba(0, 0, 0, 0.76);
  padding: calc(var(--thickness) * 0.06) calc(var(--thickness) * 0.1);
  color: var(--text-color);
  font-size: clamp(12px, calc(var(--thickness) * 0.11), 18px);
  font-weight: 950;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #050505;
}

.frame-status span {
  color: var(--highlight);
}

.square-frame::before,
.square-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.square-frame::before {
  inset: var(--thickness);
  z-index: 6;
  box-shadow:
    0 0 0 4px #02050d,
    0 0 0 8px color-mix(in srgb, var(--primary) 64%, transparent);
}

.square-frame::after {
  inset: 0;
  z-index: 7;
  background:
    linear-gradient(90deg, var(--primary), var(--secondary) 38%, var(--highlight) 50%, var(--secondary) 62%, var(--primary)) top / 100% 7px no-repeat,
    linear-gradient(90deg, var(--secondary), var(--primary) 38%, var(--highlight) 50%, var(--primary) 62%, var(--secondary)) bottom / 100% 7px no-repeat,
    linear-gradient(180deg, var(--secondary), var(--primary) 38%, var(--highlight) 50%, var(--primary) 62%, var(--secondary)) left / 7px 100% no-repeat,
    linear-gradient(180deg, var(--primary), var(--secondary) 38%, var(--highlight) 50%, var(--secondary) 62%, var(--primary)) right / 7px 100% no-repeat;
  opacity: 0.9;
}

body[data-widget="frame"] .frame-plate,
body[data-widget="frame"] .frame-edge,
body[data-widget="frame"] .frame-corner,
body[data-widget="frame"] .frame-node,
body[data-widget="frame"] .frame-trace,
body[data-widget="frame"] .frame-status {
  display: none;
}

body[data-widget="frame"] .frame-art {
  display: block;
  inset: -8px -14px;
  padding: 0;
  background-color: transparent;
  background-image: none;
  filter: none;
  isolation: isolate;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}

body[data-widget="frame"] .frame-art::before {
  display: block;
  inset: 0;
  padding: 0;
  border-radius: 0;
  z-index: 0;
  background-image: var(--frame-art-16x9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.32);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}

body[data-widget="frame"] .frame-art::after {
  content: none;
}

body[data-widget="frame"] .frame-tint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint-color);
  mix-blend-mode: screen;
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: var(--tint-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-mode: luminance;
  mask-image: var(--tint-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

body[data-widget="frame"] .frame-tint-primary {
  --tint-color: var(--primary);
  --tint-mask: var(--frame-mask-primary-16x9);
}

body[data-widget="frame"] .frame-tint-secondary {
  --tint-color: var(--secondary);
  --tint-mask: var(--frame-mask-secondary-16x9);
}

body[data-widget="frame"] .frame-tint-highlight {
  --tint-color: var(--highlight);
  --tint-mask: var(--frame-mask-highlight-16x9);
  opacity: 0.86;
}

body[data-widget="frame"] .square-frame::before {
  content: "";
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, var(--secondary), var(--primary) 34%, var(--highlight) 50%, var(--primary) 66%, var(--secondary)) top / 100% 10px no-repeat,
    linear-gradient(90deg, var(--secondary), var(--primary) 34%, var(--highlight) 50%, var(--primary) 66%, var(--secondary)) bottom / 100% 10px no-repeat,
    linear-gradient(180deg, var(--secondary), var(--primary) 34%, var(--highlight) 50%, var(--primary) 66%, var(--secondary)) left / 10px 100% no-repeat,
    linear-gradient(180deg, var(--secondary), var(--primary) 34%, var(--highlight) 50%, var(--primary) 66%, var(--secondary)) right / 10px 100% no-repeat;
  opacity: 0.72;
}

body[data-widget="frame"] .square-frame::after {
  content: none;
}

body[data-theme="cyber"] {
  --primary: #28e7ff;
  --secondary: #ff4bd6;
  --highlight: #ffe95e;
  --panel: #071223;
  --panel-2: #132c53;
  --edge: #020611;
  --radius: 0px;
  --frame-saturation: 112%;
  --frame-brightness: 104%;
  --frame-contrast: 106%;
  --rail-fill: repeating-linear-gradient(90deg, var(--primary) 0 22px, var(--secondary) 22px 38px, var(--highlight) 38px 44px, var(--edge) 44px 54px);
}

body[data-theme="rose"] {
  --primary: #ff4ca5;
  --secondary: #58e9ff;
  --highlight: #ffe3f5;
  --muted-color: #ffc4e1;
  --panel: #260719;
  --panel-2: #4c112b;
  --edge: #11020c;
  --rail-fill: repeating-linear-gradient(90deg, var(--primary) 0 18px, var(--highlight) 18px 24px, var(--secondary) 24px 34px, var(--edge) 34px 44px);
}

body[data-theme="retro-arcade"] {
  --primary: #ef1618;
  --secondary: #06aee6;
  --highlight: #ffc514;
  --panel: #10131b;
  --panel-2: #1c202a;
  --edge: #030406;
  --demo-bg: #0b0e16;
  --arcade-metal: #17191d;
  --arcade-metal-2: #090a0d;
  --arcade-trim: var(--primary);
  --arcade-blue: var(--secondary);
  --arcade-yellow: var(--highlight);
  --retro-top-slice: 15.370370%;
  --retro-bottom-slice: 17.407407%;
  --retro-side-slice: 6.875%;
  --retro-middle-slice: 72.037037%;
}

body[data-theme="retro-arcade"] .square-frame-source {
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.54));
}

body.obs[data-theme="retro-arcade"] .square-frame-source,
body.transparent[data-theme="retro-arcade"] .square-frame-source {
  filter: none;
}

body[data-theme="retro-arcade"][data-widget="frame"] .square-frame::before,
body[data-theme="retro-arcade"][data-widget="frame"] .square-frame::after {
  content: none;
}

body[data-theme="retro-arcade"][data-widget="frame"] .frame-art,
body[data-theme="retro-arcade"][data-widget="frame"] .frame-art::before,
body[data-theme="retro-arcade"][data-widget="frame"] .frame-art::after {
  display: none;
}

.retro-arcade-frame {
  background: transparent;
}

.retro-arcade-frame > * {
  position: absolute;
  pointer-events: none;
}

.retro-frame-fill {
  inset: 13% 5.5% 13.5%;
  display: none;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 34% 70%, rgba(6, 174, 230, 0.07)),
    #11141e;
  box-shadow:
    inset 0 0 0 3px rgba(6, 174, 230, 0.72),
    inset 0 0 44px rgba(0, 0, 0, 0.72);
}

body[data-theme="retro-arcade"][data-widget="frame"]:not(.obs):not(.transparent) .retro-frame-fill {
  display: block;
}

.arcade-png-part {
  position: absolute;
  z-index: 24;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0.58;
  mix-blend-mode: luminosity;
  filter: none;
  image-rendering: auto;
}

body.obs .arcade-png-part,
body.transparent .arcade-png-part {
  opacity: 0.56;
}

.arcade-png-top,
.arcade-png-bottom {
  left: 0;
  width: 100%;
}

.arcade-png-top {
  top: 0;
  height: var(--retro-top-slice);
}

.arcade-png-bottom {
  bottom: 0;
  height: var(--retro-bottom-slice);
}

.arcade-png-left,
.arcade-png-right {
  top: var(--retro-top-slice);
  width: var(--retro-side-slice);
  height: var(--retro-middle-slice);
}

.arcade-png-left { left: 0; }
.arcade-png-right { right: 0; }

body[data-theme="retro-arcade"] .arcade-bottom-deck {
  display: none;
}

.arcade-bottom-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--retro-bottom-slice);
  pointer-events: none;
  user-select: none;
}

.arcade-bottom-art-base {
  z-index: 16;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, #17191d), #07080b 28% 72%, color-mix(in srgb, var(--secondary) 22%, #17191d));
}

.arcade-bottom-tint {
  z-index: 18;
  background: currentColor;
  opacity: 0.95;
  mix-blend-mode: normal;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.arcade-bottom-tint-primary {
  color: var(--primary);
  -webkit-mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-primary.png");
  mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-primary.png");
}

.arcade-bottom-tint-secondary {
  color: var(--secondary);
  -webkit-mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-secondary.png");
  mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-secondary.png");
}

.arcade-bottom-tint-highlight {
  color: var(--highlight);
  -webkit-mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-highlight.png");
  mask-image: url("/overlays/square-frame-packs/assets/retro-arcade-cabinet/bottom-mask-highlight.png");
}

.arcade-bottom-detail {
  z-index: 22;
  display: block;
  object-fit: fill;
  opacity: 0.98;
  mix-blend-mode: luminosity;
}

.arcade-outer {
  z-index: 8;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 30% 74%, rgba(0,0,0,0.5)),
    linear-gradient(90deg, var(--arcade-trim), color-mix(in srgb, var(--arcade-trim) 58%, var(--arcade-blue)) 48%, var(--arcade-trim));
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--arcade-trim) 54%, white),
    inset 0 0 0 8px color-mix(in srgb, var(--arcade-trim) 62%, black),
    inset 0 0 28px rgba(0, 0, 0, 0.7);
}

.arcade-outer-top,
.arcade-outer-bottom {
  left: 0;
  right: 0;
  height: 3.1%;
}

.arcade-outer-top { top: 0; }
.arcade-outer-bottom { bottom: 0; }

.arcade-outer-left,
.arcade-outer-right {
  top: 0;
  bottom: 0;
  width: 2.35%;
}

.arcade-outer-left { left: 0; }
.arcade-outer-right { right: 0; }

.arcade-side-rail {
  z-index: 10;
  top: var(--retro-top-slice);
  bottom: var(--retro-bottom-slice);
  width: 1.9%;
  border: 3px solid #08090c;
  background:
    linear-gradient(90deg, var(--arcade-yellow) 0 28%, #101115 28% 37%, var(--arcade-blue) 37% 63%, #101115 63% 72%, var(--arcade-trim) 72% 100%);
  box-shadow:
    inset 0 0 9px rgba(255,255,255,0.45),
    0 0 0 2px rgba(0,0,0,0.86);
}

.arcade-side-rail-left { left: 1.25%; }
.arcade-side-rail-right { right: 1.25%; }

.arcade-top-deck {
  z-index: 12;
  top: 2.3%;
  left: 2.2%;
  right: 2.2%;
  height: 10.6%;
  display: grid;
  grid-template-columns: 22% 1fr 22%;
  align-items: center;
  gap: 2.2%;
  border: 4px solid #06070a;
  border-bottom-width: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--arcade-trim) 20%, #17191f), #07080b 16% 84%, color-mix(in srgb, var(--arcade-blue) 18%, #17191f));
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.05),
    inset 0 -18px 26px rgba(0,0,0,0.62),
    0 7px 0 rgba(0,0,0,0.86);
  padding: 1.2% 2.4%;
}

.arcade-marquee {
  height: 72%;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  background:
    linear-gradient(90deg, var(--arcade-blue) 0 8%, var(--arcade-yellow) 8% 13%, var(--arcade-trim) 13% 87%, var(--arcade-yellow) 87% 92%, var(--arcade-blue) 92% 100%);
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,0.72),
    inset 0 18px 24px rgba(255,255,255,0.18),
    inset 0 -18px 30px rgba(0,0,0,0.36);
}

.arcade-speaker {
  height: 70%;
  border: 4px solid #050609;
  border-radius: 13px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.2) 0 2px, transparent 3px) 0 0 / 18px 18px,
    radial-gradient(circle, rgba(0,0,0,0.9) 0 4px, transparent 5px) 0 0 / 18px 18px,
    linear-gradient(180deg, #1b1d23, #050609);
  box-shadow:
    inset 0 0 16px rgba(0,0,0,0.8),
    0 0 0 2px rgba(255,255,255,0.08);
}

.arcade-screen-bezel {
  z-index: 6;
  inset: 13.65% 4.8% 16.75%;
  border: 7px solid #050609;
  border-radius: 30px;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.05),
    inset 0 0 34px rgba(0,0,0,0.9),
    0 0 0 6px rgba(25, 27, 30, 0.96),
    0 0 0 10px rgba(0,0,0,0.86);
}

.arcade-bottom-deck {
  z-index: 14;
  left: 2.3%;
  right: 2.3%;
  bottom: 2.3%;
  height: 14.2%;
  display: grid;
  grid-template-columns: 26% 15% 14% 15% 26%;
  align-items: center;
  gap: 1%;
  overflow: visible;
  border: 4px solid #050609;
  border-top-width: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--arcade-trim) 20%, #191b20), #08090d 28% 72%, color-mix(in srgb, var(--arcade-blue) 20%, #191b20));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.04),
    inset 0 -22px 24px rgba(0,0,0,0.62),
    0 -7px 0 rgba(0,0,0,0.76);
  padding: 0.8% 2.1%;
}

.arcade-control {
  position: relative;
  display: flex;
  align-items: end;
  gap: 8%;
  height: 100%;
  min-width: 0;
}

.arcade-control-right {
  justify-content: end;
}

.arcade-joystick {
  position: relative;
  width: 27%;
  height: 92%;
  min-width: 54px;
}

.arcade-joystick::before,
.arcade-joystick::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.arcade-joystick::before {
  top: 22%;
  width: 12%;
  height: 43%;
  border-radius: 999px;
  background: linear-gradient(90deg, #121318, #b9c2ce 45% 55%, #0b0c10);
  box-shadow: 0 0 0 3px #050609;
}

.arcade-joystick::after {
  top: 4%;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.8), transparent 0 16%, transparent 17%),
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.35), transparent 0 28%, transparent 29%),
    linear-gradient(135deg, var(--stick-color), color-mix(in srgb, var(--stick-color) 58%, #050505));
  box-shadow:
    inset -9px -12px 18px rgba(0,0,0,0.38),
    0 0 0 4px #050609,
    0 10px 16px rgba(0,0,0,0.66);
}

.arcade-joystick {
  background:
    radial-gradient(ellipse at center, #1d2027 0 42%, #050609 43% 62%, transparent 63%);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 92% 42%;
}

.joystick-red { --stick-color: var(--arcade-trim); }
.joystick-blue { --stick-color: var(--arcade-blue); }

.arcade-buttons {
  display: flex;
  align-items: end;
  gap: 13%;
  width: 52%;
  height: 66%;
  padding-bottom: 5%;
}

.arcade-buttons span {
  display: block;
  width: 31%;
  aspect-ratio: 1.18 / 1;
  border: 4px solid #050609;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.78), transparent 0 18%, transparent 19%),
    linear-gradient(180deg, color-mix(in srgb, var(--button-color) 96%, white 10%), var(--button-color) 52%, color-mix(in srgb, var(--button-color) 60%, black));
  box-shadow:
    inset 0 -8px 10px rgba(0,0,0,0.38),
    0 9px 0 #050609,
    0 14px 18px rgba(0,0,0,0.55);
}

.button-red { --button-color: var(--arcade-trim); }
.button-yellow { --button-color: var(--arcade-yellow); }
.button-blue { --button-color: var(--arcade-blue); }

.arcade-lower-speaker {
  height: 58%;
  border: 4px solid #050609;
  border-radius: 14px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.18) 0 2px, transparent 3px) 0 0 / 17px 17px,
    radial-gradient(circle, rgba(0,0,0,0.95) 0 4px, transparent 5px) 0 0 / 17px 17px,
    linear-gradient(180deg, #191b20, #050609);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.86);
}

.arcade-coin-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12%;
  height: 64%;
  border: 4px solid #050609;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%),
    #15171b;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.72);
}

.arcade-coin-slot span {
  width: 18%;
  height: 58%;
  border: 4px solid #050609;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 20%, #ffef8e 0 8%, transparent 9%),
    linear-gradient(180deg, color-mix(in srgb, var(--arcade-trim) 92%, white), color-mix(in srgb, var(--arcade-trim) 58%, black));
  box-shadow:
    inset 0 0 8px rgba(255,255,255,0.28),
    0 0 12px rgba(239,22,24,0.48);
}

body[data-theme="retro-arcade"][data-widget="pack-preview"] {
  --primary: #ef1618;
  --secondary: #06aee6;
  --highlight: #ffc514;
  background:
    linear-gradient(135deg, rgba(239, 22, 24, 0.16), transparent 28%),
    radial-gradient(circle at 78% 12%, rgba(6, 174, 230, 0.16), transparent 28%),
    #07090f;
}

body[data-theme="retro-arcade"] .pack-frame-stage {
  width: min(1180px, 100%);
  border-color: rgba(239, 22, 24, 0.78);
}

.retro-arcade-preview {
  place-items: center;
}

.retro-arcade-preview .pack-widget-grid {
  grid-template-columns: minmax(300px, 390px) minmax(420px, 1fr);
  width: min(1180px, 100%);
  border-color: rgba(6, 174, 230, 0.72);
}

.retro-arcade-preview .pack-widget-grid iframe:nth-child(1) {
  justify-self: center;
  width: min(390px, 100%);
  height: auto;
  aspect-ratio: 13 / 18;
}

.retro-arcade-preview .pack-widget-grid iframe:nth-child(2) {
  height: auto;
  align-self: center;
  aspect-ratio: 16 / 5;
}

.retro-arcade-preview .pack-widget-grid iframe:nth-child(3) {
  grid-column: 2;
  height: auto;
  aspect-ratio: 16 / 9;
}

.retro-arcade-preview .pack-widget-grid iframe:nth-child(4) {
  grid-column: 2;
  height: auto;
  align-self: start;
  aspect-ratio: 4 / 1;
}

@media (max-width: 860px) {
  .retro-arcade-preview .pack-widget-grid {
    grid-template-columns: 1fr;
  }

  .retro-arcade-preview .pack-widget-grid iframe:nth-child(3),
  .retro-arcade-preview .pack-widget-grid iframe:nth-child(4) {
    grid-column: auto;
  }
}

.retro-arcade-event-source {
  width: min(96vw, 980px);
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.56));
}

body.obs[data-theme="retro-arcade"] .retro-arcade-event-source,
body.transparent[data-theme="retro-arcade"] .retro-arcade-event-source {
  width: 100vw;
  height: auto;
  max-height: 100vh;
  aspect-ratio: 16 / 9;
  filter: none;
}

.retro-event-cabinet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 1.7vw, 18px) solid #050609;
  border-radius: clamp(8px, 1.4vw, 18px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 24% 68%, rgba(0,0,0,0.48)),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 34%, #17191d), #08090d 24% 76%, color-mix(in srgb, var(--secondary) 32%, #17191d));
  box-shadow:
    inset 0 0 0 clamp(3px, 0.55vw, 6px) rgba(255,255,255,0.045),
    inset 0 0 0 clamp(10px, 1.8vw, 20px) rgba(0,0,0,0.62),
    inset 0 -38px 54px rgba(0,0,0,0.68);
}

.retro-event-cabinet::before,
.retro-event-cabinet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.retro-event-cabinet::before {
  inset: clamp(22px, 3.2vw, 42px);
  border: clamp(4px, 0.75vw, 8px) solid #050609;
  border-radius: clamp(7px, 1vw, 14px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 32% 66%, rgba(255,255,255,0.03));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.055),
    0 0 0 clamp(4px, 0.8vw, 9px) rgba(20, 22, 28, 0.9);
}

.retro-event-cabinet::after {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px),
    linear-gradient(105deg, transparent 0 23%, rgba(255,255,255,0.10) 28%, transparent 35% 100%);
  opacity: 0.4;
  mix-blend-mode: screen;
}

.retro-event-side,
.retro-event-top,
.retro-event-screen,
.retro-event-lower,
.retro-event-glass {
  position: absolute;
  pointer-events: none;
}

.retro-event-side {
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 5.8%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 28% 72%, rgba(0,0,0,0.64)),
    linear-gradient(90deg, var(--primary), var(--highlight) 49%, var(--secondary));
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.74),
    inset 0 0 20px rgba(0,0,0,0.64);
}

.retro-event-side-left { left: 0; }
.retro-event-side-right { right: 0; }

.retro-event-top {
  z-index: 4;
  top: 4.8%;
  left: 7.4%;
  right: 7.4%;
  height: 21.5%;
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  align-items: center;
  gap: 2.6%;
  padding: 1.2% 2.2%;
  border: clamp(4px, 0.8vw, 8px) solid #050609;
  border-bottom-width: clamp(7px, 1.2vw, 12px);
  border-radius: clamp(8px, 1.2vw, 15px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 45%),
    linear-gradient(90deg, #17191f, #07080b 18% 82%, #17191f);
  box-shadow:
    inset 0 -18px 24px rgba(0,0,0,0.58),
    0 7px 0 rgba(0,0,0,0.78);
}

.retro-event-speaker {
  height: 70%;
  border: clamp(3px, 0.55vw, 6px) solid #050609;
  border-radius: clamp(8px, 1.1vw, 14px);
  background:
    radial-gradient(circle, rgba(255,255,255,0.23) 0 2px, transparent 3px) 0 0 / 16px 16px,
    radial-gradient(circle, rgba(0,0,0,0.94) 0 4px, transparent 5px) 0 0 / 16px 16px,
    linear-gradient(180deg, #1b1d23, #050609);
  box-shadow:
    inset 0 0 16px rgba(0,0,0,0.84),
    0 0 0 2px rgba(255,255,255,0.07);
}

.retro-event-marquee {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 76%;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  border: clamp(3px, 0.55vw, 6px) solid #050609;
  background:
    linear-gradient(90deg, var(--secondary) 0 8%, var(--highlight) 8% 14%, var(--primary) 14% 86%, var(--highlight) 86% 92%, var(--secondary) 92% 100%);
  box-shadow:
    inset 0 16px 18px rgba(255,255,255,0.2),
    inset 0 -18px 26px rgba(0,0,0,0.38);
}

.retro-event-marquee span {
  max-width: 82%;
  overflow: hidden;
  color: #fff7c3;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(15px, 2.2vw, 26px);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  text-overflow: ellipsis;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.62);
  white-space: nowrap;
}

.retro-event-screen {
  z-index: 5;
  left: 11.2%;
  right: 11.2%;
  top: 30%;
  height: 43%;
  display: grid;
  grid-template-columns: minmax(64px, 13%) minmax(0, 1fr) auto;
  grid-template-rows: 1fr 16px;
  gap: 1.8% 3%;
  align-items: center;
  padding: 3.1% 3.5%;
  border: clamp(7px, 1.2vw, 13px) solid #050609;
  border-radius: clamp(18px, 2.7vw, 30px);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,255,255,0.14), transparent 44%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, color-mix(in srgb, var(--secondary) 22%, #101622), #05070d 44% 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.045),
    inset 0 0 42px rgba(0,0,0,0.84),
    0 0 0 clamp(7px, 1.3vw, 14px) rgba(22,24,30,0.94),
    0 0 0 clamp(12px, 2.1vw, 24px) rgba(0,0,0,0.74);
}

.retro-event-badge {
  display: grid;
  place-items: center;
  width: clamp(62px, 8vw, 92px);
  aspect-ratio: 1;
  border: clamp(4px, 0.75vw, 8px) solid #050609;
  border-radius: 50%;
  color: #050609;
  background:
    radial-gradient(circle at 32% 23%, rgba(255,255,255,0.72), transparent 0 18%, transparent 19%),
    linear-gradient(145deg, var(--highlight), color-mix(in srgb, var(--highlight) 42%, var(--primary)));
  box-shadow:
    inset -10px -13px 20px rgba(0,0,0,0.28),
    0 9px 0 #050609,
    0 14px 18px rgba(0,0,0,0.55);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: 0;
}

.retro-event-copy {
  min-width: 0;
}

.retro-event-name,
.retro-event-value {
  color: #f8fbff;
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.68);
}

.retro-event-name {
  overflow: hidden;
  font-size: clamp(28px, 5vw, 56px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-event-message {
  overflow: hidden;
  margin-top: 1.6%;
  color: color-mix(in srgb, var(--highlight) 78%, #ffffff);
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-event-value {
  justify-self: end;
  max-width: 210px;
  overflow: hidden;
  padding: 10px 14px;
  border: clamp(3px, 0.55vw, 6px) solid #050609;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 44%),
    color-mix(in srgb, var(--primary) 76%, #11141e);
  box-shadow:
    inset 0 -10px 14px rgba(0,0,0,0.42),
    6px 6px 0 rgba(0,0,0,0.66);
  font-size: clamp(18px, 3vw, 34px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-event-meter {
  position: relative;
  grid-column: 1 / -1;
  height: 16px;
  overflow: hidden;
  border: 4px solid #050609;
  background: #08090d;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.84);
}

.retro-event-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 72%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 7px, transparent 7px 14px),
    linear-gradient(90deg, var(--primary), var(--highlight), var(--secondary));
}

.retro-event-lower {
  z-index: 4;
  left: 12%;
  right: 12%;
  bottom: 5.2%;
  height: 16.2%;
  display: grid;
  grid-template-columns: 22% 1fr 24%;
  align-items: center;
  gap: 3.6%;
  padding: 1.1% 2.8%;
  border: clamp(4px, 0.85vw, 8px) solid #050609;
  border-top-width: clamp(7px, 1.2vw, 12px);
  border-radius: clamp(6px, 1vw, 12px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, #191b20), #07080b 26% 72%, color-mix(in srgb, var(--secondary) 18%, #191b20));
  box-shadow:
    inset 0 -18px 22px rgba(0,0,0,0.58),
    0 -6px 0 rgba(0,0,0,0.68);
}

.retro-event-coin-door {
  display: flex;
  justify-content: center;
  gap: 12%;
  height: 72%;
  padding: 3%;
  border: 4px solid #050609;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%),
    #15171b;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.78);
}

.retro-event-coin-door span {
  width: 24%;
  border: 3px solid #050609;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 18%, #ffef8e 0 8%, transparent 9%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, white), color-mix(in srgb, var(--primary) 52%, black));
}

.retro-event-button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.retro-event-button-row span {
  display: block;
  width: clamp(34px, 5.8vw, 62px);
  aspect-ratio: 1.18 / 1;
  border: 4px solid #050609;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.76), transparent 0 18%, transparent 19%),
    linear-gradient(180deg, color-mix(in srgb, var(--button-color) 96%, white 10%), var(--button-color) 52%, color-mix(in srgb, var(--button-color) 60%, black));
  box-shadow:
    inset 0 -8px 10px rgba(0,0,0,0.38),
    0 8px 0 #050609,
    0 13px 16px rgba(0,0,0,0.54);
}

.retro-event-vent {
  height: 68%;
  border: 4px solid #050609;
  border-radius: 10px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.18) 0 2px, transparent 3px) 0 0 / 16px 16px,
    radial-gradient(circle, rgba(0,0,0,0.95) 0 4px, transparent 5px) 0 0 / 16px 16px,
    linear-gradient(180deg, #191b20, #050609);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.86);
}

.retro-event-glass {
  z-index: 7;
  inset: 30% 11.2% 27%;
  border-radius: clamp(18px, 2.7vw, 30px);
  background:
    linear-gradient(118deg, transparent 0 16%, rgba(255,255,255,0.15) 18% 24%, transparent 28% 100%),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.11), transparent 54%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

@media (max-width: 520px) {
  .retro-event-top {
    grid-template-columns: 18% 1fr 18%;
    gap: 1.8%;
  }

  .retro-event-marquee span {
    max-width: 88%;
    font-size: 11px;
  }

  .retro-event-screen {
    grid-template-columns: 52px minmax(0, 1fr) 94px;
    grid-template-rows: 1fr 10px;
    gap: 5px 8px;
    padding: 4.2% 4.8%;
  }

  .retro-event-badge {
    width: 50px;
    border-width: 3px;
    font-size: 14px;
    box-shadow:
      inset -6px -8px 12px rgba(0,0,0,0.28),
      0 6px 0 #050609,
      0 9px 12px rgba(0,0,0,0.55);
  }

  .retro-event-name {
    font-size: 20px;
  }

  .retro-event-message {
    margin-top: 2px;
    font-size: 11px;
  }

  .retro-event-value {
    max-width: 94px;
    padding: 6px 7px;
    border-width: 3px;
    font-size: 15px;
    box-shadow:
      inset 0 -7px 10px rgba(0,0,0,0.42),
      4px 4px 0 rgba(0,0,0,0.66);
  }

  .retro-event-meter {
    height: 10px;
    border-width: 2px;
  }

  .retro-event-lower {
    grid-template-columns: 22% 1fr 24%;
    gap: 3%;
    padding: 1.4% 3%;
  }

  .retro-event-coin-door,
  .retro-event-vent {
    border-width: 3px;
  }

  .retro-event-button-row {
    gap: 9px;
  }

  .retro-event-button-row span {
    width: 24px;
    border-width: 3px;
    box-shadow:
      inset 0 -5px 7px rgba(0,0,0,0.38),
      0 5px 0 #050609,
      0 8px 10px rgba(0,0,0,0.54);
  }
}

.retro-arcade-chat-source {
  width: min(96vw, 520px);
  aspect-ratio: 13 / 18;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.56));
}

body.obs[data-theme="retro-arcade"] .retro-arcade-chat-source,
body.transparent[data-theme="retro-arcade"] .retro-arcade-chat-source {
  width: 100vw;
  height: auto;
  max-height: 100vh;
  aspect-ratio: 13 / 18;
  filter: none;
}

.retro-chat-cabinet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 2.5vw, 15px) solid #050609;
  border-radius: clamp(10px, 2.4vw, 18px);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 7% 93%, rgba(255,255,255,0.07)),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 22% 70%, rgba(0,0,0,0.58)),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 36%, #17191d), #08090d 30% 70%, color-mix(in srgb, var(--secondary) 34%, #17191d));
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.045),
    inset 0 0 0 clamp(12px, 3vw, 22px) rgba(0,0,0,0.64),
    inset 0 -36px 52px rgba(0,0,0,0.7);
}

.retro-chat-cabinet::before,
.retro-chat-cabinet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.retro-chat-cabinet::before {
  inset: 4.5%;
  border: 4px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,0.72),
    0 0 0 3px rgba(255,255,255,0.04);
}

.retro-chat-cabinet::after {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 12px),
    linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,0.08) 22%, transparent 31% 100%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.retro-chat-marquee,
.retro-chat-speaker,
.retro-chat-screen,
.retro-chat-footer,
.retro-chat-glass {
  position: absolute;
  pointer-events: none;
}

.retro-chat-marquee {
  z-index: 4;
  top: 4.6%;
  left: 19%;
  right: 19%;
  height: 8.8%;
  display: grid;
  place-items: center;
  min-width: 0;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
  border: 4px solid #050609;
  background:
    linear-gradient(90deg, var(--secondary) 0 9%, var(--highlight) 9% 16%, var(--primary) 16% 84%, var(--highlight) 84% 91%, var(--secondary) 91% 100%);
  box-shadow:
    inset 0 13px 16px rgba(255,255,255,0.18),
    inset 0 -15px 22px rgba(0,0,0,0.38),
    0 7px 0 rgba(0,0,0,0.65);
}

.retro-chat-marquee span {
  display: none;
}

.retro-chat-marquee strong {
  max-width: 82%;
  overflow: hidden;
  color: #fff7c3;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(15px, 3.8vw, 22px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.62);
  white-space: nowrap;
}

.retro-chat-speaker {
  z-index: 4;
  top: 5%;
  width: 12.5%;
  height: 7.8%;
  border: 4px solid #050609;
  border-radius: 12px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.2) 0 2px, transparent 3px) 0 0 / 14px 14px,
    radial-gradient(circle, rgba(0,0,0,0.95) 0 4px, transparent 5px) 0 0 / 14px 14px,
    linear-gradient(180deg, #1b1d23, #050609);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.84),
    0 0 0 2px rgba(255,255,255,0.07);
}

.retro-chat-speaker-left { left: 7%; }
.retro-chat-speaker-right { right: 7%; }

.retro-chat-screen {
  z-index: 5;
  left: 7.8%;
  right: 7.8%;
  top: 16%;
  bottom: 10.5%;
  overflow: hidden;
  border: clamp(7px, 2.2vw, 12px) solid #050609;
  border-radius: clamp(17px, 4.8vw, 28px);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,0.13), transparent 44%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, color-mix(in srgb, var(--secondary) 20%, #101622), #05070d 44% 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.045),
    inset 0 0 42px rgba(0,0,0,0.86),
    0 0 0 clamp(7px, 2vw, 13px) rgba(22,24,30,0.94),
    0 0 0 clamp(12px, 3.2vw, 23px) rgba(0,0,0,0.74);
}

.retro-chat-list {
  position: absolute;
  inset: 4.5% 4.8%;
  display: grid;
  align-content: start;
  gap: clamp(7px, 1.55vw, 10px);
  overflow: hidden;
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: clamp(44px, 8.6vw, 54px);
  padding: 9px 10px;
  border: 3px solid rgba(0,0,0,0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 52%),
    color-mix(in srgb, var(--panel) 70%, #05070d);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.035),
    4px 4px 0 rgba(0,0,0,0.42);
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-row:nth-child(2n) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 52%),
    color-mix(in srgb, var(--secondary) 13%, #05070d);
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-author {
  color: var(--highlight);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(12px, 2.9vw, 16px);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.64);
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-text {
  color: #f8fbff;
  font-size: clamp(12px, 2.9vw, 16px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0;
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-row > div:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="retro-arcade"][data-widget="chat"] .chat-meta {
  min-width: 46px;
  padding: 5px 7px;
  border: 2px solid #050609;
  border-radius: 6px;
  color: #050609;
  background: var(--highlight);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.48);
}

.retro-chat-footer {
  z-index: 4;
  left: 8.4%;
  right: 8.4%;
  bottom: 3.8%;
  height: 6.8%;
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  align-items: center;
  gap: 4%;
  padding: 1.4% 4%;
  border: 4px solid #050609;
  border-top-width: 7px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, #191b20), #07080b 28% 72%, color-mix(in srgb, var(--secondary) 18%, #191b20));
  box-shadow:
    inset 0 -14px 18px rgba(0,0,0,0.58),
    0 -6px 0 rgba(0,0,0,0.68);
}

.retro-chat-coin {
  display: flex;
  justify-content: center;
  gap: 12%;
  height: 72%;
  padding: 4%;
  border: 3px solid #050609;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%),
    #15171b;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.78);
}

.retro-chat-coin span {
  width: 22%;
  border: 2px solid #050609;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 18%, #ffef8e 0 8%, transparent 9%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, white), color-mix(in srgb, var(--primary) 52%, black));
}

.retro-chat-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.retro-chat-buttons span {
  display: block;
  width: clamp(23px, 6.8vw, 34px);
  aspect-ratio: 1.18 / 1;
  border: 3px solid #050609;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.76), transparent 0 18%, transparent 19%),
    linear-gradient(180deg, color-mix(in srgb, var(--button-color) 96%, white 10%), var(--button-color) 52%, color-mix(in srgb, var(--button-color) 60%, black));
  box-shadow:
    inset 0 -5px 7px rgba(0,0,0,0.38),
    0 5px 0 #050609,
    0 8px 10px rgba(0,0,0,0.54);
}

.retro-chat-vent {
  height: 70%;
  border: 3px solid #050609;
  border-radius: 8px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.18) 0 2px, transparent 3px) 0 0 / 13px 13px,
    radial-gradient(circle, rgba(0,0,0,0.95) 0 4px, transparent 5px) 0 0 / 13px 13px,
    linear-gradient(180deg, #191b20, #050609);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.86);
}

.retro-chat-glass {
  z-index: 7;
  inset: 16% 7.8% 10.5%;
  border-radius: clamp(17px, 4.8vw, 28px);
  background:
    linear-gradient(118deg, transparent 0 12%, rgba(255,255,255,0.14) 16% 25%, transparent 31% 100%),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.11), transparent 54%);
  mix-blend-mode: screen;
  opacity: 0.68;
}

.retro-arcade-chat-source {
  width: min(calc(100vw - 48px), 560px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 11 / 16;
}

body.obs[data-theme="retro-arcade"] .retro-arcade-chat-source,
body.transparent[data-theme="retro-arcade"] .retro-arcade-chat-source {
  width: min(100vw, calc(100vh * 11 / 16));
  height: min(100vh, calc(100vw * 16 / 11));
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 11 / 16;
}

.retro-arcade-grid-chat {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 2.4vw, 14px) solid #020307;
  border-radius: clamp(18px, 3.6vw, 26px);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--primary) 20%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16% 80%, rgba(0,0,0,0.54)),
    linear-gradient(135deg, #09111c, #03050a 54%, #0d1019);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.06),
    inset 0 0 0 clamp(8px, 1.7vw, 12px) #060910,
    inset 0 -28px 44px rgba(0,0,0,0.6),
    0 18px 42px rgba(0,0,0,0.56);
}

.retro-arcade-grid-chat::before,
.retro-arcade-grid-chat::after {
  content: "";
  position: absolute;
  inset: 2.4%;
  border-radius: clamp(14px, 3vw, 22px);
  pointer-events: none;
}

.retro-arcade-grid-chat::before {
  border: 3px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,0.7),
    inset 0 0 34px rgba(0,0,0,0.48);
}

.retro-arcade-grid-chat::after {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.08) 0 1px, transparent 2px) 0 0 / 18px 18px,
    radial-gradient(circle at 78% 30%, rgba(255,255,255,0.06) 0 1px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,0.08) 24%, transparent 34% 100%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

.retro-arcade-chat-shell,
.retro-arcade-chat-hud,
.retro-arcade-side-score,
.retro-arcade-sprite,
.retro-arcade-maze-rail,
.retro-arcade-pellets,
.retro-chat-screen,
.retro-arcade-starfield,
.retro-arcade-grid,
.retro-arcade-scanlines,
.retro-chat-glass {
  position: absolute;
  pointer-events: none;
}

.retro-arcade-chat-shell {
  inset: 0;
  z-index: 2;
}

.retro-arcade-chat-hud {
  z-index: 5;
  top: 5.6%;
  left: 15%;
  right: 15%;
  height: 9%;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 0 18px;
  border: 4px solid #020307;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 70%, #201611), color-mix(in srgb, var(--primary) 82%, #130f24) 30% 70%, color-mix(in srgb, var(--highlight) 72%, #241604));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.14),
    0 6px 0 rgba(0,0,0,0.6),
    0 0 calc(20px * var(--glow)) color-mix(in srgb, var(--primary) 30%, transparent);
}

.retro-arcade-chat-hud span,
.retro-arcade-chat-hud strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.retro-arcade-chat-hud span {
  color: #201105;
  font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 950;
  letter-spacing: 0.18em;
}

.retro-arcade-chat-hud strong {
  color: #fff4bc;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.72);
}

.retro-arcade-side-score {
  z-index: 5;
  top: 6%;
  width: 11.5%;
  display: grid;
  gap: 2px;
  justify-items: center;
  text-transform: uppercase;
}

.retro-arcade-side-score-left { left: 4.6%; }
.retro-arcade-side-score-right { right: 4.6%; }

.retro-arcade-side-score span,
.retro-arcade-side-score strong {
  display: block;
  width: 100%;
  border: 3px solid #020307;
  border-radius: 7px;
  text-align: center;
  box-shadow: 0 4px 0 rgba(0,0,0,0.56);
}

.retro-arcade-side-score span {
  padding: 5px 4px;
  background: color-mix(in srgb, var(--secondary) 72%, #05070d);
  color: #f7fbff;
  font-size: clamp(9px, 1.9vw, 11px);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.retro-arcade-side-score strong {
  padding: 7px 4px 6px;
  background: color-mix(in srgb, var(--panel) 86%, black 14%);
  color: var(--highlight);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(12px, 2.6vw, 16px);
  font-weight: 950;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}

.retro-arcade-sprite {
  z-index: 5;
  width: clamp(28px, 7vw, 42px);
  height: clamp(24px, 6vw, 34px);
  filter: drop-shadow(0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--highlight) 52%, transparent));
}

.retro-arcade-sprite::before,
.retro-arcade-sprite::after {
  content: "";
  position: absolute;
}

.retro-arcade-sprite-alien {
  top: 17.2%;
  left: 7%;
  background:
    linear-gradient(var(--highlight) 0 0) 30% 0 / 16% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 54% 0 / 16% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 18% 22% / 64% 20% no-repeat,
    linear-gradient(var(--highlight) 0 0) 8% 46% / 84% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 0 68% / 22% 14% no-repeat,
    linear-gradient(var(--highlight) 0 0) 78% 68% / 22% 14% no-repeat,
    linear-gradient(var(--highlight) 0 0) 18% 82% / 14% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 68% 82% / 14% 18% no-repeat;
}

.retro-arcade-sprite-ship {
  top: 17.2%;
  right: 7%;
  width: clamp(30px, 7.4vw, 44px);
  height: clamp(26px, 6vw, 36px);
  background:
    linear-gradient(var(--secondary) 0 0) 42% 0 / 16% 34% no-repeat,
    linear-gradient(var(--secondary) 0 0) 28% 34% / 44% 18% no-repeat,
    linear-gradient(var(--secondary) 0 0) 14% 52% / 72% 18% no-repeat,
    linear-gradient(var(--secondary) 0 0) 0 70% / 100% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 44% 88% / 12% 12% no-repeat;
  filter: drop-shadow(0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--secondary) 56%, transparent));
}

.retro-arcade-maze-rail {
  z-index: 4;
  left: 8.4%;
  right: 8.4%;
  height: clamp(14px, 2.4vw, 18px);
  border: 3px solid #020307;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--primary) 92%, white 8%) 0 14%,
      transparent 14% 18%,
      color-mix(in srgb, var(--secondary) 90%, white 8%) 18% 82%,
      transparent 82% 86%,
      color-mix(in srgb, var(--primary) 92%, white 8%) 86% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.16));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.16),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--secondary) 26%, transparent);
}

.retro-arcade-maze-rail-top { top: 18.8%; }
.retro-arcade-maze-rail-bottom { bottom: 7.4%; }

.retro-arcade-pellets {
  z-index: 4;
  top: 22.8%;
  bottom: 12.4%;
  width: clamp(10px, 1.8vw, 13px);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--highlight) 0 42%, transparent 43%) center top / 100% 22px repeat-y;
  filter: drop-shadow(0 0 calc(8px * var(--glow)) color-mix(in srgb, var(--highlight) 56%, transparent));
  opacity: 0.95;
}

.retro-arcade-pellets-left { left: 6.4%; }
.retro-arcade-pellets-right { right: 6.4%; }

.retro-arcade-grid-chat .retro-chat-screen {
  z-index: 3;
  left: 10%;
  right: 10%;
  top: 22%;
  bottom: 11.8%;
  overflow: hidden;
  border: clamp(7px, 1.8vw, 10px) solid #020307;
  border-radius: clamp(18px, 3.2vw, 24px);
  background:
    radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 20% 80%, rgba(0,0,0,0.16)),
    linear-gradient(180deg, #08111b, #02040a 72%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.05),
    inset 0 0 42px rgba(0,0,0,0.82),
    0 0 0 clamp(6px, 1.4vw, 9px) rgba(11,14,22,0.88),
    0 0 calc(26px * var(--glow)) color-mix(in srgb, var(--primary) 18%, transparent);
}

.retro-arcade-starfield,
.retro-arcade-grid,
.retro-arcade-scanlines,
.retro-chat-glass {
  inset: 0;
  border-radius: inherit;
}

.retro-arcade-starfield {
  background:
    radial-gradient(circle at 11% 17%, rgba(255,255,255,0.84) 0 1px, transparent 2px) 0 0 / 42px 42px,
    radial-gradient(circle at 70% 32%, rgba(255,255,255,0.76) 0 1px, transparent 2px) 0 0 / 56px 56px,
    radial-gradient(circle at 44% 68%, rgba(255,255,255,0.72) 0 1px, transparent 2px) 0 0 / 64px 64px,
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--highlight) 58%, white 10%) 0 1px, transparent 2px) 0 0 / 72px 72px;
  opacity: 0.7;
}

.retro-arcade-grid {
  background:
    linear-gradient(rgba(38, 230, 255, 0.12) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(40, 231, 255, 0.11) 1px, transparent 1px) 0 0 / 28px 100%;
  opacity: 0.42;
}

.retro-arcade-grid-chat .retro-chat-list {
  inset: 5% 5.2%;
  z-index: 2;
  gap: clamp(8px, 1.3vw, 11px);
  padding-right: 2px;
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-row {
  min-height: clamp(48px, 7.6vw, 60px);
  padding: 10px 12px;
  border: 3px solid #020307;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 44%),
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 74%, black 26%), color-mix(in srgb, var(--secondary) 14%, #08111a));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.05),
    4px 4px 0 rgba(0,0,0,0.42);
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-row:nth-child(2n) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 44%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 16%, #050911), color-mix(in srgb, var(--primary) 12%, #09101a));
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-author {
  color: var(--highlight);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 950;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.72);
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-text {
  color: #f8fbff;
  font-size: clamp(12px, 2.45vw, 16px);
  font-weight: 800;
  line-height: 1.16;
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-row > div:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="retro-arcade"][data-widget="chat"] .retro-arcade-grid-chat .chat-meta {
  min-width: 48px;
  padding: 5px 8px;
  border: 2px solid #020307;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%),
    linear-gradient(180deg, var(--highlight), color-mix(in srgb, var(--highlight) 68%, #ff8a00));
  color: #1f1200;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.46);
}

.retro-arcade-scanlines {
  z-index: 4;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,0.12) 100%);
  mix-blend-mode: screen;
  opacity: 0.34;
}

.retro-arcade-grid-chat .retro-chat-glass {
  z-index: 5;
  inset: 22% 10% 11.8%;
  border-radius: clamp(18px, 3.2vw, 24px);
  background:
    linear-gradient(116deg, transparent 0 12%, rgba(255,255,255,0.14) 17% 24%, transparent 30% 100%),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.1), transparent 52%);
  mix-blend-mode: screen;
  opacity: 0.6;
}

.retro-arcade-goal-source {
  width: min(calc(100vw - 48px), 1060px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 16 / 5;
}

body.obs[data-theme="retro-arcade"] .retro-arcade-goal-source,
body.transparent[data-theme="retro-arcade"] .retro-arcade-goal-source {
  width: min(100vw, calc(100vh * 16 / 5));
  height: min(100vh, calc(100vw * 5 / 16));
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16 / 5;
}

.retro-arcade-goal-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 1.3vw, 14px) solid #020307;
  border-radius: clamp(14px, 2.1vw, 22px);
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18% 78%, rgba(0,0,0,0.58)),
    linear-gradient(135deg, #0b111d, #03050a 58%, #10121a);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.055),
    inset 0 0 0 clamp(8px, 1.3vw, 12px) #060910,
    inset 0 -24px 42px rgba(0,0,0,0.62),
    0 18px 42px rgba(0,0,0,0.56);
}

.retro-arcade-goal-panel::before,
.retro-arcade-goal-panel::after {
  content: "";
  position: absolute;
  inset: 4.2%;
  border-radius: clamp(10px, 1.7vw, 18px);
  pointer-events: none;
}

.retro-arcade-goal-panel::before {
  border: 3px solid rgba(255,255,255,0.055);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,0.72),
    inset 0 0 30px rgba(0,0,0,0.52);
}

.retro-arcade-goal-panel::after {
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,0.09) 0 1px, transparent 2px) 0 0 / 18px 18px,
    radial-gradient(circle at 82% 32%, rgba(255,255,255,0.07) 0 1px, transparent 2px) 0 0 / 25px 25px,
    linear-gradient(105deg, transparent 0 16%, rgba(255,255,255,0.09) 23%, transparent 34% 100%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.retro-arcade-goal-shell,
.retro-arcade-goal-score,
.retro-arcade-goal-lives,
.retro-arcade-goal-screen,
.retro-arcade-goal-copy,
.retro-arcade-goal-pellets,
.retro-arcade-goal-panel .retro-arcade-sprite,
.retro-arcade-goal-panel .retro-arcade-maze-rail,
.retro-arcade-goal-panel .retro-arcade-starfield,
.retro-arcade-goal-panel .retro-arcade-grid,
.retro-arcade-goal-panel .retro-arcade-scanlines,
.retro-arcade-goal-panel .retro-chat-glass {
  position: absolute;
  pointer-events: none;
}

.retro-arcade-goal-shell {
  inset: 0;
  z-index: 2;
}

.retro-arcade-goal-score {
  z-index: 5;
  left: 5.5%;
  top: 16%;
  width: 27%;
  height: 34%;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 20px;
  border: clamp(4px, 0.7vw, 7px) solid #020307;
  border-radius: clamp(8px, 1.3vw, 12px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 78%, #201611), color-mix(in srgb, var(--primary) 84%, #130f24) 58%, color-mix(in srgb, var(--highlight) 72%, #241604));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.14),
    0 6px 0 rgba(0,0,0,0.6),
    0 0 calc(20px * var(--glow)) color-mix(in srgb, var(--primary) 30%, transparent);
}

.retro-arcade-goal-score span,
.retro-arcade-goal-score strong,
.retro-arcade-goal-count {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.retro-arcade-goal-score span {
  color: #1c1104;
  font-size: clamp(10px, 1.25vw, 14px);
  font-weight: 950;
  letter-spacing: 0.16em;
}

.retro-arcade-goal-score strong {
  color: #fff4bc;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(18px, 2.55vw, 30px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.76);
}

.retro-arcade-goal-lives {
  z-index: 5;
  left: 6%;
  bottom: 18%;
  display: flex;
  gap: clamp(8px, 1vw, 14px);
}

.retro-arcade-goal-lives i {
  display: block;
  width: clamp(22px, 3vw, 34px);
  aspect-ratio: 1;
  border: 3px solid #020307;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.54), transparent 18%),
    linear-gradient(135deg, var(--highlight), color-mix(in srgb, var(--primary) 82%, #ff8a00));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.16),
    0 4px 0 rgba(0,0,0,0.58),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--highlight) 50%, transparent);
}

.retro-arcade-goal-panel .retro-arcade-sprite-alien {
  top: 60%;
  left: 22%;
}

.retro-arcade-goal-panel .retro-arcade-sprite-ship {
  top: 17%;
  right: 7.5%;
}

.retro-arcade-goal-panel .retro-arcade-maze-rail {
  left: 35%;
  right: 7%;
  height: clamp(12px, 1.55vw, 18px);
}

.retro-arcade-goal-panel .retro-arcade-maze-rail-top { top: 16%; }
.retro-arcade-goal-panel .retro-arcade-maze-rail-bottom { bottom: 16%; }

.retro-arcade-goal-screen {
  z-index: 3;
  left: 34%;
  right: 7%;
  top: 27%;
  bottom: 24%;
  overflow: hidden;
  border: clamp(6px, 1vw, 10px) solid #020307;
  border-radius: clamp(12px, 2vw, 20px);
  background:
    radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 22% 78%, rgba(0,0,0,0.2)),
    linear-gradient(180deg, #08111b, #02040a 72%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.05),
    inset 0 0 38px rgba(0,0,0,0.82),
    0 0 0 clamp(5px, 0.8vw, 8px) rgba(11,14,22,0.88),
    0 0 calc(26px * var(--glow)) color-mix(in srgb, var(--primary) 18%, transparent);
}

.retro-arcade-goal-panel .retro-arcade-starfield,
.retro-arcade-goal-panel .retro-arcade-grid,
.retro-arcade-goal-panel .retro-arcade-scanlines,
.retro-arcade-goal-panel .retro-chat-glass {
  inset: 0;
  border-radius: inherit;
}

.retro-arcade-goal-copy {
  z-index: 3;
  inset: 15% 4.8%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

.retro-arcade-goal-count {
  min-width: clamp(120px, 15vw, 210px);
  padding: 10px 14px;
  border: 3px solid #020307;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 45%),
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 74%, black 26%), color-mix(in srgb, var(--secondary) 14%, #08111a));
  color: var(--highlight);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(24px, 4vw, 46px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    3px 3px 0 rgba(0,0,0,0.78),
    0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--highlight) 46%, transparent);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    4px 4px 0 rgba(0,0,0,0.48);
}

body[data-theme="retro-arcade"][data-widget="goal"] .retro-arcade-goal-meter {
  height: clamp(30px, 4.4vw, 48px);
  border: 4px solid #020307;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 44%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 24px),
    color-mix(in srgb, var(--secondary) 22%, #02040a);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.05),
    inset 0 0 20px rgba(0,0,0,0.72),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--secondary) 30%, transparent);
}

body[data-theme="retro-arcade"][data-widget="goal"] .retro-arcade-goal-meter::before {
  border-right: 4px solid rgba(255,255,255,0.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, var(--primary), var(--highlight) 58%, var(--secondary));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.12),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--highlight) 42%, transparent);
}

.retro-arcade-goal-pellets {
  z-index: 4;
  top: 25%;
  bottom: 22%;
  width: clamp(9px, 1.2vw, 13px);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--highlight) 0 42%, transparent 43%) center top / 100% 20px repeat-y;
  filter: drop-shadow(0 0 calc(8px * var(--glow)) color-mix(in srgb, var(--highlight) 56%, transparent));
  opacity: 0.95;
}

.retro-arcade-goal-pellets-left { left: 31%; }
.retro-arcade-goal-pellets-right { right: 3.8%; }

.retro-arcade-goal-panel .retro-arcade-scanlines {
  z-index: 4;
}

.retro-arcade-goal-panel .retro-chat-glass {
  z-index: 5;
  inset: 27% 7% 24% 34%;
  border-radius: clamp(12px, 2vw, 20px);
  background:
    linear-gradient(116deg, transparent 0 12%, rgba(255,255,255,0.14) 17% 24%, transparent 30% 100%),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.1), transparent 52%);
  mix-blend-mode: screen;
  opacity: 0.58;
}

.retro-arcade-basic-text-source,
.cyber-basic-text-source {
  width: min(calc(100vw - 48px), 780px, calc((100vh - 48px) * 4));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 4 / 1;
}

body.obs .retro-arcade-basic-text-source,
body.transparent .retro-arcade-basic-text-source,
body.obs .cyber-basic-text-source,
body.transparent .cyber-basic-text-source {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: auto;
}

.retro-arcade-basic-text-box,
.cyber-basic-text-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.basic-text-copy {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) auto;
  align-items: center;
  gap: clamp(12px, 2.3vw, 24px);
  pointer-events: none;
}

.basic-text-copy div,
.basic-text-copy p,
.basic-text-copy b {
  min-width: 0;
}

.basic-text-copy span,
.basic-text-copy strong,
.basic-text-copy p,
.basic-text-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.basic-text-copy span {
  font-size: clamp(10px, 1.45vw, 13px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.basic-text-copy strong {
  font-size: clamp(24px, 4.4vw, 42px);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.basic-text-copy p {
  margin: 0;
  font-size: clamp(15px, 2.4vw, 22px);
  font-weight: 900;
  line-height: 1.05;
}

.basic-text-copy b {
  font-size: clamp(18px, 3.2vw, 32px);
  font-weight: 950;
  line-height: 1;
}

.retro-arcade-basic-text-box {
  border: clamp(7px, 1.4vw, 12px) solid #020307;
  border-radius: clamp(12px, 2vw, 18px);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--primary) 24%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 42% 78%, rgba(0,0,0,0.56)),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, #090d18), #03050a 42% 62%, color-mix(in srgb, var(--secondary) 22%, #090d18));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.055),
    inset 0 0 0 clamp(8px, 1.6vw, 12px) rgba(0,0,0,0.58),
    inset 0 -22px 36px rgba(0,0,0,0.62),
    0 18px 36px rgba(0,0,0,0.54);
}

.retro-arcade-basic-text-box::before,
.retro-arcade-basic-text-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.retro-arcade-basic-text-box::before {
  inset: 12%;
  border: 3px solid color-mix(in srgb, var(--secondary) 58%, transparent);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.68),
    0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--secondary) 30%, transparent);
}

.retro-arcade-basic-text-box::after {
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
    linear-gradient(108deg, transparent 0 14%, rgba(255,255,255,0.12) 21% 28%, transparent 36% 100%);
  mix-blend-mode: screen;
  opacity: 0.38;
}

.retro-arcade-basic-text-frame,
.cyber-basic-text-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.retro-arcade-basic-text-frame span {
  position: absolute;
  top: 22%;
  bottom: 22%;
  width: clamp(8px, 1.5vw, 12px);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--highlight) 0 42%, transparent 43%) center top / 100% 19px repeat-y;
  filter: drop-shadow(0 0 calc(9px * var(--glow)) color-mix(in srgb, var(--highlight) 58%, transparent));
}

.retro-arcade-basic-text-frame span:first-child { left: 5.8%; }
.retro-arcade-basic-text-frame span:nth-child(2) { right: 5.8%; }

.retro-arcade-basic-text-frame i {
  position: absolute;
  right: 12%;
  top: 21%;
  width: clamp(34px, 6vw, 52px);
  height: clamp(28px, 5vw, 42px);
  background:
    linear-gradient(var(--highlight) 0 0) 42% 0 / 16% 34% no-repeat,
    linear-gradient(var(--highlight) 0 0) 28% 34% / 44% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 14% 52% / 72% 18% no-repeat,
    linear-gradient(var(--highlight) 0 0) 0 70% / 100% 18% no-repeat,
    linear-gradient(var(--secondary) 0 0) 44% 88% / 12% 12% no-repeat;
  filter: drop-shadow(0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--highlight) 58%, transparent));
}

.retro-arcade-basic-text-box .basic-text-copy {
  inset: 20% 14%;
  padding: 0;
}

.retro-arcade-basic-text-box .basic-text-copy span {
  color: color-mix(in srgb, var(--secondary) 82%, white);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.72);
}

.retro-arcade-basic-text-box .basic-text-copy strong {
  color: var(--highlight);
  font-family: "Courier New", "Lucida Console", monospace;
  text-shadow:
    3px 3px 0 rgba(0,0,0,0.78),
    0 0 calc(13px * var(--glow)) color-mix(in srgb, var(--highlight) 42%, transparent);
}

.retro-arcade-basic-text-box .basic-text-copy p {
  color: #f8fbff;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.72);
}

.retro-arcade-basic-text-box .basic-text-copy b {
  min-width: clamp(70px, 11vw, 104px);
  padding: 10px 12px;
  border: 3px solid #020307;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%),
    linear-gradient(180deg, var(--highlight), color-mix(in srgb, var(--highlight) 68%, #ff8a00));
  color: #1f1200;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.46);
}

.cyber-basic-text-box {
  border: clamp(7px, 1.4vw, 12px) solid #030610;
  border-radius: clamp(10px, 1.8vw, 16px);
  background:
    radial-gradient(circle at 14% 0, color-mix(in srgb, var(--primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 84% 0, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42% 78%, rgba(0,0,0,0.58)),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, #071223), #020611 45% 62%, color-mix(in srgb, var(--secondary) 18%, #071223));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.055),
    inset 0 0 0 clamp(7px, 1.4vw, 11px) rgba(0,0,0,0.58),
    inset 0 0 38px rgba(0,0,0,0.78),
    0 0 calc(26px * var(--glow)) color-mix(in srgb, var(--primary) 34%, transparent);
}

.cyber-basic-text-box::before,
.cyber-basic-text-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cyber-basic-text-box::before {
  inset: 11%;
  border: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.66),
    0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--primary) 28%, transparent);
}

.cyber-basic-text-box::after {
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px),
    linear-gradient(110deg, transparent 0 14%, rgba(255,255,255,0.12) 22% 29%, transparent 36% 100%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

.cyber-basic-text-frame span {
  position: absolute;
  top: 18%;
  bottom: 18%;
  width: clamp(8px, 1.4vw, 12px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--primary) 0 24%, transparent 24% 34%, var(--secondary) 34% 68%, transparent 68% 78%, var(--highlight) 78% 100%);
  box-shadow:
    0 0 calc(13px * var(--glow)) color-mix(in srgb, var(--secondary) 52%, transparent),
    inset 0 0 0 2px rgba(255,255,255,0.14);
}

.cyber-basic-text-frame span:first-child { left: 6%; }
.cyber-basic-text-frame span:nth-child(2) { right: 6%; }

.cyber-basic-text-box .basic-text-copy {
  inset: 20% 13%;
}

.cyber-basic-text-box .basic-text-copy span {
  color: color-mix(in srgb, var(--primary) 78%, white);
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.82),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

.cyber-basic-text-box .basic-text-copy strong,
.cyber-basic-text-box .basic-text-copy p {
  color: var(--text-color);
  text-shadow:
    3px 3px 0 rgba(0,0,0,0.84),
    0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--primary) 42%, transparent);
}

.cyber-basic-text-box .basic-text-copy b {
  min-width: clamp(70px, 11vw, 104px);
  padding: 10px 12px;
  border: 2px solid #030610;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 44%),
    linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--secondary) 70%, var(--primary)));
  color: #020611;
  text-align: center;
  box-shadow:
    3px 3px 0 rgba(0,0,0,0.48),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--primary) 34%, transparent);
}

@media (max-width: 640px) {
  .basic-text-copy {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 8px 12px;
  }

  .basic-text-copy b {
    display: none;
  }
}

@media (max-width: 680px) {
  .retro-arcade-goal-copy {
    gap: 10px;
  }

  .retro-arcade-goal-score {
    padding: 0 12px;
  }
}

.widget-source {
  width: min(96vw, var(--widget-width, 820px));
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.48));
}

body.obs .widget-source,
body.transparent .widget-source {
  width: 100vw;
  height: 100vh;
  max-width: none;
  filter: none;
}

.widget-shell {
  position: relative;
  overflow: hidden;
  min-height: var(--widget-height, 146px);
  border: 6px solid color-mix(in srgb, var(--primary) 76%, #050505 24%);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.22) 28% 72%, rgba(0, 0, 0, 0.7)),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, black), color-mix(in srgb, var(--panel-2) 88%, black));
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--secondary) 62%, white 10%),
    inset 0 0 38px rgba(0, 0, 0, 0.76),
    0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--primary) 58%, transparent);
}

.widget-shell::before,
.widget-shell::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-top: 4px solid color-mix(in srgb, var(--highlight) 72%, transparent);
  border-bottom: 4px solid color-mix(in srgb, var(--secondary) 64%, transparent);
  pointer-events: none;
}

.widget-shell::after {
  inset: auto 18px 18px;
  height: 9px;
  background: var(--rail-fill);
  border: 0;
}

.widget-content {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: inherit;
  gap: 12px;
  padding: 24px 28px;
}

.event-layout {
  grid-template-columns: 86px 1fr auto;
  align-items: center;
}

.chat-layout {
  gap: 8px;
  padding: 22px 24px;
}

.bar-layout {
  grid-template-columns: 84px 1fr auto;
  align-items: center;
}

.badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 4px solid var(--highlight);
  color: var(--edge);
  background: var(--primary);
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--secondary) 70%, black);
}

.eyebrow,
.chat-meta {
  color: var(--muted-color);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.title,
.value,
.chat-title {
  color: var(--text-color);
  font-size: 32px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.message,
.chat-text {
  color: color-mix(in srgb, var(--text-color) 84%, var(--muted-color));
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.meter {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 3px solid var(--edge);
  background: color-mix(in srgb, var(--secondary) 42%, black);
}

.meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 72%);
  background: linear-gradient(90deg, var(--primary), var(--highlight));
}

.chat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 36px;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.chat-author {
  color: var(--highlight);
  font-weight: 950;
}

.pack-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  width: min(1500px, 100%);
  margin: 0 auto;
}

.pack-frame-stage,
.pack-widget-grid {
  position: relative;
  border: 3px solid color-mix(in srgb, var(--primary) 60%, black);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 18% 82%, rgba(255, 255, 255, 0.04)),
    #05070c;
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.75),
    0 0 34px color-mix(in srgb, var(--primary) 20%, transparent),
    0 18px 58px rgba(0, 0, 0, 0.48);
}

.pack-frame-stage {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  padding: 14px;
}

.pack-frame-stage iframe,
.pack-widget-grid iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

.pack-frame-stage iframe {
  height: 100%;
}

.pack-widget-grid {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.pack-widget-grid iframe:nth-child(1) {
  height: 448px;
}

.pack-widget-grid iframe:nth-child(2) { height: 600px; }
.pack-widget-grid iframe:nth-child(3) { height: 448px; }
.pack-widget-grid iframe:nth-child(4) { height: 384px; }
.pack-widget-grid iframe:nth-child(5) { height: 352px; }
.pack-widget-grid iframe:nth-child(6) { height: 352px; }

body[data-theme="cyber"][data-widget="pack-preview"] .pack-widget-grid iframe:nth-child(4) {
  height: 220px;
}

body[data-theme="cyber"][data-widget="pack-preview"] .pack-widget-grid iframe:nth-child(5) {
  height: 384px;
}

body[data-theme="cyber"][data-widget="pack-preview"] .pack-widget-grid iframe:nth-child(6) {
  height: 352px;
}

body[data-theme="cyber"] .widget-source {
  --bevel: color-mix(in srgb, var(--primary) 68%, white 6%);
  --hot-edge: color-mix(in srgb, var(--secondary) 76%, white 8%);
  --warning: color-mix(in srgb, var(--highlight) 82%, white 6%);
  --widget-border: clamp(34px, 8%, 72px);
  --widget-panel-inset: clamp(18px, 4%, 42px);
  height: var(--widget-height, auto);
}

body[data-theme="cyber"].obs .widget-source,
body[data-theme="cyber"].transparent .widget-source {
  width: 100vw;
  height: 100vh;
  max-width: none;
}

body[data-theme="cyber"].obs .widget-shell,
body[data-theme="cyber"].transparent .widget-shell {
  position: absolute;
  inset: 0;
  min-height: 0;
}

body[data-theme="cyber"] .widget-shell {
  border: 0;
  border-radius: 0;
  clip-path: none;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.72), rgba(2, 6, 17, 0.92)),
    radial-gradient(circle at 22% 0, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    #020611;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 0 52px rgba(0, 0, 0, 0.82),
    0 0 calc(28px * var(--glow)) color-mix(in srgb, var(--primary) 50%, transparent),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--secondary) 42%, transparent);
}

body[data-theme="cyber"] .widget-shell::before {
  inset: 0;
  z-index: 0;
  border: 0;
  background-image: var(--frame-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: grayscale(1) saturate(0) brightness(0.78) contrast(1.3);
  opacity: 1;
  padding: var(--widget-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  mix-blend-mode: normal;
}

body[data-theme="cyber"] .widget-shell::after {
  inset: 0;
  z-index: 1;
  height: auto;
  border: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--secondary) 88%, transparent) 0 9%,
      transparent 16% 34%,
      color-mix(in srgb, var(--primary) 78%, transparent) 42% 58%,
      transparent 66% 84%,
      color-mix(in srgb, var(--highlight) 86%, transparent) 91% 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--highlight) 82%, transparent) 0 11%,
      transparent 18% 72%,
      color-mix(in srgb, var(--secondary) 78%, transparent) 86% 100%),
    conic-gradient(from 45deg at 50% 50%,
      var(--primary) 0 18%,
      var(--secondary) 24% 42%,
      var(--highlight) 48% 56%,
      var(--primary) 64% 76%,
      var(--secondary) 84% 100%);
  opacity: 0.74;
  filter:
    drop-shadow(0 0 calc(14px * var(--glow)) var(--primary))
    drop-shadow(0 0 calc(10px * var(--glow)) var(--secondary));
  padding: var(--widget-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  mix-blend-mode: screen;
}

body[data-theme="cyber"] .widget-content {
  z-index: 2;
  overflow: hidden;
  min-height: calc(var(--widget-height, 146px) - (var(--widget-panel-inset) * 2));
  margin: var(--widget-panel-inset);
  padding: clamp(14px, 2.8%, 26px) clamp(18px, 3.4%, 34px);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0.54)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px),
    color-mix(in srgb, var(--panel) 80%, transparent);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    inset 0 0 28px rgba(0, 0, 0, 0.72),
    0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--primary) 20%, transparent);
  clip-path: polygon(14px 0, calc(100% - 24px) 0, 100% 18px, 100% calc(100% - 10px), calc(100% - 14px) 100%, 24px 100%, 0 calc(100% - 18px), 0 12px);
}

body[data-theme="cyber"] .widget-content > * {
  position: relative;
  z-index: 2;
}

body[data-theme="cyber"] .widget-content::before,
body[data-theme="cyber"] .widget-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body[data-theme="cyber"] .widget-content::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 34% 70%, color-mix(in srgb, var(--primary) 18%, transparent)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 11px);
  opacity: 0.7;
}

body[data-theme="cyber"] .widget-content::after {
  left: clamp(16px, 3%, 34px);
  right: clamp(16px, 3%, 34px);
  bottom: clamp(8px, 1.8%, 16px);
  z-index: 1;
  height: clamp(6px, 7%, 13px);
  background:
    linear-gradient(90deg,
      transparent 0 12px,
      var(--primary) 12px 28px,
      transparent 28px 42px,
      var(--highlight) 42px 58px,
      transparent 58px 72px,
      var(--secondary) 72px 92px,
      transparent 92px),
    repeating-linear-gradient(90deg, var(--primary) 0 22px, #05070c 22px 30px, var(--secondary) 30px 48px, #05070c 48px 56px, var(--highlight) 56px 64px, #05070c 64px 74px);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow:
    0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--primary) 58%, transparent),
    0 0 calc(9px * var(--glow)) color-mix(in srgb, var(--secondary) 48%, transparent);
  opacity: 0.95;
}

body[data-widget="event"] .widget-content::after,
body[data-widget="bar"] .widget-content::after,
body[data-widget="strip"] .widget-content::after {
  left: clamp(84px, 12%, 132px);
}

body[data-theme="cyber"] .badge {
  border: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  color: #05070c;
  background:
    linear-gradient(135deg, var(--highlight), var(--primary) 48%, var(--secondary));
  box-shadow:
    inset 0 0 0 4px #05070c,
    inset 0 0 0 7px rgba(255, 255, 255, 0.32),
    8px 8px 0 color-mix(in srgb, var(--secondary) 72%, black);
}

body[data-theme="cyber"] .title,
body[data-theme="cyber"] .value,
body[data-theme="cyber"] .chat-title {
  text-transform: uppercase;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.7),
    0 0 calc(13px * var(--glow)) color-mix(in srgb, var(--primary) 52%, transparent);
}

body[data-theme="cyber"] .meter {
  height: 22px;
  border: 4px solid #04060b;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--secondary) 64%, black);
}

body[data-theme="cyber"] .chat-row {
  border-bottom: 0;
  padding: 7px 9px 7px 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent 44%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 10px),
    rgba(255, 255, 255, 0.035);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

body[data-widget="goal"] .goal-layout {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}

body[data-widget="goal"] .goal-count {
  color: var(--highlight);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.72),
    0 0 calc(15px * var(--glow)) color-mix(in srgb, var(--highlight) 58%, transparent);
}

body[data-widget="goal"] .goal-meter {
  grid-column: 1 / -1;
  height: 24px;
}

body[data-widget="strip"] .strip-layout {
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px 30px 28px;
}

body[data-widget="strip"] .strip-copy {
  min-width: 0;
}

body[data-widget="strip"] .strip-title {
  color: var(--muted-color);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-widget="strip"] .strip-name {
  overflow: hidden;
  color: var(--text-color);
  font-size: 30px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.72),
    0 0 calc(13px * var(--glow)) color-mix(in srgb, var(--primary) 52%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-widget="strip"] .strip-value {
  color: var(--highlight);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.72),
    0 0 calc(15px * var(--glow)) color-mix(in srgb, var(--highlight) 58%, transparent);
}

body[data-theme="cyber"][data-widget="event"] .widget-source {
  aspect-ratio: 8 / 5;
}

body[data-theme="cyber"][data-widget="event"] .widget-shell {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body[data-theme="cyber"][data-widget="event"] .widget-shell::before,
body[data-theme="cyber"][data-widget="event"] .widget-shell::after {
  content: none;
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art {
  display: block;
  inset: 30px 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  filter: none;
  isolation: isolate;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art::before {
  display: block;
  inset: 0;
  padding: 0;
  border-radius: 0;
  z-index: 0;
  background-image: var(--frame-art-16x9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.32);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art::after {
  content: none;
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art .frame-tint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint-color);
  mix-blend-mode: screen;
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: var(--tint-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-mode: luminance;
  mask-image: var(--tint-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art .frame-tint-primary {
  --tint-color: var(--primary);
  --tint-mask: var(--frame-mask-primary-16x9);
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art .frame-tint-secondary {
  --tint-color: var(--secondary);
  --tint-mask: var(--frame-mask-secondary-16x9);
}

body[data-theme="cyber"][data-widget="event"] .widget-frame-art .frame-tint-highlight {
  --tint-color: var(--highlight);
  --tint-mask: var(--frame-mask-highlight-16x9);
}

body[data-theme="cyber"][data-widget="event"] .event-layout {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 37%;
  bottom: 33%;
  min-height: 0;
  margin: 0;
  grid-template-columns: 78px minmax(0, 1fr) minmax(132px, auto);
  gap: 20px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-theme="cyber"][data-widget="chat"] .widget-source,
body[data-theme="cyber"][data-widget="bar"] .widget-source,
body[data-theme="cyber"][data-widget="strip"] .widget-source {
  aspect-ratio: auto;
}

body[data-theme="cyber"][data-widget="chat"] .widget-shell,
body[data-theme="cyber"][data-widget="bar"] .widget-shell,
body[data-theme="cyber"][data-widget="strip"] .widget-shell {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body[data-theme="cyber"][data-widget="chat"] .widget-shell::before,
body[data-theme="cyber"][data-widget="chat"] .widget-shell::after,
body[data-theme="cyber"][data-widget="bar"] .widget-shell::before,
body[data-theme="cyber"][data-widget="bar"] .widget-shell::after,
body[data-theme="cyber"][data-widget="strip"] .widget-shell::before,
body[data-theme="cyber"][data-widget="strip"] .widget-shell::after {
  content: none;
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art {
  display: block;
  inset: 28px 0 36px;
  padding: 0;
  background-color: transparent;
  background-image: none;
  filter: none;
  isolation: isolate;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="bar"] .widget-frame-art {
  inset: 24px 0 32px;
}

body[data-theme="cyber"][data-widget="strip"] .widget-frame-art {
  inset: 22px 0 30px;
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art::before,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art::before,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art::before {
  display: block;
  inset: 0;
  padding: 0;
  border-radius: 0;
  z-index: 0;
  background-image: var(--frame-art-goal);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.32);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art::after,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art::after,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art::after {
  content: none;
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art .frame-tint,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art .frame-tint,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art .frame-tint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint-color);
  mix-blend-mode: screen;
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: var(--tint-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-mode: luminance;
  mask-image: var(--tint-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art .frame-tint-primary,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art .frame-tint-primary,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art .frame-tint-primary {
  --tint-color: var(--primary);
  --tint-mask: var(--frame-mask-primary-goal);
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art .frame-tint-secondary,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art .frame-tint-secondary,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art .frame-tint-secondary {
  --tint-color: var(--secondary);
  --tint-mask: var(--frame-mask-secondary-goal);
}

body[data-theme="cyber"][data-widget="chat"] .widget-frame-art .frame-tint-highlight,
body[data-theme="cyber"][data-widget="bar"] .widget-frame-art .frame-tint-highlight,
body[data-theme="cyber"][data-widget="strip"] .widget-frame-art .frame-tint-highlight {
  --tint-color: var(--highlight);
  --tint-mask: var(--frame-mask-highlight-goal);
  opacity: 0.86;
}

body[data-theme="cyber"][data-widget="chat"] .chat-layout,
body[data-theme="cyber"][data-widget="bar"] .bar-layout,
body[data-theme="cyber"][data-widget="strip"] .strip-layout {
  position: absolute;
  min-height: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-theme="cyber"][data-widget="chat"] .chat-layout {
  left: 13.5%;
  right: 13.5%;
  top: 32%;
  bottom: 17%;
  align-content: center;
  gap: 10px;
  padding: 0;
}

body[data-theme="cyber"][data-widget="bar"] .bar-layout {
  left: 13.5%;
  right: 13.5%;
  top: 29%;
  bottom: 24%;
  grid-template-columns: 84px minmax(0, 1fr) minmax(340px, 40%);
  gap: 22px;
  align-items: center;
  padding: 0;
}

body[data-theme="cyber"][data-widget="strip"] .strip-layout {
  left: 13.5%;
  right: 13.5%;
  top: 29%;
  bottom: 24%;
  grid-template-columns: 76px minmax(0, 1fr) minmax(172px, auto);
  gap: 20px;
  align-items: center;
  padding: 0;
}

body[data-theme="cyber"][data-widget="chat"] .chat-layout::before,
body[data-theme="cyber"][data-widget="bar"] .bar-layout::before,
body[data-theme="cyber"][data-widget="strip"] .strip-layout::before {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: calc(50% + 8px);
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 72%, transparent), color-mix(in srgb, var(--secondary) 58%, transparent), transparent);
  opacity: 0.8;
}

body[data-theme="cyber"][data-widget="chat"] .chat-layout::after,
body[data-theme="cyber"][data-widget="bar"] .bar-layout::after,
body[data-theme="cyber"][data-widget="strip"] .strip-layout::after {
  left: 0;
  right: 0;
  bottom: -18px;
  height: 8px;
}

body[data-theme="cyber"][data-widget="bar"] .bar-layout::after {
  left: 106px;
}

body[data-theme="cyber"][data-widget="strip"] .strip-layout::after {
  left: 96px;
}

body[data-theme="cyber"][data-widget="chat"] [data-role="chat-list"] {
  display: grid;
  gap: 7px;
}

body[data-theme="cyber"][data-widget="chat"] .chat-row {
  min-height: 33px;
  padding: 6px 10px 6px 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 30%, rgba(0, 0, 0, 0.7)), rgba(0, 0, 0, 0.22) 48%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 10px);
}

body[data-theme="cyber"][data-widget="chat"] .chat-title,
body[data-theme="cyber"][data-widget="bar"] .title,
body[data-theme="cyber"][data-widget="bar"] .value {
  font-size: clamp(30px, 3.4vw, 46px);
  white-space: nowrap;
}

body[data-theme="cyber"][data-widget="bar"] .bar-layout > div:nth-child(2) {
  min-width: 0;
}

body[data-theme="cyber"][data-widget="bar"] .title,
body[data-theme="cyber"][data-widget="bar"] .value,
body[data-theme="cyber"][data-widget="bar"] .message {
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-theme="cyber"][data-widget="bar"] .title {
  font-size: clamp(26px, 2.55vw, 34px);
}

body[data-theme="cyber"][data-widget="bar"] .value {
  font-size: clamp(24px, 2.35vw, 32px);
}

body[data-theme="cyber"][data-widget="chat"] .chat-text,
body[data-theme="cyber"][data-widget="chat"] .chat-meta {
  color: color-mix(in srgb, var(--text-color) 92%, var(--primary));
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.86),
    0 0 calc(9px * var(--glow)) color-mix(in srgb, var(--primary) 38%, transparent);
}

body[data-theme="cyber"][data-widget="chat"] .chat-meta {
  color: color-mix(in srgb, var(--primary) 76%, white);
}

body[data-theme="cyber"][data-widget="chat"] .eyebrow,
body[data-theme="cyber"][data-widget="bar"] .eyebrow,
body[data-theme="cyber"][data-widget="strip"] .strip-title {
  color: color-mix(in srgb, var(--primary) 78%, white);
  font-size: 14px;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.82),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

body[data-theme="cyber"][data-widget="chat"] .eyebrow {
  display: none;
}

.cyber-chat-source {
  width: min(calc(100vw - 48px), 560px, calc((100vh - 48px) * 11 / 16));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 11 / 16;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.58));
}

body.obs[data-theme="cyber"] .cyber-chat-source,
body.transparent[data-theme="cyber"] .cyber-chat-source {
  width: min(100vw, calc(100vh * 11 / 16));
  height: min(100vh, calc(100vw * 16 / 11));
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 11 / 16;
  filter: none;
}

.cyber-chat-dock {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 2.1vw, 14px) solid #030610;
  border-radius: clamp(14px, 2.8vw, 22px);
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18% 78%, rgba(0,0,0,0.6)),
    linear-gradient(135deg, #081224, #020611 58%, #101425);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.055),
    inset 0 0 0 clamp(8px, 1.8vw, 12px) rgba(0,0,0,0.56),
    inset 0 0 46px rgba(0,0,0,0.78),
    0 0 calc(28px * var(--glow)) color-mix(in srgb, var(--primary) 34%, transparent);
}

.cyber-chat-dock::before,
.cyber-chat-dock::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cyber-chat-dock::before {
  inset: 3.4%;
  border: 2px solid color-mix(in srgb, var(--secondary) 42%, transparent);
  border-radius: clamp(10px, 2.1vw, 17px);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.66),
    0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--secondary) 22%, transparent);
}

.cyber-chat-dock::after {
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 12%, rgba(255,255,255,0.11) 18% 26%, transparent 34% 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.42;
}

.cyber-chat-frame,
.cyber-chat-corner,
.cyber-chat-side-rail,
.cyber-chat-header,
.cyber-chat-screen,
.cyber-chat-grid,
.cyber-chat-status {
  position: absolute;
  pointer-events: none;
}

.cyber-chat-frame {
  inset: 0;
  z-index: 2;
}

.cyber-chat-corner {
  width: 21%;
  height: 13%;
  border-color: var(--highlight);
  filter:
    drop-shadow(0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--highlight) 55%, transparent))
    drop-shadow(0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--primary) 32%, transparent));
}

.cyber-chat-corner-tl {
  left: 4.2%;
  top: 3.9%;
  border-top: 4px solid;
  border-left: 4px solid;
}

.cyber-chat-corner-tr {
  right: 4.2%;
  top: 3.9%;
  border-top: 4px solid;
  border-right: 4px solid;
}

.cyber-chat-corner-bl {
  left: 4.2%;
  bottom: 3.9%;
  border-bottom: 4px solid;
  border-left: 4px solid;
}

.cyber-chat-corner-br {
  right: 4.2%;
  bottom: 3.9%;
  border-right: 4px solid;
  border-bottom: 4px solid;
}

.cyber-chat-side-rail {
  top: 17%;
  bottom: 13%;
  width: clamp(9px, 1.7vw, 13px);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      transparent 0 6%,
      var(--primary) 6% 19%,
      transparent 19% 26%,
      var(--secondary) 26% 74%,
      transparent 74% 81%,
      var(--primary) 81% 94%,
      transparent 94% 100%);
  box-shadow:
    0 0 calc(15px * var(--glow)) color-mix(in srgb, var(--secondary) 52%, transparent),
    inset 0 0 0 2px rgba(255,255,255,0.14);
}

.cyber-chat-side-rail-left { left: 6.4%; }
.cyber-chat-side-rail-right { right: 6.4%; }

.cyber-chat-header {
  z-index: 5;
  top: 6%;
  left: 13%;
  right: 13%;
  min-height: 12%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border: 3px solid #030610;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 58%, #030610), rgba(3,6,16,0.92) 44% 70%, color-mix(in srgb, var(--secondary) 42%, #030610));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 5px 0 rgba(0,0,0,0.52),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--primary) 30%, transparent);
}

.cyber-chat-header span,
.cyber-chat-header strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cyber-chat-header span {
  color: color-mix(in srgb, var(--primary) 72%, white);
  font-size: clamp(10px, 1.9vw, 12px);
  font-weight: 950;
  letter-spacing: 0.14em;
}

.cyber-chat-header strong {
  color: var(--text-color);
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    3px 3px 0 rgba(0,0,0,0.72),
    0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--primary) 55%, transparent);
}

.cyber-chat-header i {
  width: clamp(36px, 7vw, 48px);
  aspect-ratio: 1;
  border: 3px solid #030610;
  border-radius: 9px;
  background:
    linear-gradient(var(--highlight) 0 0) 42% 12% / 16% 30% no-repeat,
    linear-gradient(var(--highlight) 0 0) 28% 42% / 44% 16% no-repeat,
    linear-gradient(var(--highlight) 0 0) 16% 58% / 68% 16% no-repeat,
    linear-gradient(var(--highlight) 0 0) 0 74% / 100% 14% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--secondary) 64%, #030610), color-mix(in srgb, var(--primary) 48%, #030610));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--highlight) 48%, transparent);
}

.cyber-chat-screen {
  z-index: 3;
  left: 12%;
  right: 12%;
  top: 21%;
  bottom: 12%;
  overflow: hidden;
  border: clamp(6px, 1.6vw, 10px) solid #030610;
  border-radius: clamp(12px, 2.4vw, 20px);
  background:
    radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--primary) 14%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20% 80%, rgba(0,0,0,0.18)),
    linear-gradient(180deg, #061225, #020611 74%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.045),
    inset 0 0 38px rgba(0,0,0,0.82),
    0 0 0 clamp(5px, 1.2vw, 8px) rgba(3,6,16,0.82),
    0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--secondary) 20%, transparent);
}

.cyber-chat-grid {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(color-mix(in srgb, var(--primary) 16%, transparent) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 13%, transparent) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(circle at 16% 16%, rgba(255,255,255,0.76) 0 1px, transparent 2px) 0 0 / 44px 44px,
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--highlight) 62%, white 10%) 0 1px, transparent 2px) 0 0 / 60px 60px;
  opacity: 0.58;
}

.cyber-chat-list {
  position: absolute;
  z-index: 2;
  inset: 5.2%;
  display: grid;
  grid-auto-rows: minmax(54px, 1fr);
  gap: clamp(8px, 1.45vw, 12px);
  align-content: stretch;
  pointer-events: none;
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-row {
  min-height: clamp(46px, 7.3vw, 60px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid color-mix(in srgb, var(--primary) 44%, #030610);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 24%, rgba(0,0,0,0.74)), rgba(2,6,17,0.82) 48%, color-mix(in srgb, var(--secondary) 16%, rgba(0,0,0,0.64))),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 11px);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    4px 4px 0 rgba(0,0,0,0.38);
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-row:nth-child(2n) {
  border-color: color-mix(in srgb, var(--secondary) 42%, #030610);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 20%, rgba(0,0,0,0.76)), rgba(2,6,17,0.84) 50%, color-mix(in srgb, var(--primary) 14%, rgba(0,0,0,0.66))),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 11px);
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-row > div:first-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text-color);
  font-size: clamp(11px, 2.25vw, 14px);
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-author {
  color: var(--highlight);
  font-weight: 950;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.82),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--highlight) 44%, transparent);
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-text {
  color: color-mix(in srgb, var(--text-color) 94%, var(--primary));
}

body[data-theme="cyber"][data-widget="chat"] .cyber-chat-dock .chat-meta {
  min-width: 46px;
  padding: 5px 7px;
  border: 2px solid #030610;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 44%),
    linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--secondary) 70%, var(--primary)));
  color: #020611;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  box-shadow:
    2px 2px 0 rgba(0,0,0,0.48),
    0 0 calc(9px * var(--glow)) color-mix(in srgb, var(--primary) 32%, transparent);
}

.cyber-chat-status {
  z-index: 5;
  left: 13%;
  right: 13%;
  bottom: 5.5%;
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr;
  gap: 10px;
}

.cyber-chat-status span {
  height: clamp(7px, 1.4vw, 10px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--primary), var(--highlight), var(--secondary));
  box-shadow:
    0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent),
    inset 0 0 0 2px rgba(255,255,255,0.12);
}

body[data-theme="cyber"][data-widget="bar"] .message {
  max-width: 600px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text-color) 92%, var(--primary));
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.86),
    0 0 calc(9px * var(--glow)) color-mix(in srgb, var(--primary) 38%, transparent);
}

body[data-theme="cyber"][data-widget="bar"] .value,
body[data-theme="cyber"][data-widget="strip"] .strip-value {
  color: var(--highlight);
}

body[data-theme="cyber"][data-widget="bar"] .badge,
body[data-theme="cyber"][data-widget="strip"] .badge {
  width: 70px;
  height: 70px;
}

body[data-theme="cyber"][data-widget="event"] .event-layout::before {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  top: 50%;
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 70%, transparent), color-mix(in srgb, var(--secondary) 55%, transparent), transparent);
  opacity: 0.8;
}

body[data-theme="cyber"][data-widget="event"] .event-layout::after {
  left: calc(78px + 20px);
  right: 0;
  bottom: -18px;
  height: 8px;
}

body[data-theme="cyber"][data-widget="event"] .badge {
  width: 68px;
  height: 68px;
}

body[data-theme="cyber"][data-widget="event"] .title,
body[data-theme="cyber"][data-widget="event"] .value {
  font-size: clamp(24px, 3vw, 34px);
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.9),
    -1px -1px 0 rgba(0, 0, 0, 0.72),
    0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--primary) 58%, transparent);
}

body[data-theme="cyber"][data-widget="event"] .message {
  max-width: 430px;
  color: color-mix(in srgb, var(--text-color) 90%, var(--primary));
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.86),
    0 0 calc(11px * var(--glow)) color-mix(in srgb, var(--primary) 42%, transparent);
}

body[data-theme="cyber"][data-widget="event"] .eyebrow {
  color: color-mix(in srgb, var(--primary) 78%, white);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.82),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

body[data-theme="cyber"][data-widget="goal"] .widget-source {
  aspect-ratio: 13 / 3;
}

body[data-theme="cyber"][data-widget="goal"] .widget-shell {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body[data-theme="cyber"][data-widget="goal"] .widget-shell::before,
body[data-theme="cyber"][data-widget="goal"] .widget-shell::after {
  content: none;
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art {
  display: block;
  inset: 28px 0 36px;
  padding: 0;
  background-color: transparent;
  background-image: none;
  filter: none;
  isolation: isolate;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art::before {
  display: block;
  inset: 0;
  padding: 0;
  border-radius: 0;
  z-index: 0;
  background-image: var(--frame-art-goal);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.32);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art::after {
  content: none;
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art .frame-tint {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint-color);
  mix-blend-mode: screen;
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: var(--tint-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-mode: luminance;
  mask-image: var(--tint-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art .frame-tint-primary {
  --tint-color: var(--primary);
  --tint-mask: var(--frame-mask-primary-goal);
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art .frame-tint-secondary {
  --tint-color: var(--secondary);
  --tint-mask: var(--frame-mask-secondary-goal);
}

body[data-theme="cyber"][data-widget="goal"] .widget-frame-art .frame-tint-highlight {
  --tint-color: var(--highlight);
  --tint-mask: var(--frame-mask-highlight-goal);
}

body[data-theme="cyber"][data-widget="goal"] .goal-layout {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 29.5%;
  bottom: 23.5%;
  min-height: 0;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 38px;
  align-content: center;
  align-items: end;
  gap: 18px 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-theme="cyber"][data-widget="goal"] .goal-layout::before {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  top: calc(50% + 12px);
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 72%, transparent), color-mix(in srgb, var(--secondary) 58%, transparent), transparent);
  opacity: 0.8;
}

body[data-theme="cyber"][data-widget="goal"] .goal-layout::after {
  left: 0;
  right: 0;
  bottom: -22px;
  height: 9px;
}

body[data-theme="cyber"][data-widget="goal"] .goal-count {
  color: var(--highlight);
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: 0;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.9),
    -1px -1px 0 rgba(0, 0, 0, 0.7),
    0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--highlight) 62%, transparent);
}

body[data-theme="cyber"][data-widget="goal"] .goal-meter {
  grid-column: 1 / -1;
  height: 38px;
}

body[data-theme="cyber"][data-widget="goal"] .title {
  font-size: clamp(38px, 4vw, 58px);
  white-space: nowrap;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.9),
    -1px -1px 0 rgba(0, 0, 0, 0.72),
    0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--primary) 58%, transparent);
}

body[data-theme="cyber"][data-widget="goal"] .eyebrow {
  color: color-mix(in srgb, var(--primary) 78%, white);
  font-size: 15px;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.82),
    0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

body[data-theme="broadcast-news"] {
  --primary: #e71921;
  --secondary: #004f9f;
  --highlight: #ffffff;
  --text-color: #f8fbff;
  --muted-color: #b9c7d8;
  --panel: #07101b;
  --panel-2: #101b2b;
  --edge: #02040a;
  --demo-bg: #070910;
  background:
    radial-gradient(circle at 12% 0, rgba(231, 25, 33, 0.14), transparent 34%),
    radial-gradient(circle at 88% 0, rgba(0, 79, 159, 0.18), transparent 36%),
    #070910;
}

body[data-theme="broadcast-news"][data-widget="pack-preview"] {
  background:
    linear-gradient(135deg, rgba(231, 25, 33, 0.16), transparent 30%),
    radial-gradient(circle at 78% 10%, rgba(0, 79, 159, 0.2), transparent 34%),
    #070910;
}

body[data-theme="broadcast-news"] .pack-frame-stage {
  width: min(1180px, 100%);
  border-color: color-mix(in srgb, var(--primary) 76%, black);
}

.broadcast-preview {
  place-items: center;
}

.broadcast-preview .pack-widget-grid {
  grid-template-columns: minmax(300px, 0.85fr) minmax(320px, 1fr);
  width: min(1120px, 100%);
  border-color: color-mix(in srgb, var(--secondary) 70%, black);
}

.broadcast-preview .pack-widget-grid iframe:nth-child(1) {
  height: auto;
  align-self: start;
  aspect-ratio: 4 / 1;
}

.broadcast-preview .pack-widget-grid iframe:nth-child(2) {
  justify-self: center;
  width: min(390px, 100%);
  height: auto;
  grid-row: span 3;
  aspect-ratio: 11 / 16;
}

.broadcast-preview .pack-widget-grid iframe:nth-child(3) {
  height: auto;
  aspect-ratio: 16 / 9;
}

.broadcast-preview .pack-widget-grid iframe:nth-child(4) {
  height: auto;
  aspect-ratio: 4 / 1;
}

@media (max-width: 860px) {
  .broadcast-preview .pack-widget-grid {
    grid-template-columns: 1fr;
  }

  .broadcast-preview .pack-widget-grid iframe:nth-child(2) {
    grid-row: auto;
  }
}

.broadcast-frame-source,
.broadcast-event-source {
  width: min(calc(100vw - 48px), 1280px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 16 / 9;
}

body.obs[data-theme="broadcast-news"] .broadcast-frame-source,
body.transparent[data-theme="broadcast-news"] .broadcast-frame-source,
body.obs[data-theme="broadcast-news"] .broadcast-event-source,
body.transparent[data-theme="broadcast-news"] .broadcast-event-source {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16 / 9;
}

.broadcast-frame,
.broadcast-event-card,
.broadcast-chat-panel,
.broadcast-goal-card,
.broadcast-text-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--text-color);
  font-family: Inter, Arial, system-ui, sans-serif;
}

.broadcast-frame {
  background:
    linear-gradient(90deg, rgba(231,25,33,0.12), transparent 18% 82%, rgba(0,79,159,0.16)),
    transparent;
}

.broadcast-frame::before,
.broadcast-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.broadcast-frame::before {
  inset: 0;
  border: clamp(10px, 1.2vw, 18px) solid rgba(255,255,255,0.9);
  box-shadow:
    inset 0 0 0 clamp(5px, 0.6vw, 8px) rgba(2,4,10,0.88),
    inset 0 0 0 clamp(11px, 1.3vw, 18px) color-mix(in srgb, var(--secondary) 58%, transparent),
    0 0 calc(24px * var(--glow)) color-mix(in srgb, var(--secondary) 30%, transparent);
}

.broadcast-frame::after {
  left: 0;
  right: 0;
  top: 0;
  height: 12%;
  background:
    linear-gradient(90deg, var(--primary) 0 18%, #ffffff 18% 20%, var(--secondary) 20% 100%);
  opacity: 0.96;
}

.broadcast-frame-top,
.broadcast-frame-lower,
.broadcast-frame-ticker,
.broadcast-frame-center {
  position: absolute;
  pointer-events: none;
}

.broadcast-frame-top {
  z-index: 3;
  left: 3%;
  right: 3%;
  top: 2.2%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 7.6%;
}

.broadcast-frame-top span,
.broadcast-live-bug {
  display: grid;
  place-items: center;
  min-width: clamp(72px, 7.2vw, 112px);
  height: 100%;
  padding: 0 14px;
  background: var(--primary);
  color: white;
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.36);
}

.broadcast-frame-top strong {
  overflow: hidden;
  color: white;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-frame-center {
  z-index: 2;
  left: 3.6%;
  right: 3.6%;
  top: 14%;
  bottom: 19%;
  border: 2px solid rgba(255,255,255,0.5);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), transparent 18% 82%, rgba(255,255,255,0.04));
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.62),
    inset 0 0 36px rgba(0,0,0,0.34);
}

.broadcast-frame-lower {
  z-index: 4;
  left: 3.4%;
  right: 3.4%;
  bottom: 8.7%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 9.8%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98), rgba(238,244,255,0.96));
  box-shadow:
    0 7px 0 rgba(0,0,0,0.34),
    0 0 calc(16px * var(--glow)) rgba(255,255,255,0.2);
}

.broadcast-frame-lower span,
.broadcast-frame-lower b {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 clamp(16px, 2vw, 28px);
  color: #07101b;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-frame-lower b {
  background: var(--primary);
  color: white;
  letter-spacing: 0.02em;
}

.broadcast-frame-ticker {
  z-index: 4;
  left: 3.4%;
  right: 3.4%;
  bottom: 3.2%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 4.6%;
  background: #05070d;
}

.broadcast-frame-ticker span {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.86);
  font-size: clamp(9px, 1vw, 14px);
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-event-card {
  border: clamp(8px, 1.2vw, 14px) solid #05070d;
  background:
    linear-gradient(90deg, var(--primary) 0 22%, #ffffff 22% 24%, color-mix(in srgb, var(--secondary) 92%, #05101f) 24% 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.12),
    inset 0 0 42px rgba(0,0,0,0.62),
    0 18px 40px rgba(0,0,0,0.5);
}

.broadcast-event-card::before,
.broadcast-chat-panel::before,
.broadcast-goal-card::before,
.broadcast-text-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, transparent 0 14%, rgba(255,255,255,0.16) 22% 28%, transparent 36% 100%);
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
}

.broadcast-event-card .broadcast-live-bug {
  position: absolute;
  left: 4.2%;
  top: 12%;
  width: 15%;
  height: 22%;
  min-width: 0;
  font-size: clamp(18px, 2.2vw, 32px);
}

.broadcast-event-copy {
  position: absolute;
  left: 25.5%;
  right: 19%;
  top: 18%;
  bottom: 27%;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.broadcast-event-copy span,
.broadcast-goal-copy span,
.broadcast-chat-panel header span,
.broadcast-text-card .basic-text-copy span {
  color: color-mix(in srgb, var(--highlight) 78%, #dce8ff);
  font-size: clamp(11px, 1.3vw, 16px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.broadcast-event-copy strong {
  overflow: hidden;
  color: white;
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 950;
  line-height: 0.98;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.38);
}

.broadcast-event-copy p {
  overflow: hidden;
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-event-value {
  position: absolute;
  right: 4.2%;
  top: 28%;
  display: grid;
  place-items: center;
  min-width: 12%;
  height: 26%;
  padding: 0 18px;
  background: white;
  color: #07101b;
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 950;
  line-height: 1;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.38);
}

.broadcast-event-meter {
  position: absolute;
  left: 25.5%;
  right: 4.2%;
  bottom: 13%;
  height: clamp(16px, 2vw, 26px);
  border: 0;
  background: rgba(255,255,255,0.2);
}

body[data-theme="broadcast-news"] .meter::before {
  background: linear-gradient(90deg, var(--primary), #ffffff 52%, var(--secondary));
}

.broadcast-chat-source {
  width: min(calc(100vw - 48px), 560px, calc((100vh - 48px) * 11 / 16));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 11 / 16;
}

body.obs[data-theme="broadcast-news"] .broadcast-chat-source,
body.transparent[data-theme="broadcast-news"] .broadcast-chat-source {
  width: min(100vw, calc(100vh * 11 / 16));
  height: min(100vh, calc(100vw * 16 / 11));
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 11 / 16;
}

.broadcast-chat-panel {
  border: clamp(8px, 2vw, 14px) solid #05070d;
  border-radius: clamp(8px, 2vw, 16px);
  background:
    linear-gradient(90deg, var(--primary) 0 6%, transparent 6% 94%, var(--secondary) 94% 100%),
    linear-gradient(180deg, #0f1726, #05070d);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.08),
    inset 0 0 40px rgba(0,0,0,0.68),
    0 18px 40px rgba(0,0,0,0.5);
}

.broadcast-chat-panel header {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  top: 5.5%;
  display: grid;
  align-content: center;
  min-height: 12%;
  padding: 10px 18px;
  background:
    linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow: 5px 5px 0 rgba(0,0,0,0.38);
}

.broadcast-chat-panel header strong {
  overflow: hidden;
  color: white;
  font-size: clamp(22px, 4.6vw, 34px);
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-chat-screen {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: 10%;
  top: 21%;
  bottom: 12%;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.88);
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 32px 100%,
    #07101b;
  box-shadow: inset 0 0 28px rgba(0,0,0,0.72);
}

body[data-theme="broadcast-news"][data-widget="chat"] [data-role="chat-list"] {
  position: absolute;
  inset: 4.8%;
  display: grid;
  grid-auto-rows: minmax(54px, 1fr);
  gap: clamp(8px, 1.35vw, 12px);
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-row {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96), rgba(236,243,255,0.92));
  color: #07101b;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.34);
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-row:nth-child(2n) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 92%, #06101f), color-mix(in srgb, var(--secondary) 64%, #06101f));
  color: white;
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-row > div:first-child {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(12px, 2.35vw, 15px);
  font-weight: 850;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-author {
  color: var(--primary);
  font-weight: 950;
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-row:nth-child(2n) .chat-author {
  color: white;
}

body[data-theme="broadcast-news"][data-widget="chat"] .chat-meta {
  min-width: 48px;
  padding: 5px 8px;
  background: var(--primary);
  color: white;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}


.themed-chat-source {
  width: min(calc(100vw - 48px), 560px, calc((100vh - 48px) * 11 / 16));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 11 / 16;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,0.58));
}

body.obs .themed-chat-source,
body.transparent .themed-chat-source {
  width: min(100vw, calc(100vh * 11 / 16));
  height: min(100vh, calc(100vw * 16 / 11));
  max-width: 100vw;
  max-height: 100vh;
  filter: none;
}

.themed-chat-panel,
.themed-text-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 2.1vw, 14px) solid #020305;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18% 78%, rgba(0,0,0,0.6)),
    linear-gradient(135deg, var(--panel), var(--edge) 58%, var(--panel-2));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.055),
    inset 0 0 0 clamp(8px, 1.8vw, 12px) rgba(0,0,0,0.56),
    inset 0 0 46px rgba(0,0,0,0.78),
    0 0 calc(28px * var(--glow)) color-mix(in srgb, var(--primary) 34%, transparent);
}

.themed-chat-panel::before,
.themed-text-box::before {
  content: "";
  position: absolute;
  inset: 3.4%;
  border: 2px solid color-mix(in srgb, var(--secondary) 42%, transparent);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.66), 0 0 calc(16px * var(--glow)) color-mix(in srgb, var(--secondary) 22%, transparent);
  pointer-events: none;
}

.themed-chat-panel::after,
.themed-text-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-grid), linear-gradient(112deg, transparent 0 12%, rgba(255,255,255,0.11) 18% 26%, transparent 34% 100%);
  background-size: 34px 34px, 34px 34px, auto;
  mix-blend-mode: screen;
  opacity: 0.42;
  pointer-events: none;
}

.themed-chat-panel header {
  position: absolute;
  z-index: 5;
  top: 6%;
  left: 13%;
  right: 13%;
  min-height: 12%;
  display: grid;
  align-content: center;
  padding: 10px 16px;
  border: 3px solid #020305;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 58%, #020305), rgba(2,3,5,0.92) 46% 68%, color-mix(in srgb, var(--secondary) 48%, #020305));
  box-shadow: 0 5px 0 rgba(0,0,0,0.52), 0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--primary) 30%, transparent);
}

.themed-chat-panel header span,
.themed-chat-panel header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.themed-chat-panel header span {
  color: color-mix(in srgb, var(--primary) 76%, white);
  font-size: clamp(10px, 1.9vw, 12px);
  font-weight: 950;
  letter-spacing: 0.14em;
}

.themed-chat-panel header strong {
  color: var(--text-color);
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 950;
  line-height: 1;
}

.themed-chat-screen {
  position: absolute;
  z-index: 3;
  left: 12%;
  right: 12%;
  top: 21%;
  bottom: 12%;
  overflow: hidden;
  border: clamp(6px, 1.6vw, 10px) solid #020305;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), transparent 20% 80%, rgba(0,0,0,0.18)), color-mix(in srgb, var(--panel) 88%, black);
}

.themed-chat-grid {
  position: absolute;
  inset: 0;
  background: var(--theme-grid);
  background-size: 28px 28px, 28px 28px;
  opacity: 0.58;
}

.themed-chat-screen [data-role="chat-list"] {
  position: absolute;
  z-index: 2;
  inset: 5.2%;
  display: grid;
  grid-auto-rows: minmax(54px, 1fr);
  gap: clamp(8px, 1.45vw, 12px);
}

body[data-widget="chat"] .themed-chat-panel .chat-row {
  min-height: clamp(46px, 7.3vw, 60px);
  padding: 10px 12px;
  border: 2px solid color-mix(in srgb, var(--primary) 44%, #020305);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 24%, rgba(0,0,0,0.74)), rgba(2,6,17,0.82) 48%, color-mix(in srgb, var(--secondary) 16%, rgba(0,0,0,0.64)));
  box-shadow: 4px 4px 0 rgba(0,0,0,0.38);
}

body[data-widget="chat"] .themed-chat-panel .chat-author {
  color: var(--highlight);
  font-weight: 950;
}

body[data-widget="chat"] .themed-chat-panel .chat-meta {
  min-width: 46px;
  padding: 5px 7px;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--secondary) 70%, var(--primary)));
  color: var(--edge);
  font-size: 9px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.themed-chat-panel footer {
  position: absolute;
  z-index: 5;
  left: 13%;
  right: 13%;
  bottom: 5.5%;
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr;
  gap: 10px;
}

.themed-chat-panel footer span {
  height: clamp(7px, 1.4vw, 10px);
  background: linear-gradient(90deg, var(--primary), var(--highlight), var(--secondary));
  box-shadow: 0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--primary) 46%, transparent);
}

.themed-text-source {
  width: min(calc(100vw - 48px), 780px, calc((100vh - 48px) * 4));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 4 / 1;
}

body.obs .themed-text-source,
body.transparent .themed-text-source {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: auto;
}

.themed-text-box .basic-text-copy {
  inset: 21% 10%;
  z-index: 3;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
}

.themed-text-box .basic-text-copy span {
  color: color-mix(in srgb, var(--primary) 78%, white);
}

.themed-text-box .basic-text-copy strong,
.themed-text-box .basic-text-copy p {
  color: var(--text-color);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.72);
}

.themed-text-box .basic-text-copy b {
  min-width: clamp(70px, 11vw, 104px);
  padding: 10px 12px;
  border: 2px solid #020305;
  background: linear-gradient(180deg, var(--highlight), color-mix(in srgb, var(--secondary) 54%, var(--highlight)));
  color: var(--edge);
  text-align: center;
}

.broadcast-chat-panel footer {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 5%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  height: 4.6%;
}

.broadcast-chat-panel footer span {
  display: grid;
  place-items: center;
  background: #05070d;
  color: rgba(255,255,255,0.86);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.broadcast-goal-source,
.broadcast-text-source {
  width: min(calc(100vw - 48px), 780px, calc((100vh - 48px) * 4));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  aspect-ratio: 4 / 1;
}

body.obs[data-theme="broadcast-news"] .broadcast-goal-source,
body.transparent[data-theme="broadcast-news"] .broadcast-goal-source,
body.obs[data-theme="broadcast-news"] .broadcast-text-source,
body.transparent[data-theme="broadcast-news"] .broadcast-text-source {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: auto;
}

.broadcast-goal-card,
.broadcast-text-card {
  border: clamp(7px, 1.4vw, 12px) solid #05070d;
  background:
    linear-gradient(90deg, var(--primary) 0 8%, transparent 8% 92%, var(--secondary) 92% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%),
    linear-gradient(90deg, #f8fbff 0 30%, #101a2b 30% 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.08),
    inset 0 0 30px rgba(0,0,0,0.42),
    0 16px 36px rgba(0,0,0,0.48);
}

.broadcast-goal-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto;
  grid-template-rows: 1fr clamp(24px, 18%, 34px);
  align-items: center;
  gap: 12px 22px;
  padding: clamp(22px, 4%, 34px) clamp(54px, 9%, 78px);
}

.broadcast-goal-copy {
  min-width: 0;
}

.broadcast-goal-copy strong {
  display: block;
  overflow: hidden;
  color: #07101b;
  font-size: clamp(24px, 4.4vw, 42px);
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-goal-count {
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  font-size: clamp(24px, 4.4vw, 42px);
  font-weight: 950;
  line-height: 1;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.34);
}

.broadcast-goal-meter {
  grid-column: 1 / -1;
  height: 100%;
  border: 0;
  background: rgba(7,16,27,0.28);
}

.broadcast-text-card .basic-text-copy {
  inset: 23% 10%;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.2fr) auto;
}

.broadcast-text-card .basic-text-copy span {
  color: var(--primary);
}

.broadcast-text-card .basic-text-copy strong {
  color: #07101b;
  font-size: clamp(24px, 4.2vw, 40px);
  text-shadow: none;
}

.broadcast-text-card .basic-text-copy p {
  color: white;
  font-size: clamp(15px, 2.4vw, 22px);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.34);
}

.broadcast-text-card .basic-text-copy b {
  min-width: clamp(70px, 10vw, 100px);
  padding: 10px 14px;
  background: var(--primary);
  color: white;
  text-align: center;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.34);
}

@media (max-width: 720px) {
  :root { --thickness: 92px; }

  body { padding: 14px; }

  body[data-widget="pack-preview"] {
    padding: 14px;
  }

  .pack-preview {
    grid-template-columns: 1fr;
  }

  .event-layout,
  .bar-layout {
    grid-template-columns: 64px 1fr;
  }

  .badge {
    width: 52px;
    height: 52px;
  }

  .title,
  .value,
  .chat-title {
    font-size: 24px;
  }
}