:root {
  --c-bg: #000;
  --c-lime: #0f0;
  --c-cyan: #0ff;
  --c-pink: #ff69b4;
  --c-magenta: #ff00ff;
  --c-hot: #ff0066;
  --c-gold: #ffd700;
  --c-red: #f44;
  --c-yellow: #ff0;
  --c-muted: #888;
  --c-dim: #555;
  --c-panel: rgba(0, 0, 0, 0.9);
  --font-mono: 'Courier New', monospace;
  --focus-ring: 0 0 0 2px #000, 0 0 0 4px var(--c-cyan), 0 0 12px var(--c-magenta);
}

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

html { overflow-x: hidden; }

body {
  background: #000;
  background-image:
    radial-gradient(#0a0a2e 1px, transparent 1px),
    radial-gradient(#1a0a2e 1px, transparent 1px);
  background-size: 40px 40px, 20px 20px;
  font-family: var(--font-mono);
  overflow-x: hidden;
  min-height: 100vh;
}

@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1s step-end infinite; }

@keyframes spinSlow { 100% { transform: rotate(360deg); } }
@keyframes spinFast { 100% { transform: rotate(360deg); } }
@keyframes floatDrift {
  0% { transform: translate(0, 0) rotate(-5deg); }
  33% { transform: translate(30px, -20px) rotate(5deg); }
  66% { transform: translate(-20px, 15px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(-5deg); }
}
@keyframes sway {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(25px) rotate(4deg); }
  50% { transform: translateX(0) rotate(0deg); }
  75% { transform: translateX(-25px) rotate(-4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes petBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}
@keyframes diagonalDrift {
  0% { transform: translate(-100px, -100px) rotate(0deg); }
  50% { transform: translate(calc(100vw + 100px), calc(100vh + 100px)) rotate(360deg); }
  100% { transform: translate(-100px, -100px) rotate(720deg); }
}
@keyframes glitch {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-4px, 3px); filter: hue-rotate(90deg); }
  40% { transform: translate(4px, -2px); filter: hue-rotate(180deg); }
  60% { transform: translate(-3px, -3px); filter: hue-rotate(270deg); }
  80% { transform: translate(3px, 4px); filter: hue-rotate(360deg); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}
@keyframes tether {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(40px, -60px) rotate(15deg); }
  50% { transform: translate(-20px, -30px) rotate(-10deg); }
  75% { transform: translate(30px, 20px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes crawlLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes crawlRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ===== UNDER CONSTRUCTION BAR ===== */
.sys-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: #000;
  border-bottom: 1px solid #0f0;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  color: #0f0;
  font-weight: normal;
  text-shadow: none;
  flex-wrap: nowrap;
  overflow: hidden;
}
.sys-bar .sep { color: #333; margin: 0 6px; }

/* ===== DECO LAYER ===== */
.deco-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.deco-layer img {
  position: absolute;
  object-fit: contain;
  opacity: 0.3;
  filter: drop-shadow(0 0 20px rgba(255,0,255,0.2));
  will-change: transform;
}

/* Deco placements (was inline) */
.deco-layer img.d1 { left:-20px; top:10%; height:80px; opacity:0.28; animation:spinSlow 12s linear infinite; }
.deco-layer img.d2 { right:-20px; top:30%; height:70px; opacity:0.22; animation:spinFast 5s linear infinite; }
.deco-layer img.d3 { left:40%; top:50%; height:60px; opacity:0.2; animation:floatDrift 7s ease-in-out infinite; }
.deco-layer img.d4 { right:10%; top:65%; height:65px; opacity:0.22; animation:petBounce 2s ease-in-out infinite; }
.deco-layer img.d5 { left:15%; top:75%; height:55px; opacity:0.18; animation:diagonalDrift 25s linear infinite; }
.deco-layer img.d6 { right:30%; top:20%; height:60px; opacity:0.2; animation:tether 8s ease-in-out infinite; }
.deco-layer img.d7 { left:70%; top:45%; height:50px; opacity:0.18; animation:spinSlow 15s linear infinite reverse; }
.deco-layer img.d8 { left:5%; top:55%; height:45px; opacity:0.15; animation:crawlLeft 20s linear infinite; }
.deco-layer img.d9 { right:50%; top:15%; height:40px; opacity:0.16; animation:diagonalDrift 30s linear infinite; }
.deco-layer img.d10 { left:80%; top:70%; height:35px; opacity:0.14; animation:glitch 1s ease-in-out infinite; }
.deco-layer img.d11 { left:25%; top:85%; height:50px; opacity:0.13; animation:floatDrift 10s ease-in-out infinite reverse; }
.deco-layer img.d12 { right:60%; top:40%; height:30px; opacity:0.17; animation:spinSlow 8s linear infinite; }
.deco-layer img.d13 { left:90%; top:5%; height:40px; opacity:0.15; animation:petBounce 3s ease-in-out infinite; }
.deco-layer img.d14 { right:5%; top:50%; height:45px; opacity:0.14; animation:crawlRight 25s linear infinite; }
.deco-layer img.d15 { left:50%; top:30%; height:35px; opacity:0.16; animation:tether 10s ease-in-out infinite; }
.deco-layer img.d16 { right:80%; top:60%; height:38px; opacity:0.13; animation:spinFast 6s linear infinite; }
.deco-layer img.d17 { left:65%; top:80%; height:32px; opacity:0.15; animation:sway 5s ease-in-out infinite; }
.deco-layer img.d18 { right:25%; top:5%; height:42px; opacity:0.14; animation:glitch 1.5s ease-in-out infinite; }
.deco-layer img.d19 { left:10%; top:40%; height:28px; opacity:0.17; animation:diagonalDrift 35s linear infinite reverse; }
.deco-layer img.d20 { right:15%; top:75%; height:36px; opacity:0.13; animation:floatDrift 12s ease-in-out infinite; }

/* ===== WRAPPER ===== */
.wrapper {
  max-width: 860px;
  margin: 30px auto 10px;
  position: relative;
  z-index: 10;
}

/* ===== BOOT ===== */
.boot {
  background: #000;
  border: 1px solid #0f0;
  padding: 8px 12px;
  color: #0f0;
  font-size: 11px;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 8px;
  box-shadow: 0 0 10px rgba(0,255,0,0.15);
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(135deg, #ff0066, #800040, #ff0066);
  border: 3px ridge #ff00ff;
  padding: 14px 20px;
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255,0,255,0.3);
}
.header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
  pointer-events: none;
}
.header h1 {
  font-family: var(--font-mono);
  font-size: 30px;
  color: #fff;
  text-shadow:
    2px 2px 0 #ff00ff,
    4px 4px 0 #00ffff,
    0 0 30px #ff00ff;
  letter-spacing: 4px;
  position: relative;
  z-index: 1;
}
.header h1 .unit { color: #0ff; font-size: 13px; display: block; letter-spacing: 6px; }
.header .sub {
  color: #ff99cc;
  font-size: 13px;
  margin-top: 4px;
  text-shadow: 0 0 10px #ff0066;
  position: relative;
  z-index: 1;
}

/* ===== TSUNDERE + PLAYER ROW ===== */
.tsun-player-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: stretch;
}
.tsun-player-row > * { min-width: 0; }
@media (max-width: 600px) {
  .tsun-player-row { flex-direction: column; }
  .tsun-player-row .tsun-box,
  .tsun-player-row .player-panel { flex: 1 !important; }
}

/* ===== TSUNDERE BOX ===== */
.tsun-box {
  background: linear-gradient(135deg, #1a0033, #33001a);
  border: 2px ridge #ff00ff;
  padding: 10px;
  text-align: center;
  margin-bottom: 0;
  color: #ff99cc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: 'Comic Sans MS', cursive;
  position: relative;
  overflow: hidden;
}
.tsun-box::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(transparent, rgba(255,0,255,0.08), transparent, rgba(255,0,255,0.08), transparent);
  animation: spinSlow 6s linear infinite;
  pointer-events: none;
}
.tsun-box > * { position: relative; z-index: 1; }
.tsun-box .mood { font-size: 22px; display: block; }
.tsun-box .msg { font-size: 16px; color: #ff0; text-shadow: 0 0 15px #f0f; }

/* ===== SYS PANELS 4x ===== */
.sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
@media (max-width: 500px) { .sys-grid { grid-template-columns: 1fr; } }

.panel {
  background: rgba(0,0,0,0.9);
  border: 1px solid #0f0;
  padding: 8px 10px;
  text-align: left;
  color: #0f0;
  font-size: 11px;
  line-height: 1.5;
  backdrop-filter: blur(4px);
}
.panel.pink { border-color: #ff69b4; color: #ff69b4; }
.panel.cyan { border-color: #0ff; color: #0ff; }
.panel.gold { border-color: #ffd700; color: #ffd700; }
.panel.red { border-color: #f44; color: #f44; }
.panel .label { display: block; font-weight: bold; border-bottom: 1px solid currentColor; margin-bottom: 4px; padding-bottom: 3px; font-size: 10px; letter-spacing: 2px; }
.panel .v { color: #fff; }
.panel .bar-bg { display: inline-block; width: 70px; height: 8px; background: #1a1a1a; border: 1px solid #333; vertical-align: middle; }
.panel .bar { display: inline-block; height: 8px; }

/* ===== HERO AREA ===== */
.hero-area {
  position: relative;
  height: 320px;
  margin-bottom: 8px;
  border: 2px ridge #ff00ff;
  background: radial-gradient(ellipse at center, #1a0033 0%, #000 70%);
  overflow: hidden;
}
.hero-area .hero-img {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 0 25px rgba(255,0,255,0.4));
  pointer-events: none;
}
.hero-area .hero-img:nth-child(1) {
  left: 3%; bottom: 0;
  height: 280px;
  animation: tether 6s ease-in-out infinite;
  z-index: 2;
}
.hero-area .hero-img:nth-child(2) {
  left: 32%; bottom: 0;
  height: 260px;
  animation: floatDrift 5s ease-in-out infinite;
  z-index: 2;
}
.hero-area .hero-img:nth-child(3) {
  right: 3%; bottom: 0;
  height: 280px;
  animation: sway 4s ease-in-out infinite;
  z-index: 2;
}
.hero-area .hero-img:nth-child(4) {
  left: 50%; top: 5%;
  height: 100px;
  animation: spinSlow 10s linear infinite;
  opacity: 0.4;
  z-index: 1;
}
.hero-area .hero-img:nth-child(5) {
  left: 10%; top: 5%;
  height: 80px;
  animation: petBounce 1.5s ease-in-out infinite;
  opacity: 0.5;
  z-index: 1;
}
.hero-area .hero-img:nth-child(6) {
  right: 15%; top: 3%;
  height: 90px;
  animation: glitch 0.6s ease-in-out infinite;
  opacity: 0.35;
  z-index: 1;
}
.hero-area .center-text {
  position: absolute;
  bottom: 4px;
  left: 0; right: 0;
  font-size: 12px;
  background: rgba(0,0,0,0.7);
  padding: 4px;
  border-top: 1px solid #ff0;
  color: #ff0;
}

/* ===== SOCIAL SECTIONS ===== */
.sect {
  margin-bottom: 8px;
}
.sect h2 {
  font-size: 13px;
  color: #fff;
  background: linear-gradient(90deg, #ff0066, #660066);
  padding: 6px 12px;
  letter-spacing: 2px;
  border-left: 3px solid #0ff;
  margin-bottom: 6px;
}
.sect h2 .sub { font-size: 10px; color: #aaa; letter-spacing: 1px; }

.s-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.s-grid a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #0f0;
  background: #000;
  border: 1px solid #0f0;
  transition: all 0.15s;
  letter-spacing: 1px;
}
.s-grid a::before { content: '>'; }
.s-grid a:hover {
  background: #0f0;
  color: #000;
  box-shadow: 0 0 20px #0f0;
  transform: scale(1.05);
}
.s-grid a:hover::before { color: #000; }

.s-grid a.pink { color: #ff69b4; border-color: #ff69b4; }
.s-grid a.pink::before { color: #ff69b4; }
.s-grid a.pink:hover { background: #ff69b4; color: #000; box-shadow: 0 0 20px #ff69b4; }
.s-grid a.pink:hover::before { color: #000; }

.s-grid a.cyan { color: #0ff; border-color: #0ff; }
.s-grid a.cyan::before { color: #0ff; }
.s-grid a.cyan:hover { background: #0ff; color: #000; box-shadow: 0 0 20px #0ff; }
.s-grid a.cyan:hover::before { color: #000; }

.s-grid a.gold { color: #ffd700; border-color: #ffd700; }
.s-grid a.gold::before { color: #ffd700; }
.s-grid a.gold:hover { background: #ffd700; color: #000; box-shadow: 0 0 20px #ffd700; }
.s-grid a.gold:hover::before { color: #000; }

.s-grid a.pulse { animation: glowPulse 1.5s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px currentColor; }
  50% { box-shadow: 0 0 25px currentColor, 0 0 50px currentColor; }
}

/* ===== PANEL FOOT ===== */
.panel .foot {
  margin-top: 4px;
  border-top: 1px solid currentColor;
  padding-top: 4px;
  font-size: 10px;
  color: #aaa;
}
.panel.red .foot { color: #f88; }

.flex-2 { flex: 2; }
.flex-1 { flex: 1; }

/* ===== SYS-BAR EXTRAS ===== */
.sys-bar .brand { color: #0ff; flex-shrink: 0; }
.sys-bar marquee { flex: 1; min-width: 0; }
.sys-bar .sys-date {
  color: #555;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ===== SOCIAL HANDLE HINT ===== */
.s-grid a .handle { font-size: 9px; color: #888; }

/* ===== COFFEE BLOCK INLINE REPLACEMENTS ===== */
.coffee-emoji { font-size: 30px; line-height: 1; }
.coffee-code {
  font-size: 9px;
  color: #ff69b4;
  font-style: italic;
}
.blog-link.kofi {
  background: linear-gradient(180deg, #ff69b4, #cc0066);
  border-color: #ff69b4;
}

.badge-row .badge-moe { background: #f0f; color: #ff0; border-color: #f0f; }
.badge-row .badge-baka { background: #000; color: #f00; border-color: #f00; }
.badge-row .badge-kawaii { background: #ff69b4; color: #000; border-color: #ff69b4; }

.footer .disclaimer {
  font-size: 9px;
  color: #444;
}


/* ===== TRACKER ===== */
.tracker {
  text-align: center;
  font-size: 11px;
  color: #0f0;
  padding: 6px;
  border: 1px dashed #0f0;
  background: #000;
  margin-bottom: 8px;
}
.tracker .n {
  display: inline-block;
  background: #0a0a0a;
  padding: 1px 5px;
  border: 1px inset #333;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0 2px;
}

/* ===== BADGES ===== */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}
.badge-row span {
  padding: 3px 8px;
  font-size: 9px;
  font-weight: bold;
  border: 2px outset #ccc;
  background: #c0c0c0;
  color: #000;
  letter-spacing: 1px;
}
.badge-row span:nth-child(1) { background: #000; color: #0f0; border-color: #0f0; }
.badge-row span:nth-child(2) { background: #800080; color: #ff0; border-color: #f0f; }
.badge-row span:nth-child(4) { background: #000; color: #0ff; border-color: #0ff; }
.badge-row span:nth-child(5) { background: #f00; color: #ff0; border-color: #f00; }
.badge-row span:nth-child(6) { background: #0f0; color: #000; border-color: #0f0; }
.badge-row span:nth-child(10) { background: #00a; color: #fff; border-color: #00f; }

/* ===== FOOTER ===== */
.footer {
  background: #000;
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
  font-size: 10px;
  color: #555;
  margin-bottom: 10px;
}
.footer marquee {
  color: #444;
  font-size: 10px;
  display: block;
  margin-bottom: 8px;
}

/* Classic link row — same era, just easier to see */
.footer-links {
  display: block;
  margin: 6px 0 10px;
  padding: 6px 4px;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  line-height: 1.8;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.footer-links a {
  color: #0f0;
  text-decoration: underline;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.55);
  white-space: nowrap;
}
.footer-links a:hover {
  color: #ff0;
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.7);
}
.footer-links a:visited {
  color: #0c0;
}
.footer-links .fsep {
  color: #666;
  margin: 0 4px;
  font-weight: normal;
  user-select: none;
}
/* Guestbook gets a tiny period “hot” hint without looking like an ad */
.footer-links a#footerGuestbook {
  color: #ff69b4;
  text-shadow: 0 0 6px rgba(255, 105, 180, 0.6);
}
.footer-links a#footerGuestbook:hover {
  color: #ff9;
}

/* ===== POPUP ===== */
.popup-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.popup-overlay.show { display: flex; }
.popup-box {
  background: #000;
  border: 3px ridge #c0c0c0;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 0 50px rgba(0,255,0,0.3);
}
.popup-title {
  background: #000080;
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.popup-title button {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 0 5px;
  font-weight: bold;
  cursor: pointer;
}
.popup-body {
  padding: 16px;
  color: #0f0;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  max-height: 70vh;
  overflow-y: auto;
}
.popup-body .big { font-size: 36px; display: block; margin-bottom: 8px; }
.popup-body button {
  margin-top: 12px;
  padding: 6px 24px;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}
.popup-body button:hover { background: #fff; }

/* ===== AIM CHAT WINDOW ===== */
.aim-window {
  position: fixed;
  bottom: 8px; right: 8px;
  z-index: 9998;
  width: 230px;
  font-family: var(--font-mono);
  box-shadow: 0 0 20px rgba(0,255,0,0.2);
  user-select: none;
}
.aim-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: linear-gradient(90deg, #000080, #4040c0);
  cursor: move;
  border: 1px solid #666;
  border-bottom: none;
}
.aim-avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #333;
  flex-shrink: 0;
  transition: filter 0.5s;
}
.aim-avatar.offline { filter: grayscale(1); }
.aim-top-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aim-top-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aim-name {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  margin-right: auto;
}
.aim-name.offline { color: #888; text-shadow: none; }
.aim-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0f0;
  animation: blink 1s step-end infinite;
  flex-shrink: 0;
}
.aim-dot.offline { background: #666; animation: none; }
.aim-online-txt {
  font-size: 7px;
  color: #0f0;
  letter-spacing: 1px;
}
.aim-online-txt.offline { color: #888; }
.aim-status {
  font-size: 8px;
  color: #aaa;
  font-style: italic;
  margin-top: -1px;
  line-height: 1.3;
}
.aim-body {
  padding: 5px;
  background: #000;
  border: 1px solid #666;
  border-top: none;
}
.aim-chat { display: flex; flex-direction: column; min-width: 0; }
.aim-msgs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 3px;
}
.aim-msgs .me {
  align-self: flex-start;
  background: #11122a;
  color: #0ff;
  padding: 3px 6px;
  border-radius: 5px;
  max-width: 90%;
  word-wrap: break-word;
  line-height: 1.4;
}
.aim-msgs .you {
  align-self: flex-end;
  background: #2a1114;
  color: #ff69b4;
  padding: 3px 6px;
  border-radius: 5px;
  max-width: 90%;
  word-wrap: break-word;
  line-height: 1.4;
}
.aim-typing {
  font-size: 8px;
  color: #888;
  font-style: italic;
  min-height: 11px;
}
.aim-input-wrap {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.aim-input-wrap input {
  flex: 1;
  padding: 2px 4px;
  background: #000;
  border: 1px solid #333;
  color: #0f0;
  font-family: var(--font-mono);
  font-size: 9px;
  outline: none;
}
.aim-input-wrap input:focus { border-color: #0f0; }
.aim-input-wrap button {
  padding: 2px 6px;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-size: 8px;
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font-mono);
}
.aim-input-wrap button:active { border-style: inset; }

/* ===== STAR RATING ===== */
.stars { display: inline-block; margin-left: 8px; vertical-align: middle; }
.stars span { cursor: pointer; font-size: 18px; color: #444; transition: color 0.2s; }
.stars span.on { color: #ffd700; text-shadow: 0 0 10px #ffd700; }
.stars span:hover { color: #ffd700; }
.stars .label { font-size: 10px; color: #666; margin-right: 4px; }

/* ===== GUESTBOOK FORM ===== */
.gb-entry { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 6px 8px; margin-bottom: 6px; text-align: left; font-size: 11px; }
.gb-entry .head { color: #ff69b4; font-size: 10px; }
.gb-entry .body { color: #aaa; margin-top: 2px; }
.gb-form { margin-top: 10px; }
.gb-form input { width: 100%; padding: 6px; background: #000; border: 1px solid #0f0; color: #0f0; font-family: var(--font-mono); font-size: 12px; }
.gb-form button { margin-top: 6px; padding: 4px 16px; background: #c0c0c0; border: 2px outset #fff; font-size: 11px; font-weight: bold; cursor: pointer; }
.gb-form button:hover { background: #fff; }
.gb-empty { color: #555; font-size: 11px; padding: 10px 0; }
::-webkit-scrollbar { width: 8px; background: #000; }
::-webkit-scrollbar-track { background: #000; border: 1px solid #111; }
::-webkit-scrollbar-thumb { background: #0f0; }

/* ===== MUSIC PLAYER & CRINGE ROW ===== */
.player-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px ridge #ff69b4;
  box-shadow: 0 0 15px rgba(255,0,255,0.2);
  color: #fff;
  font-family: var(--font-mono);
  user-select: none;
  background: #0a0a0a;
}
.player-cover {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #ff69b4;
  flex-shrink: 0;
}
.player-panel.paused { border-color: #666; }
.player-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.player-song {
  font-size: 13px;
  font-weight: bold;
  color: #ff69b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(255,105,180,0.5);
}
.player-artist {
  font-size: 10px;
  color: #ccc;
  margin-top: 1px;
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.player-btn {
  width: 24px; height: 24px;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-family: var(--font-mono);
}
.player-btn:active { border-style: inset; }
.player-btn:disabled {
  opacity: 0.35;
  border-style: solid;
  cursor: default;
}
.player-btn.play-btn {
  width: 28px; height: 28px;
  background: linear-gradient(180deg, #ff69b4, #cc0066);
  border-color: #ff69b4;
  color: #fff;
  font-size: 13px;
  border-radius: 50%;
  border-style: solid;
  box-shadow: 0 0 6px rgba(255,105,180,0.4);
}
.player-btn.play-btn:active { border-style: solid; transform: scale(0.95); }
.player-btn.play-btn.paused-btn { background: linear-gradient(180deg, #888, #444); border-color: #888; }
.player-vol-wrap { margin-left: auto; display: flex; align-items: center; }
.player-vol-wrap input[type="range"] {
  width: 55px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.player-vol-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff69b4;
  border: 1px solid #fff;
  cursor: pointer;
}
.player-vol-wrap input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff69b4;
  border: 1px solid #fff;
  cursor: pointer;
}

/* ===== CRINGE BLOCK (right of player) ===== */
.cringe-block {
  position: relative;
  overflow: hidden;
  border: 2px ridge #ffd700;
  background: #0a0a00;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
  font-family: var(--font-mono);
  color: #ffd700;
}
.cringe-block canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.cringe-block .cringe-content {
  position: relative;
  z-index: 1;
}
.cringe-block .badge {
  font-size: 8px;
  color: #888;
  letter-spacing: 1px;
}
.cringe-block .title {
  font-size: 11px;
  font-weight: bold;
  color: #ff0;
}
.cringe-block .sub {
  font-size: 8px;
  color: #aa0;
}
.cringe-block .marquee-text {
  font-size: 9px;
  color: #0f0;
  white-space: nowrap;
  width: 100%;
}

/* ===== DUAL ROW: UNDER CONSTRUCTION + BLOG ===== */
.dual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 600px) { .dual-row { grid-template-columns: 1fr; } }

.blog-block {
  background: linear-gradient(135deg, #1a0033, #0a0033);
  border: 2px ridge #ff00ff;
  padding: 8px 10px;
  text-align: center;
  color: #ff99cc;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.blog-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,0,255,0.03) 20px, rgba(255,0,255,0.03) 21px);
  pointer-events: none;
}
.blog-block > * { position: relative; z-index: 1; }
.blog-header {
  font-size: 13px;
  font-weight: bold;
  color: #ff0;
  text-shadow: 0 0 15px #f0f;
  letter-spacing: 3px;
}
.blog-sub {
  font-size: 8px;
  color: #aaa;
  letter-spacing: 2px;
}
.blog-divider {
  font-size: 10px;
  color: #f0f;
  opacity: 0.5;
}
.blog-post {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255,0,255,0.06);
  border: 1px dashed #f0f;
  padding: 4px 10px;
  width: 100%;
}
.blog-post-title {
  font-size: 9px;
  color: #0ff;
  font-weight: bold;
}
.blog-post-date {
  font-size: 8px;
  color: #888;
}
.blog-marquee {
  width: 100%;
  font-size: 9px;
  color: #ff69b4;
}
.blog-link {
  display: inline-block;
  padding: 6px 20px;
  background: linear-gradient(180deg, #ff00ff, #660099);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  border: 2px ridge #f0f;
  letter-spacing: 2px;
  animation: glowPulse 2s ease-in-out infinite;
  transition: all 0.2s;
}
.blog-link:hover {
  background: #fff;
  color: #ff00ff;
  border-color: #fff;
  transform: scale(1.08);
}
.blog-footer {
  font-size: 7px;
  color: #666;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .hero-area { height: 220px; }
  .hero-area .hero-img { height: 170px !important; }
  .hero-area .hero-img:nth-child(4),
  .hero-area .hero-img:nth-child(5),
  .hero-area .hero-img:nth-child(6) { display: none; }
  .header h1 { font-size: 20px; letter-spacing: 2px; }
  .deco-layer img { display: none; }
}

/* ===== BAKA EASTER EGG ===== */
.baka-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.92);
  overflow: hidden;
}
.baka-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: min(14vw, 14vh, 110px);
  color: #f44;
  font-weight: bold;
  font-family: var(--font-mono);
  text-align: center;
  white-space: pre;
  line-height: 1.4;
  text-shadow: 0 0 30px #f00, 0 0 60px #f00, 0 0 90px #f00;
  animation: bakaUp 10s linear forwards;
}
@keyframes bakaUp {
  0% { transform: translateY(calc(-100% + 100vh)); }
  100% { transform: translateY(0); }
}

/* ===== FOCUS (neon, intentional) ===== */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.player-btn:focus-visible,
.stars span[data-v]:focus-visible,
.badge-row .motion-toggle:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ===== CURSOR PARTICLE CANVAS ===== */
#particleFx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99990;
}

/* ===== MOTION TOGGLE BADGE ===== */
.badge-row .motion-toggle {
  cursor: pointer;
  background: #111;
  color: #0ff;
  border-color: #0ff;
  user-select: none;
}
.badge-row .motion-toggle[aria-pressed="true"] {
  background: #033;
  color: #ff0;
  border-color: #ff0;
}

/* ===== GUESTBOOK AREA ===== */
#guestbookArea {
  display: none;
  text-align: left;
}
#guestbookArea.show { display: block; }
.gb-form input + input { margin-top: 4px; }

/* ===== REDUCED MOTION ===== */
html.reduce-motion .blink,
body.reduce-motion .blink,
html.reduce-motion .pulse,
body.reduce-motion .pulse,
html.reduce-motion .s-grid a.pulse,
html.reduce-motion .blog-link,
html.reduce-motion .aim-dot,
html.reduce-motion .deco-layer img,
html.reduce-motion .hero-area .hero-img,
html.reduce-motion .tsun-box::before {
  animation: none !important;
}
html.reduce-motion .deco-layer img,
html.reduce-motion .hero-area .hero-img {
  filter: drop-shadow(0 0 12px rgba(255,0,255,0.25));
}
html.reduce-motion blink {
  animation: none !important;
  opacity: 1 !important;
}
html.reduce-motion #particleFx,
html.reduce-motion #matrix {
  display: none !important;
}
html.reduce-motion marquee {
  /* marquees keep scrolling in some browsers; JS may pause matrix/particles only */
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) .blink,
  html:not(.motion-force) .pulse,
  html:not(.motion-force) .s-grid a.pulse,
  html:not(.motion-force) .blog-link,
  html:not(.motion-force) .aim-dot,
  html:not(.motion-force) .deco-layer img,
  html:not(.motion-force) .hero-area .hero-img,
  html:not(.motion-force) .tsun-box::before {
    animation: none !important;
  }
  html:not(.motion-force) #particleFx,
  html:not(.motion-force) #matrix {
    display: none !important;
  }
}

/* ===== GIMMICKS: last updated / ascii / dual ticker ===== */
.last-updated {
  font-size: 10px;
  color: #0f0;
  border: 1px dashed #333;
  background: #050505;
  padding: 4px 8px;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 1px;
}
.last-updated .lu-sep { color: #444; margin: 0 6px; }
.ascii-div {
  text-align: center;
  color: #f0f;
  font-size: 11px;
  letter-spacing: 2px;
  margin: 6px 0;
  opacity: 0.75;
  user-select: none;
}
.dual-ticker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
.dual-ticker marquee {
  font-size: 11px;
  padding: 3px 4px;
  border: 1px solid #333;
}
.tick-sweet { color: #ff69b4; background: #1a0010; border-color: #ff69b4 !important; }
.tick-mean { color: #f44; background: #1a0000; border-color: #f44 !important; }
@media (max-width: 500px) {
  .dual-ticker { grid-template-columns: 1fr; }
}

/* NEW stickers */
.new-sticker {
  display: inline-block;
  font-size: 9px;
  color: #ff0;
  background: #f00;
  border: 1px solid #ff0;
  padding: 0 4px;
  letter-spacing: 1px;
  vertical-align: middle;
  margin-left: 4px;
}
.new-mini {
  font-size: 8px;
  color: #ff0;
  background: #900;
  padding: 0 3px;
  margin-left: 4px;
  border: 1px solid #ff0;
}

/* Caution tape / cone */
.cringe-block { position: relative; }
.caution-tape {
  position: absolute;
  left: -10%;
  top: 8px;
  width: 120%;
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    #ff0,
    #ff0 10px,
    #000 10px,
    #000 20px
  );
  opacity: 0.85;
  z-index: 2;
  transform: rotate(-2deg);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.4);
}
.caution-tape-b {
  top: auto;
  bottom: 8px;
  transform: rotate(1.5deg);
}
.cone-teleport {
  position: absolute;
  z-index: 3;
  font-size: 22px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #ff0);
  transition: left 0.4s steps(2), top 0.4s steps(2);
}

/* Fake load bars */
.fake-load-row {
  margin: -4px 0 8px;
  border: 1px solid #333;
  background: #050505;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fake-load {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  gap: 6px;
  align-items: center;
  font-size: 9px;
  color: #888;
}
.fl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aaa; }
.fl-track {
  height: 8px;
  background: #111;
  border: 1px solid #333;
  overflow: hidden;
}
.fl-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f0, #8f8);
  animation: loadWobble 3s ease-in-out infinite;
}
.fl-bar-cyan { background: linear-gradient(90deg, #0ff, #08f); }
.fl-bar-pink { background: linear-gradient(90deg, #ff69b4, #f0f); }
.fl-pct { text-align: right; color: #0f0; font-variant-numeric: tabular-nums; }
@keyframes loadWobble {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* Webring (inside [ WEBRING ] popup window) */
.webring-block {
  border: 2px ridge #0ff;
  background: #000;
  padding: 10px;
  text-align: center;
  color: #0ff;
  font-size: 11px;
}
.webring-in-popup {
  margin: 0;
  border-width: 1px;
}
.webring-title {
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 0 8px #0ff;
  font-size: 12px;
}
.webring-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.webring-btn {
  padding: 4px 10px;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  color: #000;
}
.webring-btn:active { border-style: inset; }
.webring-list {
  list-style: none;
  text-align: left;
  margin: 0 auto 8px;
  padding: 0;
}
.webring-list li {
  padding: 3px 0;
  border-bottom: 1px dotted #222;
  font-size: 10px;
}
.webring-list a { color: #0f0; }
.webring-list a.broken { color: #888; text-decoration: line-through; }
.wr-tag {
  font-size: 8px;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid;
}
.wr-tag.out { color: #f44; border-color: #f44; }
.wr-tag.here { color: #ff0; border-color: #ff0; }
.webring-foot { font-size: 9px; color: #555; }
.webring-hint { font-size: 9px; color: #888; margin-top: 6px; }
.popup-body .webring-block .big { display: none; }
/* Hide the default big warning icon when webring content is showing */
.popup-body:has(.webring-in-popup) > .big { display: none; }

/* 88x31 fake ads */
.ad-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.ad-88 {
  width: 88px;
  height: 31px;
  padding: 0;
  font-size: 8px;
  font-weight: bold;
  font-family: var(--font-mono);
  line-height: 1.1;
  cursor: pointer;
  border: 2px outset #ccc;
  background: linear-gradient(180deg, #fff, #c0c0c0);
  color: #000;
  text-shadow: 0 0 1px #fff;
}
.ad-88:active { border-style: inset; }
.ad-rp { background: linear-gradient(180deg, #9cf, #06c); color: #fff; border-color: #06c; }
.ad-af { background: linear-gradient(180deg, #fc6, #c60); color: #000; border-color: #c60; }
.ad-ns { background: linear-gradient(180deg, #6f6, #060); color: #fff; border-color: #0f0; }
.ad-ie { background: linear-gradient(180deg, #69f, #036); color: #fff; border-color: #36f; }

/* Awards shelf */
.awards-shelf {
  border: 2px ridge #ffd700;
  background: linear-gradient(180deg, #1a1500, #000);
  padding: 8px;
  margin-bottom: 8px;
  text-align: center;
}
.awards-title {
  font-size: 11px;
  color: #ffd700;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.awards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.award {
  padding: 6px 10px;
  font-size: 9px;
  font-weight: bold;
  border: 2px ridge #ccc;
  background: #222;
  color: #fff;
  letter-spacing: 1px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.award-pink { border-color: #ff69b4; color: #ff69b4; }
.award-gold { border-color: #ffd700; color: #ffd700; }
.award-cyan { border-color: #0ff; color: #0ff; }
.award-red { border-color: #f44; color: #f44; }

/* Hit counter */
.hit-counter {
  display: inline-flex;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  font-family: inherit;
}
.hit-counter .n {
  display: inline-block;
  background: #0a0a0a;
  padding: 1px 5px;
  border: 1px inset #333;
  font-size: 14px;
  letter-spacing: 0;
  margin: 0;
  color: #0f0;
  min-width: 1.1em;
  text-align: center;
}
.hit-note { color: #555; font-size: 9px; margin-left: 2px; }
.hit-counter.hacking .n { color: #f00; animation: blink 0.2s step-end infinite; }

/* Trail toggle badge */
.badge-row .trail-toggle {
  cursor: pointer;
  background: #102010;
  color: #0f0;
  border-color: #0f0;
  user-select: none;
}

/* Sticky note */
.sticky-note {
  position: fixed;
  left: 12px;
  bottom: 40px;
  width: 140px;
  z-index: 9997;
  background: #ffef6a;
  color: #222;
  border: 1px solid #cc0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  font-family: 'Comic Sans MS', cursive, sans-serif;
  user-select: none;
  transform: rotate(-3deg);
}
.sticky-top {
  background: #e6d84a;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: bold;
  cursor: move;
  border-bottom: 1px dashed #aa0;
  font-family: var(--font-mono);
}
.sticky-body {
  padding: 10px 8px;
  text-align: center;
}
.sticky-msg {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #c00;
}
.sticky-btn {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  cursor: pointer;
  border: 2px outset #fff;
  background: #c0c0c0;
}
.sticky-btn:active { border-style: inset; }
@media (max-width: 600px) {
  .sticky-note { display: none; }
}

/* Bottom status bar (frame illusion) */
.status-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  box-shadow: inset 0 1px 0 #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #000;
  gap: 8px;
}
.sb-left { font-weight: bold; }
.sb-mid { flex: 1; text-align: center; color: #000080; }
.sb-right {
  background: #fff;
  border: 1px inset #888;
  padding: 0 8px;
  min-width: 48px;
  text-align: center;
}
body { padding-bottom: 28px; }
.aim-window { bottom: 30px; }

/* Guestbook moods */
.gb-moods {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  font-size: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.gb-moods label {
  cursor: pointer;
  border: 1px solid #333;
  padding: 2px 6px;
  background: #111;
}
.gb-moods input { margin-right: 3px; }
.gb-moods input:checked + span,
.gb-moods label:has(input:checked) {
  border-color: #0f0;
  box-shadow: 0 0 6px #0f0;
}
.gb-entry .mood-tag { margin-right: 4px; }

/* Konami premium */
.konami-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  text-align: center;
}
.konami-overlay.show { display: flex; }
.konami-text {
  font-size: clamp(22px, 6vw, 48px);
  font-weight: bold;
  color: #ff0;
  text-shadow: 0 0 20px #f0f, 4px 4px 0 #0ff;
  letter-spacing: 3px;
  line-height: 1.2;
  animation: blink 0.5s step-end infinite;
}
.konami-sub { margin-top: 12px; color: #fff; font-size: 12px; }
html.premium-tsundere {
  filter: invert(1) hue-rotate(180deg);
}
html.premium-tsundere img,
html.premium-tsundere video,
html.premium-tsundere .sticky-note,
html.premium-tsundere .aim-avatar,
html.premium-tsundere .player-cover {
  filter: invert(1) hue-rotate(180deg);
}
html.premium-tsundere .konami-overlay {
  filter: invert(1) hue-rotate(180deg);
}

/* Snow canvas */
#snowFx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* Reduced motion extras */
html.reduce-motion .caution-tape,
html.reduce-motion .cone-teleport,
html.reduce-motion .new-sticker,
html.reduce-motion .fl-bar,
html.reduce-motion #snowFx {
  animation: none !important;
}
html.reduce-motion #snowFx { display: none !important; }
html.reduce-motion .fl-bar { filter: none !important; }