:root {
  --bg: #050905;
  --panel: rgba(12, 23, 14, .94);
  --panel2: rgba(18, 32, 20, .96);
  --line: #34563a;
  --text: #f0f6ea;
  --muted: #9cab9c;
  --lime: #b8ff54;
  --amber: #ffd15c;
  --red: #ff655e;
  --blue: #6ec5ff;
  --white: #fff;
  --shadow: 0 20px 70px rgba(0, 0, 0, .52);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(48, 91, 36, .28), transparent 28%),
    radial-gradient(circle at 100% 30%, rgba(25, 94, 48, .14), transparent 25%),
    linear-gradient(rgba(4, 8, 5, .96), rgba(3, 6, 4, .99)),
    repeating-linear-gradient(90deg, #101810 0 1px, transparent 1px 68px),
    var(--bg);
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", system-ui, sans-serif;
  letter-spacing: .015em;
  overflow-x: hidden;
}

button { font: inherit; }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.scanlines,
.noise,
.kippah-rain,
.meme-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.scanlines { z-index: 80; opacity: .17; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.noise { z-index: 79; opacity: .05; background-image: radial-gradient(circle at 20% 30%, white 0 1px, transparent 1px), radial-gradient(circle at 80% 70%, white 0 1px, transparent 1px); background-size: 9px 9px, 13px 13px; }
.kippah-rain { z-index: 2; overflow: hidden; }
.meme-rain { z-index: 95; overflow: hidden; }

.float-symbol {
  position: absolute;
  top: -12vh;
  color: var(--lime);
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(184,255,84,.4));
  animation: fall linear infinite;
}
.float-symbol.big { font-size: 34px; }
@keyframes fall { to { transform: translateY(125vh) rotate(420deg); } }

.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 25%, rgba(184,255,84,.18), transparent 28%),
    rgba(2, 5, 3, .94);
  backdrop-filter: blur(8px);
}
.enter-gate.visible { display: grid; }
.enter-gate.gone { display: none !important; }
.gate-card {
  width: min(720px, 100%);
  text-align: center;
  border: 1px solid var(--lime);
  background: linear-gradient(180deg, rgba(24,43,27,.98), rgba(4,9,5,.98));
  box-shadow: 0 0 0 5px rgba(184,255,84,.04), 0 30px 100px #000;
  padding: clamp(28px, 5vw, 58px);
  transform: skewY(-1deg);
}
.gate-stars { color: var(--amber); font-size: clamp(24px, 5vw, 44px); letter-spacing: .15em; }
.gate-small { margin-top: 16px; color: var(--lime); font-weight: 900; letter-spacing: .13em; }
.gate-card h1 { margin: 12px 0 8px; font-size: clamp(52px, 10vw, 118px); line-height: .85; text-transform: uppercase; text-shadow: 4px 4px #173719; }
.gate-card p { font-size: 18px; color: #c7d5c8; }
.gate-card small { display: block; color: #8d998f; margin-top: 16px; line-height: 1.55; }
.giant { font-size: clamp(20px, 4vw, 36px); padding: 16px 26px !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(184,255,84,.28);
  background: rgba(4, 8, 5, .92);
  backdrop-filter: blur(10px);
}
.brand-kicker, .eyebrow, .slot { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.brand h1 { margin: 2px 0 0; font-size: clamp(22px, 3vw, 42px); line-height: 1; }
.connection { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.ping { color: var(--amber); }

.ticker {
  position: sticky;
  top: 75px;
  z-index: 35;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,209,92,.22);
  background: #111809;
  color: var(--amber);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 7px 0;
}
.ticker div { display: inline-block; min-width: 180%; animation: ticker 18s linear infinite; }
@keyframes ticker { from { transform: translateX(-5%); } to { transform: translateX(48%); } }

.shell {
  position: relative;
  z-index: 5;
  width: min(1460px, calc(100% - 28px));
  margin: 24px auto 56px;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 20px;
  direction: ltr;
}
.shell > * { direction: rtl; }

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(27, 43, 29, .88), rgba(8, 14, 9, .97));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.03);
  position: relative;
}
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.02); }

.sidebar { padding: 18px; align-self: start; position: sticky; top: 116px; }
.profile-card { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.avatar { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #667368; background: linear-gradient(135deg, rgba(184,255,84,.2), transparent), #101510; color: var(--lime); text-align: center; position: relative; overflow: hidden; }
.avatar span { font-size: 46px; font-weight: 900; opacity: .82; }
.avatar small { position: absolute; inset: auto 4px 4px; color: var(--muted); font-size: 8px; line-height: 1.1; letter-spacing: .1em; }
.avatar-kippah { position: absolute; top: 12px; left: 50%; width: 44px; height: 20px; border-radius: 50% 50% 9px 9px; background: var(--blue); border: 2px solid rgba(255,255,255,.7); transform: translateX(-50%); box-shadow: 0 0 12px rgba(110,197,255,.4); }
.rank { color: var(--amber); font-size: 11px; letter-spacing: .08em; }
.profile-card h2 { margin: 4px 0; font-size: 22px; }
.muted { color: var(--muted); font-size: 12px; margin: 0; }

.menu { display: grid; margin: 18px -18px; }
.menu-item { text-align: right; border: 0; border-right: 3px solid transparent; background: transparent; color: #b2bbb4; padding: 13px 18px; cursor: pointer; letter-spacing: .04em; font-weight: 900; }
.menu-item:hover, .menu-item.active { border-right-color: var(--lime); color: #fff; background: linear-gradient(270deg, rgba(184,255,84,.14), transparent); }

.lobby-box { border-top: 1px solid var(--line); padding-top: 14px; }
.lobby-title { color: var(--muted); font-size: 11px; letter-spacing: .08em; margin-bottom: 8px; }
.player { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 1px dashed rgba(255,255,255,.07); }
.player em { color: var(--amber); font-style: normal; }
.player.offline { color: #747c76; }
.sidebar-chaos { display: flex; justify-content: space-around; font-size: 25px; margin-top: 18px; filter: saturate(1.4); }

.content { display: grid; gap: 20px; min-width: 0; }
.content > .panel { padding: clamp(18px, 3vw, 32px); }
.hero { overflow: hidden; }
.hero::before { content: "✡︎"; position: absolute; left: -30px; top: -75px; font-size: 360px; color: rgba(184,255,84,.035); line-height: 1; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 32px; align-items: center; margin-top: 12px; }
.hero h3, .section-head h3 { margin: 8px 0 14px; font-size: clamp(34px, 6vw, 74px); line-height: .88; letter-spacing: -.03em; text-transform: uppercase; }
.section-head h3 { font-size: clamp(25px, 3.3vw, 42px); }
.hero p { max-width: 760px; color: #c1ccc2; line-height: 1.7; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.primary-btn, .ghost-btn { border: 1px solid #667368; padding: 12px 16px; cursor: pointer; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.primary-btn { background: var(--lime); color: #10130f; border-color: var(--lime); }
.primary-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ghost-btn { background: rgba(255,255,255,.03); color: var(--text); }
.ghost-btn:hover { border-color: var(--lime); color: var(--lime); }

.stat-card { border: 1px solid #4c5b4f; background: rgba(0,0,0,.25); padding: 16px; transform: rotate(.5deg); }
.stat-card div { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.stat-card div:last-child { border-bottom: 0; }
.stat-card span { color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.stat-card strong { color: var(--lime); font-size: 22px; }

.roast-terminal { margin-top: 28px; border: 1px solid #37463a; background: #030604; padding: 16px; color: #d8ead5; font-family: "Courier New", monospace; line-height: 1.6; box-shadow: inset 0 0 26px rgba(184,255,84,.035); }
.prompt { color: var(--lime); font-weight: 900; margin-left: 8px; }
.cursor { color: var(--lime); animation: blink .65s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 22px; }
.badge { border: 1px solid #58655a; padding: 7px 10px; font-size: 11px; color: var(--amber); white-space: nowrap; }
.badge.danger { color: var(--red); border-color: rgba(255,101,94,.45); }

.loadout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.weapon-card { position: relative; min-height: 170px; padding: 18px; border: 1px solid #37493b; background: linear-gradient(145deg, rgba(184,255,84,.07), rgba(0,0,0,.22)); overflow: hidden; }
.weapon-card::after { content: "✡︎"; position: absolute; left: 8px; bottom: -24px; font-size: 90px; color: rgba(184,255,84,.05); }
.weapon-card h4 { margin: 9px 0; font-size: 22px; }
.weapon-card p { margin: 0; color: #aebbb0; line-height: 1.55; }

.bridge-panel { overflow: hidden; }
.bridge-scene { position: relative; min-height: 390px; border: 1px solid #355b3b; background: linear-gradient(#132a1a 0 55%, #0a1510 55% 100%); overflow: hidden; }
.bridge-scene::before { content: ""; position: absolute; inset: 0; opacity: .17; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.11) 34px 35px); }
.moon { position: absolute; top: 28px; left: 50px; font-size: 75px; color: var(--amber); filter: drop-shadow(0 0 16px rgba(255,209,92,.45)); }
.marco-pixel { position: absolute; top: 103px; left: 42%; width: 78px; height: 130px; background: #60735f; border: 6px solid #0d160e; display: grid; place-items: center; font-weight: 900; font-size: 40px; transform: rotate(8deg); box-shadow: 12px 14px 0 rgba(0,0,0,.28); }
.marco-pixel::before { content: ""; position: absolute; top: -20px; width: 54px; height: 22px; border-radius: 50% 50% 8px 8px; background: var(--blue); border: 4px solid #0d160e; }
.marco-pixel i { position: absolute; bottom: -34px; width: 95px; height: 35px; border-left: 16px solid #60735f; border-right: 16px solid #60735f; }
.bridge-plank { position: absolute; top: 238px; height: 28px; background: #75593a; border: 4px solid #241b10; box-shadow: inset 0 5px rgba(255,255,255,.08); }
.plank-one { left: 8%; width: 42%; transform: rotate(4deg); }
.plank-two { right: 7%; width: 41%; transform: rotate(-5deg); }
.water { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--blue); font-weight: 900; font-size: clamp(16px, 3vw, 30px); letter-spacing: .08em; }
.bridge-caption { position: absolute; top: 22px; right: 28px; max-width: 430px; font-size: clamp(22px, 4vw, 46px); font-weight: 900; color: var(--white); text-shadow: 3px 3px #000; transform: rotate(-2deg); }
.meme-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.meme-grid div { border: 1px solid #344a37; padding: 12px; text-align: center; background: rgba(255,255,255,.025); color: var(--amber); font-weight: 900; }

.killfeed { border: 1px solid #334739; background: #050806; }
.feed-row { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1.5fr); gap: 8px; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.feed-row:last-child { border-bottom: 0; }
.feed-row b { text-align: center; color: var(--amber); }
.friend { color: var(--lime); font-weight: 900; }
.enemy { color: var(--red); font-weight: 900; }

.achievement-list { display: grid; gap: 9px; }
.achievement { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; border: 1px solid #384b3d; background: rgba(255,255,255,.025); padding: 12px; }
.achievement.done { border-right: 4px solid var(--lime); }
.achievement.locked { opacity: .48; filter: grayscale(.5); }
.medal { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #657467; color: var(--amber); font-size: 22px; background: #0a100b; }
.achievement b { display: block; font-size: 15px; margin-bottom: 3px; }
.achievement small { color: var(--muted); }
.achievement em { color: var(--lime); font-style: normal; font-size: 12px; white-space: nowrap; }

.wall-of-guey { text-align: center; overflow: hidden; }
.huge-guey { font-size: clamp(74px, 15vw, 220px); font-weight: 1000; line-height: .75; color: var(--lime); text-shadow: 7px 7px 0 #19381b, 12px 12px 0 #071008; margin: 30px 0; transform: rotate(-2deg); }
.sticker-field { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sticker-field span { display: inline-block; padding: 9px 13px; border: 1px solid #637566; background: #101711; color: var(--amber); font-weight: 900; transform: rotate(var(--tilt, 0deg)); }
.sticker-field span:nth-child(2n) { --tilt: 2deg; }
.sticker-field span:nth-child(3n) { --tilt: -3deg; }

.footer-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-panel p { margin: 7px 0 0; color: #aeb9b0; }

.flash { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: white; opacity: 0; }
.flash.go { animation: flashbang 1.1s ease-out; }
@keyframes flashbang { 0% { opacity: 0; } 8% { opacity: 1; } 24% { opacity: .94; } 100% { opacity: 0; } }

.toast, .song-toast { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; border: 1px solid var(--lime); background: rgba(3,8,4,.96); color: var(--lime); font-weight: 900; padding: 11px 16px; box-shadow: 0 10px 35px rgba(0,0,0,.45); }
.toast { bottom: 24px; }
.song-toast { top: 112px; color: var(--amber); border-color: var(--amber); }
.toast.show, .song-toast.show { animation: toast 2.2s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.95); } 12%, 74% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); } }

.flying-meme { position: absolute; color: var(--amber); background: #101810; border: 1px solid var(--lime); padding: 10px 13px; font-weight: 1000; font-size: clamp(18px, 3vw, 34px); animation: flyMeme 2.1s ease-out forwards; transform: rotate(var(--r)); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }
@keyframes flyMeme { 0% { opacity: 0; transform: scale(.2) rotate(var(--r)); } 18% { opacity: 1; transform: scale(1.2) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(-170px) scale(.8) rotate(var(--r)); } }

body.chaos .panel { animation: shake .08s linear 11; }
body.chaos .topbar { animation: hue .7s linear 1; }
@keyframes shake { 25% { transform: translate(2px,-1px); } 50% { transform: translate(-2px,1px); } 75% { transform: translate(1px,2px); } }
@keyframes hue { 50% { filter: hue-rotate(130deg) saturate(2); } }

body.yerushalayim-mode::before {
  content: "✡︎ ירושלים גואיי ✡︎";
  position: fixed;
  z-index: 90;
  inset: 42% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  color: var(--amber);
  font-weight: 1000;
  font-size: clamp(44px, 11vw, 160px);
  white-space: nowrap;
  text-shadow: 5px 5px #1b341d, 9px 9px #000;
  pointer-events: none;
  animation: choirPop 1.2s ease both;
}
@keyframes choirPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-10deg); } 22%,78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%,-70%) scale(1.18) rotate(2deg); } }
body.yerushalayim-mode .float-symbol { color: var(--amber); animation-duration: 5s !important; }

@media (max-width: 980px) {
  .topbar { align-items: flex-start; }
  .connection { display: none; }
  .ticker { top: 72px; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: 0; }
  .profile-card { grid-template-columns: 85px 1fr; }
  .menu { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .loadout-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meme-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .topbar { padding: 14px 16px; }
  .brand h1 { font-size: 22px; }
  .ticker { top: 65px; }
  .shell { width: min(100% - 14px, 1460px); margin-top: 10px; gap: 10px; }
  .content { gap: 10px; }
  .content > .panel { padding: 17px; }
  .menu { grid-template-columns: 1fr; }
  .loadout-grid, .meme-grid { grid-template-columns: 1fr; }
  .section-head, .footer-panel { flex-direction: column; }
  .badge { align-self: flex-start; }
  .achievement { grid-template-columns: 44px 1fr; }
  .achievement em { grid-column: 2; }
  .bridge-scene { min-height: 320px; }
  .marco-pixel { left: 38%; transform: rotate(8deg) scale(.82); }
  .bridge-caption { font-size: 26px; max-width: 220px; }
  .feed-row { grid-template-columns: 1fr 32px 1.3fr; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .ticker div, .float-symbol, .cursor { animation: none !important; }
}

/* === RAVE PHOTO CHAOS === */
.photo-trail-layer,
.photo-strobe-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.photo-trail-layer { z-index: 9994; }
.photo-strobe-layer { z-index: 9995; }

.trail-photo {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--size, 110px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow:
    0 0 10px rgba(255,255,255,.9),
    0 0 24px rgba(184,255,84,.8),
    0 0 46px rgba(110,197,255,.72);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.45);
  opacity: 0;
  filter: saturate(1.35) contrast(1.1);
  animation: photoTrailPop var(--life, 900ms) cubic-bezier(.12,.8,.22,1) forwards;
  will-change: transform, opacity, filter;
}

@keyframes photoTrailPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.35);
    filter: saturate(2) contrast(1.35) hue-rotate(0deg);
  }
  18% { opacity: .96; }
  68% { opacity: .75; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, -80px))) rotate(calc(var(--rot, 0deg) + var(--spin, 80deg))) scale(1.2);
    filter: saturate(1.15) contrast(1.05) hue-rotate(var(--hue, 90deg));
  }
}

.strobe-photo {
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 38vmin);
  max-width: 92vw;
  max-height: 86vh;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: clamp(3px, .6vw, 8px) solid white;
  box-shadow:
    0 0 18px white,
    0 0 44px #b8ff54,
    0 0 82px #6ec5ff,
    0 0 130px #ff3264;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.12);
  animation: strobePhotoBurst 720ms steps(2, jump-none) forwards;
  will-change: transform, opacity, filter;
}

@keyframes strobePhotoBurst {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot)) scale(.1); filter: brightness(2.8) saturate(2.2) hue-rotate(0deg); }
  12% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.08); }
  26% { opacity: .08; filter: brightness(.8) saturate(1.2) hue-rotate(70deg); }
  42% { opacity: .96; transform: translate(-50%,-50%) rotate(calc(var(--rot) * -1)) scale(.92); filter: brightness(2.2) saturate(2.4) hue-rotate(150deg); }
  58% { opacity: .12; }
  76% { opacity: .9; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.18); filter: brightness(1.8) saturate(2) hue-rotate(250deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(calc(var(--rot) + 35deg)) scale(1.45); filter: brightness(1.2) saturate(1.4) hue-rotate(330deg); }
}

body.rave-hit::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9993;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), rgba(184,255,84,.14) 28%, rgba(110,197,255,.12) 55%, transparent 78%);
  mix-blend-mode: screen;
  animation: raveScreenHit 720ms steps(2, jump-none) forwards;
}
@keyframes raveScreenHit {
  0%,100% { opacity: 0; }
  12% { opacity: 1; }
  28% { opacity: .12; }
  46% { opacity: .82; }
  64% { opacity: .08; }
  78% { opacity: .7; }
}

.rave-fx-toggle {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 10020;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: 8px 10px;
  font: 800 11px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(184,255,84,.35);
  direction: ltr;
}
.rave-fx-toggle[data-on="true"] { color: var(--lime, #b8ff54); }
.rave-fx-toggle[data-on="false"] { color: #aaa; box-shadow: none; }

@media (max-width: 640px) {
  .trail-photo { width: var(--size-mobile, 84px); }
  .rave-fx-toggle { left: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .trail-photo,
  .strobe-photo,
  body.rave-hit::before { animation: none !important; display: none !important; }
}