/* Tom's Face "Pimp My Profile" themes + chaos effects.
   Each body.theme-<name> overrides the :root tokens from base.css.
   Busy backgrounds live on a fixed body::before layer (z-index -1) so the
   animation only moves one composited layer. js/layouts.js swaps the class. */

/* ---------- shared: themes with busy backgrounds get a solid id box + footer ---------- */
body:not(.theme-classic) .box-id,
body:not(.theme-classic) #footer {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body:not(.theme-classic) .box-id { padding: 8px; }
body:not(.theme-classic) #footer { margin: 0 10px 12px; padding-bottom: 14px; }
body:not(.theme-classic) .box-network { border-color: var(--box-border); }

/* fixed decorative layer used by the animated themes */
body.theme-emo::before, body.theme-glitter::before, body.theme-scene::before,
body.theme-matrix::before, body.theme-geocities::before, body.theme-hawaii::before,
body.theme-bullish::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none; inset: 0;
}

/* ================= classic = base.css, no overrides ================= */

/* ================= emo ================= */
body.theme-emo {
  --page-bg: #000;
  --text: #f2f2f2;
  --muted: #b9a3b0;
  --link: #ff4fa8;
  --link-hover: #fff;
  --top-bg: #000;
  --top-text: #ff4fa8;
  --nav-bg: #1a0010;
  --nav-text: #ff9fd0;
  --box-bg: #0d0d0d;
  --box-border: #ff1493;
  --head-bg: #ff1493;
  --head-text: #000;
  --hot-bg: #2b0018;
  --hot-text: #ff66c4;
  --accent: #ff1493;
  --online: #ff4fa8;
  --font: "Trebuchet MS", "Comic Sans MS", Verdana, sans-serif;
  --font-head: "Comic Sans MS", "Trebuchet MS", cursive;
  --radius: 0px;
  --shadow: 4px 4px 0 #ff1493;
}
body.theme-emo::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath fill='%23ff1493' fill-opacity='.38' d='M24 9a11 11 0 0 0-11 11c0 4 2 7 5 8v5h12v-5c3-1 5-4 5-8A11 11 0 0 0 24 9z'/%3E%3Ccircle cx='19.5' cy='20' r='3' fill='%23000'/%3E%3Ccircle cx='28.5' cy='20' r='3' fill='%23000'/%3E%3Cpath d='M24 24l-1.6 3h3.2z' fill='%23000'/%3E%3Cpath d='M20 31v2M23 31v2M26 31v2M29 31v2' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 96px 96px,
    conic-gradient(#1c1c1c 25%, #000 0 50%, #1c1c1c 0 75%, #000 0) 0 0 / 48px 48px;
}
body.theme-emo #topbar { border-bottom: 3px solid #ff1493; }
body.theme-emo .profile-name { color: #ff4fa8; text-shadow: 2px 2px 0 #000, 0 0 8px #ff1493; }
body.theme-emo .profile-pic img { border-color: #ff1493; filter: grayscale(.6) contrast(1.15); }
body.theme-emo .comment { background: #2b0018; }
body.theme-emo .comment .body { background: #160009; color: #f2f2f2; }
body.theme-emo table.kv th { background: #3a0020; color: #ff66c4; }
body.theme-emo table.kv td { background: #1a1a1a; color: #f2f2f2; }
body.theme-emo .ci { border-color: #ff1493; background: linear-gradient(#fff, #ffc2e0); }

/* ================= glitter ================= */
body.theme-glitter {
  --page-bg: #ff7ac8;
  --text: #3d0040;
  --muted: #7a2f78;
  --link: #a1007a;
  --link-hover: #5a00b3;
  --top-bg: #9b1fd6;
  --top-text: #fff;
  --nav-bg: #ffd1ef;
  --nav-text: #8a0067;
  --box-bg: #fff2fb;
  --box-border: #e055c0;
  --head-bg: #9b1fd6;
  --head-text: #fff;
  --hot-bg: #ffd1ef;
  --hot-text: #a8006c;
  --accent: #ff3fb4;
  --online: #d1009a;
  --font: "Comic Sans MS", "Trebuchet MS", cursive;
  --font-head: "Comic Sans MS", "Trebuchet MS", cursive;
  --radius: 10px;
  --shadow: 0 0 0 2px #fff, 0 0 12px #ff7ac8;
}
body.theme-glitter #topbar { background: linear-gradient(90deg, #ff3fb4, #a64dff); }
body.theme-glitter::before {
  inset: -200px;
  background:
    radial-gradient(circle at 12px 14px, #fff 0 1.5px, transparent 2.5px) 0 0 / 46px 46px,
    radial-gradient(circle at 30px 34px, #fffbcc 0 1px, transparent 2px) 0 0 / 38px 38px,
    radial-gradient(circle at 8px 28px, #ffe6fb 0 2px, transparent 3px) 0 0 / 70px 70px,
    linear-gradient(135deg, #ff5fbf, #b24dff, #ff8ad8, #8a3dff, #ff5fbf);
  background-size: 46px 46px, 38px 38px, 70px 70px, 100% 100%;
  animation: tf-glitter-drift 6s linear infinite;
}
@keyframes tf-glitter-drift { to { transform: translate(92px, 92px); } }
body.theme-glitter .comment { background: #ffd1ef; }
body.theme-glitter .comment .body { background: #fff7fc; }
body.theme-glitter table.kv th { background: #f3c6ff; color: #7a00a8; }
body.theme-glitter table.kv td { background: #ffe8f7; }

/* ================= scene ================= */
body.theme-scene {
  --page-bg: #111;
  --text: #fff;
  --muted: #d6d6d6;
  --link: #39ff14;
  --link-hover: #ff3fd8;
  --top-bg: #000;
  --top-text: #39ff14;
  --nav-bg: #ff00b4;
  --nav-text: #000;
  --box-bg: #000;
  --box-border: #39ff14;
  --head-bg: #ff00b4;
  --head-text: #000;
  --hot-bg: #1d1d1d;
  --hot-text: #39ff14;
  --accent: #39ff14;
  --online: #39ff14;
  --font: Verdana, Tahoma, sans-serif;
  --font-head: Impact, "Arial Black", sans-serif;
  --radius: 0px;
  --shadow: 0 0 0 3px #ff00b4;
}
body.theme-scene::before {
  background:
    repeating-linear-gradient(-28deg, #000 0 16px, transparent 16px 26px, #000 26px 31px, transparent 31px 52px),
    linear-gradient(90deg, #ff004c, #ff9a00, #f6ff00, #39ff14, #00e5ff, #8a2bff, #ff00b4);
}
body.theme-scene .box h2 { letter-spacing: 1px; font-weight: normal; }
body.theme-scene .comment { background: #ff00b4; }
body.theme-scene .comment .who, body.theme-scene .comment .who a { color: #000; }
body.theme-scene .comment .who a:hover { color: #fff; }
body.theme-scene .comment .body { background: #111; color: #fff; }
body.theme-scene table.kv th { background: #39ff14; color: #000; }
body.theme-scene table.kv td { background: #1d1d1d; color: #fff; }

/* ================= matrix ================= */
body.theme-matrix {
  --page-bg: #000;
  --text: #33ff66;
  --muted: #1fae49;
  --link: #b6ffc8;
  --link-hover: #fff;
  --top-bg: #000;
  --top-text: #33ff66;
  --nav-bg: #002b0e;
  --nav-text: #7dff9e;
  --box-bg: rgba(0, 10, 3, .94);
  --box-border: #00c93a;
  --head-bg: #00591c;
  --head-text: #c8ffd6;
  --hot-bg: #003d14;
  --hot-text: #7dff9e;
  --accent: #00ff41;
  --online: #00ff41;
  --font: "Courier New", Consolas, monospace;
  --font-head: "Courier New", Consolas, monospace;
  --radius: 0px;
  --shadow: 0 0 10px rgba(0, 255, 65, .35);
}
body.theme-matrix::before {
  top: -160px;
  background:
    linear-gradient(#000 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='160' font-family='monospace' font-size='13' fill='%2300ff41'%3E%3Ctext x='4' y='14' fill-opacity='.9'%3E1%3C/text%3E%3Ctext x='4' y='30' fill-opacity='.6'%3E0%3C/text%3E%3Ctext x='4' y='46' fill-opacity='.35'%3E1%3C/text%3E%3Ctext x='4' y='62' fill-opacity='.15'%3E1%3C/text%3E%3Ctext x='28' y='70' fill-opacity='.9'%3E%24%3C/text%3E%3Ctext x='28' y='86' fill-opacity='.6'%3ET%3C/text%3E%3Ctext x='28' y='102' fill-opacity='.35'%3EO%3C/text%3E%3Ctext x='28' y='118' fill-opacity='.15'%3EM%3C/text%3E%3Ctext x='52' y='40' fill-opacity='.9'%3E0%3C/text%3E%3Ctext x='52' y='56' fill-opacity='.6'%3E8%3C/text%3E%3Ctext x='52' y='72' fill-opacity='.35'%3E1%3C/text%3E%3Ctext x='76' y='120' fill-opacity='.9'%3E7%3C/text%3E%3Ctext x='76' y='136' fill-opacity='.6'%3E0%3C/text%3E%3Ctext x='76' y='152' fill-opacity='.35'%3E1%3C/text%3E%3Ctext x='76' y='8' fill-opacity='.15'%3E0%3C/text%3E%3C/svg%3E") 0 0 / 96px 160px,
    #000;
  animation: tf-matrix-fall 3.2s linear infinite;
}
@keyframes tf-matrix-fall { to { transform: translateY(160px); } }
body.theme-matrix .profile-name, body.theme-matrix .network-line { text-shadow: 0 0 6px #00ff41; }
body.theme-matrix .profile-pic img { border-color: #00ff41; filter: sepia(1) hue-rotate(70deg) saturate(3) brightness(.9); }
body.theme-matrix .comment { background: #002b0e; }
body.theme-matrix .comment .body { background: #000; color: #33ff66; }
body.theme-matrix table.kv th { background: #003d14; color: #7dff9e; }
body.theme-matrix table.kv td { background: #001a08; color: #33ff66; }

/* ================= geocities ================= */
body.theme-geocities {
  --page-bg: #000022;
  --text: #fff;
  --muted: #c9c9ff;
  --link: #ffff00;
  --link-hover: #ff66ff;
  --top-bg: #000080;
  --top-text: #ffff00;
  --nav-bg: #0000cc;
  --nav-text: #ffff00;
  --box-bg: #000044;
  --box-border: #ffff00;
  --head-bg: #000;
  --head-text: #ffff00;
  --hot-bg: #000;
  --hot-text: #00ffff;
  --accent: #ffcc00;
  --online: #00ff00;
  --font: "Times New Roman", Times, serif;
  --font-head: "Times New Roman", Times, serif;
  --radius: 0px;
  --shadow: none;
}
body.theme-geocities { font-size: 13px; }
body.theme-geocities::before {
  background:
    radial-gradient(circle at 20px 30px, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 75px 90px, #ffff99 0 1.4px, transparent 2px),
    radial-gradient(circle at 110px 20px, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 140px 120px, #aaccff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 50px 140px, #fff 0 .7px, transparent 1.3px),
    #000022;
  background-size: 160px 160px;
}
body.theme-geocities .box { border-width: 3px; border-style: ridge; }
body.theme-geocities .box h2 {
  font-size: 15px;
  border-top: 7px solid transparent;
  border-image: repeating-linear-gradient(45deg, #ffcc00 0 8px, #000 8px 16px) 7;
}
body.theme-geocities .box h2::after { content: " (under construction)"; font-size: 10px; font-weight: normal; color: #ff9900; }
body.theme-geocities .box-id .profile-name { color: #ffff00; text-shadow: 2px 2px 0 #ff0000; }
body.theme-geocities .comment { background: #000080; }
body.theme-geocities .comment .body { background: #000022; color: #fff; }
body.theme-geocities table.kv th { background: #000080; color: #00ffff; }
body.theme-geocities table.kv td { background: #000022; color: #fff; }

/* ================= hawaii (Tom retired to Hawaii) ================= */
body.theme-hawaii {
  --page-bg: #ff9e5e;
  --text: #3b2414;
  --muted: #7a5236;
  --link: #00676b;
  --link-hover: #d13a00;
  --top-bg: #0b5f73;
  --top-text: #fff6e0;
  --nav-bg: #ff7f50;
  --nav-text: #2a0f00;
  --box-bg: rgba(255, 248, 236, .95);
  --box-border: #0b8f8f;
  --head-bg: #08706f;
  --head-text: #fff;
  --hot-bg: #ffd27a;
  --hot-text: #9a3000;
  --accent: #ff7f50;
  --online: #138a36;
  --font: "Trebuchet MS", Verdana, sans-serif;
  --font-head: "Trebuchet MS", Verdana, sans-serif;
  --radius: 12px;
  --shadow: 0 4px 14px rgba(80, 20, 40, .25);
}
body.theme-hawaii::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220'%3E%3Cg fill='%233a1340' fill-opacity='.28'%3E%3Cpath d='M70 220c4-50 10-95 28-140l6 2c-16 45-22 90-24 138z'/%3E%3Cpath d='M100 80c-20-18-50-20-72-6 24-4 46 2 66 12zM100 80c-6-26-28-44-54-46 20 10 36 26 46 48zM102 80c14-24 40-34 66-26-24 2-44 14-58 32zM102 80c26-8 52 0 68 20-20-12-44-16-66-12zM100 80c-26 0-48 14-58 38 14-18 34-30 56-32z'/%3E%3C/g%3E%3Cpath d='M0 205q16-10 32 0t32 0 32 0 32 0 32 0 32 0 32 0 32 0v15H0z' fill='%230b8f8f' fill-opacity='.35'/%3E%3C/svg%3E") left bottom / 260px 220px repeat-x,
    radial-gradient(circle at 50% 78%, #ffe680 0 60px, rgba(255,230,128,0) 61px),
    linear-gradient(#5b2a86 0%, #c4456b 35%, #ff7f50 62%, #ffb347 80%, #3fb5c4 100%);
}
body.theme-hawaii .box h2 { padding: 4px 10px; }
body.theme-hawaii .profile-name::after { content: " \1F334"; }
body.theme-hawaii .comment { background: #ffd27a; border-radius: 10px; }
body.theme-hawaii .comment .body { background: #fff8ec; border-radius: 8px; }
body.theme-hawaii table.kv th { background: #bfeceb; color: #0b5f73; }
body.theme-hawaii table.kv td { background: #fff1d6; }

/* ================= bullish ================= */
body.theme-bullish {
  --page-bg: #03140a;
  --text: #e9ffe9;
  --muted: #9fd6a8;
  --link: #ffd700;
  --link-hover: #ff2a2a;
  --top-bg: #000;
  --top-text: #ffd700;
  --nav-bg: #0b3d1e;
  --nav-text: #ffe56b;
  --box-bg: #06220f;
  --box-border: #d4af37;
  --head-bg: #d4af37;
  --head-text: #1a1200;
  --hot-bg: #005c26;
  --hot-text: #eaffd0;
  --accent: #ff1a1a;
  --online: #00e65c;
  --font: Verdana, Tahoma, sans-serif;
  --font-head: "Arial Black", Arial, sans-serif;
  --radius: 4px;
  --shadow: 0 0 0 1px #000, 0 0 12px rgba(212, 175, 55, .35);
}
body.theme-bullish::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%2300e65c' stroke-opacity='.45' stroke-width='2'%3E%3Cpath d='M12 70v40M36 54v40M60 38v40M84 22v40M108 6v40'/%3E%3C/g%3E%3Cg fill='%2300e65c' fill-opacity='.3'%3E%3Crect x='6' y='78' width='12' height='24'/%3E%3Crect x='30' y='62' width='12' height='24'/%3E%3Crect x='54' y='46' width='12' height='24'/%3E%3Crect x='78' y='30' width='12' height='24'/%3E%3C/g%3E%3Crect x='102' y='14' width='12' height='24' fill='%23d4af37' fill-opacity='.45'/%3E%3C/svg%3E") 0 0 / 120px 120px,
    linear-gradient(#03140a, #062b14);
}
/* the laser: a red scan line that sweeps down the screen */
body.theme-bullish::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: -1; pointer-events: none;
  background: #ff1a1a; box-shadow: 0 0 10px 2px #ff1a1a;
  animation: tf-laser 4s ease-in-out infinite alternate;
}
@keyframes tf-laser { to { transform: translateY(100vh); } }
body.theme-bullish .profile-name { color: #ffd700; text-shadow: 0 0 6px rgba(255, 26, 26, .8); }
body.theme-bullish .profile-pic img { border-color: #d4af37; box-shadow: 0 0 0 2px #ff1a1a; }
body.theme-bullish .comment { background: #0b3d1e; }
body.theme-bullish .comment .body { background: #03140a; color: #e9ffe9; }
body.theme-bullish table.kv th { background: #0b3d1e; color: #ffd700; }
body.theme-bullish table.kv td { background: #03140a; color: #e9ffe9; }

/* ---------- glitter text (glitter + scene themes) ---------- */
body.theme-glitter .profile-name, body.theme-glitter .network-line,
body.theme-scene .profile-name, body.theme-scene .network-line {
  background: linear-gradient(90deg, #ff2fa8, #ffe23f, #fff, #b24dff, #39ff14, #ff2fa8) 0 0 / 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: tf-glitter-text 2.4s linear infinite;
  text-shadow: none;
}
body.theme-glitter .profile-name, body.theme-glitter .network-line {
  background-image: linear-gradient(90deg, #c4007f, #8a00d4, #ff2fa8, #5a00b3, #c4007f);
}
@keyframes tf-glitter-text { to { background-position: 200% 0; } }

/* ================= toggles (body.fx-*) ================= */
body.fx-comic, body.fx-comic * { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important; }
body.fx-blink .profile-name, body.fx-blink .network-line, body.fx-blink .mood, body.fx-blink .quote {
  animation: tf-blink 1s steps(2, start) infinite;
}
@keyframes tf-blink { to { visibility: hidden; } }
#profile { transition: transform .6s ease; }
body.fx-flip #profile { transform: rotate(180deg); }
#page.fx-shake { animation: tf-shake .7s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes tf-shake {
  10%, 90% { transform: translate(-2px, 1px) rotate(-.3deg); }
  20%, 80% { transform: translate(4px, -2px) rotate(.4deg); }
  30%, 50%, 70% { transform: translate(-7px, 2px) rotate(-.6deg); }
  40%, 60% { transform: translate(7px, -1px) rotate(.6deg); }
}

/* glitter cursor layer */
.tf-sparkles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 950; }
.tf-sparkles span { position: absolute; left: 0; top: 0; font: 14px/1 Arial, sans-serif; pointer-events: none; opacity: 0; will-change: transform, opacity; text-shadow: 0 0 4px #fff; }

/* ---------- Pimp My Profile box ---------- */
.box-layouts .lay-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.box-layouts select { flex: 1 1 140px; min-width: 0; font: 11px var(--font); padding: 2px; }
.box-layouts button.lay-btn { font-size: 11px; padding: 2px 8px; }
.box-layouts .lay-toggles { display: grid; gap: 3px; margin: 4px 0 6px; }
.box-layouts .lay-toggles label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.box-layouts .lay-toggles input { margin: 0; }
.box-layouts .lay-toggles label.off { opacity: .55; cursor: default; }
.box-layouts .lay-credit { margin: 6px 0 0; padding-top: 5px; border-top: 1px dashed var(--box-border); font-size: 10px; color: var(--muted); }
.box-layouts .lay-credit button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; font-size: 10px; font-weight: bold; }
.box-layouts .lay-credit button:hover { color: var(--link-hover); }

/* ---------- reduced motion: stop animated backgrounds + chaos ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  body.theme-glitter .profile-name, body.theme-glitter .network-line,
  body.theme-scene .profile-name, body.theme-scene .network-line,
  body.fx-blink .profile-name, body.fx-blink .network-line, body.fx-blink .mood, body.fx-blink .quote,
  #page.fx-shake { animation: none !important; }
  body.theme-bullish::after { display: none; }
  #profile { transition: none; }
  .tf-sparkles { display: none; }
}