/* Companions live outside the route container and keep their identity on navigation. */
body.has-companion-layer :is(.mascot-character,.mascot-callout,.practice-mascot) { display: none; }
.manual-start-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:24px; padding:12px 16px; color:var(--pastel-ink); background:#fff; border:1px solid var(--pastel-line); border-radius:14px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.manual-start-link svg { width:18px; height:18px; }
.manual-start-link:focus-visible { outline:3px solid #7855d8; outline-offset:4px; }
.practice-pattern-hint, .song-listen-hint { margin:20px 0 0; color:var(--pastel-ink); font-size:14px; line-height:1.5; }
.companion, .companion-track { --companion-ink:#403750; --companion-peach:#fff3e9; --companion-line:#ecd8ca; }
.companion { position:fixed; right:16px; bottom:max(18px,env(safe-area-inset-bottom)); z-index:140; width:112px; height:176px; translate:var(--guide-x,0px) var(--guide-y,0px); pointer-events:none; color:var(--companion-ink); font-family:"Arial Rounded MT Bold","Avenir Next",Nunito,system-ui,sans-serif; }
.companion:is(.is-open,.is-relaying,.is-collapsed) { translate:0 0; }
.companion[hidden], .companion [hidden], .companion-track[hidden] { display:none !important; }
body.dialog-open .companion, body.menu-open .companion, body.dialog-open .companion-track, body.menu-open .companion-track { visibility:hidden; }
.companion *, .companion *::before, .companion *::after { box-sizing:border-box; }
.companion button, .companion input, .companion label { pointer-events:auto; }
.companion button { font:inherit; color:inherit; cursor:pointer; }
.companion svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.companion button:focus-visible, .companion input:focus-visible, .companion-footer-call:focus-visible { outline:3px solid #7855d8; outline-offset:4px; }
.companion ::selection { color:#403750; background:#f7d5c3; }
.companion.is-docked-left { left:16px; right:auto; }
.companion-avatar { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:0; background:none; border:0; border-radius:18px; }
.companion-sprite { display:block; width:112px; height:149.33px; flex-shrink:0; background-repeat:no-repeat; background-size:1200% 100%; background-position:calc(var(--frame,4)*100%/11) 0; filter:drop-shadow(0 5px 5px rgba(64,55,80,.12)); }
.companion-sprite[data-character="girl"] { background-image:url("assets/mascots/girl-actions.webp"); }
.companion-sprite[data-character="boy"] { background-image:url("assets/mascots/boy-actions.webp"); }
.companion-sprite.faces-left { transform:scaleX(-1); }
.companion-caption { margin-top:-2px; padding:4px 9px; color:#403750; background:#fff; border:1px solid #ecd8ca; border-radius:999px; font-size:12px; line-height:1.4; font-weight:700; white-space:nowrap; }
.companion-avatar:hover .companion-caption { background:#fff3e9; }
.companion-panel { position:absolute; right:4px; bottom:186px; width:320px; max-width:calc(100vw - 32px); max-height:calc(100svh - 220px); overflow-y:auto; padding:18px; color:#403750; background:#fff; border:1px solid #e8c5ab; border-radius:22px; box-shadow:0 14px 40px rgba(64,55,80,.16); pointer-events:auto; scrollbar-width:thin; scrollbar-color:#b8a6c6 #fff3e9; }
.is-docked-left .companion-panel { left:0; right:auto; }
.companion-panel-head { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; align-items:center; gap:2px; margin:-6px -6px 10px 0; }
.companion-panel-head h2 { margin:0; color:#403750; font-size:18px; font-weight:900; line-height:1.15; letter-spacing:-.02em; }
.companion-icon { width:44px; height:44px; display:grid; place-items:center; padding:10px; border:0; background:transparent; border-radius:50%; }
.companion-icon:hover { background:#f4f0f8; }
.companion-message { margin:0 0 17px; font-size:16px; line-height:1.5; color:#554b61; }
.companion-actions { display:grid; gap:8px; }
.companion-actions > button { min-height:44px; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid #b6a2c4; border-radius:14px; font-size:14px; font-weight:800; line-height:1.4; text-align:left; }
.companion-actions > button span { flex:1; min-width:0; }
.companion-actions > button svg:last-child { width:16px; height:16px; }
.companion-actions > button:hover, .companion-actions > button.is-performing { background:#f4f0f8; }
.companion-settings label { min-height:44px; display:flex; align-items:center; gap:11px; font-size:15px; font-weight:800; line-height:1.4; cursor:pointer; }
.companion-settings input { width:21px; height:21px; margin:0; accent-color:#7855d8; }
.companion-settings p { margin:12px 0 18px; color:#665a73; font-size:14px; line-height:1.5; }
.companion-settings > button { min-height:44px; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; padding:10px; border:1px solid #b6a2c4; background:#fff; border-radius:14px; font-size:14px; font-weight:700; }
.companion-settings > button:hover { background:#fff3e9; }
.companion-teaser { display:none; position:absolute; right:2px; bottom:186px; width:max-content; max-width:245px; padding:11px 15px; background:#fff; border:1px solid #e8c5ab; border-radius:16px; box-shadow:0 8px 25px rgba(64,55,80,.1); color:#403750; font-size:14px; line-height:1.4; font-weight:700; }
.companion.has-teaser:not(.is-open):not(.is-collapsed) .companion-teaser { display:block; }
.companion.is-relaying.has-teaser .companion-teaser { display:block; }
.is-docked-left .companion-teaser { right:auto; left:2px; }
.companion-launcher { position:absolute; right:0; bottom:0; min-height:48px; width:max-content; max-width:calc(100vw - 32px); display:flex; align-items:center; gap:8px; padding:6px 14px 6px 9px; color:#403750; background:#fff; border:1px solid #e8c5ab; border-radius:999px; box-shadow:0 8px 25px rgba(64,55,80,.1); font-size:14px; font-weight:800; }
.companion-launcher img { width:24px; height:34px; object-fit:contain; }
.companion-launcher:hover { background:#fff3e9; }
.companion.is-collapsed { width:180px; height:48px; }
.companion.is-compact { width:180px; height:48px; }
.companion.is-quiet .companion-teaser, .companion.is-compact .companion-teaser { display:none !important; }
.companion.is-sheltered { visibility:hidden; }
.companion-relay { position:absolute; bottom:17px; right:0; width:112px; height:149.33px; pointer-events:none; }
.companion-relay .companion-sprite { position:absolute; left:0; bottom:0; }
.companion.is-relaying .companion-avatar { visibility:hidden; }
.companion.is-relaying .companion-panel { visibility:hidden; }
.companion-five { display:none; position:absolute; left:5px; top:7px; width:30px !important; height:30px !important; color:#eaaa51; }
.companion.is-contact .companion-five { display:block; }
.companion-footer-call { min-height:44px; margin-top:14px; padding:8px 0; color:#403750; background:transparent; border:0; border-radius:4px; font:inherit; font-size:14px; font-weight:700; text-align:left; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.has-companion-layer .site-footer nav { position: relative; z-index: 141; }
.companion-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.companion-track { position:fixed; right:44px; top:145px; bottom:90px; width:32px; z-index:125; pointer-events:none; }
.companion-track.is-yielding { visibility:hidden; }
.companion-track-road { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.companion-track-road path { fill:none; stroke-width:6; stroke-linecap:round; opacity:.28; }
.companion-track-road .companion-road-progress { opacity:.9; clip-path:inset(0 0 calc((1 - var(--progress,0))*100%) 0); }
.companion-track-road.is-horizontal { display:none; }
.companion-track > span { position:absolute; left:0; top:calc(var(--stop)/6*(100% - 32px)); width:32px; height:32px; display:grid; place-items:center; color:#403750; background:#fff; border:2px solid var(--note-color); border-radius:50%; font:800 11px/1 "Avenir Next",system-ui,sans-serif; }
.companion-track > span.is-reached { border-width:4px; box-shadow:0 2px 6px rgba(64,55,80,.12); }
.has-companion-journey .companion { translate:none; }
.has-companion-journey :is(.companion-avatar, .companion-teaser) { transition: opacity .16s ease; }
.has-companion-journey .is-crossing :is(.companion-avatar, .companion-teaser) { opacity: 0; pointer-events: none; }
.has-companion-journey .companion:not(.is-relaying) .companion-panel { position:fixed; bottom:24px; right:140px; }

@media (max-width:639px) {
  .companion { right:14px; bottom:max(14px,env(safe-area-inset-bottom)); width:78px; height:130px; }
  .companion.is-docked-left { left:14px; }
  .companion-sprite { width:78px; height:104px; }
  .companion-caption { margin-top:2px; padding:3px 7px; font-size:11px; }
  .companion-panel { right:0; bottom:138px; width:304px; max-width:calc(100vw - 28px); max-height:calc(100svh - 200px); padding:16px; border-radius:20px; }
  .companion-panel-head { grid-template-columns:minmax(0,1fr) 44px 44px; }
  .companion-panel-head h2 { font-size:17px; }
  .companion-message { font-size:15px; }
  .companion-teaser { bottom:140px; max-width:min(225px,calc(100vw - 30px)); font-size:13px; }
  .companion-relay { right:-10px; bottom:15px; width:112px; height:149.33px; }
  .companion-relay .companion-sprite { width:112px; height:149.33px; }
  .companion.is-relaying { right:18px; }
  .companion.is-relaying .companion-teaser { bottom:180px; }
  .companion.is-collapsed { width:180px; height:48px; }
  .companion-track { top:auto; left:18px; right:18px; bottom:17px; width:auto; height:28px; }
  .companion-track-road.is-vertical { display:none; }
  .companion-track-road.is-horizontal { display:block; }
  .companion-track > span { top:0; left:calc(var(--stop)/6*(100% - 28px)); width:28px; height:28px; font-size:10px; }
  .has-companion-journey .companion:not(.is-relaying) .companion-panel { left:50%; right:auto; bottom:190px; transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce) {
  .companion *, .companion *::before, .companion *::after { animation:none !important; transition:none !important; }
}