.bsp-wrap {
  --bsp-ink: #07111f;
  --bsp-sea: #073b63;
  --bsp-foam: #bff7ff;
  --bsp-pink: #ff3fa7;
  --bsp-gold: #ffe15a;
  --bsp-red: #ff4d5e;
  --bsp-green: #69ff8f;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(191,247,255,.65);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,63,167,.28), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(255,225,90,.2), transparent 28%),
    linear-gradient(180deg, #0a2342 0%, #0b4f73 52%, #06223d 100%);
  box-shadow: 0 0 32px rgba(0,195,255,.18), inset 0 0 52px rgba(191,247,255,.1);
  min-height: 720px;
  color: #f4fbff;
  touch-action: manipulation;
}
.ac-cab-title-art.bsp-card-art { width: 70px; height: 58px; }
.ac-cab-title-art.bsp-card-art .stack { position: absolute; left: 28px; bottom: 3px; width: 20px; height: 48px; border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg,#22303d,#e5f9ff 48%,#3c4b57); border: 2px solid rgba(7,17,31,.8); }
.ac-cab-title-art.bsp-card-art .stack::before { content: ""; position: absolute; left: -5px; right: -5px; top: -6px; height: 12px; border-radius: 999px; background: #d8fbff; border: 2px solid rgba(7,17,31,.8); }
.ac-cab-title-art.bsp-card-art .bubble { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: radial-gradient(circle at 32% 26%, #fff, #9bf4ff 34%, #19abd6 70%); box-shadow: 0 0 12px rgba(73,217,255,.72); }
.ac-cab-title-art.bsp-card-art .b1 { width: 18px; height: 18px; left: 15px; top: 12px; }
.ac-cab-title-art.bsp-card-art .b2 { width: 24px; height: 24px; right: 8px; top: 3px; background: radial-gradient(circle at 32% 26%, #fff, #ffe15a 36%, #ff9a26 72%); box-shadow: 0 0 13px rgba(255,225,90,.82); }
.ac-cab-title-art.bsp-card-art .b3 { width: 16px; height: 16px; right: 22px; top: 30px; background: radial-gradient(circle at 32% 26%, #fff, #ff91a0 34%, #ff3448 72%); box-shadow: 0 0 12px rgba(255,77,94,.74); }
.bsp-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, transparent 0 36%, rgba(255,255,255,.14) 48%, transparent 58%);
  mix-blend-mode: screen;
  opacity: .48;
}
.bsp-topper {
  position: relative;
  z-index: 4;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, rgba(3,9,20,.94), rgba(3,17,32,.62));
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bsp-bulbs { display: grid; grid-template-columns: repeat(22,1fr); gap: 5px; margin-bottom: 10px; }
.bsp-bulbs span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bsp-bulb, var(--bsp-gold));
  box-shadow: 0 0 10px var(--bsp-bulb, var(--bsp-gold));
  animation: bspBulb 1.15s ease-in-out infinite;
}
.bsp-bulbs span:nth-child(3n){ --bsp-bulb: #49d9ff; animation-delay: .12s; }
.bsp-bulbs span:nth-child(3n+1){ --bsp-bulb: #ff3fa7; animation-delay: .24s; }
.bsp-marquee { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bsp-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2.35rem, 8vw, 5rem);
  line-height: .85;
  letter-spacing: .07em;
  color: #fff7ad;
  text-shadow: 0 0 22px rgba(255,225,90,.75), 4px 4px 0 rgba(255,63,167,.55), 8px 8px 0 rgba(0,0,0,.42);
}
.bsp-tag { max-width: 350px; color: rgba(225,248,255,.78); font-size: .84rem; line-height: 1.45; text-align: right; font-style: italic; }
.bsp-hud { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 10px 12px; }
.bsp-meter { min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(2,9,20,.6); padding: 8px; box-shadow: inset 0 0 18px rgba(73,217,255,.07); }
.bsp-label { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,251,255,.58); font-weight: 900; }
.bsp-value { display: block; margin-top: 3px; font-family: 'DM Mono', monospace; color: #fff; font-size: clamp(.84rem, 2.1vw, 1.12rem); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsp-bar { height: 9px; margin-top: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.bsp-fill { height: 100%; width: var(--bsp-fill, 0%); background: linear-gradient(90deg, var(--bsp-green), var(--bsp-gold), var(--bsp-red)); transition: width .12s linear; }
.bsp-stage {
  position: relative;
  z-index: 2;
  height: min(62vh, 520px);
  min-height: 430px;
  margin: 0 12px 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(191,247,255,.22);
  background:
    linear-gradient(180deg, rgba(164,232,255,.14), transparent 52%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 52px);
}
.bsp-water { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(180deg, rgba(73,217,255,.2), rgba(5,63,94,.86)); box-shadow: inset 0 16px 24px rgba(191,247,255,.1); }
.bsp-tug { position: absolute; left: 3%; bottom: 50px; width: 178px; height: 92px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
.bsp-tug::before { content: "AWOOGA"; position: absolute; left: 10px; right: 16px; bottom: 0; height: 40px; border-radius: 28px 34px 13px 13px; background: linear-gradient(180deg,#fff6b8,#ffb13b); border: 3px solid #4b2608; color: #4b2608; font-family: 'Bangers', cursive; letter-spacing: .08em; display: flex; align-items: center; justify-content: center; }
.bsp-tug::after { content: ""; position: absolute; left: 58px; bottom: 38px; width: 64px; height: 40px; border-radius: 10px 10px 2px 2px; background: linear-gradient(180deg,#e8fbff,#77d7f0); border: 3px solid #14324a; }
.bsp-stack { position: absolute; left: 84px; bottom: 78px; width: 48px; height: 170px; border-radius: 20px 20px 8px 8px; background: linear-gradient(90deg,#343f4d,#a5b7c5 45%,#23303c); border: 3px solid #101925; box-shadow: inset 0 0 15px rgba(255,255,255,.22), 0 0 22px rgba(73,217,255,.18); }
.bsp-stack::before { content: ""; position: absolute; left: -9px; right: -9px; top: -10px; height: 22px; border-radius: 999px; background: linear-gradient(180deg,#d9edf4,#526472); border: 3px solid #101925; }
.bsp-stack.hot { animation: bspHot .34s ease-in-out infinite; }
.bsp-bubble, .bsp-warning, .bsp-gold, .bsp-clog, .bsp-clipboard {
  position: absolute;
  border: 0;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.bsp-bubble, .bsp-warning, .bsp-gold {
  width: var(--s, 46px);
  height: var(--s, 46px);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 32% 26%, #fff, #9bf4ff 28%, #18abd6 58%, rgba(24,171,214,.3) 76%);
  border: 2px solid rgba(255,255,255,.76);
  box-shadow: 0 0 18px rgba(73,217,255,.5), inset -7px -10px 12px rgba(0,60,100,.24);
  animation: bspWobble 1.15s ease-in-out infinite;
}
.bsp-gold { background: radial-gradient(circle at 32% 24%, #fff, #ffe15a 30%, #ff9a26 62%, #7d3d00 92%); box-shadow: 0 0 26px rgba(255,225,90,.8); }
.bsp-warning { background: radial-gradient(circle at 32% 24%, #fff, #ff91a0 28%, #ff3448 62%, #75101a 94%); box-shadow: 0 0 24px rgba(255,77,94,.72); }
.bsp-warning::after { content: "!"; color: #fff; font-family: 'Bangers', cursive; font-size: calc(var(--s,46px) * .72); text-shadow: 2px 2px 0 rgba(0,0,0,.42); }
.bsp-clog {
  width: 74px;
  height: 50px;
  border-radius: 41% 59% 47% 53%;
  transform: translate(-50%,-50%) rotate(var(--r, 0deg));
  background: radial-gradient(circle at 35% 25%, #b78238, #4b2f18 62%, #17100a);
  border: 2px solid rgba(255,214,129,.35);
  box-shadow: 0 0 20px rgba(255,122,0,.32);
}
.bsp-clog::after { content: "SLUDGE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: .58rem; font-weight: 900; color: #ffd681; }
.bsp-clipboard {
  width: 168px;
  min-height: 200px;
  border-radius: 8px;
  background: linear-gradient(180deg,#fff7d2,#e7d9a9);
  color: #233;
  padding: 24px 12px 12px;
  border: 3px solid #63451f;
  box-shadow: 0 18px 30px rgba(0,0,0,.35);
  transform: translate(-50%,-50%) rotate(-3deg);
}
.bsp-clipboard::before { content: ""; position: absolute; top: -11px; left: 50%; width: 70px; height: 28px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(#d6e4ea,#667986); border: 3px solid #343f4a; }
.bsp-clip-title { font-family: 'Bangers', cursive; letter-spacing: .04em; font-size: 1.35rem; line-height: 1; color: #5b1b32; }
.bsp-clip-copy { margin: 9px 0 12px; font-size: .76rem; line-height: 1.3; font-weight: 800; }
.bsp-stamp { width: 100%; border: 3px solid #126d38; color: #126d38; background: transparent; border-radius: 6px; padding: 8px; font-family: 'Bangers', cursive; font-size: 1.4rem; letter-spacing: .08em; transform: rotate(-6deg); cursor: pointer; }
.bsp-float { position: absolute; z-index: 20; color: #fff; font-family: 'Bangers', cursive; font-size: 1.35rem; text-shadow: 2px 2px 0 rgba(0,0,0,.52); pointer-events: none; animation: bspFloat .9s ease forwards; }
.bsp-overlay { position: absolute; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(2,8,18,.72); backdrop-filter: blur(5px); overflow-y: auto; overscroll-behavior: contain; }
.bsp-overlay[hidden] { display: none !important; }
#bsp-end { align-items: flex-start; }
.bsp-result-modal { position: fixed; z-index: 999999; inset: 0; align-items: center; padding: 16px; }
.bsp-card { position: relative; width: min(560px, 100%); border: 2px solid rgba(255,225,90,.65); border-radius: 8px; padding: 22px; background: linear-gradient(180deg, rgba(9,28,52,.96), rgba(5,15,29,.96)); box-shadow: 0 0 30px rgba(255,225,90,.2); text-align: center; }
#bsp-end .bsp-card { max-height: 100%; overflow-y: auto; }
.bsp-result-modal .bsp-card { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 28px 24px; }
.bsp-modal-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.1); color: #f4fbff; cursor: pointer; font-size: 1.35rem; line-height: 1; }
.bsp-modal-close:hover { background: rgba(255,77,94,.28); border-color: rgba(255,77,94,.55); }
.bsp-card-title { font-family: 'Bangers', cursive; font-size: clamp(2rem, 7vw, 4rem); line-height: .95; letter-spacing: .06em; color: #fff7ad; text-shadow: 0 0 22px rgba(255,225,90,.7), 4px 4px 0 rgba(255,63,167,.5); }
.bsp-result-modal .bsp-card-title { font-size: clamp(2rem, 8vw, 3.25rem); padding: 4px 34px 0; }
.bsp-card-copy { color: rgba(244,251,255,.78); line-height: 1.55; margin: 12px auto 18px; max-width: 440px; }
.bsp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bsp-result-modal .bsp-actions { align-items: stretch; margin-top: 18px; }
.bsp-btn { border: 0; border-radius: 8px; padding: 11px 16px; min-width: 150px; cursor: pointer; font-weight: 900; color: #06111f; background: var(--bsp-green, #69ff8f); box-shadow: 0 0 16px rgba(105,255,143,.35); }
.bsp-btn.secondary { color: #f4fbff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.bsp-status { position: relative; z-index: 4; margin: -2px 12px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(2,9,20,.58); padding: 10px 12px; color: rgba(244,251,255,.8); font-size: .86rem; }
.bsp-ticket-big { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 8px; background: rgba(255,225,90,.13); border: 1px solid rgba(255,225,90,.35); color: #fff7ad; font-weight: 900; margin: 8px 0 14px; }
.bsp-ticket-big .ac-ticket-img { width: 34px; height: 34px; object-fit: contain; }
.bsp-reward-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); text-align: left; }
.bsp-reward-line span { color: rgba(244,251,255,.62); }
.bsp-reward-line strong { color: #fff; text-align: right; }
.bsp-wrap.failure { animation: bspFailure .24s linear 8; }
@keyframes bspBulb { 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .2; transform: scale(.72); } }
@keyframes bspWobble { 0%,100%{ margin-left: -1px; } 50%{ margin-left: 2px; } }
@keyframes bspFloat { to { transform: translateY(-44px) scale(1.12); opacity: 0; } }
@keyframes bspHot { 0%,100%{ filter: drop-shadow(0 0 4px rgba(255,77,94,.3)); } 50%{ filter: drop-shadow(0 0 20px rgba(255,77,94,.9)); } }
@keyframes bspFailure { 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }
@media (max-width: 760px) {
  .bsp-wrap { min-height: 690px; }
  .bsp-marquee { display: block; }
  .bsp-tag { text-align: left; margin-top: 8px; }
  .bsp-hud { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bsp-stage { min-height: 440px; height: 56vh; }
  .bsp-tug { width: 142px; left: 0; }
  .bsp-stack { left: 82px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsp-bulbs span, .bsp-bubble, .bsp-warning, .bsp-gold, .bsp-stack.hot, .bsp-wrap.failure { animation: none; }
}