/* ═══════════════════════════════════════════════════════
   KREDITS PICKER
   Kredits is light-theme only (no prefers-color-scheme anywhere in the
   platform), so the "stage" backgrounds below are per-view scenery rather
   than a theme. Anything drawn on a dark stage carries its own light text.
═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* ── AUTH ── */
#screen-auth{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow-md);text-align:center}
.auth-card h2{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.auth-card p{font-size:13px;color:var(--text2);margin-bottom:20px}

/* ── MAIN ── */
#screen-main{display:none;flex:1;flex-direction:column;overflow:hidden}
#screen-main.active{display:flex}

.np-header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.np-header-title{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text);flex:1}
body.ks-active .np-header{display:none!important}

/* ── CLASS SELECTOR ── */
.np-class-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.np-class-label{font-family:var(--font-body);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.np-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.np-pill{background:var(--surface2);border:1.5px solid var(--border);border-radius:20px;padding:5px 13px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap}
.np-pill:hover{border-color:var(--accent);color:var(--accent)}
.np-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.np-class-sel{background:var(--surface2);border:1.5px solid var(--border);border-radius:9px;padding:7px 11px;font-family:var(--font-body);font-size:13px;color:var(--text);outline:none;cursor:pointer;flex:1;max-width:280px}
.np-class-sel:focus{border-color:var(--accent)}

/* ── VIEW TABS ── */
.np-tabs{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;gap:0;flex-shrink:0;overflow-x:auto;scrollbar-width:thin}
.np-tab{padding:10px 13px;font-size:12px;font-weight:600;color:var(--text3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.np-tab:hover{color:var(--text2)}
.np-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.np-tab .seat-ico{display:inline-flex;opacity:.75}.np-tab .seat-ico .k-icon{width:14px;height:14px}

/* ── STATUS BAR ── */
.np-status{padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0}
.np-count-txt{font-family:var(--font-body);font-size:11px;color:var(--text2);flex:1}
.np-reset-btn{background:none;border:none;font-size:11px;color:var(--text3);cursor:pointer;padding:3px 8px;border-radius:6px}
.np-reset-btn:hover{background:var(--surface2);color:var(--text2)}

/* ── VIEW AREA ── */
.np-view-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.np-view{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.np-view.active{display:flex}

/* ── PICKED PANEL ── */
.np-picked-panel{background:var(--surface);border-top:1px solid var(--border);padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
.np-picked-panel.open{max-height:160px}
.np-picked-inner{padding:10px 20px;display:flex;flex-wrap:wrap;gap:6px}
.np-picked-chip{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--text2)}
.np-picked-toggle{background:var(--surface);border-top:1px solid var(--border);padding:7px 20px;min-height:var(--tap);display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0}
.np-picked-toggle-label{font-size:11px;font-weight:600;color:var(--text2);flex:1}
.np-picked-toggle-arr{font-size:11px;color:var(--text3);transition:transform .2s}
.np-picked-toggle.open .np-picked-toggle-arr{transform:rotate(180deg)}

/* ── PICK BUTTON ── */
.np-action-bar{padding:14px 20px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.np-pick-btn{flex:1;background:var(--accent);color:var(--on-accent);border:none;border-radius:12px;padding:14px 24px;font-family:var(--font-display);font-size:16px;font-weight:800;cursor:pointer;transition:all .15s;letter-spacing:-.01em}
.np-pick-btn:hover{background:var(--accent);transform:translateY(-1px)}
.np-pick-btn:active{transform:translateY(0)}
.np-pick-btn:disabled{opacity:.45;cursor:default;transform:none}
.np-spacebar-hint{font-size:11px;color:var(--text3);white-space:nowrap}
@media(max-width:480px){.np-spacebar-hint{display:none}}

/* ══════════ SPOTLIGHT ══════════ */
#view-spotlight{background:var(--ink)}
.sp-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:24px;width:100%;position:relative}
.sp-name{font-family:var(--font-display);font-size:clamp(32px,8vw,72px);font-weight:800;color:var(--on-accent);letter-spacing:-.04em;line-height:1.05;text-align:center;min-height:1.1em}
.sp-name.picked{color:var(--accent-tint-strong);text-shadow:0 0 60px rgba(96,165,250,.5),0 0 120px rgba(96,165,250,.2)}
.sp-sub{font-family:var(--font-body);font-size:13px;color:var(--dark-text-muted);margin-top:12px;text-align:center;min-height:18px;letter-spacing:.06em}
.sp-picked-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:540px;margin-top:20px;max-height:96px;overflow-y:auto}
.sp-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:4px 10px;font-size:11px;color:rgba(255,255,255,.45)}

/* ══════════ WHEEL ══════════ */
#view-wheel{background:var(--surface-alt)}
.wheel-stage{display:flex;align-items:center;justify-content:center;flex:1;padding:12px;width:100%}
.wheel-wrap{position:relative;display:flex;align-items:center;justify-content:center}
#wheel-canvas{border-radius:50%;display:block;box-shadow:0 6px 30px rgba(30,50,110,.16)}
/* Large, clearly visible pointer sitting over the rim. */
.wheel-ptr{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid var(--danger);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));z-index:3}
.wheel-ptr::after{content:'';position:absolute;top:-46px;left:-18px;width:36px;height:36px;border-radius:50%;
  background:var(--danger);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wheel-center{position:absolute;width:52px;height:52px;border-radius:50%;background:var(--surface);
  box-shadow:0 2px 10px rgba(0,0,0,.2);top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}
.wheel-prompt-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center;z-index:20}
.wheel-prompt-overlay.show{display:flex}
.wheel-prompt-card{background:var(--surface);border-radius:18px;padding:28px 24px;text-align:center;max-width:290px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.28)}
.wheel-prompt-name{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:6px}
.wheel-prompt-sub{font-size:14px;color:var(--text2);margin-bottom:22px}
.wheel-prompt-btns{display:flex;gap:10px;justify-content:center}
.wheel-prompt-remove{background:var(--accent);color:var(--on-accent);border:none;border-radius:10px;padding:11px 24px;font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer}
.wheel-prompt-remove:hover{background:var(--accent)}
.wheel-prompt-keep{background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);border-radius:10px;padding:11px 24px;font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer}
.wheel-prompt-keep:hover{border-color:var(--accent);color:var(--accent)}

/* ══════════ SLOT MACHINE ══════════ */
#view-slot{background:var(--dark-surface)}
.slot-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:20px;padding:24px;width:100%;position:relative}
.slot-machine{display:flex;gap:8px;align-items:center;background:var(--dark-bg);border-radius:16px;padding:16px;border:2px solid rgba(255,255,255,.08);box-shadow:0 8px 40px rgba(0,0,0,.4);transition:box-shadow .3s}
.slot-machine.jackpot{animation:slotJackpot .9s ease-out}
@keyframes slotJackpot{
  0%,100%{box-shadow:0 8px 40px rgba(0,0,0,.4)}
  25%{box-shadow:0 0 0 4px var(--medal-gold-light),0 0 60px rgba(251,191,36,.85)}
  60%{box-shadow:0 0 0 4px var(--warning-border),0 0 90px rgba(253,230,138,.6)}
}
.slot-reel-wrap{overflow:hidden;height:100px;width:140px;border-radius:10px;background:var(--dark-surface-2);border:1.5px solid rgba(255,255,255,.1);position:relative}
.slot-reel-wrap.center{width:180px;height:120px;border-color:rgba(99,102,241,.6);box-shadow:0 0 20px rgba(99,102,241,.3)}
.slot-reel-wrap.landed .slot-highlight{border-color:var(--medal-gold-light);box-shadow:inset 0 0 22px rgba(251,191,36,.45)}
.slot-reel{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;will-change:transform}
.slot-item{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--accent-tint);text-align:center;padding:0 8px;flex-shrink:0;line-height:1.1}
.slot-reel-wrap .slot-item{height:100px;font-size:clamp(12px,3vw,16px)}
.slot-reel-wrap.center .slot-item{height:120px;font-size:clamp(14px,3.5vw,20px);color:var(--on-accent)}
.slot-highlight{position:absolute;inset:0;border-radius:10px;border:2px solid rgba(99,102,241,0);pointer-events:none;transition:border-color .3s,box-shadow .3s}
.slot-reel-wrap.center .slot-highlight{border-color:rgba(99,102,241,.6)}
.slot-sep{width:1px;background:rgba(255,255,255,.06);height:100px}
.slot-lights{display:flex;gap:clamp(5px,1.1vw,11px);justify-content:center;flex-wrap:nowrap;max-width:100%}
.slot-light{width:clamp(8px,1.3vw,14px);height:clamp(8px,1.3vw,14px);border-radius:50%;background:var(--accent-hover);
  opacity:.28;transition:opacity .12s,box-shadow .12s,background-color .12s;flex-shrink:0}
.slot-light.on{opacity:1;background:var(--dark-accent);box-shadow:0 0 10px var(--dark-accent),0 0 20px rgba(255,107,107,.6)}
.slot-light.win{opacity:1;background:var(--warning-border);box-shadow:0 0 12px var(--medal-gold-light),0 0 26px rgba(251,191,36,.7)}
.slot-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti-bit{position:absolute;width:8px;height:12px;opacity:0;will-change:transform,opacity}
@keyframes confettiFall{
  0%{opacity:1;transform:translate3d(0,-10px,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx,0),320px,0) rotate(540deg)}
}

/* ══════════ SEAT-BASED VIEWS ══════════ */
.seat-stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:8px;position:relative}
.sweep-opt{position:absolute;top:6px;right:10px;z-index:4;display:flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:5px 12px;
  font-size:12px;font-weight:600;color:var(--text2);user-select:none;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
.sweep-opt:hover{border-color:var(--accent);color:var(--accent)}
.sweep-opt input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.sweep-opt:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seat-clue{font-family:var(--font-display);font-size:clamp(20px,4.5vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--text);text-align:center;min-height:0;transition:opacity .3s}
.seat-room{position:relative;flex:1;width:100%;transition:filter .4s}
.seat-room.dimmed{filter:brightness(.42) saturate(.6)}
.seat{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:10px;background:var(--surface);border:2px solid var(--border);
  font-family:var(--font-display);font-weight:700;color:var(--text);
  padding:2px;overflow:hidden;line-height:1.05;
  transition:transform .12s,box-shadow .12s,opacity .3s,background-color .3s,border-color .3s}
.seat.empty{background:var(--surface2);border-style:dashed;opacity:.35}
.seat.done{opacity:.4;background:var(--surface2);color:var(--text3)}
.seat.out{opacity:.18;transform:scale(.94)}
.seat.lit{background:var(--accent-tint-strong);border-color:var(--accent)}
.seat.active{background:var(--accent);border-color:var(--accent-hover);color:var(--on-accent);transform:scale(1.1);box-shadow:var(--shadow-md);z-index:5}
.seat.chosen{background:var(--success);border-color:var(--success-text);color:var(--on-accent);z-index:6;animation:seatPulse 1s ease-out infinite}
@keyframes seatPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.55),0 6px 22px rgba(22,163,74,.4)}
  50%{box-shadow:0 0 0 16px rgba(22,163,74,0),0 6px 22px rgba(22,163,74,.4)}
}
.seat-link{position:absolute;height:4px;background:var(--success);border-radius:2px;transform-origin:0 50%;z-index:4;box-shadow:0 0 12px rgba(22,163,74,.7)}
.seat-msg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px 24px}
.seat-msg-icon{color:var(--text3)}.seat-msg-icon .k-icon{width:38px;height:38px}
.seat-msg h3{font-family:var(--font-display);font-size:17px;font-weight:800}
.seat-msg p{font-size:13px;color:var(--text2);max-width:320px;line-height:1.6}

/* ══════════ ROCKET ══════════ */
#view-rocket{background:linear-gradient(180deg,var(--dark-bg) 0%,var(--dark-surface) 60%,var(--dark-surface-2) 100%)}
.rocket-stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:14px;position:relative;overflow:hidden}
.rocket-count{position:absolute;top:8%;left:0;right:0;text-align:center;font-family:var(--font-display);
  font-size:clamp(50px,14vw,140px);font-weight:800;color:var(--on-accent);opacity:0;text-shadow:0 0 40px rgba(96,165,250,.7);pointer-events:none}
.rocket-count.tick{animation:countPop .85s ease-out}
@keyframes countPop{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.rocket-pad{overflow:visible;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1.4vw,16px);flex-wrap:nowrap;width:100%;padding-bottom:6px}
.rocket{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 1 auto;min-width:0;will-change:transform,opacity}
.rocket-body{width:clamp(22px,3.4vw,40px);height:clamp(40px,6vw,66px);background:linear-gradient(180deg,var(--border),var(--text-faint));
  border-radius:50% 50% 18% 18%/60% 60% 14% 14%;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.rocket-body::before{content:'';position:absolute;top:26%;left:50%;transform:translateX(-50%);width:44%;height:22%;border-radius:50%;background:var(--accent-tint-strong);box-shadow:inset 0 0 4px rgba(0,0,0,.3)}
.rocket-flame{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:60%;height:0;
  background:linear-gradient(180deg,var(--warning-border),var(--medal-gold-light) 40%,var(--danger));border-radius:0 0 60% 60%;
  transition:height .12s;filter:blur(.4px)}
.rocket-name{font-family:var(--font-display);font-size:clamp(9px,1.5vw,13px);font-weight:700;color:var(--text-faint);
  max-width:clamp(46px,8vw,90px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.rocket-thrust{width:clamp(22px,3.4vw,40px);height:5px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
.rocket-thrust span{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--success),var(--medal-gold-light));transition:width .1s}
.rocket.shaking{animation:rocketShake .09s linear infinite}
@keyframes rocketShake{0%,100%{transform:translate3d(-1.5px,0,0)}50%{transform:translate3d(1.5px,0,0)}}
.rocket.launch{z-index:9}
.rocket-trail{position:absolute;left:50%;top:104%;width:9px;height:0;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(253,224,71,.95),rgba(239,68,68,.55),rgba(239,68,68,0));
  border-radius:0 0 8px 8px;pointer-events:none;filter:blur(1px)}
.rocket.fizzle{transition:opacity .7s,transform .7s;opacity:.25;transform:translate3d(0,6px,0)}
/* Launch effects */
.rocket-smoke{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,255,255,.6),rgba(203,213,225,.3) 52%,rgba(148,163,184,0) 72%);
  filter:blur(4px);opacity:0}
.rocket-streak{position:absolute;width:2px;border-radius:2px;pointer-events:none;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(191,219,254,.75),rgba(255,255,255,0));opacity:0}
.rocket-stage.shake{animation:stageShake .1s linear infinite}
@keyframes stageShake{0%{transform:translate3d(-2px,1px,0)}50%{transform:translate3d(2px,-1px,0)}100%{transform:translate3d(-1px,0,0)}}
@media (prefers-reduced-motion: reduce){ .rocket-stage.shake{animation:none} }
.rocket-ground{width:100%;height:5px;background:linear-gradient(90deg,transparent,var(--text-muted),transparent);flex-shrink:0}

/* ══════════ SHARED RESULT LAYER ══════════ */
.result-layer{position:absolute;left:0;right:0;bottom:0;z-index:30;display:none;flex-direction:column;align-items:center;
  gap:10px;padding:16px 16px 20px;pointer-events:none}
.result-layer.show{display:flex}
.result-banner{pointer-events:none;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,6vw,60px);line-height:1.1;text-align:center;color:var(--on-accent);background:rgba(15,23,42,.9);
  border-radius:16px;padding:10px 26px;box-shadow:0 10px 40px rgba(0,0,0,.35);max-width:94%;
  animation:bannerIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes bannerIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.94)}to{opacity:1;transform:none}}
.result-banner .rb-sub{display:block;font-family:var(--font-body);font-size:12px;font-weight:400;
  letter-spacing:.08em;opacity:.65;margin-top:4px}
.award-bar{pointer-events:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 10px;
  box-shadow:0 8px 28px rgba(20,35,80,.25)}
.award-bar:empty{display:none}
.award-label{font-family:var(--font-body);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);padding:0 4px}
.award-btn{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  padding:8px 14px;font-family:var(--font-display);font-size:14px;font-weight:700;
  color:var(--text);cursor:pointer;transition:all .15s}
.award-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.award-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.award-btn.primary:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.award-btn:disabled{opacity:.45;cursor:default;transform:none}
.award-done{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--success);padding:8px 10px}
.award-err{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--danger-text);padding:0 6px}

/* ── OPTIONS MODAL ── */
.np-absent-list{display:flex;flex-wrap:wrap;gap:8px;max-height:50vh;overflow:auto;padding:4px 0 8px}
.np-absent-chip{min-height:var(--tap);padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.np-absent-chip[aria-pressed="true"]{background:var(--surface-neutral);color:var(--text-faint);text-decoration:line-through;border-style:dashed}
.opt-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer;font-size:13px;color:var(--text)}
.opt-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.opt-row em{font-style:normal;font-size:12px;color:var(--text2)}

/* ── EMPTY STATES ── */
.np-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;text-align:center}
.np-empty-icon{font-size:36px}
.np-empty h3{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text)}
.np-empty p{font-size:13px;color:var(--text2);line-height:1.6;max-width:280px}

/* ── REDUCED MOTION ──
   Shorten, don't remove. The celebration is the point of these views, so the
   confetti and the launch shake still happen — just briefly, and the shake
   with a smaller throw so it reads as a rumble rather than a judder. */
@media (prefers-reduced-motion: reduce){
  .seat,.rocket,.slot-reel,.result-banner{transition-duration:.12s!important}
  .seat.chosen{animation-duration:.6s}
  .slot-machine.jackpot{animation-duration:.45s}
  .rocket.shaking{animation:rocketShakeSoft .16s linear infinite}
  .result-banner{animation-duration:.15s}
}
@keyframes rocketShakeSoft{0%,100%{transform:translate3d(-.5px,0,0)}50%{transform:translate3d(.5px,0,0)}}