/* Zaplat Gaming — Adaptive UI Core V1
   Layout-only compatibility layer. No application logic, API, permissions, media,
   membership, OAuth, lounge behavior, or workflow rules live in this file. */

:root{
  --zg-adaptive-gutter:clamp(12px,1.8vw,28px);
  --zg-adaptive-shell-max:clamp(1240px,78vw,1480px);
  --zg-adaptive-admin-max:clamp(1500px,82vw,1720px);
  --zg-adaptive-legal-max:clamp(1120px,76vw,1360px);
  --zg-adaptive-draw-max:clamp(1260px,80vw,1500px);
  --zg-adaptive-modal-gap:clamp(8px,2vw,22px);
}

html{
  min-width:280px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body,
#app,
#adminRoot,
main{
  min-width:0;
}

/* Media must never be wider than the canvas that owns it. */
img,video,canvas,svg,iframe{
  max-width:100%;
}

/* Form controls stay inside narrow cards/windows without changing their behavior. */
input,select,textarea{
  max-width:100%;
}

/* Main site canvas: unchanged around the common 1366px desktop size, then grows
   progressively on larger monitors instead of remaining locked to a narrow strip. */
.shell{
  width:min(var(--zg-adaptive-shell-max),calc(100% - var(--zg-adaptive-gutter) - var(--zg-adaptive-gutter)));
}

/* Allow flex/grid children to actually shrink. This prevents long translated labels,
   usernames and game titles from forcing the whole page wider than the window. */
:where(
  .hero,.hero-stats,.hero-actions,.section-head,.feature-row,.giveaway-layout,
  .form-grid,.grid,.cards-2,.cards-3,.cards-4,.prize-grid,.completed-grid,
  .milestone-grid,.episode-row,.footer-inner,.footer-legal,.admin-wrap,.admin-main,
  .admin-head,.stats-grid,.admin-item,.actions,.zg-lib-shell,.zg-lib-hero,
  .zg-lib-controls,.zg-lib-filter-row,.zg-lib-grid,.zg-game-detail-shell,
  .zg-game-hero-card,.zg-game-detail-grid,.zg-game-modal-hero,.zg-game-modal-info,
  .zg-journal-overview-card,.zg-journal-overview-stats,.admin-online-shell,
  .admin-dashboard-head,.admin-kpis,.admin-filter-bar,.admin-members-layout,
  .admin-member-detail,.admin-detail-head,.admin-private-grid,.admin-edit-form,
  .admin-detail-tabs,.admin-page-head,.admin-page-actions
)>*{
  min-width:0;
}

:where(
  .media-body,.feature-card,.tournament-card,.prize-info,.game-tile .info,
  .admin-item,.admin-member-row-copy,.admin-member-detail,.zg-lib-card-body,
  .zg-game-hero-copy,.zg-game-modal-copy,.zg-journal-overview-title
){
  overflow-wrap:break-word;
}

/* Dialogs remain reachable in short desktop windows and on mobile. Width remains
   controlled by each existing component; this only supplies a viewport safety cap. */
.modal{
  padding:max(var(--zg-adaptive-modal-gap),env(safe-area-inset-top))
          max(var(--zg-adaptive-modal-gap),env(safe-area-inset-right))
          max(var(--zg-adaptive-modal-gap),env(safe-area-inset-bottom))
          max(var(--zg-adaptive-modal-gap),env(safe-area-inset-left));
}
.modal-card{
  max-width:calc(100vw - var(--zg-adaptive-modal-gap) - var(--zg-adaptive-modal-gap));
  max-height:calc(100dvh - var(--zg-adaptive-modal-gap) - var(--zg-adaptive-modal-gap));
}

/* Public legal pages use the same adaptive canvas principle. */
.legal-shell{
  width:min(var(--zg-adaptive-legal-max),calc(100% - var(--zg-adaptive-gutter) - var(--zg-adaptive-gutter)));
}
.legal-top-inner,.legal-actions,.legal-card,.legal-meta{
  min-width:0;
}
.legal-hero h1{
  font-size:clamp(30px,3.2vw,46px);
}
.legal-card{
  overflow-wrap:break-word;
}

/* Admin workspace can use more room on 2K/4K/ultrawide displays while keeping its
   existing mobile breakpoints and controls untouched. */
.admin-online-shell{
  width:min(var(--zg-adaptive-admin-max),calc(100% - var(--zg-adaptive-gutter) - var(--zg-adaptive-gutter)));
}
.admin-main,.admin-section,.admin-member-detail{
  max-width:100%;
}

/* Live draw is already responsive; these are only large-screen/short-window guards. */
body.zg-draw-page .wrap{
  width:min(var(--zg-adaptive-draw-max),calc(100% - var(--zg-adaptive-gutter) - var(--zg-adaptive-gutter)));
}
body.zg-draw-page :where(.top,.head,.stats,.stage,.foot)>*{
  min-width:0;
}

/* Normal desktop windows with limited vertical space (for example beside OBS/game).
   Reduce empty vertical padding rather than hiding controls or introducing fixed zoom. */
@media (min-width:701px) and (max-height:820px){
  .hero{padding-top:clamp(28px,5vh,48px);padding-bottom:clamp(20px,4vh,34px)}
  .section{padding-top:clamp(18px,3.3vh,28px);padding-bottom:clamp(18px,3.3vh,28px)}
  .community-hero{min-height:clamp(370px,64dvh,520px)}
  .admin-online-shell{padding-top:18px;padding-bottom:48px}
  body.zg-draw-page .wrap{padding-top:16px;padding-bottom:18px}
  body.zg-draw-page .hero{margin-top:12px;padding-top:20px;padding-bottom:20px}
  body.zg-draw-page .stage{padding-top:18px;padding-bottom:18px}
}

/* Compact laptops / half-screen desktop windows. Existing component-specific rules
   still decide the design; these guards prevent utility rows and headings from clipping. */
@media (max-width:920px){
  :root{--zg-adaptive-gutter:clamp(10px,2.2vw,18px)}
  .section-head,.admin-head,.admin-dashboard-head{flex-wrap:wrap}
  .section-head>*,.admin-head>*,.admin-dashboard-head>*{min-width:0}
  .hero h1{font-size:clamp(34px,7.5vw,54px)}
  .feature-card h3{font-size:clamp(21px,4vw,26px)}
  .big-num{font-size:clamp(38px,8vw,52px)}
  .mini-stat b{font-size:clamp(30px,7vw,38px)}
  .modal-card{border-radius:min(20px,4vw)}
}

/* Phones and very narrow app windows. Keep labels/buttons usable without changing
   what any control does. */
@media (max-width:620px){
  :root{--zg-adaptive-gutter:10px;--zg-adaptive-modal-gap:7px}
  .shell,.legal-shell,.admin-online-shell{
    width:calc(100% - 20px);
  }
  .panel,.feature-card,.mini-stat,.stat,.tournament-card{
    max-width:100%;
  }
  .hero h1{font-size:clamp(30px,10.8vw,42px)}
  .hero h2{font-size:clamp(18px,6vw,24px)}
  .section-head h2{font-size:clamp(22px,7vw,27px)}
  .btn{max-width:100%}
  .legal-top-inner{min-height:68px;flex-wrap:wrap;padding-block:8px}
  .legal-actions{max-width:100%;flex-wrap:wrap}
  .legal-actions select,.legal-home{max-width:100%}
  .legal-hero{padding-top:38px}
  .legal-card{padding:clamp(16px,4vw,22px)}
  body.zg-draw-page .top{flex-wrap:wrap}
  body.zg-draw-page .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  body.zg-draw-page .stat{min-width:0}
}

/* Extremely narrow fallback for resizable desktop windows. */
@media (max-width:390px){
  :root{--zg-adaptive-gutter:8px}
  .shell,.legal-shell,.admin-online-shell{width:calc(100% - 16px)}
  .hero-actions,.actions,.admin-page-actions{gap:7px}
  .legal-actions{width:100%}
  .legal-actions select,.legal-home{flex:1 1 140px}
  body.zg-draw-page .stats{grid-template-columns:1fr 1fr;gap:7px}
}

/* Respect OS accessibility preferences. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}