/* ============================================================
   KHC UNIVERSES HERO — 8-universe Solo-Leveling-style panels
   Rows of 2 panels; greyscale at rest -> colour on hover.
   Scoped under .khc-uni so it cannot clash with vitrine.css.
   Image paths relative to this stylesheet -> /image/universes/
   Recipe LOCKED by owner 2026-06-10 — do not retune without ask.
   ============================================================ */

.khc-uni{position:relative;background:radial-gradient(120% 80% at 50% 0%, #0c0e16, #05060a 70%);overflow:hidden;color:#fff}
.khc-uni *{box-sizing:border-box;margin:0;padding:0}
.khc-uni::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.khc-uni .game-list{display:flex;list-style:none;height:100vh;min-height:560px}
.khc-uni .panel{position:relative;flex:1 1 0;overflow:hidden;cursor:pointer;isolation:isolate;border-right:1px solid rgba(255,255,255,.04)}
.khc-uni .panel:last-child{border-right:0}
.khc-uni .panel>a{all:unset;display:block;position:absolute;inset:0;cursor:pointer}

.khc-uni .panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(72% 58% at 50% 42%, color-mix(in srgb,var(--c) 26%,transparent), transparent 66%);
  opacity:.42;transition:opacity .6s ease}
.khc-uni .panel:hover::before,.khc-uni .panel.on::before{opacity:.9}

/* SPLASH window. Background is STATIC; only the MASK WINDOW grows on hover (mask-size). */
.khc-uni .world{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:152%;aspect-ratio:1.7;z-index:1;pointer-events:none;
  background-size:cover;background-position:center;
  -webkit-mask:var(--mask,url("../../../image/universes/fx-splash.webp")) no-repeat center;mask:var(--mask,url("../../../image/universes/fx-splash.webp")) no-repeat center;
  -webkit-mask-size:72%;mask-size:72%;
  transition:opacity .6s ease, -webkit-mask-size .7s cubic-bezier(.2,.7,.2,1), mask-size .7s cubic-bezier(.2,.7,.2,1)}
.khc-uni .panel:hover .world,.khc-uni .panel.on .world{-webkit-mask-size:108%;mask-size:108%}
.khc-uni .world.grey{background-image:var(--wp);filter:grayscale(1) brightness(.55) contrast(1.05);opacity:.32}
.khc-uni .world.color{opacity:0;will-change:opacity;
  background-image:var(--wp);background-size:cover;background-position:center;filter:brightness(.92) saturate(1.06) contrast(1.03)}
.khc-uni .panel:hover .world.color,.khc-uni .panel.on .world.color{opacity:.95}
.khc-uni .panel:hover .world.grey,.khc-uni .panel.on .world.grey{opacity:.1}

/* themed glow hugging the silhouette */
.khc-uni .ghost{position:absolute;left:50%;bottom:0;transform:translateX(-50%) scale(1.12);height:90%;aspect-ratio:var(--ar);z-index:2;pointer-events:none;
  opacity:0;will-change:opacity;background:var(--c);mix-blend-mode:screen;filter:blur(26px);
  -webkit-mask:var(--em) bottom/contain no-repeat;mask:var(--em) bottom/contain no-repeat;transition:opacity .6s ease}
.khc-uni .panel:hover .ghost,.khc-uni .panel.on .ghost{opacity:.5}

/* WARHAMMER only — softer silhouette glow (half strength AND half size) */
.khc-uni .panel.wh .ghost{transform:translateX(-50%) scale(1.04);filter:blur(13px)}
.khc-uni .panel.wh:hover .ghost,.khc-uni .panel.wh.on .ghost{opacity:.25}

/* LOTR — now a STANDARD masked-wallpaper panel (like the others); keep Sauron char + rotating ring offsets. */
.khc-uni .panel.lotr .char{left:54%;margin-left:50px}
.khc-uni .panel.lotr .ghost{left:54%;margin-left:50px}
.khc-uni .panel.lotr .ring{left:46.2%;margin-left:30px}

/* LOTR only — One-Ring inscription aura: rotates + shimmers on hover */
.khc-uni .ring{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(0deg);width:78%;aspect-ratio:1024/1038;z-index:2;pointer-events:none;
  background:var(--ring) center/contain no-repeat;opacity:0;mix-blend-mode:screen;
  filter:drop-shadow(0 0 12px rgba(255,190,90,.55));transition:opacity .8s ease}
.khc-uni .panel:hover .ring,.khc-uni .panel.on .ring{opacity:.92;animation:khcRingspin 34s linear infinite, khcRingglow 3.4s ease-in-out infinite}
@keyframes khcRingspin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes khcRingglow{0%,100%{filter:drop-shadow(0 0 9px rgba(255,180,70,.45)) brightness(.95)}
  50%{filter:drop-shadow(0 0 24px rgba(255,215,120,.9)) brightness(1.22)}}

/* character — two stacked layers, opacity-only crossfade (NEVER animate filter) */
.khc-uni .char{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;height:88%;width:auto;object-fit:contain;object-position:bottom}
.khc-uni .char.base{filter:grayscale(1) brightness(.74) contrast(1.03)}
.khc-uni .char.color{opacity:0;will-change:opacity;transition:opacity .6s ease}
.khc-uni .panel:hover .char.color,.khc-uni .panel.on .char.color{opacity:1}

/* POKÉMON — smaller + raised character; on focus/hover it slides LEFT (still visible) so the
   wallpaper (Ash + Pikachu) reads on the right; the char stays to the LEFT of them, not over them. */
.khc-uni .panel.poke .char{height:42%;bottom:5%;transition:opacity .6s ease, left .7s cubic-bezier(.2,.7,.2,1)}
.khc-uni .panel.poke .ghost{height:44%;bottom:5%;background:#ff4fb0;transition:opacity .6s ease, left .7s cubic-bezier(.2,.7,.2,1)}
.khc-uni .panel.poke:hover .char,.khc-uni .panel.poke.on .char,
.khc-uni .panel.poke:hover .ghost,.khc-uni .panel.poke.on .ghost{left:30%}
/* poke wallpaper is 1:1 — square the world box so it fills with no crop/zoom AND no empty edges */
.khc-uni .panel.poke .world{width:auto;height:96%;aspect-ratio:1}
.khc-uni .panel.poke .world.grey,.khc-uni .panel.poke .world.color{background-size:cover}

.khc-uni .veil{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:4;pointer-events:none;
  background:linear-gradient(0deg,#05060a 2%,rgba(5,6,10,.55) 48%,transparent 100%)}
.khc-uni .h4{position:absolute;left:0;right:0;bottom:9%;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.khc-uni .h4 .logo-wrap{position:relative;width:clamp(150px,15vw,220px);height:auto}
.khc-uni .h4 .logo{display:block;width:100%;height:auto}
.khc-uni .h4 .logo.grey{filter:grayscale(.7) brightness(.85)}
.khc-uni .h4 .logo.color{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--c) 55%,transparent))}
.khc-uni .panel:hover .h4 .logo.color,.khc-uni .panel.on .h4 .logo.color{opacity:1}
.khc-uni .h4 .more{margin-top:14px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#fff;
  padding:9px 22px;border-radius:30px;background:color-mix(in srgb,var(--c) 78%,transparent);
  box-shadow:0 8px 26px color-mix(in srgb,var(--c) 45%,transparent);opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.khc-uni .panel:hover .h4 .more,.khc-uni .panel.on .h4 .more{opacity:1;transform:translateY(0)}

@media(max-width:900px){.khc-uni .game-list{flex-direction:column;height:auto}
  .khc-uni .panel{height:80vw;min-height:380px;border-right:0;border-bottom:1px solid rgba(255,255,255,.05)}
  /* responsive wallpapers: srcset не работает для CSS-фонов — на мобиле подменяем
     на -sm версию через var-фоллбек (--wp-sm объявлен инлайном на панели) */
  .khc-uni .world.grey,.khc-uni .world.color{background-image:var(--wp-sm,var(--wp))}
  /* mobile: own small shift (desktop 50/30px would skew the narrow column) */
  .khc-uni .panel.lotr .char,.khc-uni .panel.lotr .ghost{left:50%;margin-left:26px}
  .khc-uni .panel.lotr .ring{left:50%;margin-left:-2px}
  .khc-uni .panel.lotr .world.grey,.khc-uni .panel.lotr .world.color{margin-left:34px}}
@media(prefers-reduced-motion:reduce){.khc-uni .ring{animation:none!important}}