/* PlutoTV skin. Loaded AFTER style.css, so these rules override the Star Trek look.
   Brand: Plutonium #FFF200 / Deep-Space #0D0D0D / Stardust #FAEFED, PlutoTV Sans. */

@font-face { font-family: "Pluto TV Sans"; font-weight: 400; font-display: swap;
  src: url("fonts/PlutoTVSansV10-Regular.otf") format("opentype"); }
@font-face { font-family: "Pluto TV Sans"; font-weight: 600; font-display: swap;
  src: url("fonts/PlutoTVSansV10-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Pluto TV Sans"; font-weight: 700; font-display: swap;
  src: url("fonts/PlutoTVSansV10-Bold.otf") format("opentype"); }
@font-face { font-family: "Pluto TV Sans"; font-weight: 900; font-display: swap;
  src: url("fonts/PlutoTVSansV10-Black.otf") format("opentype"); }

:root {
  --bg: #0D0D0D;
  --fg: #FAEFED;
  --accent: #FFF200;
  --muted: #a59e9b;
  --beam: 255, 176, 64;          /* the trailer's warm gold, for the beam motif only */
}

html, body { font-family: "Pluto TV Sans", -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, sans-serif; }

h2 { font-weight: 900; font-size: 1.6rem; line-height: 1.2; color: var(--fg); }
p { font-weight: 400; }

/* --- scenes: the gold beam artwork (client-supplied), anchored to the top so the
   shafts fall behind the logo; darkened toward the bottom for the small print --- */
.scene { background:
    linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.15) 55%, rgba(13, 13, 13, 0.6) 100%),
    url("bg_beam.jpg") center top / cover no-repeat var(--bg); }

.kicker { margin: 0 0 -4px; color: var(--fg); font-weight: 700; font-size: 2.1rem;
  line-height: 1; }
.brand { width: min(55%, 248px); margin: 0 0 4px 5%;      /* the "tv" hangs right: nudge to centre the disc */
  filter: none; }             /* no glow: it bleeds into the knocked-out letters */
.brand-sm { width: min(52%, 230px); margin-bottom: 44px; }      /* Done: air between the logo and the check */
.tagline { color: var(--fg); font-size: 1.15rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; text-shadow: none; }
.fine { color: var(--muted); }

/* --- buttons: flat Plutonium pill, Deep-Space text --- */
.energize { background: var(--accent); padding: 18px 46px;
  box-shadow: 0 0 0 0 rgba(255, 242, 0, 0.5);
  animation: pluto-pulse 2.2s ease-out infinite; }
.energize span { color: #0D0D0D; font-weight: 900; font-size: 1.3rem;
  letter-spacing: 0; text-transform: none; }
.energize::after { display: none; }
@keyframes pluto-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 242, 0, 0.45); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(255, 242, 0, 0); } }
.primary, .btn-gold { background: var(--accent); color: #0D0D0D; font-weight: 900;
  box-shadow: none; }

input[type="email"], input[type="file"] { border: 1.5px solid #3a3735;
  background: #1a1918; color: var(--fg); font-family: inherit; }
input[type="email"]:focus { outline: none; border-color: var(--accent); }

/* --- capture --- */
#guide .silhouette { stroke: rgba(255, 242, 0, 0.9); }
/* off-white, not yellow: the guide sits over the set's yellow logo and would vanish */
.guide-oval { border-color: var(--fg) !important;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); }
.capture-hint { font-weight: 700; }
.capture-hint .hint-important { color: var(--accent); font-weight: 900; letter-spacing: 0.06em; }
.tap-start span { font-weight: 900; letter-spacing: 0.08em; color: rgba(250, 239, 237, 0.7); }
.countdown.getready .cd-num { font-family: "Pluto TV Sans", sans-serif; font-weight: 900;
  font-size: 7rem; letter-spacing: 0; color: var(--accent);
  text-shadow: 0 0 26px rgba(255, 242, 0, 0.45), 0 2px 10px #000; }
.countdown.getready .cd-cap { font-weight: 700; }

/* --- upload + done --- */
.bar { background: #262422; }
.bar-fill { background: var(--accent); box-shadow: none; }
.spinner { border-color: #2b2927; border-top-color: var(--accent); filter: none; }
.check { background: var(--accent); color: #0D0D0D; font-weight: 900; box-shadow: none; }

/* the consent line on the Start screen: smaller than the other small print */
[data-copy="consent"] { font-size: 0.66rem; line-height: 1.45; max-width: 300px; }