/* ============================================================
   FINAL MOBILE QA HOTFIX — 2026-05-17
   ------------------------------------------------------------
   ROOT CAUSE (discovered via Playwright probe):
   The site is RTL (dir="rtl"). The hero image #hero-char-img
   has CSS chain that ends up setting BOTH left:50% and
   (implicitly via cascade) right:50% — visible as
   `inset: 97px 97px -73px` in computed style.
   
   In LTR mode, browsers ignore `right` when both are set on a
   fixed-width element. But in RTL, `right` wins. With parent
   200px wide and right:97px (which is 50%), the image gets
   anchored at right edge, then translate(-50%,-50%) drags it
   another 170px further right (in CSS = visually LEFT in RTL
   actually visually further into negative x). Net result:
   image at x=-60, completely OUTSIDE the gold circle.
   
   FIX: Force `right:auto !important` on mobile so only `left`
   anchors, then translate(-50%,-50%) centers correctly.
   Also clear `bottom:auto` to prevent vertical inset issues.
   ============================================================ */

/* Apply to ALL mobile widths — must beat hotfix-2026-05-13 JS */
/*
 * IMPORTANT RTL NOTE: Site is dir="rtl". Logical properties FLIP:
 *   inset-inline-start in RTL = right (physical)
 *   inset-inline-end   in RTL = left  (physical)
 * The previous hotfix-2026-05-13 set `inset-inline-start: 50% !important`
 * which in RTL means `right: 50%` — anchoring the image to the RIGHT side
 * of the parent. Combined with transform: translate(-50%,-50%) this pushed
 * the image entirely OUT of the gold circle on the left.
 *
 * Fix: explicitly use physical `left` ONLY on mobile and explicitly clear
 * logical properties so RTL flipping doesn't apply. Desktop keeps the
 * original behavior (char-above-circle with offset_x/offset_y).
 */

@media (max-width: 768px) {
  /* CHAR-ABOVE-CIRCLE MODE (default in production):
   * Desktop intentionally has the character STANDING ON the circle —
   * the top of the character (head/shoulders) extends ABOVE the gold ring.
   * We must replicate this on mobile.
   *
   * Implementation:
   *  - overflow: visible on the circle (so character can extend out)
   *  - Image WIDER than the circle so it visually rests on top
   *  - Image's BOTTOM anchored to circle bottom (translateY(-something))
   *  - Image centered horizontally
   */
  .hero-character-circle.char-above-circle {
    overflow: visible !important; /* allow character to extend above circle */
  }
  
  /* Fallback if not char-above-circle (clip mode): clip inside circle */
  .hero-character-circle:not(.char-above-circle) {
    overflow: hidden !important;
    border-radius: 50% !important;
  }
  
  /* Image positioning for char-above mode */
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    /* Kill all RTL-flipping logical props */
    inset-inline-start: auto !important;
    inset-inline-end:   auto !important;
    inset-block-start:  auto !important;
    inset-block-end:    auto !important;
    right: auto !important;
    /* Anchor: bottom of image touches bottom of circle (image stands on circle) */
    left: 50% !important;
    bottom: 0 !important;
    top: auto !important;
    /* Center horizontally only — bottom is already anchored */
    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;
    /* Visibility */
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center bottom !important; /* aligns image content to bottom */
    z-index: 5 !important; /* above particles/glow */
  }
  
  /* For non-above mode (legacy fallback): center inside circle */
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    inset-inline-start: auto !important;
    inset-inline-end:   auto !important;
    inset-block-start:  auto !important;
    inset-block-end:    auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
  }
}

/* Sizing for char-above mode:
 * Circle stays fixed size. Image is LARGER than the circle to extend above.
 * On desktop the image is ~340px width vs 320px circle (104% width, taller).
 * We replicate that proportion on mobile.
 */
@media (max-width: 768px) and (min-width: 481px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 240px !important;
    height: 240px !important;
  }
  /* char-above-mode: image bigger than circle, stands on top */
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 250px !important;     /* slightly wider than circle */
    height: 290px !important;    /* taller — head pops out the top */
    max-width: 250px !important;
    max-height: 290px !important;
  }
  /* clip-mode: image smaller than circle, centered inside */
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }
}

@media (max-width: 480px) and (min-width: 361px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 200px !important;
    height: 200px !important;
  }
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 210px !important;
    height: 245px !important;
    max-width: 210px !important;
    max-height: 245px !important;
  }
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

@media (max-width: 360px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 170px !important;
    height: 170px !important;
  }
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 180px !important;
    height: 210px !important;
    max-width: 180px !important;
    max-height: 210px !important;
  }
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
}

/* Ensure the outer/parent has room for the character to extend above.
   Add top padding so the character's head doesn't get cut off by elements above. */
@media (max-width: 768px) {
  .hero-character-outer {
    padding-top: 50px !important;
    margin-top: 10px !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVENESS POLISH
   ------------------------------------------------------------
   General improvements for mobile experience identified
   during final QA pass.
   ============================================================ */

@media (max-width: 768px) {
  /* Prevent horizontal scroll caused by any overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Ensure all containers respect viewport */
  .max-w-5xl, .max-w-6xl, .max-w-7xl,
  .container, [class*="container-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Tap targets — minimum 44px per WCAG / Apple HIG */
  button, .btn, a.button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Smaller buttons in tight contexts get padding fix */
  .icon-btn, .icon-only-btn {
    min-height: 40px;
    min-width: 40px;
  }
  
  /* Make hero text breathe */
  .hero-section h1, .hero-section h2 {
    line-height: 1.3 !important;
    word-wrap: break-word;
  }
  
  /* Modals should not exceed viewport */
  .modal, .modal-content, [role="dialog"] {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    box-sizing: border-box;
  }
}

/* Phones */
@media (max-width: 480px) {
  /* Reduce hero section padding so circle has room */
  .hero-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Game cards stack to single column on smallest screens */
  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}