.result-reveal{margin:10px 0;padding:12px;background:linear-gradient(145deg,#fff,#ffe9f4);border-radius:20px;box-shadow:0 4px 0 #edc3d5;overflow:hidden}.reveal-controls{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:.7em}.reveal-controls button{border:0;border-radius:12px;padding:7px;background:white;color:#8b4968;min-height:32px}.reveal-song{text-align:center;padding:12px}.reveal-jacket{width:min(150px,80%);aspect-ratio:1;margin:auto;display:grid;place-content:center;gap:12px;background:linear-gradient(135deg,#ffb9d5,#e7c4ff);border:5px solid white;box-shadow:4px 5px 0 #cda1b7;animation:jacket .55s ease-out}.reveal-jacket span{font-size:.6em;letter-spacing:.13em}.reveal-jacket b{padding:8px;overflow-wrap:anywhere}.reveal-rating{display:block;margin-top:10px;font-size:1.4em;text-shadow:0 2px white,0 4px #e4a3bf;animation:announce .7s both}.quality-0{background:radial-gradient(ellipse,#fff7c8,transparent 75%);color:#986400}.quality-0 .reveal-jacket{background:linear-gradient(135deg,#fff6be,#eac064,#ffe5ad)}.quality-3 .reveal-jacket{transform:rotate(-6deg);background:linear-gradient(135deg,#d3d0e5,#eacfe1)}.reveal-sales{animation:announce 1.4s both}.reveal-formation>div{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:10px 0}.reveal-formation span{font-size:.7em;border-radius:12px;background:white;padding:6px;animation:announce .9s both}.reveal-formation small{display:block}.reveal-formation .you{background:#f49ec3;color:#462035}.reveal-seats{height:50px;background:repeating-linear-gradient(90deg,#eee 0 8px,white 8px 10px);margin:8px 0;border-radius:8px;overflow:hidden}.reveal-seats i{display:block;height:100%;width:var(--occupancy);background:repeating-linear-gradient(90deg,#ec83b1 0 8px,transparent 8px 10px);animation:seats .8s ease-out}.reveal-fans strong{display:block;font-size:1.5em;color:#cf3e83}.reveal-fans.down strong{color:#7961a6}.reveal-fans,.reveal-live,.reveal-job{padding:10px 0}.reveal-fans p,.reveal-live p{margin:4px 0}.no-motion *{animation:none!important}.result-reveal p,.result-reveal b{overflow-wrap:anywhere}@keyframes jacket{from{transform:rotateY(100deg) scale(.65)}to{transform:rotateY(0) scale(1)}}@keyframes announce{0%,30%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}@keyframes seats{from{width:0}to{width:var(--occupancy)}}@media(prefers-reduced-motion:reduce){.result-reveal *{animation:none!important}}
