/* Qadha drawing contract — r220
   One geometry on participant + host: 900x560, never stretched or cropped. */

/* ---------- Participant drawing ---------- */
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing{
  overscroll-behavior:none!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing #pApp{
  width:100%!important;
  max-width:none!important;
  min-height:calc(100dvh - 64px)!important;
  padding:6px!important;
  place-items:start center!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card{
  width:min(1180px,100%)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:10px!important;
  border-radius:18px!important;
  display:block!important;
  overflow:visible!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-word{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 7px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-prompt{
  min-width:0!important;
  text-align:right!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-prompt h1{
  margin:2px 0!important;
  font-size:clamp(24px,6vw,44px)!important;
  line-height:1.15!important;
  white-space:normal!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-prompt .explain{
  margin:2px 0 0!important;
  font-size:13px!important;
  line-height:1.45!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-actions :is(.hide-word,.drawing-fullscreen-btn){
  width:auto!important;
  min-height:44px!important;
  padding:9px 12px!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:900!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-fullscreen-btn{
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.07)!important;
  color:var(--text,#fff)!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-rotate-hint{
  display:none;
  margin:4px 0 6px;
  padding:6px 9px;
  border-radius:10px;
  background:rgba(255,212,61,.09);
  color:var(--gold,#ffd43d);
  font-size:11px;
  font-weight:800;
  text-align:center;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .ready-started,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .ready-word{
  width:auto!important;
  max-width:100%!important;
  min-height:36px!important;
  margin:4px auto 6px!important;
  padding:6px 10px!important;
  font-size:12px!important;
  line-height:1.35!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tools-v1711{
  width:100%!important;
  margin:6px 0 7px!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:"colors colors" "brush eraser" "actions actions"!important;
  gap:6px!important;
  border-radius:14px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .color-palette{
  grid-area:colors!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  gap:6px!important;
  overflow-x:auto!important;
  padding:2px 2px 5px!important;
  scrollbar-width:none!important;
  overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .color-palette::-webkit-scrollbar{display:none!important}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tool-section:has(.brush-sizes){grid-area:brush!important}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tool-section:has(.eraser-sizes){grid-area:eraser!important}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-actions{grid-area:actions!important}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tool-section{
  min-width:0!important;
  padding:5px!important;
  border-radius:10px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tool-label{
  font-size:10px!important;
  line-height:1.2!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .brush-sizes{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .eraser-sizes{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tool-group button{
  min-height:40px!important;
  padding:6px 5px!important;
  font-size:11px!important;
  white-space:normal!important;
  line-height:1.2!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .color-swatch{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing #drawCanvas{
  display:block!important;
  width:min(100%,1100px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:900/560!important;
  margin:0 auto!important;
  border-radius:13px!important;
  touch-action:none!important;
  object-fit:contain!important;
  overscroll-behavior:contain!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card>.rule{
  margin:6px 0 0!important;
  padding:6px 9px!important;
  font-size:11px!important;
  line-height:1.35!important;
}

/* Fullscreen/fallback immersive drawing. */
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive{
  overflow:hidden!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .participant-top{
  display:none!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive #pApp{
  min-height:100dvh!important;
  padding:0!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .drawing-card,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen{
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  padding:6px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--bg,#080b20)!important;
  display:grid!important;
  grid-template-columns:minmax(180px,250px) minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:"head head" "tools canvas" "rule rule"!important;
  gap:6px!important;
  overflow:hidden!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .draw-word,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen .draw-word{
  grid-area:head!important;
  margin:0!important;
  padding:0 3px!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .drawing-rotate-hint,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen .drawing-rotate-hint{
  display:none!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive :is(.ready-started,.ready-word),
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen :is(.ready-started,.ready-word){
  display:none!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .draw-tools-v1711,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen .draw-tools-v1711{
  grid-area:tools!important;
  margin:0!important;
  align-self:stretch!important;
  overflow:auto!important;
  grid-template-columns:1fr!important;
  grid-template-areas:"colors" "brush" "eraser" "actions"!important;
  align-content:start!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .color-palette,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen .color-palette{
  display:grid!important;
  grid-template-columns:repeat(4,38px)!important;
  justify-content:center!important;
  overflow:visible!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive #drawCanvas,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen #drawCanvas{
  grid-area:canvas!important;
  align-self:center!important;
  justify-self:center!important;
  width:min(100%,calc((100dvh - 76px)*900/560))!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:900/560!important;
  min-height:0!important;
  max-height:calc(100dvh - 76px)!important;
}
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-drawing-immersive .drawing-card>.rule,
html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-card:fullscreen>.rule{
  grid-area:rule!important;
  margin:0!important;
  padding:3px 6px!important;
  font-size:10px!important;
}

/* Portrait fallback: exact canvas geometry remains more important than height. */
@media(max-width:700px) and (orientation:portrait){
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-rotate-hint{
    display:block!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing #drawCanvas{
    width:100%!important;
    height:auto!important;
    aspect-ratio:900/560!important;
    min-height:0!important;
    max-height:none!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-actions{
    width:100%!important;
    justify-content:stretch!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .drawing-word-actions>*{
    flex:1 1 0!important;
  }
}
@media(max-width:700px){
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .participant-top{
    width:calc(100% - 8px)!important;
    margin:4px auto!important;
    padding:4px 7px!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .participant-top img{
    width:68px!important;
    max-height:30px!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .participant-top span,
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .participant-top small{
    display:none!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-word{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-tools-v1711{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:390px){
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .brush-sizes{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html[data-ui-mode="modern"] body.qadha-participant-v2.qadha-participant-drawing .draw-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ---------- Host/projector drawing ---------- */
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus{
  overflow:hidden!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus #qApp{
  min-height:100dvh!important;
  padding:5px 8px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-screen-v129{
  width:100%!important;
  max-width:none!important;
  height:calc(100dvh - 10px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-toolbar{
  min-height:44px!important;
  padding:2px 6px!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-toolbar .q-toolbar-action{
  width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-toolbar .q-toolbar-action.danger{
  width:auto!important;min-width:96px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-body-v129{
  min-height:0!important;
  display:block!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-sidebar-v129{
  display:none!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-stage-v129,
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .question-card{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .question-card{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:5px!important;
  padding:6px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-header{
  min-height:34px!important;
  padding:3px 7px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-content-scroll{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:stretch!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .question-turn-banner{
  display:none!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-stage-v260{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(130px,170px) minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-qr-rail{
  min-width:0!important;
  padding:6px!important;
  align-self:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-qr-rail .special-qr-button{
  padding:5px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-qr-rail .q-compact-qr,
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-qr-rail img{
  width:min(130px,100%)!important;
  height:auto!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-workspace-v260{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  gap:4px!important;
  place-items:stretch!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-host-heading{
  min-height:36px!important;
  padding:3px 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-host-heading h2{
  margin:0!important;
  font-size:18px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-host-heading>p{
  margin:0!important;
  font-size:11px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .host-draw-observer{
  min-height:26px!important;
  padding:3px 8px!important;
  font-size:11px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .host-draw-paper{
  width:min(100%,calc((100dvh - 185px)*900/560))!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:900/560!important;
  min-height:0!important;
  max-height:calc(100dvh - 185px)!important;
  margin:auto!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:14px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .host-draw-canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:900/560!important;
  object-fit:contain!important;
  border-radius:12px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-control-dock{
  position:relative!important;
  width:100%!important;
  min-height:64px!important;
  max-height:none!important;
  padding:5px!important;
  display:grid!important;
  grid-template-columns:minmax(88px,130px) minmax(0,1fr) minmax(0,1.1fr)!important;
  gap:6px!important;
  align-items:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-timer-block{
  min-height:50px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus :is(.q-timer-buttons,.q-question-actions){
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus :is(.q-timer-buttons,.q-question-actions) .btn{
  min-height:38px!important;
  height:auto!important;
  padding:6px 9px!important;
  font-size:11px!important;
  line-height:1.2!important;
}

/* Smaller host screens still prioritize the drawing itself. */
@media(max-width:900px){
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus{
    overflow:auto!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-screen-v129{
    height:auto!important;
    min-height:100dvh!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-stage-v260{
    grid-template-columns:1fr!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .drawing-qr-rail{
    display:grid!important;
    grid-template-columns:minmax(100px,150px) minmax(0,1fr)!important;
    gap:8px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .host-draw-paper{
    width:100%!important;
    max-height:none!important;
    aspect-ratio:900/560!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="qadha"].q-game-active.qadha-drawing-focus .q-question-control-dock{
    grid-template-columns:1fr!important;
  }
}