/* Base tokens everyone uses */
:root {
  --bg: #0b1e3b url("images/bg-stars.gif") repeat;
  --text: #00ffcc;
  --accent: #00ffff;
  --accent-2: #ffff66;
  --panel: #000;
  --panel-2: #001326;
  --frame: #ff9900;
  --link: var(--accent-2);
  --link-hover: #fff;
  --font: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
}

/* Midnight Neon (current) */
[data-theme="midnight-neon"] {
  --bg: #0b1e3b url("images/bg-stars.gif") repeat;
  --text: #00ffcc;
  --accent: #00ffff;
  --accent-2: #ffff66;
  --panel: #000;
  --panel-2: #001326;
  --frame: #ff9900;
  --link: var(--accent-2);
  --link-hover: #ffffff;
}

/* ---------- New Retro Themes ---------- */

/* 2) Vapor Sunset (vaporwave gradients + hot accents) */
[data-theme="vapor-sunset"]{
  --bg: #1c1230 url("images/bg-vapor-sunset.png") repeat;
  --text: #ffe7ff;
  --accent: #ff6ec7;
  --accent-2: #ffd166;
  --panel: rgba(10,6,22,0.92);
  --panel-2: rgba(24,16,44,0.92);
  --frame: #8ef7ff;
  --link: #ffd166;
  --link-hover: #ffffff;
  --font: "Trebuchet MS", Arial, sans-serif;
}

/* 3) CRT Phosphor (green glow, scanlines vibes) */
[data-theme="crt-phosphor"]{
  --bg: #0b0f0b url("images/bg-crt-phosphor.png") repeat;
  --text: #8cff9a;
  --accent: #5cff6a;
  --accent-2: #e6ffb3;
  --panel: #020402;
  --panel-2: #071107;
  --frame: #5cff6a;
  --link: #e6ffb3;
  --link-hover: #ffffff;
  --font: "Courier New", monospace;
}

/* 4) BBS Blue (dial-up midnight sysop energy) */
[data-theme="bbs-blue"]{
  --bg: #071a4a url("images/bg-bbs-blue.png") repeat;
  --text: #cde5ff;
  --accent: #4dd2ff;
  --accent-2: #ffcc66;
  --panel: #08122e;
  --panel-2: #0b1842;
  --frame: #4dd2ff;
  --link: #ffcc66;
  --link-hover: #ffffff;
  --font: "Trebuchet MS", Arial, sans-serif;
}

/* 5) Windows 95 (gray UI, teal flavor) */
[data-theme="win95"]{
  --bg: #c0c0c0 url("images/bg-win95.png") repeat;
  --text: #000;
  --accent: #000;          /* button borders */
  --accent-2: #008080;     /* teal */
  --panel: #ffffff;
  --panel-2: #e6e6e6;
  --frame: #000000;
  --link: #0000ee;
  --link-hover: #551a8b;
  --font: "Tahoma", "MS Sans Serif", Arial, sans-serif;
}

/* 6) Rainbow Bars (bright 1997 homepage energy) */
[data-theme="rainbow-bars"]{
  --bg: #000 url("images/bg-rainbow-bars.png") repeat;
  --text: #fff;
  --accent: #ffff66;
  --accent-2: #66ffff;
  --panel: rgba(0,0,0,0.86);
  --panel-2: rgba(10,10,10,0.86);
  --frame: #ff77ff;
  --link: #ffff66;
  --link-hover: #ffffff;
  --font: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
}

/* 7) Denim Grid (textured blue with stitch lines) */
[data-theme="denim-grid"]{
  --bg: #2a3a5a url("images/bg-denim-grid.png") repeat;
  --text: #e3eefc;
  --accent: #9bb7e0;
  --accent-2: #ffd48e;
  --panel: #0e1c33;
  --panel-2: #162540;
  --frame: #ffd48e;
  --link: #ffd48e;
  --link-hover: #ffffff;
  --font: "Trebuchet MS", Arial, sans-serif;
}

/* 8) Amiga Workbench 1.3 */
[data-theme="amiga-13"]{
  /* Solid Workbench blue background (no image needed) */
  --bg: url("images/wb13-scanline.png") repeat,
        url("images/wb13-dither.png") repeat,
		#0f3d99;

  /* Text + links */
  --text: #eaf2ff;          /* near-white, readable on blue */
  --link: #ffd48e;          /* yellowy “icon label” vibe */
  --link-hover: #ffffff;

  /* Window fills (outer + inner panels) */
  --panel:   #134aa9;       /* main frame/window body */
  --panel-2: #1f5fc1;       /* inner cards/secondary panels */

  /* Frame/trim (window borders & lines) */
  --frame:   #c6d9ff;       /* light blue “highlight” edge */

  /* Accents (status lines, subtle highlights) */
  --accent:   #bcd7ff;      /* pale light-blue */
  --accent-2: #ffa64d;      /* icon orange nod */

  /* Typeface nod to Topaz (falls back cleanly) */
  --font: "Topaz", "TopazPlus a600a8", "Lucida Console", "Courier New", monospace;
}


/* ===== Mobile layout (phones) ===== */
@media (max-width: 640px) {
  /* 1) Hide the big patterned wallpaper on phones */
  html, body {
    background-image: none !important;         /* obliterates theme bg images */
    background: var(--panel) !important;       /* keep solid/theme color behind frames */
  }

  /* 2) Keep everything inside a comfy “retro frame” width */
  .wrap { 
    width: 100%;
    max-width: 420px;                           /* ~iPhone/Android sweet spot */
    margin: 10px auto;
    padding: 0 6px;                             /* little breathing room */
    box-sizing: border-box;
  }

  /* 3) Fluid media */
  img, video, canvas, iframe { max-width: 100%; height: auto; }

  /* 4) Turn the table layout into a stacked single column */
  .tbl, .tbl tr, .tbl td { display: block; width: 100% !important; }
  .left { 
    width: auto !important;
    border-right: 0 !important;
    border-bottom: 2px groove var(--frame);     /* keeps the retro divider */
  }
  .right { padding: 12px; }

  /* 5) Banner + frames */
  .banner { width: 100%; height: auto; display: block; }
  .frame { margin-bottom: 10px; }               /* small vertical rhythm */

  /* 6) MIDI bar & visualizer — tidy for touch */
  .midi-bar { gap: 6px; padding: 6px; }
  .midi-btn { padding: 6px 8px; }               /* larger touch targets */
  .midi-time { min-width: 96px; }
/* a bit shorter on phones */

  /* 7) Forms & inputs (Guestbook/Games/Music pages) */
  input[type="text"], input[type="email"], textarea, select {
    font-size: 16px;                             /* prevents iOS zoom-on-focus */
  }
}

/* ===== Small tablets (optional nicety) ===== */
@media (min-width: 641px) and (max-width: 900px) {
  .wrap { max-width: 700px; }
}

.cap { background: var(--panel-2); border:1px solid var(--frame); padding:8px; text-align:center; }
.cap figcaption { margin-top:6px; font-size:12px; color: var(--muted, #9bb); }
.img-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
@media (max-width: 640px){ .img-grid { grid-template-columns: 1fr; } }

.banner-frame { padding:0 !important; border:none !important; background:transparent !important; }

/* === Jukebox (global) ===================================================== */
#jukebox{ margin:8px 0; }
#jukebox .frame.midi-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  /* Force consistent padding even if a page sets .frame padding */
  padding:6px 8px !important;
  background:var(--panel-2);
  border:2px ridge var(--frame);
  border-bottom:2px groove var(--frame);
}
#jukebox .midi-btn{
  cursor:pointer; border:1px outset var(--accent);
  background:color-mix(in srgb, var(--panel-2) 70%, black);
  color:var(--link); padding:3px 6px;
}
#jukebox .midi-btn:hover{ border-style:inset; color:var(--link-hover); }
#jukebox .midi-check{ display:flex; align-items:center; gap:4px; font-size:12px; color:#9cf; }
#jukebox .title{ flex:1; min-width:160px; text-align:right; font-size:12px; color:#9cf; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#jukebox .midi-time{ font-size:12px; color:#9cf; min-width:110px; text-align:center; border:1px solid var(--accent); padding:2px 6px; }
#jukebox .midi-vol{ display:flex; align-items:center; gap:6px; }
#jukebox .midi-vol input{ width:100px; }
@media (max-width:520px){
  #jukebox .title{ display:none; }
}
/* ========================================================================= */

/* Utility: tight frame (no inner padding) */
.frame--tight{ padding:0 !important; }
/* Utility: remove frame border */
.frame--noborder{ border:none !important; }
/* Banner wrapper: no border, no bg, no padding */
.banner-frame{ padding:0 !important; border:none !important; background:transparent !important; }


/* === Long-link and inline-code wrapping ================================ */
.frame p a, .frame li a, .article a, .right a, .content a {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Allow long text in general content blocks to wrap nicely */
.u-wrap, .article, .frame p, .frame li {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Inline code shouldn't force horizontal scroll; keep pre blocks scrollable */
:not(pre) > code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* ====================================================================== */