/* Shared player-screen responsive guardrails. Kept separate from Admin styling. */
:root{--du-page-gutter:1rem;--du-touch-target:48px}
html{min-height:100%}
body{min-width:0;min-height:100vh;min-height:100dvh}
body :is(main,section,article,aside,nav,header,footer,div){min-width:0}
body :is(img,svg,canvas,video){max-width:100%;height:auto}
body :is(button,.btn,input,select,textarea){max-width:100%}

/* The live game, locations and Guild Board all share these application roots. */
#app,#tavernApp,#shopApp,#guildApp{min-width:0}
#app>.mx-auto,#tavernApp>.mx-auto,#shopApp>.mx-auto,#guildApp>.mx-auto{width:100%;padding-inline:var(--du-page-gutter)}
#tavernApp .grid,#shopApp .grid,#guildApp .grid{min-width:0}

@media(max-width:767px){
  :root{--du-page-gutter:.75rem}
  #tavernApp .grid,#shopApp .grid,#guildApp .grid{grid-template-columns:minmax(0,1fr)!important}
  #tavernApp .btn,#shopApp .btn,#guildApp .btn{min-height:var(--du-touch-target)}
  #tavernApp .panel,#shopApp .panel,#guildApp .panel{overflow-wrap:anywhere}
}

@media(min-width:768px) and (max-width:1023px){
  :root{--du-page-gutter:1rem}
  #tavernApp .grid[class*="md:grid-cols-3"],#shopApp .grid[class*="md:grid-cols-3"],#guildApp .grid[class*="md:grid-cols-3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tavernApp .btn,#shopApp .btn,#guildApp .btn{min-height:var(--du-touch-target)}
}

/* Standard monitors retain readable two-column card grids instead of premature thirds. */
@media(min-width:1024px) and (max-width:1599px){
  #tavernApp .grid[class*="md:grid-cols-3"],#shopApp .grid[class*="xl:grid-cols-3"],#guildApp .grid[class*="xl:grid-cols-3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Wide displays centre the existing game shells; cards may use their authored three-column layout. */
@media(min-width:1600px){
  #app>.mx-auto,#tavernApp>.mx-auto,#shopApp>.mx-auto,#guildApp>.mx-auto{padding-inline:1.25rem}
}