/* Mobile optimization styles for Lost Volcano Casino */
/* Scene 1: Loading screen — same layout, smaller scale */
@media (max-width: 768px) {
  .loading-content {
    transform: scale(0.7);
    transform-origin: center center;
  }

  .loading-monk {
    max-width: 220px;
  }

  .loading-text {
    font-size: 1.4rem;
    margin: -40px 0 10px;
  }

  .loading-bar {
    width: 220px;
  }
}

@media (max-width: 430px) {
  .loading-content {
    transform: scale(0.62);
  }

  .loading-monk {
    max-width: 200px;
  }

  .loading-text {
    font-size: 1.25rem;
  }

  .loading-bar {
    width: 200px;
  }
}

@media (max-width: 375px) {
  .loading-content {
    transform: scale(0.8);
  }

  .loading-monk {
    max-width: 180px;
  }

  .loading-text {
    font-size: 1.1rem;
    margin: -32px 0 8px;
  }

  .loading-bar {
    width: 180px;
    height: 3px;
  }
}

/* Scene 2: Onboarding — desktop card scaled up, text layout preserved,
   cards already text-facing, spent cards move to the back,
   volcano keeps the onboarding backdrop */
@media (max-width: 768px) {
  body.onboarding-open {
    --deck-visual-w: clamp(240px, 76vw, 300px);
    --deck-scale: 1.5;
    --deck-scale: calc(var(--deck-visual-w) / 180px);
  }

  body.onboarding-open .ob-cursor,
  body.onboarding-open .field-monk {
    display: none;
  }

  body.onboarding-open .onboarding-hint {
    display: none;
  }

  /* Deck container keeps desktop card size and scales the whole card,
     preserving desktop text layout and proportions */
  body.onboarding-open .onboarding-fan {
    position: relative;
    width: 180px;
    height: 225px;
    margin-top: -6vh;
    transform: scale(var(--deck-scale));
    transform-origin: center center;
    pointer-events: auto;
    overflow: visible;
  }

  body.onboarding-open .onboarding-fan .obc-wrap {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translate(calc(-50% + var(--mobile-offset-x, 0px)), calc(-50% + var(--mobile-offset-y, 0px))) scale(var(--mobile-scale, 1)) !important;
    transform-origin: center center !important;
    transition: transform 0.45s cubic-bezier(0.34, 1.1, 0.64, 1);
    z-index: var(--mobile-z, 0) !important;
    opacity: var(--mobile-opacity, 1);
    pointer-events: auto;
  }

  /* Cards are already text-facing; no flip animation needed */
  body.onboarding-open .onboarding-fan .obc-wrap .obc-inner {
    transform: rotateX(180deg);
  }

  body.onboarding-open .onboarding-fan .obc-wrap.is-leaving {
    --mobile-opacity: 1;
  }

  /* Mobile onboarding cards: narrower, centered text block */
  body.onboarding-open .onboarding-fan .onboarding-line {
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-deck-hint {
    position: absolute;
    left: 50%;
    bottom: 10vh;
    transform: translateX(-50%);
    width: var(--deck-visual-w);
    max-width: 300px;
    text-align: center;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1.1;
    color: #999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 6;
  }

  .onboarding-deal-wrap.is-visible ~ .mobile-deck-hint,
  .mobile-deck-hint.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  body.onboarding-open .onboarding-deal-wrap {
    bottom: 9vh;
    transform: translateX(-50%) scale(0.95);
  }

  body.onboarding-open .onboarding-deal-wrap .onboarding-deal-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Volcano transition inherits the onboarding backdrop on mobile */
  .volcano-transition {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Scene 3: Main table — same layout, touch-pannable */
@media (max-width: 768px) {
  .viewport,
  .viewport.panning,
  .deck,
  .deck *,
  .deck-card-frame,
  .deck-card-inner,
  .deck-top-image,
  .deck-thick {
    cursor: auto !important;
  }

  .zoom-controls {
    top: 12px;
    gap: 10px;
  }

  .zoom-icon-btn img {
    width: 16px;
    height: 16px;
  }

  .zoom-scale-track {
    width: 90px;
    height: 20px;
  }

  .zoom-scale-bar {
    height: 5px;
  }

  .zoom-scale-thumb {
    height: 18px;
  }

  .flying-dice-btn {
    right: 10px;
    bottom: 74px;
    width: 50px;
    height: 50px;
  }

  .deck-thick {
    width: var(--card-w);
    height: auto;
  }
}

/* Scene 5 (draw overlay) — scale up hand, smaller frame text */
@media (max-width: 768px) {
  .draw-overlay,
  .draw-overlay[aria-hidden="false"],
  .draw-overlay[aria-hidden="false"] *,
  .draw-overlay[aria-hidden="false"] .btn-pill,
  .draw-overlay[aria-hidden="false"] .btn-respond,
  body.draw-overlay-active .draw-overlay {
    cursor: auto !important;
  }

  .hand-holding-cards {
    transform: scale(1.12);
  }

  .hand-frame-content .view-description {
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  .btn-respond {
    padding: 10px 20px;
    font-size: 0.8rem;
  }

  .draw-overlay-after-upload .btn-pill {
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .draw-overlay-after-upload {
    gap: 8px;
  }
}