/* ============================================================================
   Jukebox easter eggs — styling for static/boxes/eggs.js.
   Loaded site-wide (base.html) and inside the Syncstation room (live_room.html).
   ALL egg-only styling lives here; style.css / syncstation.css are untouched.

   House style: square corners, the dark Syncstation palette (periwinkle, yellow,
   green, red, near-black panels) and VT323 for LCD text. Colours are kept literal
   so this file does not depend on whether --blue (site) or --ss-blue (room) was
   defined upstream. Nothing here renders unless eggs.js inserts the element/class,
   so the page is unchanged with eggs.js absent. prefers-reduced-motion is honoured
   at the bottom (boot / frenzy / degauss / goblin curtailed).
   ========================================================================== */

:root {
  --egg-blue: #6a9cff;
  --egg-steel: #9fb4d8;
  --egg-yellow: #e6c64a;
  --egg-green: #5dff9a;
  --egg-red: #ff5a6a;
  --egg-border: #050608;
  --egg-text: #cdd2dc;
  --egg-ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --egg-lcd: "VT323", ui-monospace, "Courier New", monospace;
}

/* ---- egg 8: achievement toasts (own container, not the room's #ss-toasts) - */
#egg-toasts {
  position: fixed; top: 12px; right: 12px; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: 320px; pointer-events: none;
}
.egg-toast {
  pointer-events: auto; max-width: 300px; padding: 8px 12px; cursor: pointer;
  background: linear-gradient(180deg, #2c2f37, #16181d);
  border: 1px solid var(--egg-border);
  border-left: 3px solid var(--egg-yellow);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .06), inset -1px -1px 0 rgba(0, 0, 0, .6),
              0 0 0 1px rgba(230, 198, 74, .18), 0 2px 0 rgba(0, 0, 0, .5);
  color: var(--egg-text);
  opacity: 0; transform: translateX(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.egg-toast--in { opacity: 1; transform: translateX(0); }
.egg-toast--out { opacity: 0; transform: translateX(14px); }
.egg-toast-title {
  font: 10px/1.4 var(--egg-ui); text-transform: uppercase; letter-spacing: .12em;
  color: var(--egg-yellow);
}
.egg-toast-label { font: 16px/1.2 var(--egg-lcd); color: #eef1f6; letter-spacing: .04em; }

/* ---- egg 9: type "bbc" in chat → "obsessed" popup (room) ----------------- */
.egg-obsessed {
  position: fixed; left: 50%; top: 42%; z-index: 2147483600; pointer-events: none;
  transform: translate(-50%, -50%) scale(.7) rotate(-3deg);
  padding: 20px 44px; white-space: nowrap;
  font: 800 64px/1 var(--egg-ui); letter-spacing: .03em;
  color: var(--egg-yellow);
  text-shadow: 0 0 20px rgba(230, 198, 74, .65), 0 2px 0 var(--egg-border);
  background: linear-gradient(180deg, rgba(22, 24, 30, .94), rgba(12, 13, 17, .96));
  border: 1px solid var(--egg-border);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .08), inset -1px -1px 0 rgba(0, 0, 0, .6),
              0 0 44px rgba(106, 156, 255, .35), 0 6px 0 rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.egg-obsessed--in { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.egg-obsessed--out { opacity: 0; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }

/* ---- egg 1: minimise → taskbar button (room) ---------------------------- */
/* Make the decorative caption spans, once promoted to <button>, behave. */
button.ss-cap {
  -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer;
}
button.ss-cap:focus-visible { outline: 1px solid var(--egg-blue); outline-offset: 1px; }
.ss-cap--restore { font: 11px Tahoma; }

/* Minimised window: slide off-screen but stay rendered (NOT display:none) so the
   WebSocket and the off-screen YouTube audio element are never torn down. The
   transition is declared on the base class so restore animates too. */
.ss-window { transition: transform .28s ease, opacity .28s ease; }
.ss-window.egg-min {
  transform: translateY(110%) scale(.7);
  opacity: 0; pointer-events: none;
}
.egg-taskbtn {
  position: fixed; left: 8px; bottom: 8px; z-index: 2147479000;
  height: 28px; max-width: 60vw; padding: 0 12px;
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, #34373f, #1c1e23);
  border: 1px solid var(--egg-border);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(0, 0, 0, .6),
              0 2px 0 rgba(0, 0, 0, .5);
  color: #dde2ea; font: 12px/1 var(--egg-ui); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.egg-taskbtn:hover { filter: brightness(1.12); }

/* ---- egg 2: BSOD (site) / NO DISC (room) -------------------------------- */
.egg-crash { position: fixed; inset: 0; }
.egg-crash--bsod {
  z-index: 2147481000;
  background: #0b3aa6; color: #eef3ff;
  font: 18px/1.6 var(--egg-lcd);
  padding: 8vh 8vw; overflow: auto;
}
.egg-bsod { max-width: 920px; }
.egg-bsod-face { font-size: 64px; margin: 0 0 18px; }
.egg-bsod p { margin: 0 0 14px; }
.egg-bsod-tech { color: #bcd0ff; font-size: 16px; }
.egg-crash-hint { margin-top: 22px; color: #cfe0ff; }

.egg-crash--nodisc {
  z-index: 2147481000;
  background: radial-gradient(120% 100% at 50% 40%, #0c0d13 0%, #050507 70%);
  color: #cdd2dc;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.egg-nodisc-icon { font-size: 84px; line-height: 1; color: var(--egg-red); text-shadow: 0 0 18px rgba(255, 90, 106, .5); }
.egg-nodisc-title { font: 28px/1.2 var(--egg-lcd); letter-spacing: .14em; margin-top: 18px; color: #eef1f6; }
.egg-nodisc-sub { font: 16px/1.4 var(--egg-ui); color: #8a93a6; margin-top: 8px; }
.egg-crash--nodisc .egg-crash-hint { margin-top: 26px; font: 15px var(--egg-lcd); color: #6f7a8e; }

/* optional ambient nod (egg 2 bonus): the room's empty queue reads "no disc". */
.syncstation .ss-queue-empty::before { content: "\2298  "; color: #6f7a8e; }

/* ---- egg 3: system-tray clock ------------------------------------------- */
.egg-clock { font: 14px/1 var(--egg-lcd); letter-spacing: .08em; white-space: nowrap; }
header.brandbar .egg-clock { color: var(--egg-steel); margin-left: 4px; }
.ss-cmd-status .egg-clock { color: #6fa6b8; }
.egg-clock-sep { margin: 0 2px; }

/* ---- egg 4: retro right-click menu -------------------------------------- */
.egg-menu {
  position: fixed; z-index: 2147482000; min-width: 188px; padding: 3px;
  background: linear-gradient(180deg, #2b2e36, #16181d);
  border: 1px solid var(--egg-border);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 0 6px 16px rgba(0, 0, 0, .6);
}
.egg-menu-item {
  display: block; width: 100%; text-align: left; box-shadow: none;
  height: 28px; line-height: 26px; padding: 0 12px;
  background: none; border: 0; color: var(--egg-text);
  font: 13px/26px var(--egg-ui); letter-spacing: .02em; cursor: pointer;
}
.egg-menu-item:hover,
.egg-menu-item:focus-visible {
  background: linear-gradient(180deg, #3a5fa8, #2d4a86); color: #fff;
  filter: none; outline: none;
}

/* ---- egg 5: cube frenzy + CRT degauss ----------------------------------- */
.void-bg.egg-frenzy .cube3d,
.ss-void.egg-frenzy .cube3d {
  animation-duration: 3.2s;
  scale: 1.5;
  transition: scale .3s ease;
}
.void-bg.egg-frenzy .cube3d .cf,
.ss-void.egg-frenzy .cube3d .cf {
  background: rgba(150, 168, 255, .5);
  box-shadow: inset 0 0 18px rgba(150, 168, 255, .6);
}
@keyframes egg-degauss {
  0%   { transform: none; filter: none; }
  20%  { transform: translate(2px, -2px) skewX(1.2deg); filter: hue-rotate(20deg) contrast(1.2); }
  40%  { transform: translate(-3px, 1px) skewX(-1.4deg); filter: hue-rotate(-18deg) contrast(.9); }
  60%  { transform: translate(2px, 2px) skewX(.8deg); filter: hue-rotate(10deg); }
  80%  { transform: translate(-1px, -1px) skewX(-.5deg); filter: none; }
  100% { transform: none; filter: none; }
}
.egg-degauss { animation: egg-degauss .6s ease-in-out 1; }

/* ---- egg 6: PS2 boot (site only) ---------------------------------------- */
.egg-boot {
  position: fixed; inset: 0; z-index: 2147481000; overflow: hidden;
  background: #050507;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .45s ease;
}
.egg-boot--out { opacity: 0; }
.egg-boot-stage { position: relative; width: 220px; height: 160px; }
.egg-boot-cube {
  position: absolute; left: calc(50% - 13px); top: calc(50% - 13px);
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #9fb4d8, #3a4660);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 8px rgba(120, 150, 220, .5);
  animation: egg-boot-assemble 2.6s ease-in-out forwards;
}
.egg-boot-cube--1 { --bx: -94px; --by: -54px; }
.egg-boot-cube--2 { --bx: 96px;  --by: -40px; animation-duration: 2.8s; }
.egg-boot-cube--3 { --bx: -70px; --by: 58px;  animation-duration: 2.4s; }
.egg-boot-cube--4 { --bx: 82px;  --by: 60px;  animation-duration: 3s; }
.egg-boot-cube--5 { --bx: 0px;   --by: -84px; animation-duration: 2.2s; }
.egg-boot-word {
  margin-top: 28px; font: 34px/1 var(--egg-lcd); letter-spacing: .26em; color: #eef1f6;
  text-shadow: 0 0 12px rgba(106, 156, 255, .6);
  opacity: 0; animation: egg-boot-reveal 1s ease-out 1.6s forwards;
}
.egg-boot-hint {
  margin-top: 14px; font: 13px var(--egg-ui); color: #6f7a8e;
  opacity: 0; animation: egg-boot-reveal 1s ease 2.3s forwards;
}
@keyframes egg-boot-assemble {
  0%   { transform: translate(var(--bx), var(--by)) scale(.4) rotate(40deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0); opacity: .95; }
}
@keyframes egg-boot-reveal { to { opacity: 1; } }

/* ---- egg 7: goblin ------------------------------------------------------- */
.egg-goblin {
  position: fixed; left: -120px; bottom: 8vh; z-index: 2147480000;
  font-size: 92px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
  animation: egg-goblin-in .5s ease-out forwards, egg-goblin-wiggle 1.6s ease-in-out .5s 1;
}
.egg-goblin--out { animation: egg-goblin-out .5s ease-in forwards; }
@keyframes egg-goblin-in {
  from { transform: translateX(-160px) rotate(-12deg); }
  to   { transform: translateX(40px) rotate(0); }
}
@keyframes egg-goblin-wiggle {
  0%, 100% { transform: translateX(40px) rotate(0); }
  25%      { transform: translateX(48px) rotate(8deg); }
  75%      { transform: translateX(32px) rotate(-8deg); }
}
@keyframes egg-goblin-out {
  from { transform: translateX(40px); opacity: 1; }
  to   { transform: translateX(-160px); opacity: 0; }
}

/* ---- reduced motion: curtail boot / frenzy / degauss / goblin ----------- */
@media (prefers-reduced-motion: reduce) {
  .egg-toast { transition: none; }
  .ss-window, .ss-window.egg-min { transition: none; }
  .void-bg.egg-frenzy .cube3d, .ss-void.egg-frenzy .cube3d { transition: none; }
  .egg-degauss { animation: none; }
  .egg-boot, .egg-boot-cube, .egg-boot-word, .egg-boot-hint { animation: none; }
  /* keep the goblin visible (on-screen, no slide) instead of stranded off-screen */
  .egg-goblin, .egg-goblin--out { left: 24px; animation: none; }
}