/*
  ============================================================
  KITTY CAT BOYS — MOBILE RESCUE LAYER
  ============================================================

  GOAL
  ----
  Repair mobile hit-testing without touching the desktop site or replacing the
  current Pixi / Matter / CONTACT / audio systems.

  The accumulated mobile CSS currently contains several generations of
  emergency overrides. This last, isolated layer establishes one final set of
  ownership rules:

  - hidden content panel: NEVER receives a tap
  - visible content panel: owns its rectangle above nav
  - Pixi canvas: visual only, NEVER receives DOM taps
  - nav: only the actual invisible logo/nav buttons receive taps
  - mobile player: fixed physical box, shell is transparent to hit testing,
    only START / STOP / volume receive taps
  - CONTACT: form owns touch while CONTACT is open

  Desktop is outside this media query and is therefore untouched.
*/

@media (max-width: 1100px) {

  /* ==========================================================
     1. PHYSICS CANVAS — VISUAL ONLY
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue .physics-canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: none !important;

    /*
      The existing main.ts mobile drag constraint owns puppet input. Keeping
      the canvas out of DOM hit testing prevents it from becoming a full-screen
      glass pane over the site.
    */
    touch-action: none !important;
  }


  /* ==========================================================
     2. NAVIGATION — STAGE DOES NOT CLICK, BUTTONS DO
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitboxes {
    pointer-events: none !important;
    z-index: 220 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .home-hitbox,
  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(180, 0, 0, 0.28);
  }

  /* Keep the current known-good phone hit geometry explicit. */
  html.kcb-touch-device.kcb-mobile-rescue .home-hitbox {
    left: 31% !important;
    top: 0 !important;
    width: 38% !important;
    height: 24% !important;
    min-height: 42px !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox {
    top: 25.2% !important;
    height: 13.5% !important;
    min-height: 38px !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox-music {
    left: 25% !important;
    width: 10% !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox-shows {
    left: 35% !important;
    width: 10.5% !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox-band {
    left: 44.5% !important;
    width: 9% !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox-merch {
    left: 53.2% !important;
    width: 10.5% !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox-contact {
    left: 63.2% !important;
    width: 11.5% !important;
  }


  /* ==========================================================
     3. CONTENT BANNERS — FIX THE INVISIBLE SHIELD
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode) {
    pointer-events: none !important;
    z-index: 260 !important;
  }

  /*
    CRITICAL FIX:
    Later mobile rules accidentally gave .content-panel pointer-events:auto
    whether or not the panel had .visible. A closed opacity:0 panel could then
    sit invisibly over the homepage/nav.
  */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel:not(.visible),

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel:not(.visible) * {
    pointer-events: none !important;
  }

  /*
    When a banner IS open, the banner rectangle owns the area above nav.
    Blank banner space therefore cannot fall through and activate a navigation
    button behind it; real buttons/tracks inside remain native controls.
  */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible {
    pointer-events: auto !important;
    z-index: 320 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible button,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible input,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible select,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible textarea,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible a,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible .music-track,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible .shows-featured-flyer,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible .shows-gallery-thumb,

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible .merch-contact-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }


  /* ==========================================================
     4. SAFE MOBILE MUSIC PLAYER — ONE REAL 190 x 62 BOX
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe {
    position: fixed !important;

    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;

    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;

    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    margin: 0 !important;
    padding: 6px !important;

    transform: none !important;

    display: block !important;
    overflow: hidden !important;

    box-sizing: border-box !important;

    /* The shell itself can NEVER become a giant invisible tap target. */
    pointer-events: none !important;

    z-index: 7200 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-mobile-player-controls {
    position: absolute !important;
    inset: 6px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 24px 22px !important;
    gap: 4px !important;

    width: auto !important;
    height: auto !important;

    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-mobile-player-volume {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 5px !important;

    width: 100% !important;
    height: 22px !important;

    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-mobile-player-volume label,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-volume-value {
    pointer-events: none !important;
  }

  /* ONLY the controls the visitor can actually see own a touch. */
  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-mini-start,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-mini-stop {
    position: relative !important;

    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mobile-player-safe
  .site-volume-slider {
    width: 100% !important;
    min-width: 0 !important;

    height: 22px !important;
    min-height: 22px !important;

    margin: 0 !important;

    pointer-events: auto !important;
    touch-action: none !important;
  }


  /* ==========================================================
     5. FALLBACK OLD DRAWER PLAYER

     If a browser reports touch capability oddly and main.ts creates the old
     drawer player anyway, do not allow its shell to become a page-sized shield.
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player {
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-inner,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-meta,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-track,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-transport,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-volume,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player label,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-volume-value {
    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-drawer-toggle,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-start,

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-mini-stop {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .site-volume-control.site-mini-player
  .site-volume-slider {
    pointer-events: auto !important;
    touch-action: none !important;
  }


  /* ==========================================================
     6. ENTRY SCREEN — ENTRY / COOKIE CONTROLS STAY NATIVE
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue .entry-overlay {
    pointer-events: auto !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .entry-button,
  html.kcb-touch-device.kcb-mobile-rescue .entry-cookie-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }


  /* ==========================================================
     7. CONTACT — FORM WINS, BACKGROUND/PLAYER CANNOT STEAL TOUCH
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .content-stage-shell.contact-page-mode {
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form label,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form input,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form select,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form textarea,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form button,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-home-mark {
    pointer-events: auto !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form input,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form select,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .contact-form textarea {
    touch-action: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }

  /*
    Parent pointer-events:none does not automatically disable descendants that
    explicitly opt back into pointer-events:auto. Kill both shell AND children
    while CONTACT owns the screen.
  */
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control.site-mobile-player-safe,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control.site-mobile-player-safe *,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control.site-mini-player,

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control.site-mini-player * {
    pointer-events: none !important;
  }


  /* ==========================================================
     8. ACTIVE DOLL DRAG — NO COMPATIBILITY TARGET UNDER THE PUPPET
     ========================================================== */

  html.kcb-touch-device.kcb-mobile-rescue
  body.doll-dragging
  .content-stage-shell:not(.contact-page-mode)
  .content-panel,

  html.kcb-touch-device.kcb-mobile-rescue
  body.doll-dragging
  .nav-hitboxes {
    pointer-events: none !important;
  }
}


/* ============================================================
   SHOW-NIGHT HOTFIX — AUG 28 2026

   This block is intentionally LAST. It preserves the last/best build and
   changes only mobile hit ownership / stacking plus the CONTACT logo.
   ============================================================ */

@media (max-width: 1100px) {

  /* Dolls must VISUALLY pass in front of normal section banners. The canvas
     stays pointer-events:none, so raising it cannot create a touch shield. */
  html.kcb-touch-device.kcb-mobile-rescue .physics-canvas {
    z-index: 520 !important;
    pointer-events: none !important;
  }

  /* The transparent nav stage stays inert; the actual buttons are extremely
     easy to hit and sit above the doll canvas for reliable show-night taps. */
  html.kcb-touch-device.kcb-mobile-rescue .nav-hitboxes {
    z-index: 620 !important;
    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .home-hitbox,
  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox {
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .home-hitbox {
    left: 27% !important;
    top: 0 !important;
    width: 46% !important;
    height: 27% !important;
    min-height: 48px !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue .nav-hitbox {
    top: 24.2% !important;
    height: 15.5% !important;
    min-height: 44px !important;
  }

  /* CLOSED banners categorically do not exist for hit-testing. */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel:not(.visible),
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel:not(.visible) * {
    pointer-events: none !important;
  }

  /* Open banners remain usable, but render BELOW dolls. */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode) {
    z-index: 260 !important;
    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell:not(.contact-page-mode)
  .content-panel.visible {
    z-index: 320 !important;
    pointer-events: auto !important;
  }

  /* CONTACT gets the whole phone. Nothing behind it can own a tap. */
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .content-stage-shell.contact-page-mode {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    background: #000 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .hero-stage,
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .hero-fire-overlay,
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .physics-canvas,
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .nav-hitboxes,
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control,
  html.kcb-touch-device.kcb-mobile-rescue
  body.kcb-contact-touch-open
  .site-volume-control * {
    pointer-events: none !important;
  }

  /* Restore the missing CONTACT logo, but keep its button box compact and
     physically ABOVE the form rather than overlapping it. */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-mark {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: min(72vw, 310px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto 4px !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 4 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-logo-stage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-logo-stage img {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-logo {
    opacity: 1 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-eyes {
    opacity: 1 !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-home-ring {
    opacity: 0.94 !important;
  }

  /* The form is above the logo button and gets plain native browser input. */
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .content-panel,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .content-panel.visible {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form label,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form input,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form select,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form textarea,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form button {
    pointer-events: auto !important;
  }

  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form input,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form select,
  html.kcb-touch-device.kcb-mobile-rescue
  .content-stage-shell.contact-page-mode
  .contact-form textarea {
    touch-action: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}


/* ============================================================
   SHOW-NIGHT FINAL NUDGE — AUG 28 2026

   Preserve the last/best pass. Only: mobile player drawer arrow, compact
   CONTACT-home target, and the presentation needed by those controls.
   ============================================================ */

@media (max-width: 1100px) {

  html.kcb-touch-device .site-volume-control.site-mobile-player-safe,
  html.kcb-touch-device.kcb-mobile-rescue .site-volume-control.site-mobile-player-safe {
    overflow: visible !important;
    transition: transform 160ms ease-out !important;
  }

  html.kcb-touch-device .site-volume-control.site-mobile-player-safe.is-collapsed,
  html.kcb-touch-device.kcb-mobile-rescue .site-volume-control.site-mobile-player-safe.is-collapsed {
    transform: translateX(calc(-100% - 8px)) !important;
  }

  html.kcb-touch-device .site-mobile-player-toggle,
  html.kcb-touch-device.kcb-mobile-rescue .site-mobile-player-toggle {
    position: absolute !important;
    left: 100% !important;
    top: 8px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(125,0,0,0.76) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,0.94) !important;
    color: #fff !important;
    font: 900 18px/1 Arial, Helvetica, sans-serif !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 4 !important;
  }

  html.kcb-touch-device .site-mobile-player-toggle span,
  html.kcb-touch-device.kcb-mobile-rescue .site-mobile-player-toggle span {
    pointer-events: none !important;
  }

  /*
    Keep the CONTACT artwork generous while making the actual button target
    much closer to the visible logo. The visual stage is allowed to overflow
    the smaller button, but never receives pointer events itself.
  */
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    width: min(54vw, 220px) !important;
    height: 94px !important;
    aspect-ratio: auto !important;
    margin: 2px auto 8px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-logo-stage,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-logo-stage {
    left: 50% !important;
    top: 50% !important;
    width: min(82vw, 340px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1100px) and (orientation: landscape) {
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    width: min(34vw, 190px) !important;
    height: 78px !important;
    margin-bottom: 2px !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-logo-stage,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-logo-stage {
    width: min(58vw, 300px) !important;
  }
}

/* ============================================================
   SHOW-NIGHT LOCKED NUDGE — CONTACT POSITION

   Keep the current mobile contact artwork/hitbox geometry, but move the
   complete button down so the visible logo and its touch target stay aligned.
   ============================================================ */

@media (max-width: 1100px) {
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    margin-top: 34px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 1100px) and (orientation: landscape) {
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    margin-top: 18px !important;
    margin-bottom: 4px !important;
  }
}

/* Final mirrored mobile overrides. Main style.css also contains these rules
   at its absolute end so Vite's CSS load order cannot hide them. */
@media (max-width: 1100px) {
  html.kcb-touch-device.kcb-mobile-rescue .site-volume-control.site-mobile-player-safe {
    contain: none !important;
    overflow: visible !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .site-mobile-player-toggle {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99 !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    width: min(58vw, 236px) !important;
    height: 100px !important;
    margin: 88px auto 10px !important;
    z-index: 80 !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-logo-stage {
    width: min(86vw, 350px) !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .content-panel,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .content-panel.visible {
    margin: 0 auto 18px !important;
    z-index: 30 !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-stage-form-only .contact-form {
    gap: 5px !important;
    padding: 8px 11px 10px !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-form-heading {
    margin-bottom: 5px !important;
    padding-bottom: 4px !important;
    gap: 3px !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-form label { gap: 2px !important; }
  html.kcb-touch-device.kcb-mobile-rescue .contact-form input,
  html.kcb-touch-device.kcb-mobile-rescue .contact-form select { min-height: 40px !important; }
  html.kcb-touch-device.kcb-mobile-rescue .contact-form textarea {
    min-height: 76px !important;
    height: 76px !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-submit { min-height: 42px !important; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark {
    width: min(32vw, 200px) !important;
    height: 78px !important;
    margin-top: 42px !important;
    margin-bottom: 4px !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-logo-stage {
    width: min(54vw, 300px) !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-stage-form-only .contact-form {
    gap: 4px !important;
    padding: 7px 10px 9px !important;
  }
  html.kcb-touch-device.kcb-mobile-rescue .contact-form textarea {
    min-height: 62px !important;
    height: 62px !important;
  }
}


/* ============================================================
   SHOW-NIGHT CONTACT HOME BEHAVIOR — MOBILE ONLY

   Mobile CONTACT no longer uses the separate return-devour animation.
   Make this logo speak the exact same visual language as the hero HOME logo:
   normal state -> touch/focus aura -> immediate HOME cleanup.
   Mobile doll physics are intentionally untouched.
   ============================================================ */

@media (max-width: 1100px) {
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-logo,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-eyes {
    transform: translateY(-4%) scale(0.78) !important;
    transition:
      transform 240ms cubic-bezier(.18,.8,.2,1),
      filter 180ms ease,
      opacity 180ms ease !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-logo,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-logo,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:focus-visible .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:focus-visible .contact-home-logo,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-eyes,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-eyes,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:focus-visible .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:focus-visible .contact-home-eyes {
    transform: translateY(-4%) scale(0.855) !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-logo,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-logo,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-logo {
    filter:
      brightness(1.10)
      drop-shadow(0 0 12px rgba(130,0,0,0.52)) !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark.kcb-contact-home-aura .contact-home-eyes,
  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-eyes,
  html.kcb-touch-device.kcb-mobile-rescue .content-stage-shell.contact-page-mode .contact-home-mark:active .contact-home-eyes {
    opacity: 1 !important;
    filter:
      brightness(2.5)
      saturate(2.25)
      drop-shadow(0 0 9px rgba(255,255,255,0.94))
      drop-shadow(0 0 25px rgba(255,0,0,1))
      drop-shadow(0 0 58px rgba(180,0,0,0.86)) !important;
  }

  html.kcb-touch-device .content-stage-shell.contact-page-mode .contact-home-mark {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* CONTACT is a native form surface. Avoid synthetic gesture timing here. */
  html.kcb-touch-device body.kcb-contact-touch-open .contact-form,
  html.kcb-touch-device body.kcb-contact-touch-open .contact-form input,
  html.kcb-touch-device body.kcb-contact-touch-open .contact-form select,
  html.kcb-touch-device body.kcb-contact-touch-open .contact-form textarea,
  html.kcb-touch-device body.kcb-contact-touch-open .contact-submit,
  html.kcb-touch-device body.kcb-contact-touch-open .contact-home-mark {
    touch-action: manipulation !important;
  }
}


/* ============================================================
   SHOW-NIGHT FINAL — MOBILE PLAYER ARROW ALIGNMENT

   The arrow belongs to the compact mobile-safe player. Center it against the
   player's real height rather than using the old hard-coded 8px top offset.
   Mobile dolls are intentionally untouched.
   ============================================================ */
@media (max-width: 1100px) {
  html.kcb-touch-device .site-mobile-player-toggle,
  html.kcb-touch-device.kcb-mobile-rescue .site-mobile-player-toggle {
    left: calc(100% - 1px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}