*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg0:#080810;--bg1:#0f0f1a;--bg2:#1a1a2e;--text1:#f0ece0;--text2:#9a9490;--accent:#e8c45a;--accent2:#c0392b;--radius:12px}body{background:var(--bg0);color:var(--text1);min-height:100vh;font-family:Inter,system-ui,sans-serif}button{font-family:inherit}.btn-primary{background:var(--accent);color:#111;cursor:pointer;border:none;border-radius:8px;padding:12px 28px;font-size:1rem;font-weight:600;transition:filter .15s}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none}.btn-secondary{color:var(--accent);border:1.5px solid var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:12px 28px;font-size:1rem;font-weight:600;transition:background .15s}.btn-secondary:hover{background:#e8c45a1a}.btn-secondary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 14px;font-size:.9rem}.btn-ghost:hover{color:var(--text1);background:#ffffff0d}.modal-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--bg1);border:1px solid #222;border-radius:16px;width:100%;max-width:420px;padding:32px}.modal h2{margin-bottom:20px;font-size:1.3rem}.input{background:var(--bg2);width:100%;color:var(--text1);border:1px solid #333;border-radius:8px;outline:none;padding:12px;font-family:inherit;font-size:1rem;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text2)}.card-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;display:grid}.movie-card-wrapper{perspective:800px;flex-direction:column;flex-shrink:0;align-items:center;width:100px;height:150px;display:flex}.movie-card{width:100px;height:150px;transform-style:preserve-3d;will-change:transform;position:relative}.movie-card-front,.movie-card-back{backface-visibility:hidden;border-radius:8px;position:absolute;inset:0;overflow:hidden}.movie-card-back{background:var(--bg2);border:1px solid #333;justify-content:center;align-items:center;font-size:2.2rem;display:flex;transform:rotateY(180deg)}.movie-card-label{color:var(--text2);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100px;margin-top:5px;font-size:.58rem;overflow:hidden}@keyframes card-fly{0%{animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:translateY(0)translate(0)rotateY(0)rotateX(0)}45%{transform:translateY(var(--fly-y)) translateX(var(--fly-x)) rotateY(calc(var(--spin-y) * .55)) rotateX(var(--tilt-x));animation-timing-function:cubic-bezier(.55,.06,.68,.19)}85%{transform:translateY(12px) translateX(calc(var(--fly-x) * .08)) rotateY(calc(var(--spin-y) * .96)) rotateX(calc(var(--tilt-x) * .1));animation-timing-function:ease-out}to{transform:translateY(0) translateX(0) rotateY(var(--spin-y)) rotateX(0deg)}}.movie-card.flying{animation:card-fly var(--duration) var(--delay) both}.movie-card.landed-up{transition:box-shadow .4s;transform:rotateY(0);box-shadow:0 0 24px #e8c45ab3}.movie-card.landed-down{filter:brightness(.35)sepia(.5);transition:transform .4s,filter .4s;transform:rotateY(180deg)}.movie-card.eliminated{opacity:0;pointer-events:none;transition:opacity .5s .2s,transform .5s .2s;transform:rotateY(180deg)translateY(28px)}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.confetti-piece{pointer-events:none;z-index:50;border-radius:2px;width:10px;height:10px;animation:linear forwards confetti-fall;position:fixed}[data-card-id]{transition:opacity .5s}[data-card-id].landed-up [data-card-inner],[data-card-id].state-landed-up [data-card-inner]{filter:drop-shadow(0 0 14px #e8c45ae6)}[data-card-id].landed-down [data-card-inner],[data-card-id].state-landed-down [data-card-inner]{filter:brightness(.45)sepia(.4)}@keyframes countdown-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:3px solid #333;border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;margin:40px auto;animation:.8s linear infinite spin}
