/* =========================================================
   MEMORY CARD — MOBILE.CSS

   Mobile/responsive pass.
   This file should load AFTER your main CSS.
   ========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
   ========================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --tap-size: 44px;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#viewport,
#layout,
.ui-box,
.nav-btn,
.proceed-btn,
.memory-card-achievement-btn,
.achievement-cell,
.memory-card-blocker-button {
  -webkit-user-select: none;
  user-select: none;
}

.memory-card-scroll,
.memory-card-scroll * {
  -webkit-user-select: text;
  user-select: text;
}


/* =========================================================
   VIEWPORT / FRAME
   ========================================================= */

#viewport {
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;

  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);

  box-sizing: border-box;
}

#layout {
  max-width: calc(100vw - var(--safe-left) - var(--safe-right));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  box-sizing: border-box;
}


/* =========================================================
   TOUCH TARGETS
   ========================================================= */

button,
.nav-btn,
.proceed-btn,
.reset-btn,
.memory-card-blocker-button,
.memory-card-tab-btn,
.memory-card-achievement-btn,
.achievement-cell {
  min-height: var(--tap-size);
  touch-action: manipulation;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   MOBILE MAIN UI
   ========================================================= */

@media (max-width: 700px) {
  body {
    overflow: hidden;
  }

  #viewport {
    height: 100dvh;
    min-height: 100svh;
  }

  #layout {
    width: 100%;
    height: 100%;
  }

  .ui-box {
    box-sizing: border-box;
    min-height: 0;
  }

  .scene-title {
    font-size: clamp(13px, 4vw, 20px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  .scene-description {
    font-size: clamp(11px, 3.2vw, 15px) !important;
    line-height: 1.32 !important;
    overflow-wrap: anywhere;
  }

  .nav-question,
  .pending-label,
  .pending-text {
    font-size: clamp(9px, 3vw, 13px) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
  }

  .nav-btn,
  .proceed-btn,
  .reset-btn,
  button.nav-btn,
  button.proceed-btn,
  button.reset-btn {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    min-height: 48px !important;
    height: auto !important;

    padding: 8px 6px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    line-height: 1.1 !important;

    font-size: clamp(9px, 3vw, 13px) !important;
    letter-spacing: 0.025em !important;
  }

  .pending-text {
    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;

    max-height: calc(1.14em * 4) !important;
  }

  .choices-box,
  .navigation-choices,
  .choice-buttons,
  .nav-buttons {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   DESKTOP PENDING TEXT CONTAINMENT
   Keeps long selected-route text inside its box.
   ========================================================= */

@media (min-width: 701px) {
  .pending-text {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    line-height: 1.18 !important;
    max-height: calc(1.18em * 3) !important;
  }

  .pending-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {
  .scene-title {
    font-size: clamp(12px, 4.1vw, 18px) !important;
  }

  .scene-description {
    font-size: clamp(10px, 3.25vw, 14px) !important;
  }

  .nav-question,
  .pending-label,
  .pending-text {
    font-size: clamp(8px, 2.85vw, 11px) !important;
    line-height: 1.1 !important;
  }

  .nav-btn,
  .proceed-btn,
  .reset-btn,
  button.nav-btn,
  button.proceed-btn,
  button.reset-btn {
    min-height: 44px !important;
    padding: 6px 5px !important;

    font-size: clamp(8px, 2.9vw, 11px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.02em !important;
  }
}


/* =========================================================
   ACHIEVEMENTS BAR MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .achievements-box.memory-card-has-button {
    grid-template-columns: repeat(3, 1fr) !important;
    height: auto !important;
    max-height: none !important;
  }

  .memory-card-achievement-btn,
  .achievement-cell,
  .achievement-slot,
  .achievement-btn {
    min-height: 38px !important;
    font-size: clamp(7px, 2.2vw, 10px) !important;
    line-height: 1 !important;
    padding: 3px !important;
  }
}

@media (max-width: 420px) {
  .memory-card-achievement-btn,
  .achievement-cell,
  .achievement-slot,
  .achievement-btn {
    min-height: 34px !important;
    font-size: clamp(6px, 2.3vw, 9px) !important;
  }
}


/* =========================================================
   MEMORY CARD OVERLAY MOBILE
   ========================================================= */

.memory-card-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 700px) {
  .memory-card-overlay {
    grid-template-rows: auto auto 1fr;
  }

  .memory-card-overlay-header {
    min-height: 46px;
  }

  .memory-card-overlay-title {
    font-size: clamp(13px, 4vw, 18px) !important;
    padding: 8px 10px !important;
    line-height: 1.05 !important;
  }

  .memory-card-overlay-close {
    width: 88px !important;
    min-height: 46px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
  }

  .memory-card-overlay-tabs {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .memory-card-tab-btn {
    min-height: 38px !important;
    border-right: 0 !important;
    border-bottom: 2px solid #000 !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    padding: 7px 8px !important;
  }

  .memory-card-tab-btn:last-child {
    border-bottom: 0 !important;
  }

  .memory-card-scroll {
    padding: 14px !important;
    font-size: clamp(11px, 3.3vw, 14px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.035em !important;
  }

  .memory-card-scroll h1 {
    font-size: clamp(15px, 5vw, 22px) !important;
  }

  .memory-card-scroll h2 {
    font-size: clamp(13px, 4.3vw, 18px) !important;
  }

  .memory-card-scroll h3 {
    font-size: clamp(12px, 3.8vw, 16px) !important;
  }

  .memory-card-scroll p,
  .memory-card-scroll li {
    font-size: clamp(11px, 3.3vw, 14px) !important;
  }
}


/* =========================================================
   MEMORY CARD BLOCKER MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .memory-card-blocker-button {
    min-height: 46px !important;
    font-size: clamp(12px, 3.8vw, 17px) !important;
    letter-spacing: 0.08em !important;
  }
}


/* =========================================================
   PREGAME MOBILE
   ========================================================= */

@media (max-width: 700px) {
  #pregameChoiceButtons {
    height: 18% !important;
  }

  #pregameChoiceButtons button {
    min-height: 50px !important;
    font-size: clamp(12px, 4vw, 18px) !important;
    letter-spacing: 0.08em !important;
  }
}


/* =========================================================
   DEBUG / SKIP MOBILE
   ========================================================= */

@media (max-width: 700px) {
  #interstitialSkipBtn {
    right: calc(12px + var(--safe-right)) !important;
    bottom: calc(12px + var(--safe-bottom)) !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  #ruinsDebugToggleBtn {
    top: calc(8px + var(--safe-top)) !important;
    right: calc(8px + var(--safe-right)) !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  #ruinsDebugPanel {
    top: calc(48px + var(--safe-top)) !important;
    right: calc(8px + var(--safe-right)) !important;
    left: calc(8px + var(--safe-left)) !important;
    width: auto !important;
    max-height: calc(100dvh - 64px - var(--safe-top) - var(--safe-bottom)) !important;
  }

  #debugBody {
    max-height: calc(100dvh - 124px - var(--safe-top) - var(--safe-bottom)) !important;
  }
}


/* =========================================================
   MEDIA ELEMENTS
   ========================================================= */

img,
video,
canvas {
  max-width: 100%;
}

video {
  object-fit: cover;
}


/* =========================================================
   LANDSCAPE PHONE MODE
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
  #layout {
    width: 100%;
    height: 100%;
  }

  .scene-title {
    font-size: clamp(11px, 2.2vw, 16px) !important;
  }

  .scene-description {
    font-size: clamp(9px, 2vw, 13px) !important;
    line-height: 1.25 !important;
  }

  .nav-btn,
  .proceed-btn,
  .reset-btn {
    min-height: 34px !important;
    font-size: clamp(8px, 1.8vw, 11px) !important;
  }

  .memory-card-overlay-title {
    font-size: clamp(12px, 2.4vw, 16px) !important;
  }

  .memory-card-tab-btn {
    min-height: 32px !important;
    font-size: 10px !important;
  }

  .memory-card-scroll {
    padding: 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}