/* Cyber Androide: pannello olografico del bonus. Tela di riferimento 920x570. */
:root {
  --cb-cyan: #39f3ff;
  --cb-label: #9ffbff;
  --cb-gold: #e6c36a;
  --cb-magenta: #ff4fd8;
  --cb-text: #e9fbff;
  --cb-text2: #8fb4bd;
  --cb-title-font: Orbitron, "Segoe UI", sans-serif;
  --cb-body-font: Inter, "Segoe UI", sans-serif;
}

.cb-hud {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}
.cb-hud.on { display: grid; }
.cb-hud[hidden] { display: none !important; }
.cb-tile {
  background: rgba(4, 12, 16, .85);
  border: 1px solid rgba(57, 243, 255, .3);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s, opacity .2s;
}
.cb-tile[data-hud=symbol], .cb-tile[data-hud=spins] { opacity: 0; }
.cb-tile[data-hud=symbol].on, .cb-tile[data-hud=spins].on { opacity: 1; }
.cb-tile span { color: var(--cb-text2); font-size: .66rem; letter-spacing: .08em; display: block; }
.cb-tile b { font-family: var(--cb-title-font); font-variant-numeric: tabular-nums; color: var(--cb-text); }
.cb-tile small { color: var(--cb-magenta); font-weight: 800; letter-spacing: .08em; margin-left: 6px; }
.cb-tile img { width: 32px; height: 32px; object-fit: contain; }
.cb-tile.flash { border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .8); }
.cb-tile.last { animation: cb-last 250ms ease-in-out 2; border-color: var(--cb-magenta); }
@keyframes cb-last {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 79, 216, 0); }
  50% { box-shadow: 0 0 18px var(--cb-magenta); background: rgba(255, 79, 216, .22); }
}

.frame { transition: border-color .6s ease, box-shadow .6s ease; }
.frame.cb-magenta {
  border-color: var(--cb-magenta);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65) inset, 0 0 28px rgba(255, 79, 216, .35);
}
.bezel { transition: box-shadow .6s ease; }
.frame.cb-magenta .bezel { box-shadow: 0 0 18px rgba(255, 79, 216, .45), 0 0 34px rgba(255, 79, 216, .28); }

.cb-layer { position: absolute; z-index: 6; overflow: hidden; border-radius: 12px; pointer-events: none; }
.cb-layer[hidden] { display: none; }
.cb-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.cb-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .58); opacity: 0; transition: opacity 250ms ease; pointer-events: auto; }
.cb-veil.on { opacity: 1; }

.cb-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  border: 1.5px solid var(--cb-cyan);
  box-shadow: 0 0 18px var(--cb-cyan), 0 0 46px rgba(57, 243, 255, .45);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(57, 243, 255, .20), rgba(57, 243, 255, .07)),
    rgba(3, 22, 30, .80);
  color: var(--cb-text);
  font-family: var(--cb-body-font);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 34px 34px;
  opacity: 0;
  pointer-events: auto;
  text-shadow: 1px 0 rgba(255, 79, 216, .55), -1px 0 rgba(57, 243, 255, .55);
}
.cb-panel.on { opacity: 1; animation: cb-on 400ms ease-out, cb-flicker 3s steps(1, end) infinite 400ms; }
.cb-panel.off { opacity: 0; transition: opacity 300ms ease-in; }
@keyframes cb-on {
  0% { opacity: 0; clip-path: inset(49% 0 49% 0); }
  38% { opacity: 1; clip-path: inset(49% 0 49% 0); }
  75% { opacity: .6; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; }
}
@keyframes cb-flicker { 0%, 100% { opacity: 1; } 46% { opacity: .94; } 52% { opacity: 1; } }
.cb-scan, .cb-interference { position: absolute; inset: 0; pointer-events: none; border-radius: 5px; overflow: hidden; }
.cb-interference::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .10), transparent);
  animation: cb-band 3s linear infinite;
}
@keyframes cb-band { from { top: -40px; } to { top: 100%; } }
.cb-bracket { position: absolute; width: 22px; height: 22px; border: 3px solid var(--cb-cyan); }
.cb-bracket.cb-tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.cb-bracket.cb-tr { top: -5px; right: -5px; border-left: 0; border-bottom: 0; }
.cb-bracket.cb-bl { bottom: -5px; left: -5px; border-right: 0; border-top: 0; }
.cb-bracket.cb-br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.cb-emitter { position: absolute; left: 50%; bottom: -26px; width: 240px; height: 6px; transform: translateX(-50%); background: var(--cb-cyan); border-radius: 3px; box-shadow: 0 0 14px var(--cb-cyan); }
.cb-beam {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 240px;
  height: 24px;
  transform: translateX(-50%);
  clip-path: polygon(8% 100%, 92% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(57, 243, 255, .7), rgba(57, 243, 255, 0));
}

.cb-label { font-family: var(--cb-title-font); font-size: 12px; letter-spacing: .24em; color: var(--cb-label); }
.cb-title { margin: 0; font-family: var(--cb-title-font); font-size: 34px; letter-spacing: .06em; font-weight: 800; color: #f2feff; }
.cb-title.glitch { animation: cb-glitch 200ms steps(2, end); }
@keyframes cb-glitch {
  0% { transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); }
  50% { transform: translate(3px, 0); clip-path: inset(50% 0 10% 0); }
  100% { transform: none; clip-path: none; }
}
.cb-text { margin: 0; font-size: 17px; line-height: 1.35; color: var(--cb-text); max-width: 460px; }
.cb-icons { display: flex; gap: 14px; justify-content: center; min-height: 92px; }
.cb-icon { width: 92px; height: 92px; object-fit: contain; opacity: 0; transform: scale(.6); transition: opacity 120ms, transform 120ms; filter: drop-shadow(0 0 10px rgba(57, 243, 255, .8)); }
.cb-icon.on { opacity: 1; transform: none; }
.cb-button {
  min-width: 140px;
  min-height: 46px;
  padding: 10px 28px;
  border-radius: 10px;
  border: 1.5px solid var(--cb-gold);
  background: rgba(230, 195, 106, .14);
  color: var(--cb-gold);
  font-family: var(--cb-title-font);
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(230, 195, 106, .35);
  margin: 0;
  width: auto;
}
.cb-button:hover { background: rgba(230, 195, 106, .3); }
.cb-button[hidden] { display: none; }

.cb-special { display: flex; gap: 34px; align-items: center; justify-content: center; }
.cb-scan-reel {
  position: relative;
  width: 160px;
  height: 336px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(57, 243, 255, .5);
}
.cb-scan-strip { display: flex; flex-direction: column; height: 100%; justify-content: space-around; padding: 6px 0; }
.cb-scan-strip img { width: 104px; height: 104px; object-fit: contain; align-self: center; filter: blur(1.4px); transition: filter 120ms; }
.cb-scan-reel.locked .cb-scan-strip img { filter: none; }
.cb-scan-reel.locked .cb-scan-strip img:nth-child(2) { animation: cb-bounce 120ms ease-out; }
@keyframes cb-bounce { 0% { transform: translateY(-14px); } 100% { transform: none; } }
.cb-sight {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 112px;
  transform: translateY(-50%);
  border: 3px solid var(--cb-gold);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(230, 195, 106, .6);
}
.cb-sight::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--cb-magenta); box-shadow: 0 0 10px var(--cb-magenta); animation: cb-pulse 600ms ease-in-out infinite; }
@keyframes cb-pulse { 50% { opacity: .3; } }
.cb-panel.flash { animation: cb-gold-flash 400ms ease-out; }
@keyframes cb-gold-flash { 0% { box-shadow: 0 0 60px var(--cb-gold), 0 0 18px var(--cb-cyan); } 100% { box-shadow: 0 0 18px var(--cb-cyan), 0 0 46px rgba(57, 243, 255, .45); } }
.cb-info { display: flex; flex-direction: column; gap: 14px; align-items: center; min-width: 300px; }
.cb-name { font-family: var(--cb-title-font); font-size: 40px; font-weight: 800; color: var(--cb-gold); opacity: 0; transition: opacity 200ms; }
.cb-expand { font-size: 16px; color: var(--cb-text2); opacity: 0; transition: opacity 200ms; }
.cb-name.on, .cb-expand.on { opacity: 1; }
.cb-counter { display: flex; gap: 6px; }
.cb-counter.pulse { animation: cb-counter-pulse 300ms ease-out; }
@keyframes cb-counter-pulse { 50% { transform: scale(1.12); filter: brightness(1.5); } }
.cb-seg { width: 20px; height: 12px; border-radius: 2px; background: rgba(57, 243, 255, .15); border: 1px solid rgba(57, 243, 255, .4); }
.cb-seg.on { background: var(--cb-cyan); box-shadow: 0 0 8px var(--cb-cyan); }
.cb-number { font-family: var(--cb-title-font); font-size: 64px; font-weight: 800; color: var(--cb-cyan); min-height: 72px; }

.cb-amount { font-family: var(--cb-title-font); font-size: 56px; white-space: nowrap; font-weight: 800; color: var(--cb-gold); text-shadow: 0 0 18px rgba(230, 195, 106, .8); }
.cb-amount.pulse { animation: cb-amount-pulse 1.2s ease-in-out infinite; }
@keyframes cb-amount-pulse { 50% { text-shadow: 0 0 34px rgba(230, 195, 106, 1); } }

.cb-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 250ms ease; }
.cb-dim.on { background: rgba(0, 0, 0, .65); }
.cb-cell, .cb-column { position: absolute; border-radius: 12px; }
.cb-cell { border: 3px solid var(--cb-gold); box-shadow: 0 0 22px var(--cb-gold); background: rgba(8, 20, 24, .95); opacity: 0; display: grid; place-items: center; }
.cb-cell img { width: 78%; height: 78%; object-fit: contain; }
.cb-cell.on { opacity: 1; animation: cb-cell-pop 180ms ease-out; }
@keyframes cb-cell-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cb-cell.back, .cb-column.back { opacity: 0; transition: opacity 300ms ease; }
.cb-column { display: flex; flex-direction: column; gap: 8px; }
.cb-slot { flex: 1 1 0; border-radius: 12px; background: rgba(8, 20, 24, .95); display: grid; place-items: center; opacity: 0; }
.cb-slot img { width: 78%; height: 78%; object-fit: contain; }
.cb-slot.on { opacity: 1; animation: cb-slot-in 120ms ease-out; }
@keyframes cb-slot-in { 0% { transform: scale(.8); filter: brightness(2.4) sepia(1) hue-rotate(-20deg); } 100% { transform: none; filter: none; } }
.cb-column.done {
  border: 3px solid var(--cb-gold);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(230, 195, 106, .38), rgba(255, 79, 216, .28));
  box-shadow: 0 0 26px var(--cb-gold);
}
.cb-column.done .cb-slot { background: transparent; }
.cb-formula {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 20px);
  max-width: 880px;
  padding: 10px 18px;
  background: rgba(3, 22, 30, .92);
  border: 1.5px solid var(--cb-gold);
  border-radius: 8px;
  color: var(--cb-gold);
  font-family: var(--cb-title-font);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms, transform 500ms;
}
.cb-formula.on { opacity: 1; transform: translate(-50%, 0); }

.cb-fly {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  font-family: var(--cb-title-font);
  font-weight: 800;
  color: var(--cb-gold);
  text-shadow: 0 0 12px var(--cb-gold), 0 0 24px rgba(255, 190, 0, .8);
  transform: translate(-50%, -50%);
  transition: transform 500ms ease-in, opacity 500ms ease-in;
  pointer-events: none;
}
.cb-fly.go { transform: translate(-50%, 340%) scale(.6); opacity: 0; }
.cb-flyer { position: fixed; z-index: 60; margin: 0; pointer-events: none; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .cb-panel.on { animation: cb-fade 200ms ease-out; }
  .cb-panel.off { transition-duration: 200ms; }
  .cb-veil { transition-duration: 200ms; }
  .cb-title.glitch, .cb-scan-reel.locked .cb-scan-strip img:nth-child(2), .cb-cell.on, .cb-slot.on,
  .cb-counter.pulse, .cb-panel.flash, .cb-tile.last, .cb-amount.pulse, .cb-interference::before,
  .cb-sight::after { animation: none; }
  .cb-formula { transition-duration: 200ms; transform: translate(-50%, 0); }
  .cb-fly { transition-duration: 200ms; }
  .frame { transition-duration: .2s; }
}
@keyframes cb-fade { from { opacity: 0; } to { opacity: 1; } }

.cb-skip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(57, 243, 255, .7);
  background: rgba(4, 12, 20, .82);
  color: #e8fbff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cb-skip[hidden] { display: none; }