/* Retro Web 1.0 + Hyperpop Techno-Goth vibes */
:root {
  --blue: #00a2ff;
  --bg: #000014;
  --me: #b0e2ff;
  --other: #ffffff;
  --text: #e8f6ff;
  --neon: #39ff14;
  --accent: #ff00e6;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Verdana', Tahoma, Geneva, Arial, sans-serif; background: radial-gradient(ellipse at center, #001 0%, #000014 60%, #000 100%); color: var(--text); cursor: crosshair; }
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; opacity: 0.08;
  background-image: repeating-linear-gradient(0deg, rgba(0,255,0,0.2) 0, rgba(0,255,0,0.2) 1px, transparent 2px, transparent 4px), radial-gradient(circle at 10% 20%, rgba(0,255,255,0.2), transparent 20%), radial-gradient(circle at 90% 80%, rgba(255,0,255,0.2), transparent 25%);
  animation: scan 7s linear infinite;
}
@keyframes scan { 0%{ transform: translateY(-10px)} 100%{ transform: translateY(10px)} }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 10px; background: linear-gradient(90deg, #0a0020, #001233, #0a0020); color: #fff; border-bottom: 3px double #0ff; text-shadow: 0 0 6px #0ff; position: sticky; top: 0; z-index: 5; }
.topbar marquee { grid-column: 1/4; font-size: 12px; color: #0ff; }
.topbar .brand { font-weight: 700; letter-spacing: 2px; color: var(--neon); text-shadow: 0 0 8px var(--neon); display: flex; gap: 8px; align-items: center; }
.badge { background: #ff0; color: #000; padding: 2px 6px; border: 2px outset #ffa; font-size: 12px; }
.blink { animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ticker { color: #0f8; text-shadow: 0 0 6px #0f8; }

.panel { max-width: 820px; margin: 24px auto; background: rgba(0,0,0,0.5); border: 2px groove #0ff; border-radius: 6px; padding: 16px; box-shadow: 0 0 20px rgba(0,255,255,0.2), inset 0 0 30px rgba(255,0,255,0.1); }
.hidden { display: none; }
.error { color: #ff6b6b; margin-top: 8px; }
.hint-text { opacity: 0.8; font-size: 12px; }
.decals { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.decal { width: 80px; height: 36px; border: 2px outset #ff0; background: conic-gradient(from 45deg, #ff0, #f0f, #0ff, #ff0); filter: saturate(120%); box-shadow: 0 0 12px rgba(255,255,0,0.5); transform: skewX(-12deg); }
.counter { margin-top: 8px; font-family: 'Courier New', monospace; background: #000; display: inline-block; padding: 4px 8px; border: 2px inset #0f0; color: #0f0; }

#login-form { display: flex; gap: 8px; }
#login-form input { flex: 1; padding: 10px; border: 2px inset #0ff; border-radius: 2px; background: #001a33; color: #aaf; }
#login-form button, #enter, #restart, #next-round, .hint-btn, #hiscore-submit { padding: 10px 14px; background: linear-gradient(180deg, #1b003d, #000); color: #0ff; border: 2px outset #0ff; border-radius: 2px; cursor: pointer; text-shadow: 0 0 5px #0ff; }

.chat-window { background: linear-gradient(180deg, rgba(0,10,30,0.8), rgba(0,0,0,0.8)); border: 2px ridge #39f; border-radius: 4px; padding: 16px; min-height: 260px; position: relative; }
.bubble { max-width: 78%; margin: 10px 0; padding: 10px 12px; border-radius: 10px; line-height: 1.35; position: relative; border: 1px solid #0ff; background: rgba(0,20,40,0.6); box-shadow: 0 0 8px rgba(0,255,255,0.2); }
.bubble .content { white-space: pre-wrap; word-wrap: break-word; }
.bubble.me { margin-left: auto; background: rgba(0,30,60,0.7); }
.bubble.other { margin-right: auto; background: rgba(0,10,30,0.6); }
.bubble.main { border: 2px solid var(--accent); box-shadow: 0 0 12px rgba(255,0,230,0.6); }

.hint { position: relative; }
.blur-overlay { position: absolute; inset: 0; filter: blur(0px); display: flex; align-items: center; justify-content: center; color: #9cf; font-size: 14px; background: rgba(10,10,30,0.65); border-radius: 10px; border: 1px dashed #0ff; text-shadow: 0 0 6px #0ff; }
.blur-overlay.hidden { display: none; }
.hint-photo { max-width: 100%; margin-top: 8px; border: 1px solid #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.4); }

.reacts { margin-top: 12px; font-size: 14px; }
.reactors { margin-left: 8px; color: #9cf; }
.mini-note { margin-left: 10px; color: #f0f; }

.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.options button { padding: 10px; border-radius: 2px; border: 2px outset #0ff; background: rgba(0,0,0,0.6); color: #0ff; cursor: pointer; text-shadow: 0 0 4px #0ff; }
.options button.correct { border-color: #2e7d32; background: rgba(20, 80, 20, 0.7); box-shadow: 0 0 10px rgba(0,255,0,0.5); }
.options button.wrong { border-color: #b00020; background: rgba(80, 10, 20, 0.7); box-shadow: 0 0 10px rgba(255,0,80,0.5); }
.options button:disabled { opacity: 0.6; cursor: not-allowed; }

.hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hints .hint-btn { padding: 8px 10px; border: 2px outset #0ff; border-radius: 2px; background: rgba(0,0,0,0.6); color: #0ff; cursor: pointer; }

.result { margin-top: 12px; padding: 10px; border-radius: 4px; background: rgba(10,10,30,0.7); border: 2px inset #39f; box-shadow: 0 0 8px rgba(0,0,255,0.3); }

.controls { margin-top: 12px; }
.controls button { padding: 10px 14px; border: 2px outset #0ff; border-radius: 2px; background: linear-gradient(180deg, #1b003d, #000); color: #0ff; cursor: pointer; }

#sfx-stage { position: fixed; inset: 0; pointer-events: none; }
.sfx-pop { position: absolute; max-width: 240px; animation: popfade 2s ease-out forwards; filter: drop-shadow(0 0 12px rgba(255,255,255,0.8)); }
@keyframes popfade { 0%{ opacity: 0; transform: scale(0.8) } 15%{ opacity: 1; transform: scale(1.05)} 70%{ opacity: 1; } 100%{ opacity: 0; transform: scale(0.9) } }