/*
  JMOSES.NET
  Y2K vaporwave cyber-collage with Windows 95 nostalgia,
  Japanese commercial art, ukiyo-e motifs, and CRT texture.
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

* { box-sizing: border-box; }
html { min-height: 100%; background: #060617; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 28px 18px 58px;
  color: #101018;
  font-family: "Noto Sans JP", "MS PGothic", "MS Gothic", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 106, 193, .30), transparent 23%),
    radial-gradient(circle at 82% 12%, rgba(0, 82, 212, .38), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(1, 205, 254, .20), transparent 28%),
    linear-gradient(180deg, #13002f 0%, #08031b 52%, #02020a 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: auto 0 42px 0;
  height: 42vh;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 106, 193, .14), transparent 64%),
    repeating-linear-gradient(to right, rgba(1,205,254,.28) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(to top, rgba(1,205,254,.24) 0 1px, transparent 1px 34px);
  transform: perspective(420px) rotateX(62deg) translateY(90px);
  transform-origin: center bottom;
  opacity: .46;
  filter: blur(.1px) saturate(1.4);
  z-index: 0;
}

.crt-noise,
.scanline-mask,
.color-bleed {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.crt-noise {
  z-index: 200;
  opacity: .15;
  background-image:
    radial-gradient(circle at 17% 44%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 73% 31%, rgba(255,255,255,.06) 0 1px, transparent 1px),
    radial-gradient(circle at 49% 67%, rgba(255,255,255,.05) 0 1px, transparent 1px);
  background-size: 5px 5px, 7px 7px, 9px 9px;
  mix-blend-mode: screen;
}
.scanline-mask {
  z-index: 201;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.19) 0 1px, transparent 1px 4px);
  opacity: .48;
}
.color-bleed {
  z-index: 199;
  background:
    linear-gradient(90deg, rgba(255,0,90,.06), transparent 16%, transparent 82%, rgba(0,170,255,.08)),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.50));
}

.wallpaper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.retro-sun {
  position: absolute;
  right: 7vw;
  top: 6vh;
  width: clamp(160px, 24vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, rgba(6,6,23,.88) 15px 22px),
    linear-gradient(180deg, #ffdf5b 0%, #ff6ac1 42%, #0155d4 100%);
  box-shadow: 0 0 70px rgba(255, 106, 193, .55);
  opacity: .82;
}
.ukiyo-wave {
  position: absolute;
  width: 44vw;
  min-width: 420px;
  height: 210px;
  left: -7vw;
  top: 19vh;
  opacity: .42;
  filter: saturate(1.8) contrast(1.2);
  background:
    radial-gradient(ellipse at 8% 80%, transparent 0 42%, #01cdfe 43% 44%, transparent 46%),
    radial-gradient(ellipse at 28% 70%, transparent 0 39%, #fff 40% 42%, transparent 44%),
    radial-gradient(ellipse at 52% 70%, transparent 0 36%, #ff6ac1 37% 39%, transparent 42%),
    radial-gradient(ellipse at 78% 66%, transparent 0 36%, #01cdfe 37% 39%, transparent 41%);
  transform: rotate(-8deg);
}
.wave-b { left: auto; right: -14vw; top: 47vh; transform: rotate(10deg) scaleX(-1); opacity: .28; }
.sticker-pepsi {
  position: absolute;
  left: 4vw;
  bottom: 16vh;
  width: 156px;
  height: 156px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: .08em;
  border: 5px solid #fff;
  background:
    linear-gradient(175deg, #0055a4 0 46%, #fff 47% 54%, #e32934 55% 100%);
  transform: rotate(-11deg);
  box-shadow: 8px 9px 0 rgba(0,0,0,.34), 0 0 50px rgba(1,85,212,.55);
  opacity: .88;
}
.sticker-pepsi span { display: block; font-size: .52rem; color: #fff; text-shadow: 1px 1px 0 #000; }
.floating-hand {
  position: absolute;
  color: #ffe0f7;
  font-size: clamp(4rem, 10vw, 8rem);
  text-shadow: 8px 0 0 rgba(1,205,254,.32), -7px 0 0 rgba(255,106,193,.30);
  filter: blur(.2px) saturate(1.7);
  opacity: .54;
}
.hand-left { left: 3vw; top: 51vh; transform: rotate(-18deg); }
.hand-right { right: 4vw; top: 30vh; transform: rotate(19deg); }
.cherry {
  position: absolute;
  color: #ff9ed8;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(255,106,193,.7);
  opacity: .76;
  animation: drift 16s linear infinite;
}
.c1 { left: 18vw; top: -5vh; font-size: 1.6rem; }
.c2 { left: 58vw; top: -8vh; font-size: 2.1rem; animation-delay: 6s; }
.c3 { left: 78vw; top: -6vh; font-size: 1.2rem; animation-delay: 11s; }
@keyframes drift { to { transform: translateY(118vh) rotate(180deg); opacity: .08; } }
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.52);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.62), rgba(1,205,254,.18) 45%, rgba(255,106,193,.20) 70%, transparent 72%);
  box-shadow: inset -8px -9px 14px rgba(1,85,212,.25), 0 0 28px rgba(255,106,193,.26);
  animation: bubble 13s ease-in-out infinite;
}
.b1 { width: 72px; height: 72px; left: 82vw; bottom: 4vh; }
.b2 { width: 44px; height: 44px; left: 12vw; bottom: 38vh; animation-delay: 4s; }
.b3 { width: 92px; height: 92px; left: 64vw; bottom: 10vh; animation-delay: 8s; }
@keyframes bubble { 50% { transform: translateY(-24vh) scale(1.25); } 100% { transform: translateY(-60vh) scale(.7); opacity: 0; } }

.desktop-shell {
  position: relative;
  z-index: 10;
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
}
.billboard {
  position: relative;
  margin: 14px auto 18px;
  padding: 18px 18px 20px;
  text-align: center;
  border: 3px solid #fff;
  background:
    linear-gradient(135deg, rgba(255,106,193,.92), rgba(1,85,212,.90)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, transparent 10px 20px);
  box-shadow: 9px 9px 0 #000, 0 0 58px rgba(255,106,193,.34);
  transform: rotate(-.8deg);
}
.jp-kicker {
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .32em;
  text-shadow: 2px 2px 0 #0155d4;
}
.chrome-title {
  position: relative;
  margin: 5px 0 3px;
  color: #fff;
  font-size: clamp(2.1rem, 7vw, 5rem);
  line-height: .94;
  letter-spacing: .06em;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 4px 0 0 #01cdfe, -4px 0 0 #ff2e97, 7px 7px 0 rgba(0,0,0,.42);
}
.hero-line { color: #f8f8ff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ad-copy { margin: 8px auto 0; max-width: 800px; color: #fff; font-size: .95rem; }

.win-window {
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
  box-shadow: 2px 2px 0 #000, 11px 12px 0 rgba(255,106,193,.25), -8px -8px 0 rgba(1,205,254,.16);
}
.win-titlebar {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 3px 5px;
  background: linear-gradient(90deg, #000080, #0155d4 65%, #ff6ac1);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  text-shadow: 1px 1px #000;
}
.win-icon { filter: saturate(1.6); }
.win-buttons { margin-left: auto; display: flex; gap: 3px; }
.win-buttons a,
.win-buttons button,
.start-button {
  font: 700 12px/1 "MS Sans Serif", "Segoe UI", sans-serif;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
  color: #000;
  box-shadow: inset 1px 1px 0 #dfdfdf;
}
.win-buttons a,
.win-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  text-decoration: none;
  text-shadow: none;
}
.win-buttons a:hover,
.win-buttons button:hover {
  background: #dfdfdf;
}
.win-buttons a:active,
.win-buttons button:active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px 0 #808080;
}
.win-menu {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  color: #111;
  font-size: .82rem;
  border-bottom: 1px solid #808080;
}
.win-menu a {
  padding: 1px 8px;
  color: #111;
  text-decoration: none;
}
.win-menu a:hover,
.win-menu a:focus-visible {
  color: #fff;
  background: #000080;
  outline: none;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 10px;
  padding: 10px;
}
.panel {
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  background: #f3f3f3;
  padding: 10px;
  color: #111;
}
.panel-title {
  margin: -10px -10px 10px;
  padding: 5px 8px;
  color: #fff;
  background: #000080;
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.panel-title.hot { background: linear-gradient(90deg, #ff2e97, #0155d4); }
.panel-title.green { background: #004d2d; }
.lead { margin: 0 0 8px; font-size: .95rem; line-height: 1.55; }
.jp-note { color: #ff2e97; font-weight: 800; }
.desktop-icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.desk-icon { text-align: center; color: #000; text-decoration: none; font-size: .75rem; }
.icon-box {
  display: block;
  width: 38px;
  height: 34px;
  margin: 0 auto 4px;
  image-rendering: pixelated;
  border: 2px solid #111;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #808080;
  background: #c0c0c0;
}
.desk-icon-gif {
  display: block;
  width: 38px;
  height: 34px;
  margin: 0 auto 4px;
  image-rendering: pixelated;
  object-fit: contain;
}
.launch-panel { display: flex; flex-direction: column; gap: 9px; }
.launch-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px 10px;
  align-items: center;
  min-height: 76px;
  padding: 9px;
  color: #000;
  text-decoration: none;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
}
.launch-card:hover { filter: saturate(1.45) contrast(1.08); transform: translate(-1px, -1px); }
.launch-card.pink { background: linear-gradient(135deg, #ffb8e3, #fff 52%, #d9ccff); }
.launch-card.blue { background: linear-gradient(135deg, #bfeeff, #fff 52%, #c3d9ff); }
.launch-glyph { grid-row: span 2; font-size: 1.8rem; text-align: center; }
.launch-glyph-img {
  grid-row: span 2;
  width: 42px;
  height: auto;
  align-self: center;
  justify-self: center;
  image-rendering: pixelated;
  object-fit: contain;
}
.launch-card strong { color: #000080; font-size: .92rem; letter-spacing: .06em; }
.launch-card em { color: #333; font-style: normal; font-size: .75rem; }
.stack-panel ul { margin: 0; padding-left: 0; list-style: none; font: 13px/1.55 "Courier New", monospace; }
.stack-panel li::before { content: "▸ "; color: #ff2e97; font-weight: 900; }
.terminal-panel { grid-column: 1 / -1; background: #050505; color: #05ffa1; font-family: "Courier New", monospace; }
.terminal-panel pre { margin: 0; white-space: pre-wrap; font: inherit; color: inherit; }
.prompt { color: #01cdfe; }
.tag { padding: 1px 5px; border: 1px solid currentColor; font-weight: 900; }
.tag.active { color: #ffb347; }
.tag.stable { color: #05ffa1; }
.tag.done { color: #01cdfe; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.taskbar {
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  color: #000;
  font: 13px "MS Sans Serif", "Segoe UI", sans-serif;
}
.start-button { padding: 6px 12px; font-weight: 900; }
.windows-gem { color: #ff2e97; margin-right: 5px; }
.task {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 230px;
  padding: 6px 10px;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  background: #dfdfdf;
  font-weight: 700;
}
.tray {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
}

@media (max-width: 820px) {
  body { padding: 14px 10px 58px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .billboard { transform: none; }
  .desktop-icons { grid-template-columns: repeat(3, 1fr); }
  .sticker-pepsi, .floating-hand { opacity: .24; }
  .task { min-width: auto; flex: 1; }
}