/*
 * UI stabilization layer.
 * Loaded last on purpose: it gives the boot flow and high-level mobile chrome
 * one visual language without rewriting the individual game systems.
 */

:root {
  --comic-ink: #08090c;
  --comic-panel: #14171b;
  --comic-paper: #f4efe5;
  --comic-red: #ef0b45;
  --comic-red-dark: #a8002d;
  --comic-cyan: #13c9df;
  --comic-yellow: #ffc62d;
  --comic-display: Impact, "Arial Black", "Arial Narrow", "Roboto Condensed", sans-serif;
  --comic-body: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --boot-safe-top: max(env(safe-area-inset-top, 0px), 18px);
  --boot-safe-bottom: max(env(safe-area-inset-bottom, 0px), 18px);
  --dialogue-box-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  --dialogue-box-height: clamp(132px, 36.6vw, 164px);
  --dialogue-text-left: 11.5%;
  --dialogue-text-top: 16%;
  --dialogue-text-width: 77%;
  --dialogue-text-height: 48%;
  --dialogue-button-left: 50%;
  --dialogue-button-top: 79%;
  --dialogue-button-width: 25%;
  --dialogue-button-height: 18%;
}

body,
#game {
  max-width: 100vw;
  max-height: calc(var(--vh) * 100);
}

/* ---------- Shared boot surfaces ---------- */

.boot-overlay,
#startupMenuOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: calc(var(--vh) * 100);
  min-height: 100dvh;
  padding: var(--boot-safe-top) 18px var(--boot-safe-bottom);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(3, 7, 11, 0.2), rgba(3, 7, 11, 0.42)),
    url('/static/images/backgrounds/main_menu_bg.webp') center / cover no-repeat;
  isolation: isolate;
}

.boot-overlay::before,
#startupMenuOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(18, 202, 222, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 28%, transparent 68%, rgba(0, 0, 0, 0.46));
}

.boot-card,
.preloader-card {
  position: relative;
  width: min(88vw, 360px);
  padding: clamp(22px, 5.5vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(19, 201, 223, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(27, 31, 36, 0.98), rgba(7, 9, 12, 0.98));
  border: 3px solid var(--comic-paper);
  outline: 4px solid var(--comic-ink);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.72), inset 0 0 0 2px rgba(239, 11, 69, 0.72);
  clip-path: polygon(3% 0, 96% 1%, 100% 8%, 98% 92%, 94% 100%, 5% 98%, 0 92%, 1% 7%);
}

.boot-card--compact {
  width: min(84vw, 330px);
  padding-block: 26px;
}

.boot-kicker {
  color: var(--comic-cyan);
  font-family: var(--comic-display);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.boot-title {
  margin: 0;
  color: var(--comic-paper);
  font-family: var(--comic-display);
  font-size: clamp(25px, 7.1vw, 38px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.035em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--comic-ink);
  text-shadow: 3px 3px 0 var(--comic-red-dark);
}

.boot-copy {
  width: 100%;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--comic-body);
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 550;
  line-height: 1.38;
  text-align: center;
}

.boot-note {
  width: 100%;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--comic-body);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.boot-actions {
  width: 100%;
  display: grid;
  gap: 10px;
}

.boot-actions--inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comic-button {
  position: relative;
  min-height: 54px;
  padding: 10px 18px 11px;
  border: 3px solid var(--comic-ink);
  outline: 2px solid var(--comic-paper);
  color: #fff;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f3134f, #d3053d 72%, #9e002a);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.72), inset 0 -4px 0 rgba(70, 0, 19, 0.38);
  clip-path: polygon(6% 0, 94% 0, 100% 20%, 97% 84%, 91% 100%, 7% 98%, 0 78%, 2% 17%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 120ms ease;
}

.comic-button span,
.comic-button {
  font-family: var(--comic-display);
  font-size: clamp(17px, 4.7vw, 23px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 0.7px #111;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.comic-button--secondary {
  color: var(--comic-ink);
  background: linear-gradient(180deg, #fffdf7, #e7dfd1);
  outline-color: var(--comic-ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.72), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.comic-button--secondary span {
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.comic-button--danger {
  color: var(--comic-paper);
  background: #16191d;
}

.comic-button:active {
  transform: translate(3px, 3px) scale(0.985);
  filter: brightness(0.92);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.72), inset 0 -2px 0 rgba(70, 0, 19, 0.34);
}

.comic-button:focus-visible,
.boot-icon-button:focus-visible {
  outline: 3px solid var(--comic-yellow);
  outline-offset: 3px;
}

/* ---------- Language and age gates ---------- */

#languageSelector,
#ageDisclaimer {
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ageDisclaimer .disclaimer-box {
  width: min(90vw, 370px);
  max-height: calc((var(--vh) * 100) - var(--boot-safe-top) - var(--boot-safe-bottom));
  overflow-y: auto;
}

#ageDisclaimer .disclaimer-title {
  margin: 0;
  color: var(--comic-red);
  font-family: var(--comic-display);
  font-size: clamp(28px, 7vw, 38px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #000;
  text-shadow: 2px 2px 0 #fff;
}

#ageDisclaimer .disclaimer-text,
#ageDisclaimer .disclaimer-note {
  margin: 0;
}

/* ---------- Preloader ---------- */

#preloader {
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloadSpinner {
  width: 52px;
  height: 52px;
  margin: 0;
  object-fit: contain;
  animation: spin 1.1s steps(8, end) infinite;
}

#preloadBarBg {
  width: min(72vw, 270px);
  height: 20px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid #fff;
  outline: 3px solid #000;
  background: #08090c;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}

#preloadBar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--comic-cyan), #61efff);
  transition: width 180ms linear;
}

#preloadText {
  font-family: var(--comic-display);
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#preloadHint {
  max-width: 290px;
  min-height: 2.7em;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--comic-body);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

/* ---------- Main menu ---------- */

#startupMenuOverlay {
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#startupMenuOverlay .startup-shell {
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(2vh);
}

.startup-brand {
  margin-bottom: clamp(20px, 5vh, 44px);
  text-align: center;
}

.startup-brand__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--comic-cyan);
  font-family: var(--comic-display);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.startup-brand__title {
  display: block;
  color: var(--comic-paper);
  font-family: var(--comic-display);
  font-size: clamp(42px, 13vw, 62px);
  font-style: italic;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #000;
  text-shadow: 5px 5px 0 var(--comic-red-dark), 8px 8px 0 #000;
}

#startupMenuOverlay .buttons-wrapper {
  width: 100%;
  display: grid;
  gap: 12px;
}

#startupMenuOverlay .startup-button {
  width: 100%;
}

.startup-music {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot-icon-button,
#soundToggleMenu {
  width: 52px;
  height: 52px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 3px solid var(--comic-ink);
  outline: 2px solid var(--comic-paper);
  border-radius: 0;
  background: var(--comic-paper);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  clip-path: polygon(8% 0, 91% 4%, 100% 14%, 95% 91%, 84% 100%, 5% 94%, 0 83%, 3% 9%);
  cursor: pointer;
}

#soundToggleMenu img,
.boot-icon-button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Dialogue legibility and safe geometry ---------- */

.game-textbox {
  max-width: calc(100vw - 20px) !important;
}

.game-textbox__text {
  font-family: var(--dialogue-font) !important;
  font-size: clamp(14px, 3.55vw, 18px) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
  letter-spacing: 0.005em !important;
  text-wrap: pretty !important;
  overflow: hidden;
}

.game-textbox__button {
  font-family: var(--comic-display) !important;
  font-size: clamp(12px, 3.05vw, 15px) !important;
  font-style: italic;
  letter-spacing: 0.025em !important;
  white-space: nowrap;
}

/* Shared comic typography for the tab systems that still inherited the old serif. */
.battle-tab,
.player-hub-tab,
.craft-tab,
.shop-tab {
  font-family: var(--comic-display) !important;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase;
}

.battle-tab:not(.active),
.player-hub-tab:not(.active),
.craft-tab:not(.active),
.shop-tab:not(.active) {
  color: #bd1238 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.battle-tab.active,
.player-hub-tab.active,
.craft-tab.active,
.shop-tab.active {
  color: #fff !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72) !important;
}

#battleModal .enemy-selector-title,
#battleModal .enemy-selector-empty {
  color: #171719 !important;
  text-shadow: none !important;
}

#battleModal .enemy-selector-title {
  font-family: var(--comic-display);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

#battleModal .enemy-selector-empty {
  width: min(78vw, 310px);
  margin-top: 24px;
  font-family: var(--comic-body);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

/* Later generic modal rules used to stretch this title to 100% after shifting it. */
#chatModal.chat-modal--npc-card .modal-header {
  width: 56% !important;
  color: #111 !important;
  -webkit-text-stroke: 0.7px rgba(255, 255, 255, 0.72) !important;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8) !important;
}

#introCharacter,
#game > [id^="char-"] {
  max-width: 68vw;
  contain: layout paint style;
}

.branch-choice-modal > div {
  width: min(88vw, 380px) !important;
  min-width: 0 !important;
  padding: 24px 20px 28px !important;
  border: 3px solid var(--comic-paper) !important;
  border-radius: 0 !important;
  outline: 4px solid var(--comic-ink);
  background: var(--comic-panel) !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.72) !important;
  clip-path: polygon(3% 0, 97% 1%, 100% 8%, 98% 94%, 92% 100%, 5% 98%, 0 91%, 1% 7%);
}

.branch-choice-modal .branch-btn,
.branch-choice-modal .branch-next {
  min-height: 50px;
  border-radius: 0 !important;
  font-family: var(--comic-display) !important;
  font-size: 18px !important;
  font-style: italic;
  text-transform: uppercase;
}

/* The map remains full-bleed; only controls move below Telegram's dead zone. */
@media (pointer: coarse), (max-width: 760px) {
  :root {
    --boot-safe-top: calc(env(safe-area-inset-top, 0px) + clamp(72px, 10.5vh, 108px));
  }

  .sound-toggle {
    top: calc(var(--modal-mobile-safe-top) + 8px);
    left: 12px;
    width: 42px;
    height: 42px;
    border: 2px solid var(--comic-ink);
    outline: 2px solid rgba(244, 239, 229, 0.88);
    border-radius: 0;
    background: rgba(244, 239, 229, 0.94);
    clip-path: polygon(8% 0, 92% 4%, 100% 15%, 95% 91%, 83% 100%, 5% 94%, 0 82%, 3% 9%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sound-toggle img {
    width: 24px;
    height: 24px;
  }

  .modal-content {
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  #chatModal.chat-modal--npc-card {
    inset: var(--modal-mobile-safe-top) 0 0 0 !important;
    height: calc((var(--vh) * 100) - var(--modal-mobile-safe-top)) !important;
  }

  .player-panel {
    max-width: 100vw;
  }
}

@media (max-height: 700px) {
  :root {
    --dialogue-box-height: 128px;
  }

  .startup-brand {
    margin-bottom: 12px;
  }

  #startupMenuOverlay .startup-shell {
    gap: 8px;
  }

  .comic-button {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comic-button,
  #preloadBar {
    transition: none;
  }
}