/* v0.1.62 – SOFT PASTEL | one component family for the 8 main controls.
   Drop-in after centered-shell.css; available to the next games automatically.
   No changes to game engines, PDF, settings, race or K-04 mode. */
html[data-theme] .primary-toolbar {
  --nav-item-height:46px;
  --nav-space:10px;
  gap:var(--nav-space)!important;
  padding:7px 13px!important;
  border-radius:18px!important;
  border:1px solid var(--theme-border)!important;
  background:var(--theme-elev)!important;
  box-shadow:0 4px 18px #142d4212,inset 0 1px 0 #ffffff75!important;
}
/* All buttons share EXACTLY the same geometry, material, typography and animation. */
html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool) {
  box-sizing:border-box!important;
  appearance:none;
  -webkit-appearance:none;
  flex:0 1 150px!important;
  width:150px!important;
  max-width:150px!important;
  min-width:0!important;
  height:var(--nav-item-height)!important;
  min-height:var(--nav-item-height)!important;
  max-height:var(--nav-item-height)!important;
  margin:0!important;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid var(--nav-border)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,var(--nav-start),var(--nav-end))!important;
  color:var(--nav-ink)!important;
  font-family:inherit!important;
  font-size:clamp(12px,.85vw,14px)!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  text-shadow:none!important;
  box-shadow:inset 0 1px 0 #ffffffaa,0 3px 0 var(--nav-shadow),0 5px 13px #15344712!important;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease!important;
  cursor:pointer;
}
html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool):hover:not(:disabled) {
  color:var(--nav-ink)!important;
  background:linear-gradient(180deg,var(--nav-hover-start),var(--nav-start))!important;
  border-color:var(--nav-outline)!important;
  filter:none!important;
  transform:translateY(-1px)!important;
  box-shadow:inset 0 1px 0 #fff,0 4px 0 var(--nav-shadow),0 10px 18px #14374a20!important;
}
html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool):active:not(:disabled) {
  transform:translateY(2px)!important;
  box-shadow:inset 0 1px 3px #142b3620,0 1px 0 var(--nav-shadow)!important;
}
html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool):focus-visible {
  outline:3px solid #e2a24b!important;
  outline-offset:3px!important;
  z-index:1;
}
/* The current navigation mode is clear without a bottom stripe or a heavy solid color. */
html[data-theme] .primary-toolbar .mode-button.active {
  border-color:var(--nav-outline)!important;
  background:linear-gradient(180deg,var(--nav-hover-start),var(--nav-start))!important;
  box-shadow:inset 0 0 0 1px var(--nav-border),inset 0 1px 0 #fff,0 3px 0 var(--nav-shadow),0 8px 14px #17344c22!important;
}
html[data-theme] .primary-toolbar .mode-settings-button:disabled {
  cursor:default!important;
  opacity:.58!important;
  filter:saturate(.6)!important;
  transform:none!important;
}
html[data-theme] .primary-toolbar .nav-icon,
html[data-theme] .primary-toolbar .theme-icon,
html[data-theme] .primary-toolbar .fullscreen-symbol,
html[data-theme] .primary-toolbar #mode-settings > span:first-child {
  display:inline-flex!important;
  flex:0 0 18px!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:20px!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1!important;
}
html[data-theme] .primary-toolbar :is(.top-tool .tool-label,.theme-label){display:inline!important;font-size:inherit!important;font-weight:inherit!important}
html[data-theme] .primary-toolbar .top-actions,
html[data-theme] .primary-toolbar .mode-nav{display:contents!important}
/* Restrained color accents; the shared material is identical across the entire family. */
html[data-theme="light"] .primary-toolbar #go-home {
 --nav-start:#fff2f6;--nav-end:#fae1ea;--nav-hover-start:#ffe7f0;
 --nav-ink:#8a2e56;--nav-border:#e8bacb;--nav-outline:#cb7298;--nav-shadow:#dab7c5;
}
html[data-theme="light"] .primary-toolbar #mode-class {
 --nav-start:#effaf7;--nav-end:#dbf1e9;--nav-hover-start:#e5f8f1;
 --nav-ink:#21645b;--nav-border:#b8dbd1;--nav-outline:#71b9a4;--nav-shadow:#b7d5cd;
}
html[data-theme="light"] .primary-toolbar #mode-race {
 --nav-start:#fff6ed;--nav-end:#ffead9;--nav-hover-start:#fff0df;
 --nav-ink:#915126;--nav-border:#f0c9ab;--nav-outline:#e6a26b;--nav-shadow:#e6c8b1;
}
html[data-theme="light"] .primary-toolbar #mode-print {
 --nav-start:#f2f5ff;--nav-end:#e1e8ff;--nav-hover-start:#e9edff;
 --nav-ink:#465a94;--nav-border:#c6d1f5;--nav-outline:#91a5e3;--nav-shadow:#c5cdea;
}
html[data-theme="light"] .primary-toolbar #mode-settings {
 --nav-start:#e7f8f4;--nav-end:#cceee6;--nav-hover-start:#daf6ee;
 --nav-ink:#0b6b60;--nav-border:#a7dcd0;--nav-outline:#55b5a5;--nav-shadow:#a9d6ca;
}
html[data-theme="light"] .primary-toolbar #theme-toggle {
 --nav-start:#f7f2ff;--nav-end:#eae0fb;--nav-hover-start:#f1e9ff;
 --nav-ink:#644b90;--nav-border:#d4c5f3;--nav-outline:#a995e1;--nav-shadow:#d0c2eb;
}
html[data-theme="light"] .primary-toolbar #open-help {
 --nav-start:#f0f8ff;--nav-end:#dfeeff;--nav-hover-start:#e8f3ff;
 --nav-ink:#29618d;--nav-border:#bcdaf2;--nav-outline:#81b5dc;--nav-shadow:#bfd9e8;
}
html[data-theme="light"] .primary-toolbar #fullscreen {
 --nav-start:#f5f8fa;--nav-end:#e4edf2;--nav-hover-start:#edf5f9;
 --nav-ink:#395468;--nav-border:#c4d5df;--nav-outline:#92b1c1;--nav-shadow:#c1d1dc;
}
html[data-theme="dark"] .primary-toolbar {
  background:#1b2f3c!important;
  border-color:#405968!important;
  box-shadow:0 5px 20px #0004,inset 0 1px 0 #ffffff12!important;
}
html[data-theme="dark"] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool) {
 box-shadow:inset 0 1px 0 #ffffff18,0 3px 0 var(--nav-shadow),0 6px 15px #0000003b!important;
}
html[data-theme="dark"] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool):hover:not(:disabled) {
 box-shadow:inset 0 1px 0 #ffffff28,0 4px 0 var(--nav-shadow),0 8px 16px #00000048!important;
}
html[data-theme="dark"] .primary-toolbar .mode-button.active {
 box-shadow:inset 0 0 0 1px var(--nav-outline),0 3px 0 var(--nav-shadow),0 7px 15px #00000045!important;
}
html[data-theme="dark"] .primary-toolbar #go-home {
 --nav-start:#523348;--nav-end:#472c3e;--nav-hover-start:#634059;
 --nav-ink:#ffdfec;--nav-border:#83536d;--nav-outline:#be83a4;--nav-shadow:#30202a;
}
html[data-theme="dark"] .primary-toolbar #mode-class {
 --nav-start:#204640;--nav-end:#193b38;--nav-hover-start:#28554d;
 --nav-ink:#d5fff0;--nav-border:#3f7770;--nav-outline:#74b7a2;--nav-shadow:#122d2b;
}
html[data-theme="dark"] .primary-toolbar #mode-race {
 --nav-start:#583e32;--nav-end:#493529;--nav-hover-start:#664a3a;
 --nav-ink:#ffe2c4;--nav-border:#89684c;--nav-outline:#cca078;--nav-shadow:#30251c;
}
html[data-theme="dark"] .primary-toolbar #mode-print {
 --nav-start:#334369;--nav-end:#2a3759;--nav-hover-start:#3c5078;
 --nav-ink:#e4edff;--nav-border:#6474a7;--nav-outline:#96a7e3;--nav-shadow:#1e2944;
}
html[data-theme="dark"] .primary-toolbar #mode-settings {
 --nav-start:#20554e;--nav-end:#194840;--nav-hover-start:#29685e;
 --nav-ink:#d4fff1;--nav-border:#4f9987;--nav-outline:#82cdb8;--nav-shadow:#15342f;
}
html[data-theme="dark"] .primary-toolbar #theme-toggle {
 --nav-start:#4c3c64;--nav-end:#403354;--nav-hover-start:#5d4c78;
 --nav-ink:#f3e8ff;--nav-border:#806e9b;--nav-outline:#b7a1da;--nav-shadow:#30263c;
}
html[data-theme="dark"] .primary-toolbar #open-help {
 --nav-start:#254e68;--nav-end:#1d405a;--nav-hover-start:#305c7a;
 --nav-ink:#e0f2ff;--nav-border:#567f9c;--nav-outline:#81b3d1;--nav-shadow:#1b3040;
}
html[data-theme="dark"] .primary-toolbar #fullscreen {
 --nav-start:#364a56;--nav-end:#2c3e49;--nav-hover-start:#415865;
 --nav-ink:#e8f5fa;--nav-border:#637f8d;--nav-outline:#95b8c9;--nav-shadow:#202f38;
}
@media(max-width:1330px) {
 html[data-theme] .primary-toolbar{gap:7px!important;padding:6px 9px!important}
 html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool){flex:0 1 139px!important;width:139px!important;max-width:139px!important;font-size:12px!important;gap:5px!important;padding:0 7px!important}
}
@media(max-width:1090px) {
 html[data-theme] .primary-toolbar{justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:thin!important;overscroll-behavior-x:contain}
 html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool){flex:0 0 133px!important;width:133px!important;min-width:133px!important;max-width:133px!important}
}
@media(max-width:520px) {
 html[data-theme] .primary-toolbar{--nav-item-height:35px;gap:6px!important;padding:5px 6px!important}
 html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool){flex:0 0 128px!important;width:128px!important;min-width:128px!important;max-width:128px!important;font-size:11px!important;border-radius:10px!important}
 html[data-theme] .primary-toolbar .nav-icon,html[data-theme] .primary-toolbar .theme-icon,
 html[data-theme] .primary-toolbar .fullscreen-symbol,html[data-theme] .primary-toolbar #mode-settings > span:first-child{font-size:14px!important;width:15px!important;flex-basis:15px!important}
}
@media(max-height:620px) {
 html[data-theme] .primary-toolbar{--nav-item-height:31px;padding-block:3px!important}
}
@media(prefers-reduced-motion:reduce) {
 html[data-theme] .primary-toolbar :is(.mode-button,.mode-settings-button,.top-tool){transition:none!important}
}
/* Legacy #go-home overrides used a strongly saturated background with !important.
   Explicitly supersede them so the home button belongs to the SAME pastel family. */
html[data-theme] .primary-toolbar #go-home {
 background:linear-gradient(180deg,var(--nav-start),var(--nav-end))!important;
 color:var(--nav-ink)!important;
 border-color:var(--nav-border)!important;
}
html[data-theme] .primary-toolbar #go-home:hover:not(:disabled) {
 background:linear-gradient(180deg,var(--nav-hover-start),var(--nav-start))!important;
 color:var(--nav-ink)!important;
 border-color:var(--nav-outline)!important;
}