:root {
  --portal-ink: #1e2430;
  --portal-muted: #586173;
  --portal-paper: #fff9ef;
  --portal-surface: rgba(255, 255, 255, 0.94);
  --portal-line: #d9e1ec;
  --portal-blue: #2364a6;
  --portal-blue-dark: #173f70;
  --portal-green: #3f8d55;
  --portal-coral: #ec624f;
  --portal-yellow: #f3b73f;
  --portal-teal: #168a93;
  --portal-shadow: 0 18px 45px rgba(23, 47, 79, 0.14);
  --portal-radius: 8px;
}

body.portal-theme {
  color: var(--portal-ink);
  background:
    linear-gradient(0deg, rgba(255, 249, 239, 0.78), rgba(255, 249, 239, 0.78)),
    url("portal-lupita-mauri-hero.png") center / cover fixed,
    var(--portal-paper) !important;
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0;
}

body.portal-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 249, 239, 0.92), rgba(255, 249, 239, 0.72)),
    url("lupita-y-mauri-reference.jpg") right bottom / min(430px, 48vw) auto no-repeat;
}

body.portal-theme,
body.portal-theme * {
  letter-spacing: 0 !important;
}

body.portal-theme img,
body.portal-theme svg {
  max-width: 100%;
}

body.portal-theme h1,
body.portal-theme h2,
body.portal-theme h3 {
  color: var(--portal-blue-dark);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

body.portal-theme p,
body.portal-theme li,
body.portal-theme label,
body.portal-theme .subtitle,
body.portal-theme .sub,
body.portal-theme .mini,
body.portal-theme .note,
body.portal-theme .tips {
  color: var(--portal-muted);
}

body.portal-theme .app,
body.portal-theme .card,
body.portal-theme .screen,
body.portal-theme .sidebar,
body.portal-theme .side-panel,
body.portal-theme .game-panel,
body.portal-theme .builder-right,
body.portal-theme .modal-content,
body.portal-theme .puzzle-wrapper,
body.portal-theme .summary-box,
body.portal-theme .case-box,
body.portal-theme .law-process,
body.portal-theme .final-law,
body.portal-theme .mission-card,
body.portal-theme .step-panel,
body.portal-theme .diploma-card {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: var(--portal-radius) !important;
  box-shadow: var(--portal-shadow) !important;
}

body.portal-theme .topbar,
body.portal-theme .header {
  background: rgba(255, 249, 239, 0.94) !important;
  border: 1px solid rgba(30, 36, 48, 0.08) !important;
  border-radius: var(--portal-radius) !important;
  box-shadow: 0 12px 30px rgba(23, 47, 79, 0.1) !important;
  backdrop-filter: blur(14px);
}

body.portal-theme .brand,
body.portal-theme .header-title h1,
body.portal-theme .hero-title {
  color: var(--portal-blue-dark) !important;
}

body.portal-theme .primary,
body.portal-theme .btn-primary,
body.portal-theme .hero-btn,
body.portal-theme .btn-link,
body.portal-theme button:not(.btn-secondary):not(.secondary):not(.btn-back):not(.choice):not(.tag-answer):not(.vote):not(.step):not(.piece):not(.area-btn):not(.character-btn):not(.image-card):not(.map-pin):not(.puerta) {
  color: #fff !important;
  background: var(--portal-blue) !important;
  border: 0 !important;
  border-radius: var(--portal-radius) !important;
  box-shadow: 0 12px 24px rgba(35, 100, 166, 0.2) !important;
  font-weight: 900 !important;
}

body.portal-theme .secondary,
body.portal-theme .btn-secondary,
body.portal-theme .btn-back,
body.portal-theme .pill,
body.portal-theme select,
body.portal-theme input,
body.portal-theme textarea {
  color: var(--portal-blue-dark) !important;
  background: #fff !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: var(--portal-radius) !important;
}

body.portal-theme button:hover,
body.portal-theme a:hover,
body.portal-theme button:focus-visible,
body.portal-theme a:focus-visible,
body.portal-theme input:focus,
body.portal-theme select:focus,
body.portal-theme textarea:focus {
  outline: 3px solid rgba(243, 183, 63, 0.55) !important;
  outline-offset: 3px;
}

body.portal-theme .badge,
body.portal-theme .option-card,
body.portal-theme .option-btn,
body.portal-theme .character-btn,
body.portal-theme .image-card,
body.portal-theme .legend-item,
body.portal-theme .action-card,
body.portal-theme .area-btn,
body.portal-theme .drag-item,
body.portal-theme .drop-slot,
body.portal-theme .puerta,
body.portal-theme .seat,
body.portal-theme .law-bubble,
body.portal-theme .bubble {
  background: #fff !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: var(--portal-radius) !important;
  box-shadow: 0 8px 22px rgba(23, 47, 79, 0.08) !important;
}

body.portal-theme .selected,
body.portal-theme .active,
body.portal-theme .completed,
body.portal-theme .correct,
body.portal-theme .is-active {
  border-color: var(--portal-green) !important;
}

body.portal-theme .message,
body.portal-theme .feedback.ok,
body.portal-theme .success-msg {
  color: var(--portal-green) !important;
}

body.portal-theme .message.error,
body.portal-theme .feedback.nope,
body.portal-theme .wrong {
  color: #b4473a !important;
}

body.portal-theme .progress-bar,
body.portal-theme .scene-progress {
  background: #edf2f8 !important;
}

body.portal-theme .progress-bar span,
body.portal-theme #progressFill {
  background: var(--portal-green) !important;
}

body.portal-theme .character-btn img,
body.portal-theme .character-side img,
body.portal-theme .builder-left img,
body.portal-theme .avatar img {
  background: #fff9ef !important;
  border: 1px solid var(--portal-line);
  border-radius: var(--portal-radius);
}

body.portal-theme .canvas-wrap {
  border: 1px solid var(--portal-line);
  border-radius: var(--portal-radius) !important;
}

body.portal-theme.portal-game-frame {
  background:
    linear-gradient(0deg, rgba(23, 63, 112, 0.78), rgba(23, 63, 112, 0.78)),
    url("portal-lupita-mauri-hero.png") center / cover fixed,
    #173f70 !important;
}

body.portal-theme.portal-game-frame::before {
  display: none;
}

body.portal-theme.portal-game-frame .game-frame {
  border: 1px solid rgba(255, 249, 239, 0.26) !important;
  border-radius: var(--portal-radius);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34) !important;
}

@media (max-width: 720px) {
  body.portal-theme {
    overflow-x: hidden;
  }

  body.portal-theme::before {
    background-size: min(300px, 76vw) auto;
    opacity: 0.46;
  }

  body.portal-theme .app,
  body.portal-theme .card,
  body.portal-theme .screen,
  body.portal-theme .modal-content,
  body.portal-theme .side-panel,
  body.portal-theme .game-panel,
  body.portal-theme .builder-right,
  body.portal-theme .sidebar {
    max-width: 100%;
  }

  body.portal-theme button,
  body.portal-theme .primary,
  body.portal-theme .secondary,
  body.portal-theme .btn,
  body.portal-theme .btn-primary,
  body.portal-theme .btn-secondary,
  body.portal-theme a.button {
    min-height: 44px;
  }
}