.ball-loop-page {
  --loop-ink: #f5f1ff;
  --loop-blue: #56dfff;
  --loop-mint: #65e2b1;
  --loop-panel: #211b43;
  --loop-violet: #8e56ff;
  max-width: 1120px;
}
.ball-loop-hero { max-width: 920px; padding-bottom: 22px; }
.ball-loop-hero h1 { margin: 6px 0 12px; font-size: clamp(2.55rem, 6vw, 4.7rem); }
.ball-loop-hero > p:last-child { max-width: 780px; font-size: 1.08rem; }
.ball-loop-original,
.ball-loop-dialog-kicker {
  display: inline-flex; align-items: center; min-height: 28px; margin: 0;
  border-radius: 999px; padding: 5px 11px; color: #0f694e; background: #dff7ed;
  font-size: .73rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase;
}
.ball-loop-game {
  position: relative; overflow: hidden; border: 1px solid #514285; border-radius: 28px;
  padding: clamp(14px, 2.4vw, 26px); background: radial-gradient(circle at 50% 0, #352a69, #17132f 68%);
  box-shadow: 0 30px 82px rgba(19, 10, 55, .3), inset 0 1px 0 rgba(255,255,255,.09);
}
.ball-loop-game:fullscreen { overflow: auto; border: 0; border-radius: 0; padding: 18px; }
.ball-loop-game.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 9999; overflow: auto; border: 0; border-radius: 0; padding: 18px; }
body.ball-loop-pseudo-open { overflow: hidden; }
.ball-loop-hud dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px; }
.ball-loop-hud dl div { min-width: 0; border: 1px solid rgba(167,137,255,.3); border-radius: 13px; padding: 9px 11px; background: rgba(21,17,48,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.ball-loop-hud dt { color: #a9a0c9; font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.ball-loop-hud dd { overflow: hidden; margin: 4px 0 0; color: var(--loop-ink); font-size: .93rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.ball-loop-tutorial { margin: 0 auto 12px; max-width: 720px; border: 1px solid rgba(255,210,87,.35); border-left: 4px solid #ffd257; border-radius: 10px; padding: 11px 14px; color: #fff4c4; background: rgba(69,52,23,.62); font-weight: 750; }
.ball-loop-canvas-wrap { width: min(100%, 820px); margin: 0 auto; }
.ball-loop-canvas-wrap canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; border: 1px solid #6752a8; border-radius: 23px; background: #16122e; box-shadow: 0 18px 38px rgba(8,4,28,.38), inset 0 0 0 1px rgba(255,255,255,.08); touch-action: manipulation; }
.ball-loop-canvas-wrap canvas:focus-visible { outline: 4px solid rgba(36,111,229,.34); outline-offset: 4px; }
.ball-loop-status { min-height: 48px; max-width: 760px; margin: 14px auto 0; border: 1px solid rgba(150,125,228,.24); border-radius: 13px; padding: 12px 15px; color: #d8d2ef; background: rgba(20,16,45,.68); text-align: center; font-weight: 750; }
.ball-loop-status[data-tone="error"] { color: #9a2837; background: #fff0f2; }
.ball-loop-status[data-tone="success"] { color: #126848; background: #e8f9f1; }
.ball-loop-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; max-width: 820px; margin: 13px auto 0; }
.ball-loop-controls button,
.ball-loop-dialog button,
.ball-loop-level-grid button { min-height: 48px; border: 1px solid #5d4d8e; border-radius: 13px; padding: 8px 10px; color: #eeeaff; background: #28204d; font: inherit; font-weight: 850; cursor: pointer; }
.ball-loop-controls button { display: grid; place-items: center; gap: 2px; }
.ball-loop-controls button b { color: var(--loop-blue); font-size: 1.22rem; line-height: 1; }
.ball-loop-controls button span { font-size: .75rem; }
.ball-loop-controls button:hover,
.ball-loop-dialog button:hover,
.ball-loop-level-grid button:hover { border-color: #64dfff; background: #342961; }
.ball-loop-controls button:focus-visible,
.ball-loop-dialog button:focus-visible,
.ball-loop-level-grid button:focus-visible { outline: 3px solid rgba(36,111,229,.3); outline-offset: 2px; }
.ball-loop-controls button:disabled { cursor: wait; opacity: .5; }
.ball-loop-game.is-resolving canvas { cursor: progress; }
.ball-loop-game.is-invalid .ball-loop-canvas-wrap { animation: ball-loop-nudge .24s ease-in-out; }
.ball-loop-dialog { width: min(92vw, 680px); max-height: min(86vh, 760px); border: 1px solid #64539b; border-radius: 22px; padding: 22px; color: var(--loop-ink); background: #211a42; box-shadow: 0 28px 90px rgba(8,4,28,.55); }
.ball-loop-dialog::backdrop { background: rgba(12,31,41,.52); backdrop-filter: blur(3px); }
.ball-loop-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ball-loop-dialog-head p { margin: 0; color: #ada4cc; font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.ball-loop-dialog-head h2 { margin: 4px 0 0; }
.ball-loop-dialog-head > button { min-width: 48px; font-size: 1.55rem; }
.ball-loop-level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; overflow: auto; margin-top: 18px; max-height: 580px; padding: 2px; }
.ball-loop-level-grid button { display: grid; gap: 3px; text-align: center; }
.ball-loop-level-grid button strong { font-size: 1.05rem; }
.ball-loop-level-grid button small { overflow: hidden; color: #aaa0c9; font-size: .6rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ball-loop-level-grid button span { color: #b17400; font-size: .72rem; }
.ball-loop-level-grid button[aria-current="true"] { border-color: #5ee3ff; background: #30275d; box-shadow: inset 0 0 0 2px rgba(94,227,255,.42); }
.ball-loop-level-grid button:disabled { color: #81799c; background: #211d38; cursor: not-allowed; opacity: .72; }
.win-dialog, .fail-dialog { max-width: 500px; text-align: center; }
.win-dialog h2, .fail-dialog h2 { margin: 9px 0; font-size: 2rem; }
.win-stars { margin: 8px 0 18px; color: #e9a923; font-size: 2.3rem; letter-spacing: .08em; }
.win-dialog dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 20px; }
.win-dialog dl div { border: 1px solid #d7e4e9; border-radius: 13px; padding: 11px; background: #fff; }
.win-dialog dt { color: #677c89; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.win-dialog dd { margin: 3px 0 0; font-size: 1.1rem; font-weight: 950; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.dialog-actions button { flex: 1 1 125px; }
.ball-loop-guide { margin-top: clamp(40px, 6vw, 70px); }
.ball-loop-original-note { border: 1px solid #bce4d5; border-radius: 15px; padding: 16px 18px; background: #ebfaf4; }
.ball-loop-mechanisms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ball-loop-mechanisms section { border: 1px solid #d4e1e7; border-radius: 15px; padding: 16px; background: #fff; }
.ball-loop-mechanisms h3 { margin-top: 0; }
.ball-loop-mechanisms p { margin-bottom: 0; }
@keyframes ball-loop-nudge { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-6px); } 70% { transform: translateX(6px); } }
@media (max-width: 700px) {
  .ball-loop-game { margin-inline: -4px; border-radius: 20px; padding: 12px; }
  .ball-loop-hud dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ball-loop-status { min-height: 36px; margin-top: 8px; padding: 8px 10px; font-size: .78rem; }
  .ball-loop-controls {
    grid-template-columns: repeat(5, 40px);
    justify-content: center;
    gap: 6px;
    max-width: none;
    margin-top: 8px;
  }
  .ball-loop-controls button {
    position: relative;
    min-width: 40px;
    min-height: 40px;
    border-color: rgba(157,132,222,.25);
    border-radius: 10px;
    padding: 5px;
    background: rgba(35,28,70,.55);
    box-shadow: none;
  }
  .ball-loop-controls button b { color: rgba(96,223,255,.82); font-size: 1rem; }
  .ball-loop-controls button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ball-loop-level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ball-loop-mechanisms { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .ball-loop-hud dl div { padding: 8px; }
  .ball-loop-hud dd { font-size: .82rem; }
  .ball-loop-controls { gap: 5px; }
  .ball-loop-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ball-loop-game.is-invalid .ball-loop-canvas-wrap { animation: none; }
  .ball-loop-dialog::backdrop { backdrop-filter: none; }
}