/* All navigation styles are isolated from game UI. */
.cc-switch-trigger,
.cc-switch-dialog .cc-switch-button {
  box-sizing: border-box;
  min-width: 64px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #cabdab;
  border-radius: 12px;
  background: #fffaf1;
  color: #263c37;
  font:
    700 14px/1.2 system-ui,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: none;
  flex-shrink: 0;
  touch-action: manipulation;
}
.cc-switch-trigger:hover,
.cc-switch-dialog .cc-switch-button:hover {
  background: #ede7d9;
}
.cc-switch-trigger:focus-visible,
.cc-switch-dialog :focus-visible {
  outline: 3px solid #1b7963;
  outline-offset: 3px;
}
.cc-switch-return-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cc-switch-return-row > button {
  margin: 0 !important;
}
.cc-switch-host {
  gap: 6px;
}
header .cc-switch-host {
  flex-wrap: wrap;
}
header:has(> .cc-switch-host) {
  flex-wrap: wrap;
  gap: 8px;
}
#hud.cc-switch-host {
  flex-wrap: wrap;
}
#hud.cc-switch-host .cc-switch-trigger {
  min-width: 60px;
  padding: 8px;
  font-size: 12px;
}
.cc-switch-dialog {
  box-sizing: border-box;
  position: fixed;
  /* Keep Close in place when the catalog loads or a confirmation replaces it. */
  inset: 16px 0 auto;
  margin: 0 auto;
  padding: 24px;
  width: min(780px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid #d1c6b7;
  border-radius: 24px;
  background: #fffaf1;
  color: #233b34;
  box-shadow: 0 20px 90px #102a2455;
  text-align: left;
  font:
    15px/1.5 system-ui,
    sans-serif;
  letter-spacing: 0;
  touch-action: pan-y;
  overscroll-behavior: contain;
  z-index: 10000;
}
.cc-switch-dialog::backdrop {
  background: #13251ec2;
  backdrop-filter: blur(5px);
}
.cc-switch-dialog * {
  box-sizing: border-box;
}
.cc-switch-dialog [hidden] {
  display: none !important;
}
.cc-switch-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cc-switch-dialog h2 {
  font:
    750 27px/1.15 system-ui,
    sans-serif;
  color: #233b34;
  margin: 0;
  text-shadow: none;
  letter-spacing: -0.5px;
}
.cc-switch-dialog h3 {
  font:
    700 22px/1.3 system-ui,
    sans-serif;
  color: #233b34;
  margin: 0 0 12px;
}
.cc-switch-note {
  margin: 12px 0 20px;
  color: #59695d;
  font-size: 14px;
  line-height: 1.5;
}
.cc-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cc-switch-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100px;
  border: 1px solid #d7cbbb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: #263c37;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.12s;
  touch-action: manipulation;
}
.cc-switch-card:hover {
  transform: translateY(-2px);
  border-color: #487765;
}
.cc-switch-card[aria-current] {
  border: 2px solid #39745d;
  background: #edf3e9;
}
.cc-switch-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.cc-switch-name {
  padding: 11px 12px;
  font-weight: 700;
  line-height: 1.3;
}
.cc-switch-current {
  padding: 0 12px 10px;
  color: #39745d;
  font-size: 12px;
  font-weight: 700;
}
.cc-switch-picks .cc-switch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cc-switch-picks .cc-switch-card img {
  max-height: 120px;
}
.cc-switch-duration {
  margin: 0 12px 8px;
  color: #39745d;
  font-size: 12px;
  font-weight: 700;
}
.cc-switch-description,
.cc-switch-ai {
  margin: 0 12px 10px;
  color: #59695d;
  font-size: 13px;
  line-height: 1.45;
}
.cc-switch-ai {
  color: #294c42;
}
.cc-switch-play {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 12px;
  background: #edf3e9;
  font-weight: 700;
}
.cc-switch-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  border-top: 1px solid #ded3c4;
  margin-top: 20px;
  padding-top: 14px;
}
.cc-switch-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #225943;
  font-weight: 700;
  text-decoration: underline;
}
.cc-switch-status {
  grid-column: 1/-1;
}
.cc-switch-confirm {
  padding: 18px;
  background: #eee7da;
  border-radius: 14px;
}
.cc-switch-confirm .cc-switch-button {
  margin: 12px 8px 0 0;
}
.cc-switch-confirm p {
  margin: 0;
}
@media (max-width: 540px) {
  .cc-switch-dialog {
    top: 10px;
    padding: 18px;
    border-radius: 20px;
    max-height: calc(100dvh - 20px);
  }
  .cc-switch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cc-switch-name {
    font-size: 13px;
    padding: 10px;
  }
  .cc-switch-dialog h2 {
    font-size: 24px;
  }
  .cc-switch-trigger {
    padding: 9px 10px;
    min-width: 60px;
  }
  .topbar > .controls.cc-switch-host {
    flex-wrap: wrap;
  }
  .map-head.cc-switch-host {
    flex-wrap: wrap;
  }
  .quiz-head.cc-switch-host {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-switch-card {
    transition: none;
  }
}
/* Reserve the existing companion's bottom corner on tall Kids cover screens. */
.screen:has(> .cc-switch-return-row) {
  justify-content: safe center;
  padding-bottom: 100px;
}
.cc-switch-return-row {
  scroll-margin-bottom: 110px;
}
.cc-switch-return-row .cc-switch-trigger {
  scroll-margin-bottom: 110px;
}
.cc-switch-heading {
  position: sticky;
  top: -24px;
  padding: 8px 0;
  background: #fffaf1;
  z-index: 1;
}
@media (max-width: 540px) {
  .cc-switch-heading {
    top: -18px;
  }
}