/* :::::::::::::::::::::::::::::::::::: */
/* ::  KOOHEJI SYSTEMS 1999 / CSS v1 :: */
/* :::::::::::::::::::::::::::::::::::: */

:root {
  --bg: #000;
  --fg: #bcc6cc;
  --muted: #0b0b80;
  --blue: #0000ff;
  --accent: #8500fa;
  --accentblue: #0018efa8;
  --accentviolet: #8f28fe;
  --accentpurple: #341480;
  --shadow-blue: #0000ff80;
  --white: #ffffff;

  --font: "MS Gothic", monospace;

  --col: 200px; /* track width incl. border (see box-sizing) */
  --gap: 10px;
  --r1: 250px;
  --r2: 300px;
  --r3: 200px;
  --r4: 40px;
}

/* Make borders count inside the width so 200px fits even with 1px border */
/* borders etc. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==================================== */
/* =         THEME & BASE             = */
/* ==================================== */

html,
body {
  margin: 0; /* remove default 8px margin that causes tiny overflows */
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  /* Firefox scrollbar */
  scrollbar-color: var(--blue) var(--bg);
  scrollbar-width: auto;
  cursor: url("../img/sword.png"), auto;
}

body {
  min-height: 100dvh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-family: var(--font);
  font-size: 13px;
  color: var(--fg);
  background-color: #000;

  background: radial-gradient(
        circle at top right,
        rgba(121, 68, 154, 0.028),
        transparent
      )
      no-repeat fixed,
    radial-gradient(circle at 20% 80%, rgba(41, 194, 255, 0.056), transparent)
      no-repeat fixed,
    url("../img/stars.gif") center / 498px auto repeat fixed;
  /*           ^ position / size ^      ^ repeat ^  ^ attachment ^ */
}

/* WebKit scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 10px;
}

html.embedded,
body.embedded {
  margin: 0; /* kill default body margin */
  padding: 0;
}

/* ==================================== */
/* =         Global Elements          = */
/* ==================================== */

a,
button,
.linkbutton,
.button,
.game-selection img {
  cursor: url("../img/glove.png"), pointer;
}

.cell {
  border: 1px solid var(--blue);
  box-shadow: 4px 4px 3px 1px var(--shadow-blue);
  background: #000;
  overflow: hidden;
}

iframe {
  display: block;
  border: 0px;
}

#bg-stars {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  z-index: 0; /* sits above body bg but below your content */
  pointer-events: none; /* don’t block clicks/hover */
}

.wave {
  background: var(--bg) url("../img/wave.gif") repeat-x !important;
  background-size: 320px 320px;
}

.bnr {
  background: var(--blue);
  color: #fff;
  padding: 5px;
  font-weight: bold;
  height: 25px;
}

/* ==================================== */
/* =         LAYOUT                   = */
/* ==================================== */

.container {
  display: grid;
  grid-template-columns: repeat(4, var(--col));
  grid-template-rows: var(--r1) var(--r2) var(--r3) var(--r4) var(--r5);
  gap: var(--gap);
  width: calc(4 * var(--col) + 3 * var(--gap));
  margin: 0 auto; /* center on page */
  position: relative;
  z-index: 1;
}
/* column helpers (same idea as before) */
.s1 {
  grid-column-end: span 1;
}
.s2 {
  grid-column-end: span 2;
}
.s3 {
  grid-column-end: span 3;
}
.s4 {
  grid-column-end: span 4;
}
.st1 {
  grid-column-start: 1;
}
.st2 {
  grid-column-start: 2;
}
.st3 {
  grid-column-start: 3;
}
.st4 {
  grid-column-start: 4;
}

/* row helpers */
.rt1 {
  grid-row-start: 1;
}
.rt2 {
  grid-row-start: 2;
}
.rt3 {
  grid-row-start: 3;
}
.rt4 {
  grid-row-start: 4;
}
.rt4 {
  grid-row-start: 4;
}
.rt5 {
  grid-row-start: 5;
}
.rt6 {
  grid-row-start: 6;
}
.rspan-1 {
  grid-row-end: span 1;
}
.rspan-2 {
  grid-row-end: span 2;
}
.rspan-3 {
  grid-row-end: span 3;
}
.rspan-4 {
  grid-row-end: span 4;
}

.gc-1-1 {
  grid-column: 1 / span 1;
}

.gc-1-2 {
  grid-column: 1 / span 2;
}
.gc-1-3 {
  grid-column: 1 / span 3;
}
.gc-1-4 {
  grid-column: 1 / span 4;
}
.gc-2-1 {
  grid-column: 2 / span 1;
}
.gc-2-2 {
  grid-column: 2 / span 2;
}
.gc-2-3 {
  grid-column: 2 / span 3;
}
.gc-3-1 {
  grid-column: 3 / span 1;
}
.gc-3-2 {
  grid-column: 3 / span 2;
}
.gc-4-1 {
  grid-column: 4 / span 1;
}

/* Utility heights */
.t1 {
  height: var(--r1); /* 250px */
}
.t2 {
  height: var(--r2); /* 300px */
}
.t3 {
  height: var(--r3); /* 200px */
}
.t4 {
  height: var(--r4); /* 40px */
}
.t5 {
  height: 140px; /* 40px */
}
.t6 {
  height: 85px; /* 40px */
}

/* ==================================== */
/* =         Blocks and Components    = */
/* ==================================== */

.header {
  height: 100px;
  margin: 50px auto 20px auto;
  font-size: 16px;
}

.footer {
  /* .t4 already gives this box a fixed height (38px) */
  display: grid;
  place-items: center; /* centers child horizontally + vertically */
  margin-bottom: 20px;
}

.browser {
  font-size: 12px;
  text-align: center;
}

/* --- Profile --- */

.profile-card {
  width: 200px;
  height: 250px;
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* equal space above & below image */
  justify-items: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: 5px;
}

.profile-card img {
  width: 175px; /* fixed image width */
  height: auto;
  max-height: 100%;
  object-fit: contain; /* prevents overflow if image is tall */
}

/* Time display */
#present_time {
  margin: 0;
  padding: 15px 10px 15px 10px; /* small breathing room; light top padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px; /* space is handled by space-between */
  height: 225px;
}

/* Rows: consistent layout */
.time-block {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
}

.time-block .icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}

.time-block .icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.time-block .content {
  line-height: 1.3;
}

#present_time,
.time-block {
  color: var(--blue);
}

/* Heartbeat (with reduced-motion respect) */
.hb {
  animation: heartbeat 4s infinite;
  animation-delay: calc(var(--i, 0) * 1s);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
    color: var(--blue);
  }
  2% {
    transform: scale(1.18);
    color: #fff;
  }
  6% {
    transform: scale(1);
    color: #fff;
  }
  10% {
    color: var(--fg);
  }
  100% {
    transform: scale(1);
    color: var(--blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb {
    animation: none;
  }
}

/* Menu */
.menuset {
  padding: 10px;
  font-size: 15px;
}

.menu a {
  transition: all 0.5s;
  line-height: 25px;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
  text-shadow: none;
  text-decoration: none;
}
.menu a:hover {
  font-style: italic;
  text-shadow: 2px 2px 0 #07bccc, 3px 3px 0 var(--blue), 5px 5px 0 #e9019a,
    7px 7px 0 #f40468, 9px 9px 1px #482896;
}

#mainframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==================================== */
/* =         Animations * Effects     = */
/* ==================================== */

/* Text Effects */
.neon {
  animation: neon 1s ease infinite;
}
@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 10px var(--accentblue), 0 0 20px var(--accentblue),
      0 0 20px var(--accentblue), 0 0 20px var(--accentblue),
      0 0 2px var(--accentviolet), 2px 2px 2px var(--accentpurple);
    color: var(--accent);
  }
  50% {
    text-shadow: 0 0 2px var(--muted), 0 0 5px var(--muted),
      0 0 5px var(--muted), 0 0 5px var(--muted), 0 0 2px var(--muted),
      4px 4px 2px var(--accentpurple);
    color: var(--blue);
  }
}

/* ==================================== */
/* =         Music Player             = */
/* ==================================== */

/* ========= Music Player (neon console) ========= */
#musicplayer {
  /* uses your site vars if present; fallbacks included */
  --blue: var(--blue, #00f);
  --fg: var(--fg, #bcc6cc);
  --accent: var(--accent, #9d00ff);
  --white: var(--white, #fff);
  color: var(--fg);
}

/* Visualizer */
#musicplayer #viz {
  width: 190px; /* fits a 200px column comfortably */
  height: 100px;
  background: url("../img/walkman.gif") center no-repeat;
  display: block;
  margin: 10px auto 0 auto;
}

/* Track title line */
#musicplayer .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--blue);
  margin: 5px;
}

/* Control row */
#musicplayer .row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px;
}

/* Buttons */
#musicplayer .row button {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 35px;
  height: 30px;
  border: 1px solid var(--blue);
  background: #0a0a16;
  color: #e7f3ff;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.08s ease;
  box-shadow: 0 0 0 transparent;
}
#musicplayer .row button i {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

#musicplayer .row button:hover {
  border-color: #3a66ff;
  background: #0f1530;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.35);
}
#musicplayer .row button:active {
  transform: translateY(1px);
}
#musicplayer .row button:focus-visible {
  outline: 2px solid #5aa1ff;
  outline-offset: 2px;
}

/* Make Play/Pause stand out */
#musicplayer #playpause {
  width: 35px;
  height: 30px;
  border-radius: 3px;
  font-weight: 700;
}

/* Disabled state */
#musicplayer .row button:disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
  cursor: not-allowed;
  box-shadow: none;
  border-color: #22335a;
}

/* Playing state (toggle data-playing="1" in JS) */
#musicplayer[data-playing="1"] #playpause {
  border-color: magenta;
  background: linear-gradient(90deg, rgba(242, 0, 255, 0.22), transparent 60%)
    no-repeat;
  color: #fbcfff;
  box-shadow: 0 0 12px rgba(242, 0, 255, 0.35),
    inset 0 0 0 1px rgba(242, 0, 255, 0.25);
}

/* Seek slider */
#musicplayer .range {
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 6px;
  margin: 6px auto 4px;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(195, 0, 255, 0.35),
    rgba(0, 0, 0, 0.15)
  );
  border-radius: 999px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(195, 0, 255, 0.25);
}
#musicplayer .range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
#musicplayer .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f8cfff;
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px rgba(195, 0, 255, 0.5);
  margin-top: -4px; /* center thumb on 6px track */
}
#musicplayer .range::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}
#musicplayer .range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f6cfff;
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px rgba(195, 0, 255, 0.5);
}

/* Meta line */
#musicplayer .meta {
  display: flex;
  justify-content: space-between;
  opacity: 0.85;
  font-size: 12px;
  margin: 8px 10px 10px;
}
#musicplayer .small {
  font-size: 12px;
  opacity: 0.85;
}

/* ==================================== */
/* =         Moon Phase               = */
/* ==================================== */
.moon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.moon-body {
  margin-bottom: 0px;
  padding: 20px;
  filter: drop-shadow(0 0 15px hsl(220, 100%, 15%));
}

.moon-text {
  margin-top: 10px;
  font-size: 14px;
}

.moon-next {
  margin-top: 10px;
  font-size: 12px;
}

/* ===========================
   Guest block
=========================== */
.guest-content {
  width: 198; /* or 100%, or a grid-row height */
  height: 173px; /* must have a height to center vertically */
  display: grid;
  place-items: center; /* centers both axes */
}
.guest-content img {
  display: block; /* removes baseline gap */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* no crop; keep aspect */
}

/* configurable theme vars */
.img-glow {
  --glow: var(--blue, #00f); /* glow color */
  --ring-size: 12px; /* how far the ring extends past the image */
  --scale-to: 1.8; /* how far the ripple expands */
  --duration: 1.2s; /* ripple speed */
  border-radius: 999px;
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate; /* keep glow under control */
}

.img-glow img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: filter 0.25s ease, transform 0.25s ease;
  will-change: filter, transform;
}

/* base glow container (two ripples) */
.img-glow::before,
.img-glow::after {
  content: "";
  position: absolute;
  inset: calc(var(--ring-size) * -1);
  border-radius: inherit; /* respects rounded corners if any */
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  filter: blur(8px);
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--glow) 55%, transparent) 0%,
    color-mix(in oklab, var(--glow) 35%, transparent) 35%,
    color-mix(in oklab, var(--glow) 20%, transparent) 60%,
    transparent 70%
  );
}

/* nice static glow on hover*/
.img-glow:hover img {
  filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px var(--glow))
    drop-shadow(0 0 28px var(--glow));
}

/* animated outward ripple rings */
.img-glow:hover::before {
  animation: glow-ripple var(--duration) cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
}
.img-glow:hover::after {
  animation: glow-ripple var(--duration) cubic-bezier(0.2, 0.6, 0.2, 1) 0.35s
    infinite; /* stagger */
}

/* keyframes for the ripple */
@keyframes glow-ripple {
  0% {
    opacity: 0.85;
    transform: scale(2);
    filter: blur(8px);
  }
  70% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: scale(var(--scale-to));
    filter: blur(20px);
  }
}

/* =========================
   SETUP BANNERS MARQUEE
   ========================= */
.setup-marquee {
  --gap: 12px;
  --travel: 50%;
  --duration: 20s;
  --dir: normal;
  overflow: hidden;
  position: relative;
}
.setup-marquee .marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
  will-change: transform;
  margin-top: 5px;
  animation: setup-marquee-scroll var(--duration) linear infinite;
  animation-direction: var(--dir);
}
.setup-marquee:hover .marquee__track {
  animation-play-state: paused;
}
.setup-marquee .marquee__track img {
  display: block;
}

@keyframes setup-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--travel)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-marquee .marquee__track {
    animation: none;
    transform: none;
  }
}

/* =========================
   ALBUMS MARQUEE + CARDS
   ========================= */

/* Container & rows */
.album-marquee {
  overflow: hidden;
  position: relative;
  padding: 6px 0;
}
.album-marquee .track {
  display: inline-flex;
  align-items: center;
  gap: var(--gap, 16px);
}
/* JS will wrap two .track copies in .roller, we animate that */
.album-marquee .roller {
  display: inline-flex;
  gap: var(--gap, 16px);
  will-change: transform;
}
.album-marquee:hover .roller {
  animation-play-state: paused;
}

@keyframes album-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes album-scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* --- Album card (same styles you already use; scoped) --- */
.album {
  --album-size: 100px;
  --vinyl-size: 75px;
  --border-radius: 4px;
  --cover-translate: -5px;
  --cover-rotate: -1deg;
  --vinyl-translate: 48%;
  --vinyl-rotate: 360deg;
  --reveal: 35px;

  transition: margin-inline-start 0.35s ease, margin-inline-end 0.35s ease;
  margin-inline-end: 0;

  width: var(--album-size);
  height: var(--album-size);
  position: relative;
  flex: 0 0 auto;
}
.album .cover {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: #111;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  z-index: 2;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.album .cover a {
  display: block;
  width: 100%;
  height: 100%;
}
.album .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album .cover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35) 1%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 3;
}
.album .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 4%),
    linear-gradient(
      225deg,
      rgba(162, 162, 162, 0.1) 0%,
      rgba(162, 162, 162, 0.2) 4%,
      rgba(255, 255, 255, 0.2) 6%,
      rgba(255, 255, 255, 0.6) 7%,
      rgba(255, 255, 255, 0.2) 7%,
      rgba(218, 218, 218, 0.04) 7%,
      transparent 6%
    ),
    linear-gradient(
      45deg,
      rgba(14, 14, 14, 0.7),
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.2) 4%,
      rgba(14, 14, 14, 0.2) 6%,
      rgba(255, 255, 255, 0.3) 7%,
      rgba(218, 218, 218, 0.4) 7%,
      transparent 8%
    );
}

/* Disc */
.album .vinyl {
  position: absolute;
  top: 10px;
  right: 0;
  width: var(--vinyl-size);
  height: var(--vinyl-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateX(0) rotate(-10deg);
  transition: transform 0.5s ease, filter 0.3s ease, opacity 0.3s ease;
  z-index: 1;
  background: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.22),
      rgba(0, 0, 0, 0.06) 60%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0) 30%,
      rgba(0, 0, 0, 0.08) 60%,
      rgba(255, 255, 255, 0.14) 100%
    ),
    #c9c9c9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.15), 0 8px 18px rgba(0, 0, 0, 0.35);
}
/* label art (JS sets background-image) */
.album .vinyl .vinyl-cover {
  width: calc(var(--vinyl-size) * 0.92);
  height: calc(var(--vinyl-size) * 0.92);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 0 18px rgba(0, 0, 0, 0.25);
}
.album .vinyl .vinyl-cover::before,
.album .vinyl .vinyl-cover::after {
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.album .vinyl .vinyl-cover::before {
  width: calc(var(--vinyl-size) * 0.22);
  height: calc(var(--vinyl-size) * 0.22);
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.15) 60%,
    rgba(0, 0, 0, 0.2) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.album .vinyl .vinyl-cover::after {
  width: calc(var(--vinyl-size) * 0.34);
  height: calc(var(--vinyl-size) * 0.34);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 0 0 3px rgba(255, 255, 255, 0.25);
  background: radial-gradient(
    closest-side,
    transparent 45%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent 100%
  );
}

/* rim rainbow */
.album .vinyl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 30deg,
    rgba(255, 0, 0, 0.08),
    rgba(255, 255, 0, 0.06),
    rgba(0, 255, 0, 0.06),
    rgba(0, 255, 255, 0.06),
    rgba(0, 0, 255, 0.06),
    rgba(255, 0, 255, 0.06),
    rgba(255, 0, 0, 0.08)
  );
  -webkit-mask: radial-gradient(circle at center, transparent 70%, black 100%);
  mask: radial-gradient(circle at center, transparent 70%, black 100%);
  opacity: 0.32;
}

/* interactions */
.album:hover {
  margin-inline-end: var(--reveal);
}
.album:hover .cover {
  transform: translateX(var(--cover-translate)) rotate(var(--cover-rotate));
  filter: saturate(1.03) contrast(1.02);
}
.album:hover .vinyl {
  transform: translateX(var(--vinyl-translate)) rotate(var(--vinyl-rotate));
  filter: saturate(1.06) contrast(1.03);
}

/* variants */
.album.ps1 .vinyl {
  background: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.18),
      rgba(0, 0, 0, 0.12) 60%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    #9a9a9a;
}
.album.pc .vinyl {
  background: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.28),
      rgba(0, 0, 0, 0.06) 60%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    #d0d0d0;
}

@media (prefers-reduced-motion: reduce) {
  .album-marquee .roller {
    animation: none !important;
  }
  .album .cover,
  .album .vinyl {
    transition: none;
  }
}




/* =========================
   STATUS
   ========================= */
/* ===== System Status (200px panel) ===== */
/* 200px status panel */
.sys200 {
  --badge-col: 36px; /* left badge width */
  width: 200px;
  padding: 15px;
}

.sys200 .hdr {
  margin-bottom: 10px;
}

.sys200 .ok {
  color: cyan;
  text-shadow: 0 0 6px cyan;
}
.sys200 .bad {
  color: #ff4d6d;
  text-shadow: 0 0 6px #ff4d6d;
}

.sys200 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sys200 li {
  display: grid;
  grid-template-columns: var(--badge-col) 1fr; /* badge | name */
  align-items: center;
  column-gap: 20px;
  margin: 8px 0;
  white-space: nowrap;
}

.sys200 .badge {
  text-align: left;
}

.sys200 .name {
  min-width: 0; /* lets ellipsis work */
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}

/* --------- Change Log --------- */

.cl-body {
  font-size: 13px;
  background-color: black;
  background-image: none;
  overflow: auto;
  min-height: 0;
}

.log-box div {
  padding: 5px;
}
.log-box .tbody {
  margin-top: 5px;
}

.log-box .tbody > div > span {
  color: #935aee;
}

/* ===== Hacker-style TODO progress ===== */
.log-box .prog {
  --glow: #00ff99;
  --glow-dim: rgba(0, 255, 153, 0.35);
  --scan: rgba(0, 255, 153, 0.22);
}

.log-box .prog > div {
  padding: 6px 8px;
  /* any static styling you want; no animation */
  animation: none !important;
  background: none !important;
}

.log-box .prog > div::before,
.log-box .prog > div::after {
  content: none !important; /* nuke any pseudo-element effects on the row */
}

/* the bar itself */
.log-box .prog > div > span {
  display: inline-block; /* only as wide as the bar text */
  position: relative;
  overflow: hidden; /* clip the sweep to the bar box */
  white-space: pre; /* keep ■□ on one line */
  letter-spacing: 1px;

  color: #d000ff;
  text-shadow: 0 0 6px #d000ff, 0 0 14px rgba(208, 0, 255, 0.35);
}

/* sweeping highlight lives ONLY on the span */
.log-box .prog > div > span.bar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* a narrow moving beam */
  width: 220%; /* larger so we can sweep across */
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(225, 0, 255, 0.18) 45%,
    rgba(200, 0, 255, 0.45) 50%,
    rgba(242, 0, 255, 0.18) 55%,
    transparent 100%
  );
  animation: todo-sweep 2.2s linear infinite;
}

@keyframes todo-sweep {
  to {
    transform: translateX(0);
  }
}

/* occasional CRT flicker on the row (subtle) */
@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  98% {
    opacity: 0.94;
  }
}
.log-box .prog > div {
  animation: crt-flicker 6s steps(1, end) infinite;
}

/* Poll Form */
/* =========================
   Neon Poll (console style)
   ========================= */
/* ===== Neon Poll — 200×200 cell ===== */
.pollx {
  width: 198px; /* fits a 200px column with 1px cell border */
  font-family: "MS Gothic", monospace;
  color: var(--fg, #bcc6cc);
}

.pollx__title {
  color: #fff;
  padding: 10px 0 5px 10px;
  font-weight: 700;
  line-height: 20px;
  font-size: 13px;
}

.pollx__group {
  padding: 0 10px 10px 10px;
  display: grid;
  gap: 5px;
  overflow-y: auto; /* shows only if needed */
  overflow-x: hidden;
}

.pollx__option input[type="radio"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}

.pollx__choice {
  display: block;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 255, 0.7);
  background: #050509;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, color 0.18s, transform 0.08s;
  position: relative;
  font-size: 10px;
}
.pollx__choice::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: linear-gradient(#00f, #08f);
  opacity: 0.6;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: transform 0.18s, opacity 0.18s;
}
.pollx__option input[type="radio"]:focus + .pollx__choice,
.pollx__choice:hover {
  border-color: #3a66ff;
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.35);
  color: #e7f3ff;
}
.pollx__choice:hover::before {
  transform: scaleY(1);
  opacity: 0.9;
}

.pollx__option input[type="radio"]:checked + .pollx__choice {
  color: #cffffe;
  border-color: cyan;
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.22), transparent 60%)
    no-repeat;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.25),
    inset 0 0 0 1px rgba(0, 213, 255, 0.25);
}
.pollx__option input[type="radio"]:checked + .pollx__choice::before {
  background: linear-gradient(cyan, #0092b3);
  opacity: 1;
  transform: scaleY(1);
}

.pollx__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 0 0 0;
}
.pollx__btn {
  appearance: none;
  border: 1px solid var(--blue, #00f);
  background: #0a0a16;
  color: #dbe6ff;
  font: inherit;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.18s, border-color 0.18s,
    background 0.18s;
}
.pollx__btn:hover {
  border-color: #3a66ff;
  background: #0f1530;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.35);
}
.pollx__btn:active {
  transform: translateY(1px);
}

.pollx__credits {
  text-align: center;
  font-size: 5px;
  opacity: 0.7;
  padding: 5px;
}
.pollx__credits a {
  color: #9db0ff;
  text-decoration: none;
}
.pollx__credits a:hover {
  text-decoration: underline;
}

/* -------- Hit Counter --------- */

.hits-wrap {
  width: 198; /* or 100%, or a grid-row height */
  height: 60px; /* must have a height to center vertically */
  display: grid;
  place-items: center; /* centers both axes */
}

.hit-neon {
  color: #cffff1;
  text-shadow: 0 0 6px #00ff99, 0 0 14px rgba(0, 255, 153, 0.35);
  font-weight: 700;
  font-size: 15px;
}

/* === Link me === */
/* =============== Link badge + copy buttons (neon) =============== */

/* row layout */
.linkme-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* no wrapping */
}

/* fixed left block */
.linkme-img {
  display: flex;
  align-items: center;
  height: 60px;
}
.linkme-img img {
  display: block;
  max-height: 100%;
  padding: 0 5px 0 10px;
}

/* buttons block */
.linkme-btn {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 5px;
}

/* neon buttons (unchanged) */
.linkbutton {
  color: #e7f3ff;
  border-radius: 3px;
  border: 1px solid var(--blue, #00f);
  background: #0a0a16;
  padding: 6px;
  cursor: url("../img/glove.png") 8 2, pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s,
    box-shadow 0.18s, transform 0.08s;
}
.linkbutton:hover {
  border-color: #3a66ff;
  background: #0f1530;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.35);
}
.linkbutton:active {
  transform: translateY(1px);
}
.linkbutton:focus-visible {
  outline: 2px solid #5aa1ff;
  outline-offset: 2px;
}

/* status goes under the row */

.linkme-status {
  margin-left: 6px;
  font-size: 12px;
  color: #cff9ff;
  /* neon vibe */
  text-shadow: 0 0 6px cyan, 0 0 14px rgba(0, 242, 255, 0.6);

  /* keep on same line; shrink and ellipsize if tight */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto; /* takes remaining space */
  min-width: 0; /* allows proper ellipsis in flex */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.linkme-status.show {
  opacity: 0.95;
}

/* brief neon flash */
@keyframes neon-flash {
  0% {
    text-shadow: 0 0 2px cyan, 0 0 6px cyan, 0 0 10px rgba(0, 242, 255, 0.6);
  }
  100% {
    text-shadow: 0 0 6px cyan, 0 0 14px rgba(0, 238, 255, 0.35);
  }
}
#copyStatus.flash {
  animation: neon-flash 0.5s ease;
}

/* --------- Win Pages -------------- */

@font-face {
  font-family: "Amiri Quran";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(amri.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

.win-title {
  outline: none;
  background: url(../img/text1.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
  font-family: sans-serif;
  padding-bottom: 20px;
}

.inside {
  padding: 20px;
}

/* === About block (table → grid) === */
.about {
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Top row: facts on the left, gif on the right */
.about-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

/* 2-column key/value list, aligned like your screenshot */
.profile-info {
  display: grid;
  grid-template-columns: max-content 1fr; /* label width = widest dt */
  column-gap: 12px;
  row-gap: 6px;
  margin: 0;
  padding: 0;
  font-family: "MS Gothic", monospace; /* your site font */
  font-size: 13px;
  font-variant-numeric: tabular-nums; /* tidy numbers */
}

/* labels (left column) */
.profile-info dt {
  margin: 0;
  color: #bcc6cc;
  opacity: 0.95;
  white-space: nowrap;
}

/* values (right column) */
.profile-info dd {
  margin: 0; /* remove default dd indent */
  color: #bcc6cc;
}
.profile-info dd b {
  font-weight: 700;
} /* keep bold look */

/* Right-side gif */
.about-gif img {
  height: 100%;
}

/* Likes line */
.likes {
  line-height: 1;
}

/* Achtung strip (neon) */
.achtung {
  background: #000;
  color: #cfe0ff;
  text-shadow: 0 0 6px blue, 0 0 14px rgba(0, 8, 255, 0.35);
}

/* Horizontal bar image helper (optional) */
.hbar {
  display: block;
  width: 350px;
  height: auto;
  margin: 5px auto;
}

/* Timeline (table → list) */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.timeline li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
}
.timeline .ico img {
  display: block;
  width: 40px;
  height: auto;
}
.timeline .txt b {
  display: inline-block;
}

/* Virtual timeline / embeds */
.embed-centered {
  display: grid;
  place-items: center;
}

/* Link style keeps your theme */
.about a {
  color: var(--fg);
  text-decoration: none;
}
.about a:hover {
  font-style: italic;
  text-shadow: 2px 2px 0 #07bccc, 3px 3px 0 var(--blue), 5px 5px 0 #e9019a,
    7px 7px 0 #f40468, 9px 9px 1px #482896;
}

.mf-img {
  width: 408px;
  height: auto;
}

.mf-container {
  text-align: center;
  padding: 0 20px 0 20px;
}

.mf-arabic {
  font-family: "Amiri Quran";
}

.h-image {
  display: none;
  z-index: 9999 !important;
}
.h-item {
  color: #3a66ff;
}
.h-item:hover + .h-image {
  display: flex !important;
  width: 300px;
  height: 160px;
  object-fit: cover; /* crop instead of stretch */
  overflow: hidden; /* hide the parts outside 150px */
}

.righter {
  margin-left: -20px;
}
.favo table {
  margin-top: 20px;
  margin-left: 20px;
  width: 350px;
}

.chest {
  margin-top: 200px;
}
.imgchest {
  width: 160px;
  height: 100px;
  object-fit: cover;
}
.chestgap {
  width: 10px;
}

.glow {
  color: #000;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 1px #000, 0 0 2px #60e600, 0 0 3px #60e600, 0 0 4px #60e600,
      0 0 5px #60e600, 0 0 6px #60e600, 0 0 7px #60e600;
  }
  to {
    text-shadow: 0 0 3px #fff, 0 0 4px #7fff4d, 0 0 5px #7fff4d, 0 0 6px #7fff4d,
      0 0 7px #7fff4d, 0 0 8px #7fff4d, 0 0 9px #7fff4d;
  }
}
@keyframes glow {
  from {
    text-shadow: 0 0 1px #000, 0 0 2px #60e600, 0 0 3px #60e600, 0 0 4px #60e600,
      0 0 5px #60e600, 0 0 6px #60e600, 0 0 7px #60e600;
  }
  to {
    text-shadow: 0 0 3px #fff, 0 0 4px #7fff4d, 0 0 5px #7fff4d, 0 0 6px #7fff4d,
      0 0 7px #7fff4d, 0 0 8px #7fff4d, 0 0 9px #7fff4d;
  }
}


/* ===========================
   Game block
=========================== */
.game-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  text-align: center;
  padding: 8px 0 4px;
}
.game-selection img {
  height: 70px;
  width: auto;
  transition: transform 0.2s;
}
.game-selection img:hover {
  transform: scale(1.1);
}

.game-back {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-bottom: 6px;
}
.game-back a {
  color: #63a0ff;
  text-decoration: none;
  font-weight: bold;
}
.game-back a:hover {
  text-decoration: underline;
}




/* ======================================================== */
/* ======================================================== */
/* === Site cursor (glove) — placed at END of style.css === */
/* ======================================================== */
/* ======================================================== */
:root {
  /* hotspot 8 2 is optional; tweak to taste */
  --cursor-glove: url("../img/glove.png") 8 2, pointer;
}

/* General interactive things */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
label {
  cursor: var(--cursor-glove);
}

/* Music player controls */
#musicplayer .row button {
  cursor: var(--cursor-glove);
}

/* Seek bar (track + thumbs for WebKit/Firefox) */
#musicplayer .range {
  cursor: var(--cursor-glove);
}
#musicplayer .range::-webkit-slider-thumb {
  cursor: var(--cursor-glove);
}
#musicplayer .range::-moz-range-thumb {
  cursor: var(--cursor-glove);
}

/* (Optional) visualizer canvas too */
#musicplayer canvas {
  cursor: var(--cursor-glove);
}

/* Poll widgets */
.pollx .pollx__choice,
.pollx .pollx__btn {
  cursor: var(--cursor-glove);
}