/* DrawGuess mobile gameplay v2 — portrait-first, touch-first, low-overhead */
@media (max-width: 820px) {
  :root { --dg-mobile-gap: 8px; }
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
  body { background-attachment:scroll !important; }
  #bg .sh { display:none !important; animation:none !important; filter:none !important; }
  #game {
    width:100% !important; max-width:100% !important; min-height:100svh !important;
    min-height:100dvh !important; height:auto !important; margin:0 !important;
    padding: max(7px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) !important;
    display:flex !important; flex-direction:column !important; gap:var(--dg-mobile-gap) !important;
    overflow:visible !important; contain:layout style;
  }
  #top {
    position:sticky !important; top:env(safe-area-inset-top) !important; z-index:25 !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important; gap:7px !important; min-height:58px !important;
    padding:7px 9px !important; border-radius:16px !important;
  }
  #rd { min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  #top .hint { min-width:0 !important; max-width:100% !important; font-size:clamp(12px,3.7vw,16px) !important; line-height:1.35 !important; }
  #timer { width:43px !important; height:43px !important; font-size:14px !important; }
  #game-wallet { min-height:34px !important; padding:4px 7px !important; }
  #game-menu-open { min-height:36px !important; padding:5px 9px !important; font-size:11px !important; }
  #tabs {
    position:sticky !important; top:calc(env(safe-area-inset-top) + 62px) !important; z-index:24 !important;
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:5px !important;
    padding:4px !important; margin:0 !important; border-radius:14px !important;
  }
  #tabs button { min-height:42px !important; border-radius:11px !important; font-size:13px !important; font-weight:850 !important; }
  #main {
    display:flex !important; flex-direction:column !important; gap:var(--dg-mobile-gap) !important;
    width:100% !important; min-width:0 !important; min-height:0 !important; overflow:visible !important;
  }
  /* The default view is the actual game: board, tools, then guesses. */
  #game[data-tab="chat"] #players { display:none !important; }
  #game[data-tab="chat"] #center { display:flex !important; order:0 !important; width:100% !important; min-width:0 !important; gap:7px !important; }
  #game[data-tab="chat"] #chatbox { display:flex !important; order:1 !important; width:100% !important; min-width:0 !important; }
  #center { flex-direction:column !important; }
  #cw { width:100% !important; min-width:0 !important; min-height:0 !important; }
  #stage {
    width:100% !important; height:clamp(250px, 43svh, 440px) !important;
    min-height:250px !important; max-height:52svh !important; aspect-ratio:4/3 !important;
    border-width:4px !important; border-radius:15px !important; overflow:hidden !important;
    touch-action:none !important; contain:strict !important;
  }
  #stage canvas { display:block !important; width:100% !important; height:100% !important; touch-action:none !important; }
  #tools {
    display:flex !important; flex-flow:row wrap !important; align-items:center !important;
    justify-content:center !important; width:100% !important; min-width:0 !important;
    max-height:120px !important; overflow-x:hidden !important; overflow-y:auto !important;
    padding:7px !important; gap:6px !important; border-radius:14px !important;
    box-shadow:0 3px 10px rgba(70,50,15,.06) !important;
  }
  #tools .tb { flex:0 0 auto !important; min-width:42px !important; min-height:42px !important; padding:6px 9px !important; border-radius:11px !important; }
  #tools .sw { flex:0 0 28px !important; width:28px !important; height:28px !important; min-width:28px !important; }
  #chatbox {
    min-height:190px !important; max-height:34svh !important; padding:10px !important;
    display:flex !important; flex-direction:column !important; gap:6px !important; border-radius:15px !important;
  }
  #chatbox .lab { flex:0 0 auto !important; margin:0 !important; padding-bottom:5px !important; }
  #msgs { flex:1 1 auto !important; min-height:75px !important; max-height:none !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; }
  #cin { flex:0 0 auto !important; display:flex !important; gap:7px !important; padding:0 !important; }
  #ci { min-width:0 !important; min-height:46px !important; font-size:16px !important; }
  #send { flex:0 0 auto !important; min-width:68px !important; min-height:46px !important; padding:7px 12px !important; }
  /* Roster is a dedicated screen, not a blank initial screen. */
  #game[data-tab="players"] #players {
    display:flex !important; order:0 !important; width:100% !important; height:auto !important;
    min-height:0 !important; max-height:none !important; padding:12px !important;
  }
  #game[data-tab="players"] #center, #game[data-tab="players"] #chatbox { display:none !important; }
  #players .lab { margin-bottom:8px !important; }
  #plist { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; max-height:65svh !important; overflow:auto !important; }
  #plist .pl { min-width:0 !important; min-height:58px !important; padding:8px !important; }
  #report-open { right:10px !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important; top:auto !important; z-index:30 !important; }
  #report-modal { z-index:100 !important; }
  /* Avoid expensive glass filters on mobile GPUs. */
  #top, #tabs, #players, #chatbox, #tools, #mnav, .pnl { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  #top, #players, #chatbox, #tools { box-shadow:0 3px 11px rgba(73,54,20,.07) !important; }
  .fl, .dwn, #bg .sh { animation:none !important; }
  button, input, select, textarea { touch-action:manipulation; }
}
@media (max-width: 390px) {
  #stage { height:clamp(230px, 39svh, 340px) !important; min-height:230px !important; }
  #chatbox { max-height:37svh !important; }
  #tools { max-height:112px !important; }
  #tools .tb { min-width:39px !important; min-height:39px !important; padding:5px 7px !important; }
  #tools .tb span { font-size:10px !important; }
}
@media (max-height: 700px) and (max-width: 820px) {
  #stage { height:38svh !important; min-height:205px !important; }
  #chatbox { max-height:30svh !important; min-height:155px !important; }
  #tools { max-height:94px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #game *, #game *::before, #game *::after { animation:none !important; transition:none !important; }
}