@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes shine { from { left: -60%; } to { left: 130%; } }
@keyframes sel-pop { 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dial-win { 0% { transform: scale(1); } 30% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fly { 0% { transform: translate(-50%, -50%) scale(var(--s)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(0); opacity: 0; } }
@keyframes drop-new { 0% { opacity: 0; transform: translateX(-100%); } 60% { opacity: 1; transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes drop-new-m { 0% { opacity: 0; transform: translateY(-100%) scale(0.8); } 100% { opacity: 1; transform: none; } }
@keyframes glint { 0% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes up-flash { 0% { color: #4be03a; text-shadow: 0 0 12px rgba(35, 215, 12, 0.7); } 100% { color: inherit; text-shadow: none; } }
@keyframes down-flash { 0% { color: #ff7b7b; } 100% { color: inherit; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes bar-fill { from { transform: scaleX(0); } }
@keyframes float-y { 50% { transform: translateY(-6px); } }
@keyframes ring-in { from { opacity: 0; transform: scale(0.85) rotate(-30deg); } }

.view.enter > * { animation: page-in 0.5s var(--ease) backwards; }
.rise { animation: rise 0.45s var(--ease) backwards; animation-delay: var(--d, 0ms); }

.btn-y { position: relative; overflow: hidden; isolation: isolate; }
.btn-y::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn-y:hover:not([disabled])::before { animation: shine 0.75s ease; }
.upg-go::before { animation: shine 1s ease 1.2s infinite; animation-duration: 3.4s; }
.upg-go:hover::before { animation: shine 0.75s ease; }
.bal button { transition: filter 0.2s; }
.bal button:hover { filter: brightness(1.08); }
.bal b.up { animation: up-flash 1.1s ease; }
.bal b.down { animation: down-flash 0.9s ease; }
.me-btn { transition: background 0.2s; }
.me-btn .avatar, .me-btn:hover .avatar { transform: none; transition: none; }
.logo img { transition: transform 0.5s var(--ease); }
.logo:hover img { transform: scale(1.05); }

.menu a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--y); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.menu a:hover::after { transform: scaleX(0.4); }
.menu a.on::after { transform: scaleX(1); }

.item { transition: box-shadow 0.18s, background-color 0.2s; }
.item::before { transition: transform 0.35s var(--ease), opacity 0.3s; }
button.item:hover { background-color: #1d1e23; }
button.item:hover::before { transform: scale(1.15); }

.drop { animation: none; }
.drop.fresh { animation: drop-new 0.65s var(--ease) backwards; }
.drop.best.fresh { animation: drop-new 0.65s var(--ease) backwards; }
.drop .glint { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); pointer-events: none; animation: glint 1.2s ease both; }

.d-ticks { transform-origin: 160px 160px; transform-box: view-box; }
.dial svg { animation: ring-in 0.8s var(--ease) backwards; }
.d-center > * { animation: rise 0.35s var(--ease) backwards; }
.dial::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; opacity: 0; }
.dial.won { animation: none; }
.dial.won::after { animation: none; opacity: 0; }
.dial.lost { animation: none; }

.slot { box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.25s, transform 0.25s var(--ease); }
.slot:hover { box-shadow: inset 0 0 0 1px #3a3b41; }
.slot.got { animation: none; }
.slot.got::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 72%); box-shadow: none; animation: flash .8s ease both; pointer-events: none; }
.slot-info > * { animation: rise 0.35s var(--ease) backwards; }
.slot-info > *:nth-child(2) { animation-delay: 0.05s; }
.slot-info > *:nth-child(3) { animation-delay: 0.1s; }

.reels { position: relative; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.burst i { position: absolute; width: 9px; height: 9px; border-radius: 2px; animation: fly 1.15s cubic-bezier(0.15, 0.7, 0.3, 1) both; }
.burst i:nth-child(3n) { border-radius: 50%; width: 6px; height: 6px; }
.burst i:nth-child(4n) { width: 4px; height: 12px; }

.case-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; opacity: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent); transform: skewX(-20deg); pointer-events: none; }
.case-card:hover::after { opacity: 1; animation: shine 0.9s ease; }
.case-card .price { transition: transform 0.25s var(--ease); }
.reel.done .cell:not(.hit) { opacity: 0.35; transition: opacity 0.5s; }
.reel.done .cell.hit { z-index: 2; box-shadow: inset 0 0 0 2px var(--rc); }

.layer.closing { animation: fade-out 0.2s ease both; }
.layer.closing .modal { animation: pop-out 0.2s ease both; }

.auth-form.swap { animation: page-in 0.35s var(--ease) backwards; }
.shake { animation: shake 0.45s ease; }
.res-head h2 { animation: rise 0.45s var(--ease) backwards; }
.res-total b { animation: rise 0.45s var(--ease) 0.25s backwards; }

.prof-card { animation: page-in 0.5s var(--ease) backwards; }
.bar i { transform-origin: left; animation: bar-fill 1.1s var(--ease) 0.2s backwards; }
#tab > * { animation: page-in 0.4s var(--ease) backwards; }
.hrow { animation: rise 0.4s var(--ease) backwards; }
.hrow:nth-child(2) { animation-delay: 0.03s; } .hrow:nth-child(3) { animation-delay: 0.06s; } .hrow:nth-child(4) { animation-delay: 0.09s; } .hrow:nth-child(5) { animation-delay: 0.12s; } .hrow:nth-child(n + 6) { animation-delay: 0.15s; }
.selbar-info b { transition: color 0.2s; }

.input { transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.input:focus { box-shadow: none; }

@media (max-width: 1100px) {
  .drop.fresh { animation-name: drop-new-m; }
}

@media (prefers-reduced-motion: reduce) {
  .upg-go::before, .d-ticks, .d-chev, .fan-glow, .item.sel::before, .slot.full::before { animation: none !important; }
}

@keyframes slot-chevron-flow {
  0%, 100% { transform: translateY(4px); opacity: .85; filter: drop-shadow(0 2px 3px #fcd7110a); }
  50% { transform: translateY(-4px); opacity: 1; filter: drop-shadow(0 4px 9px #fcd71132); }
}
@media (prefers-reduced-motion: no-preference) {
  .slot-art .chev { animation: slot-chevron-flow 2.4s ease-in-out infinite; pointer-events: none; will-change: transform; }
  #slot-r .slot-art .chev { animation-delay: -.6s; }
}
@media (prefers-reduced-motion: reduce) { .slot-art .chev { animation: none; } }

@keyframes reward-lift {
  0% { opacity: .35; transform: translateY(14px) scale(.84); }
  55% { opacity: 1; transform: translateY(-7px) scale(1.07); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.slot.got .slot-fan.one img { animation: reward-lift 1s cubic-bezier(.22,1,.36,1) both; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .slot.got .slot-fan.one img, .slot.got::after { animation: none; } }
@keyframes reward-energy {
  0% { opacity: 0; transform: scale(.45,.55); }
  24% { opacity: .9; }
  65% { opacity: .65; transform: scale(1.05,1.1); }
  100% { opacity: 0; transform: scale(1.16,1.25); }
}
@keyframes reward-sheen { from { opacity: 0; transform: translateX(-110%); } 25% { opacity: 1; } to { opacity: 0; transform: translateX(110%); } }
/* the win flourish is a self-contained .flare overlay now, so `got` leaves the slot's own pseudo-elements alone */
.slot.got::after { content: none; }

:root { --soft: cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes sel-pop { 50% { transform: scale(0.975); } 100% { transform: scale(1); } }



.item { transition: transform 0.45s var(--soft), background-color 0.3s ease; }
.item img { transition: transform 0.5s var(--soft); }
button.item:hover img { transform: translate(-50%, -50%) scale(1.04); }
.item::before { transition: transform 0.5s var(--soft), opacity 0.4s ease; }
.item-ok { transition: transform 0.35s var(--soft); }

.case-card { transition: transform 0.45s var(--soft), box-shadow 0.4s ease; }
.fan-i { transition: transform 0.55s var(--soft); }
.case-card .price { transition: transform 0.4s var(--soft); }
.bal button { transition: transform 0.55s var(--soft), filter 0.3s ease; }
.drop img.sk { transition: transform 0.45s var(--soft); }
.toggle i, .toggle i::after { transition: transform 0.35s var(--soft), background 0.3s ease, box-shadow 0.3s ease; }
.slot { transition: box-shadow 0.35s ease, transform 0.4s var(--soft); }
.me-btn .avatar { transition: transform 0.4s var(--soft), box-shadow 0.3s ease; }
.logo img { transition: transform 0.6s var(--soft); }
/* Quiet idle motion leaves the card, controls and text in place. */
@media (prefers-reduced-motion: no-preference) {
  .item > img { animation: item-idle-float 6s ease-in-out infinite; }
  .item::before { animation: item-idle-glow 7s ease-in-out infinite; }
  .item:nth-child(3n + 1) > img, .item:nth-child(3n + 1)::before { animation-delay: -2s; }
  .item:nth-child(3n + 2) > img, .item:nth-child(3n + 2)::before { animation-delay: -4s; }
  .shop-entry:nth-child(even) .item > img, .inventory-entry:nth-child(even) .item > img { animation-delay: -3s; }
  .item:hover > img, .item:focus-visible > img { animation-play-state: paused; }
}
@keyframes item-idle-float {
  0%, 100% { translate: 0 0; rotate: -.4deg; }
  50% { translate: 0 -3px; rotate: .4deg; }
}
@keyframes item-idle-glow {
  0%, 100% { opacity: .65; scale: 1; }
  50% { opacity: .9; scale: 1.08; }
}

/* Keep the hit area and text size fixed through hover, selection and press. */
:is(.btn, .sq, .mini, .chip, .tab, .social, .dep-m, .count button, .pager button, .bal button, .me-btn, .shop-quantity button, .inventory-sell) {
  transition: background-color .24s ease, color .24s ease, filter .24s ease, box-shadow .24s ease, border-color .24s ease, opacity .24s ease;
}
:is(.btn, .sq, .mini, .chip, .tab, .social, .dep-m, .count button, .pager button, .bal button, .me-btn, .shop-quantity button, .inventory-sell), :is(.btn, .sq, .mini, .chip, .tab, .social, .dep-m, .count button, .pager button, .bal button, .me-btn, .shop-quantity button, .inventory-sell):is(:hover, :active, :focus-visible) {
  transform: none;
}
:is(.btn, .sq, .mini, .chip, .tab, .social, .dep-m, .count button, .pager button, .bal button, .me-btn, .shop-quantity button, .inventory-sell):active:not(:disabled) { filter: brightness(.94); }
.chip.on, .count button.on, .dep-m.on, .item.sel { animation: none; }
button.item, button.item:hover, button.item:active { transform: none; }