/* ⚔️ Purple Alien Pups Webpage Battle (web version). The board is the Boss's own art; bots cut from his trailers. */
.bt-body{background:#07040f;color:#f3efff}
.bt{max-width:1200px;margin:0 auto;padding:12px 16px 40px}
.bt-coins{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#e8d5ff;background:linear-gradient(135deg,#5b21b6,#9b5cff);
  border:2px solid #d8b4fe;border-radius:999px;padding:4px 12px;box-shadow:0 0 12px rgba(155,92,255,.6)}
.bt-coin{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8b4fe,#6d28d9);font-size:.8em}
.bt-coins.pop{animation:btpop .9s ease}
@keyframes btpop{30%{transform:scale(1.35)}}

/* the board */
.bt-board{position:relative;width:100%;aspect-ratio:2752/1536;border-radius:14px;overflow:hidden;box-shadow:0 0 30px rgba(155,92,255,.35);container-type:inline-size}
.bt-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-score{position:absolute;top:48.4%;height:5.6%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:3.2cqw}
#sc-red{left:2.4%;width:5.9%;color:#ff6b7a;background:#1a0509}
#sc-blue{left:90.4%;width:6.9%;color:#7cc4ff;background:#04111d}
.bt-good{position:absolute;top:15.5%;width:10.6%;max-height:13%;overflow:hidden;font-size:.62cqw;line-height:1.3;border-radius:6px;padding:.3cqw .5cqw;
  background:rgba(28,4,10,.9);border:1px solid #ff3b4f}
.bt-good h3{margin:0 0 .2cqw;font-size:1.05em;letter-spacing:1px;color:#ff9aa5}
.bt-good div{background:rgba(255,59,79,.15);border-radius:4px;padding:1px 4px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#good-red{left:.6%}
#good-blue{left:88.8%;background:rgba(4,14,28,.9);border-color:#2fa8ff}#good-blue h3{color:#7cc4ff}#good-blue div{background:rgba(47,168,255,.15)}
.bt-piece{position:absolute;width:2.9%;aspect-ratio:.8;transform:translate(-50%,-62%);transition:left 1.4s cubic-bezier(.4,.1,.2,1),top 1.4s cubic-bezier(.4,.1,.2,1);z-index:2}
.bt-piece img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}
.bt-piece.lead img{filter:drop-shadow(0 0 5px #ffd23f)}
.bt-piece .crown{position:absolute;left:50%;top:-26%;transform:translateX(-50%);font-size:1cqw}
.bt-bubble{position:absolute;bottom:105%;left:50%;transform:translateX(-50%);background:#fff;color:#1a1033;border-radius:8px;padding:.25cqw .5cqw;
  font-size:.75cqw;line-height:1.25;width:max-content;max-width:12cqw;opacity:0;transition:opacity .3s;pointer-events:none;z-index:5}
.bt-bubble.on{opacity:1}
.bt-boom{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.3);font-weight:900;font-size:5cqw;color:#ffd23f;
  text-shadow:0 0 18px #ff4fd8,0 4px 0 #6d28d9;opacity:0;z-index:6;pointer-events:none;white-space:nowrap}
.bt-boom.go{animation:btboom 1.8s ease forwards}
@keyframes btboom{20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}35%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.bt-conf{position:absolute;width:.7cqw;height:1.1cqw;top:-3%;z-index:7;pointer-events:none;animation:btfall linear forwards}
@keyframes btfall{to{transform:translateY(110cqw) rotate(720deg)}}
.bt-final{position:absolute;inset:0;background:rgba(5,3,12,.84);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;z-index:8;text-align:center}
.bt-final[hidden]{display:none}
.bt-final h2{margin:0;font-size:4.2cqw;color:#ffd23f;text-shadow:0 0 18px #ff4fd8}
.bt-final video{width:52%;border-radius:12px;box-shadow:0 0 30px rgba(255,210,63,.5)}
.bt-final p{margin:0;font-size:1.8cqw;font-weight:800}

/* the steps */
.bt-card{background:linear-gradient(180deg,#140b2e,#0b0620);border:1px solid #3b2a6e;border-radius:14px;padding:16px 18px;margin-top:14px}
.bt-card[hidden]{display:none}
.bt-card h1{margin:0 0 6px;font-size:clamp(22px,4vw,40px);color:#d8b4fe;letter-spacing:1px;text-shadow:0 0 14px #9b5cff}
.bt-card h1 span{color:#39ff9a;text-shadow:0 0 14px #39ff9a}
.bt-card h2{margin:6px 0 8px;font-size:clamp(18px,2.6vw,26px);color:#ffd23f}
.bt-lead{font-size:1.05rem;line-height:1.5}
.red{color:#ff6b7a}.blue{color:#7cc4ff}
.bt-small{font-size:.9rem;color:#c4b5fd;line-height:1.45}
.bt-small a{color:#7cc4ff}
.bt-nick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1.3rem}
.bt-nick b{color:#ff9aa5;text-shadow:0 0 10px rgba(255,59,79,.6)}
.bt-dare{background:#2a1a00;border:1px solid #ffd23f;border-radius:10px;padding:8px 12px;color:#ffe9a0;font-weight:700}
.bt-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bt-secs button{font:inherit;font-weight:700;color:#fff;background:#1d1240;border:2px solid #5b3fa8;border-radius:12px;padding:12px 10px;cursor:pointer;text-align:left}
.bt-secs button:hover,.bt-secs button:focus-visible{border-color:#ffd23f;background:#2a1a5c}
.bt-secs button span{display:block;font-size:1.6rem}
.bt textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;background:#05030c;color:#fff;border:2px solid #5b3fa8;border-radius:10px;padding:10px}
.bt textarea:focus{outline:none;border-color:#ffd23f}
.bt-count{margin:2px 0 0;text-align:right;font-size:.8rem;color:#a78bfa}
.bt-err{color:#ff8a96;font-weight:700;min-height:1em}
.bt-btns{display:flex;flex-wrap:wrap;gap:10px}
.btn-ghost{background:transparent!important;border:2px solid #9b5cff!important;color:#e8d5ff!important}
.bt-code{background:#1a0f3a;border:2px dashed #d8b4fe;border-radius:10px;padding:10px 12px;font-size:1.05rem}
.bt-code b{font-size:1.4rem;letter-spacing:2px;color:#ffd23f}
.bt-walls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.bt-top{margin:0;padding-left:1.6em}.bt-top li{padding:3px 0}.bt-top b{color:#ffd23f}
.bt-wall{margin:0;padding:0;list-style:none}.bt-wall li{background:#1a0f3a;border-left:4px solid #39ff9a;border-radius:6px;padding:6px 10px;margin:6px 0}
.bt-wall small{display:block;color:#a78bfa}
.bt-claim{display:flex;gap:8px}.bt-claim input{flex:1;min-width:0;font:inherit;text-transform:uppercase;background:#05030c;color:#fff;border:2px solid #5b3fa8;border-radius:10px;padding:8px}
@media (max-width:640px){.bt-good{display:none!important}.bt-final video{width:70%}}
@media (prefers-reduced-motion:reduce){.bt-piece{transition:none}.bt-conf{display:none}}
.bt-how{margin:12px 0}.bt-how img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 0 18px rgba(155,92,255,.4)}
.bt-how figcaption{margin-top:6px;font-weight:700;color:#e8d5ff;text-align:center}.bt-how figcaption b{color:#39ff9a}
.bt-how video{width:100%;height:auto;border-radius:12px;display:block;background:#000;box-shadow:0 0 18px rgba(155,92,255,.4)}