.paddle {
  --paddle-color: var(--cyan);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--paddle-color), white 58%);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--paddle-color), transparent 72%), color-mix(in srgb, var(--paddle-color), white 70%), color-mix(in srgb, var(--paddle-color), transparent 72%));
  box-shadow: 0 0 0.55rem var(--paddle-color), 0 0 1.5rem color-mix(in srgb, var(--paddle-color), transparent 66%);
}
.paddle::after { position: absolute; inset: 12% 18%; border-radius: inherit; background: white; content: ""; filter: blur(0.12rem); opacity: 0.75; }
.paddle--cyan { --paddle-color: var(--cyan); }
.paddle--orange { --paddle-color: var(--orange); }
.paddle--relay { background: repeating-linear-gradient(0deg, var(--paddle-color) 0 14%, transparent 14% 20%); }
.paddle--prism { background: linear-gradient(90deg, var(--paddle-color), white 45% 55%, var(--paddle-color)); box-shadow: 0 0 0.4rem white, 0 0 1.8rem var(--paddle-color); }
.paddle--cannon::before { position: absolute; top: 50%; left: 100%; width: 0.9rem; height: 0.24rem; border-radius: 0 999px 999px 0; background: var(--paddle-color); box-shadow: 0 0 0.7rem var(--paddle-color); content: ""; transform: translateY(-50%); }
.paddle--orange.paddle--cannon::before { right: 100%; left: auto; border-radius: 999px 0 0 999px; }
.paddle--aegis::before { position: absolute; inset: -10% -85%; border: 1px solid var(--paddle-color); border-block-color: transparent; border-radius: 50%; content: ""; opacity: 0.58; }

.ball { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: white; box-shadow: 0 0 0.45rem white, 0 0 1.1rem var(--cyan); }

.brick {
  --brick-color: var(--cyan);
  position: relative;
  display: block;
  border: 2px solid color-mix(in srgb, var(--brick-color), white 38%);
  border-radius: clamp(.16rem, 10%, .42rem);
  background: linear-gradient(145deg, color-mix(in srgb, var(--brick-color), white 28%), color-mix(in srgb, var(--brick-color), transparent 32%));
  box-shadow: inset 0 0 0.65rem color-mix(in srgb, var(--brick-color), transparent 36%), 0 0 0.8rem color-mix(in srgb, var(--brick-color), transparent 68%);
  color: var(--brick-color);
}
.brick--cyan { --brick-color: var(--cyan); }
.brick--green { --brick-color: var(--green); }
.brick--yellow { --brick-color: var(--yellow); }
.brick--orange { --brick-color: var(--orange); }
.brick--magenta { --brick-color: var(--magenta); }
.brick--violet { --brick-color: var(--violet); }
.brick--void { --brick-color: #b6c3cc; background: repeating-linear-gradient(135deg, rgba(182,195,204,.22) 0 3px, rgba(182,195,204,.04) 3px 7px); }
.brick--pulse { animation: neon-breathe var(--slow) ease-in-out infinite; }
.brick--chromatic { animation: chroma-shift calc(var(--slow) * 2) linear infinite; }

.brick.is-hit::before, .brick.is-hit::after {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  animation: impact-wave 520ms var(--ease-out) forwards;
}
.brick.is-hit::after { animation-delay: 90ms; }
.brick.is-destroyed { animation: collapse-brick 320ms var(--ease-out) forwards; }
.brick.is-replay { animation: replay-brick 760ms var(--ease-organic); }
.play-brick.is-hit { animation: replay-brick 760ms var(--ease-organic); }
.play-brick.is-destroyed { animation: collapse-brick 320ms var(--ease-out) forwards; }
.brick-specimen:hover { animation: replay-brick 760ms var(--ease-organic); }
.brick-specimen:hover::before, .brick-specimen:hover::after { animation: impact-wave 520ms var(--ease-out) forwards; }

.brick-specimen { width: min(58%, 9rem); aspect-ratio: 2.3; transition: filter var(--fast), box-shadow var(--medium), transform var(--medium) var(--ease-organic); }
.brick-specimen:hover { filter: brightness(1.45); box-shadow: inset 0 0 .8rem color-mix(in srgb, currentColor, transparent 20%), 0 0 1.8rem currentColor; transform: scale(1.06); }
.brick-specimen[data-strength="2"] { border-width: 2px; }
.brick-specimen[data-strength="3"] { outline: 1px solid color-mix(in srgb, var(--brick-color), transparent 55%); outline-offset: 0.35rem; }

.level-mini { --cols: 5; display: grid; gap: 0.25rem; width: min(76%, 18rem); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #030609; grid-template-columns: repeat(var(--cols), 1fr); transition: width var(--medium), aspect-ratio var(--medium); }
.level-mini.is-portrait { width: min(56%, 12rem); }
.level-cell { aspect-ratio: 1.7; border-radius: 0.18rem; background: var(--cell-color, var(--cyan)); box-shadow: 0 0 0.45rem color-mix(in srgb, var(--cell-color, var(--cyan)), transparent 55%); opacity: 0.85; }
.level-cell--empty { visibility: hidden; }

.paddle-stage { position: relative; width: 78%; height: 9rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%); cursor: crosshair; touch-action: none; }
.paddle-stage .paddle { position: absolute; top: 50%; left: 18%; width: 0.65rem; height: var(--paddle-length, 4.8rem); transform: translate(-50%, -50%); transition: height var(--medium) var(--ease-organic), width var(--medium) var(--ease-organic), left var(--medium) var(--ease-out), top var(--medium) var(--ease-out); }
.paddle-stage .paddle--orange { right: 18%; left: auto; transform: translate(50%, -50%); }
.paddle-stage.is-horizontal .paddle { top: 18%; left: 50%; width: var(--paddle-length, 4.8rem); height: 0.65rem; transform: translate(-50%, -50%); }
.paddle-stage.is-horizontal .paddle--orange { top: auto; right: auto; bottom: 18%; left: 50%; transform: translate(-50%, 50%); }
.paddle-stage.is-horizontal .paddle--cannon::before { top: 100%; left: 50%; width: 0.24rem; height: 0.9rem; border-radius: 0 0 999px 999px; transform: translateX(-50%); }
.paddle-stage.is-horizontal .paddle--orange.paddle--cannon::before { top: auto; right: auto; bottom: 100%; left: 50%; border-radius: 999px 999px 0 0; }
.paddle-stage.is-horizontal .paddle--aegis::before { inset: -85% -10%; }
.paddle-stage.is-large { --paddle-length: 7rem; }
.paddle-stage.is-small { --paddle-length: 3.3rem; }
.paddle-stage.is-impact .paddle { animation: paddle-impact 420ms var(--ease-organic); }
.paddle-stage:hover .paddle { animation: paddle-hover 1.1s var(--ease-organic) infinite alternate; }
.paddle-help { position: absolute; right: 0.45rem; bottom: 0.35rem; left: 0.45rem; overflow: hidden; color: var(--muted); font: 0.52rem var(--font-mono); text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.power-orb { --orb-color: var(--cyan); position: relative; display: grid; width: 5.2rem; height: 5.2rem; place-items: center; border: 1px solid var(--orb-color); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--orb-color), transparent 70%), transparent 62%); box-shadow: 0 0 1rem color-mix(in srgb, var(--orb-color), transparent 55%), inset 0 0 1rem color-mix(in srgb, var(--orb-color), transparent 70%); color: var(--orb-color); font: 800 1rem var(--font-mono); }
.power-orb::before, .power-orb::after { position: absolute; inset: -0.5rem; border: 1px solid currentColor; border-block-color: transparent; border-radius: 50%; content: ""; animation: orbit 5s linear infinite; opacity: 0.5; }
.power-orb::after { inset: -1rem; animation-direction: reverse; animation-duration: 7s; opacity: 0.22; }
.power-orb.is-triggered { animation: power-pop 560ms var(--ease-out); }
.power-orb.is-replay { animation: replay-orb 760ms var(--ease-organic); }
.power-orb:hover { animation: replay-orb 1.1s var(--ease-organic) infinite alternate; }
.power-orb:hover .power-icon { animation: icon-hover 1.1s var(--ease-organic) infinite alternate; }
.power-icon { width: 2.7rem; height: 2.7rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; filter: drop-shadow(0 0 0.35rem currentColor); }
.power-icon--multiball { width: 3rem; height: 3rem; fill: color-mix(in srgb, currentColor, transparent 70%); }
.power-icon--expansion { width: 3.2rem; height: 3.2rem; }
.power-icon--plasma { width: 3.1rem; height: 3.1rem; fill: currentColor; stroke: none; }
.power-icon--shield { width: 3.25rem; height: 3.25rem; stroke: none; }
.power-icon--magnet { width: 3rem; height: 3rem; fill: currentColor; stroke: none; }
.power-icon--cannon { width: 3.15rem; height: 3.15rem; fill: currentColor; stroke: none; }
.power-icon--wall { width: 3rem; height: 2.1rem; fill: currentColor; stroke: none; }
.power-icon--overdrive, .power-icon--impulse { width: 3rem; height: 3rem; }
.icon-speed-paddle, .icon-impulse-ball { fill: color-mix(in srgb, currentColor, transparent 72%); }
.icon-speed-trail, .icon-impulse-trail { opacity: 0.5; }
.icon-cannon-base { opacity: 0.5; }
.icon-plasma-core { fill: var(--black); }
.icon-shield-core { fill: currentColor; opacity: 0.3; }
.icon-shield-shell { fill: currentColor; }
.icon-shield-sparks { fill: currentColor; opacity: 0.72; }
.icon-ring { transform-box: fill-box; transform-origin: center; }
.icon-ring--inner { opacity: 0.28; }
.icon-ring--middle { opacity: 0.62; }
.icon-ring--outer { opacity: 1; }
.power-orb.is-triggered .icon-arrow--left { animation: arrow-left 620ms var(--ease-out); }
.power-orb.is-triggered .icon-arrow--right { animation: arrow-right 620ms var(--ease-out); }
.power-orb.is-triggered .icon-ball--top { animation: ball-split-top 620ms var(--ease-out); }
.power-orb.is-triggered .icon-ball--left { animation: ball-split-left 620ms var(--ease-out); }
.power-orb.is-triggered .icon-ball--right { animation: ball-split-right 620ms var(--ease-out); }
.power-orb.is-triggered .power-icon--plasma { animation: plasma-surge 560ms var(--ease-out); }
.power-orb.is-triggered .power-icon--shield { animation: shield-lock 560ms var(--ease-organic); }
.power-orb.is-triggered .icon-shield-sparks { animation: shield-sparks 560ms ease-out; }
.power-orb--growth.is-triggered .icon-ring { animation: ring-expand 520ms var(--ease-organic); }
.power-orb--wall.is-triggered .power-icon--wall { animation: wall-deploy 720ms var(--ease-out); }
.power-orb--magnet.is-triggered .power-icon--magnet { animation: magnet-pull 620ms var(--ease-organic); }
.power-orb.is-triggered .power-icon--cannon { animation: cannon-recoil 560ms var(--ease-organic); }
.power-orb.is-triggered .icon-speed-paddle { animation: paddle-overdrive 560ms var(--ease-organic); }
.power-orb.is-triggered .icon-speed-arrow { animation: speed-arrow 560ms var(--ease-out); }
.power-orb.is-triggered .icon-impulse-ball { animation: impulse-ball 560ms var(--ease-out); }
.power-orb.is-triggered .icon-impulse-arrow--one { animation: impulse-arrow 560ms 50ms var(--ease-out); }
.power-orb.is-triggered .icon-impulse-arrow--two { animation: impulse-arrow 560ms 110ms var(--ease-out); }

@keyframes neon-breathe { 50% { filter: brightness(1.35); box-shadow: 0 0 1.6rem currentColor; } }
@keyframes chroma-shift { to { filter: hue-rotate(360deg); } }
@keyframes impact-wave { to { inset: -1.25rem; opacity: 0; } }
  @keyframes collapse-brick { 55% { filter: brightness(2.5); clip-path: inset(0 round .3rem); } to { filter: brightness(3); opacity: 0; clip-path: inset(48% round 50%); } }
@keyframes paddle-impact { 45% { filter: brightness(2); transform: translate(-50%, -50%) scaleX(1.45) scaleY(0.94); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes power-pop { 45% { filter: brightness(2); transform: scale(1.2); } }
@keyframes replay-brick { 35% { filter: brightness(2.8); box-shadow: 0 0 2.2rem currentColor; } 100% { filter: brightness(1); } }
@keyframes replay-orb { 35% { filter: brightness(2.8); transform: scale(1.22); box-shadow: 0 0 2.6rem currentColor, inset 0 0 1.4rem currentColor; } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes paddle-hover { to { filter: brightness(1.8); box-shadow: 0 0 1.4rem currentColor, 0 0 2.6rem currentColor; } }
@keyframes icon-hover { to { filter: brightness(1.8); transform: scale(1.12) rotate(4deg); } }
@keyframes ring-expand { from { transform: scale(0.18); } 70% { filter: brightness(1.8); transform: scale(1.12); } }
@keyframes wall-deploy { from { opacity: 0; transform: scaleX(0.08); } 60% { filter: brightness(1.8); opacity: 1; transform: scaleX(1.25); } }
@keyframes magnet-pull { from { opacity: 0.3; transform: scale(1.65); } 65% { filter: brightness(1.8); transform: scale(0.88); } }
@keyframes cannon-recoil { 35% { filter: brightness(2); transform: translate(-3px, 3px) rotate(-3deg); } 70% { transform: translate(1px, -1px); } }
@keyframes paddle-overdrive { 30% { transform: translateY(-3px); } 65% { filter: brightness(2); transform: translateY(3px); } }
@keyframes speed-arrow { 50% { opacity: 0.35; transform: scale(1.16); } }
@keyframes impulse-ball { 65% { filter: brightness(2); transform: translateX(5px) scale(1.15); } }
@keyframes impulse-arrow { from { opacity: 0; transform: translateX(-3px); } 60% { opacity: 1; transform: translateX(2px); } }
@keyframes arrow-left { 55%, 85% { transform: translateX(-2px); } }
@keyframes arrow-right { 55%, 85% { transform: translateX(2px); } }
@keyframes ball-split-top { from { transform: translateY(8.5px); } }
@keyframes ball-split-left { from { transform: translate(5px, -1px); } }
@keyframes ball-split-right { from { transform: translate(-5px, -1px); } }
@keyframes plasma-surge { from { opacity: 0.35; transform: translate(-3px, 3px) scale(0.72); } 65% { filter: brightness(2); transform: translate(1px, -1px) scale(1.12); } }
@keyframes shield-lock { from { transform: scale(1.25); } 65% { filter: brightness(1.8); transform: scale(0.94); } }
@keyframes shield-sparks { 50% { opacity: 1; transform: translate(14px, -14px); } }

:root[data-motion="intense"] .paddle { animation: paddle-charge var(--slow) ease-in-out infinite; }
:root[data-motion="intense"] .play-paddle { animation: paddle-charge var(--slow) ease-in-out infinite; }
:root[data-motion="reduced"] .brick--pulse,
:root[data-motion="reduced"] .brick--chromatic,
:root[data-motion="reduced"] .power-orb::before,
:root[data-motion="reduced"] .power-orb::after { animation: none; }
:root[data-motion="reduced"] .power-orb::before,
:root[data-motion="reduced"] .power-orb::after { opacity: .12; }
:root[data-motion="reduced"] .brick-specimen:hover { animation: none; filter: brightness(1.3); transform: scale(1.04); }
:root[data-motion="intense"] .brick--pulse { animation-duration: 1.15s; }
:root[data-motion="intense"] .brick--chromatic { animation-duration: 2.3s; }
:root[data-motion="intense"] .power-orb::before { animation-duration: 2.4s; opacity: .78; }
:root[data-motion="intense"] .power-orb::after { animation-duration: 3.4s; opacity: .42; }
@keyframes paddle-charge { 50% { filter: brightness(1.28); } }