/* site stylesheet */

/* =========================================================
   THEME COLORS
   Light is the default. Dark is applied when <html data-theme="dark">.
   The header and ticker look the same in both themes.
   ========================================================= */
:root {
  --accent: #33ff73;            /* site accent green */

  --page-bg: #3a5f8f;           /* behind the site panel */

  --site-bg: #e8eef7;
  --site-border: #000;
  --site-shadow: #00000066;

  --text: #1a1a2e;
  --text-muted: #777;
  --text-label: #2d5fa8;
  --control-hover: #2d5fa8;     /* border of slider handles + radio buttons on hover */

  --link: #0033cc;
  --link-visited: #663399;
  --link-hover: #cc0066;
  --link-hover-bg: #ffff99;

  --bar-bg: #c9d6ea;            /* nav strip + footer */
  --bar-border: #7a8fb3;
  --bar-text: #333;

  --btn-top: #ffffff;
  --btn-bottom: #c4d3ea;
  --btn-border: #5a7099;
  --btn-text: #13264a;
  --btn-hover: #ffff99;

  --box-bg: #fff;
  --box-border: #5a7099;
  --box-divider: #b8c6dd;

  --head-blue: #5b8fd6, #2d5fa8;     --head-blue-edge: #1f3f73;
  --head-orange: #ffb35c, #e0730f;   --head-orange-edge: #8a4300;
  --head-pink: #ff9ccf, #d94d97;     --head-pink-edge: #7a1d4f;
  --head-green: #9be07a, #3f9a2a;    --head-green-edge: #22561a;
  --head-bullet: #ffef7a;

  --avatar-a: #dfe8f5;
  --avatar-b: #cbd8ec;
  --avatar-text: #5a7099;

  --online: #2a9d2a;

  --welcome-bg: #fffbe6;
  --welcome-border: #e0730f;
  --welcome-title: #c0392b;
  --date: #e0730f;

  --tag-bg: #eef3fb;
  --tag-border: #9fb2d3;

  --well-bg: #f9fbff;           /* sunken areas: quotes, poll bars */
  --well-border: #999;
  --input-bg: #fff;
  --input-text: #1a1a2e;
  --input-border: #7a8fb3;
  --gb-name: #d94d97;
  --error: #c0392b;
  --ok: #1a8038;
  --tooltip-bg: #ffffe1;        /* classic yellow tooltip */
  --tooltip-text: #1a1a2e;
  --tooltip-border: #555;

  /* post text colors ([color=...]), readable on light boxes */
  --bb-red: #c42b2b;    --bb-orange: #b85000;  --bb-yellow: #8a6d00;  --bb-green: #1a8038;
  --bb-blue: #1f5fbf;   --bb-purple: #7a3db5;  --bb-pink: #b8306f;    --bb-gray: #5f6673;
}

/* soft dark: muted slate, not pitch black */
[data-theme="dark"] {
  --page-bg: #232c3b;

  --site-bg: #2e3542;
  --site-border: #0d1017;
  --site-shadow: #00000080;

  --text: #d6dce6;
  --text-muted: #8f99aa;
  --text-label: #8ab4f0;
  --control-hover: #7a8aa6;

  --link: #8ab4ff;
  --link-visited: #c3a3f0;
  --link-hover: #ffe08a;
  --link-hover-bg: #4a4630;

  --bar-bg: #262c38;
  --bar-border: #151a23;
  --bar-text: #a9b2c2;

  --btn-top: #4a5468;
  --btn-bottom: #39414f;
  --btn-border: #1a1f29;
  --btn-text: #e1e6ee;
  --btn-hover: #5a5636;

  --box-bg: #363e4d;
  --box-border: #1f242e;
  --box-divider: #4c5568;

  --head-blue: #4a76b3, #2b4f85;     --head-blue-edge: #18304f;
  --head-orange: #c98a42, #9a5a1a;   --head-orange-edge: #4f2c08;
  --head-pink: #c06f9a, #8f3f69;     --head-pink-edge: #4a1d35;
  --head-green: #6fa858, #36722a;    --head-green-edge: #1a3b14;
  --head-bullet: #ffe08a;

  --avatar-a: #3d4657;
  --avatar-b: #343c4b;
  --avatar-text: #8f99aa;

  --online: #5fd16f;

  --welcome-bg: #3a3a33;
  --welcome-border: #c98a42;
  --welcome-title: #ff9a85;
  --date: #f0a95a;

  --tag-bg: #2f3644;
  --tag-border: #556079;

  --well-bg: #2b313d;
  --well-border: #1a1f29;
  --input-bg: #2b313d;
  --input-text: #d6dce6;
  --input-border: #556079;
  --gb-name: #f08cc0;
  --error: #ff8a7a;
  --ok: #6fe08f;
  --tooltip-bg: #4a4630;
  --tooltip-text: #fff3c4;
  --tooltip-border: #151a23;

  /* post text colors ([color=...]), readable on dark boxes */
  --bb-red: #ff9494;    --bb-orange: #ffaa5c;  --bb-yellow: #ffd95e;  --bb-green: #33ff73;
  --bb-blue: #85b6ff;   --bb-purple: #c8a2ff;  --bb-pink: #ff8fc8;    --bb-gray: #aab3c0;
}

/* ========================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 20px 10px 40px;
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 11px;
  color: var(--text);
  background-color: var(--page-bg);   /* the animated background (#page-bg) sits on top of this */
}

/* page background: twinkling star tiles (18 frames of 32px, shown at 2x) with a
   gradient over them: rgb(28, 35, 49) easing from solid at the top of the screen to clear at
   the bottom. Fixed to the screen, so the page scrolls over it. */
#page-bg {
  position: fixed; inset: 0; z-index: -1;
  background-color: #202838;          /* until the tiles load */
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  pointer-events: none;
}
#page-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* eased fade (opacity = 1 - t^2): stays mostly solid through the upper half, then
     clears faster toward the bottom, with no hard edge anywhere */
  background: linear-gradient(to bottom,
    rgba(28, 35, 49, 1) 0%,
    rgba(28, 35, 49, 0.99) 10%,
    rgba(28, 35, 49, 0.96) 20%,
    rgba(28, 35, 49, 0.91) 30%,
    rgba(28, 35, 49, 0.84) 40%,
    rgba(28, 35, 49, 0.75) 50%,
    rgba(28, 35, 49, 0.64) 60%,
    rgba(28, 35, 49, 0.51) 70%,
    rgba(28, 35, 49, 0.36) 80%,
    rgba(28, 35, 49, 0.19) 90%,
    rgba(28, 35, 49, 0) 100%);
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); background: var(--link-hover-bg); }

#site {
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--site-bg);
  border: 2px solid var(--site-border);
  box-shadow: 6px 6px 0 var(--site-shadow);
}

/* ---------- header ---------- */
#banner {
  /* animated tiles are set by script.js (data-tile-sheet); this is the fallback color */
  background-color: #000;
  background-repeat: repeat;
  background-size: 64px 64px;      /* 16px frames shown at 4x */
  image-rendering: pixelated;      /* keep the pixel art crisp */
  border-bottom: 2px solid #000;
  padding: 18px 16px 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* gentle web 2.0 gloss on top of the animated tiles */
#banner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.12) 49%,
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0) 75%,
      rgba(0,0,0,.25) 100%
    );
}
#banner > * { position: relative; z-index: 1; }
#banner h1 {
  margin: 0;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000, 0 0 8px #33ff7366;
}
#banner h1 span { color: var(--accent); }
#banner .tagline { margin-top: 4px; font-style: italic; color: #dbe9ff; }

/* light/dark toggle, top right of the header: just the sprites, nothing else */
#banner .theme-toggle {
  position: absolute; top: 50%; right: 12px; z-index: 2;
  transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0;
  border: 0; background: none;
  cursor: pointer;
  opacity: .75;
}
#banner .theme-toggle:hover { opacity: 1; }
#banner .theme-toggle:focus { outline: none; }
#banner .theme-toggle:focus-visible { outline: 1px dotted #fff; }  /* keyboard users only */
.theme-toggle .toggle-sprite {
  display: block; width: 48px; height: 48px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
/* show the moon in light mode (click for dark), the sun in dark mode (click for light) */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@keyframes twinkle { 50% { opacity: .25; } }

#ticker {
  background: #000;
  color: #7CFC00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 2px solid #000;
  overflow: hidden;
  white-space: nowrap;
}
#ticker .ticker-track {
  display: inline-block;
  will-change: transform;
}
#ticker .ticker-sep {
  display: inline-block;
  padding: 0 48px;   /* space on each side of the hyphen between lines */
}

/* ---------- nav strip (jumps within the page) ---------- */
#nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
}
#nav a {
  display: inline-block;
  padding: 2px 10px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  color: var(--btn-text);
  text-decoration: none;
  font-weight: bold;
}
#nav a:hover { background: var(--btn-hover); }
#nav a.current {
  background: linear-gradient(var(--btn-bottom), var(--btn-top));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}

/* ---------- 3-column layout ---------- */
#cols {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 10px;
  padding: 10px;
}
/* phone layout is at the end of this file */

.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  margin-bottom: 10px;
}
.box h2 {
  margin: 0;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(var(--head-blue));
  border-bottom: 1px solid var(--head-blue-edge);
  text-transform: lowercase;
  letter-spacing: .5px;
}
.box h2::before { content: "» "; color: var(--head-bullet); }
.box .in { padding: 7px; line-height: 1.5; }
.box.orange h2 { background: linear-gradient(var(--head-orange)); border-color: var(--head-orange-edge); }
.box.pink h2   { background: linear-gradient(var(--head-pink));   border-color: var(--head-pink-edge); }
.box.green h2  { background: linear-gradient(var(--head-green));  border-color: var(--head-green-edge); }

/* profile */
.avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--site-border);
  background:
    repeating-linear-gradient(45deg, var(--avatar-a) 0 8px, var(--avatar-b) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  color: var(--avatar-text); font-weight: bold; text-align: center;
  margin-bottom: 6px;
}
.avatar.has-pic { background: var(--well-bg); padding: 0; overflow: hidden; }
.avatar.has-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar img.pixelated { image-rendering: pixelated; }
.status-row { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--box-divider); padding: 2px 0; }
.status-row b { color: var(--text-label); }
.online { color: var(--online); font-weight: bold; }
.online::before { content: "●"; margin-right: 3px; animation: twinkle 1s infinite steps(2); }

/* main column */
.welcome {
  border: 2px dashed var(--welcome-border);
  background: var(--welcome-bg);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.welcome h3 { margin: 0 0 4px; font-size: 14px; color: var(--welcome-title); }
.blink { animation: twinkle 1s infinite steps(2); }

.entry { border-bottom: 1px dashed var(--box-divider); padding: 6px 0; }
.entry:last-child { border-bottom: 0; }
.entry .date { font-weight: bold; color: var(--date); }
.entry .mood { color: var(--text-muted); font-size: 10px; }
.entry-meta { margin-bottom: 2px; }
.entry-title { font-weight: bold; font-size: 12px; margin: 2px 0; }
.entry-body { overflow-wrap: anywhere; }
.entry-toggle {
  background: none; border: 0; padding: 0; margin: 0 1px 0 0;
  width: 14px; font: inherit; font-size: 14px; line-height: 1;
  color: var(--text-muted); cursor: pointer; vertical-align: 0;
}
.entry-toggle:hover { color: var(--text); }
.entry-toggle:focus { outline: none; }
.entry-toggle:focus-visible { outline: 1px dotted var(--text-muted); }
.entry.collapsed .entry-title, .entry.collapsed .entry-body { display: none; }   /* collapsed: only the date line stays */
.entry.collapsed .entry-meta { margin-bottom: 0; }
.entries .entry:last-child { border-bottom: 0; }
.load-more-row { position: relative; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--box-divider); text-align: center; }
.load-more-row .show-all { position: absolute; right: 0; bottom: 0; font-size: 10px; font-weight: bold; color: var(--text-muted); text-decoration: none; opacity: .8; }
.load-more-row .show-all:hover { color: var(--text); background: none; text-decoration: underline; opacity: 1; }   /* like "see all" */
.load-more-row .btn { text-decoration: none; display: inline-block; }
.load-more-row .btn.busy { opacity: .6; cursor: default; }
.load-more-row .optional { margin-top: 3px; font-size: 9px; }

/* category label (color comes from the category itself) */
.cat-label {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9px; font-weight: bold; line-height: 14px;
  color: #fff !important;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  vertical-align: 1px;
}
.cat-label:hover { background: inherit; filter: brightness(1.15); }
.pin-label { font-size: 9px; font-weight: bold; color: var(--text-label); }
.pin-label::before { content: "▲ "; }

/* "see all" in a box title */
.box h2 .see-all {
  float: right;
  font-weight: normal;
  color: #fff;
  opacity: .6;
  text-decoration: none;
}
.box h2 .see-all:hover { opacity: 1; background: none; text-decoration: underline; }

/* middle column while a view is loading */
#middle.loading { opacity: .6; cursor: progress; }

/* updates view */
.cat-filter { padding-bottom: 5px; margin-bottom: 2px; border-bottom: 1px solid var(--box-divider); }
.cat-filter a.current { font-weight: bold; color: var(--text); text-decoration: none; }
.pager { margin-top: 4px; text-align: center; }
.pager .where { margin: 0 10px; color: var(--text-muted); }
.pager .off { color: var(--text-muted); opacity: .5; }
.notice { padding: 6px; border: 1px dashed var(--error); color: var(--error); }
.empty { padding: 6px 0; color: var(--text-muted); font-style: italic; }

/* BBCode formatting in posts */
.bb-u { text-decoration: underline; }
.bb-c-red { color: var(--bb-red); }       .bb-c-orange { color: var(--bb-orange); }
.bb-c-yellow { color: var(--bb-yellow); } .bb-c-green { color: var(--bb-green); }
.bb-c-blue { color: var(--bb-blue); }     .bb-c-purple { color: var(--bb-purple); }
.bb-c-pink { color: var(--bb-pink); }     .bb-c-gray { color: var(--bb-gray); }
.bb-small { font-size: 9px; }
.bb-big { font-size: 15px; }
.bb-huge { font-size: 22px; line-height: 1.2; }
.bb-quote {
  margin: 5px 0 5px 4px; padding: 4px 8px;
  border-left: 3px solid var(--box-divider);
  background: var(--well-bg);
}
.bb-quote-who { font-size: 10px; font-weight: bold; color: var(--text-muted); }
.bb-spoiler { background: var(--text); color: transparent; border-radius: 2px; padding: 0 2px; cursor: help; }
.bb-spoiler:hover, .bb-spoiler:focus { background: transparent; color: inherit; }
.bb-img-link { display: inline-block; max-width: 100%; margin: 4px 0; vertical-align: top; cursor: pointer; }
.bb-img-link:hover { background: none; }
/* small preview (click for the popup), with a border a bit darker than the post background */
.bb-img { display: block; max-width: 100%; max-height: 160px; width: auto; height: auto; border: 2px solid color-mix(in srgb, var(--box-bg), #000 18%); }
.bb-img { transition: border-color .12s; }
/* hover: the border lights up a little in the accent green (border color only) */
.bb-img-link:hover .bb-img, .bb-img-link:focus-visible .bb-img { border-color: color-mix(in srgb, var(--accent) 75%, var(--box-bg)); }

ul.tight { margin: 0; padding-left: 16px; }
ul.tight li { margin: 2px 0; }

.tags span {
  display: inline-block; margin: 2px 1px;
  padding: 1px 5px;
  background: var(--tag-bg); border: 1px solid var(--tag-border);
}

/* forms */
.btn {
  font: inherit; font-weight: bold; cursor: pointer;
  padding: 2px 8px;
  color: var(--btn-text);
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--btn-border); border-radius: 3px;
}
.btn:active { background: var(--btn-bottom); }

/* counter */
.counter { text-align: center; }
.digits { display: inline-flex; gap: 1px; margin: 4px 0; }
.digits span {
  background: #000; color: #ff3b3b;
  font: bold 16px "Courier New", monospace;
  padding: 1px 3px; border: 1px solid #444;
}

#footer {
  border-top: 2px solid var(--site-border);
  background: var(--bar-bg);
  padding: 8px;
  text-align: center;
  font-size: 10px;
  color: var(--bar-text);
}
/* "under construction" label: black + yellow hazard stripes */
.uc-wrap { text-align: center; padding: 14px 0; }
.uc {
  display: inline-block; padding: 2px 8px; font-size: 11px;
  /* stripes as a repeating square tile, so every stripe lands on the same pixels (a
     repeating diagonal gradient came out uneven at normal zoom) */
  background-color: #ffd800;
  background-image: linear-gradient(-45deg, #000 25%, transparent 25% 50%, #000 50% 75%, transparent 75%);
  background-size: 20px 20px;
  color: #fff; font-weight: bold;
  /* full 1px outline all the way around + a soft dark glow, so the text and icons read over the stripes */
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000,
               -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000;
  border: 1px solid #000;
}

.hp { position: absolute; left: -9999px; }  /* hidden field that only bots fill in */
.form-err { color: var(--error); font-weight: bold; margin-bottom: 5px; }
.form-ok { color: var(--ok); font-weight: bold; margin-bottom: 5px; }
.optional { color: var(--text-muted); font-size: 10px; }
input, textarea {
  font: inherit;
  background: var(--input-bg); color: var(--input-text);
  border: 1px solid var(--input-border); padding: 2px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- profile ---------- */
.status-msg {
  position: relative;
  margin: 2px 0 6px;
  padding: 4px 6px;
  border: 1px dashed var(--box-divider);
  font-style: italic;
  cursor: default;
}
.status-label { font-style: normal; font-weight: bold; color: var(--text-label); }
/* little bubble with when the status was set (hover, or tab to it) */
.status-msg::after {
  content: attr(data-set);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal; font-size: 10px;
  padding: 2px 6px;
  background: var(--tooltip-bg); color: var(--tooltip-text);
  border: 1px solid var(--tooltip-border);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  display: none; z-index: 5;
}
.status-msg::before {
  content: "";
  position: absolute; left: 50%; bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tooltip-border); border-bottom: 0;
  display: none; z-index: 5;
}
.status-msg:hover::after, .status-msg:focus::after,
.status-msg:hover::before, .status-msg:focus::before { display: block; }
.status-msg:focus { outline: 1px dotted var(--text-muted); }

/* ---------- music player (looks the same in both themes, like a little device) ---------- */
.player-screen {
  background: #050805;
  border: 2px inset #666;
  padding: 4px 5px 3px;
  color: var(--accent);
  font-family: "Courier New", monospace;
  font-size: 11px;
}
.player-title { overflow: hidden; white-space: nowrap; height: 14px; }
.player-title-text { display: inline-block; }
.player-vis { display: block; width: 100%; height: 22px; margin: 3px 0 2px; image-rendering: pixelated; }
.player-time { font-size: 10px; color: #7fd99a; text-align: right; }
.player .player-seek { width: 100%; margin: 5px 0 2px; }   /* .player prefix so it beats the general .slider rule */
.player-controls { display: flex; align-items: center; gap: 3px; }
.player-controls .btn { padding: 1px 6px; min-width: 26px; font-size: 10px; }
.player .player-vol { flex: 1; min-width: 0; }
.player-count { margin-top: 3px; font-size: 9px; color: var(--text-muted); text-align: right; }

/* ---------- sliders (<input type="range" class="slider">) ----------
   sunken track like the poll bars, glossy green fill up to the handle,
   beveled handle with grip lines like the site's buttons.
   script.js keeps --fill (0%..100%) in sync with the value. */
.slider {
  -webkit-appearance: none; appearance: none;
  height: 14px; padding: 0; margin: 0;
  background: transparent; border: 0;
  cursor: pointer;
  --fill: 0%;
}
.slider:disabled { opacity: .5; cursor: default; }
.slider:focus { outline: none; }
.slider:focus-visible { outline: 1px dotted var(--text-muted); outline-offset: 1px; }

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid var(--box-border);
  border-radius: 3px;
  background:
    linear-gradient(var(--head-green)) 0 0 / var(--fill) 100% no-repeat,
    var(--well-bg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.slider::-moz-range-track {
  height: 6px;
  border: 1px solid var(--box-border);
  border-radius: 3px;
  background: var(--well-bg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.slider::-moz-range-progress {
  height: 6px;
  border: 1px solid var(--box-border); border-right: 0;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(var(--head-green));
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 14px;
  margin-top: -5px;
  border: 1px solid var(--btn-border);
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 3px, rgba(0,0,0,.28) 3px 4px, transparent 4px 5px, rgba(0,0,0,.28) 5px 6px, transparent 6px),
    linear-gradient(var(--btn-top), var(--btn-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
}
.slider::-moz-range-thumb {
  width: 9px; height: 12px;
  border: 1px solid var(--btn-border);
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 2px, rgba(0,0,0,.28) 2px 3px, transparent 3px 5px, rgba(0,0,0,.28) 5px 6px, transparent 6px),
    linear-gradient(var(--btn-top), var(--btn-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
}
.slider:not(:disabled):hover::-webkit-slider-thumb { border-color: var(--control-hover); }
.slider:not(:disabled):hover::-moz-range-thumb { border-color: var(--control-hover); }

/* ---------- radio buttons: sunken circle, glossy green dot when picked ---------- */
input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px;
  margin: 0 4px 0 0; padding: 0;
  vertical-align: -2px;
  border: 1px solid var(--btn-border);
  border-radius: 50%;
  background: var(--input-bg);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
  cursor: pointer;
}
input[type="radio"]:hover { border-color: var(--control-hover); }
input[type="radio"]:checked {
  background:
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle, #6fdc5a 0 2.6px, #2f7d22 3.2px, transparent 3.8px),
    var(--input-bg);
}
input[type="radio"]:focus { outline: none; }
input[type="radio"]:focus-visible { outline: 1px dotted var(--text-muted); outline-offset: 1px; }
.poll-option:has(input:checked) { font-weight: bold; }

/* ---------- poll ---------- */
.poll-q { font-weight: bold; margin-bottom: 5px; }
.poll-option { display: block; margin: 2px 0; cursor: pointer; }

#poll .btn { margin-top: 4px; }
.poll-total { font-size: 10px; color: var(--text-muted); }
.poll-result { margin-bottom: 5px; }
.poll-result.mine .poll-label { font-weight: bold; }
.poll-result.mine .poll-label::after { content: " ✓"; color: var(--ok); }
.poll-pct { float: right; color: var(--text-muted); }
.poll-bar { height: 8px; border: 1px solid var(--box-border); background: var(--well-bg); }
.poll-bar div { height: 100%; background: linear-gradient(var(--head-green)); }

/* ---------- guestbook ---------- */
.gb-entry { border-bottom: 1px dashed var(--box-divider); padding: 5px 0; }
.gb-entry:last-of-type { border-bottom: 0; }
.gb-name, .gb-name a { color: var(--gb-name); }
.gb-date { font-size: 10px; color: var(--text-muted); }
.gb-msg { overflow-wrap: anywhere; }
.gb-sign-link { display: block; margin-top: 4px; font-size: 10px; text-align: right; }
.gb-form label { display: block; margin-bottom: 5px; font-weight: bold; }
.gb-form label input, .gb-form label textarea { display: block; width: 100%; font-weight: normal; margin-top: 1px; }
.gb-form textarea { resize: vertical; }
.gb-row { display: flex; gap: 8px; }
.gb-row label { flex: 1; }
#guestbook-preview .gb-entry { border-bottom: 0; padding-top: 0; }
/* hide links etc. inside spoilers too */
.bb-spoiler:not(:hover):not(:focus) * { color: transparent !important; }

/* ---------- past polls view ---------- */
.past-poll { padding: 8px 0; border-bottom: 1px dashed var(--box-divider); }
.past-poll:last-of-type { border-bottom: 0; }
.past-poll .poll-q { margin-bottom: 1px; }
.past-poll-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.poll-result.winner .poll-label { font-weight: bold; }
.poll-result.winner .poll-label::after { content: " ★"; color: var(--date); }

/* ---------- playlist view ---------- */
.playlist { list-style: none; margin: 0 0 6px; padding: 0; }
.playlist .track {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px;
  border-bottom: 1px dotted var(--box-divider);
}
.playlist .track:last-child { border-bottom: 0; }
.playlist .track-play { padding: 1px 0; width: 26px; font-size: 10px; flex: none; }
.playlist .track-num { color: var(--text-muted); font-family: "Courier New", monospace; flex: none; }
.playlist .track.now { background: var(--well-bg); }
.playlist .track.now .track-title { font-weight: bold; }
.playlist .track.now .track-num { color: var(--ok); }

/* ---------- art gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--box-border);
  background: var(--well-bg);
  cursor: pointer;
  overflow: hidden;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item:hover, .gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.gallery-item.featured { border-color: var(--date); }
.featured-badge {
  position: absolute; top: 2px; right: 3px;
  color: #ffe08a; font-size: 13px; line-height: 1;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
img.pixelated { image-rendering: pixelated; }

/* popup (also used by the post image viewer, .image-viewer) */
.gallery-dialog {
  width: min(860px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 2px solid var(--site-border);
  background: var(--box-bg);
  color: var(--text);
  box-shadow: 6px 6px 0 var(--site-shadow);
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 11px;
}
.gallery-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.gd-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 4px 3px 8px;
  color: #fff; font-weight: bold;
  background: linear-gradient(var(--head-pink));
  border-bottom: 1px solid var(--head-pink-edge);
}
.gd-bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-bar-title::before { content: "» "; color: var(--head-bullet); }
.gd-close {
  font: bold 10px Verdana, sans-serif; cursor: pointer;
  padding: 1px 6px; color: var(--btn-text);
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--btn-border); border-radius: 3px;
}
.gd-close:hover { background: var(--btn-hover); }
.gd-body { display: flex; gap: 0; max-height: calc(92vh - 28px); }
.gd-stage {
  position: relative; flex: 1 1 62%;
  display: flex; align-items: center; justify-content: center;
  background: var(--well-bg);
  min-height: 240px;
}
.gd-img { max-width: 100%; max-height: calc(92vh - 40px); object-fit: contain; display: block; }
.gd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 44px; padding: 0;
  cursor: pointer; font-size: 12px; color: #fff;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .25);
}
.gd-arrow:hover { background: rgba(0, 0, 0, .7); }
.gd-arrow:disabled { opacity: .15; cursor: default; }
.gd-prev { left: 4px; } .gd-next { right: 4px; }
.gd-info { flex: 1 1 38%; padding: 10px; overflow-y: auto; border-left: 1px solid var(--box-divider); }
.gd-title { margin: 0 0 3px; font-size: 14px; color: var(--welcome-title); }
.gd-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.gd-tags { margin-bottom: 8px; }
.gd-tag {
  display: inline-block; margin: 0 3px 3px 0; padding: 0 6px;
  border: 1px solid var(--tag-border); border-radius: 8px; background: var(--tag-bg);
  color: var(--text); text-decoration: none; font-size: 10px;
}
.gd-desc { line-height: 1.5; }
@media (max-width: 640px) {
  .gd-body { flex-direction: column; overflow-y: auto; }
  .gd-info { border-left: 0; border-top: 1px solid var(--box-divider); }
}

/* ---------- post image viewer: [img] previews open here, just the image ---------- */
/* the window is exactly as wide as the image (fit-content; "auto" stretches it in Firefox) */
.image-viewer { width: fit-content; max-width: 94vw; overflow: hidden; }
.image-viewer .gd-bar { justify-content: flex-end; background: linear-gradient(var(--head-blue)); border-bottom-color: var(--head-blue-edge); }
.iv-stage { display: block; line-height: 0; }
.iv-img { display: block; max-width: 94vw; max-height: calc(92vh - 26px); width: auto; height: auto; }

/* =========================================================
   PHONES (760px and narrower)
   Works like an app: the navbar is replaced by text tabs fixed at the bottom
   (home, updates, music, gallery, more), and each tab shows only its own
   content. The side columns' boxes are hidden, except the ones a page uses:
     home:  profile, welcome, recent updates, poll, links, interests
     music: the music player (full size) above the playlist
   #site's data-view (set by PHP, kept in step by script.js) says which page is showing.
   Public pages only (the control room is used on a computer).
   ========================================================= */
.phone-only { display: none; }
#tabbar { display: none; }
@media (max-width: 760px) {
  .phone-only { display: inline; }
  .wide-only { display: none; }

  body { padding: 0; font-size: 12px; }
  #site:not(.admin) {
    border-left: 0; border-right: 0; box-shadow: none;
    min-height: 100vh; display: flex; flex-direction: column;   /* short pages still fill the screen */
    box-sizing: border-box;
    padding-bottom: 62px;                                          /* room for the tab bar... */
  }
  #site:not(.admin):has(#tabbar.has-track) { padding-bottom: 100px; }   /* ...and the now-playing strip */
  #site:not(.admin) > #cols { flex: 1; }

  /* header */
  #banner { padding: 12px 12px 10px; }
  #banner h1 { font-size: 28px; }
  #banner .tagline { font-size: 11px; padding-right: 50px; }

  /* the tab bar takes over from the navbar */
  #nav { display: none; }
  #tabbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bar-bg);
    border-top: 2px solid var(--site-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #tabs { display: flex; gap: 5px; padding: 6px 8px 8px; }
  #tabs a {
    flex: 1; min-width: 0; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(var(--btn-top), var(--btn-bottom));
    border: 1px solid var(--btn-border); border-radius: 3px;
    color: var(--btn-text); font-weight: bold; font-size: 12px; text-decoration: none;
  }
  #tabs a.current { background: linear-gradient(var(--btn-bottom), var(--btn-top)); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }

  /* "now playing" strip: looks like the player's screen; only once a track has started,
     and not on the music tab (the full player is right there) */
  .now-playing {
    display: none; align-items: center; gap: 7px;
    margin: 6px 8px 0; padding: 6px 8px;
    background: #050805; border: 2px inset #666;
    color: var(--accent); font: 12px "Courier New", monospace; text-decoration: none;
  }
  .now-playing:hover { background: #050805; color: var(--accent); }
  #tabbar.has-track .now-playing { display: flex; }
  #site[data-view="playlist"] .now-playing { display: none; }
  .np-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .np-time { color: #7fd99a; }

  /* one column: every page shows only its own content */
  #cols { display: flex; flex-direction: column; gap: 0; padding: 8px; }
  #left, #middle, #right { display: contents; }
  #left > *, #right > * { display: none; }
  #middle > * { order: 10; min-width: 0; }

  /* home: profile, welcome, recent updates, poll, links, interests */
  #site[data-view="home"] #profile { display: block; order: 1; }
  #site[data-view="home"] #about { order: 2; }
  #site[data-view="home"] #recent-updates { order: 3; }
  #site[data-view="home"] #poll { display: block; order: 4; }
  #site[data-view="home"] #links { display: block; order: 5; }
  #site[data-view="home"] #interests { order: 6; }

  /* music: the full-size player above the playlist */
  #site[data-view="playlist"] #music-player { display: block; order: 1; }

  /* more: big buttons */
  .more-list { display: flex; flex-direction: column; gap: 8px; }
  .more-list .btn { display: block; padding: 12px; font-size: 14px; text-align: center; text-decoration: none; }

  /* compact profile: picture on the left, status + info beside it */
  #profile .in { display: grid; grid-template-columns: 84px 1fr; column-gap: 10px; align-items: start; }
  #profile .avatar { grid-row: 1 / span 3; margin: 0; font-size: 10px; }
  #profile .in > :not(.avatar) { grid-column: 2; }
  #profile .status-msg { margin-top: 0; }

  /* music player: finger-sized buttons and slider handles */
  .player-controls { gap: 6px; }
  .player-controls .btn { padding: 6px 10px; min-width: 42px; font-size: 12px; }
  .player .player-seek { margin: 8px 0 6px; }
  .slider { height: 24px; }
  .slider::-webkit-slider-thumb { width: 16px; height: 22px; margin-top: -9px; }
  .slider::-moz-range-thumb { width: 14px; height: 20px; }

  /* posts: a bigger area to tap for the collapse triangle */
  .entry-toggle { padding: 4px 6px; margin: -4px 0 -4px -6px; width: auto; }

  /* poll + forms: text boxes at 16px so phones don't zoom in when typing */
  #cols input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
  #cols textarea, #cols select { font-size: 16px; }
  input[type="radio"] { width: 16px; height: 16px; vertical-align: -3px; }
  #cols .btn { padding-top: 4px; padding-bottom: 4px; }

  /* popups use almost the whole screen */
  .gallery-dialog { width: 96vw; max-width: 96vw; }
  .image-viewer { width: fit-content; }
}