/* =====================================================================
   LotusMC – doplňkové styly
   Sem jsem přesunul styly, které v původní šabloně žily přímo v HTML
   (layout.html, lm-nav.twig, category.html) + pár drobností pro nový web.
   ===================================================================== */

/* Pozadí (západ slunce, ostrovy, mraky) zůstává při scrollování */
.lm-scene { position: fixed !important; transform: translateZ(0); will-change: transform; }
@media (max-height: 820px) and (min-width: 761px) { .lm-scene { height: 100vh; min-height: 640px; } }

/* ===== Přepínač měny (EUR / Kč) ===== */
    .lm-cur {
      display: inline-flex; align-items: center; gap: 2px;
      padding: 4px;
      border-radius: 14px;
      background: rgba(30, 14, 5, .7);
      box-shadow: inset 0 0 0 1px var(--line);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .lm-cur button {
      display: inline-flex; align-items: center; gap: 6px;
      min-height: 40px; padding: 0 12px;
      border: 0; border-radius: 10px;
      font: 800 .84rem/1 var(--font-body);
      color: var(--muted); background: none; cursor: pointer;
      transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .lm-cur button:hover { color: var(--text); background: rgba(255, 170, 90, .08); }
    .lm-cur button b { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
    .lm-cur button[aria-pressed="true"] {
      color: #4a1402;
      background: linear-gradient(180deg, #fff27a 0%, var(--gold) 28%, var(--amber) 68%, var(--ember) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #8a2e06;
    }
    @media (max-width: 760px) { .lm-cur button span { display: none; } .lm-cur button { padding: 0 11px; } }
    /* v režimu Kč schovat eurové ceny, než je skript přepočítá (žádné problikávání) */
    html[data-lm-cur="CZK"] [data-lm-eur]:not(.is-lm-cur) { visibility: hidden; }
    /* poznámka o přepočtu v pokladně má smysl jen v režimu Kč */
    html:not([data-lm-cur="CZK"]) .lm-czk-note { display: none; }
    
/* ===== Menu kategorií, odpočty, hlasování (z lm-nav.twig) ===== */

.lm-nav--fx { gap: 7px; }
.lm-nav--fx > li { opacity: 0; animation: lm-nav-in .45s ease-out forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes lm-nav-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.lm-nav--fx a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 16px;
  border-radius: 12px;
  font-weight: 800; letter-spacing: .02em;
  color: var(--muted, #dcb896);
  background: rgba(255, 170, 90, .045);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 90, .1);
  transition: transform .2s ease, color .2s ease, background-color .2s ease, box-shadow .25s ease;
}
/* zlatá linka vlevo */
.lm-nav--fx a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold, #ffd23f), var(--lotus, #f4508a));
  box-shadow: 0 0 10px rgba(255, 196, 71, .8);
  transition: height .25s ease;
}
/* světlo, které přeběhne */
.lm-nav--fx a::after {
  content: "";
  position: absolute; top: -40%; bottom: -40%; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 190, .18), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
@media (hover: hover) {
  .lm-nav--fx a:hover {
    transform: translateX(4px);
    color: var(--text, #fff4e8);
    background: rgba(255, 170, 90, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 80, .35), 0 8px 20px -14px rgba(255, 140, 20, .8);
  }
  .lm-nav--fx a:hover::before { height: 60%; }
  .lm-nav--fx a:hover::after { animation: lm-nav-sweep .7s ease-out; }
}
@keyframes lm-nav-sweep { from { left: -60%; } to { left: 130%; } }

/* aktivní kategorie – září */
.lm-nav--fx a.is-active,
.lm-nav--fx a.is-glow {
  color: #fff7e6;
  background:
    linear-gradient(90deg, rgba(255, 196, 71, .26), rgba(244, 80, 138, .12) 70%, rgba(244, 80, 138, .04)),
    rgba(40, 18, 6, .6);
  animation: lm-nav-glow 3s ease-in-out infinite;
}
.lm-nav--fx a.is-active::before,
.lm-nav--fx a.is-glow::before { height: 70%; }
.lm-nav--fx a.is-active::after,
.lm-nav--fx a.is-glow::after { animation: lm-nav-sweep-loop 5.5s ease-in-out infinite; }
@keyframes lm-nav-sweep-loop { 0%, 62% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes lm-nav-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 196, 80, .45), 0 0 12px -6px rgba(255, 170, 40, .4); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255, 220, 130, .85), 0 0 22px -4px rgba(255, 170, 40, .55); }
}
.lm-nav--fx a.is-active .lm-nav__txt,
.lm-nav--fx a.is-glow .lm-nav__txt {
  background: linear-gradient(90deg, #ffe08a 0%, #ffe08a 35%, #fffbe6 50%, #ffe08a 65%, #ffe08a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: lm-nav-text 4s linear infinite;
}
@keyframes lm-nav-text { from { background-position: 125% 0; } to { background-position: -125% 0; } }

.lm-nav__txt { flex: 1; min-width: 0; }

/* štítek u kategorie (TOP, AKCE…) */
.lm-nav__tag {
  position: relative; overflow: hidden;
  flex: none;
  padding: 2px 7px 3px;
  border-radius: 7px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(180deg, #ff86b4, var(--lotus, #f4508a));
  box-shadow: 0 2px 0 #8f1a47, 0 0 12px -2px rgba(244, 80, 138, .7);
}
.lm-nav__tag::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: skewX(-20deg);
  animation: lm-nav-tag 3.2s ease-in-out infinite;
}
@keyframes lm-nav-tag { 0%, 55% { left: -80%; } 85%, 100% { left: 140%; } }

.lm-nav--fx .lm-nav__sub a { padding: 8px 12px 8px 16px; font-size: .88rem; }
.lm-nav--fx details summary a { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .lm-nav--fx > li, .lm-nav--fx a, .lm-nav--fx a::after, .lm-nav--fx a.is-active .lm-nav__txt, .lm-nav--fx a.is-glow .lm-nav__txt, .lm-nav__tag::after { animation: none !important; opacity: 1; }
}
/* ---------- odpočet: malý v menu ---------- */
.lm-nav__txt small.lm-nav__cd {
  display: block;
  margin-top: 2px;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  color: var(--lotus-soft, #f79bc0);
  -webkit-text-fill-color: var(--lotus-soft, #f79bc0);
  font-variant-numeric: tabular-nums;
}
.lm-nav__cd.is-urgent { color: #ff8fb8; -webkit-text-fill-color: #ff8fb8; animation: lm-cd-blink 1.2s ease-in-out infinite; }
.lm-nav__cd.is-over { color: var(--faint, #a07c5c); -webkit-text-fill-color: var(--faint, #a07c5c); animation: none; }
@keyframes lm-cd-blink { 50% { opacity: .55; } }

/* ---------- odpočet: velký v kategorii ---------- */
.lm-cdbox {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(244, 80, 138, .2), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(255, 196, 71, .16), transparent 55%),
    rgba(20, 8, 3, .55);
  box-shadow: inset 0 0 0 1px rgba(244, 80, 138, .45), 0 0 22px -8px rgba(244, 80, 138, .5);
}
.lm-cdbox::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -50%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 230, 240, .14), transparent);
  transform: skewX(-20deg);
  animation: lm-cd-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lm-cd-sweep { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }
.lm-cdbox__kicker { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lotus-soft, #f79bc0); }
.lm-cdbox__title { margin-top: 3px; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1.1rem; color: var(--text, #fff4e8); }
.lm-cdbox__units { display: flex; gap: 8px; }
.lm-cdbox__unit {
  min-width: 62px;
  padding: 8px 6px 7px;
  border-radius: 12px;
  text-align: center;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 80, .25);
}
.lm-cdbox__unit b {
  display: block;
  font-family: var(--font-display, sans-serif); font-size: 1.55rem; font-weight: 800; line-height: 1.1;
  color: var(--gold, #ffd23f);
  text-shadow: 0 0 16px rgba(255, 190, 60, .5);
  font-variant-numeric: tabular-nums;
}
.lm-cdbox__unit small { display: block; margin-top: 2px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #dcb896); }
.lm-cdbox.is-urgent { animation: lm-cd-urgent 1.6s ease-in-out infinite; }
@keyframes lm-cd-urgent {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(244, 80, 138, .5), 0 0 16px -6px rgba(244, 80, 138, .5); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255, 140, 185, .95), 0 0 30px -2px rgba(244, 80, 138, .7); }
}
.lm-cdbox.is-over { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); background: rgba(20, 8, 3, .55); animation: none; }
.lm-cdbox.is-over::after { display: none; }
.lm-cdbox.is-over .lm-cdbox__units { display: none; }
@media (max-width: 760px) {
  .lm-cdbox__units { width: 100%; }
  .lm-cdbox__unit { flex: 1; min-width: 0; }
  .lm-cdbox__unit b { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .lm-cdbox, .lm-cdbox::after, .lm-nav__cd.is-urgent { animation: none !important; } }

/* ===== HLASOVÁNÍ – boční jazýček vpravo + vysouvací panel ===== */
.lm-pkg__actions .is-loading, .lm-qty .is-loading, a.is-loading { opacity: .65; pointer-events: none; }
#lm-cart-toast { gap: 12px; }
.lm-votetab {
  position: fixed; right: 0; top: 50%; z-index: 140;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 9px;
  border: 0; border-radius: 12px 0 0 12px;
  cursor: pointer;
  writing-mode: vertical-rl;
  font: 800 .78rem/1 var(--font-display, sans-serif);
  letter-spacing: .12em; text-transform: uppercase;
  color: #4a1402;
  background: linear-gradient(90deg, #fff27a 0%, var(--gold, #ffd23f) 28%, var(--amber, #ffa51f) 68%, var(--ember, #f46b0c) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7), -4px 0 0 #8a2e06, 0 0 22px -4px rgba(255, 180, 50, .7);
  transition: transform .3s ease, right .3s ease;
  animation: lm-vt-glow 2.8s ease-in-out infinite;
}
.lm-votetab span { transform: rotate(180deg); display: block; }
.lm-votetab:hover { right: 3px; }
.lm-votetab.is-hidden { transform: translate(110%, -50%); }
@keyframes lm-vt-glow {
  0%, 100% { box-shadow: inset 1px 0 0 rgba(255,255,255,.7), -4px 0 0 #8a2e06, 0 0 14px -4px rgba(255, 180, 50, .5); }
  50%      { box-shadow: inset 1px 0 0 rgba(255,255,255,.7), -4px 0 0 #8a2e06, 0 0 30px 0 rgba(255, 180, 50, .8); }
}

.lm-votes.lm-votes--side {
  position: fixed; top: 50%; right: 0; z-index: 160;
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: 0;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, #34180a, #2a1407 40%, #1c0c04);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 80, .35), -30px 0 60px -20px rgba(0, 0, 0, .85);
  transform: translate(105%, -50%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), visibility .35s;
}
.lm-votes.lm-votes--side.is-open { transform: translate(0, -50%); visibility: visible; }
.lm-votes--side .lm-votes__intro { align-items: flex-start; padding-right: 64px; }
.lm-votes--side .lm-votes__intro > div { display: block; }
.lm-votes--side .lm-votes__list { grid-template-columns: 1fr; }
.lm-votes--side .lm-vote { gap: 10px; padding-right: 10px; }
.lm-votes--side .lm-vote__go { flex: none; padding: 7px 10px; font-size: .78rem; }
.lm-votes__close {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 10px;
  border: 0; border-radius: 9px; cursor: pointer;
  font: 800 .75rem/1 var(--font-body, sans-serif);
  color: var(--muted, #dcb896); background: rgba(255, 255, 255, .07);
}
.lm-votes__close:hover { color: #fff; background: rgba(255, 255, 255, .13); }

@media (max-width: 760px) {
  .lm-votetab { top: auto; bottom: 120px; transform: none; padding: 12px 7px; font-size: .66rem; }
  .lm-votetab.is-hidden { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) { .lm-votetab, .lm-votes--side { animation: none !important; transition: none !important; } }

/* ===== Sběratelské karty (z category.html) ===== */

    /* ===== SBĚRATELSKÉ KARTY (rarita podle ceny) ===== */
    .lm-collect { --rc: 201, 204, 211; transform-style: preserve-3d; will-change: transform; overflow: hidden; }
    .lm-rar--rare      { --rc: 79, 179, 255; }
    .lm-rar--epic      { --rc: 180, 108, 255; }
    .lm-rar--legendary { --rc: 255, 194, 51; }
    .lm-rar--holo      { --rc: 255, 140, 210; }
    .lm-collect:not(.lm-pkg--hot) {
      box-shadow: inset 0 0 0 1px rgba(var(--rc), .55), 0 0 22px -10px rgba(var(--rc), .8);
    }
    .lm-collect .lm-pkg__media {
      background:
        radial-gradient(circle at 50% 58%, rgba(var(--rc), .3), transparent 62%),
        linear-gradient(180deg, rgba(var(--rc), .08), rgba(0, 0, 0, .25));
    }
    .lm-rar {
      position: absolute; top: 8px; right: 8px; z-index: 2;
      padding: 2px 7px 3px;
      border-radius: 7px;
      font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: rgb(var(--rc));
      background: rgba(10, 4, 1, .65);
      box-shadow: inset 0 0 0 1px rgba(var(--rc), .6), 0 0 10px -2px rgba(var(--rc), .6);
    }
    .lm-collect .lm-pkg__name { color: rgb(var(--rc)); }
    .lm-rar--common .lm-pkg__name { color: var(--text, #fff4e8); }

    /* legendární – zlatě pulzuje */
    .lm-rar--legendary:not(.lm-pkg--hot) { animation: lm-rar-leg 2.8s ease-in-out infinite; }
    @keyframes lm-rar-leg {
      0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 194, 51, .55), 0 0 16px -8px rgba(255, 194, 51, .7); }
      50%      { box-shadow: inset 0 0 0 1px rgba(255, 220, 120, .95), 0 0 30px -6px rgba(255, 194, 51, .9); }
    }

    /* HOLO – duhový lesk + duhový okraj */
    .lm-rar--holo:not(.lm-pkg--hot) { animation: lm-rar-holo 4s linear infinite; }
    @keyframes lm-rar-holo {
      0%   { box-shadow: inset 0 0 0 1.5px #ff6ec7, 0 0 24px -8px #ff6ec7; }
      25%  { box-shadow: inset 0 0 0 1.5px #ffd23f, 0 0 24px -8px #ffd23f; }
      50%  { box-shadow: inset 0 0 0 1.5px #5effc8, 0 0 24px -8px #5effc8; }
      75%  { box-shadow: inset 0 0 0 1.5px #6aa8ff, 0 0 24px -8px #6aa8ff; }
      100% { box-shadow: inset 0 0 0 1.5px #ff6ec7, 0 0 24px -8px #ff6ec7; }
    }
    .lm-rar--holo .lm-rar {
      color: #fff;
      background: linear-gradient(90deg, #ff6ec7, #ffd23f, #5effc8, #6aa8ff, #ff6ec7);
      background-size: 300% 100%;
      animation: lm-holo-shift 3s linear infinite;
      box-shadow: 0 0 12px -2px rgba(255, 140, 210, .8);
      text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    }
    .lm-rar--holo .lm-pkg__name {
      background: linear-gradient(90deg, #ff9ad5, #ffe27a, #8dffd9, #9cc3ff, #ff9ad5);
      background-size: 300% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: lm-holo-shift 4s linear infinite;
    }
    .lm-holo {
      position: absolute; inset: 0; z-index: 1;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(115deg,
        transparent 20%, rgba(255, 110, 199, .28) 32%, rgba(255, 210, 63, .26) 42%,
        rgba(94, 255, 200, .24) 52%, rgba(106, 168, 255, .28) 62%, transparent 75%);
      background-size: 250% 250%;
      mix-blend-mode: color-dodge;
      opacity: .55;
      animation: lm-holo-shift 5s ease-in-out infinite alternate;
    }
    @keyframes lm-holo-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

    /* odlesk, který sleduje myš */
    .lm-glare {
      position: absolute; inset: 0; z-index: 1;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .22), transparent 45%);
      transition: opacity .25s ease;
    }
    .lm-collect.is-tilting .lm-glare { opacity: 1; }
    .lm-collect .lm-pkg__actions, .lm-collect .lm-pkg__media, .lm-collect .lm-pkg__info { position: relative; z-index: 2; }
    .lm-collect.is-tilting { transition: transform .08s linear; }
    .lm-collect.is-leaving { transition: transform .45s ease; }

    @media (prefers-reduced-motion: reduce) {
      .lm-collect, .lm-collect *, .lm-holo { animation: none !important; }
    }
    
/* ===== TNT easter egg (z layout.html) ===== */

.lm-tnt {
  position: absolute; z-index: 3;
  width: 32px; height: 32px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(40, 10, 0, .45)) drop-shadow(0 0 10px rgba(255, 120, 60, .25));
  transform-origin: 50% 100%;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;                       /* klik se chytá přes souřadnice – scéna je pod obsahem */
}
.lm-tnt.is-ready { opacity: 1; }
.lm-tnt svg { display: block; width: 100%; height: 100%; }
html.lm-tnt-hover, html.lm-tnt-hover body { cursor: pointer; }
.lm-tnt.is-hover { animation-name: lm-float, lm-tnt-wiggle !important; animation-duration: var(--lm-tnt-dur, 10s), .5s !important; animation-iteration-count: infinite, infinite !important; }
@keyframes lm-tnt-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
.lm-tnt.is-primed { animation: lm-tnt-fuse .16s steps(1) infinite, lm-tnt-swell 1.2s ease-in forwards !important; }
@keyframes lm-tnt-fuse { 0% { filter: brightness(1); } 50% { filter: brightness(2.6) saturate(.2); } }
@keyframes lm-tnt-swell { from { scale: 1; } 85% { scale: 1.12; } to { scale: 1.32; } }
.lm-tnt.is-gone, .lm-isle--main.is-gone { visibility: hidden; }

.lm-boom-flash {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: radial-gradient(circle at var(--bx) var(--by), rgba(255, 255, 230, .95), rgba(255, 190, 80, .55) 18%, rgba(255, 120, 30, .15) 40%, transparent 65%);
  animation: lm-boom-flash .55s ease-out forwards;
}
@keyframes lm-boom-flash { from { opacity: 1; } to { opacity: 0; } }
.lm-boom-chunk {
  position: fixed; z-index: 9980; pointer-events: none;
  background-repeat: no-repeat; image-rendering: pixelated;
  will-change: transform, opacity;
}
html.lm-shake .lm-container, html.lm-shake .lm-scene { animation: lm-shake .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes lm-shake {
  10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 5px -3px; }
  30%, 50%, 70% { translate: -9px 4px; } 40%, 60% { translate: 9px -4px; } 100% { translate: 0 0; }
}
html.lm-boomed .lm-header__logo { animation: lm-logo-hop 1.1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes lm-logo-hop {
  0% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -70px; rotate: -10deg; }
  55% { translate: 0 6px; rotate: 4deg; } 75% { translate: 0 -12px; rotate: -2deg; } 100% { translate: 0 0; rotate: 0deg; }
}
/* tlaková vlna – mraky, ostrovy a lístky odletí od výbuchu (směr a síla se počítá ve skriptu) */
.lm-blown { transition: translate var(--lm-blow-t, 1.6s) cubic-bezier(.12, .85, .3, 1), rotate var(--lm-blow-t, 1.6s) cubic-bezier(.12, .85, .3, 1), filter 1.2s ease; }
@media (max-width: 760px) { .lm-tnt { width: 22px; height: 22px; } }