/* Motion is additive: selection, probability and outcomes stay in the game engine. */
.click-feedback{position:fixed;z-index:1000;overflow:hidden;pointer-events:none}
.click-feedback i{position:absolute;display:block;border-radius:50%;background:var(--accent-fill);pointer-events:none}
button{transition:background .18s,color .18s,border-color .18s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.skin-card .card-check{transition:background .2s,color .2s,scale .25s cubic-bezier(.2,.8,.2,1)}
.skin-card.selected .card-check{scale:1.08}
.favorite-button svg{transition:scale .25s,fill .2s}
.favorite-button.active svg{scale:1.14}
.desktop-nav button.active:after{animation:nav-enter .25s cubic-bezier(.2,.8,.2,1)}
@keyframes nav-enter{from{scale:.35 1;opacity:.4}to{scale:1;opacity:1}}
.amount-field:focus-within,.search-field:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft);transition:border-color .2s,box-shadow .2s}
.dial-arc{transition:stroke-dasharray .45s cubic-bezier(.2,.8,.2,1),stroke .3s}
.dial-pointer{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--text) 30%,transparent))}
.dial.spinning .dial-copy strong{animation:none}
.dial.spinning .dial-outer{animation:ring-breathe 1.6s ease-in-out infinite}
@keyframes ring-breathe{50%{opacity:.7}}
.upgrade-arena.is-upgrading .item-art{animation:skin-float 2s ease-in-out infinite}
.upgrade-arena.is-upgrading .target-panel .item-art{animation-delay:-1s}
@keyframes skin-float{50%{translate:0 -5px}}
.upgrade-button.is-busy{position:relative;overflow:hidden;background:var(--accent-soft);color:var(--accent);box-shadow:none}
.upgrade-button.is-busy:after{content:"";position:absolute;bottom:0;left:0;height:3px;background:var(--accent-fill);width:100%;transform-origin:left;animation:spin-progress var(--spin-duration,3000ms) linear both}
.upgrade-button.is-busy>span{margin:0}
@keyframes spin-progress{from{scale:0 1}to{scale:1 1}}
.dial.won{animation:win-settle .5s cubic-bezier(.2,.8,.2,1)}
@keyframes win-settle{50%{scale:1.025}}
.modal[open]::backdrop{animation:backdrop-in .25s ease-out}
.modal[data-closing]::backdrop{animation:backdrop-out .16s ease-in both}
.modal[data-closing]{pointer-events:none}
@keyframes backdrop-in{from{background:#080a0b00;backdrop-filter:blur(0)}to{background:#080a0bb3;backdrop-filter:blur(7px)}}
@keyframes backdrop-out{to{background:#080a0b00;backdrop-filter:blur(0)}}
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
.result-modal{max-width:460px;padding:28px;text-align:center;overflow-x:hidden}
.result-modal .modal-close{z-index:3}
.result-status{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:30px;background:var(--success-bg);color:var(--green);font-size:10px;font-weight:750;letter-spacing:.15px}
.result-status svg{width:14px;height:14px}
.result-modal.failure .result-status{color:var(--red);background:var(--error-bg)}
.result-modal h2{font-size:29px;margin:14px 0 6px;letter-spacing:-1px;line-height:1.25}
.result-description{color:var(--muted);font-size:12px;line-height:1.65;margin:0 auto;max-width:330px}
.result-hero{position:relative;display:grid;place-items:center;height:186px;margin:16px -5px 0;isolation:isolate}
.result-halo{position:absolute;width:155px;height:155px;border-radius:50%;background:color-mix(in srgb,var(--rarity,#a6cc67) 12%,var(--well));border:1px solid color-mix(in srgb,var(--rarity,#a6cc67) 24%,var(--border));z-index:-1}
.result-halo:after{content:"";position:absolute;inset:-13px;border:1px solid var(--border);border-radius:50%;opacity:.55}
.result-hero img{width:330px;max-width:100%;height:180px;object-fit:contain;filter:drop-shadow(0 14px 10px #0004);animation:result-skin-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes result-skin-in{from{opacity:0;translate:0 15px;scale:.88;rotate:-7deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
.result-modal.failure .result-hero img{filter:grayscale(.5) drop-shadow(0 12px 10px #0003);opacity:.65}
.result-weapon{display:block;color:var(--muted);font-size:11px;margin:0 0 4px}
.result-finish{display:block;font-size:23px;font-weight:750;letter-spacing:-.7px;line-height:1.25;overflow-wrap:anywhere}
.result-item-tail{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:9px 0 0;font-size:10px;color:var(--muted)}
.result-item-tail strong{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:21px 0 18px;padding:14px 0;border-block:1px solid var(--border)}
.result-stats span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}
.result-stats strong{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
.result-actions{display:grid;gap:6px}
.result-actions .quiet-button{justify-content:center;min-height:39px;width:100%;font-size:11px}
.result-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.result-particles i{position:absolute;left:50%;top:50%;width:4px;height:7px;border-radius:2px;background:var(--accent-fill);animation:result-particle .85s cubic-bezier(.1,.7,.2,1) both;animation-delay:.12s;rotate:var(--rotation)}
.result-particles i:nth-child(3n){background:var(--green)}
@keyframes result-particle{0%{translate:0 0;opacity:0;scale:.5}25%{opacity:.9}100%{translate:var(--x) var(--y);opacity:0;scale:1;rotate:calc(var(--rotation) + 100deg)}}
@media(max-width:750px){.result-modal{padding:25px 21px;max-height:calc(100dvh - 24px);width:calc(100% - 28px);border-radius:25px}.result-modal h2{font-size:26px}.result-hero{height:164px;margin-top:11px}.result-hero img{height:160px;width:295px}.result-halo{width:137px;height:137px}.result-stats{margin:17px 0 15px}.result-finish{font-size:22px}}
@media(prefers-reduced-motion:reduce){.click-feedback,.result-particles{display:none}.result-hero img,.upgrade-button.is-busy:after,.upgrade-arena.is-upgrading .item-art,.dial.won,.modal::backdrop{animation:none}.result-hero img{opacity:1}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}