/* Beerlicity v11.14 — surgical responsive stabilization
   Fixes confirmed by 13×13 / Dirty Thirteen / Dirty Dozen audit.
   This file intentionally preserves the locked Beerlicity visual identity. */

/* Shared resilience: grid/flex children may shrink instead of forcing overflow. */
.desktop-header > *,
.desktop-hero-row > *,
.desktop-boards > *,
.desktop-help > *,
.m-content > *,
.modal-header > *,
.entry > *,
.offer > * { min-width: 0; }

.desktop-wordmark,
.desktop-auth-bar,
.desktop-footer,
.desktop-help,
.patron-entry,
.pub-atmo-copy,
.m-drawer button { overflow-wrap: anywhere; }

/* Match the class emitted by app.js for reserved future-room badges. */
.status-chip {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid #95703c;
  border-radius: 999px;
  color: #e9cb8d;
  font: 700 11px/1.2 system-ui, sans-serif;
  white-space: nowrap;
}

/* Secondary labels remain secondary, but never microscopic. */
.sample-activity-label { font-size: 10px; line-height: 1.3; }

/* DESKTOP — restore atmosphere without redesigning the HTML dashboard. */
@media (min-width: 1025px) {
  .desktop-wrap {
    position: relative;
    isolation: isolate;
    background:
      linear-gradient(rgba(8,5,3,.58), rgba(8,5,3,.82)),
      url('assets/mobile-pub-atmosphere.webp') center/cover fixed no-repeat;
  }

  .pub-desktop {
    position: relative;
    background:
      linear-gradient(rgba(30,16,8,.94), rgba(18,10,5,.97)),
      url('assets/mobile-pub-atmosphere.webp') center/cover no-repeat;
  }

  .desktop-main {
    background:
      linear-gradient(rgba(24,13,7,.91), rgba(17,9,5,.95)),
      url('assets/mobile-pub-atmosphere.webp') center/cover no-repeat;
  }

  /* Prevent scene stretching. The existing copy mask remains in place to hide baked lettering. */
  .desktop-hero,
  .room-auth .front-door-scene {
    background-size: cover;
    background-position: center;
  }

  /* Give desktop copy a contained readable backing instead of expanding darkness across the scene. */
  .hero-copy {
    background: rgba(28,17,11,.93);
    box-shadow: 0 0 18px 10px rgba(28,17,11,.72);
  }
}

/* DESKTOP BREAKPOINT — avoid a cramped jump immediately above 1024px. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .desktop-wrap { padding: 16px; }
  .pub-desktop { grid-template-columns: 190px minmax(0,1fr); }
  .desktop-sidebar { padding: 12px 10px; }
  .desktop-logo { height: 92px; }
  .desktop-sidebar nav button { min-height: 56px; padding: 10px; }
  .desktop-sidebar nav b { font-size: 17px; }
  .desktop-sidebar nav small { font-size: 12px; }
  .desktop-demo { margin-top: 16px; padding: 12px 8px; font-size: 12px; }
  .desktop-demo b { font-size: 17px; }

  .desktop-header {
    grid-template-columns: minmax(175px,.9fr) minmax(210px,1fr) minmax(175px,.9fr);
    gap: 10px;
    padding: 14px 16px;
  }
  .desktop-wordmark strong { font-size: clamp(25px,3vw,34px); }
  .desktop-header-actions { gap: 6px; }
  .desktop-header-actions .btn { padding: 9px 8px; }

  .desktop-auth-bar { gap: 8px; padding: 9px 16px; }
  .desktop-hero-row { grid-template-columns: minmax(0,1fr) 205px; gap: 10px; padding: 12px; }
  .desktop-hero { min-height: 340px; padding: 16px 10% 16px 17%; }
  .hero-copy h1 { font-size: clamp(24px,2.7vw,32px); }
  .desktop-slogan { font-size: clamp(18px,1.9vw,22px); }
  .hero-copy > p:not(.desktop-slogan) { font-size: 13px; }

  .desktop-boards { padding: 0 12px 12px; gap: 10px; }
  .desktop-help { margin: 0 12px 12px; gap: 10px; }
  .desktop-help button:not(.btn) { min-height: 52px; padding-inline: 8px; }
}

/* TABLET RECOVERY — the legacy stylesheet contains a malformed token before its
   600–1024px refinement block. These clean rules restore the intended tablet layout. */
@media (max-width: 1024px) and (min-width: 600px) {
  .mobile-app { width: min(100%,900px); max-width: 900px; }
  .m-content {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
    padding: 18px 22px 28px;
  }
  .activity-card { grid-column: 1 / -1; }
  .m-brand strong { font-size: clamp(28px,4vw,32px); }
  .m-drawer {
    width: min(100%,900px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 18px 18px;
  }
  .m-drawer button:nth-child(odd) { border-right: 1px solid #5c3718; }
  .m-bottom { width: min(100%,900px); }
  .pub-panel h2 { font-size: 24px; }
  .pub-panel h3 { font-size: 19px; }
  .pint-row { font-size: 19px; }
  .pint-row strong { font-size: 24px; }
}

/* WIDE PHONE — keep drawer, bottom rail and decorative rails on the same 430px pub shell. */
@media (min-width: 431px) and (max-width: 599px) {
  .mobile-app,
  .m-bottom {
    width: 430px;
    max-width: 430px;
  }

  .m-drawer {
    left: 50%;
    right: auto;
    width: 430px;
    max-width: 430px;
    transform: translate(-50%,-125%);
  }
  .m-drawer.open { transform: translate(-50%,0); }

  .mobile-app::before { left: calc(50% - 215px); }
  .mobile-app::after { right: calc(50% - 215px); }
}

/* FRONT DOOR / reserved room selector correction: app.js puts the room class on the modal itself. */
@media (max-width: 1024px) {
  .modal.room-auth,
  .modal.room-cellar,
  .modal.room-progression {
    background-image: linear-gradient(rgba(26,17,12,.92),rgba(26,17,12,.96));
  }
}

/* LANDSCAPE — preserve the rail concept but restore readable labels. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 650px) {
  .m-bottom b,
  .modal-mobile-nav b { font-size: 10px !important; line-height: 1.1; }
  .eyebrow { font-size: 10px !important; }
  .screen-earn .demo-strip { font-size: 10px !important; }
  .m-bottom .pub-nav-icon,
  .modal-mobile-nav .pub-nav-icon { width: 25px !important; height: 25px !important; }
  .m-bottom .pub-nav-icon svg,
  .modal-mobile-nav .pub-nav-icon svg { width: 24px !important; height: 24px !important; }
}

/* Very compact landscape: never reduce actionable labels below 10px. */
@media (max-width: 740px) and (orientation: landscape) and (max-height: 500px) {
  .m-bottom b,
  .modal-mobile-nav b,
  .eyebrow { font-size: 10px !important; }
}