:root {
  --bg: #05060a;
  --ink: #f4efe4;
  --muted: #9a9386;
  --green: #2fce6a;
  --green-deep: #0d5c2a;
  --asphalt: #e11d2e;
  --asphalt-deep: #7a0c16;
  --gold: #ffe27a;
  --pink: #ff4d8d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  overflow-x: hidden;
}

body.is-gacha {
  overflow: hidden;
  touch-action: none;
}

.aurora {
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(47, 206, 106, 0.16), transparent 45%),
    radial-gradient(ellipse at 80% 0%, rgba(225, 29, 46, 0.16), transparent 40%);
  pointer-events: none;
}

.stage {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.title { text-align: center; }
.kicker {
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--gold);
  margin: 0 0 8px;
}
h1 {
  margin: 0;
  font-size: clamp(28px, 7vw, 44px);
}
.slash { color: var(--gold); margin: 0 0.15em; }
.lead { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

.machine {
  margin-top: 24px;
  padding: 22px 18px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, #161821, #0c0d12 70%);
  box-shadow: 0 0 0 1px rgba(255, 226, 122, 0.18), 0 30px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.machine.is-drawing { animation: machine-shake 0.08s linear infinite; }

@keyframes machine-shake {
  25% { transform: translate(-3px, 2px) rotate(-0.5deg); }
  75% { transform: translate(3px, -2px) rotate(0.5deg); }
}

.lamp-row {
  display: flex;
  justify-content: space-between;
  margin: 0 8px 16px;
}
.lamp-row span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a2418;
}
.machine.is-drawing .lamp-row span {
  animation: lamp 0.28s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.04s);
}
.lamp-row span:nth-child(n) { --i: 0; }
.lamp-row span:nth-child(2) { --i: 1; }
.lamp-row span:nth-child(3) { --i: 2; }
.lamp-row span:nth-child(4) { --i: 3; }
.lamp-row span:nth-child(5) { --i: 4; }
.lamp-row span:nth-child(6) { --i: 5; }
.lamp-row span:nth-child(7) { --i: 6; }
.lamp-row span:nth-child(8) { --i: 7; }
@keyframes lamp {
  50% { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
}

.drum {
  width: min(260px, 70vw);
  height: min(260px, 70vw);
  margin: 0 auto;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #1b1d24 0 12deg, #101218 12deg 24deg);
  padding: 16px;
  box-shadow: inset 0 0 0 8px #2c2416;
}
.machine.is-drawing .drum { animation: spin 0.35s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.drum-glass {
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.16), transparent 36%), #0a0b10;
  position: relative;
}
.swirl { position: absolute; inset: 0; }
.orb { position: absolute; border-radius: 50%; }
.orb.green { background: radial-gradient(circle at 30% 28%, #8dffb2, var(--green) 42%, var(--green-deep)); }
.orb.asphalt { background: radial-gradient(circle at 30% 28%, #ff8a90, var(--asphalt) 42%, var(--asphalt-deep)); }

.chute {
  width: 54px;
  height: 28px;
  margin: -6px auto 0;
  background: linear-gradient(#3a3326, #1a160f);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.status {
  min-height: 1.5em;
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 13px;
  margin: 16px 0 0;
}
.result {
  min-height: 1.3em;
  margin: 8px 0 18px;
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.result.green { color: var(--green); text-shadow: 0 0 28px rgba(47, 206, 106, 0.55); }
.result.asphalt { color: #ff4d5a; text-shadow: 0 0 28px rgba(225, 29, 46, 0.55); }

.lever {
  appearance: none;
  border: 0;
  cursor: pointer;
  color: #1a1208;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.28em;
  padding: 18px 42px;
  border-radius: 999px;
  background: linear-gradient(#fff1b0, var(--gold) 40%, #c4921f);
  box-shadow: 0 10px 0 #6d4e0c, 0 16px 28px rgba(0,0,0,0.35);
}
.lever:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 4px 0 #6d4e0c; }
.lever:disabled { cursor: wait; filter: saturate(0.35); }

.board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 22px;
}
.stat {
  padding: 14px 12px;
  border-radius: 16px;
  background: #12141b;
  text-align: center;
}
.stat-label { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.stat strong { font-size: 28px; }
.stat.green strong { color: var(--green); }
.stat.asphalt strong { color: #ff4d5a; }
.stat.mix { min-width: 120px; }

.history-block { margin-top: 28px; }
.history-head { display: flex; justify-content: space-between; align-items: center; }
h2 { font-size: 14px; letter-spacing: 0.12em; margin: 0; color: var(--muted); }
.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid #2a2d36;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.history {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 0;
  margin: 0;
}
.history li { width: 22px; height: 22px; border-radius: 50%; }
.history .green { background: radial-gradient(circle at 30% 30%, #8dffb2, var(--green-deep)); }
.history .asphalt { background: radial-gradient(circle at 30% 30%, #ff8a90, var(--asphalt-deep)); }

/* —— fullscreen gacha —— */
.fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #000;
}
.fx[hidden] { display: none; }
.fx-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 20%, #000 78%);
  z-index: 2;
  pointer-events: none;
}

.speedlines {
  position: absolute;
  inset: -20%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(255,255,255,0.07) 7deg 8deg);
  opacity: 0;
  z-index: 1;
}
.fx.is-rush .speedlines {
  opacity: 1;
  animation: rush 0.18s linear infinite;
}
@keyframes rush { to { transform: rotate(18deg) scale(1.15); } }

#fxCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.rays {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,122,0.0) 0 9deg, rgba(255,226,122,0.18) 9deg 11deg);
  opacity: 0;
  z-index: 2;
}
.fx.is-burst .rays {
  opacity: 1;
  animation: rays 8s linear infinite;
}
.fx.is-burst.green .rays {
  background: repeating-conic-gradient(from 0deg, rgba(47,206,106,0) 0 9deg, rgba(47,206,106,0.28) 9deg 11deg);
}
@keyframes rays { to { transform: rotate(360deg); } }

.rings {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  z-index: 4;
  pointer-events: none;
}
.ring {
  position: absolute;
  inset: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: shock 0.7s ease-out forwards;
}
.fx.green .ring { border-color: #7dffab; }
@keyframes shock {
  to { transform: scale(18); opacity: 0; }
}

.mystery {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 168px;
  height: 168px;
  margin: -84px 0 0 -84px;
  z-index: 6;
  transform: scale(0);
}
.fx.is-spin .mystery { animation: appear 0.35s cubic-bezier(0.2, 1.4, 0.3, 1) forwards, wobble 0.12s linear infinite; }
.fx.is-max .mystery { animation: hyper 0.08s linear infinite; }
.fx.is-float .mystery { animation: float 1.1s ease-in-out infinite; }
.fx.is-open .mystery { animation: none; transform: scale(1); }

@keyframes appear { to { transform: scale(1); } }
@keyframes wobble {
  50% { transform: scale(1.04) rotate(8deg); }
}
@keyframes hyper {
  50% { transform: scale(1.2) rotate(-16deg); filter: saturate(2) contrast(1.4); }
}
@keyframes float {
  50% { transform: scale(1.08) translateY(-10px); }
}

.shell {
  position: absolute;
  left: 8%;
  width: 84%;
  height: 46%;
  background:
    linear-gradient(180deg, #fff6c8, #f0c14b 40%, #9a6a12);
  box-shadow: inset 0 10px 18px rgba(255,255,255,0.45), 0 10px 24px rgba(0,0,0,0.4);
}
.shell.top {
  top: 6%;
  border-radius: 90px 90px 18px 18px;
}
.shell.bot {
  bottom: 6%;
  border-radius: 18px 18px 90px 90px;
}
.fx.is-open .shell.top { animation: lid-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.fx.is-open .shell.bot { animation: lid-dn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes lid-up { to { transform: translate(-40px, -90px) rotate(-28deg); opacity: 0.2; } }
@keyframes lid-dn { to { transform: translate(40px, 90px) rotate(24deg); opacity: 0.2; } }

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff, #cfcfcf 40%, #666);
  opacity: 0;
  transform: scale(0.2);
}
.fx.is-open .core { animation: core-pop 0.5s cubic-bezier(0.15, 1.5, 0.3, 1) forwards; }
.core.green {
  background: radial-gradient(circle at 32% 28%, #e8ffe8, var(--green) 40%, var(--green-deep));
  box-shadow: 0 0 40px #2fce6a, 0 0 90px #2fce6a;
}
.core.asphalt {
  background: radial-gradient(circle at 32% 28%, #ffd0d4, var(--asphalt) 40%, var(--asphalt-deep));
  box-shadow: 0 0 40px #e11d2e, 0 0 90px #e11d2e;
}
@keyframes core-pop {
  0% { opacity: 0; transform: scale(0.1); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

.cutin, .slam {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  z-index: 8;
  pointer-events: none;
  font-weight: 900;
}
.cutin {
  top: 14%;
  font-size: clamp(42px, 14vw, 92px);
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 0 20px var(--pink), 4px 0 #00f6ff, -4px 0 var(--pink);
  transform: scale(0);
}
.cutin.show { animation: cutin 0.55s cubic-bezier(0.2, 1.6, 0.3, 1) forwards; }
@keyframes cutin {
  0% { transform: scale(3) translateX(-40px); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.slam {
  bottom: 16%;
  font-size: clamp(48px, 16vw, 108px);
  letter-spacing: 0.08em;
  opacity: 0;
}
.slam.green { color: #7dffab; text-shadow: 0 0 30px #2fce6a, 0 8px 0 #063; }
.slam.asphalt { color: #ff6b75; text-shadow: 0 0 30px #e11d2e, 0 8px 0 #5a0a10; }
.slam.show { animation: slam 0.7s cubic-bezier(0.15, 1.5, 0.2, 1) forwards; }
@keyframes slam {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.fx.is-white {
  background: #fff;
}
.fx.is-white .mystery,
.fx.is-white .cutin,
.fx.is-white .speedlines { visibility: hidden; }

body.is-gacha .stage { filter: blur(8px) brightness(0.35); }

.fx-note {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
}
.fx-badge {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  text-align: center;
  z-index: 9;
  margin: 0;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-size: 12px;
}

.slot {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(86vw, 420px);
  height: 120px;
  margin-left: calc(min(86vw, 420px) / -2);
  overflow: hidden;
  border: 4px solid var(--gold);
  border-radius: 16px;
  background: #111;
  z-index: 6;
}
.reel {
  display: flex;
  flex-direction: column;
  animation: reel 0.12s linear infinite;
}
.reel span {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
}
.reel .g { color: #7dffab; }
.reel .a { color: #ff5a64; }
@keyframes reel { to { transform: translateY(-240px); } }
.slot.is-stop .reel { animation: none; }

.cards {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  z-index: 6;
}
.card {
  width: 140px;
  height: 200px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  background: #222;
  border: 3px solid #666;
  transform: rotateY(0);
}
.card.pick {
  animation: card-pick 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
}
.card.left.pick { background: #124; color: #7dffab; box-shadow: 0 0 40px #2fce6a; }
.card.right.pick { background: #3a080c; color: #ff6b75; box-shadow: 0 0 40px #e11d2e; }
@keyframes card-pick {
  0% { transform: rotateY(90deg) scale(0.6); }
  100% { transform: rotateY(0) scale(1.12); }
}

.stamp {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) scale(6) rotate(-18deg);
  padding: 12px 28px;
  border: 10px solid #c00;
  color: #c00;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0.2em;
  opacity: 0;
  z-index: 7;
}
.stamp.go { animation: stamp 0.35s cubic-bezier(0.2, 1.6, 0.2, 1) forwards; }
.stamp.green { color: #0a7; border-color: #0a7; }
@keyframes stamp {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
}

.scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, #0ff, #fff, #0ff, transparent);
  box-shadow: 0 0 24px #0ff;
  z-index: 5;
  top: 0;
}
.scan.go { animation: scan 2.2s linear forwards; }
@keyframes scan { to { top: 100%; } }

.meteor {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 30px #ff9, -40px 8px 40px #f70;
  z-index: 6;
  left: -10%;
  top: 8%;
}
.meteor.go { animation: meteor 0.95s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes meteor {
  to { transform: translate(70vw, 42vh) scale(2.4); }
}

.crack {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 48%, #fff 48.5%, transparent 49%),
    linear-gradient(80deg, transparent 52%, #fff 52.4%, transparent 53%),
    linear-gradient(20deg, transparent 40%, #fff 40.5%, transparent 41%);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.crack.go { animation: crack 0.4s ease-out forwards; }
@keyframes crack { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.15; } }

.fx.is-vortex .speedlines {
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(255,226,122,0.18) 18px 20px);
}
.fx.is-jackpot { background: #2a1a00; }
.fx.is-eclipse { background: #020308; }
.fx.is-ripple .rays {
  background: repeating-radial-gradient(circle at 50% 46%, transparent 0 28px, rgba(47,206,106,0.25) 28px 32px);
}
.fx.is-zoom .mystery { animation: zoom-punch 0.7s cubic-bezier(0.15, 1.6, 0.2, 1) forwards; }
@keyframes zoom-punch {
  0% { transform: scale(0.05); filter: blur(12px); }
  100% { transform: scale(1.15); filter: blur(0); }
}

.slot[hidden],
.cards[hidden],
.stamp[hidden],
.scan[hidden],
.meteor[hidden],
.crack[hidden],
.mystery[hidden] { display: none !important; }

body.is-quake .fx {
  animation: quake 0.08s linear infinite;
}
@keyframes quake {
  25% { transform: translate(-8px, 4px); }
  75% { transform: translate(8px, -5px); }
}

.holds {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}
.holds span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1c22;
  box-shadow: inset 0 0 0 2px #2a2d36;
}
.holds .blue { background: radial-gradient(circle at 30% 30%, #cfe8ff, #1a6cff); box-shadow: 0 0 12px #1a6cff; }
.holds .green { background: radial-gradient(circle at 30% 30%, #c6ffd8, #12c45a); box-shadow: 0 0 12px #12c45a; }
.holds .red { background: radial-gradient(circle at 30% 30%, #ffd0d0, #ff2a2a); box-shadow: 0 0 14px #ff2a2a; }
.holds .gold { background: radial-gradient(circle at 30% 30%, #fff6c8, #f0c14b); box-shadow: 0 0 16px #ffe27a; }
.holds .rainbow {
  background: conic-gradient(#ff2a2a, #ffe27a, #2fce6a, #1a6cff, #ff4d8d, #ff2a2a);
  box-shadow: 0 0 18px #ffe27a;
  animation: hold-spin 0.35s linear infinite;
}
@keyframes hold-spin { to { transform: rotate(360deg); } }

.heat-track {
  height: 8px;
  margin: 0 18px 8px;
  border-radius: 999px;
  background: #16181f;
  overflow: hidden;
}
.heat-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a6cff, #12c45a, #ffe27a, #ff2a2a);
  transition: width 0.28s ease;
}
.heat-label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.digits {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  z-index: 6;
}
.digits .cell {
  width: 86px;
  height: 110px;
  border-radius: 12px;
  background: #14151a;
  border: 3px solid #ffe27a;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 226, 122, 0.35);
}
.digits .cell.g { color: #7dffab; }
.digits .cell.a { color: #ff5a64; }
.digits .cell.spin {
  animation: digit-spin 0.08s linear infinite;
  background: repeating-linear-gradient(180deg, #222 0 18px, #111 18px 36px);
}
@keyframes digit-spin {
  to { background-position: 0 36px; }
}

.pulse {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 6px solid #ff2a2a;
  border-radius: 50%;
  z-index: 4;
  animation: pulse 0.42s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.blackout {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 12;
}
.ribbon {
  position: absolute;
  top: 28%;
  left: -10%;
  right: -10%;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  z-index: 9;
  font-size: clamp(28px, 9vw, 56px);
  font-weight: 900;
  letter-spacing: 0.28em;
  color: #1a0800;
  background: linear-gradient(90deg, #ff2a2a, #ffe27a, #ff2a2a);
  transform: rotate(-8deg) scale(0);
}
.ribbon.go { animation: ribbon 0.45s cubic-bezier(0.2, 1.5, 0.2, 1) forwards; }
@keyframes ribbon {
  to { transform: rotate(-8deg) scale(1); }
}

.fx.is-silence { background: #000; }
.fx.is-silence .mystery,
.fx.is-silence .speedlines,
.fx.is-silence .cutin { visibility: hidden; }
.fx.is-gold { background: #3a2800; }
.fx.is-sp { animation: sp-chroma 0.08s steps(2) infinite; }
@keyframes sp-chroma {
  50% { filter: saturate(1.6) contrast(1.15) hue-rotate(12deg); }
}
.fx.is-kakutei .cutin {
  color: #ffe27a;
  text-shadow: 0 0 24px #ff2a2a, 6px 0 #fff, -6px 0 #00f6ff;
}

.digits[hidden],
.pulse[hidden],
.blackout[hidden],
.ribbon[hidden],
.crowd[hidden],
.secret[hidden],
.noise[hidden],
.freeze-ice[hidden],
.voice-line[hidden] { display: none !important; }

.crowd {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.crowd .mob {
  position: absolute;
  bottom: -20px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: mob-run 1.8s linear forwards;
}
.crowd .mob.g { background: radial-gradient(circle at 30% 30%, #c6ffd8, #12c45a); }
.crowd .mob.a { background: radial-gradient(circle at 30% 30%, #ff8a90, #e11d2e); }
@keyframes mob-run {
  to { transform: translateY(-120vh) scale(1.4); opacity: 0.2; }
}

.secret {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 7;
  text-align: center;
}
.secret.go { animation: secret-in 0.55s cubic-bezier(0.2, 1.5, 0.2, 1) forwards; }
.secret p {
  margin: 10px 0 0;
  letter-spacing: 0.4em;
  color: #ffe27a;
  font-weight: 900;
}
.secret-fig {
  width: 92px;
  height: 118px;
  margin: 0 auto;
  background: #0b0b0d;
  border-radius: 46px 46px 20px 20px;
  position: relative;
  box-shadow: 0 0 40px #ff2a2a, 0 0 80px #ffe27a;
}
.secret-fig::before,
.secret-fig::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 22px;
  height: 28px;
  background: #0b0b0d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.secret-fig::before { left: 10px; }
.secret-fig::after { right: 10px; }
.secret-fig span,
.secret .eyes {
  display: none;
}
.secret-fig {
  background-image:
    radial-gradient(circle at 32% 42%, #ff2a2a 0 5px, transparent 6px),
    radial-gradient(circle at 68% 42%, #ffe27a 0 5px, transparent 6px);
}
@keyframes secret-in {
  to { transform: translate(-50%, -50%) scale(1); }
}

.noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0.55;
  pointer-events: none;
  image-rendering: pixelated;
}

.freeze-ice {
  position: absolute;
  inset: 0;
  z-index: 11;
  background:
    linear-gradient(180deg, rgba(190, 230, 255, 0.18), transparent 40%, rgba(190, 230, 255, 0.2)),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 19px);
  pointer-events: none;
}

.voice-line {
  position: absolute;
  bottom: 22%;
  left: 8%;
  right: 8%;
  z-index: 9;
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 6vw, 36px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 16px #ff2a2a, 3px 0 #00f6ff;
}

.fx.is-freeze { filter: grayscale(0.25) contrast(1.25) brightness(1.15); }
.fx.is-freeze .mystery,
.fx.is-freeze .digits,
.fx.is-freeze .speedlines { animation-play-state: paused !important; }
.fx.is-rewind { animation: rewind-hue 0.35s linear; }
@keyframes rewind-hue {
  50% { filter: hue-rotate(-80deg) saturate(1.4); }
}
.fx.is-rainbow {
  animation: rainbow 0.35s linear infinite;
}
@keyframes rainbow {
  to { filter: hue-rotate(360deg) saturate(1.5); }
}
.fx.is-gold-all {
  background: #3a2800;
}
.fx.is-gold-all .cutin { color: #ffe27a; }
.fx.is-iwakan .cutin { transform: translate(18px, -8px) rotate(7deg); }
.fx.is-iwakan .digits { left: 46%; top: 48%; }