.aa-game { --aa-ink:#2c2943; --aa-muted:#776f83; --aa-purple:#7653bf; max-width:760px; margin-inline:auto; color:var(--aa-ink); min-width:0; }
.aa-game *,.aa-game *::before,.aa-game *::after { box-sizing:border-box; }
.aa-game button,.aa-game input { font:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.aa-game button { cursor:pointer; border:1px solid #dcd4e7; background:#fff; color:var(--aa-ink); min-height:44px; border-radius:10px; font-weight:800; box-shadow:none; }
.aa-game button:disabled { cursor:default; opacity:.48; }
.aa-game button:focus-visible,.aa-game input:focus-visible,.aa-game summary:focus-visible,.aa-game [role="button"]:focus-visible { outline:3px solid #a58ad8; outline-offset:3px; }
.aa-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.aa-heading h2 { font-size:clamp(1.35rem,4vw,1.9rem); margin:6px 0 0; line-height:1.2; }
.aa-kicker { font-size:.62rem; font-weight:850; letter-spacing:.09em; color:#917bab; }
.aa-level { font-size:.76rem; font-weight:850; background:#f0e9f8; border-radius:20px; padding:8px 12px; }
.aa-intro { font-size:.93rem; line-height:1.6; color:var(--aa-muted); max-width:670px; margin:0 0 20px; }
.aa-hud { display:flex; gap:8px; justify-content:space-around; margin:16px 0; padding:13px 7px; border-block:1px solid #e6dfeb; text-align:center; }
.aa-hud > span { display:flex; flex-direction:column; gap:4px; font-size:.71rem; color:var(--aa-muted); min-width:0; }
.aa-hud strong { font-size:1.15rem; color:var(--aa-ink); font-weight:850; }
.aa-rhythm-field { position:relative; min-height:280px; height:clamp(280px,58vw,390px); overflow:hidden; border-radius:18px; background:linear-gradient(180deg,#303559,#65548b 68%,#9c79a4); border:1px solid #4a426b; isolation:isolate; }
.aa-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aa-sky i { position:absolute; width:140px; height:45px; border-radius:100%; background:#b6acd1; opacity:.07; top:12%; left:-30px; }
.aa-sky i:nth-child(2) { left:auto; right:-40px; top:38%; width:190px; }
.aa-sky i:nth-child(3) { width:330px; height:150px; top:auto; bottom:-100px; left:15%; opacity:.2; }
.aa-sky > span { color:#ffe7aa; position:absolute; left:7%; top:12%; font-size:1.2rem; opacity:.75; }
.aa-sky > span:nth-last-child(2) { left:69%; top:27%; font-size:.7rem; }
.aa-sky > span:last-child { left:83%; top:9%; font-size:1rem; }
.aa-note-lanes { position:absolute; inset:0 10px; display:grid; grid-template-columns:repeat(var(--aa-lanes),minmax(0,1fr)); gap:8px; }
.aa-note-lane { position:relative; background:#ffffff05; border-inline:1px solid #ffffff0d; min-width:0; }
.aa-lane-symbol { position:absolute; bottom:6%; inset-inline:0; color:#ffffff27; text-align:center; font-size:1.7rem; }
.aa-falling-note { position:absolute; left:50%; translate:-50% -50%; width:44px; height:35px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#46334d; font-weight:850; background:var(--aa-lane-color); border:2px solid #ffffff8f; z-index:2; }
.aa-falling-note[hidden] { display:none; }
.aa-lane-0 { --aa-lane-color:#f1a5be; }
.aa-lane-1 { --aa-lane-color:#e5c26a; }
.aa-lane-2 { --aa-lane-color:#8bc9bc; }
.aa-lane-3 { --aa-lane-color:#adbbec; }
.aa-hit-line { position:absolute; top:76%; left:9px; right:9px; height:3px; background:#ffefc4; pointer-events:none; z-index:1; }
.aa-hit-line span { position:absolute; right:0; top:8px; font-size:.49rem; letter-spacing:.09em; color:#fff0d2; font-weight:850; }
.aa-rhythm-overlay { position:absolute; inset:0; background:#312d52bf; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; padding:26px; color:white; text-align:center; z-index:4; }
.aa-rhythm-overlay[hidden] { display:none; }
.aa-rhythm-overlay strong { font-size:1.35rem; }
.aa-rhythm-overlay span { line-height:1.55; font-size:.86rem; max-width:350px; color:#e6dcf7; }
.aa-lane-pads { display:grid; grid-template-columns:repeat(var(--aa-lanes),minmax(0,1fr)); gap:9px; margin-top:10px; }
.aa-lane-pads button { background:var(--aa-lane-color); border-color:transparent; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.aa-lane-pads b { font-size:1.2rem; }
.aa-lane-pads span { font-size:.69rem; }
.aa-lane-pads .aa-pad-lit { border-color:#755b93; outline:2px solid #755b93; outline-offset:2px; }
.aa-live { text-align:center; font-size:.87rem; line-height:1.5; min-height:44px; display:flex; align-items:center; justify-content:center; color:#756087; margin:12px 0; padding:8px; }
.aa-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.aa-actions button { padding:11px 17px; font-size:.84rem; line-height:1.3; }
.aa-actions .aa-primary { background:var(--aa-purple); color:#fff; border-color:var(--aa-purple); }
.aa-practice { display:flex; align-items:center; justify-content:center; gap:9px; font-size:.8rem; color:var(--aa-muted); margin:18px 0; min-height:44px; }
.aa-practice input { accent-color:var(--aa-purple); width:19px; height:19px; }
.aa-footnote { font-size:.74rem; line-height:1.6; color:var(--aa-muted); text-align:center; margin:18px auto; max-width:470px; }
.aa-result { border-radius:18px; padding:25px 20px; background:#f3eef9; border:1px solid #e2d7ed; text-align:center; margin-top:22px; }
.aa-result[hidden] { display:none; }
.aa-result-icon { font-size:2.5rem; color:#9671b7; }
.aa-result h3 { font-size:1.4rem; line-height:1.3; margin:10px 0; }
.aa-result p { line-height:1.6; font-size:.9rem; margin:10px auto; max-width:540px; }
.aa-garden-scene { position:relative; border:1px solid #b4cda8; border-radius:16px; overflow:hidden; }
.aa-garden-scene > svg { display:block; width:100%; height:auto; }
.aa-map-bed { cursor:pointer; }
.aa-map-bed:hover circle,.aa-map-bed:focus-visible circle { fill:#d6e9b6; stroke:#678453; }
.aa-garden-scene [data-aa-plants],.aa-garden-scene [data-aa-bugs],.aa-garden-scene [data-aa-shots],.aa-garden-scene [data-aa-range] { pointer-events:none; }
.aa-garden-paused { position:absolute; inset:0; background:#edf7e0d9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:18px; }
.aa-garden-paused[hidden] { display:none; }
.aa-garden-paused strong { font-size:1.35rem; color:#517348; }
.aa-garden-paused span { color:#6d8664; font-size:.85rem; }
.aa-wave-note { text-align:center; font-size:.78rem; line-height:1.5; color:#6e8065; min-height:26px; margin:10px 0 15px; }
.aa-plant-shop { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.aa-plant-shop button { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 8px 13px; text-align:center; border-color:#d3dfc9; background:#f9fcf5; min-width:0; }
.aa-plant-shop button[aria-pressed="true"] { background:#edf6e2; border:2px solid #7b9d61; padding:8px 7px 12px; }
.aa-plant-shop svg { width:58px; height:58px; max-width:100%; }
.aa-plant-shop strong { font-size:.87rem; line-height:1.25; }
.aa-plant-shop span { font-size:.72rem; color:#737d51; }
.aa-plant-shop small { font-size:.69rem; font-weight:550; line-height:1.4; color:#6e7864; }
.aa-bed-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; max-width:460px; margin:17px auto 10px; }
.aa-bed-picker button { min-height:44px; border-color:#d0debd; background:#f7fbf2; font-size:.93rem; }
.aa-bed-picker button.aa-bed-filled { background:#dfeccf; }
.aa-bed-picker button.aa-bed-selected { border:2px solid #6b8b53; }
.aa-bed-detail { text-align:center; min-height:28px; color:#6a795e; font-size:.78rem; line-height:1.5; margin:9px 0 13px; }
.aa-guide { border-top:1px solid #e2e6db; margin-top:23px; padding-top:16px; font-size:.83rem; color:#6b7463; line-height:1.6; }
.aa-guide summary { color:#637957; font-weight:800; cursor:pointer; min-height:35px; }
.aa-guide p { margin:12px 0; }
@media(max-width:450px) {
  .aa-heading { gap:8px; }
  .aa-heading h2 { font-size:1.35rem; }
  .aa-kicker { font-size:.54rem; }
  .aa-level { font-size:.68rem; padding:7px 9px; }
  .aa-intro { font-size:.84rem; margin-bottom:15px; }
  .aa-hud { padding:11px 0; }
  .aa-hud > span { font-size:.64rem; }
  .aa-hud strong { font-size:1.04rem; }
  .aa-note-lanes { inset-inline:5px; gap:4px; }
  .aa-falling-note { width:37px; height:31px; font-size:1.1rem; border-radius:9px; }
  .aa-rhythm-field { min-height:265px; height:280px; }
  .aa-lane-pads { gap:7px; }
  .aa-lane-pads button { min-height:59px; }
  .aa-actions button { padding:10px 13px; font-size:.78rem; }
  .aa-plant-shop { gap:6px; }
  .aa-plant-shop strong { font-size:.78rem; }
  .aa-plant-shop small { font-size:.68rem; }
  .aa-plant-shop span { font-size:.7rem; }
  .aa-plant-shop svg { width:48px; height:48px; }
  .aa-bed-picker { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .aa-result { padding:20px 14px; }
}
@media(prefers-reduced-motion:reduce) { .aa-game * { transition:none !important; } }

.aa-wave-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.aa-wave-toolbar button { min-height:44px; padding:11px 18px; font-size:.84rem; }
.aa-wave-toolbar .aa-primary { background:var(--aa-purple); color:#fff; border-color:var(--aa-purple); }