.bonding-blaster-page{position:relative;overflow:hidden;padding:34px 0 64px;background:radial-gradient(circle at 18% 8%,rgba(40,121,148,.22),transparent 38%),radial-gradient(circle at 88% 26%,rgba(121,78,163,.17),transparent 35%),linear-gradient(180deg,#071b2b 0%,#061522 64%,#04101a 100%);color:#eefaff;min-height:70vh}.bonding-blaster-page:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(126,194,218,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(126,194,218,.04) 1px,transparent 1px);background-size:42px 42px}.bonding-blaster-shell{position:relative;z-index:1;max-width:1260px}.bonding-blaster-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.bonding-blaster-kicker{margin:0 0 6px;color:#86dff0;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}.bonding-blaster-intro h1{margin:0;font-size:clamp(3rem,7vw,5.7rem);line-height:.96;letter-spacing:-.05em;color:#fff}.bonding-blaster-intro p:not(.bonding-blaster-kicker){margin:16px 0 0;color:#bdd4df;font-size:1rem}.bonding-blaster-switch{display:inline-flex;align-items:center;min-height:42px;padding:8px 0;color:#9fddeb;text-decoration:none;font-weight:800;border-bottom:1px solid rgba(159,221,235,.36)}.bonding-blaster-switch:hover{color:#fff}.bonding-blaster-app{position:relative;border:1px solid rgba(159,220,239,.28);background:#03111c;border-radius:18px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.32)}.bonding-blaster-topbar{position:relative;z-index:8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;background:#020d16;border-bottom:1px solid rgba(255,255,255,.12)}.bonding-blaster-stat{padding:14px 16px;border-right:1px solid rgba(255,255,255,.1)}.bonding-blaster-stat small,.bonding-blaster-stat strong{display:block}.bonding-blaster-stat small{color:#7fa4b5;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}.bonding-blaster-stat strong{margin-top:3px;color:#f4fbff;font-size:1.32rem}.bonding-blaster-top-actions{display:flex;align-items:center;gap:7px;padding:8px 10px}.bonding-blaster-top-actions button{min-width:42px;height:42px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#102131;color:#edf9ff;font-weight:800}.bonding-blaster-top-actions button.is-bank{min-width:58px}.bonding-blaster-top-actions button:hover{border-color:#68d8ed;background:#153449}.bonding-blaster-arena{position:relative;height:min(68vh,690px);min-height:520px;overflow:hidden;background:radial-gradient(circle at 50% 84%,rgba(80,196,222,.15),transparent 24%),linear-gradient(180deg,#06131f 0%,#04111b 100%)}.bonding-blaster-grid{position:absolute;inset:0;opacity:.65;background-image:linear-gradient(rgba(82,164,190,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(82,164,190,.08) 1px,transparent 1px);background-size:54px 54px;perspective:500px}.bonding-blaster-grid:after{content:"";position:absolute;left:0;right:0;bottom:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(104,216,237,.65),transparent);box-shadow:0 0 18px rgba(104,216,237,.45)}.bonding-blaster-timer{position:absolute;z-index:6;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,.07);overflow:hidden}.bonding-blaster-timer i{display:block;width:100%;height:100%;transform-origin:left center;background:linear-gradient(90deg,#74dfef,#63b6df,#c586e6);box-shadow:0 0 12px rgba(100,215,237,.8)}.bonding-blaster-prompt{position:absolute;z-index:5;top:28px;left:50%;transform:translateX(-50%);width:min(720px,82%);padding:15px 20px;text-align:center;border-top:1px solid rgba(124,222,239,.5);border-bottom:1px solid rgba(124,222,239,.25);background:linear-gradient(90deg,transparent,rgba(11,55,75,.84) 18%,rgba(11,55,75,.84) 82%,transparent)}.bonding-blaster-prompt small,.bonding-blaster-prompt strong{display:block}.bonding-blaster-prompt small{color:#82d8ea;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}.bonding-blaster-prompt strong{margin-top:4px;color:#fff;font-size:clamp(1rem,2vw,1.35rem);line-height:1.18}.bonding-blaster-chain{position:absolute;z-index:7;top:101px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:88%;padding:6px 10px;background:rgba(26,67,89,.88);border:1px solid rgba(102,214,235,.34);color:#d9f9ff;font-size:.72rem}.bonding-blaster-chain[hidden]{display:none}.bonding-blaster-chain small{color:#8ecfe0;text-transform:uppercase;letter-spacing:.08em}.bonding-blaster-chain span{color:#ffca8d;font-weight:800}.bonding-blaster-targets{position:absolute;inset:0;z-index:4}.bonding-blaster-target{position:absolute;left:0;top:0;width:clamp(118px,18vw,220px);min-height:84px;padding:8px 12px;border:1px solid rgba(117,210,233,.42);border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(32,94,119,.94),rgba(6,30,45,.96) 72%);color:#eefbff;box-shadow:0 0 0 2px rgba(44,132,158,.15),0 0 24px rgba(51,155,183,.16);transition:border-color .12s,box-shadow .12s,opacity .18s,filter .18s;will-change:transform}.bonding-blaster-target:before,.bonding-blaster-target:after{content:"";position:absolute;inset:-7px;border:1px solid rgba(102,211,232,.18);border-radius:50%;transform:rotate(10deg)}.bonding-blaster-target:after{inset:-13px;border-style:dashed;opacity:.45;animation:bb-spin 9s linear infinite}.bonding-blaster-target small,.bonding-blaster-target strong{position:relative;z-index:1;display:block}.bonding-blaster-target small{color:#74d8eb;font-size:.62rem}.bonding-blaster-target strong{height:48px;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1.08;overflow:hidden}.bonding-blaster-target.is-aimed{border-color:#f7cb79;box-shadow:0 0 0 3px rgba(247,203,121,.24),0 0 28px rgba(247,203,121,.3);filter:brightness(1.12)}.bonding-blaster-target.is-aimed:before{border-color:rgba(247,203,121,.7)}.bonding-blaster-target.is-destroyed{opacity:.12;filter:grayscale(1);pointer-events:none}.bonding-blaster-target.is-correct{border-color:#7fe4bc;background:radial-gradient(circle at 50% 35%,rgba(31,123,96,.95),rgba(4,44,34,.97) 72%);box-shadow:0 0 34px rgba(85,225,177,.58)}.bonding-blaster-core{position:absolute;z-index:3;left:50%;bottom:24px;width:96px;height:96px;transform:translateX(-50%);border:1px solid rgba(104,215,237,.45);border-radius:50%;background:radial-gradient(circle,#83e6f1 0 7%,#17647c 9% 22%,#071b29 24% 44%,rgba(19,89,111,.9) 46% 52%,#04121d 54%);box-shadow:0 0 42px rgba(86,212,235,.38),inset 0 0 28px rgba(95,223,241,.25)}.bonding-blaster-core:before,.bonding-blaster-core:after{content:"";position:absolute;border:1px solid rgba(117,220,237,.3);border-radius:50%}.bonding-blaster-core:before{inset:-12px}.bonding-blaster-core:after{inset:-24px;border-style:dashed;animation:bb-spin 14s linear reverse infinite}.bonding-blaster-core i{position:absolute;inset:37%;border-radius:50%;background:#dffcff;box-shadow:0 0 20px #8ceaf5}.bonding-blaster-core span{position:absolute;left:50%;top:-16px;width:2px;height:16px;background:rgba(111,222,239,.55)}.bonding-blaster-beam{position:absolute;z-index:6;left:0;top:0;height:3px;transform-origin:left center;opacity:0;background:linear-gradient(90deg,#fff,#7de8f4 28%,rgba(111,207,239,.1));box-shadow:0 0 12px #7de8f4;pointer-events:none}.bonding-blaster-beam.is-firing{animation:bb-beam .2s ease-out}.bonding-blaster-feedback{position:absolute;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%) scale(.92);padding:8px 15px;border:1px solid transparent;background:rgba(2,14,22,.9);font-weight:900;opacity:0;pointer-events:none}.bonding-blaster-feedback.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.bonding-blaster-feedback.is-correct{color:#9aefca;border-color:#65d6a7}.bonding-blaster-feedback.is-wrong{color:#ffbd91;border-color:#dd8d59}.bonding-blaster-overlay{position:absolute;z-index:20;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,12,20,.88);backdrop-filter:blur(8px)}.bonding-blaster-overlay.is-visible{display:flex}.bonding-blaster-panel{width:min(620px,100%);max-height:90%;overflow:auto;padding:24px;border:1px solid rgba(133,214,232,.28);background:#071d2b;color:#edfaff}.bonding-blaster-panel h2{margin:.15em 0 .7em;color:#fff}.bonding-blaster-overline{margin:0;color:#7ed9eb;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800}.bonding-blaster-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bonding-blaster-choice-grid fieldset{margin:0;padding:0;border:0}.bonding-blaster-choice-grid legend,.bonding-blaster-select-label{display:block;margin-bottom:7px;color:#a9c5d3;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}.bonding-blaster-choice-grid label{display:block;margin-bottom:7px}.bonding-blaster-choice-grid input{position:absolute;opacity:0}.bonding-blaster-choice-grid label span{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035)}.bonding-blaster-choice-grid input:checked+span{border-color:#6ed7eb;background:rgba(73,174,204,.14)}.bonding-blaster-choice-grid b,.bonding-blaster-choice-grid small{display:block}.bonding-blaster-choice-grid small{color:#9bb5c3;font-size:.72rem}.bonding-blaster-select-label{margin-top:10px}.bonding-blaster-start-panel select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.2);background:#0b293f;color:#fff;font:inherit}.bonding-blaster-start-note{min-height:1.4em;color:#a9c6d3;font-size:.83rem}.bonding-blaster-primary,.bonding-blaster-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid transparent;font-weight:800}.bonding-blaster-primary{background:#67d6e8;color:#041923}.bonding-blaster-primary:disabled{opacity:.45}.bonding-blaster-secondary{background:transparent;border-color:rgba(255,255,255,.22);color:#e7f8ff}.bonding-blaster-key-hint{color:#91afbe;font-size:.75rem}.bonding-blaster-key-hint kbd{display:inline-block;padding:2px 6px;margin-right:3px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff}.bonding-blaster-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#020d16;border-top:1px solid rgba(255,255,255,.1)}.bonding-blaster-controls button{min-height:58px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#153f58,#0a293e);color:#fff}.bonding-blaster-controls button.is-fire{background:linear-gradient(180deg,#aa6b35,#6d3c1c)}.bonding-blaster-controls span{display:block;font-size:1.45rem;line-height:1}.bonding-blaster-controls small{font-size:.68rem;color:#bdd6e2}.bonding-blaster-version{display:block;padding:0 14px 9px;text-align:right;color:#6f93a5;background:#020d16;font-size:.6rem;letter-spacing:.07em}.bonding-blaster-result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.bonding-blaster-result-metrics div{padding:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}.bonding-blaster-result-metrics small,.bonding-blaster-result-metrics strong{display:block}.bonding-blaster-result-metrics small{color:#93b3c2}.bonding-blaster-result-metrics strong{font-size:1.35rem}.bonding-blaster-save{min-height:1.5em;margin:12px 0;color:#b9d5df}.bonding-blaster-save a{color:#6cdeef}.bonding-blaster-review{margin-top:16px;border-top:1px solid rgba(255,255,255,.13);padding-top:14px}.bonding-blaster-review-head{display:flex;justify-content:space-between;align-items:center}.bonding-blaster-review-head h3{margin:0}.bonding-blaster-review-head small{color:#a7c0cd}.bonding-blaster-review article{margin-top:10px;padding:12px;border-left:3px solid #c8874b;background:rgba(255,255,255,.035)}.bonding-blaster-review article>div{display:flex;justify-content:space-between;gap:12px}.bonding-blaster-review article span{color:#ffbe83;font-size:.72rem;white-space:nowrap}.bonding-blaster-review article p{margin:.45em 0;color:#c9dbe3;font-size:.87rem}.bonding-blaster-review article b{color:#fff}.bonding-blaster-review .bb-review-correction{padding:8px 10px;background:rgba(74,202,222,.09);color:#d7f6fb}.bonding-blaster-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.bonding-blaster-app.is-critical .bonding-blaster-core{box-shadow:0 0 48px rgba(232,113,78,.48),inset 0 0 28px rgba(232,113,78,.28);animation:bb-critical .75s ease-in-out infinite alternate}.bonding-blaster-app:fullscreen{width:100%;height:100%;border-radius:0;background:#03111c}.bonding-blaster-app:fullscreen .bonding-blaster-arena{height:calc(100vh - 158px)}.bonding-blaster-ambient i{position:absolute;width:4px;height:4px;border-radius:50%;background:#72ddea;box-shadow:0 0 14px #72ddea;animation:bb-float 16s linear infinite}.bonding-blaster-ambient i:nth-child(1){left:8%;top:16%}.bonding-blaster-ambient i:nth-child(2){left:91%;top:13%;animation-delay:-3s}.bonding-blaster-ambient i:nth-child(3){left:73%;top:72%;animation-delay:-7s}.bonding-blaster-ambient i:nth-child(4){left:19%;top:79%;animation-delay:-10s}.bonding-blaster-ambient i:nth-child(5){left:48%;top:5%;animation-delay:-5s}.bonding-blaster-ambient i:nth-child(6){left:60%;top:52%;animation-delay:-13s}@keyframes bb-spin{to{transform:rotate(370deg)}}@keyframes bb-beam{0%{opacity:1}100%{opacity:0}}@keyframes bb-float{50%{transform:translateY(55px) scale(1.8);opacity:.3}}@keyframes bb-critical{to{filter:brightness(1.25)}}
@media(max-width:760px){.bonding-blaster-page{padding:18px 0 40px}.bonding-blaster-intro{display:block}.bonding-blaster-switch{margin-top:13px}.bonding-blaster-intro h1{font-size:3.3rem}.bonding-blaster-app{border-radius:12px}.bonding-blaster-topbar{grid-template-columns:repeat(4,1fr)}.bonding-blaster-top-actions{position:absolute;right:8px;top:62px;z-index:10}.bonding-blaster-stat{padding:8px 7px}.bonding-blaster-stat strong{font-size:.96rem}.bonding-blaster-arena{height:min(63vh,610px);min-height:450px}.bonding-blaster-prompt{top:22px;width:92%;padding:12px 10px}.bonding-blaster-chain{top:88px;max-width:94%;font-size:.66rem}.bonding-blaster-chain small{display:none}.bonding-blaster-target{width:clamp(76px,23vw,118px);min-height:76px;padding:6px 5px}.bonding-blaster-target strong{height:46px;font-size:.78rem}.bonding-blaster-target:before{inset:-4px}.bonding-blaster-target:after{inset:-8px}.bonding-blaster-core{width:78px;height:78px;bottom:19px}.bonding-blaster-choice-grid{grid-template-columns:1fr}.bonding-blaster-panel{padding:19px}.bonding-blaster-controls{padding-top:9px}.bonding-blaster-controls button{min-height:66px}.bonding-blaster-result-metrics{grid-template-columns:1fr 1fr 1fr}.bonding-blaster-review article>div{display:block}.bonding-blaster-review article span{white-space:normal}}
@media(max-width:390px){.bonding-blaster-arena{min-height:425px}.bonding-blaster-target{width:73px;min-height:73px}.bonding-blaster-target strong{font-size:.7rem}.bonding-blaster-stat small{font-size:.53rem}.bonding-blaster-top-actions button{min-width:36px;width:36px;height:36px;padding:0}.bonding-blaster-top-actions button.is-bank{width:48px}.bonding-blaster-result-metrics{grid-template-columns:1fr}.bonding-blaster-prompt strong{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.bonding-blaster-target:after,.bonding-blaster-core:after,.bonding-blaster-ambient i,.bonding-blaster-app.is-critical .bonding-blaster-core{animation:none}.bonding-blaster-target,.bonding-blaster-feedback{transition:none}}

/* Bonding Blaster 0.1.1 visual and interaction layer */
.bonding-blaster-arena::before,
.bonding-blaster-arena::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.bonding-blaster-arena::before{
  z-index:1;
  opacity:.42;
  background-image:
    radial-gradient(circle at 7% 12%,rgba(199,246,255,.95) 0 1px,transparent 1.7px),
    radial-gradient(circle at 19% 42%,rgba(122,214,238,.72) 0 1px,transparent 1.7px),
    radial-gradient(circle at 33% 18%,rgba(255,255,255,.75) 0 1px,transparent 1.6px),
    radial-gradient(circle at 58% 34%,rgba(140,220,242,.8) 0 1px,transparent 1.7px),
    radial-gradient(circle at 78% 14%,rgba(255,255,255,.82) 0 1px,transparent 1.6px),
    radial-gradient(circle at 91% 48%,rgba(121,207,236,.76) 0 1px,transparent 1.7px),
    radial-gradient(circle at 69% 65%,rgba(255,255,255,.5) 0 1px,transparent 1.7px),
    radial-gradient(circle at 12% 72%,rgba(117,210,238,.55) 0 1px,transparent 1.7px);
  background-size:230px 210px,290px 250px,310px 270px,370px 310px,410px 340px,450px 390px,520px 440px,560px 470px;
  animation:bb-star-drift 22s linear infinite;
}
.bonding-blaster-arena::after{
  z-index:2;
  top:auto;
  height:34%;
  background:
    linear-gradient(90deg,transparent 0 9%,rgba(96,198,226,.18) 9.2% 9.4%,transparent 9.7% 90%,rgba(96,198,226,.18) 90.2% 90.4%,transparent 90.7%),
    linear-gradient(180deg,transparent,rgba(25,117,148,.08));
  clip-path:polygon(0 100%,8% 0,92% 0,100% 100%);
}
.bonding-blaster-grid{
  z-index:2;
  transform-origin:50% 100%;
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent 6%,#000 34%,#000 100%);
}
.bonding-blaster-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-radial-gradient(ellipse at 50% 108%,transparent 0 52px,rgba(98,206,232,.08) 53px 54px);
}
.bonding-blaster-targets{z-index:5}
.bonding-blaster-target{
  z-index:1;
  width:clamp(122px,18vw,222px);
  min-height:88px;
  padding:0;
  overflow:visible;
  border-radius:18px;
  border-color:rgba(109,213,239,.5);
  background:
    linear-gradient(135deg,rgba(115,225,245,.13),transparent 34%),
    linear-gradient(180deg,rgba(18,71,94,.98),rgba(4,27,43,.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -18px 30px rgba(0,0,0,.24),
    0 0 0 1px rgba(33,118,146,.22),
    0 10px 28px rgba(0,0,0,.28),
    0 0 24px rgba(61,176,205,.17);
  transition:border-color .12s,box-shadow .12s,opacity .2s,filter .18s;
}
.bonding-blaster-target::before{
  inset:-5px;
  border-radius:22px;
  border:1px solid rgba(104,214,237,.2);
  transform:none;
}
.bonding-blaster-target::after{
  inset:-10px;
  border-radius:26px;
  border:1px dashed rgba(112,220,239,.24);
  animation:bb-target-orbit 9s linear infinite;
}
.bonding-blaster-target[data-skin="1"]{border-radius:44px 18px 44px 18px}
.bonding-blaster-target[data-skin="1"]::before{border-radius:48px 22px 48px 22px}
.bonding-blaster-target[data-skin="2"]{border-radius:10px;clip-path:polygon(8% 0,92% 0,100% 24%,100% 76%,92% 100%,8% 100%,0 76%,0 24%)}
.bonding-blaster-target[data-skin="2"]::before,.bonding-blaster-target[data-skin="2"]::after{display:none}
.bonding-blaster-target[data-skin="3"]{border-radius:50%;width:clamp(108px,16vw,188px);min-height:108px}
.bonding-blaster-target[data-skin="3"]::before,.bonding-blaster-target[data-skin="3"]::after{border-radius:50%}
.bb-target-shell{
  position:relative;
  display:flex;
  min-height:86px;
  padding:10px 13px 9px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:inherit;
}
.bonding-blaster-target[data-skin="3"] .bb-target-shell{min-height:106px;padding-inline:15px}
.bb-target-shell::before,
.bb-target-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.bb-target-shell::before{
  left:9px;
  right:9px;
  top:7px;
  height:2px;
  background:linear-gradient(90deg,transparent,#7fe6f5 32%,#fff 50%,#7fe6f5 68%,transparent);
  opacity:.58;
}
.bb-target-shell::after{
  inset:auto 12px 7px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(102,213,237,.7),transparent);
}
.bb-target-scan{
  position:absolute;
  z-index:0;
  left:-35%;
  top:-20%;
  width:25%;
  height:145%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(199,250,255,.13),transparent);
  animation:bb-target-scan 3.8s ease-in-out infinite;
}
.bonding-blaster-target small,
.bonding-blaster-target strong{z-index:2}
.bonding-blaster-target small{
  align-self:flex-start;
  min-width:20px;
  padding:1px 5px;
  border:1px solid rgba(124,223,240,.28);
  border-radius:999px;
  background:rgba(1,16,27,.46);
  color:#9ce9f5;
  font-variant-numeric:tabular-nums;
}
.bonding-blaster-target strong{width:100%;height:50px;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.bonding-blaster-target.is-aimed{
  border-color:#ffd786;
  box-shadow:
    inset 0 0 22px rgba(255,205,110,.1),
    0 0 0 2px rgba(255,212,128,.22),
    0 0 34px rgba(247,203,121,.34),
    0 12px 32px rgba(0,0,0,.35);
}
.bonding-blaster-target.is-aimed .bb-target-shell::before{background:linear-gradient(90deg,transparent,#ffd582 30%,#fff 50%,#ffd582 70%,transparent);opacity:.95}
.bonding-blaster-target.is-destroyed{
  transform-origin:center;
  animation:bb-target-collapse .34s ease-in forwards;
}
.bonding-blaster-target.is-correct{
  border-color:#89f1c8;
  background:
    linear-gradient(135deg,rgba(188,255,229,.2),transparent 34%),
    linear-gradient(180deg,rgba(22,121,91,.98),rgba(4,47,38,.98));
  box-shadow:0 0 0 2px rgba(118,235,190,.2),0 0 46px rgba(85,225,177,.62);
  animation:bb-target-correct .46s ease-out forwards;
}
.bonding-blaster-reticle{
  position:absolute;
  z-index:7;
  left:0;
  top:0;
  opacity:0;
  pointer-events:none;
  will-change:transform,width,height;
  transition:width .1s,height .1s,opacity .12s;
}
.bonding-blaster-reticle.is-visible{opacity:1}
.bonding-blaster-reticle::before,
.bonding-blaster-reticle::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(255,215,132,.8);
  box-shadow:0 0 8px rgba(255,207,111,.8);
}
.bonding-blaster-reticle::before{width:18px;height:1px;transform:translate(-50%,-50%)}
.bonding-blaster-reticle::after{width:1px;height:18px;transform:translate(-50%,-50%)}
.bonding-blaster-reticle i{position:absolute;width:16px;height:16px;border-color:#ffd883;border-style:solid;filter:drop-shadow(0 0 5px rgba(255,205,111,.75))}
.bonding-blaster-reticle i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.bonding-blaster-reticle i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.bonding-blaster-reticle i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0}
.bonding-blaster-reticle i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px}
.bonding-blaster-fx{position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none}
.bb-burst{position:absolute;width:1px;height:1px;pointer-events:none}
.bb-burst>i{
  position:absolute;
  left:-2px;top:-2px;
  width:5px;height:5px;
  border-radius:50%;
  background:#ffb67c;
  box-shadow:0 0 9px currentColor;
  animation:bb-particle .68s cubic-bezier(.12,.7,.22,1) var(--bb-delay) forwards;
}
.bb-burst.is-correct>i{color:#7ef0c0;background:#c9ffe8}
.bb-burst.is-timeout>i{color:#ff9f73;background:#ffd2ba}
.bonding-blaster-core{
  z-index:4;
  width:106px;height:106px;
  border-width:2px;
  background:
    radial-gradient(circle,#efffff 0 5%,#8eeefa 6% 9%,#1f7892 10% 22%,#071b29 23% 42%,rgba(20,99,124,.96) 43% 49%,#04121d 50% 100%);
  box-shadow:0 0 56px rgba(86,212,235,.4),inset 0 0 34px rgba(95,223,241,.28);
}
.bonding-blaster-core b{
  position:absolute;
  inset:-35px;
  border-radius:50%;
  border:1px solid rgba(109,222,240,.16);
  box-shadow:inset 0 0 28px rgba(65,177,208,.08);
}
.bonding-blaster-core b::before,
.bonding-blaster-core b::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:#9ceef8;
  box-shadow:0 0 12px #80e7f5;
  transform-origin:0 0;
  animation:bb-core-satellite 5.5s linear infinite;
}
.bonding-blaster-core b::after{animation-duration:8s;animation-direction:reverse;opacity:.58}
.bonding-blaster-core.is-firing{animation:bb-core-recoil .2s ease-out}
.bonding-blaster-beam{height:4px;background:linear-gradient(90deg,#fff 0 7%,#9af3ff 22%,#65d9ee 55%,rgba(111,207,239,.05));box-shadow:0 0 8px #fff,0 0 18px #67e1f2}
.bonding-blaster-stage-banner{
  position:absolute;
  z-index:11;
  left:50%;top:44%;
  transform:translate(-50%,-50%) scale(.88);
  padding:8px 24px;
  border-top:1px solid rgba(145,231,246,.55);
  border-bottom:1px solid rgba(145,231,246,.35);
  background:linear-gradient(90deg,transparent,rgba(4,24,38,.94) 18%,rgba(4,24,38,.94) 82%,transparent);
  color:#dffbff;
  opacity:0;
  pointer-events:none;
  font-size:clamp(1rem,2.4vw,1.55rem);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bonding-blaster-stage-banner.is-visible{animation:bb-stage-banner 1.02s ease-out}
.bonding-blaster-feedback{border-radius:7px;box-shadow:0 12px 34px rgba(0,0,0,.36);letter-spacing:.03em}
.bonding-blaster-top-actions button.is-sfx{min-width:58px;font-size:.68rem;letter-spacing:.06em}
.bonding-blaster-top-actions button.is-sfx.is-muted{color:#7894a1;border-color:rgba(255,255,255,.09);background:#091722}
.bonding-blaster-sfx-choice{
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin:14px 0 4px;
  color:#dceff6;
  font-size:.9rem;
}
.bonding-blaster-sfx-choice input{width:18px;height:18px;accent-color:#66d8eb}
.bonding-blaster-app[data-stage="crossfire"] .bonding-blaster-arena{background:radial-gradient(circle at 50% 84%,rgba(84,198,224,.17),transparent 25%),radial-gradient(circle at 10% 20%,rgba(129,83,171,.12),transparent 34%),linear-gradient(180deg,#071725,#04111b)}
.bonding-blaster-app[data-stage="heavy-elements"] .bonding-blaster-arena{background:radial-gradient(circle at 50% 84%,rgba(95,207,226,.14),transparent 25%),radial-gradient(circle at 83% 16%,rgba(210,144,70,.12),transparent 32%),linear-gradient(180deg,#081722,#051119)}
.bonding-blaster-app[data-stage="advanced"] .bonding-blaster-arena{background:radial-gradient(circle at 50% 84%,rgba(101,211,228,.16),transparent 25%),radial-gradient(circle at 12% 20%,rgba(155,82,177,.15),transparent 34%),linear-gradient(180deg,#0a1424,#05101c)}
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-arena{background:radial-gradient(circle at 50% 84%,rgba(105,224,235,.18),transparent 25%),radial-gradient(circle at 83% 18%,rgba(213,94,120,.16),transparent 35%),radial-gradient(circle at 12% 24%,rgba(104,90,201,.17),transparent 35%),linear-gradient(180deg,#0b1225,#050e1c)}
.bonding-blaster-app.has-correct-pulse .bonding-blaster-arena{animation:bb-arena-correct .3s ease-out}
.bonding-blaster-app.has-miss-pulse .bonding-blaster-arena{animation:bb-arena-miss .28s ease-out}

@keyframes bb-star-drift{to{background-position:40px 120px,-50px 150px,60px 180px,-70px 210px,80px 230px,-90px 260px,100px 280px,-110px 300px}}
@keyframes bb-target-orbit{to{transform:rotate(360deg)}}
@keyframes bb-target-scan{0%,45%{transform:translateX(-25%) skewX(-18deg)}70%,100%{transform:translateX(650%) skewX(-18deg)}}
@keyframes bb-target-collapse{to{opacity:0;filter:grayscale(1) brightness(1.9);scale:.45;rotate:8deg}}
@keyframes bb-target-correct{55%{scale:1.08;filter:brightness(1.35)}100%{scale:.92;opacity:.25}}
@keyframes bb-particle{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(var(--bb-dx),var(--bb-dy),0) scale(.15)}}
@keyframes bb-core-satellite{to{transform:rotate(360deg) translateX(69px) rotate(-360deg)}}
@keyframes bb-core-recoil{50%{scale:.91;filter:brightness(1.45)}100%{scale:1}}
@keyframes bb-stage-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes bb-arena-correct{45%{filter:brightness(1.17) saturate(1.14)}}
@keyframes bb-arena-miss{35%{filter:brightness(.84) sepia(.2);transform:translateX(2px)}70%{transform:translateX(-2px)}}

@media(max-width:760px){
  .bonding-blaster-target{width:clamp(78px,23vw,122px);min-height:78px;border-radius:13px}
  .bb-target-shell{min-height:76px;padding:8px 6px 7px}
  .bonding-blaster-target[data-skin="3"]{width:clamp(78px,22vw,114px);min-height:82px}
  .bonding-blaster-target[data-skin="3"] .bb-target-shell{min-height:80px;padding-inline:7px}
  .bonding-blaster-target strong{height:47px}
  .bonding-blaster-target small{font-size:.54rem;padding:0 4px}
  .bonding-blaster-core{width:84px;height:84px}
  .bonding-blaster-core b{inset:-26px}
  @keyframes bb-core-satellite{to{transform:rotate(360deg) translateX(54px) rotate(-360deg)}}
  .bonding-blaster-reticle::before{width:12px}.bonding-blaster-reticle::after{height:12px}
  .bonding-blaster-stage-banner{top:49%;padding-inline:16px;white-space:nowrap}
  .bonding-blaster-top-actions button.is-sfx{width:auto;min-width:49px;padding-inline:7px}
}
@media(max-width:390px){
  .bonding-blaster-target{width:75px;min-height:74px}
  .bb-target-shell{min-height:72px;padding-inline:4px}
  .bonding-blaster-target[data-skin="3"]{width:74px;min-height:76px}
  .bonding-blaster-target[data-skin="3"] .bb-target-shell{min-height:74px;padding-inline:4px}
  .bonding-blaster-top-actions{gap:4px}
  .bonding-blaster-top-actions button.is-sfx{min-width:45px;font-size:.57rem}
}
@media(prefers-reduced-motion:reduce){
  .bonding-blaster-arena::before,.bb-target-scan,.bonding-blaster-core b::before,.bonding-blaster-core b::after{animation:none}
  .bonding-blaster-target.is-destroyed,.bonding-blaster-target.is-correct,.bonding-blaster-stage-banner.is-visible,.bonding-blaster-app.has-correct-pulse .bonding-blaster-arena,.bonding-blaster-app.has-miss-pulse .bonding-blaster-arena{animation:none}
}


/* BB 0.1.2: readable answer targets and direct-touch controls */
.bb-touch-hint{display:none}
.bonding-blaster-target.is-long-label{min-height:102px}
.bonding-blaster-target.is-long-label .bb-target-shell{min-height:100px;padding-top:10px;padding-bottom:10px}
.bonding-blaster-target.is-long-label strong{height:66px;line-height:1.06}
.bonding-blaster-target.is-very-long-label{min-height:114px}
.bonding-blaster-target.is-very-long-label .bb-target-shell{min-height:112px}
.bonding-blaster-target.is-very-long-label strong{height:78px;line-height:1.04}
.bonding-blaster-target.is-text-tight strong{letter-spacing:-.015em}
.bonding-blaster-app.is-direct-touch .bonding-blaster-controls{display:none}
.bonding-blaster-app.is-direct-touch .bb-keyboard-hint{display:none}
.bonding-blaster-app.is-direct-touch .bb-touch-hint{display:block}
.bonding-blaster-app.is-direct-touch .bonding-blaster-reticle{display:none}
.bonding-blaster-app.is-direct-touch .bonding-blaster-target small{display:none}
.bonding-blaster-app.is-direct-touch .bb-target-shell{padding-top:9px;padding-bottom:9px}
.bonding-blaster-app.is-direct-touch .bonding-blaster-version{padding-top:8px}
.bonding-blaster-app.is-direct-touch:fullscreen .bonding-blaster-arena{height:calc(100vh - 104px)}
@media(max-width:760px){
  .bonding-blaster-target.is-long-label{min-height:98px}
  .bonding-blaster-target.is-long-label .bb-target-shell{min-height:96px;padding-inline:6px}
  .bonding-blaster-target.is-long-label strong{height:64px}
  .bonding-blaster-target.is-very-long-label{min-height:108px}
  .bonding-blaster-target.is-very-long-label .bb-target-shell{min-height:106px;padding-inline:5px}
  .bonding-blaster-target.is-very-long-label strong{height:76px}
  .bonding-blaster-app.is-direct-touch .bonding-blaster-arena{height:min(69vh,660px)}
}
@media(max-width:390px){
  .bonding-blaster-target.is-long-label{min-height:100px}
  .bonding-blaster-target.is-very-long-label{min-height:112px}
  .bonding-blaster-target.is-very-long-label strong{height:80px}
}

/* Bonding Blaster 0.2.0: staged modes, music and late-game effects */
.bonding-blaster-top-actions button.is-music,
.bonding-blaster-top-actions button.is-sfx{
  min-width:62px;
  font-size:.66rem;
  letter-spacing:.045em;
}
.bonding-blaster-top-actions button.is-music.is-muted,
.bonding-blaster-top-actions button.is-sfx.is-muted{
  color:#7894a1;
  border-color:rgba(255,255,255,.09);
  background:#091722;
}
.bonding-blaster-audio-choices{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  margin:14px 0 4px;
}
.bonding-blaster-audio-choices .bonding-blaster-sfx-choice{margin:0}
.bonding-blaster-mode-badge{
  position:absolute;
  z-index:7;
  top:105px;
  right:14px;
  max-width:42%;
  padding:5px 9px;
  border:1px solid rgba(126,218,238,.27);
  border-radius:999px;
  background:rgba(3,18,29,.78);
  color:#94dcea;
  font-size:.61rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  transition:color .28s,border-color .28s,background .28s,box-shadow .28s;
}

/* Colour arrives with the stages rather than all at once. */
.bonding-blaster-app[data-stage="lock-on"] .bonding-blaster-mode-badge{color:#91e0ed}
.bonding-blaster-app[data-stage="crossfire"] .bonding-blaster-mode-badge{
  color:#d3b1f2;
  border-color:rgba(184,121,225,.4);
  box-shadow:0 0 16px rgba(153,94,202,.12);
}
.bonding-blaster-app[data-stage="crossfire"] .bonding-blaster-timer i{
  background:linear-gradient(90deg,#70ddeb,#8eabe8,#bb7bd8)
}
.bonding-blaster-app[data-stage="scramble"] .bonding-blaster-mode-badge{
  color:#f0a9dc;
  border-color:rgba(226,112,189,.44);
  box-shadow:0 0 18px rgba(212,77,164,.14);
}
.bonding-blaster-app[data-stage="scramble"] .bonding-blaster-target[data-skin="1"]{
  border-color:rgba(199,113,218,.52);
  background:linear-gradient(135deg,rgba(210,112,226,.14),transparent 35%),linear-gradient(180deg,rgba(55,48,104,.98),rgba(15,25,53,.98));
}
.bonding-blaster-app[data-stage="missile"] .bonding-blaster-mode-badge,
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-mode-badge{
  color:#ffc191;
  border-color:rgba(255,137,76,.52);
  background:rgba(48,18,20,.72);
  box-shadow:0 0 20px rgba(237,75,47,.18);
}
.bonding-blaster-app[data-stage="missile"] .bonding-blaster-timer i,
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-timer i{
  background:linear-gradient(90deg,#70ddea,#bd7fc9,#ff915c,#ffd078);
  box-shadow:0 0 14px rgba(255,124,72,.72);
}
.bonding-blaster-app[data-stage="missile"] .bonding-blaster-core,
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-core{
  box-shadow:0 0 58px rgba(85,211,235,.38),0 0 28px rgba(255,94,58,.13),inset 0 0 34px rgba(95,223,241,.28);
}
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-target[data-skin="0"]{
  border-color:rgba(91,218,239,.57)
}
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-target[data-skin="1"]{
  border-color:rgba(202,113,229,.6);
  background:linear-gradient(135deg,rgba(203,109,229,.16),transparent 34%),linear-gradient(180deg,rgba(56,45,105,.98),rgba(15,23,50,.98));
}
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-target[data-skin="2"]{
  border-color:rgba(255,143,87,.62);
  background:linear-gradient(135deg,rgba(255,127,68,.16),transparent 34%),linear-gradient(180deg,rgba(103,52,45,.98),rgba(42,24,31,.98));
}
.bonding-blaster-app[data-stage="overdrive"] .bonding-blaster-target[data-skin="3"]{
  border-color:rgba(244,199,92,.57);
  background:linear-gradient(135deg,rgba(244,199,92,.14),transparent 34%),linear-gradient(180deg,rgba(92,70,35,.98),rgba(37,29,25,.98));
}

/* A brief warning before targets exchange lanes. */
.bonding-blaster-app.is-swap-warning .bonding-blaster-target{
  border-color:#f1a4df;
  box-shadow:0 0 0 2px rgba(239,121,205,.17),0 0 30px rgba(220,83,180,.3),0 10px 28px rgba(0,0,0,.28);
  animation:bb-swap-warning .46s ease-in-out infinite alternate;
}
.bonding-blaster-app.is-swap-warning .bonding-blaster-mode-badge{
  color:#ffd4f1;
  border-color:rgba(239,121,205,.62);
}

/* Missile stages gain warmer trails while the labels stay readable. */
.bonding-blaster-app[data-mode="missile-mode"] .bonding-blaster-target::after,
.bonding-blaster-app[data-mode="missile-rush"] .bonding-blaster-target::after{
  border-color:rgba(255,130,73,.42);
  box-shadow:0 -18px 24px rgba(255,89,47,.12);
}
.bonding-blaster-app[data-mode="missile-mode"] .bb-target-shell::after,
.bonding-blaster-app[data-mode="missile-rush"] .bb-target-shell::after{
  height:2px;
  background:linear-gradient(90deg,transparent,#ff8d56 35%,#ffd287 50%,#ff8d56 65%,transparent);
  box-shadow:0 0 10px rgba(255,101,51,.6);
}
.bonding-blaster-app[data-mode="precision"] .bonding-blaster-prompt{
  border-color:rgba(247,211,126,.52);
  background:linear-gradient(90deg,transparent,rgba(64,52,25,.78) 18%,rgba(64,52,25,.78) 82%,transparent);
}
.bonding-blaster-app[data-mode="chain-attack"] .bonding-blaster-chain{
  border-color:rgba(255,151,84,.52);
  background:rgba(70,35,25,.88);
}

/* Later correct hits use red/orange explosions with a cool confirmation ring. */
.bb-burst.is-hot::before,
.bb-burst.is-hot::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border:2px solid rgba(103,229,242,.9);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:bb-hot-ring .72s ease-out forwards;
}
.bb-burst.is-hot::after{
  border-color:rgba(255,116,58,.92);
  animation-delay:.08s;
}
.bb-burst.is-correct.is-hot>i:nth-child(4n+1){color:#ff513e;background:#ffd0a3}
.bb-burst.is-correct.is-hot>i:nth-child(4n+2){color:#ff8b3d;background:#fff0b0}
.bb-burst.is-correct.is-hot>i:nth-child(4n+3){color:#ffd05c;background:#fff7d1}
.bb-burst.is-correct.is-hot>i:nth-child(4n){color:#6fe1ef;background:#d6fbff}
.bb-burst.is-overdrive>i{width:6px;height:6px}

.bb-firework{
  position:absolute;
  width:1px;
  height:1px;
  pointer-events:none;
}
.bb-firework::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:8px;
  border:1px solid rgba(255,233,164,.9);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:bb-firework-ring .9s ease-out forwards;
}
.bb-firework>i{
  position:absolute;
  left:-2px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff7849;
  box-shadow:0 0 10px currentColor;
  animation:bb-firework-particle .9s cubic-bezier(.1,.68,.18,1) var(--bb-delay) forwards;
}
.bb-firework>i[style*="--bb-hue-step: 1"]{color:#ffd064;background:#fff0a6}
.bb-firework>i[style*="--bb-hue-step: 2"]{color:#f461b8;background:#ffd1eb}
.bb-firework>i[style*="--bb-hue-step: 3"]{color:#65dff0;background:#d5fbff}
.bb-firework.is-chain>i{width:6px;height:6px}

@keyframes bb-swap-warning{to{filter:brightness(1.15) saturate(1.22)}}
@keyframes bb-hot-ring{0%{opacity:1;scale:.3}100%{opacity:0;scale:6}}
@keyframes bb-firework-ring{0%{opacity:1;scale:.2}100%{opacity:0;scale:7}}
@keyframes bb-firework-particle{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate3d(var(--bb-dx),var(--bb-dy),0) scale(.12)}}

@media(max-width:760px){
  .bonding-blaster-mode-badge{top:93px;right:8px;max-width:48%;font-size:.54rem;padding:4px 7px}
  .bonding-blaster-top-actions button.is-music,
  .bonding-blaster-top-actions button.is-sfx{min-width:51px;padding-inline:6px;font-size:.57rem}
  .bonding-blaster-app[data-mode="scramble"] .bonding-blaster-target,
  .bonding-blaster-app[data-mode="missile-rush"] .bonding-blaster-target{filter:saturate(1.1)}
}
@media(max-width:420px){
  .bonding-blaster-top-actions{right:5px;gap:3px}
  .bonding-blaster-top-actions button.is-music,
  .bonding-blaster-top-actions button.is-sfx{min-width:44px;width:auto;padding-inline:5px;font-size:.51rem}
  .bonding-blaster-mode-badge{top:91px;right:6px}
}
@media(prefers-reduced-motion:reduce){
  .bonding-blaster-app.is-swap-warning .bonding-blaster-target,
  .bb-firework>i,.bb-firework::before,.bb-burst.is-hot::before,.bb-burst.is-hot::after{animation:none}
}
.bonding-blaster-mode-badge[hidden]{display:none}