/* Stage + live chat layout (loaded after style.css and niffeln-theme.css).

   Normal page:  the chat sits directly under the stage instead of below the whole question list.
   Stream-Ansicht (.stage.broadcast): the complete stage - countdown, question, image, answers, buttons -
   plus the chat fit on ONE screen without scrolling, on any screen size or shape.
   Everything is sized in multiples of one unit (--u = 1px on a 1920x1080 screen) that follows the window, so the whole
   layout scales up and down as one piece. app.js (fitStage) shrinks the text a little further via --fit when a very long
   question or answer would still not fit. */

/* ---------- normal page ---------- */
/* The stage keeps its natural height (it used to stretch to the height of the long question list) and is compact enough
   that stage + chat are visible together on a laptop screen. */
.studio-grid{align-items:start}
/* long question titles must never widen a grid column (this pushed the page to 1600px wide on phones) */
.studio-grid>*,.bottom-grid>*{min-width:0}
.question-row .q-copy strong{overflow-wrap:anywhere}
.stage .stage-content{flex:none;min-height:300px;padding:clamp(14px,2.2vh,22px) 24px}
.stage .option{min-height:clamp(44px,6.4vh,62px)}
.stage .panel-top{margin-bottom:16px}
.stage .live-label{margin-bottom:16px}
.stage .timer-track{margin:10px 0 16px}
.stage .stage-content h2{font-size:clamp(20px,3.1vh,30px);margin-bottom:14px}
.stage .question-image{max-height:clamp(90px,17vh,220px);margin:10px auto}
.stage .stage-instruction{margin:14px 0}
.stage .stage-footer{padding-top:12px}
.stage .round-controls{margin-top:14px}
.stage-chat{display:flex;flex-direction:column;min-height:0;margin-top:14px;padding-top:12px;border-top:1px solid #342242}
.stage-chat .section-row{margin:0}
.stage-chat h3{margin:0;font-size:16px}
.stage-chat .chat{height:clamp(110px,18vh,240px);margin-top:8px;padding-right:6px}
.stage-chat .chat-message{flex-wrap:wrap;gap:2px 10px;padding:6px 0}
.stage-chat .chat-message strong{min-width:0;max-width:100%}
.stage-chat .chat-message .chat-text{min-width:0;flex:1 1 40%;overflow-wrap:anywhere}
.chat-message.answer-hidden .chat-text{font-style:italic;color:#a38caf;letter-spacing:.03em}
.chat-divider{text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a38caf;padding:7px 0;border-bottom:1px solid #30243d}
.bottom-grid{grid-template-columns:1fr}
.stage.chat-off .stage-chat{display:none}

/* ---------- Stream-Ansicht ---------- */
body.stream-mode{overflow:hidden}
body.stream-mode .stage.broadcast{position:fixed;inset:0;z-index:30;margin:0}

.stage.broadcast{
  /* 1 unit = 1px on a 1920x1080 screen; follows the smaller of width/height so nothing ever overflows */
  --u:min(100vw / 1920,100vh / 1080);
  --chat-w:max(170px,calc(var(--u) * 420));
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--chat-w);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top chat" "content chat" "controls chat";
  column-gap:calc(var(--u) * 24);
  row-gap:calc(var(--u) * 12);
  min-height:0;height:100%;
  padding:calc(var(--u) * 20) calc(var(--u) * 28);
  overflow:hidden;border:0;border-radius:0;clip-path:none;box-shadow:none;
  background:#100c19;
}
@supports (height:100dvh){.stage.broadcast{--u:min(100vw / 1920,100dvh / 1080)}}
.stage.broadcast.chat-off{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "content" "controls"}
.stage.broadcast.chat-off .stage-chat{display:none}

/* header: only the buttons, right-aligned */
.stage.broadcast .panel-top{grid-area:top;margin:0;justify-content:flex-end}
.stage.broadcast .panel-top>div:first-child{display:none}
.stage.broadcast .stage-actions{gap:calc(var(--u) * 8)}
.stage.broadcast .stage-actions .text-btn{font-size:max(10px,calc(var(--u) * 15));padding:max(4px,calc(var(--u) * 10)) max(7px,calc(var(--u) * 16))}

/* the question card: a flex column that never scrolls */
.stage.broadcast .stage-content{
  grid-area:content;min-height:0;flex:none;
  padding:calc(var(--u) * 26) calc(var(--u) * 36);
  display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
}
.stage.broadcast .stage-content:before{left:calc(var(--u) * 36);width:calc(var(--u) * 90);height:max(2px,calc(var(--u) * 4))}
.stage.broadcast .live-label{margin-bottom:calc(var(--u) * 10);font-size:max(9px,calc(var(--u) * 13))}
.stage.broadcast .question-meta{font-size:max(10px,calc(var(--u) * 17));align-items:flex-end}
.stage.broadcast #timer{font-size:calc(max(24px,var(--u) * 76) * var(--fit,1));line-height:1}
.stage.broadcast .timer-track{margin:calc(var(--u) * 10) 0 calc(var(--u) * 18);height:max(2px,calc(var(--u) * 4));flex:none}
.stage.broadcast .stage-content h2{
  font-size:calc(max(17px,var(--u) * 58) * var(--fit,1));
  line-height:1.15;margin:0 0 calc(var(--u) * 14);max-width:none;flex:none;
}
.stage.broadcast .question-image{
  flex:1 1 0;min-height:calc(var(--u) * 60);width:100%;max-width:100%;max-height:none;
  margin:calc(var(--u) * 6) 0;object-fit:contain;
}
.stage.broadcast .options{margin-top:auto;gap:calc(var(--u) * 12);flex:none}
.stage.broadcast .option{
  min-height:calc(var(--u) * 86);padding:calc(var(--u) * 12) calc(var(--u) * 18);gap:calc(var(--u) * 14);
  font-size:calc(max(13px,var(--u) * 30) * var(--fit,1));
}
.stage.broadcast .option b{font-size:calc(max(11px,var(--u) * 22) * var(--fit,1));padding:calc(var(--u) * 8) calc(var(--u) * 12)}
.stage.broadcast .stage-instruction{margin:calc(var(--u) * 14) 0;font-size:calc(max(11px,var(--u) * 20) * var(--fit,1));flex:none}
.stage.broadcast .stage-footer{padding-top:calc(var(--u) * 12);margin-top:0;font-size:max(10px,calc(var(--u) * 16));flex:none}
.stage.broadcast .stage-footer>span:first-child{font-size:max(10px,calc(var(--u) * 18))}
.stage.broadcast .stage-content.is-empty h2{max-width:none;text-align:center;margin:auto 0}

/* bottom row: status text + the one button that moves the quiz on */
.stage.broadcast .round-controls{grid-area:controls;margin:0;min-height:0;flex-wrap:nowrap;gap:calc(var(--u) * 16)}
.stage.broadcast .round-controls>span{width:auto;font-size:max(10px,calc(var(--u) * 16))}
.stage.broadcast .round-controls button{font-size:max(12px,calc(var(--u) * 22));padding:max(6px,calc(var(--u) * 16)) max(12px,calc(var(--u) * 32));min-width:0}

/* chat column: full height on the right */
.stage.broadcast .stage-chat{
  grid-area:chat;margin:0;min-height:0;
  padding:calc(var(--u) * 18);border:1px solid #493160;background:#130e1e;
}
.stage.broadcast .stage-chat h3{font-size:max(12px,calc(var(--u) * 22))}
.stage.broadcast .stage-chat .chat{flex:1;height:auto;min-height:0;font-size:max(11px,calc(var(--u) * 19));margin-top:calc(var(--u) * 10)}
.stage.broadcast .stage-chat .chat-message{font-size:inherit;padding:calc(var(--u) * 9) 0}
.stage.broadcast .stage-chat .muted{font-size:max(10px,calc(var(--u) * 15))}
.stage.broadcast .stage-chat .chat-message .accepted,.stage.broadcast .stage-chat .chat-message .guess-feedback{font-size:max(9px,calc(var(--u) * 14))}
.stage.broadcast .chat-divider{font-size:max(9px,calc(var(--u) * 13));padding:calc(var(--u) * 8) 0}

/* portrait windows (e.g. a rotated monitor): chat goes under the question instead of beside it */
@media (max-aspect-ratio:1/1){
  .stage.broadcast{
    --u:min(100vw / 1080,100vh / 1920);
    --chat-w:auto;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto minmax(0,26%);
    grid-template-areas:"top" "content" "controls" "chat";
  }
  @supports (height:100dvh){.stage.broadcast{--u:min(100vw / 1080,100dvh / 1920)}}
  .stage.broadcast.chat-off{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "content" "controls"}
}