/*
  Hatchopia Visual Consistency Layer
  Updated: 2026-06-14

  Standardizes Hatchopia cards, buttons, danger buttons, forms,
  page shells, focus states, media, and mobile spacing.
*/

@import url("https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap");

:root {
  --hatchopia-bg: #111111;
  --hatchopia-bg-deep: #070604;
  --hatchopia-panel: #111111;
  --hatchopia-panel-soft: #15120e;
  --hatchopia-text: #eadfce;
  --hatchopia-muted: #a8977f;
  --hatchopia-bronze: #c49a5a;
  --hatchopia-gold: #f0c678;
  --hatchopia-gold-bright: #ffe2a8;
  --hatchopia-bronze-dark: #6d4a22;
  --hatchopia-border: #3b3126;
  --hatchopia-danger: #d65a5a;
  --hatchopia-danger-dark: #2a1414;
  --hatchopia-danger-deep: #100707;
  --hatchopia-radius: 24px;
  --hatchopia-radius-sm: 16px;
  --hatchopia-glow: 0 0 28px rgba(196, 154, 90, 0.18);
}

html,
body {
  background: var(--hatchopia-bg) !important;
  color: var(--hatchopia-text);
  font-family: "Marcellus SC", serif;
}

body {
  overflow-x: hidden;
}

.hatchopia-embed {
  background-color: var(--hatchopia-bg) !important;
  background-image: none !important;
  color: var(--hatchopia-text);
}

.page,
.blog-page,
.game-page,
.app-page,
.hatchopia-page {
  width: min(1180px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

.section,
.blog-section,
.game-section,
.app-section {
  padding-top: 34px;
  padding-bottom: 34px;
}

.ui-box,
.blog-card,
.blog-editor,
.game-shell,
.game-page-hero,
.card,
.panel,
.hatchopia-card {
  border: 1px solid var(--hatchopia-border) !important;
  outline: 1px solid rgba(240, 198, 120, 0.08);
  border-radius: var(--hatchopia-radius) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(240, 198, 120, 0.10), transparent 26%),
    repeating-linear-gradient(
      90deg,
      rgba(240, 198, 120, 0.022) 0,
      rgba(240, 198, 120, 0.022) 1px,
      transparent 1px,
      transparent 22px
    ),
    var(--hatchopia-panel) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.badge,
.status,
.label,
.pill,
.tag,
.hatchopia-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--hatchopia-bronze-dark);
  border-radius: 999px;
  color: var(--hatchopia-gold);
  background: #0a0806;
  font-size: 0.86rem;
  box-shadow: var(--hatchopia-glow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

button,
.button,
.btn,
.hatchopia-button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: "Marcellus SC", serif;
}

button:not(.notif-bell):not(.notif-mark):not(.game-tool-btn):not(.dropdownToggle),
.button,
.btn,
.hatchopia-button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--hatchopia-bronze-dark);
  background: linear-gradient(180deg, #2a2118, #100d0a);
  color: var(--hatchopia-gold);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--hatchopia-glow);
}

button:not(.notif-bell):not(.notif-mark):not(.game-tool-btn):not(.dropdownToggle):hover,
.button:hover,
.btn:hover,
.hatchopia-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  color: var(--hatchopia-gold-bright);
  border-color: var(--hatchopia-bronze);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

button:disabled,
.button:disabled,
.btn:disabled,
.hatchopia-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

.danger,
button.danger,
.btn-danger,
.delete,
.delete-btn,
[data-action="delete"],
[data-danger="true"] {
  background: linear-gradient(180deg, var(--hatchopia-danger-dark), var(--hatchopia-danger-deep)) !important;
  color: #f7efd2 !important;
  border-color: rgba(214, 90, 90, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 22px rgba(214, 90, 90, 0.13) !important;
}

.danger:hover,
button.danger:hover,
.btn-danger:hover,
.delete:hover,
.delete-btn:hover,
[data-action="delete"]:hover,
[data-danger="true"]:hover {
  color: #fff7e6 !important;
  border-color: rgba(255, 138, 138, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 26px rgba(214, 90, 90, 0.22) !important;
}

input,
textarea,
select {
  border: 1px solid var(--hatchopia-border);
  border-radius: var(--hatchopia-radius-sm);
  background: #111111;
  color: var(--hatchopia-text);
  font-family: "Marcellus SC", serif;
  outline: none;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: none;
  border-color: var(--hatchopia-bronze) !important;
  box-shadow: 0 0 0 3px rgba(240, 198, 120, 0.10), var(--hatchopia-glow) !important;
}

select option {
  background: #111111;
  color: var(--hatchopia-text);
}

img {
  max-width: 100%;
}

img.cover,
.cover,
.preview,
.thumbnail,
.item-image,
.creature-image {
  border-radius: 18px;
}

.empty,
.empty-state,
.loading,
.error,
.error-box,
.notice,
.message {
  border-radius: var(--hatchopia-radius-sm);
}

.error,
.error-box,
.danger-box {
  border: 1px solid rgba(214, 90, 90, 0.75) !important;
}

.site-footer {
  margin-top: 60px;
}

#hatchopiaHeaderRoot .notif-bell,
#hatchopiaHeaderRoot .notif-mark {
  font-family: "Marcellus SC", serif;
}

@media (max-width: 900px) {
  .page,
  .blog-page,
  .game-page,
  .app-page,
  .hatchopia-page {
    width: min(100%, calc(100% - 24px));
  }

  .section,
  .blog-section,
  .game-section,
  .app-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .ui-box,
  .blog-card,
  .blog-editor,
  .game-shell,
  .game-page-hero,
  .card,
  .panel,
  .hatchopia-card {
    border-radius: 20px !important;
  }
}


/* =========================================
   NAVBAR BUTTON PILL REMOVAL
   ========================================= */

#customGameHeader .dropdownToggle,
#customGameHeader button,
#customGameHeader #logoutBtn {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#customGameHeader .dropdownToggle:hover,
#customGameHeader button:hover,
#customGameHeader #logoutBtn:hover {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}