/* Bag of Dungeon 3D — responsive / mobile media queries */
/* Keep this file loaded LAST so its rules can override main.css and combat.css at matching breakpoints */

@media(max-width:800px){
 .heroSelectLogo{
  top:8px;
  width:min(84vw,520px);
  max-height:14vh;
 }
}
@media(max-width:520px){
 .heroSelectLogo{
  width:82vw;
  max-height:12.5vh;
 }
}
@media(max-height:700px) and (orientation:landscape){
 .heroSelectLogo{
  width:min(48vw,500px);
  max-height:16vh;
 }
}
@media(max-width:800px){
 .heroSelectContent{grid-template-rows:minmax(230px,1fr) auto;padding:6px 4px 8px}
 .heroStage{width:100%;grid-template-columns:42px 1fr 42px;min-height:230px}
 .heroPreviewWrap{min-height:230px;max-height:52vh}
 .heroArrow{font-size:68px;height:82px;width:42px}
 .heroInfoPanel{width:96vw;margin-top:-2px;padding:7px 10px 9px}
 .selectedHeroDesc{margin-bottom:5px}
 .heroStatRow{padding:5px 0}
}
@media(max-height:700px) and (orientation:landscape){
 .heroSelectContent{grid-template-rows:minmax(190px,1fr) auto;padding-top:3px}
 .heroStage,.heroPreviewWrap{min-height:190px}
 .heroInfoPanel{padding-top:6px;padding-bottom:7px}
 .selectedHeroDesc{display:none}
 .heroSpecialBlock span{font-size:14px}
}
@media(max-width:800px){.slotSymbol{width:22px;height:22px}.slotLabel{gap:4px}}
@media(max-width:800px){#app{grid-template-columns:1fr;grid-template-rows:1fr 240px}#side{grid-row:2;border-right:none;border-top:5px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}#brandHeader{display:none}#log{max-height:105px;min-height:80px}.box{padding:6px}.sectionTitle{margin:3px 0}.itemBtn{width:38px;height:38px;font-size:21px}#inventory{grid-column:1/3}#topbar{font-size:13px}.badge{padding:6px}.tile{--tile:128px}.combatGrid{grid-template-columns:1fr}.card{max-height:90vh;overflow:auto}.charCard{min-height:270px;padding:12px}.charGlyph{height:125px}.charCard h3{font-size:22px}}
@media(max-width:800px){
  #lightingPanel{top:50px;right:6px;width:calc(100vw - 12px);max-height:55vh}
  .lightRow{grid-template-columns:120px 1fr 42px}
}
@media(max-width:800px){
  #compass{width:72px;height:72px;top:56px;right:8px}
  .compassRose span{font-size:12px}
  .compassNeedle{font-size:22px!important}
}
@media(max-width:800px){
  #compass{
    width:82px!important;
    height:82px!important;
    right:8px!important;
    bottom:68px!important;
  }
  .compassDial span{font-size:13px}
  .compassArrow{font-size:27px;width:34px;height:54px;margin-left:-17px;margin-top:-27px}
}
@media(max-width:800px){.testerWarningScroll{padding:18px 16px;font-size:16px}}
@media(max-width:800px){
  html,body{height:100%;overflow:hidden}

  #app{
    height:100%;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) 58px;
  }

  #main{
    min-height:0;
    grid-row:1;
  }

  /* Bottom character drawer: collapsed by default, expands over the board. */
  #side{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:110;
    display:block;
    max-height:72vh;
    height:auto;
    overflow:auto;
    border-right:none;
    border-top:4px solid var(--ink);
    padding:7px 8px 10px;
    background:var(--panel);
    transform:translateY(calc(100% - 58px));
    transition:transform .24s ease;
    box-shadow:0 -8px 20px rgba(0,0,0,.45);
  }
  #side.mobileExpanded{
    transform:translateY(0);
  }
  #side.mobileCollapsed{
    transform:translateY(calc(100% - 58px));
  }

  #side #brandHeader{display:none}

  #mobileSheetToggle{
    display:block;
    position:sticky;
    top:0;
    z-index:12;
    width:100%;
    height:42px;
    padding:4px 10px;
    margin:0 0 5px;
    font-size:13px;
    line-height:1;
    box-shadow:none;
  }
  #mobileSheetToggle::before{
    content:"";
    display:block;
    width:72px;
    height:5px;
    margin:0 auto 5px;
    border-radius:4px;
    background:#111;
    opacity:.85;
  }

  #mobileStatus{
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:4px 8px;
    align-items:center;
    padding:6px 8px;
    margin-bottom:6px;
    border:2px solid var(--ink);
    background:var(--cream);
    font-size:11px;
    font-weight:bold;
  }
  #mobileStatus .mobileHero{
    grid-column:1/-1;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobileStatus .mobileDecks{
    grid-column:1/-1;
    font-size:10px;
    font-weight:normal;
  }

  #topbar{
    left:7px;
    right:7px;
    top:7px;
    align-items:flex-start;
  }
  #topbar .cluster:first-child{display:none}
  #topbar .cluster:last-child{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    justify-content:flex-start;
  }
  #topbar button{
    min-width:38px;
    height:38px;
    padding:4px 7px;
    font-size:0;
    box-shadow:2px 2px 0 #000;
  }
  #zoomOut::after{content:"−";font-size:17px}
  #centreBtn::after{content:"◎";font-size:17px}
  #zoomIn::after{content:"+";font-size:17px}
  #viewBtn{
    margin-left:auto;
    min-width:52px!important;
    font-size:12px!important;
  }
  #northUpBtn,#lightingBtn{display:none}
  #menuBtn{
    min-width:38px!important;
  }
  #menuBtn::after{content:"☰";font-size:17px}

  /* Small centred cross at the bottom of the play area. */
  #mobileDpad{
    position:absolute;
    left:50%;
    right:auto;
    bottom:12px;
    z-index:72;
    display:grid;
    grid-template-columns:44px 44px 44px;
    grid-template-rows:40px 40px 40px;
    gap:3px;
    transform:translateX(-50%);
    pointer-events:auto;
  }
  #mobileDpad button{
    padding:0;
    min-width:0;
    border-width:2px;
    font-size:13px;
    box-shadow:1px 1px 0 #000;
  }
  .dpadN{grid-column:2;grid-row:1}
  .dpadW{grid-column:1;grid-row:2}
  .dpadCentre{grid-column:2;grid-row:2}
  .dpadE{grid-column:3;grid-row:2}
  .dpadS{grid-column:2;grid-row:3}
  .dpadRest{
    position:absolute;
    left:142px;
    bottom:3px;
    width:72px;
    height:34px;
    font-size:12px!important;
  }
  .dpadBtn[data-action="lay"]::after{content:"+";font-size:10px;margin-left:2px}
  .dpadBtn[data-action="move"]{background:#f7e9c1}
  .dpadBtn:disabled{opacity:.32}

  #controls{
    left:8px;
    right:auto;
    bottom:10px;
    max-width:calc(100% - 220px);
    justify-content:flex-start;
  }
  #controls button{font-size:11px;padding:6px}

  #compass{
    width:68px!important;
    height:68px!important;
    right:12px!important;
    top:58px!important;
    bottom:auto!important;
  }
  .compassDial span{font-size:11px}
  .compassArrow{
    font-size:22px;
    width:28px;
    height:44px;
    margin-left:-14px;
    margin-top:-22px;
  }

  #inventory{grid-column:auto}
  #log{max-height:125px;min-height:70px}
}
@media(max-width:520px){
 .heroSelectContent{padding-left:2px;padding-right:2px}
 .heroStage{grid-template-columns:34px 1fr 34px}
 .heroArrow{width:34px;font-size:58px}
 .heroInfoPanel{width:98vw}
 .heroInfoPanel h1{font-size:25px}
 .selectedHeroDesc{font-size:14px}
 .heroStatRow{gap:2px}
 .heroStat strong{font-size:20px}
 .heroStatIcon{font-size:20px}
 .heroSpecialBlock strong{font-size:20px}
 .heroSpecialBlock span{font-size:13px}
 .chooseHeroBtn{font-size:15px;padding:7px 16px}
}
@media(max-width:520px){
 .heroPreviewWrap.heroLeavingLeft{transform:translateX(-24px) scale(.98)}
 .heroPreviewWrap.heroLeavingRight{transform:translateX(24px) scale(.98)}
 @keyframes heroEnterLeft{
  from{opacity:0;transform:translateX(-24px) scale(.98)}
  to{opacity:1;transform:translateX(0) scale(1)}
 }
 @keyframes heroEnterRight{
  from{opacity:0;transform:translateX(24px) scale(.98)}
  to{opacity:1;transform:translateX(0) scale(1)}
 }
}
@media(max-width:800px){
  #modal:has(.testerWarningScroll){
    padding:8px!important;
    align-items:center!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  #modal .card:has(.testerWarningScroll){
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    overflow:visible!important;
    margin:auto!important;
    padding:0 0 max(8px,env(safe-area-inset-bottom))!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .testerWarningScroll{
    width:min(96vw,620px);
    max-width:96vw;
    min-height:0;
    padding:
      clamp(58px,9vw,78px)
      clamp(58px,15vw,88px)
      clamp(66px,11vw,90px);
    font-size:clamp(14px,3.9vw,17px);
    line-height:1.28;
    background-size:100% 100%;
  }

  .testerWarningScroll > div:first-child{
    font-size:clamp(20px,6vw,28px)!important;
    line-height:1.05!important;
    margin-bottom:clamp(18px,5vw,28px)!important;
  }
}
@media(max-width:430px){
  .testerWarningScroll{
    width:98vw;
    max-width:98vw;
    padding:
      54px
      60px
      64px;
    font-size:14px;
    line-height:1.24;
  }

  .testerWarningScroll > div:first-child{
    font-size:21px!important;
    margin-bottom:18px!important;
  }
}
@media(min-width:801px){
  #mobileDpad{
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:72;
    display:grid;
    grid-template-columns:48px 48px 48px;
    grid-template-rows:44px 44px 44px;
    gap:4px;
    transform:translateX(-50%);
    pointer-events:auto;
  }
  #mobileDpad button{
    padding:0;
    min-width:0;
    border-width:2px;
    font-size:14px;
    box-shadow:1px 1px 0 #000;
  }
  .dpadN{grid-column:2;grid-row:1}
  .dpadW{grid-column:1;grid-row:2}
  .dpadCentre{grid-column:2;grid-row:2}
  .dpadE{grid-column:3;grid-row:2}
  .dpadS{grid-column:2;grid-row:3}
  .dpadRest{
    position:absolute;
    left:154px;
    bottom:5px;
    width:76px;
    height:36px;
    font-size:12px!important;
  }
  .dpadBtn[data-action="lay"]::after{content:"+";font-size:10px;margin-left:2px}
  .dpadBtn[data-action="move"]{background:#f7e9c1}
  .dpadBtn:disabled{opacity:.32}
}


/* v12.47 — mobile bottom panels keep the dungeon visible */
@media(max-width:800px){
  #modal.modalEdge{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  }
  #modal.modalEdge .card{
    width:100%!important;
    max-width:none!important;
    max-height:48dvh!important;
    margin:0!important;
    padding:8px!important;
  }
  #modal.questLogModal{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:6px!important;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.82) 100%)!important;
  }
  #modal.questLogModal .card{
    width:100%!important;
    max-width:none!important;
    height:64dvh!important;
    max-height:64dvh!important;
    margin:0!important;
    padding:8px!important;
  }
  #questLogBtn{display:inline-flex!important}
}

@media(max-width:800px){#modal{z-index:800!important}}