/* A single header composition across the library and every franchise. */
.canon-header{--shell-accent:var(--accent,#ffc365);position:sticky!important;top:0!important;z-index:50!important;display:grid!important;grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr);align-items:center;gap:22px;height:80px!important;min-height:80px!important;margin:0!important;padding:0 4.5%!important;border:0!important;background:#101217e0!important;backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 10px 40px #00000012;color:#f5f4f1;font-family:Inter,Arial,sans-serif}
.canon-header .header-brand{display:flex;align-items:center;gap:22px;min-width:0}.world-wordmark{font:600 10px/1.4 Inter,sans-serif;color:#b9bdc9;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase}.canon-header .collection-return{display:none}
.canon-header .header-links{display:flex!important;align-items:center;gap:24px;font:500 11px Inter,sans-serif}.canon-header .header-links a{padding:12px 0;color:#b0b4c1}.canon-header .header-links a:hover{color:#fff}.canon-header .header-links .nav-current{color:#fff}.canon-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.canon-header :is(.music-dock,#sound-hub){display:flex!important;align-items:center;height:42px;width:210px;min-width:0;overflow:hidden;border:0!important;border-radius:11px;background:#ffffff06;box-shadow:none;padding:0;gap:0}
.canon-header :is(#music-toggle,#music-play-pause){width:38px!important;height:42px!important;flex:0 0 38px;padding:0!important;display:grid;place-items:center;background:transparent!important;border:0!important;color:var(--shell-accent);font:14px Inter,sans-serif}
.canon-header :is(#music-options,#sound-open){display:flex;align-items:center;gap:11px;min-width:0;flex:1;height:42px;padding:0 12px 0 5px!important;border:0!important;background:transparent!important;color:#eee;box-shadow:none;font:11px Inter,sans-serif}
.canon-header :is(.equalizer,.music-wave){display:flex;align-items:center;gap:3px;flex:0 0 16px;width:16px!important;height:18px!important;margin:0;border:0}.canon-header :is(.equalizer,.music-wave) i{width:2px;background:var(--shell-accent);border-radius:2px}
.canon-header :is(#music-options>span:last-child,.hub-track){display:flex!important;flex-direction:column;gap:3px;min-width:0!important;text-align:left;overflow:hidden;width:100%;margin:0;border:0!important}.canon-header :is(#music-options b,.hub-track b){display:block!important;font:500 10px/1.3 Inter,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canon-header :is(#music-status,.hub-track small){display:block!important;font:400 8px/1.2 Inter,sans-serif;color:#9da7b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.canon-header :is(.header-log,.progress-pill){display:flex;align-items:center;gap:8px;padding:11px 13px!important;min-height:42px;background:#ffffff07;border:0!important;border-radius:11px;color:#dedfe7;font:500 11px Inter,sans-serif;white-space:nowrap}.canon-header .progress-pill .desktop-only,.canon-header .tiny-bolt{display:none}.canon-header :is(.header-log,.progress-pill):hover{background:#ffffff0d}
.canon-header :is(#motion-toggle,.bolt-counter){height:34px;width:32px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#b0b4c1}.canon-header .bolt-counter{display:none}.canon-header #motion-toggle svg{width:15px;height:15px}.canon-header .header-log>span{display:inline!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important}
.canon-logo{--brand-size:29px;position:relative;display:block;flex:0 0 auto;height:47px;min-width:42px;width:155px;padding:0!important;border:0!important;background:transparent!important;overflow:visible;cursor:pointer;font-family:Inter,Arial,sans-serif;font-weight:800;line-height:1.15;font-size:var(--brand-size);isolation:isolate}
.brand-letters{position:absolute;inset:0;pointer-events:none}.brand-letter{position:absolute;left:0;top:0;padding:1px 1px 5px;white-space:nowrap;transform-origin:50% 70%;color:transparent;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent;user-select:none;font:inherit;will-change:transform,opacity}.brand-canon{background:linear-gradient(150deg,#fff 30%,#c6d1ff)}.brand-run{background:linear-gradient(135deg,#4f7dff,#854bff 60%,#f448df);filter:drop-shadow(0 2px 8px #923dff30)}
.brand-track{position:absolute;left:3px;bottom:9px;height:2px;width:140px;border-radius:20px;transform-origin:left;background:linear-gradient(90deg,#394b83,#6855fb 50%,#eb47d8);box-shadow:0 3px 12px #7856fc25;pointer-events:none}.brand-node{position:absolute;left:136px;bottom:6px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#a368ff,#f448df);box-shadow:0 0 12px #d73bda40;pointer-events:none}.brand-node:after{content:'';position:absolute;inset:2px;border-radius:50%;background:#101217}
.canon-header button:focus-visible,.canon-header a:focus-visible{outline:0!important;box-shadow:0 0 24px #8674ff35;border-radius:8px}.footer-wordmark{font:700 18px Inter,sans-serif;letter-spacing:-.045em}.footer-wordmark em{font-style:normal;color:#a380ff}
.canon-header #hub-sound{padding:10px 12px;border:0;border-radius:11px;background:#ffffff04;color:#9da4b8;font:10px Inter;white-space:nowrap}.canon-header #hub-sound[aria-pressed=true]{color:#cbc3f3}.canon-header #hub-sound:hover{background:#ffffff09}
.brand-letter:nth-child(6){background:linear-gradient(145deg,#6094ff,#8160ff)}.brand-letter:nth-child(7){background:linear-gradient(145deg,#8160ff,#b555ee)}.brand-letter:nth-child(8){background:linear-gradient(145deg,#b555ee,#ec5ad8)}
@media(max-width:1150px){.world-wordmark{display:none}.canon-header{gap:16px;grid-template-columns:1fr auto 1fr}.canon-header .header-links{gap:20px}.canon-header .header-actions{gap:8px}}
@media(max-width:850px){.canon-header{grid-template-columns:1fr auto;gap:12px;padding:0 24px!important}.canon-header .header-links{display:none!important}.canon-header .collection-return{display:block;font:18px Inter;padding:12px 0;color:#9da7b8}.canon-header .header-brand{gap:13px}.canon-header :is(.music-dock,#sound-hub){width:185px}}
@media(max-width:600px){.canon-header{height:70px!important;min-height:70px!important;padding:0 18px!important;gap:8px}.canon-header .header-brand{gap:9px}.canon-logo{--brand-size:25px;height:42px}.brand-track{bottom:7px}.brand-node{bottom:4px}.canon-header :is(.music-dock,#sound-hub){width:66px;height:39px;background:#ffffff04}.canon-header :is(#music-toggle,#music-play-pause){flex-basis:31px;width:31px!important;height:39px!important}.canon-header :is(#music-options,#sound-open){height:39px;gap:0;padding:0 8px 0 2px!important}.canon-header :is(#music-options>span:last-child,.hub-track){display:none!important}.canon-header :is(.header-log,.progress-pill){min-height:39px;padding:9px 10px!important;font-size:10px}.canon-header .header-actions{gap:7px}.canon-header #motion-toggle{display:none}.canon-header .header-log-label{display:none!important}}
@media(max-width:360px){.canon-header{padding:0 14px!important}.canon-header .canon-logo{--brand-size:20px;height:38px}.canon-header :is(.music-dock,#sound-hub){width:60px}.canon-header .header-actions{gap:5px}.canon-header :is(.header-log,.progress-pill){padding:9px 8px!important}}
.sound-motion-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0;color:#d4d7de;font-size:11px}.sound-motion-row #motion-toggle{display:grid;place-items:center;width:38px;height:32px;border:0;background:#ffffff06;border-radius:8px;color:#c5cad6}.sound-motion-row #motion-toggle svg{width:16px;height:16px}.sound-motion-row #motion-toggle:focus-visible{outline:0;box-shadow:0 0 24px #8674ff35}
.canon-header .header-links a::after{display:none!important}.canon-header .bolt-counter{display:none!important}

/* Compact phone shell: the bottom dock owns progress and route navigation. */
.ui-icon{display:inline-block;width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-.18em;pointer-events:none}
.mobile-dock{display:none}
#toast button{background:transparent;color:inherit;font:inherit;text-decoration:underline;padding:4px 8px;border:0}
@media(max-width:800px){
  .has-mobile-dock{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .has-mobile-dock .canon-header{height:48px!important;min-height:48px!important;padding:0 16px!important;grid-template-columns:1fr auto}
  .has-mobile-dock .canon-header .header-links,.has-mobile-dock .canon-header :is(.header-log,.progress-pill,.collection-return){display:none!important}
  .has-mobile-dock .canon-logo{--brand-size:22px;height:36px}
  .has-mobile-dock .canon-header :is(.music-dock,#sound-hub){width:66px;height:40px}
  .has-mobile-dock .canon-header :is(#music-toggle,#music-play-pause){width:32px!important;height:40px!important;flex-basis:32px}
  .has-mobile-dock .canon-header :is(#music-options,#sound-open){height:40px;padding:0 8px 0 2px!important;gap:0}
  .has-mobile-dock .canon-header :is(#music-options>span:last-child,.hub-track){display:none!important}
  .has-mobile-dock .mobile-dock{position:fixed;inset:auto 0 0;z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:#101217f2;backdrop-filter:blur(22px);box-shadow:0 -8px 30px #0003}
  .mobile-dock .dock-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:50px;padding:4px;border:0;background:transparent;color:#d3d5df;font:500 11px Inter,Arial,sans-serif;text-decoration:none;border-radius:10px}
  .mobile-dock .dock-button>span{font:inherit;color:inherit}
  .mobile-dock .dock-button>.ui-icon{width:21px;height:21px;color:var(--accent,#a380ff)}
  .mobile-dock .dock-button:focus-visible{outline:0;background:#ffffff10;box-shadow:0 0 18px #8674ff35}
  .has-mobile-dock :is(#journey,#collection,.expedition-card,.case-entry,#level-area,[id^="entry-"]){scroll-margin-top:64px}
  .has-mobile-dock .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}
#toast.visible button{pointer-events:auto}
@media(max-width:800px){.has-mobile-dock #toast:is(.visible,.show){top:60px;bottom:auto;background:#171d2bf2;color:#f5f4f1;border-radius:12px;box-shadow:0 8px 30px #0004}}