/* =========================================================
   0) CSS Variables
========================================================= */

:root{
  --ui-cyan:#5ef2ff;
  --ui-pink:#ff7ad9;
  --ui-violet:#a97aff;
  --ui-yellow:#ffe978;
  --ui-bg: rgba(10, 14, 28, .78);
  --ui-panel: rgba(18, 22, 40, .75);
  --ui-border: rgba(255,255,255,.16);
  --ui-glow: 0 0 10px rgba(94,242,255,.35), 0 0 20px rgba(255,122,217,.25);
  --ui-radius: 10px;
  --ui-space: clamp(10px, 1.2vw, 14px);
  --ui-focus: 0 0 0 2px #00f0ff, 0 0 14px rgba(0,240,255,.4);

  --floor-cell: clamp(36px, 8vw, 80px);     /* grid cell size */
  --floor-line: rgba(255,255,255,.28);      /* thin lines */
  --floor-acct: rgba(255,255,255,.42);      /* bold every 4th */
  --floor-speed: 2s;

  --body-pad: 8px;        /* matches .window-body L/R padding */
  --content-gap: 6px;     /* gap above content (Win95 gray) */
  --bevel: 2px;           /* white/gray border thickness */

  --titlebar-bg: linear-gradient(to right, #6e71f1, #ffffff);
  --titlebar-fg: #fff;

  --page-gradient: linear-gradient(to bottom,
    #ffb3de 0%,
    #e5bdf2 25%,
    #c5b1f5 50%,
    #a9a8f7 70%,
    #a1cdef 85%,
    #f2f2f2 100%
  );
}

/* =========================================================
   1) Reset & Page Base
========================================================= */

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

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Kanit', sans-serif;
  background: var(--page-gradient) fixed;
  /* Lock page scroll; content scrolls inside the window */
  overflow: hidden;
}

/* =========================================================
   2) Animations
========================================================= */

@keyframes glow {
  0%   { text-shadow: 0 0 5px #ff80c0, 0 0 10px #00ffff, 0 0 20px #ff80c0; }
  100% { text-shadow: 0 0 10px #00ffff, 0 0 20px #ff80c0, 0 0 30px #00ffff; }
}

@keyframes rushForward {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 var(--floor-cell), 0 var(--floor-cell),
                         0 calc(var(--floor-cell) * 4), 0 calc(var(--floor-cell) * 4); }
}

/* =========================================================
   3) Window (Win95/98 Look)
========================================================= */

/* OUTER BEZEL that surrounds the entire window */
/* Win95 bezel: diagonals at corners, center stays transparent */
.win95-bezel{
  /* thickness */ --b: 6px;
  /* outer ring */ --step: 2px; /* inner step */

  /* shades (top/left light, right/bottom dark) */
  --top1: #f2f2f2; --left1: #e4e4e4; --right1:#8a8a8a; --bot1: #5e5e5e;
  --top2: #fafafa; --left2: #ececec; --right2:#9a9a9a; --bot2: #6a6a6a;

  position: relative;
  display: inline-block;
  padding: 0; /* bezel is drawn OUTSIDE, no extra inner padding */
}

/* OUTER ring */
.win95-bezel::before{
  content:"";
  position: absolute;
  inset: calc(-1 * var(--b)); /* draw the ring outside the box */
  pointer-events: none;
  z-index: 0;
  border-style: solid;
  border-width: var(--b);
  /* top | right | bottom | left -> gives the 45° corner join automatically */
  border-color: var(--top1) var(--right1) var(--bot1) var(--left1);
  /* optional hairline outside to crisp the edge */
  outline-offset: 0;
}

/* INNER step (second bevel just inside) */
.win95-bezel::after{
  content:"";
  position: absolute;
  inset: calc(-1 * var(--b) + var(--step));
  pointer-events: none;
  z-index: 0;
  border-width: var(--step);
  border-color: var(--top2) var(--right2) var(--bot2) var(--left2);
}

/* Window content above the bezel; keep glass transparent */
.win95-bezel > .container{
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* smooth fade support */
.win95-bezel .window-body .content {
  transition: opacity .18s ease;
}

/* when eyeball is ON, hide the content area text/UI inside the glass panel */
.win95-bezel.text-hidden .window-body .content {
  opacity: 0;
  pointer-events: none; /* optional: prevent clicks while hidden */
}

.container{
  position: relative;
  z-index: 2;
  width: clamp(360px, 78vw, 640px);
  height: clamp(520px, 82vh, 820px);
  display: grid;
  grid-template-rows: 28px 24px 1fr auto;
  overflow: hidden;
  color: #000;
  background: transparent;
  font-family: "Microsoft Sans Serif", Tahoma, sans-serif;
  border: none;         /* no black border */
  box-shadow: none;     /* bezel provides the frame */
}

.title-bar{
  position: relative; /* so controls can be absolutely placed */
  display: flex;
  align-items: center;
  gap: 0;

  /* reserve space on the right so the title never sits under the buttons */
  --btn-size: 18px;
  --btn-gap: 2px;
  padding: 0 2px 0 calc(2px); /* left padding same as before */
  padding-right: calc((var(--btn-size) * 3) + (var(--btn-gap) * 2) + 10px);

  color: var(--titlebar-fg);
  font-size: 13px;
  font-weight: bold;
  user-select: none;
  background: var(--titlebar-bg);
  overflow: visible; /* avoid any clipping halos */
}

.title-bar .title { padding-left: 4px; }

/* place the three buttons on top of the gradient, no masks needed */
.title-bar-controls{
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: var(--btn-gap);
  z-index: 2;
}

/* --- Toolbar (Win95) --- */
.container .toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 24px;
  padding: 2px 3px;
  border: none;
  background: #d4d4d4;
  /* thin etched line (white then dark) at the bottom */
  box-shadow: inset 0 -1px 0 #ffffff, inset 0 -2px 0 #808080;
}

.container .tool-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  filter: none;
}

.container .toolbar .tool-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #000;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
}

.container .toolbar .tool-link:hover {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.container .toolbar .tool-link:active,
.container .toolbar .tool-link.is-active {
  background: #dfdfdf;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.container .toolbar .tool-link.is-active::after { content: none; }

.container .toolbar .tool-sep {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: #808080;
  box-shadow: 1px 0 0 #ffffff; /* white line right next to it */
}

/* --- Window Body + Glass Panel --- */
.window-body{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0 var(--body-pad);
  background:
    linear-gradient(#d4d4d4 0 0) left top / var(--body-pad) 100% no-repeat,
    linear-gradient(#d4d4d4 0 0) right top / var(--body-pad) 100% no-repeat;
  background-color:transparent;
  scrollbar-gutter:stable both-edges;
  min-height:0;
}

.window-body::before{
  content:"";
  flex:0 0 calc(var(--body-pad) + var(--content-gap));
  background:#d4d4d4;
}

.window-body::after{
  content:"";
  flex:1 1 auto; /* <-- makes gray rise to fill emptiness */
  min-height:var(--body-pad); /* keep the usual bottom gutter */
  background:#d4d4d4;
}

.window-body .content{
  position:relative;
  isolation:isolate;

  display:flex;
  flex:0 1 auto;            /* <-- was 1 1 auto; now it doesn't hog space */
  max-height:100%;          /* cap so .content-scroll can kick in */
  min-height:0;
  overflow:hidden;
  margin:0;
  padding:0;

  /* Win95 bevel */
  border-top: var(--bevel) solid #808080;
  border-left: var(--bevel) solid #808080;
  border-right: var(--bevel) solid #ffffff;
  border-bottom: var(--bevel) solid #ffffff;
}

.window-body .content::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.04);
  pointer-events:none;
  z-index:0;
}

.content-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;           /* ⬅️ scrolling happens here */
  padding: 12px 14px;       /* inner spacing lives here */
}

.window-body .content > *{
  position: relative;
  z-index: 1;
}

/* Text styling inside the glass panel */
.window-body .content h1,
.window-body .content h2,
.window-body .content p,
.window-body .content a,
.window-body .content li {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.25);
}

/* ✅ Spacing between headings and paragraphs */
.window-body .content h1,
.window-body .content h2,
.window-body .content h3 {
  margin: 0 0 14px;   /* space under heading */
}

.window-body .content p {
  margin: 0 0 14px;   /* space under paragraphs */
}


/* --- Status Bar --- */
.container .status-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 16px; /* keeps the bar compact */
  font-family: "Microsoft Sans Serif", Tahoma, sans-serif;
  min-height: 30px;
  padding: 2px 3px;
  border: none;
  background: #d4d4d4;
  /* thin etched line (white then dark) at the top */
  box-shadow: inset 0 1px 0 #ffffff, inset 0 2px 0 #808080;
}

.container .status-panel {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  background: #d4d4d4;
  white-space: nowrap;
  padding: 2px 10px;
  font-size: inherit;
  line-height: inherit;
  padding: 1px 6px;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.status-panel{
  display: inline-flex;
  gap: 4px; /* modern + perfect spacing */
}



.container .status-panel.flex { flex: 1; }
.container .status-bar .sep { display: none; }

/* allow the bar to accommodate the 88x31 strip */
.container .status-bar{
  flex-wrap: wrap;          /* lets it go to a 2nd line on small widths */
  align-items: center;
}

/* Remove the Win95 "boxed" look from text panels only */
.container .status-panel:not(.status-buttons) {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0 6px;     /* keep some breathing room */
  min-height: 22px;   /* keep alignment nice */
}

/* Keep the button group panel boxed (as-is) */
.container .status-panel.status-buttons {
  background: #d4d4d4;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

/* --- Status bar: text looks "unboxed" but separated --- */
.container .status-panel:not(.status-buttons){
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0 8px;
  min-height: 22px;
}

/* Vertical separators between text panels (not around buttons) */
.container .status-panel:not(.status-buttons){
  position: relative;
}

/* put a separator before every text panel except the first ("Ready") */
.container .status-panel:not(.status-buttons):not(.flex)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;

  /* classic Win95 split line (dark + light) */
  width: 2px;
  background: linear-gradient(to right, #808080 0 1px, #ffffff 1px 2px);
  opacity: 0.9;
}

/* Keep the button group panel boxed */
.container .status-panel.status-buttons{
  background: #d4d4d4;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}


/* the button group panel */
.status-buttons{
  padding: 2px 4px;         /* a touch tighter than text panels */
}

/* strip layout */
.status-buttons{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* the 88x31 buttons */
.status-buttons .web88{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
}

.status-buttons .web88 img{
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated; /* keeps retro crispness when scaled */
}


/* =========================================================
   4) Chrome Bits (buttons, headers, nav)
========================================================= */

.window-btn{
  width: var(--btn-size);
  height: var(--btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d4d4d4;

  /* top/left light, right/bottom dark (not pure white all around) */
  border-style: solid;
  border-width: 1px;
  border-color: #fff #404040 #404040 #fff;

  /* inner ridge */
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #efefef;
  cursor: pointer;
}

.window-btn:active{
  border-color: #404040 #fff #fff #404040; /* pressed look */
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #efefef;
}

.window-btn svg{
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

/* Header inside the window */
header { padding-top: 6px; animation: none; }
header h1 {
  margin: 0;
  color: #000;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 40px;
  padding: 15px 0;
  color: #cccccc;
  font-size: 0.8rem;
}

/* Nav */
nav {
  display: flex;
  justify-content: center;
  gap: 20px;
}
nav a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0; /* explicit */
}

/* Sidebar nav overrides (Win95 hover) */
.sidebar nav {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.sidebar nav a:hover { background: #c0c0c0; }

/* Utility links / side links */
.side-link {
  display: block;
  color: #fff;
  border-radius: 4px;
  padding: 6px 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.side-link:hover { background: rgba(0,0,0); }
.side-link.is-active {
  background: rgba(255,255,255);
  font-weight: 600;
}

.sidebar nav a,
.sidebar nav a:hover,
.side-link,
.side-link:hover { cursor: pointer; }

/* Buttons / tabs / chips (vaporwave minimalist) */
.container button,
.container .btn,
.container .mini,
.container .chip,
.window-tabs .tab {
  margin: 6px 0;
}

.container button:hover { background: rgba(255, 255, 255, 0.08); }
.container button:active{ background: rgba(255, 255, 255, 0.2); }

.window-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.window-tabs .tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.15);
}

.chip { border-radius: 0; }
.chip.is-on { background: rgba(255, 255, 255, 0.15); }

/* =========================================================
   5) Gallery & Chips
========================================================= */

.album-gallery { margin-block: 1.5rem 2rem; }

.page-albums .gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 15px;
}


.page-albums .gallery-toolbar .chip {
  padding: 4px 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;

  --chip-a: #d4d4d4;
  --chip-b: #cfcfcf;
  --chip-glow: transparent;

  background: linear-gradient(135deg, var(--chip-a), var(--chip-b));
  border: 1px solid transparent;
  box-shadow: none;
}


.page-albums .gallery-toolbar .chip:hover {
  background: linear-gradient(135deg, var(--chip-a), var(--chip-b));
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  box-shadow: 0 0 8px var(--chip-glow);
}


.page-albums .gallery-toolbar .chip:active,
.page-albums .gallery-toolbar .chip.is-active {
  background: linear-gradient(135deg, var(--chip-a), var(--chip-b));
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-shadow: 0 0 10px var(--chip-glow);
}


/* Per-genre chip theme tokens (declared, use as needed) */
.page-albums .gallery-toolbar .chip[data-filter="all"] {
  --chip-a: rgba(94,242,255,.35);
  --chip-b: rgba(255,105,180,.35);
  --chip-glow: rgba(94,242,255,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="classic"] {
  --chip-a: rgba(255,182,193,.35);
  --chip-b: rgba(255,233,120,.30);
  --chip-glow: rgba(255,182,193,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="proto"] {
  --chip-a: rgba(255,189,89,.35);
  --chip-b: rgba(0,200,180,.30);
  --chip-glow: rgba(255,189,89,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="mallsoft"] {
  --chip-a: rgba(255,170,197,.35);
  --chip-b: rgba(255,200,170,.30);
  --chip-glow: rgba(255,170,197,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="late-night"],
.page-albums .gallery-toolbar .chip[data-filter="lofi"] {
  --chip-a: rgba(169,122,255,.35);
  --chip-b: rgba(20,40,100,.40);
  --chip-glow: rgba(169,122,255,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="funk"] {
  --chip-a: rgba(255,60,180,.40);
  --chip-b: rgba(255,140,60,.35);
  --chip-glow: rgba(255,60,180,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="vaportrap"] {
  --chip-a: rgba(0,240,255,.40);
  --chip-b: rgba(120,255,120,.32);
  --chip-glow: rgba(0,240,255,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="signalwave"] {
  --chip-a: rgba(120,180,255,.35);
  --chip-b: rgba(0,220,255,.35);
  --chip-glow: rgba(120,180,255,.55);
}
.page-albums .gallery-toolbar .chip[data-filter="slushwave"] {
  --chip-a: rgba(150,210,255,.35);
  --chip-b: rgba(180,160,255,.35);
  --chip-glow: rgba(150,210,255,.55);
}

/* =========================================================
   6) Album Grid & Cards
========================================================= */

/* Responsive grid that auto-fits square tiles */
.album-grid {
  --min: 160px;
  --max: 160px;
  --gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), var(--max)));
  gap: var(--gap);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.album-card { transition: opacity .18s ease, transform .18s ease; }
.album-card[hidden] { display: none; }

.album-card figure {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 1 / 1; /* square */
}
.album-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lift on hover/focus */
.album-card:focus-within figure,
.album-card:hover figure { transform: translateY(-2px); }

/* Make entire card clickable */
.album-card a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Caption overlay */
.album-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: 2px;
  padding: .55rem .7rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
  border-top: none;
}
.album-card figcaption * { color: inherit; }
.album-card .title-line{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.album-card .meta{
  font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-card figcaption strong {
  font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-card figcaption span {
  opacity: .85; font-size: .75rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* Homepage featured section */
.featured-songs {
  margin-block: 1rem 2rem;
}

/* Make featured grid tighter + smaller than albums page */
.album-grid--featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.album-grid--featured .album-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Optional: smaller text for featured */
.album-grid--featured .album-card figcaption {
  font-size: 11px;
}


/* =========================================================
   7) Lightbox
========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* toggled via .is-open */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: radial-gradient(1200px 800px at 50% 50%, rgba(255,105,180,.25), rgba(0,0,0,.92));
}
.lightbox.is-open { display: flex; }

.lightbox-img {
  max-width: min(92vw, 1024px);
  max-height: 78vh;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox-caption {
  max-width: 80ch;
  margin-top: .75rem;
  text-align: center;
  opacity: .9;
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: .45rem .6rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  background: rgba(0,0,0,.35);
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,.55); }

/* =========================================================
   8) Floor / Horizon (perspective grid)
========================================================= */

body{
  perspective: 900px;
  perspective-origin: 50% calc(50% - 8vh);
}

.floor{
  position: fixed;
  left: 50%;
  bottom: -10vh;
  z-index: 0;
  width: 180vw;
  height: 160vh;
  transform: translateX(-50%) rotateX(62deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: background-position;
}

.floor::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10%;
  height: 2px;
  background: radial-gradient(closest-side, rgba(255,255,255,.6), transparent);
  filter: blur(2px);
  opacity: .6;
  pointer-events: none;
}

/* =========================================================
   9) Utilities (icons, links)
========================================================= */

.tool-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}
.tool-link { color: #000; }

/* =========================================================
   10) Responsive (mobile tweaks)
========================================================= */

@media (max-width: 768px) {
  .container{
    width: min(640px, calc(100vw - 24px)); /* 24px = some breathing room */
    height: min(820px, calc(100vh - 24px));
    padding: 0; /* IMPORTANT: don’t pad the grid container */
  }

  /* optional: if you want interior breathing room on mobile, pad inside content */
  .content-scroll{
    padding: 12px 12px;
  }
}

/* Window background image (applies to all .container) */
.win95-bezel .container {
  position: relative;
  overflow: hidden;  /* clip image inside window frame */
}
.win95-bezel .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("wallpapers/mall/mallblur.jpg") center / cover no-repeat;
  opacity: 1;
  filter: saturate(110%) contrast(105%);
  pointer-events: none;
}

/* alternate image when toggled */
.win95-bezel.bg-alt .container::before {
  background: url("wallpapers/mall/mall2.jpg") center / cover no-repeat;
}

/* no image state: remove the window background image entirely */
.win95-bezel.bg-none .container::before {
  background: none !important;
  opacity: 0;        /* optional: fully hide the layer */
  filter: none;      /* optional: ensure no visual processing remains */
  transition: opacity .15s ease;
}

/* Off by default */
.win95-bezel .container::after { content: none; }

/* Show theme-specific image when the eye button makes the window image transparent */
.win95-bezel.bg-none .container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                /* above ::before; content is hidden anyway */
  pointer-events: none;

  /* Theme-provided values */
  background-image: var(--clear-img, none);
  background-position: var(--clear-pos, center);
  background-size: var(--clear-size, contain);
  background-repeat: no-repeat;

  /* Optional: add a soft dim behind the art for legibility
     background-image:
       linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)),
       var(--clear-img, none);
  */
  opacity: 0.85;
  transition: opacity .15s ease;
}

/* Mall */
body.theme-mall {
  --clear-img: url("wallpapers/mall/malltheme3.png");
  --clear-pos: center 52%;
  --clear-size: clamp(620px, 88vmin, 1000px);
}

/* Midnight */
body.theme-midnight {
  --clear-img: url("wallpapers/midnight/midnighttheme.png");
  --clear-pos: center 52%;
  --clear-size: clamp(620px, 88vmin, 1000px);
}

/* Pool (Aqua) */
body.theme-pool {
  --clear-img: url("wallpapers/aqua/pooltheme.png");
  --clear-pos: center;
  --clear-size: clamp(620px, 88vmin, 1000px);
}

/* Tropical (Jungle) */
body.theme-tropical {
  --clear-img: url("wallpapers/jungle/tropicaltheme2.png");
  --clear-pos: center 55%;
  --clear-size: clamp(620px, 88vmin, 1000px);
}

/* Snow */
body.theme-snow {
  --clear-img: url("wallpapers/snow/snowtheme.png");
  --clear-pos: center 48%;
  --clear-size: clamp(620px, 88vmin, 1000px);
}

/* make sure window content stays above */
.win95-bezel .container > * { position: relative; z-index: 1; }

/* Clickable label in the status bar */
.status-bar .status-panel .atmo {
  cursor: pointer;
  padding: 0 2px;
  user-select: none;
  text-decoration: none;
}
.status-bar .status-panel .atmo:focus-visible {
  outline: 2px dotted #000;
  outline-offset: 2px;
}

/* Make sure these win over earlier rules */
.status-bar .status-panel .atmo--clouds { color: var(--ui-pink); }   /* pink */
.status-bar .status-panel .atmo--tropical { color: #16c172; }        /* green */
.status-bar .status-panel .atmo--midnight { color: #920dc7; }        /* neon sky */
.status-bar .status-panel .atmo--mall { color: #fb85d6; }            /* peachy mallsoft */
.status-bar .status-panel .atmo--pool { color: #0fc3d3; }            /* aqua glow */
.status-bar .status-panel .atmo--snow { color: #ffffff; }            /* icy blue */


/* ===== THEME: Jungle (background swaps) ===== */


/* ===== THEME: Tropical (beach + statue + gradient) ===== */
html.theme-tropical,
body.theme-tropical {
  --titlebar-bg: linear-gradient(90deg, #1aa562, #18e7a3);

  /* TOP → BOTTOM: statue, beach photo, gradient wash */
  background-image:
    url("wallpapers/jungle/beach.jpg"),
    linear-gradient(to bottom,
      rgba(255,140,80,0.45) 0%,
      rgba(255,105,180,0.40) 40%,
      rgba(0,210,180,0.35) 75%,
      rgba(0,0,0,0.00) 100%
    );

  /* Position each layer */
  background-position:
    center center,          /* beach */
    center top;             /* gradient */

  /* Size each layer */
  background-size:
    cover,                     /* beach */
    cover;                     /* gradient */

  /* No tiling */
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* Keep layers fixed during scroll */
  background-attachment: fixed, fixed, fixed;
}

body.theme-tropical .win95-bezel .container::before {
  background-image: url('wallpapers/jungle/jungleblur.jpg');
}
body.theme-tropical .win95-bezel.bg-alt .container::before {
  background-image: url('wallpapers/jungle/jungle.jpg');
}

/* ===== THEME: Midnight ===== */

/* ===== THEME: Midnight (statue + city + KEEP page gradient) ===== */
/* Keep only the page gradient on Midnight */
html.theme-midnight,
body.theme-midnight {
  --titlebar-bg: linear-gradient(90deg, #200372, #B73A76);
  --page-gradient: linear-gradient(to bottom, #040153 0%, #0b065f 30%, #5A0C52 45%, #b11f7c 100%);

  background-image: var(--page-gradient);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#rainLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
#rainCanvas{ width:100%; height:100%; display:block; }




body.theme-midnight .win95-bezel .container::before {
  background-image: url('wallpapers/midnight/midnightcityblur2.jpg');
}
body.theme-midnight .win95-bezel.bg-alt .container::before {
  background-image: url('wallpapers/midnight/midnightcity2.jpg');
}

/* ===== Midnight scanlines: pink, thick, glowing ===== */
body.theme-midnight .floor{
  /* line + glow tokens for this theme */
  --scan-pink-core: #ff6ac9;   /* core line color */
  --scan-pink-bold: #ff4fb9;   /* bold every 4th */
  --scan-glow-a: rgba(255,106,201,.45); /* outer glow */
  --scan-glow-b: rgba(255,106,201,.25); /* softer outer */

  /* thickness (was 2px); bump it up */
  --scan-thin: 3px;  /* regular grid line thickness */
  --scan-bold: 6px;  /* every 4th grid line thickness */

  /* animate crisply & reduce shimmer */
  will-change: background-position, transform;
  backface-visibility: hidden;

  /* pink grid */
  background-image:
    linear-gradient(to right, var(--scan-pink-core) var(--scan-thin), transparent var(--scan-thin)),
    linear-gradient(to bottom, var(--scan-pink-core) var(--scan-thin), transparent var(--scan-thin)),
    linear-gradient(to right, var(--scan-pink-bold) var(--scan-bold), transparent var(--scan-bold)),
    linear-gradient(to bottom, var(--scan-pink-bold) var(--scan-bold), transparent var(--scan-bold));
  background-size:
    var(--floor-cell) var(--floor-cell),
    var(--floor-cell) var(--floor-cell),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4);
  animation: rushForward var(--floor-speed) linear infinite;
}

/* soft neon glow that tracks the animation */
body.theme-midnight .floor::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* blurred duplicates of the same grid for glow */
  background-image:
    linear-gradient(to right, var(--scan-glow-a) var(--scan-thin), transparent var(--scan-thin)),
    linear-gradient(to bottom, var(--scan-glow-a) var(--scan-thin), transparent var(--scan-thin)),
    linear-gradient(to right, var(--scan-glow-b) var(--scan-bold), transparent var(--scan-bold)),
    linear-gradient(to bottom, var(--scan-glow-b) var(--scan-bold), transparent var(--scan-bold));
  background-size:
    var(--floor-cell) var(--floor-cell),
    var(--floor-cell) var(--floor-cell),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4);
  filter: blur(3px);
  opacity:.9;

  /* keep the glow moving exactly with the base grid */
  animation: inherit;
  will-change: background-position;
}

/* keep your horizon streak white or tint it pink too */
body.theme-midnight .floor::before{
  background: radial-gradient(closest-side, rgba(255,106,201,.7), transparent);
}

/* ===== THEME: Mall ===== */
html.theme-mall,
body.theme-mall {
  --titlebar-bg: linear-gradient(90deg, #FAB2E1, #90BFFF);
  --page-gradient: linear-gradient(to bottom, #ffb3de 0%, #c5a3ff 40%, #7dd6ff 75%, #ffe6b3 100%);

  /* Don’t tile anything */
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* Keep it locked while scrolling */
  background-attachment: fixed, fixed, fixed;
}

body.theme-mall .win95-bezel .container::before {
  background-image: url('wallpapers/mall/mall2blur.jpg');
}
body.theme-mall .win95-bezel.bg-alt .container::before {
  background-image: url('wallpapers/mall/mall2.jpg');
}

/* Mall: classic white grid */
body.theme-mall .floor{
  background-image:
    linear-gradient(to right, var(--floor-line) 2px, transparent 2px),
    linear-gradient(to bottom, var(--floor-line) 2px, transparent 2px),
    linear-gradient(to right, var(--floor-acct) 2px, transparent 2px),
    linear-gradient(to bottom, var(--floor-acct) 2px, transparent 2px);
  background-size:
    var(--floor-cell) var(--floor-cell),
    var(--floor-cell) var(--floor-cell),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4),
    calc(var(--floor-cell) * 4) calc(var(--floor-cell) * 4);
  animation: rushForward var(--floor-speed) linear infinite;
}
body.theme-mall .floor::after{ content: none; } /* no glow for mall */

/* ===== THEME: Aqua ===== */

/* ===== THEME: Pool (statue + KEEP page gradient) ===== */
html.theme-pool,
body.theme-pool {
  --titlebar-bg: linear-gradient(90deg, #0cd3c6, #ED82E9);
  /* keep your pool page gradient */
  --page-gradient: linear-gradient(to bottom, #00eaff 0%, #3ef3d5 35%, #b38fff 70%, #ff7ee2 100%);

  /* TOP → BOTTOM: statue, page gradient */
  background-image:
    var(--page-gradient);
  background-position:
    center top;            /* page gradient */
  background-size:
    cover;                     /* gradient fills */
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

body.theme-pool .win95-bezel .container::before {
  background-image: url('wallpapers/aqua/aqua6blur.jpg');
}
body.theme-pool .win95-bezel.bg-alt .container::before {
  background-image: url('wallpapers/aqua/dolphins.jpg');
}

/* ===== THEME: Snow ===== */

/* ===== THEME: Snow (statue + KEEP page gradient) ===== */
html.theme-snow,
body.theme-snow {
  --titlebar-bg: linear-gradient(90deg, #8c9fc4, #DE8995);
  --page-gradient: linear-gradient(to bottom, #d7dfff 0%, #b6c9ff 30%, #cba6f7 65%, #ff9be0 100%);

  /* TOP → BOTTOM: statue, page gradient */
  background-image:
    var(--page-gradient);
  background-position:
    center top;          /* page gradient */
  background-size:
    cover;                     /* gradient fills */
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

body.theme-snow .win95-bezel .container::before {
  background-image: url('wallpapers/snow/snow3blur.jpg');
}
body.theme-snow .win95-bezel.bg-alt .container::before {
  background-image: url('wallpapers/snow/snow2.jpg');
}

/* canvas snow sits in front of bg/floor (z:0) but behind the window (.container z:2) */
#snowLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
#snowCanvas {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes snow-fall {
  0% {
    transform: translate3d(var(--x-start), -10vh, 0) rotate(0deg);
    opacity: 0;
  }
  5%  { opacity: var(--opacity); }
  100%{
    transform: translate3d(var(--x-end), 110vh, 0) rotate(360deg);
    opacity: 0;
  }
}
body.theme-snow .snowflake {
  position: absolute;
  top: 0; left: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0 40%, rgba(255,255,255,0) 60%);
  filter: blur(var(--blur));
  animation: snow-fall var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

/* Shared link styling */
.tool-link {
  display: inline-flex;
  align-items: center;
}

/* Icons inside text links */
.tool-link .tool-icon {
  width: 14px;  /* adjust as needed */
  height: 14px;
  margin-right: 0.4em; /* small gap between icon and text */
}

/* If the link has only an icon (like your buttons), remove the gap */
.tool-link:only-child .tool-icon,
.tool-link img:last-child:only-child {
  margin-right: 0;
}

#bgToggle {
  margin-left: auto;
}

#bgClear {
  margin-left: 0.5em;  
}


/* Content panel (readable "paper" style) */
.window-body .content{
  background: rgba(255,255,255,0.96);
}

/* remove blur overlay */
.window-body .content::before{
  background: none;
}

/* readable text */
.window-body .content h1,
.window-body .content h2,
.window-body .content h3,
.window-body .content p,
.window-body .content a,
.window-body .content li{
  color:#000;
  text-shadow:none;
}

.people-list{
  list-style: none;
  margin-top: 16px;
  padding: 0;
}

.person{
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.person-name{
  font-weight: 600;
}

.person-field{
  opacity: 0.7;
  font-size: 0.9em;
}