/* ==========================================================================
   OMNIA VFX — PATCH 81
   A single scalable visual language for pages, combat, loot, maps, and cards.
   ========================================================================== */

:root {
  --vfx-cyan: #73d7ff;
  --vfx-gold: #ffd05b;
  --vfx-pink: #ff84c6;
  --vfx-void: #9c58ff;
  --vfx-red: #ff5d73;
  --vfx-green: #75d99f;
}

#omnia-vfx-canvas {
  position: fixed;
  inset: 0;
  z-index: 99990;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

.omnia-vfx-control {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99992;
  display: grid;
  grid-template-columns: 26px auto;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px;
  border: 3px solid var(--border, #231c45);
  background: linear-gradient(180deg, rgba(17,12,42,.96), rgba(7,5,22,.98));
  color: #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.42), 0 0 16px rgba(115,215,255,.24);
  font-family: var(--pixel);
  font-size: 7px;
  line-height: 1.3;
  cursor: pointer;
}
.omnia-vfx-control svg { width: 24px; height: 24px; color: var(--vfx-cyan); }
.omnia-vfx-control span { display: grid; gap: 2px; text-align: left; }
.omnia-vfx-control small { color: #aebbd2; font-family: var(--body); font-size: 13px; }
.omnia-vfx-control:hover { border-color: var(--vfx-gold); filter: brightness(1.12); }

/* Page illustrations are code-native, crisp at every resolution, and cheap. */
.page > .section > .section-title,
.page > .main-hero .section-title {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.omnia81-page-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 0 54%, color-mix(in srgb, var(--page-accent, #73d7ff) 16%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(35,28,69,.045) 8px 9px);
}
.omnia81-page-scene::before,
.omnia81-page-scene::after {
  content: "";
  position: absolute;
  right: clamp(20px, 7vw, 110px);
  top: 50%;
  transform: translateY(-50%);
}
.omnia81-page-scene::before {
  width: 82px;
  height: 82px;
  border: 4px solid var(--page-accent, #73d7ff);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--page-accent, #73d7ff) 18%, transparent),
    0 0 28px var(--page-accent-soft, rgba(115,215,255,.2));
  animation: omnia81-scene-orbit 12s linear infinite;
}
.omnia81-page-scene::after {
  width: 48px;
  height: 48px;
  background:
    linear-gradient(45deg, transparent 43%, var(--page-accent, #73d7ff) 44% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--vfx-gold) 44% 56%, transparent 57%);
  filter: drop-shadow(0 0 9px var(--page-accent, #73d7ff));
  animation: omnia81-scene-pulse 3.2s steps(4,end) infinite;
}

#page-world-map .omnia81-page-scene::before { border-radius: 44% 56% 52% 48%; }
#page-adventurers .omnia81-page-scene::after { border-radius: 50%; background: radial-gradient(circle,#fff 0 13%,var(--vfx-pink) 14% 33%,transparent 34%), conic-gradient(from 45deg,var(--vfx-gold),var(--vfx-cyan),var(--vfx-pink),var(--vfx-gold)); }
#page-shop .omnia81-page-scene::before,
#page-vault .omnia81-page-scene::before { border-radius: 10px 10px 30px 30px; border-style: double; border-width: 8px; }
#page-chronicle .omnia81-page-scene::before,
#page-records .omnia81-page-scene::before { border-radius: 3px; transform: translateY(-50%) rotate(-7deg); background: repeating-linear-gradient(0deg,#fff8df 0 8px,#f4dfaa 8px 9px); }
#page-events .omnia81-page-scene::before { border-radius: 50%; background: conic-gradient(from 0deg,var(--vfx-gold),var(--vfx-red),var(--vfx-void),var(--vfx-cyan),var(--vfx-gold)); }

@keyframes omnia81-scene-orbit { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes omnia81-scene-pulse { 50% { opacity: .45; transform: translateY(-50%) scale(.82) rotate(45deg); } }

/* Pixel navigation pointer and button tactility. */
.primary-sidebar button { position: relative; }
.primary-sidebar button.active::after {
  content: "◆";
  position: absolute;
  right: 8px;
  color: var(--vfx-gold);
  text-shadow: 0 0 8px var(--vfx-cyan);
  animation: omnia81-nav-pointer .8s steps(2,end) infinite alternate;
}
.pixel-btn,
.primary-sidebar button,
.wb-composer-actions button {
  transform-origin: center bottom;
}
.pixel-btn:active,
.primary-sidebar button:active,
.wb-composer-actions button:active {
  translate: 0 2px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.35) !important;
}
@keyframes omnia81-nav-pointer { to { translate: -4px 0; filter: brightness(1.35); } }

/* Adventure cards: class identity, foil, equipment marks, restrained parallax. */
.adventurer-card.omnia81-card {
  --omnia81-tilt-x: 0deg;
  --omnia81-tilt-y: 0deg;
  --omnia81-class: var(--adv-accent, #73d7ff);
  transform: perspective(900px) rotateX(var(--omnia81-tilt-x)) rotateY(var(--omnia81-tilt-y));
  transform-style: preserve-3d;
}
.adventurer-card.omnia81-card:hover {
  transform: perspective(900px) rotateX(var(--omnia81-tilt-x)) rotateY(var(--omnia81-tilt-y)) translate(-3px,-3px);
}
.omnia81-class-crest {
  position: absolute !important;
  z-index: 9 !important;
  left: 11px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  background: #15102c;
  color: var(--omnia81-class);
  box-shadow: 2px 2px 0 #231c45, 0 0 12px var(--omnia81-class);
}
.omnia81-class-crest svg { width: 27px; height: 27px; }
.omnia81-gear-marks {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 15px;
  margin: -4px 0 7px;
}
.omnia81-gear-marks i {
  width: 9px;
  height: 9px;
  border: 2px solid #231c45;
  background: #fff;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
}
.omnia81-gear-marks i.filled { background: var(--omnia81-class); box-shadow: 0 0 7px var(--omnia81-class); }
.adventurer-card.omnia81-card::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: -45% auto -45% -30%;
  width: 18%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity: 0;
  pointer-events: none;
}
.adventurer-card.omnia81-card:hover::after { animation: omnia81-foil 1.1s ease-out; }
@keyframes omnia81-foil { 12% { opacity: 0; } 38% { opacity: .75; } 100% { opacity: 0; translate: 650px 0; } }

/* Map becomes a living strategic surface. */
.map-wrap { position: relative; isolation: isolate; overflow: hidden; }
.map-hotspots { z-index: 3; }
.map-hotspot {
  display: grid;
  place-items: end center;
  padding: 0 0 4px;
  overflow: visible;
}
.map-hotspot::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 3px solid var(--vfx-cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(115,215,255,.18), 0 0 22px rgba(115,215,255,.7);
  animation: omnia81-map-pulse 2.5s ease-out infinite;
}
.map-hotspot.hs-danger::before { border-color: var(--vfx-red); box-shadow: 0 0 0 6px rgba(255,93,115,.18),0 0 25px rgba(255,93,115,.8); }
.map-hotspot.hs-void::before { border-color: var(--vfx-void); box-shadow: 0 0 0 6px rgba(156,88,255,.2),0 0 28px rgba(156,88,255,.85); }
.omnia81-map-label {
  position: relative;
  z-index: 2;
  max-width: 120px;
  padding: 4px 6px;
  border: 2px solid #231c45;
  background: rgba(255,248,223,.94);
  color: #231c45;
  font-family: var(--pixel);
  font-size: 6px;
  line-height: 1.25;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.omnia81-map-pin {
  position: absolute;
  z-index: 5;
  width: 16px;
  height: 22px;
  translate: -50% -100%;
  border: 3px solid #231c45;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--vfx-gold);
  box-shadow: 0 0 12px var(--vfx-gold);
  pointer-events: none;
  animation: omnia81-pin-bob 1.4s ease-in-out infinite alternate;
}
.omnia81-map-pin::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }
.omnia81-void-front {
  position: absolute;
  z-index: 2;
  left: 34%;
  top: 28%;
  width: 32%;
  height: 30%;
  border-radius: 44% 56% 60% 40%;
  background: radial-gradient(circle,rgba(15,4,32,.72),rgba(125,39,255,.34) 48%,transparent 72%);
  filter: blur(4px);
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: omnia81-void-breathe 5.5s ease-in-out infinite alternate;
}
@keyframes omnia81-map-pulse { 70%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes omnia81-pin-bob { to { translate: -50% calc(-100% - 7px); } }
@keyframes omnia81-void-breathe { to { transform: scale(1.13) rotate(4deg); opacity: .75; } }

/* World Boss spectacle and phase language. */
.wb-arena-overlay,
#wb-arena { --omnia81-phase-color: #73d7ff; }
.wb-arena-overlay[data-omnia-phase="2"],
#wb-arena[data-omnia-phase="2"] { --omnia81-phase-color: #ffd05b; }
.wb-arena-overlay[data-omnia-phase="3"],
#wb-arena[data-omnia-phase="3"] { --omnia81-phase-color: #ff7d79; }
.wb-arena-overlay[data-omnia-phase="4"],
#wb-arena[data-omnia-phase="4"] { --omnia81-phase-color: #ff335d; }
.wb-arena-overlay::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%,transparent 30%,color-mix(in srgb,var(--omnia81-phase-color) 12%,transparent));
  transition: background .7s ease;
}
.wb-boss-card img,
.wb74-boss-card img,
.wb-boss-portrait img,
.wb74-boss-portrait img {
  animation: omnia81-boss-breathe 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 15px var(--omnia81-phase-color));
}
.wb-entry.omnia81-new-action { animation: omnia81-combat-entry .65s cubic-bezier(.15,.8,.2,1); }
.omnia81-phase-warning {
  position: fixed;
  z-index: 100002;
  left: 50%;
  top: 30%;
  width: min(760px, 86vw);
  translate: -50% -50%;
  padding: 18px 22px;
  border: 4px double #fff;
  background: rgba(21,5,31,.94);
  color: #fff;
  box-shadow: 0 0 0 6px #231c45, 0 0 55px var(--omnia81-warning,#ff5d73);
  font-family: var(--pixel);
  font-size: clamp(14px,2.8vw,30px);
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  animation: omnia81-warning 1.55s ease-out forwards;
}
@keyframes omnia81-boss-breathe { 50% { transform: scale(1.025) translateY(-3px); filter: drop-shadow(0 0 25px var(--omnia81-phase-color)); } }
@keyframes omnia81-combat-entry { from { opacity:0; transform:translateX(24px); filter:brightness(1.8); } }
@keyframes omnia81-warning { 0% { opacity:0; transform:scaleX(.1); } 20%,70% { opacity:1; transform:scaleX(1); } 100% { opacity:0; transform:scale(1.06); } }

/* Loot reveals get rarity beams and impact without replacing existing gacha. */
.gacha-overlay { isolation: isolate; }
.gacha-overlay::after {
  content:"";
  position:fixed;
  z-index:-1;
  inset:-40%;
  background: conic-gradient(from 0deg,transparent,#ffd05b22,transparent,#73d7ff22,transparent,#ff84c622,transparent);
  animation: omnia81-loot-rays 16s linear infinite;
}
.gacha-card.opened {
  animation: omnia81-loot-impact .55s cubic-bezier(.2,1.4,.3,1);
}
.gacha-card[data-rarity="Legendary"].opened,
.gacha-card[data-rarity="Mythic"].opened,
.gacha-card[data-rarity="Exotic"].opened,
.gacha-card[data-rarity="Super Exotic"].opened {
  filter: drop-shadow(0 0 16px #ffd05b) brightness(1.12);
}
@keyframes omnia81-loot-rays { to { rotate:360deg; } }
@keyframes omnia81-loot-impact { 0% { transform:scale(.72); filter:brightness(2.2); } 65% { transform:scale(1.08); } }

/* Page wipe: very short, only on deliberate navigation. */
.omnia81-page-wipe {
  position: fixed;
  z-index: 100010;
  inset: 0;
  pointer-events: none;
}
.omnia81-page-wipe::before {
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg,#130b2c 0 5vw,#25134e 5vw 10vw);
  transform-origin:left;
  animation: omnia81-page-wipe .42s steps(8,end) forwards;
}
@keyframes omnia81-page-wipe { 0% { transform:scaleX(0); } 45% { transform:scaleX(1); } 55% { transform:scaleX(1); transform-origin:right; } 100% { transform:scaleX(0); transform-origin:right; } }

body.omnia-vfx-off #omnia-vfx-canvas,
body.omnia-vfx-off .omnia81-page-scene,
body.omnia-vfx-off .omnia81-void-front,
body.omnia-vfx-off .omnia81-map-pin,
body.omnia-vfx-off .omnia81-phase-warning,
body.omnia-vfx-off .omnia81-page-wipe {
  display: none !important;
}
body.omnia-vfx-off *,
body.omnia-vfx-reduced * {
  scroll-behavior: auto !important;
}
body.omnia-vfx-reduced .omnia81-page-scene,
body.omnia-vfx-reduced .omnia81-void-front,
body.omnia-vfx-reduced .map-hotspot::before,
body.omnia-vfx-reduced .wb-boss-card img,
body.omnia-vfx-reduced .wb74-boss-card img,
body.omnia-vfx-reduced .wb-boss-portrait img,
body.omnia-vfx-reduced .gacha-overlay::after,
body.omnia-vfx-reduced .adventurer-card.omnia81-card:hover::after {
  animation: none !important;
}
body.omnia-vfx-reduced .adventurer-card.omnia81-card,
body.omnia-vfx-off .adventurer-card.omnia81-card {
  transform: none !important;
}

@media (max-width: 620px) {
  .omnia-vfx-control { right: 8px; bottom: 8px; grid-template-columns: 22px auto; padding: 5px 7px; }
  .omnia-vfx-control svg { width: 20px; height: 20px; }
  .omnia-vfx-control small { display:none; }
  .omnia81-page-scene::before,
  .omnia81-page-scene::after { right: 12px; opacity:.65; scale:.72; }
  .omnia81-map-label { display:none; }
  .omnia81-class-crest { width:32px; height:32px; }
  .omnia81-class-crest svg { width:22px; height:22px; }
}

@media (prefers-reduced-motion: reduce) {
  #omnia-vfx-canvas,
  .omnia81-page-wipe { display:none !important; }
  .omnia81-page-scene,
  .omnia81-void-front,
  .map-hotspot::before,
  .wb-boss-card img,
  .wb74-boss-card img,
  .wb-boss-portrait img,
  .gacha-overlay::after,
  .adventurer-card.omnia81-card:hover::after { animation:none !important; }
}