/* Cheerful shell header + isolated custom authoring refinements. */

body:not(.is-game):not(.is-challenge):not(.is-custom) .categories-header {
  min-height: 64px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 20px;
  background: #f8fbff;
  box-shadow: 7px 8px 18px rgba(63, 111, 168, .18), -7px -7px 18px rgba(255, 255, 255, .94);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .categories-header::after {
  content: "";
  position: absolute;
  right: 68px;
  bottom: -2px;
  left: 68px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff2676 0 48%, #12bdf5 52% 100%);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .logo-text {
  color: #0878e9;
  font-weight: 950;
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .logo-mark {
  background: #ffffff;
  box-shadow: 5px 6px 13px rgba(0, 116, 255, .18), -5px -5px 13px #ffffff;
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .xp-chip {
  color: #0878e9;
  background: #eefaff;
  box-shadow: inset 0 0 0 2px rgba(18, 189, 245, .18), 5px 6px 13px rgba(0, 116, 255, .14);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .xp-chip span {
  color: #ffffff;
  background: #ff2676;
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .header-back {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 15px;
  color: #ffffff;
  background: #0878e9;
  box-shadow: 5px 6px 13px rgba(0, 116, 255, .28), -4px -4px 12px #ffffff;
  transition: transform 120ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1), background-color 180ms cubic-bezier(.23, 1, .32, 1);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .header-back:active {
  transform: scale(.95);
  background: #0067d4;
  box-shadow: inset 4px 4px 9px rgba(0, 54, 125, .28);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) .header-back:focus-visible {
  outline: 3px solid #ff2676;
  outline-offset: 3px;
}

#homeScreen .activation-copy h1 {
  color: var(--r-blue);
  animation: dorahi-home-heading-pole-shift 5200ms var(--ease-in-out) infinite alternate both;
}

/* Page headings use the same two semantic poles as the choices. Each root
   owns one stable accent so color works as wayfinding, not decoration. */
body:not(.is-game):not(.is-challenge):not(.is-custom) :is(
  #categoriesScreen,
  #liveRoomScreen,
  #leaderboardScreen,
  #badgesScreen,
  #engagementScreen
) {
  --page-heading-color: var(--r-blue);
}

body:not(.is-game):not(.is-challenge):not(.is-custom) :is(
  #modesScreen,
  #profileScreen,
  #dnaScreen,
  #submissionsScreen
) {
  --page-heading-color: var(--r-pink);
}

body:not(.is-game):not(.is-challenge):not(.is-custom)
  .screen:not(#customScreen)
  .categories-titlebar
  :is(h1, h2) {
  color: var(--page-heading-color, var(--r-blue));
}

#homeScreen .seasonal-events .section-heading h2 { color: var(--r-blue); }
#homeScreen .module-heading h2 { color: var(--r-pink); }

@keyframes dorahi-home-heading-pole-shift {
  0% {
    color: var(--r-blue);
    text-shadow: 0 10px 26px color-mix(in srgb, var(--r-blue) 18%, transparent);
  }
  100% {
    color: var(--r-pink);
    text-shadow: 0 10px 26px color-mix(in srgb, var(--r-pink) 18%, transparent);
  }
}

#homeScreen .activation-copy > p {
  color: #536b84;
}

#homeScreen #openGame {
  color: #ffffff;
  background: #0878e9;
  box-shadow: 8px 9px 20px rgba(0, 116, 255, .28), -6px -6px 16px #ffffff;
}

#homeScreen #openGame b { color: #ffe45e; }

body.is-custom #customScreen .categories-header {
  min-height: 64px;
  margin-bottom: 30px;
  padding: 8px 10px 8px 12px;
  border-radius: 20px;
  background: #f8fbff;
  box-shadow: 7px 8px 18px rgba(63, 111, 168, .18), -7px -7px 18px rgba(255, 255, 255, .94);
}

body.is-custom #customScreen .categories-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.is-custom #customScreen .logo-text { color: #0878e9; font-weight: 950; }
body.is-custom #customScreen .xp-chip { color: #0878e9; background: #eefaff; box-shadow: inset 0 0 0 2px rgba(18, 189, 245, .18), 5px 6px 13px rgba(0, 116, 255, .14); }
body.is-custom #customScreen .xp-chip span { color: #ffffff; background: #ff2676; }
body.is-custom #customScreen .eyebrow { color: #ff2676; }
body.is-custom #customScreen .custom-titlebar h2 { color: #0878e9; }
body.is-custom #customScreen .custom-titlebar p { color: #536b84; }

body.is-custom #customScreen .header-back {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 15px;
  color: #ffffff;
  background: #0878e9;
  box-shadow: 5px 6px 13px rgba(0, 116, 255, .28), -4px -4px 12px #ffffff;
  transition: transform 120ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1);
}

body.is-custom #customScreen .header-back:active { transform: scale(.95); box-shadow: inset 4px 4px 9px rgba(0, 54, 125, .28); }
body.is-custom #customScreen .header-back:focus-visible { outline: 3px solid #ff2676; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #homeScreen .activation-copy h1 {
    animation: none;
    color: var(--r-blue);
    text-shadow: none;
  }
}

body.is-custom #customForm .custom-choice { min-height: 262px; }
body.is-custom #customForm .custom-choice > span { justify-content: center; font-size: 15px; }

body.is-custom #customForm .custom-choice textarea {
  width: 100%;
  min-width: 0;
  height: 184px;
  min-height: 184px;
  max-height: 184px;
  padding: 13px;
  resize: none;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 17px;
  outline: none;
  color: #ffffff;
  background: rgba(8, 39, 91, .16);
  box-shadow: inset 4px 5px 12px rgba(8, 39, 91, .18);
  font: 800 14px/1.7 "Vazirmatn", Tahoma, sans-serif;
  text-align: right;
  box-sizing: border-box;
  caret-color: #ffffff;
}

body.is-custom #customForm .custom-choice textarea::placeholder { color: rgba(255, 255, 255, .82); }
body.is-custom #customForm .custom-choice textarea:focus { border-color: #ffffff; box-shadow: inset 4px 5px 12px rgba(8, 39, 91, .2), 0 0 0 3px rgba(255, 255, 255, .32); }
body.is-custom #customForm .primary { background: #0878e9; box-shadow: 8px 9px 18px rgba(0, 116, 255, .25), -6px -6px 16px #ffffff; }
body.is-custom #customForm .primary b { color: #ffe45e; }

@media (max-width: 390px) {
  body.is-custom #customForm .custom-choice { min-height: 166px; }
  body.is-custom #customForm .custom-choice textarea { height: 94px; min-height: 94px; max-height: 94px; }
}

@media (hover: hover) and (pointer: fine) {
  body:not(.is-game):not(.is-challenge):not(.is-custom) .header-back:hover,
  body.is-custom #customScreen .header-back:hover { transform: translateY(-2px); background: #ff2676; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.is-game):not(.is-challenge):not(.is-custom) .header-back,
  body.is-custom #customScreen .header-back { transition: box-shadow 120ms cubic-bezier(.23, 1, .32, 1); }
}