/* main.css
   Layout, chrome, palette, and the --fs sizing system, reworked to match
   symphonyinacid.net 1:1: a WHITE page, BLACK Helvetica ink, acid color
   blocks. Effects (glitch/decor/borders/layout/selected/scene) live in
   effects.css.

   Source of the design parameters: the site renders live HTML typography on a
   white ground; every <font> carries a small box padding so that when a word
   is flooded with a palette color it reads as a tight, hard-edged block. */

:root {
  /* --fs is set by JS on resize: sqrt(vw*vh)*1.3 (vw = innerWidth/100). All
     type derives from it; the display base is calc(var(--fs) * 5.5), exactly
     like the original. --scene-scale lets a scene nudge that base. */
  --fs: 18px;
  --scene-scale: 1;

  /* Display font. Helvetica/Arial first (used if the machine has them), then
     Arimo (Apache-2.0 Helvetica metric clone, loaded from Google Fonts) so the
     metrics are correct on Linux/headless. Drop in a real Helvetica @font-face
     and re-point this variable to use it. */
  --font-display: "Helvetica Neue", Helvetica, Arial, "Arimo", "Liberation Sans", sans-serif;
  /* Symbol font for the glitch="5" / decor="3" "dingbat" look. Wingdings is a
     licensed Microsoft font and is NOT bundled; it is named so Windows machines
     use it, with open fallbacks. Drop in a real woff2 and add it here. */
  --font-symbol: "Wingdings", "Webdings", "Noto Sans Symbols 2", monospace;

  /* The acid palette: bright accents over greys, on white. Matches the
     site's getPalette() exactly. */
  --c-cyan:   #00ffff;
  --c-orange: #ff3300;
  --c-yellow: #ffff00;
  --c-red:    #ff0000;
  --c-blue:   #0000ff;
  --g1: #cccccc; --g2: #aaaaaa; --g3: #999999; --g4: #777777; --g5: #444444; --g6: #222222;

  --bg: #ffffff;   /* page is WHITE */
  --fg: #000000;   /* ink is BLACK */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;            /* the original is NOT bold — the weight comes
                                  from the color blocks, not the glyphs */
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: #010101; color: #fff; }
::-moz-selection { background: #010101; color: #fff; }

body.hide-cursor, body.hide-cursor * { cursor: none !important; }

/* --- Stage / artwork ----------------------------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  display: table;          /* the site uses display:table on <main> so scenes
                              can vertical-align their cell */
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* The typography block. Default scene: the type fills the stage as wrapping
   lines of huge black Helvetica, with each word a paddable color box. The base
   size is calc(var(--fs) * 5.5), exactly like symphonyinacid.net; scenes scale
   it via --scene-scale (see effects.css). */
#container {
  display: block;
  width: 100%;
  min-height: 100vh;          /* the ground (page colour / dark finale / random
                                 floods) must fill the WHOLE viewport, not just
                                 the text box — so short scenes don't leave a
                                 white strip below the type */
  font-size: calc(var(--fs) * 5.5 * var(--scene-scale, 1));
  line-height: 1.05em;
  letter-spacing: 0;
  text-transform: none;       /* AS-TYPED — uppercase is only an effect */
  color: var(--fg);
  padding: calc(var(--fs) * 0.75);
  user-select: none;
}

/* Word + character units. Each character is its own <font> (the color/glitch/
   decor target) that carries the signature box padding turning a colored word
   into a tight block; [word] groups a word's letters. (We use the legacy
   <font> tag purely as a styling hook, like the original.) */
#container [word] { display: inline-block; vertical-align: middle; }
#container font {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  line-height: 1.05em;
  padding: 0 0.14em 0.14em;   /* the color-block box */
}
/* When borders are off (the default look) drop the side padding so words sit
   tight, matching the site's #container[borders="0"] rule. */
#container:not([borders]) font,
#container[borders="0"] font { padding: 0 0 0.14em; }

#container p { margin: 0; }
.hidden { display: none !important; }

/* --- Progress (red wipe, like the site) ---------------------------------- */
#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 30;
  pointer-events: auto;       /* clickable to seek */
  cursor: pointer;
}
#progress > span {
  display: block;
  height: 100%;
  width: 0%;
  box-shadow: -2vw 0 0 0 var(--c-red) inset;
  transition: width 0.1s linear;
}
@media (max-aspect-ratio: 1/1) {
  #progress > span { box-shadow: -1vw 0 0 0 var(--c-red) inset; }
}
body:not(.started) #progress,
body.playing.hide-cursor #progress { display: none; }

/* --- Controls ------------------------------------------------------------ */
#controls {
  position: fixed;
  left: 12px; bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 40;
  font-size: 12px;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}
#controls:hover { opacity: 1; }

/* Distraction-free playback: once the pointer goes idle while playing, fade the
   controls away along with the cursor and progress bar so the typography can be
   experienced without chrome. Any mouse movement removes .hide-cursor and brings
   them straight back. */
body.playing.hide-cursor #controls { opacity: 0; pointer-events: none; }

#controls button,
#controls .filebtn {
  appearance: none;
  background: #fff;
  color: #00f;                 /* the site's link/button blue */
  border: 1px solid #00f;
  border-radius: 3px;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
#controls button:hover,
#controls .filebtn:hover { background: #00f; color: #fff; }
#controls #playBtn { min-width: 34px; font-size: 13px; }
#controls .filebtn { display: inline-flex; align-items: center; }
#controls #webcamBtn.on { border-color: var(--c-red); color: var(--c-red); }
#controls #webcamBtn.on:hover { background: var(--c-red); color: #fff; }
#controls .hint { color: #888; margin-left: 6px; letter-spacing: 0.02em; }

/* Before first play, nudge the user to start. */
body:not(.started) #controls { opacity: 0.9; }
body:not(.started) #playBtn {
  background: #00f; color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 255, 0.35);
}

/* --- Edit-text panel ----------------------------------------------------- */
#textPanel {
  position: fixed;
  left: 12px; bottom: 56px;
  width: min(420px, 80vw);
  background: #fff;
  border: 1px solid #00f;
  border-radius: 4px;
  padding: 8px;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 8px;
}
#textPanel.open { display: flex; }
#textArea {
  width: 100%;
  height: 180px;
  resize: vertical;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}
#textPanel .panel-actions { display: flex; justify-content: flex-end; }
#textPanel #applyText {
  background: #00f;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Hidden media + audio elements never affect layout. */
#audio { display: none; }

@media (max-width: 640px) {
  #controls .hint { display: none; }
}