:root {
  --navy: #070726;
  --blue: #2b4dff;
  --violet: #c9932e;
  --pink: #ffc94a;
  --lcd: #26ff5a;
  --w98: #c0c0c0;
  --w98-dark: #808080;
  --w98-title: linear-gradient(90deg, #000080, #1084d0);
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='20' font-size='20'%3E%E2%AD%90%3C/text%3E%3C/svg%3E") 12 12, auto;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #02010c;
  color: #e6e0ff;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 13px;
  cursor: var(--cur);
  overflow-x: hidden;
}

a, button, label, input, .b88, [data-meme], [data-open], [data-go] { cursor: pointer; }

#stars {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* ============ FLASH INTRO ============ */
#intro {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(ellipse at center, #2a0a10 0%, #000 70%);
  display: grid; place-items: center;
  font-family: "Press Start 2P", monospace;
  transition: opacity .6s, transform .6s;
}
#intro.gone { opacity: 0; transform: scale(3); pointer-events: none; }
.intro-inner { text-align: center; }
.intro-presents { color: #c9a24a; font-size: 11px; letter-spacing: 3px; animation: fadeUp 1.2s both; }
.intro-loader { width: 420px; height: 18px; margin: 0 auto; border: 2px solid #c9a24a; padding: 2px; }
.intro-bar { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ffc94a 0 10px, #c9932e 10px 20px); }
.intro-pct { margin-top: 14px; font-size: 11px; color: #ffe08a; }
.intro-enter {
  margin-top: 30px; font: inherit; font-size: 14px;
  background: none; color: #fff; border: 0; padding: 14px 20px;
  opacity: .25;
}
.intro-enter:not(:disabled) { opacity: 1; animation: blink 0.8s steps(2) infinite; text-shadow: 0 0 10px #ffc94a; }
.intro-enter:not(:disabled):hover { animation: none; color: #ffef5a; }
.intro-hint { margin-top: 26px; font-family: Tahoma, sans-serif; font-size: 11px; color: #8a7a5a; }
.intro-skip {
  position: absolute; right: 24px; bottom: 20px;
  background: none; border: 0; color: #8a7a5a;
  font: 10px "Press Start 2P", monospace; text-decoration: underline;
}
.intro-skip:hover { color: #fff; }

@keyframes introZoom { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }
@keyframes blink { 50% { opacity: 0; } }

/* ============ IE CHROME ============ */
.ie {
  position: relative; z-index: 1;
  width: 1240px; margin: 14px auto 60px;
  background: #ece9d8;
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 1px #000, 0 0 60px #c9932e55, 0 0 140px #ffc94a44;
}
.ie-title {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 6px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #0050ee 100%);
  color: #fff; font: bold 13px Trebuchet MS, Tahoma, sans-serif;
  text-shadow: 1px 1px #0a1883;
}
.ie-ico {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9fe0ff, #1c7cff);
  color: #ffd200; font: bold italic 15px "Times New Roman", serif;
  text-shadow: 0 0 2px #000;
}
.ie-ico.sm { width: 14px; height: 14px; font-size: 11px; margin-right: 4px; }
.ie-btns { margin-left: auto; display: flex; gap: 2px; }
.ie-btns b {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(180deg, #3c8cff, #1250d6);
  font-size: 13px;
}
.ie-btns b.x { background: linear-gradient(180deg, #e8835c, #c2350a); cursor: pointer; }
.ie-menu { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid #c5c2b2; color: #000; }
.ie-menu span { padding: 2px 7px; }
.ie-menu span:hover { background: #316ac5; color: #fff; }
.ie-toolbar, .ie-address {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-bottom: 1px solid #c5c2b2; color: #000;
}
.ie-toolbar button, .ie-address button {
  background: none; border: 1px solid transparent; padding: 2px 6px; font: 12px Tahoma, sans-serif; color: #000;
}
.ie-toolbar button:hover, .ie-address button:hover { border-color: #aaa; background: #fff8; border-radius: 3px; }
.ie-toolbar .sep { width: 1px; height: 22px; background: #aaa; margin: 0 4px; }
.addr {
  flex: 1; display: flex; align-items: center;
  background: #fff; border: 1px solid #7f9db9; padding: 2px 4px; font-size: 12px;
}
.ie-status {
  display: flex; justify-content: space-between;
  padding: 3px 8px; color: #000; font-size: 11px;
  border-top: 1px solid #fff; background: #ece9d8;
}
.ie-zone { border-left: 1px solid #aaa; padding-left: 12px; width: 180px; }

/* ============ SITE ============ */
.site {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, #3a0a14 0%, transparent 50%),
    radial-gradient(ellipse at 90% 30%, #0f1d5a 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, #2a0a10 0%, transparent 50%),
    #070305;
  border: 2px inset #808080;
}
.site::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #00000026 2px 3px);
  mix-blend-mode: multiply;
}
.topmarquee {
  display: block;
  background: linear-gradient(90deg, #4a0812, #a8741c, #4a0812, #a8741c);
  background-size: 200% 100%;
  animation: rainbowSlide 4s linear infinite;
  color: #fff; font: 12px "Press Start 2P", monospace; padding: 6px 0;
  text-shadow: 2px 2px #000;
}
@keyframes rainbowSlide { to { background-position: 200% 0; } }

.layout { display: grid; grid-template-columns: 220px 1fr 250px; gap: 18px; padding: 18px; }
.col { position: relative; }

/* uCoz menu */
.ucoz-menu {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px;
  background: linear-gradient(180deg, #6b0f1f, #2a0408);
  border: 2px outset #d4a73a; border-radius: 6px;
  box-shadow: 0 0 20px #c9932e55;
}
.ucoz-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #9a2434 0%, #6b0f1f 50%, #520a17 51%, #6b0f1f 100%);
  border: 1px solid #d4a73a; border-radius: 3px;
  color: #fff; font: 17px Tahoma, sans-serif;
  text-shadow: 1px 1px #000;
  transition: transform .1s;
}
.ucoz-menu a:hover {
  background: linear-gradient(180deg, #ffd36a, #a8741c);
  transform: translateX(6px) scale(1.04);
}
.ucoz-menu a:hover .smiley { animation: spin .6s linear infinite; }
.smiley {
  flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at 34% 38%, #000 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 38%, #000 0 2px, transparent 2.5px),
    radial-gradient(circle at 35% 30%, #fff9a8, #ffd400 50%, #d79400);
  box-shadow: inset 0 -2px 3px #a86c00, 0 0 6px #ffd40088;
}
.smiley::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 6px;
  border: 2px solid #000; border-top: 0; border-radius: 0 0 10px 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.block { margin-top: 16px; border: 1px solid #6b4a1a; background: #120607cc; }
.block-h {
  background: linear-gradient(180deg, #8c1c2c, #4a0812);
  color: #fff; font: bold 12px Verdana, sans-serif; padding: 4px 8px;
  text-shadow: 1px 1px #000;
}
.block-h.big { font: 22px "Lobster", cursive; padding: 6px 12px; }
.block-b { padding: 8px; font-size: 12px; line-height: 1.5; }
.poll label { display: block; }
.poll-res { margin-top: 6px; color: #ffef5a; }
.minichat { height: 150px; overflow: hidden; font-size: 11px; }
.minichat p { margin: 0 0 4px; }
.minichat b { color: #ffe08a; }
.stats b { color: var(--lcd); }
.blink { animation: blink 1s steps(2) infinite; color: #ff5a5a; }
.buttons88 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.b88 {
  display: grid; place-items: center; text-align: center;
  height: 31px; font: bold 8px Verdana, sans-serif; line-height: 1.1;
  border: 1px solid #fff; text-shadow: 1px 1px #000;
}
.b88:hover { filter: invert(1); }
.b88-a { background: linear-gradient(90deg, #000, #3a00ff); color: #9cf; }
.b88-b { background: linear-gradient(180deg, #ffde00, #ff7b00); color: #000; text-shadow: none; }
.b88-c { background: #000; color: var(--lcd); border-color: var(--lcd); }
.b88-d { background: linear-gradient(180deg, #2b7bff, #002f9e); color: #ffd200; }
.b88-e { background: repeating-linear-gradient(45deg, #ffc94a 0 6px, #7a0f1f 6px 12px); color: #fff; }
.b88-f { background: #fff; color: #c00; text-shadow: none; }

.btn98 {
  background: var(--w98); color: #000; font: 12px Tahoma, sans-serif;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  padding: 3px 12px; margin-top: 6px;
}
.btn98:active { border-color: #404040 #fff #fff #404040; }

/* ============ HERO ============ */
.hero { position: relative; height: 470px; }
.heart-frame { position: absolute; left: 0; top: 0; width: 250px; height: 230px; }
.heart-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #f5d27a; stroke-width: 3;
  filter: drop-shadow(0 0 4px #ffc94a) drop-shadow(0 0 10px #ffc94a);
  animation: frameGlow 3s ease-in-out infinite alternate;
}
.heart-photo {
  position: absolute; inset: 8px;
  clip-path: ellipse(44% 45% at 50% 50%);
  background: radial-gradient(circle, #4a1a12, #120406);
  display: grid; place-items: center;
}
.heart-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; position: absolute; inset: 0; }
.heart-photo img + .heart-fallback { display: none; }
.heart-fallback { font-size: 110px; filter: drop-shadow(0 0 20px #ffc94a); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06); } 30% { transform: scale(.98); } 45% { transform: scale(1.04); } }

.hero-words {
  position: absolute; left: 270px; top: 4px; margin: 0; padding: 0; list-style: none;
  font: 24px "Marck Script", cursive; color: #e8c873; text-transform: none;
  text-shadow: 0 0 8px #a8741c;
}
.hero-words li { transform: rotate(-4deg); margin-bottom: -2px; }
.hero-words li:nth-child(odd) { padding-left: 18px; }
.hero-words li:hover { color: #fff; text-shadow: 0 0 10px #ffc94a, 0 0 20px #ffc94a; }

.crown {
  position: absolute; left: 50%; top: 210px; font-size: 54px;
  transform: translateX(80px) rotate(14deg);
  filter: grayscale(1) brightness(1.8) drop-shadow(0 0 6px #fff);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateX(80px) rotate(8deg) translateY(-8px); } }

.chrome {
  position: absolute; left: -30px; right: -30px; top: 228px; margin: 0;
}
.chrome svg { display: block; width: 100%; height: auto; overflow: visible; }
.chrome text {
  font: 900 120px "Roboto Slab", Georgia, serif;
  fill: url(#chromeFill); text-anchor: middle; cursor: pointer;
  stroke: url(#chromeFill); stroke-width: 5px; stroke-linejoin: miter; paint-order: stroke;
}

.subtitle {
  position: absolute; left: 0; right: 0; top: 368px; text-align: center;
  font: 26px "Pixelify Sans", monospace; color: #f0c75e; letter-spacing: 1px;
  text-shadow: 0 0 6px #c08a2a, 0 0 18px #7a0f1f;
}
.subtitle::before, .subtitle::after { content: " ✦ "; color: #fff; animation: blink .7s steps(2) infinite; }

.crown { z-index: 3; pointer-events: none; }

.heart-svg .inner { stroke-width: 1.2; stroke: #a8741c; }
@keyframes frameGlow { to { filter: drop-shadow(0 0 6px #ffc94a) drop-shadow(0 0 16px #c9932e); } }
.frame-plate {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  padding: 2px 10px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe9a8, #c9932e 55%, #8a5a10);
  border: 1px solid #4a2a00; color: #2a1400;
  font: bold 11px "Times New Roman", serif; letter-spacing: 2px;
}
.intro-logo { display: block; width: 900px; max-width: 92vw; margin: 10px auto 0; overflow: visible; animation: introZoom 1.6s cubic-bezier(.2,1.6,.4,1) both; }
.intro-logo text { font: 900 120px "Roboto Slab", Georgia, serif; fill: url(#chromeFill); text-anchor: middle;
  stroke: url(#chromeFill); stroke-width: 5px; paint-order: stroke; }
.hitparad ol, ol.block-b { margin: 0; padding: 8px 8px 8px 30px; }
#hitparad li { padding: 2px 0; cursor: pointer; color: #f3e2b5; }
#hitparad li:hover, #hitparad li.cur { color: #ffc94a; text-shadow: 0 0 6px #c9932e; }
#hitparad li.cur::after { content: " ♪"; animation: blink .8s steps(2) infinite; }

/* ============ CARDS ============ */
.row { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 26px; }
.paper {
  position: relative; flex: 1;
  background: #ece6d6;
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, #b8c5e6 23px 24px);
  color: #222; padding: 18px 22px 24px;
  font: 19px "Neucha", cursive;
  transform: rotate(-3deg);
  box-shadow: 6px 8px 0 #0008;
}
.paper.torn {
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 22% 0, 33% 3%, 45% 0, 58% 2%, 70% 0, 82% 3%, 92% 0, 100% 2%, 99% 30%, 100% 60%, 98% 98%, 88% 100%, 76% 97%, 62% 100%, 50% 97%, 36% 100%, 22% 97%, 10% 100%, 0 97%, 2% 60%, 0 30%);
}
.paper h3 { margin: 0 0 6px; font: 26px "Neucha", cursive; }
.paper ul { margin: 0; padding: 0; list-style: none; }
.paper li::before { content: "- "; }
.angel { position: absolute; right: 6px; bottom: 6px; font-size: 64px; filter: grayscale(1) brightness(1.3); animation: bob2 3s ease-in-out infinite; }
@keyframes bob2 { 50% { transform: translateY(-8px) rotate(-6deg); } }

.win98 {
  background: var(--w98); color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000, 6px 8px 0 #0008;
}
.win98-t {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--w98-title); color: #fff;
  font: bold 12px Tahoma, sans-serif; padding: 3px 4px 3px 6px;
}
.win98-t.red { background: linear-gradient(90deg, #a00000, #ff3a3a); }
.win98-t span {
  display: grid; place-items: center; width: 16px; height: 14px;
  background: var(--w98); color: #000; font-size: 12px; line-height: 1;
  border: 1px solid; border-color: #fff #404040 #404040 #fff; cursor: pointer;
}
.win98-b { padding: 10px; }
.checklist { width: 230px; transform: rotate(2deg); }
.checklist label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; }
.checklist input { accent-color: #000080; width: 15px; height: 15px; }

/* friends + CD */
.friends { flex: 1; }
.friend { display: flex; align-items: center; gap: 8px; padding: 4px; font-size: 13px; border-bottom: 1px dotted #888; }
.friend span { font-size: 20px; }
a.friend { color: inherit; text-decoration: none; }
a.friend:hover { background: #000080; color: #fff; }
.friend i { margin-left: auto; font-style: normal; font-size: 11px; }
.friend .on { color: #080; } .friend .on::before { content: "● "; }
.friend .away { color: #c80; } .friend .away::before { content: "◐ "; }
.cd { position: relative; width: 230px; height: 230px; }
.cd-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, #05031a 0 14px, #ddd 15px 18px, transparent 19px),
    conic-gradient(from 0deg, #e6e6e6, #9ef, #fcf, #ff9, #e6e6e6, #aaf, #9fc, #e6e6e6);
  box-shadow: 0 0 0 2px #fff6, 0 0 30px #b9e3ff88;
  animation: spin 6s linear infinite;
  display: grid; place-items: center;
}
.cd-disc span {
  position: absolute; top: 34px; left: 40px;
  font: 22px/1.05 "Marck Script", cursive; color: #111; transform: rotate(-12deg);
}
.cd-label { position: absolute; bottom: 30px; left: 40px; font: 15px "Marck Script", cursive; color: #111; transform: rotate(-8deg); pointer-events: none; }

/* guestbook */
.guestbook { border: 1px solid #6b4a1a; background: #120607cc; }
.gb-form { display: grid; gap: 6px; padding: 10px; }
.gb-form input, .gb-form textarea {
  font: 13px Tahoma, sans-serif; padding: 4px;
  border: 2px inset #808080; background: #fff; color: #000;
}
.gb-form textarea { height: 70px; resize: vertical; }
.gb-form .btn98 { justify-self: start; }
.gb-smileys span { font-size: 20px; margin-right: 4px; }
.gb-smileys span:hover { display: inline-block; transform: scale(1.4); }
.gb-list { padding: 0 10px 10px; }
.gb-entry { border: 1px solid #5a3a14; margin-top: 8px; background: #1a0a0c; }
.gb-entry-h { display: flex; justify-content: space-between; padding: 3px 8px; background: #4a0812; font-size: 11px; }
.gb-entry-h b { color: #ffef5a; }
.gb-entry p { margin: 0; padding: 8px; white-space: pre-wrap; word-break: break-word; }

/* ============ RIGHT ============ */
.right-words {
  margin: 0; padding: 0; list-style: none;
  font: 26px "Neucha", cursive; color: #dfe7ff; letter-spacing: 1px;
  text-shadow: 0 0 6px #6c8bff;
}
.right-words li { transform: rotate(-2deg); }
.right-words li:hover { color: #ffe08a; transform: rotate(3deg) scale(1.1); }
.notebook {
  position: relative; margin-top: 34px; padding: 18px 16px 18px 40px;
  background: #efeadf;
  background-image: repeating-linear-gradient(0deg, transparent 0 25px, #c6d0ea 25px 26px);
  color: #222; font: 18px "Neucha", cursive; letter-spacing: 1px;
  transform: rotate(3deg); box-shadow: 6px 8px 0 #0008;
}
.notebook ul { margin: 0; padding: 0; list-style: none; line-height: 26px; }
.spiral {
  position: absolute; left: -10px; top: 8px; bottom: 8px; width: 26px;
  background: radial-gradient(ellipse 12px 5px at 50% 50%, transparent 0 4px, #555 4.5px 6px, transparent 6.5px) 0 0 / 26px 18px repeat-y;
}
.nb-star { position: absolute; right: 16px; top: 6px; font-size: 44px; color: #ffc94a; transform: rotate(14deg); }
.disco { position: absolute; right: 0; top: 335px; font-size: 64px; animation: spin 5s linear infinite; }
.handwrite {
  margin: 26px 0 0 10px; font: 22px "Neucha", cursive; color: #fff;
  transform: rotate(-6deg); text-shadow: 0 0 6px #fff8;
}
.counter {
  margin-top: 26px; padding: 10px; text-align: center;
  background: linear-gradient(180deg, #c8c8c8, #8c8c8c); color: #000; font-size: 14px;
  border: 3px outset #ddd;
}
.lcd {
  margin-top: 6px; padding: 4px 6px;
  background: #001400; color: var(--lcd);
  font: 19px "Press Start 2P", monospace; letter-spacing: 1px;
  text-shadow: 0 0 6px var(--lcd); border: 2px inset #555;
  white-space: nowrap; overflow: hidden;
}
.welcome-btn {
  display: block; width: 100%; margin-top: 20px; padding: 14px 10px;
  font: 18px/1.15 "Lobster", cursive; color: #fff;
  background: linear-gradient(180deg, #ffe9a8 0%, #d9a531 45%, #9c6a12 55%, #e8b84a 100%);
  border: 2px solid #fff0c0; border-radius: 30px;
  box-shadow: 0 0 16px #e8b84a, inset 0 2px 6px #fff8;
  text-shadow: 1px 1px #4a2a00;
  animation: pulse 1.5s ease-in-out infinite;
}
.welcome-btn:hover { filter: hue-rotate(90deg) brightness(1.2); }
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 0 30px #ffc94a, inset 0 2px 6px #fff8; } }
.limbo { margin-top: 24px; font: 18px/1.1 "Press Start 2P", monospace; font-size: 12px; line-height: 1.6; color: #ffc94a; text-shadow: 0 0 8px #ffc94a; }
.thanks { margin-top: 20px; font: 30px/1 "Marck Script", cursive; color: #ffc94a; transform: rotate(-8deg); text-shadow: 0 0 10px #ffc94a; }

/* footer */
.foot {
  text-align: center; padding: 14px; font-size: 11px; color: #b09a6a;
  border-top: 1px dashed #6b4a1a;
}
.foot-badges { margin-bottom: 6px; color: #e6d3a3; }
.new {
  display: inline-block; padding: 1px 5px; margin: 0 8px;
  background: #ff0000; color: #ffff00; font: bold 10px Verdana, sans-serif;
  animation: blink .5s steps(2) infinite; transform: rotate(-8deg);
}

/* ============ WINAMP ============ */
.window { position: fixed; z-index: 50; }
.drag { cursor: move; }
.winamp {
  --wa-bar1: #26ff5a; --wa-bar2: #ffd400; --wa-bar3: #ff2a2a;
  width: 300px; user-select: none;
  font-family: Tahoma, sans-serif; color: var(--lcd);
  filter: drop-shadow(0 0 20px #2b4dff88) drop-shadow(6px 8px 0 #0009);
}
.wa-main, .wa-pl {
  background: linear-gradient(180deg, #3d3d58 0%, #23233a 100%);
  border: 1px solid #000; border-top-color: #8888aa; border-left-color: #8888aa;
}
.wa-title {
  display: flex; align-items: center; gap: 6px; height: 16px; padding: 0 4px;
  background: linear-gradient(180deg, #4a4a6a, #2a2a40);
  font: bold 9px Tahoma, sans-serif; color: #d6d6f0; letter-spacing: 2px;
}
.wa-stripes { flex: 1; height: 6px; background: repeating-linear-gradient(0deg, #c8a24a 0 1px, transparent 1px 3px); }
.wa-x { cursor: pointer; color: #ccc; font-size: 11px; }
.wa-body { display: flex; gap: 6px; padding: 6px; }
.wa-left {
  width: 110px; background: #000; border: 1px solid #555; border-right-color: #888; border-bottom-color: #888;
  padding: 4px; position: relative; overflow: hidden;
}
.wa-status { position: absolute; left: 4px; top: 6px; font-size: 9px; }
.wa-time {
  text-align: right; font: 17px/1 "Press Start 2P", monospace; color: var(--lcd);
  text-shadow: 0 0 6px var(--lcd); padding: 4px 0 6px 12px; overflow: hidden; white-space: nowrap;
}
.wa-vis { display: block; width: 100%; height: 36px; image-rendering: pixelated; }
.wa-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wa-marquee {
  overflow: hidden; white-space: nowrap; background: #000; border: 1px solid #555;
  font: 9px "Press Start 2P", monospace; padding: 4px 0; color: var(--lcd);
}
.wa-marquee span { display: inline-block; padding-left: 100%; animation: waScroll 12s linear infinite; }
@keyframes waScroll { to { transform: translateX(-100%); } }
.wa-info { font-size: 9px; color: #9aa; }
.wa-info span { background: #000; color: var(--lcd); padding: 0 3px; }
.wa-info .on { color: var(--lcd); font-style: normal; margin-left: 6px; }
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, #0a6b14, #c8d600, #c80000); border: 1px solid #000; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 10px; margin-top: -3px; background: linear-gradient(180deg, #ddd, #888); border: 1px solid #000; }
input[type=range]::-moz-range-track { height: 6px; background: linear-gradient(90deg, #0a6b14, #c8d600, #c80000); border: 1px solid #000; }
input[type=range]::-moz-range-thumb { width: 14px; height: 10px; border-radius: 0; background: linear-gradient(180deg, #ddd, #888); border: 1px solid #000; }
.wa-seek { display: block; width: calc(100% - 12px); margin: 0 6px 6px; }
.wa-seek::-webkit-slider-runnable-track { background: #111; }
.wa-seek::-moz-range-track { background: #111; }
.wa-ctrl { display: flex; align-items: center; gap: 2px; padding: 0 6px 6px; }
.wa-ctrl button {
  width: 32px; height: 22px; padding: 0;
  background: var(--wa-btn, linear-gradient(180deg, #d0d0de, #8c8ca6)); color: var(--wa-btn-ink, #111);
  border: 1px solid; border-color: #fff #222 #222 #fff;
}
.wa-ctrl button svg { display: block; width: 11px; height: 11px; margin: auto; fill: currentColor; }
.wa-ctrl .wa-play { width: 44px; }
.wa-ctrl .wa-play svg { width: 13px; height: 13px; }
.wa-ctrl button:active, .wa-ctrl button.on { border-color: #222 #fff #fff #222; filter: brightness(.88); }
.wa-logo { margin-left: auto; font-size: 18px; filter: drop-shadow(0 0 4px #ffde00); }
.wa-list {
  margin: 4px; padding: 4px 4px 4px 30px; height: 130px; overflow-y: auto;
  background: #000; border: 1px solid #555;
  font: 11px Tahoma, sans-serif; color: var(--lcd);
}
.wa-list li { padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wa-list li:hover { color: #fff; }
.wa-list li.cur { color: #fff; background: #0000c6; }
.wa-pl-foot { font-size: 9px; color: #889; padding: 0 6px 4px; }
.wa-pl.dragover .wa-list { outline: 2px dashed var(--lcd); }

/* popups */
.popup { width: 360px; transform: translateX(-50%); }
.prize { transform: none; animation: shake .4s ease-in-out 3; }
.prize-big {
  font: 16px/1.4 "Press Start 2P", monospace; text-align: center; color: #c00;
  animation: rainbowText 1s linear infinite; padding: 6px 0;
}
.prize-btns { display: flex; justify-content: center; gap: 10px; }
@keyframes rainbowText { 0% { color: #f00; } 25% { color: #f0f; } 50% { color: #00f; } 75% { color: #0a0; } 100% { color: #f00; } }
@keyframes shake { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }
.about-b p { margin: 4px 0; }
.err { width: 330px; }
.err .win98-b { display: flex; gap: 12px; align-items: flex-start; }
.err-ico { font-size: 34px; }

/* trail sparkles */
.spark {
  position: fixed; z-index: 2000; pointer-events: none;
  font-size: 14px; animation: sparkFall 1s ease-out forwards;
}
@keyframes sparkFall { to { transform: translate(var(--dx), 40px) rotate(180deg) scale(.2); opacity: 0; } }

/* KONAMI / ugar mode */
body.ugar .site { animation: ugar 2s linear infinite; }
body.ugar .ie { animation: wobble .5s ease-in-out infinite alternate; }
@keyframes ugar { to { filter: hue-rotate(360deg); } }
@keyframes wobble { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }

/* default look: the grinning smiley replaces the cursor everywhere except text fields */
body.skin-blatnoy, body.skin-blatnoy *:not(textarea):not(input[type=text]):not(input:not([type])) {
  cursor: url(../img/cursor.png) 14 14, auto !important;
  cursor: image-set(url(../img/cursor.png) 1x, url(../img/cursor@2x.png) 2x) 14 14, auto !important;
}

body.skin-menthol, body.skin-menthol *:not(textarea):not(input[type=text]):not(input:not([type])) {
  cursor: url(../img/cursor-sad.png) 14 14, auto !important;
  cursor: image-set(url(../img/cursor-sad.png) 1x, url(../img/cursor-sad@2x.png) 2x) 14 14, auto !important;
}

/* ============ VIEW MENU ============ */
.menu-view { position: relative; cursor: pointer; }
.menu-view.open { background: #316ac5; color: #fff; }
.xp-menu {
  position: absolute; left: 0; top: 100%; z-index: 300; min-width: 230px;
  background: #fff; color: #000; padding: 2px;
  border: 1px solid #8a867a; box-shadow: 3px 3px 4px #0006;
  font: 12px Tahoma, sans-serif;
}
.xp-menu-h { padding: 3px 8px 3px 24px; color: #6a6a6a; font-size: 11px; }
.xp-item { position: relative; padding: 4px 18px 4px 24px; white-space: nowrap; }
.xp-item:hover:not(.off) { background: #316ac5; color: #fff; }
.xp-item.off { color: #a0a0a0; }
.xp-item.on::before { content: "●"; position: absolute; left: 8px; font-size: 9px; top: 6px; }
.xp-menu hr { border: 0; border-top: 1px solid #c5c2b2; margin: 3px 2px; }

/* ============ SKIN: ДЫМ СИГАРЕТ С МЕНТОЛОМ ============ */
#smoke { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; opacity: 0; transition: opacity 1.5s; }
body.skin-menthol #smoke { opacity: 1; }
body.skin-menthol, body.skin-menthol html { background: #030707; }
body.skin-menthol .site {
  background:
    radial-gradient(ellipse at 15% 0%, #12302c 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, #0d2226 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, #10201e 0%, transparent 55%),
    #040808;
}
body.skin-menthol .ie { box-shadow: 0 0 0 1px #000, 0 0 60px #4fd6b833, 0 0 140px #9fffe022; }
body.skin-menthol .topmarquee {
  background: linear-gradient(90deg, #0c2422, #2d5e57, #0c2422, #2d5e57); background-size: 200% 100%;
  color: #c8fff0; font-family: "Marck Script", cursive; font-size: 18px; text-shadow: 0 0 6px #6fe3c8; padding: 3px 0;
}
body.skin-menthol .ucoz-menu { background: linear-gradient(180deg, #1c3a37, #071211); border-color: #7fbfb2; box-shadow: 0 0 20px #4fd6b833; }
body.skin-menthol .ucoz-menu a { background: linear-gradient(180deg, #2e5853 0%, #1d3d39 50%, #15302d 51%, #1d3d39 100%); border-color: #7fbfb2; }
body.skin-menthol .ucoz-menu a:hover { background: linear-gradient(180deg, #a8f0e0, #3f9686); }
body.skin-menthol .smiley { filter: grayscale(1) brightness(1.1) sepia(.3) hue-rotate(120deg); }
body.skin-menthol .block, body.skin-menthol .guestbook { border-color: #2d5e57; background: #050e0dcc; }
body.skin-menthol .block-h { background: linear-gradient(180deg, #3a6e66, #12302c); }
body.skin-menthol .minichat b { color: #9fffe0; }
body.skin-menthol .gb-entry { border-color: #2d5e57; background: #081413; }
body.skin-menthol .gb-entry-h { background: #12302c; }
body.skin-menthol .gb-entry-h b { color: #9fffe0; }
body.skin-menthol .heart-svg { stroke: #bfeee2; animation: none; filter: drop-shadow(0 0 6px #6fe3c8aa); }
body.skin-menthol .heart-svg .inner { stroke: #4f8f84; }
body.skin-menthol .heart-photo img { filter: grayscale(.85) contrast(1.1) brightness(.9); }
body.skin-menthol .frame-plate { background: linear-gradient(180deg, #e6fff8, #8fc9bc 55%, #3d6e66); border-color: #0d2422; color: #0d2422; }
body.skin-menthol .hero-words { color: #a8e8da; text-shadow: 0 0 8px #2fa08c; }
body.skin-menthol .hero-words li { animation: drift 6s ease-in-out infinite alternate; }
body.skin-menthol .hero-words li:nth-child(even) { animation-delay: -3s; }
@keyframes drift { to { transform: rotate(-2deg) translateX(8px); opacity: .55; } }
body.skin-menthol .subtitle { color: #bff5e8; font-family: "Marck Script", cursive; font-size: 30px; text-shadow: 0 0 8px #3fb7a0, 0 0 22px #1c5c52; }
body.skin-menthol .subtitle::before, body.skin-menthol .subtitle::after { content: " ~ "; color: #6fe3c8; }
body.skin-menthol .crown { filter: grayscale(1) brightness(1.4) drop-shadow(0 0 6px #9fffe0); opacity: .7; }
body.skin-menthol #chromeFill stop:nth-child(1) { stop-color: #eafff9; }
body.skin-menthol #chromeFill stop:nth-child(2) { stop-color: #9fe9d8; }
body.skin-menthol #chromeFill stop:nth-child(3) { stop-color: #3e9e8e; }
body.skin-menthol #chromeFill stop:nth-child(4) { stop-color: #0c2f2c; }
body.skin-menthol #chromeFill stop:nth-child(5) { stop-color: #4fb8a4; }
body.skin-menthol #chromeFill stop:nth-child(6) { stop-color: #a6eadb; }
body.skin-menthol #chromeFill stop:nth-child(7) { stop-color: #3a8e80; }
body.skin-menthol #puffy feFlood:nth-of-type(1) { flood-color: #8fe3cf; }
body.skin-menthol #puffy feFlood:nth-of-type(2) { flood-color: #2a8f7e; }
body.skin-menthol #puffy feFlood:nth-of-type(3) { flood-color: #001412; }
body.skin-menthol .paper { background-color: #d9dedb; filter: grayscale(.4); }
body.skin-menthol .angel { filter: grayscale(1); opacity: .6; }
body.skin-menthol .right-words { color: #c8f2e8; text-shadow: 0 0 6px #3fb7a0; }
body.skin-menthol .right-words li:hover { color: #9fffe0; }
body.skin-menthol #hitparad li { color: #cfeee6; }
body.skin-menthol #hitparad li:hover, body.skin-menthol #hitparad li.cur { color: #9fffe0; text-shadow: 0 0 6px #2fa08c; }
body.skin-menthol .handwrite { color: #d8fff5; font-family: "Marck Script", cursive; font-size: 26px; text-shadow: 0 0 8px #6fe3c8; }
body.skin-menthol .welcome-btn {
  background: linear-gradient(180deg, #e6fff8 0%, #7fd0bf 45%, #2f7d70 55%, #8fdcc9 100%);
  border-color: #e6fff8; color: #fff; text-shadow: 1px 1px #0d3a34;
  box-shadow: 0 0 16px #4fd6b8, inset 0 2px 6px #fff8; animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { box-shadow: 0 0 34px #9fffe0, inset 0 2px 6px #fff8; } }
body.skin-menthol .limbo { color: #9fffe0; text-shadow: 0 0 8px #2fa08c; }
body.skin-menthol .thanks { color: #bff5e8; text-shadow: 0 0 10px #3fb7a0; }
body.skin-menthol .foot { color: #7fa59c; border-top-color: #2d5e57; }
body.skin-menthol .foot-badges { color: #a8d6cb; }
body.skin-menthol .new { background: #2d5e57; color: #e6fff8; animation-duration: 2s; }
body.skin-menthol .b88 { filter: grayscale(.8) sepia(.2) hue-rotate(120deg); }
body.skin-menthol .cd-disc { filter: grayscale(.6) hue-rotate(100deg); }
body.skin-menthol .lcd { color: #9fffe0; text-shadow: 0 0 6px #4fd6b8; }

/* ============ SKIN: ГРУЗ 200 ============ */
.vhs-osd { display: none; }
body.skin-gruz .vhs-osd {
  display: block; position: fixed; bottom: 24px; right: 34px; z-index: 46; text-align: right; pointer-events: none;
  font: 18px "Press Start 2P", monospace; color: #f4f4f4; line-height: 1.6;
  text-shadow: 2px 0 #d12b1f, -2px 0 #2bd1c4; animation: osd 2.5s steps(1) infinite;
}
body.skin-gruz .vhs-osd span { font-size: 12px; }
@keyframes osd { 0%, 92% { opacity: 1; transform: none; } 94% { opacity: .4; transform: translateX(3px); } 97% { opacity: 1; transform: translateX(-2px); } }
body.skin-gruz, body.skin-gruz html { background: #0e0c08; }
body.skin-gruz .ie { box-shadow: 0 0 0 1px #000, 0 0 60px #8b1a1a33; }
body.skin-gruz .site {
  background:
    repeating-linear-gradient(90deg, #0000 0 38px, #ffffff06 38px 40px),
    radial-gradient(ellipse at 20% 0%, #3a2f1c 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, #2a2416 0%, transparent 55%),
    #15120c;
  filter: sepia(.25) saturate(.8) contrast(1.05);
}
body.skin-gruz .site::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .4s steps(3) infinite;
}
@keyframes grain { 33% { background-position: 60px -40px; } 66% { background-position: -80px 30px; } }
body.skin-gruz .topmarquee {
  background: #8b1a1a; color: #f2d36b; font: 13px "Rubik Mono One", sans-serif; text-shadow: none; animation: none;
  border-top: 2px solid #f2d36b; border-bottom: 2px solid #f2d36b;
}
body.skin-gruz .ucoz-menu { background: linear-gradient(180deg, #4b5320, #23270e); border-color: #b8a060; box-shadow: none; }
body.skin-gruz .ucoz-menu a { background: linear-gradient(180deg, #6b7330 0%, #4b5320 50%, #3d4419 51%, #4b5320 100%); border-color: #b8a060; font-family: "Courier New", monospace; font-weight: bold; }
body.skin-gruz .ucoz-menu a:hover { background: linear-gradient(180deg, #b03a2e, #6b1410); }
body.skin-gruz .smiley { filter: sepia(1) saturate(.6) brightness(.85); }
body.skin-gruz .block, body.skin-gruz .guestbook { border-color: #5a4a2a; background: #1a160ecc; }
body.skin-gruz .block-h { background: linear-gradient(180deg, #8b1a1a, #4a0d0a); font-family: "Courier New", monospace; }
body.skin-gruz .block-b, body.skin-gruz .minichat, body.skin-gruz .stats { font-family: "Courier New", monospace; color: #d8c9a3; }
body.skin-gruz .minichat b { color: #f2d36b; }
body.skin-gruz .gb-entry { border-color: #5a4a2a; background: #1d1810; font-family: "Courier New", monospace; }
body.skin-gruz .gb-entry-h { background: #4a0d0a; }
body.skin-gruz .heart-svg { stroke: #9a8a5a; animation: none; filter: none; }
body.skin-gruz .heart-svg .inner { stroke: #5a4a2a; }
body.skin-gruz .heart-photo img { filter: sepia(.9) contrast(1.2) brightness(.85); }
body.skin-gruz .heart-frame::after {
  content: ""; position: absolute; right: 18px; bottom: 34px; width: 70px; height: 12px;
  background: #0a0a0a; transform: rotate(-45deg); box-shadow: 0 0 0 1px #333;
}
body.skin-gruz .frame-plate {
  background: #e8dcc0; color: #1a1a1a; border: 1px solid #1a1a1a;
  font: bold 12px "Courier New", monospace; letter-spacing: 1px;
}
body.skin-gruz .hero-words { color: #d8c9a3; font-family: "Courier New", monospace; font-size: 20px; text-shadow: none; }
body.skin-gruz .hero-words li { transform: none; }
body.skin-gruz .subtitle { color: #e8dcc0; font: 22px "Courier New", monospace; letter-spacing: 3px; text-shadow: 0 0 6px #8b1a1a; }
body.skin-gruz .subtitle::before, body.skin-gruz .subtitle::after { content: " — "; color: #8b1a1a; animation: none; }
body.skin-gruz .crown { opacity: 0; }
body.skin-gruz #chromeFill stop:nth-child(1) { stop-color: #f2f2f2; }
body.skin-gruz #chromeFill stop:nth-child(2) { stop-color: #b4b8bd; }
body.skin-gruz #chromeFill stop:nth-child(3) { stop-color: #70757c; }
body.skin-gruz #chromeFill stop:nth-child(4) { stop-color: #2a2d31; }
body.skin-gruz #chromeFill stop:nth-child(5) { stop-color: #8a8f96; }
body.skin-gruz #chromeFill stop:nth-child(6) { stop-color: #d0d3d8; }
body.skin-gruz #chromeFill stop:nth-child(7) { stop-color: #6a6f76; }
body.skin-gruz #puffy feFlood:nth-of-type(1) { flood-color: #c9ccd1; }
body.skin-gruz #puffy feFlood:nth-of-type(2) { flood-color: #7a1010; }
body.skin-gruz #puffy feFlood:nth-of-type(3) { flood-color: #000; }
body.skin-gruz .paper { background-color: #d9cfae; filter: sepia(.4); font-family: "Courier New", monospace; }
body.skin-gruz .paper h3 { font-family: "Courier New", monospace; font-weight: bold; }
body.skin-gruz .angel { filter: sepia(1); }
body.skin-gruz .right-words { color: #e8dcc0; font-family: "Courier New", monospace; font-weight: bold; text-shadow: none; }
body.skin-gruz .right-words li:hover { color: #d12b1f; }
body.skin-gruz #hitparad li { color: #d8c9a3; font-family: "Courier New", monospace; }
body.skin-gruz #hitparad li:hover, body.skin-gruz #hitparad li.cur { color: #f2d36b; text-shadow: none; }
body.skin-gruz .handwrite { color: #e8dcc0; font-family: "Marck Script", cursive; text-shadow: none; }
body.skin-gruz .welcome-btn {
  background: #8b1a1a; border: 3px double #f2d36b; border-radius: 0; color: #f2d36b;
  font: 15px/1.4 "Rubik Mono One", sans-serif; text-shadow: none; box-shadow: none; animation: none;
}
body.skin-gruz .limbo { color: #e8dcc0; text-shadow: none; }
body.skin-gruz .thanks { color: #d12b1f; text-shadow: none; }
body.skin-gruz .foot { color: #9a8a6a; border-top-color: #5a4a2a; }
body.skin-gruz .new { background: #8b1a1a; color: #f2d36b; }
body.skin-gruz .b88 { filter: sepia(.9) saturate(.7); }
body.skin-gruz .cd-disc { filter: sepia(.8); }
body.skin-gruz .lcd { color: #ff5a3a; text-shadow: 0 0 6px #d12b1f; background: #140404; }

/* ============ WINAMP SKINS (follow the site look) ============ */
body.skin-blatnoy .winamp {
  --lcd: #ffc94a; --wa-bar1: #e8a830; --wa-bar2: #ffd36a; --wa-bar3: #fff3c4;
  --wa-btn: linear-gradient(180deg, #ffe9a8, #c9932e 60%, #8a5a10); --wa-btn-ink: #3a1a00;
  filter: drop-shadow(0 0 18px #c9932e66) drop-shadow(6px 8px 0 #0009);
}
body.skin-blatnoy .wa-main, body.skin-blatnoy .wa-pl { background: linear-gradient(180deg, #5a0f1a, #22060a); border-top-color: #d4a73a; border-left-color: #d4a73a; }
body.skin-blatnoy .wa-title { background: linear-gradient(180deg, #7a1424, #3a0610); color: #ffe08a; }
body.skin-blatnoy .wa-stripes { background: repeating-linear-gradient(0deg, #d4a73a 0 1px, transparent 1px 3px); }
body.skin-blatnoy .wa-info { color: #c9a24a; }
body.skin-blatnoy .wa-list li.cur { background: #7a1424; color: #fff3c4; }
body.skin-blatnoy .wa-pl-foot { color: #b0905a; }

body.skin-menthol .winamp {
  --lcd: #9fffe0; --wa-bar1: #3fb7a0; --wa-bar2: #8fe3cf; --wa-bar3: #e6fff8;
  --wa-btn: linear-gradient(180deg, #e6f2ef, #8fb3ab); --wa-btn-ink: #0d2a26;
  filter: drop-shadow(0 0 18px #4fd6b855) drop-shadow(6px 8px 0 #0009);
}
body.skin-menthol .wa-main, body.skin-menthol .wa-pl { background: linear-gradient(180deg, #1c3a37, #071211); border-top-color: #7fbfb2; border-left-color: #7fbfb2; }
body.skin-menthol .wa-title { background: linear-gradient(180deg, #2d5e57, #12302c); color: #c8fff0; }
body.skin-menthol .wa-stripes { background: repeating-linear-gradient(0deg, #7fbfb2 0 1px, transparent 1px 3px); }
body.skin-menthol .wa-info { color: #7fbfb2; }
body.skin-menthol .wa-list li.cur { background: #2d5e57; color: #e6fff8; }
body.skin-menthol .wa-logo { filter: grayscale(1) brightness(1.5); }

/* Gruz 200: Soviet "Электроника" cassette deck — beige plastic, orange VFD */
body.skin-gruz .winamp {
  --lcd: #ff8a3a; --wa-bar1: #d9541f; --wa-bar2: #ff8a3a; --wa-bar3: #ffd0a0;
  --wa-btn: linear-gradient(180deg, #f0e6cc, #b8ab8a); --wa-btn-ink: #2a2014;
  font-family: "Courier New", monospace;
  filter: sepia(.15) drop-shadow(6px 8px 0 #0009);
}
body.skin-gruz .wa-main, body.skin-gruz .wa-pl { background: linear-gradient(180deg, #4a4234, #24201a); border-top-color: #9a8a6a; border-left-color: #9a8a6a; }
body.skin-gruz .wa-title { background: #8b1a1a; color: #f2d36b; font-family: "Courier New", monospace; }
body.skin-gruz .wa-stripes { background: repeating-linear-gradient(0deg, #f2d36b 0 1px, transparent 1px 3px); }
body.skin-gruz .wa-left, body.skin-gruz .wa-marquee, body.skin-gruz .wa-list { background: #140a04; }
body.skin-gruz .wa-info { color: #b8ab8a; }
body.skin-gruz .wa-list li.cur { background: #8b1a1a; color: #f2d36b; }
body.skin-gruz .wa-logo { filter: sepia(1); }

/* Flash-style crossfade between skins */
.skin-flash { position: fixed; inset: 0; z-index: 2500; pointer-events: none; background: #e9fff9; animation: skinFlash .9s ease-out forwards; }
@keyframes skinFlash { from { opacity: .9; } to { opacity: 0; } }