/* V1.290Beta: cinematic clarity and material hierarchy without layout or icon changes. */
:root {
  --ui-cinematic-ink: #081b2d;
  --ui-cinematic-white: #f8fcff;
  --ui-cinematic-gold: #fff0bd;
  --ui-cinematic-cyan: #8edfff;
  --ui-cinematic-dim: rgba(3, 11, 22, 0.78);
}

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Keep the 4K home scene intact. Whole-screen haze was flattening the art. */
html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  > .arena {
  background: var(--luminary-home-bg) center / cover no-repeat, #dceaf4 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  > .arena::before,
html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  > .arena::after {
  content: none !important;
  display: none !important;
}

/* Crisp title treatment reads as engraved type instead of a blurred glow. */
html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .topbar h1 {
  color: var(--ui-cinematic-white) !important;
  -webkit-text-fill-color: var(--ui-cinematic-white) !important;
  -webkit-text-stroke: 0 !important;
  background: none !important;
  filter: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32),
    0 2px 3px rgba(5, 18, 32, 0.9),
    0 8px 20px rgba(5, 18, 32, 0.38) !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .topbar h1::before,
html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .topbar h1::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  #subtitle {
  color: rgba(248, 252, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(248, 252, 255, 0.94) !important;
  background: none !important;
  filter: none !important;
  font-weight: 760 !important;
  text-shadow: 0 2px 6px rgba(4, 17, 31, 0.86) !important;
}

/* Preserve the approved ornamental frame and reveal the scene art beneath it. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  )::after {
  background: var(--home-action-scene) center / cover no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    inset 0 -14px 24px rgba(6, 35, 58, 0.12),
    0 7px 18px rgba(7, 36, 61, 0.18) !important;
  filter: none !important;
  opacity: 1 !important;
  transition: box-shadow 150ms ease !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ) > :is(span, small) {
  color: var(--ui-cinematic-ink) !important;
  -webkit-text-fill-color: var(--ui-cinematic-ink) !important;
  font-synthesis: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ) > span {
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(6, 29, 48, 0.22) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ) > small {
  font-weight: 720 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  .mode-select button[data-mode].selected::after {
  box-shadow:
    inset 0 0 0 2px rgba(117, 211, 255, 0.92),
    inset 0 0 0 4px rgba(255, 255, 255, 0.34),
    inset 0 -16px 26px rgba(6, 35, 58, 0.14),
    0 0 0 1px rgba(255, 231, 161, 0.62),
    0 8px 22px rgba(13, 79, 119, 0.28) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ):is(:hover, :focus-visible):not(:disabled)::after {
  box-shadow:
    inset 0 0 0 2px rgba(137, 218, 255, 0.82),
    inset 0 -14px 24px rgba(6, 35, 58, 0.14),
    0 9px 24px rgba(9, 57, 91, 0.3) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ):focus-visible::before {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 7px rgba(91, 202, 255, 0.9)) !important;
}

/* Input surfaces stay mostly opaque so labels never dissolve into the scene. */
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .lobby-panel label:has(#nameInput) {
  color: #183f5d !important;
  background: rgba(247, 252, 255, 0.94) !important;
  border-color: rgba(86, 142, 182, 0.64) !important;
  box-shadow:
    0 8px 20px rgba(10, 42, 67, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(#nameInput, #joinCode) {
  color: #102e45 !important;
  background: rgba(250, 253, 255, 0.97) !important;
  border-color: rgba(88, 141, 180, 0.62) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A sharp cinematic dim keeps the underlying scene legible without frosted fog. */
html body:not(.maintenance-mode)
  :is(
    .rules-dialog,
    .control-dialog,
    .opportunity-dialog,
    .character-codex-dialog,
    .skill-inspect-dialog,
    .battle-character-dialog,
    .status-inspect-dialog,
    .identity-rules-dialog,
    .account-dialog
  ) {
  background: var(--ui-cinematic-dim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode)
  :is(
    .rules-box,
    .control-box,
    .opportunity-box,
    .character-codex-box,
    .skill-inspect-box,
    .battle-character-card,
    .status-inspect-box,
    .identity-rules-box,
    .account-dialog-shell
  ) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Active raster art is rendered at source fidelity; disabled/taken states retain their cues. */
html body:not(.maintenance-mode) .character-option:not(.taken):not(:disabled) .mini-art,
html body:not(.maintenance-mode) .character-codex-card .character-codex-art,
html body:not(.maintenance-mode) :is(#previewArt, #skillInspectArt, #battlePreviewArt).preview-art {
  opacity: 1 !important;
  image-rendering: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.solo.solo
    :is(
      .mode-select button[data-mode],
      .lobby-actions > #createBotRoom,
      .lobby-actions > #showRules,
      .lobby-actions > #showGameCodex
    )::after {
    transition: none !important;
  }
}