/* TubeTune — FULL RETRO. Loud on purpose. GeoCities forever. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --pink: #ff2fb3;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --lime: #39ff14;
  --purple: #7b2ff7;
  --deep-purple: #2a1042;
  --orange: #ff7a00;
  --ink: #14081f;
  --paper: #fff8ec;
  --screen: #0b1020;
}

* { box-sizing: border-box; }

body.tt-body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle, #ff2fb3 7%, transparent 8%),
    radial-gradient(circle, #00e5ff 7%, transparent 8%),
    radial-gradient(circle, #ffe600 7%, transparent 8%),
    radial-gradient(circle, #39ff14 7%, transparent 8%),
    radial-gradient(circle, #7b2ff7 7%, transparent 8%),
    radial-gradient(circle at 12% 18%, rgba(255,47,179,.10) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 12%, rgba(0,229,255,.10) 0 110px, transparent 111px),
    radial-gradient(circle at 78% 82%, rgba(255,230,0,.10) 0 100px, transparent 101px);
  background-size: 130px 130px, 190px 190px, 95px 95px, 160px 160px, 210px 210px, auto, auto, auto;
  background-position: 0 0, 45px 65px, 75px 25px, 25px 95px, 95px 135px, 0 0, 0 0, 0 0;
  min-height: 100vh;
}

.tt-pixel { font-family: 'Press Start 2P', 'Courier New', monospace; }

/* ---------- checkerboard divider ---------- */
.tt-checker {
  height: 22px;
  background: repeating-conic-gradient(#14081f 0% 25%, #fff 0% 50%) 0 0 / 30px 30px;
  border-top: 4px solid #14081f;
  border-bottom: 4px solid #14081f;
}

/* ---------- header ---------- */
.tt-header {
  background:
    radial-gradient(circle, #ff2fb3 8%, transparent 9%),
    radial-gradient(circle, #ffe600 8%, transparent 9%),
    radial-gradient(circle, #00e5ff 8%, transparent 9%),
    linear-gradient(160deg, #3d1663 0%, #7b2ff7 55%, #a93ff5 100%);
  background-size: 110px 110px, 170px 170px, 140px 140px, auto;
  background-position: 10px 20px, 80px 60px, 30px 90px, 0 0;
  padding: 18px 14px 14px;
  border-bottom: 5px solid #14081f;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tt-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tt-logo {
  width: 84px; height: 84px; flex: none;
  background: #fff;
  border: 4px solid #14081f;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  transform: rotate(-4deg);
}
.tt-brand-name {
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 9vw, 84px);
  line-height: .95;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe600 15%, #ff2fb3 45%, #00e5ff 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #14081f;
  filter: drop-shadow(4px 4px 0 #14081f);
  text-decoration: none;
}
.tt-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 2vw, 12px);
  color: var(--yellow);
  background: #000;
  padding: 10px 14px;
  border: 3px solid var(--yellow);
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  transform: rotate(1deg);
}
.tt-under-construction {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #14081f;
  background: var(--orange);
  border: 3px dashed #14081f;
  padding: 8px 10px;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}

/* starburst nav */
.tt-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.tt-nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #14081f;
  background: var(--cyan);
  padding: 16px 14px;
  text-decoration: none;
  text-align: center;
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 82% 20%, 96% 20%, 94% 35%, 108% 42%, 100% 55%, 108% 68%, 94% 72%, 94% 88%, 79% 85%, 72% 99%, 60% 90%, 47% 100%, 40% 87%, 26% 92%, 24% 77%, 10% 76%, 14% 62%, 0% 55%, 8% 43%, 2% 30%, 16% 28%, 20% 13%, 34% 16%);
  filter: drop-shadow(3px 3px 0 #000);
  min-width: 92px;
}
.tt-nav a:nth-child(2n) { background: var(--pink); color: #fff; }
.tt-nav a:nth-child(3n) { background: var(--yellow); }
.tt-nav a:nth-child(4n) { background: var(--lime); }
.tt-nav a:active { transform: scale(.93); }

/* generic starburst badge */
.tt-burst {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #14081f;
  background: var(--yellow);
  padding: 18px 22px;
  text-align: center;
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 82% 20%, 96% 20%, 94% 35%, 108% 42%, 100% 55%, 108% 68%, 94% 72%, 94% 88%, 79% 85%, 72% 99%, 60% 90%, 47% 100%, 40% 87%, 26% 92%, 24% 77%, 10% 76%, 14% 62%, 0% 55%, 8% 43%, 2% 30%, 16% 28%, 20% 13%, 34% 16%);
  filter: drop-shadow(3px 3px 0 #000);
}

/* ---------- CRT (beige beast) ---------- */
.tt-crt {
  background: linear-gradient(180deg, #efe6d4 0%, #cfc2a8 60%, #b3a586 100%);
  border: 5px solid #14081f;
  border-radius: 30px;
  padding: 26px 24px 34px;
  box-shadow: 10px 10px 0 rgba(0,0,0,.4);
  position: relative;
  max-width: 640px;
  margin: 26px auto;
}
.tt-crt::before, .tt-crt::after { /* antennas */
  content: "";
  position: absolute;
  top: -46px;
  width: 8px; height: 52px;
  background: #333;
  border: 2px solid #14081f;
}
.tt-crt::before { left: 38%; transform: rotate(24deg); }
.tt-crt::after { right: 38%; transform: rotate(-24deg); }
.tt-screen {
  background: var(--screen);
  border: 4px solid #14081f;
  border-radius: 22px / 28px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 18px;
  position: relative;
  overflow: hidden;
  color: var(--lime);
  text-align: center;
}
.tt-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
}
.tt-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
}
.tt-drop-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 30px);
  color: var(--lime);
  text-shadow: 0 0 14px rgba(57,255,20,.8);
  line-height: 1.6;
  margin: 0;
}
.tt-drop-sub { font-size: 14px; color: var(--cyan); margin: 0; font-weight: bold; }
.tt-screen.dragover { outline: 5px dashed var(--yellow); outline-offset: -10px; }
.tt-thumb {
  max-width: 80%; max-height: 200px;
  border: 4px solid var(--lime);
  border-radius: 6px;
  display: none;
  box-shadow: 0 0 18px rgba(57,255,20,.4);
}
video.tt-preview {
  max-width: 84%; max-height: 230px;
  border: 4px solid var(--lime);
  border-radius: 6px;
  display: none;
  background: #000;
}
.tt-crt-knobs { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 16px; }
.tt-knob {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #999, #444);
  border: 4px solid #14081f;
}
.tt-crt-btn {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  background: #8f8468; border: 3px solid #14081f; padding: 6px 8px; color: #14081f;
}

/* ---------- tuner deviation meter ---------- */
.tt-meter-wrap { width: 100%; max-width: 480px; margin: 8px auto 0; }
.tt-meter-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px; color: var(--lime);
  text-shadow: 0 0 10px rgba(57,255,20,.7);
  margin: 12px 0 8px;
}
.tt-meter {
  display: flex; gap: 3px; justify-content: center;
  background: #05070f;
  border: 4px solid #14081f;
  outline: 3px solid #8f8468;
  padding: 10px 8px;
}
.tt-meter .seg { flex: 1; height: 28px; max-width: 18px; background: #1c2233; border: 1px solid #000; }
.tt-meter .seg.lit-green { background: var(--lime); box-shadow: 0 0 10px rgba(57,255,20,.9); }
.tt-meter .seg.lit-yellow { background: var(--yellow); box-shadow: 0 0 10px rgba(255,230,0,.9); }
.tt-meter .seg.lit-red { background: #ff3131; box-shadow: 0 0 10px rgba(255,49,49,.9); }
.tt-meter .seg.center { background: #3a3a44; }
.tt-meter-scale {
  display: flex; justify-content: space-between;
  font-size: 9px; color: #8a93ad;
  font-family: 'Press Start 2P', monospace;
  margin-top: 6px;
}

/* ---------- status badge + buttons ---------- */
.tt-status-badge {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #14081f; background: var(--yellow);
  border: 4px solid #14081f;
  padding: 12px 18px;
  box-shadow: 5px 5px 0 #000;
  margin: 18px 0 4px;
  transform: rotate(-1deg);
}
.tt-status-badge.stage-reading { background: var(--cyan); transform: rotate(1deg); }
.tt-status-badge.stage-working { background: var(--orange); color: #fff; transform: rotate(-1deg); }
.tt-status-badge.stage-done { background: var(--lime); transform: rotate(1deg); }

.tt-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #14081f;
  background: var(--lime);
  border: 4px solid #14081f;
  padding: 16px 24px;
  cursor: pointer;
  box-shadow: 6px 6px 0 #000;
  text-decoration: none;
  display: inline-block;
}
.tt-btn:active { transform: translate(6px,6px); box-shadow: none; }
.tt-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.tt-btn.pink { background: var(--pink); color: #fff; }
.tt-btn.cyan { background: var(--cyan); }
.tt-btn.yellow { background: var(--yellow); }
.tt-btn.orange { background: var(--orange); color: #fff; }

.tt-controls { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 16px; }
.tt-field label { font-family: 'Press Start 2P', monospace; font-size: 10px; display: block; margin-bottom: 8px; }
.tt-field input, .tt-field select, .tt-field textarea {
  font-family: Verdana, sans-serif; font-size: 15px;
  border: 4px solid #14081f; padding: 12px; background: #fff; color: #14081f;
  width: 100%; max-width: 360px; box-shadow: 4px 4px 0 #000;
}
.tt-field textarea { min-height: 120px; resize: vertical; }
.tt-hint { font-size: 13px; color: #4a4460; max-width: 480px; text-align: center; font-weight: bold; }

/* ---------- progress + status text ---------- */
.tt-progress { display: none; width: 100%; max-width: 480px; height: 26px; border: 4px solid #14081f; background: #fff; margin: 12px auto 0; box-shadow: 4px 4px 0 #000; }
.tt-progress.visible { display: block; }
.tt-progress > div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--lime) 0 14px, #1fae0a 14px 18px); transition: width .2s; }
.tt-status-line { font-weight: bold; margin: 14px 0 2px; text-align: center; font-size: 16px; }
.tt-status-detail { font-size: 14px; color: #4a4460; margin: 0 0 8px; text-align: center; max-width: 540px; }
.tt-readout { text-align: center; font-size: 14px; margin: 8px 0; }
.tt-error { color: #b00020; font-weight: bold; }

/* ---------- busy cursor ---------- */
body.tt-working, body.tt-working * {
  cursor: url('cursor-rainbow.png') 16 16, wait !important;
}

/* ---------- landing ---------- */
.tt-wrap { max-width: 1080px; margin: 0 auto; padding: 8px 14px 40px; }
.tt-hero { text-align: center; margin: 6px 0 8px; }

.tt-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px, 3.4vw, 24px);
  text-align: center;
  margin: 30px 0 20px;
  color: #14081f;
  text-shadow: 3px 3px 0 var(--cyan);
}

/* leopard panel */
.tt-leopard {
  background-color: #5b21a8;
  background-image:
    radial-gradient(ellipse 26px 18px at 30px 40px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 20px 22px at 90px 90px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 28px 16px at 160px 35px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 18px 20px at 220px 100px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 24px 18px at 300px 45px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 20px 16px at 380px 95px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 26px 20px at 460px 40px, #1c0f2e 58%, transparent 59%),
    radial-gradient(ellipse 18px 18px at 540px 90px, #1c0f2e 58%, transparent 59%);
  background-size: 560px 130px;
  border: 5px solid #14081f;
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  padding: 30px 18px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.tt-toolbox { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; }
.tt-tool-wrap {
  background: repeating-conic-gradient(#14081f 0% 25%, #fff 0% 50%) 0 0 / 22px 22px;
  border-radius: 999px;
  padding: 6px;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.5));
  transition: transform .08s;
}
.tt-tool-wrap:hover { transform: scale(1.03) rotate(-.5deg); }
.tt-tool-card {
  display: flex; align-items: center; gap: 12px;
  border-radius: 999px;
  padding: 16px 22px;
  text-decoration: none; color: #14081f;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 2.6vw, 15px);
}
.tt-tool-card .tt-num { font-size: .85em; opacity: .75; }
.tt-tool-card .tt-ico { margin-left: auto; font-size: 1.5em; font-family: Verdana, sans-serif; }
.tt-tool-wrap:nth-child(7n+1) .tt-tool-card { background: var(--yellow); }
.tt-tool-wrap:nth-child(7n+2) .tt-tool-card { background: var(--cyan); }
.tt-tool-wrap:nth-child(7n+3) .tt-tool-card { background: var(--lime); }
.tt-tool-wrap:nth-child(7n+4) .tt-tool-card { background: var(--pink); color: #fff; }
.tt-tool-wrap:nth-child(7n+5) .tt-tool-card { background: var(--orange); color: #fff; }
.tt-tool-wrap:nth-child(7n+6) .tt-tool-card { background: #4da6ff; }
.tt-tool-wrap:nth-child(7n+7) .tt-tool-card { background: #b6ff4d; }

/* ---------- guides strip ---------- */
.tt-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.tt-guide-card {
  background: #fff; border: 5px solid #14081f; box-shadow: 6px 6px 0 #000;
  padding: 20px; text-decoration: none; color: #14081f; display: block;
  transform: rotate(-.5deg);
}
.tt-guide-card:nth-child(2n) { transform: rotate(.6deg); background: #fff3c4; }
.tt-guide-card:nth-child(3n) { background: #d9f6ff; }
.tt-guide-card h3 { font-size: 17px; margin: 0 0 8px; }
.tt-guide-card p { font-size: 13px; color: #4a4460; margin: 0; }

/* ---------- article ---------- */
.tt-article {
  max-width: 760px; margin: 10px auto; background: #fff;
  border: 5px solid #14081f; box-shadow: 8px 8px 0 #000;
  padding: clamp(20px, 4vw, 44px);
}
.tt-article h1 { font-family: 'Press Start 2P', monospace; font-size: clamp(17px, 3.4vw, 26px); line-height: 1.6; margin-top: 0; }
.tt-article h2 { font-size: 19px; margin-top: 30px; border-bottom: 4px solid var(--pink); display: inline-block; padding-bottom: 4px; }
.tt-article p, .tt-article li { font-size: 15px; line-height: 1.75; }
.tt-article table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.tt-article th, .tt-article td { border: 4px solid #14081f; padding: 10px; text-align: left; }
.tt-article th { background: var(--yellow); font-family: 'Press Start 2P', monospace; font-size: 10px; }
.tt-cta { background: #1a0b2e; color: #fff; border: 5px solid #14081f; padding: 22px; margin-top: 30px; text-align: center; box-shadow: 6px 6px 0 #000; }
.tt-cta p { margin: 0 0 16px; }

/* ---------- footer ---------- */
.tt-footer {
  background:
    radial-gradient(circle, #ff2fb3 8%, transparent 9%),
    linear-gradient(180deg, #2a1042 0%, #1a0b2e 100%);
  background-size: 120px 120px, auto;
  color: #fff;
  border-top: 5px solid #14081f;
  padding: 24px 16px 12px;
  text-align: center;
}
.tt-footer-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.tt-footer-links a {
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: #14081f; background: var(--cyan); text-decoration: none;
  padding: 12px 12px; border: 3px solid #000; box-shadow: 3px 3px 0 #000;
}
.tt-footer-links a:nth-child(2n) { background: var(--pink); color: #fff; }
.tt-footer-links a:nth-child(3n) { background: var(--yellow); }
.tt-counter {
  display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 12px;
  color: var(--lime); background: #000; border: 4px solid var(--lime);
  padding: 12px 16px; margin-top: 10px;
  box-shadow: 0 0 16px rgba(57,255,20,.35), inset 0 0 12px rgba(57,255,20,.15);
}
.tt-netscape {
  display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: #14081f; background: #c0c0c0; border: 3px outset #fff;
  padding: 8px 10px; margin-top: 12px;
}
.tt-joke { font-size: 12px; color: #8a93ad; margin-top: 14px; }

/* scrolling welcome marquee */
.tt-marquee {
  background: var(--pink);
  border-top: 4px solid #14081f;
  border-bottom: 4px solid #14081f;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
}
.tt-marquee span {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px; color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
  padding-left: 100%;
  animation: tt-scroll 18s linear infinite;
}
@keyframes tt-scroll { to { transform: translateX(-100%); } }

/* ---------- misc ---------- */
.tt-back { display: inline-block; margin: 14px 0; font-size: 14px; font-weight: bold; color: #14081f; background: var(--yellow); border: 3px solid #14081f; padding: 8px 12px; text-decoration: none; box-shadow: 3px 3px 0 #000; }
.tt-page-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px, 3.6vw, 26px);
  text-align: center; margin: 8px 0 6px; line-height: 1.6;
  color: #14081f; text-shadow: 3px 3px 0 var(--pink);
}
.tt-page-sub { text-align: center; color: #3d3654; font-size: 15px; font-weight: bold; margin: 0 0 18px; }
.tt-privacy-note {
  max-width: 640px; margin: 28px auto 0; font-size: 13px; color: #3d3654;
  border: 4px dashed #14081f; padding: 14px 16px; background: #fff; box-shadow: 4px 4px 0 #000;
}
.hidden { display: none !important; }

@media (max-width: 640px) {
  .tt-header-inner { gap: 10px; }
  .tt-logo { width: 60px; height: 60px; }
  .tt-brand-name { font-size: 38px; -webkit-text-stroke: 1.5px #14081f; }
  .tt-under-construction { transform: none; font-size: 7px; padding: 6px 8px; }
  .tt-tagline { font-size: 9px; }
  .tt-nav { margin-top: 18px; gap: 8px; }
  .tt-nav a { min-width: 76px; font-size: 9px; padding: 14px 10px; }
  .tt-crt { border-radius: 20px; padding: 16px 12px 22px; margin: 18px auto; }
  .tt-crt::before, .tt-crt::after { top: -36px; height: 40px; }
  .tt-screen { min-height: 240px; }
  .tt-meter .seg { height: 20px; }
  .tt-leopard { padding: 20px 10px; }
}