/* The Last Ride – base styles, animations and shared component states */
html, body { height: 100%; margin: 0; }
#app { height: 100%; }
body { margin: 0; background: #17110c; overflow-x: clip; }
a { color: #c9a24a; }
[data-rules-nav]::-webkit-scrollbar { display: none; }
a:hover { color: #e0c48a; }
::selection { background: #8a3324; color: #f3e9d8; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
@keyframes whyIconPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(217,178,95,0.18); }
  50% { text-shadow: 0 0 16px rgba(217,178,95,0.42); }
}
@keyframes humFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes discordPulse {
  0% { transform: scale(0.6); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
[data-anim="rise"] { animation: shopHeadIn .7s ease-out both; }
[data-reveal="pending"] { opacity: 0; }
[data-card-img] { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
[data-gold-card] { transition: transform .34s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; }
[data-gold-card][data-open="1"] { transform: translateY(-8px) scale(1.07); z-index: 6; border-color: #c09a4e; box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 34px rgba(200,160,80,0.2); }
[data-card][data-open="1"] [data-card-img] { transform: scale(1.06); }
/* Gold carousel: arrow disabled at track edges */
[data-m="gold-arrow"] { transition: opacity .25s ease, background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease !important; }
[data-m="gold-arrow"][data-off="1"] { opacity: 0 !important; pointer-events: none !important; }
[data-m="gold-arrow"] { border-color: #6a5130 !important; }
/* Layering: the track is its own stacking context, so card hover/open z-index (5/6) stays inside it and the arrows sit above. */
[data-m="gold-track"] { position: relative; z-index: 1; isolation: isolate; }
[data-m="gold-arrow"] { z-index: 10 !important; }
/* Shop gold accents */
[data-gold-line] { transition: opacity .3s ease; opacity: .75; }
[data-card]:hover [data-gold-line], [data-gold-card]:hover [data-gold-line], [data-gold-card][data-open="1"] [data-gold-line] { opacity: 1; }
/* Rules: recently updated entry */
[data-m="rule"][data-updated="1"] { border-left: 2px solid #c9a35a !important; background: linear-gradient(90deg, rgba(217,178,95,0.075) 0%, rgba(217,178,95,0.02) 55%, rgba(217,178,95,0) 100%); }
[data-m="rule"][data-updated="1"] [data-m="rule-num"] { border-color: rgba(217,178,95,0.6) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 0 10px rgba(217,178,95,0.22) !important; } and (pointer: fine) {
  [data-card]:hover [data-card-img] { transform: scale(1.035); }
  [data-gold-card]:hover { transform: translateY(-6px) scale(1.045); z-index: 5; border-color: #a5813f; box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 0 26px rgba(200,160,80,0.15); }
  [data-card]:hover [data-card-img], [data-gold-card]:hover { will-change: transform; }
}
@media (max-width: 760px) {
  [data-gold-card][data-open="1"] { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 22px rgba(200,160,80,0.16); }
  [data-card][data-open="1"] [data-card-img] { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  [data-anim="rise"] { animation: none !important; }
  [data-reveal] { opacity: 1 !important; }
  [data-card-img], [data-card]:hover [data-card-img] { transition: none !important; transform: none !important; }
  [data-gold-card], [data-gold-card]:hover, [data-gold-card][data-open="1"] { transition: none !important; transform: none !important; }
}
@keyframes shopHeadIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shopGlow {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}
@keyframes shopDrift {
  0%, 100% { transform: translateX(-50%) translate3d(-10px, -4px, 0) scale(1); }
  50% { transform: translateX(-50%) translate3d(10px, 4px, 0) scale(1.05); }
}
@keyframes shopTitleBreathe {
  0%, 100% { text-shadow: 0 6px 26px rgba(0,0,0,0.55), 0 0 30px rgba(217,178,95,0.14); }
  50% { text-shadow: 0 6px 26px rgba(0,0,0,0.55), 0 0 42px rgba(217,178,95,0.26); }
}
@keyframes chevronPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.08); }
}
@property --emberAngle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes emberDrop {
  0% { transform: translateY(-110%); }
  100% { transform: translateY(180%); }
}
@keyframes eyebrowShimmer {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}
@keyframes emberOrbit {
  0% { --emberAngle: 0deg; } 1.36% { --emberAngle: 27.8deg; } 2.72% { --emberAngle: 46.5deg; } 5.43% { --emberAngle: 64.6deg; } 10.87% { --emberAngle: 76.6deg; } 16.3% { --emberAngle: 81deg; } 22.4% { --emberAngle: 83.4deg; }
  25% { --emberAngle: 90deg; }
  27.6% { --emberAngle: 96.6deg; } 33.7% { --emberAngle: 99deg; } 39.1% { --emberAngle: 103.4deg; } 44.6% { --emberAngle: 115.4deg; } 47.3% { --emberAngle: 133.5deg; } 48.6% { --emberAngle: 152.2deg; } 50% { --emberAngle: 180deg; }
  51.4% { --emberAngle: 207.8deg; } 52.7% { --emberAngle: 226.5deg; } 55.4% { --emberAngle: 244.6deg; } 60.9% { --emberAngle: 256.6deg; } 66.3% { --emberAngle: 261deg; } 72.4% { --emberAngle: 263.4deg; }
  75% { --emberAngle: 270deg; }
  77.6% { --emberAngle: 276.6deg; } 83.7% { --emberAngle: 279deg; } 89.1% { --emberAngle: 283.4deg; } 94.6% { --emberAngle: 295.4deg; } 97.3% { --emberAngle: 313.5deg; } 98.6% { --emberAngle: 332.2deg; } 100% { --emberAngle: 360deg; }
}
@keyframes whyPlayMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes coinSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes smokeRise {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  20% { opacity: 0.4; }
  60% { opacity: 0.25; }
  100% { transform: translate(var(--sx, 20px), -180px) scale(1.8); opacity: 0; }
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 14px rgba(217,178,95,0.25); }
  50% { text-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 22px rgba(217,178,95,0.45); }
}
@keyframes fireGlow {
  0%, 100% { text-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 18px rgba(240,150,40,0.55), 0 0 38px rgba(200,70,30,0.35), 0 0 60px rgba(150,40,20,0.2); }
  25% { text-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 24px rgba(255,170,50,0.65), 0 0 46px rgba(220,90,35,0.4), 0 0 70px rgba(150,40,20,0.25); }
  50% { text-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 16px rgba(230,140,35,0.5), 0 0 34px rgba(190,60,25,0.3), 0 0 55px rgba(150,40,20,0.18); }
  75% { text-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 26px rgba(255,180,60,0.7), 0 0 48px rgba(220,90,35,0.42), 0 0 72px rgba(150,40,20,0.26); }
}

@keyframes rosterIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.tlr-roster > div { animation: rosterIn .55s cubic-bezier(.22,.61,.36,1) both; }
.tlr-roster > div:nth-child(1) { animation-delay: .05s; }
.tlr-roster > div:nth-child(2) { animation-delay: .13s; }
.tlr-roster > div:nth-child(3) { animation-delay: .21s; }
.tlr-roster > div:nth-child(4) { animation-delay: .29s; }
.tlr-roster > div:nth-child(5) { animation-delay: .37s; }
.tlr-roster > div:nth-child(6) { animation-delay: .45s; }


@keyframes staffFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
.staff-track { scrollbar-width: none; }
.staff-track::-webkit-scrollbar { display: none; }
.staff-track:active { cursor: grabbing; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(200,50,30,0.45), 0 4px 12px rgba(0,0,0,0.45); transform: rotate(-6deg) scale(1); }
  50% { box-shadow: 0 0 26px rgba(220,70,45,0.8), 0 4px 12px rgba(0,0,0,0.45); transform: rotate(-6deg) scale(1.04); }
}
@keyframes heroScaleFade {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes noticePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,178,95,0.45); border-color: rgba(217,178,95,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(217,178,95,0); border-color: rgba(217,178,95,0.9); }
}
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kenBurns {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes emberFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  15% { opacity: .8; }
  80% { opacity: .5; }
  100% { transform: translateY(-260px) translateX(var(--ex, 20px)); opacity: 0; }
}