/* Beerlicity v11.15 — six-device 13×13 + Dirty Thirteen usability polish
   Desktop / Phone / Landscape / Tablet / iPhone / iPad.
   Locked visual identity preserved: this is consistency, discoverability and reflow only. */

/* New account shortcuts exist only on touch/mobile Beerlicity layouts. */
.m-account-shortcuts{display:none}

/* Keep deliberate repetitions (brand, Demo Mode) but remove accidental visual repetition. */
@media (min-width:1025px){
  /* One atmospheric scene, not the same artwork tiled through three desktop layers. */
  .desktop-wrap{
    background:radial-gradient(circle at 50% 28%,#2b170a 0,#0d0805 58%,#050302 100%);
  }
  .pub-desktop{background:#1e1008}
  .desktop-main{background:linear-gradient(180deg,#211107,#160c07 70%,#100905)}
  .desktop-hero{
    background:
      linear-gradient(rgba(9,5,3,.34),rgba(9,5,3,.48)),
      url('assets/mobile-pub-atmosphere.webp') center/cover no-repeat;
  }
  /* Hide baked lettering only where the live HTML welcome sits. */
  .desktop-hero::before{
    left:13%;right:13%;top:12%;bottom:12%;height:auto;
    background:rgba(28,17,11,.90);
    border:1px solid rgba(195,139,54,.16);
    border-radius:6px;
    box-shadow:0 0 22px 14px rgba(28,17,11,.58);
  }
  .hero-copy{z-index:1;background:transparent;box-shadow:none;padding:18px 10px}

  .room-auth .front-door-scene{background-size:cover;background-position:center}
  .room-auth .front-door-scene::before{
    left:13%;right:13%;top:12%;bottom:12%;height:auto;
    background:rgba(29,18,12,.92);
    border-radius:6px;
    box-shadow:0 0 20px 12px rgba(29,18,12,.62);
  }
  .room-auth .door-plaque{z-index:1}

  /* Consistent desktop furniture rhythm. */
  .desktop-boards{align-items:stretch}
  .desktop-boards>section{min-width:0;height:100%}
  .desktop-specials,.desktop-activity,.desktop-picks{display:flex;flex-direction:column}
  .desktop-specials>p,.desktop-picks>.btn,.desktop-activity>.btn{margin-top:auto}
  .desktop-help>button{min-height:54px}
  .patron-entry span{overflow-wrap:anywhere}
}

/* Large touch screens that receive desktop layout (for example some iPad Pro landscape sizes). */
@media (min-width:1025px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  .pub-desktop :where(button,a){min-height:44px}
  .desktop-sidebar nav button{min-height:60px}
  .desktop-header-actions .btn,.desktop-auth-bar .btn{min-height:44px}
  .patron-entry{min-height:72px}
}

@media (max-width:1024px){
  /* Account actions must not be hidden behind the hamburger. */
  .m-account-shortcuts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:calc(100% - 18px);
    max-width:620px;
    margin:7px auto 3px;
    padding:6px;
    border:1px solid #795022;
    border-radius:6px;
    background:linear-gradient(180deg,#2b190d,#160d07);
    box-shadow:inset 0 0 0 1px rgba(223,172,76,.10),0 3px 10px #0008;
    position:relative;
    z-index:30;
  }
  .m-account-shortcuts button{
    min-width:0;
    min-height:44px;
    padding:6px 5px;
    border:1px solid #6f4820;
    border-radius:4px;
    background:linear-gradient(#3b2411,#211208);
    color:#efd69f;
    cursor:pointer;
    text-align:center;
    line-height:1.08;
  }
  .m-account-shortcuts button.account-register{
    border-color:#a9782f;
    background:linear-gradient(#704718,#3b220d);
  }
  .m-account-shortcuts span{display:block;font-weight:700;font-size:clamp(11px,2.8vw,13px)}
  .m-account-shortcuts small{display:block;margin-top:3px;color:#c8ad7d;font:9px/1.1 system-ui,sans-serif}

  /* iPhone/iPad safe-area protection in both portrait and landscape. */
  .m-header{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .m-account-shortcuts{
    padding-left:max(6px,env(safe-area-inset-left));
    padding-right:max(6px,env(safe-area-inset-right));
  }

  /* The retained atmosphere image includes lettering. Suppress it so only live HTML copy reads as a banner. */
  .mobile-pub-atmosphere{
    background:
      linear-gradient(rgba(8,5,3,.76),rgba(8,5,3,.84)),
      url('assets/mobile-pub-atmosphere.webp') center 22%/cover no-repeat;
  }
  .pub-atmo-copy{
    left:8px;right:8px;bottom:7px;
    padding:6px 8px;
    background:linear-gradient(90deg,transparent,rgba(18,10,5,.96) 12%,rgba(18,10,5,.99) 50%,rgba(18,10,5,.96) 88%,transparent);
  }

  /* Prevent double/overlapping outlines at room edges. */
  .mobile-pub-atmosphere{outline-offset:-5px}
  .m-content>*{min-width:0;max-width:100%}
  .special-row>span:nth-child(2),.activity-item>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .special-row strong,.activity-item em{flex:0 0 auto}

  /* Touch discoverability: important actions never depend on hover. */
  .m-drawer button,.m-bottom button,.modal-mobile-nav button,.special-row,.activity-item,.view-offers{min-height:44px}
}

/* PHONE: narrow Android/iPhone portrait. */
@media (max-width:430px){
  .m-account-shortcuts{width:calc(100% - 18px);margin-inline:9px}
  .m-account-shortcuts span{font-size:11px}
  .m-account-shortcuts small{font-size:9px}
  .mobile-pub-atmosphere{margin-left:9px;margin-right:9px}
  .pub-atmo-copy strong{font-size:clamp(15px,4.6vw,20px)}
  .pub-atmo-copy span{font-size:clamp(11px,3.2vw,14px)}
  .pub-atmo-copy small{font-size:clamp(9px,2.55vw,11px)}
}

/* Very small iPhones / compact Android widths: preserve full actions without overflow. */
@media (max-width:350px){
  .m-account-shortcuts{gap:4px;padding:5px}
  .m-account-shortcuts button{padding:5px 3px}
  .m-account-shortcuts span{font-size:10.5px}
  .m-account-shortcuts small{font-size:9px}
  .m-brand strong{font-size:clamp(20px,7vw,25px)}
}

/* WIDE PHONE / foldable portrait: align every top-level element to the same 430px pub shell. */
@media (min-width:431px) and (max-width:599px){
  .m-account-shortcuts{width:412px;max-width:412px;margin-left:auto;margin-right:auto}
  .mobile-pub-atmosphere{width:412px;max-width:412px;margin-left:auto;margin-right:auto}
}

/* TABLET + iPad portrait: readable two-column furniture with consistent outer bounds. */
@media (min-width:600px) and (max-width:1024px){
  .m-account-shortcuts{max-width:640px;margin-top:9px;margin-bottom:5px}
  .m-account-shortcuts button{min-height:48px}
  .m-account-shortcuts span{font-size:13px}
  .m-account-shortcuts small{font-size:10px}
  .mobile-pub-atmosphere{margin-left:18px;margin-right:18px}
  .m-content{align-items:stretch}
  .m-content>section{height:100%}
  .m-drawer button:last-child{border-right:0}
  .m-drawer button:last-child:nth-child(odd){grid-column:1/-1}
}

/* LANDSCAPE phone/tablet: save vertical space without shrinking important text or targets. */
@media (max-width:1024px) and (orientation:landscape) and (max-height:650px){
  .m-account-shortcuts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin:4px 8px 2px calc(var(--beer-rail,0px) + 8px);
    width:auto;
    max-width:none;
    padding:4px max(5px,env(safe-area-inset-right)) 4px max(5px,env(safe-area-inset-left));
  }
  .m-account-shortcuts button{min-height:44px;padding:3px 4px}
  .m-account-shortcuts span{font-size:11px}
  .m-account-shortcuts small{display:none}
  .demo-ribbon{padding:4px 10px 2px}
  .demo-ribbon span{min-width:150px;padding:4px 16px;font-size:10px}
  .mobile-pub-atmosphere{height:104px;margin-top:3px}
  .pub-atmo-copy{bottom:5px;padding:4px 8px}
  .pub-atmo-copy small{font-size:9px;margin-top:3px}
  .m-bottom b,.modal-mobile-nav b{font-size:10px!important}
}

/* iPhone landscape notch protection. */
@media (max-width:926px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .m-header{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .m-content,.house-footer{padding-right:max(12px,env(safe-area-inset-right))}
}

/* Reflow/zoom: never let account access or navigation depend on a single long line. */
@media (max-width:760px){
  .m-account-shortcuts button{white-space:normal;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  .m-account-shortcuts button{transition:none!important}
}