/* Monday Shop backgrounds, colors and music (js/cosmetics.js). */

/* The worn background and color sit behind the whole page. */
.lsx-player-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#lsx-player-bg.is-over-color { opacity: 0.8; mix-blend-mode: multiply; }
body.lsx-has-cosmetics { background: transparent !important; }
/* The theme's page wrappers paint a light color; let the background through. */
body.lsx-has-cosmetics #page,
body.lsx-has-cosmetics #main-wrapper,
body.lsx-has-cosmetics .dialog-off-canvas-main-canvas,
body.lsx-has-cosmetics .layout-container,
body.lsx-has-cosmetics main { background: transparent !important; }
/* The game sits on a frosted panel, so its text and tables stay readable
   on any background; the background shows around it and blurred through. */
body.lsx-has-cosmetics #game-container {
  margin-top: 12px;
  border-radius: 24px;
  background: rgba(245, 247, 255, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
/* Admin tabs (View, Edit …) above the game. */
body.lsx-has-cosmetics .nav-tabs { border-radius: 14px 14px 0 0; background: rgba(245, 247, 255, .9); }
/* Rarity rows you have none of are see-through by default. */
body.lsx-has-cosmetics .lsx-rarity-table table { background: #fff; }

/* Epic and up move. A worn tiled background drifts as one piece (its
   layers keep lined up), 220px a loop, the size every tile divides. */
.lsx-player-layer.lsx-cos--drift { top: -220px; left: -220px; animation: lsx-cos-drift 40s linear infinite; }
@keyframes lsx-cos-drift { to { transform: translate(220px, 220px); } }
.lsx-cos--aurora.lsx-cos--animated { background-size: 200% 200% !important; animation: lsx-cos-aurora 18s ease-in-out infinite alternate; }
.lsx-cos--changing { background-size: 400% 400% !important; animation: lsx-cos-aurora 14s ease-in-out infinite alternate; }
@keyframes lsx-cos-aurora { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* Mythic: twinkling sparkles. Goldy: a gold shine sweeping across. */
.lsx-cos--mythic::after,
.lsx-cos--goldy::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.lsx-cos--mythic::after {
  background: radial-gradient(2px 2px at 15% 25%, #fff, transparent), radial-gradient(2px 2px at 65% 45%, #fff, transparent), radial-gradient(3px 3px at 35% 75%, #fff, transparent), radial-gradient(2px 2px at 85% 85%, #fff, transparent) 0 0 / 260px 260px;
  animation: lsx-cos-twinkle 2.4s ease-in-out infinite alternate;
}
.lsx-cos--goldy::after {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 140, .55) 50%, transparent 65%) 0 0 / 300% 100%;
  animation: lsx-cos-shine 4s linear infinite;
}
.lsx-player-layer.lsx-cos--mythic,
.lsx-player-layer.lsx-cos--goldy { overflow: hidden; }
@keyframes lsx-cos-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes lsx-cos-shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lsx-cos--animated, .lsx-cos--drift, .lsx-cos--changing, .lsx-cos--mythic::after, .lsx-cos--goldy::after { animation: none !important; }
}

/* The music button. */
.lsx-music-btn { position: fixed; z-index: 1040; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; max-width: min(260px, calc(100vw - 32px)); padding: 10px 16px; border: 0; border-radius: 999px; background: #0b1026; color: #fff; font-weight: 800; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.lsx-music-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsx-music-btn.is-playing { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.lsx-music-btn.is-playing i { animation: lsx-cos-twinkle .5s ease-in-out infinite alternate; }

/* The shop page. */
.lsx-shop { color: #0f172a; }
.lsx-shop__hero { border-radius: 24px; padding: 28px; color: #fff; background: linear-gradient(135deg, #0b1026, #4c1d95 60%, #be185d); margin-bottom: 24px; }
.lsx-shop__hero h1 { font-weight: 900; }
.lsx-shop__clock { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .15); font-weight: 800; }
.lsx-shop__clock.is-open { background: #22c55e; color: #052e16; }
.lsx-shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lsx-shop__item { border-radius: 18px; background: #fff; border: 3px solid var(--rar); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); overflow: hidden; display: flex; flex-direction: column; }
.lsx-shop__item.is-worn { box-shadow: 0 0 0 4px #22c55e; }
.lsx-shop__swatch { position: relative; height: 150px; display: grid; place-items: center; }
.lsx-shop__swatch--music { background: linear-gradient(135deg, #0b1026, #312e81); color: #fff; font-size: 2.6rem; }
.lsx-shop__swatch--music.is-playing i { animation: lsx-cos-twinkle .5s ease-in-out infinite alternate; }
.lsx-shop__body { padding: 12px 14px; display: grid; gap: 4px; flex: 1; }
.lsx-shop__rarity { font-weight: 900; color: var(--rar); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.lsx-shop__name { font-weight: 900; font-size: 1.1rem; }
.lsx-shop__meta { font-size: .8rem; color: #64748b; }
.lsx-shop__actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 14px; }
.lsx-shop__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 12px; }
.lsx-shop__tabs button { border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 800; background: #e2e8f0; }
.lsx-shop__tabs button.is-on { background: #0b1026; color: #fff; }
.lsx-shop__status { min-height: 1.5em; font-weight: 700; }