/* Public game phone/tablet layout. All declarations are below the narrow
   breakpoint so the validated desktop cascade remains unchanged. */
@media (max-width:900px) {
  html,
  body.player-public {
    min-width:0;
    width:100%;
    overflow-x:hidden;
  }

  body.player-public {
    min-height:100dvh;
    min-height:var(--mobile-visual-height, 100dvh);
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    background-color:#080b1c;
  }

  main {
    width:100%;
    max-width:none;
    min-height:0;
    height:auto;
    margin:0;
    padding:calc(7px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 18px max(10px, env(safe-area-inset-left));
    display:block;
  }

  /* Keep the compact official title mark in the question card. The large
     stage art is replaced by the existing dark neon gradients on small screens. */
  .official-stage-background::after { display:none; }
  .tq-host,
  .tq-rig { display:none!important; }
  .tq-stage-floor { opacity:.12; }
  .tq-spotlight { opacity:.1; }

  .live-layout {
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    gap:9px!important;
  }

  .live-layout > .panel {
    position:relative;
    inset:auto;
    order:3;
    width:100%;
    min-width:0;
    height:auto;
    min-height:0;
    margin:0;
    padding:11px;
    overflow:hidden;
    border-radius:15px!important;
  }

  .live-layout > .live-question-stage {
    order:1!important;
    width:100%;
    min-width:0;
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .live-question-stage > .live-question-column {
    display:flex;
    flex-direction:column;
    width:100%;
    height:auto;
    min-height:0;
    padding:0!important;
    overflow:visible;
  }
  .question-panel-content {
    height:auto;
    min-height:0;
    overflow:visible;
    padding:48px 11px 12px;
  }

  /* The desktop chat/presenter wrapper collapses to the existing chat-only
     mobile layout; the large host art never sits near the answer composer. */
  .live-layout > .live-left-column {
    order:3;
    width:100%;
    height:auto;
    min-height:0;
    align-items:stretch;
  }
  .live-left-column > #chatPanel {
    position:relative;
    inset:auto;
    width:100%;
    margin:0;
  }
  .live-left-column > #trapixSpeaker { display:none; }

  .live-question-column {
    order:1!important;
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:none;
    overflow:visible;
    padding:0!important;
  }

  .live-layout > #rankingPanel { order:2!important; }
  .live-layout > #chatPanel { order:3!important; }

  .quiz-title-mark {
    width:min(148px, 42vw);
    max-height:48px;
    top:-22px;
    left:50%;
    margin:0;
    transform:translateX(-50%);
  }

  .quiz-question-header {
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 60px;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
  }
  .quiz-header-progress #progress { font-size:clamp(12px,3.5vw,16px); }
  .quiz-header-progress #status { max-width:100%; white-space:normal; font-size:10px; }
  .quiz-question-header #category { font-size:clamp(11px,3.2vw,14px); }
  .quiz-question-header #timer { width:60px; height:60px; min-width:60px; margin:0; padding:0; font-size:25px; }
  .quiz-question-header #timer.is-lobby { font-size:11px; }

  .central-status-line {
    gap:5px 8px;
    margin:0 auto 5px;
  }

  .central-status-line #progress {
    width:100%;
    font-size:clamp(14px, 4vw, 18px);
    line-height:1.25;
    overflow-wrap:anywhere;
  }

  .central-status-line #status {
    max-width:100%;
    white-space:normal;
    font-size:11px;
  }

  #timer {
    min-height:0;
    margin:5px auto 7px;
    padding:5px 15px;
    font-size:clamp(38px, 11vw, 52px);
    line-height:1.05;
  }

  #category,
  #percent { margin:3px 0; font-size:13px; overflow-wrap:anywhere; }

  .live-question-column #question {
    width:100%;
    margin:6px auto 9px;
    padding:13px 12px;
    font-size:clamp(22px, 6.1vw, 30px);
    line-height:1.22;
    overflow-wrap:anywhere;
  }

  #answers {
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
    width:100%;
    margin:7px 0;
  }

  #answers button.answer-button {
    width:100%;
    min-height:52px;
    padding:9px 11px;
    font-size:16px;
    text-align:left;
    touch-action:manipulation;
  }

  #result { font-size:17px; line-height:1.3; }
  #result .correct-answer-card { max-width:100%; overflow-wrap:anywhere; }

  #chatPanel.live-chat-column {
    order:3!important;
    display:flex!important;
    flex-direction:column;
    gap:0;
    width:100%;
    height:min(48dvh, 440px);
    min-height:230px;
    padding:10px;
    overflow:hidden;
  }

  #chatPanel > h2,
  .live-ranking-column > h2 { margin:0 0 8px; font-size:16px; line-height:1.2; }

  #joinPanel {
    flex:0 0 auto;
    width:100%;
    max-width:none;
    margin:0 0 7px;
    padding:8px;
  }

  #joinPanel > div { grid-template-columns:minmax(0, 1fr) auto; }
  #joinPanel #nickname { min-height:42px; font-size:16px; }
  #joinPanel #avatarInput { min-height:40px; font-size:12px; }
  #joinPanel #joinButton { min-height:44px; padding:8px 11px; }
  #joinPanel #tabWarning { overflow-wrap:anywhere; }

  #chatMessages {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* The single existing answer/chat form is moved directly under the question. */
  .chat-composer {
    position:relative!important;
    z-index:2;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    min-width:0;
    margin:0 auto 8px;
    padding:7px;
    border:1px solid rgba(0,217,255,.38);
    border-radius:14px;
    background:rgba(8,13,34,.97);
    box-shadow:0 0 20px rgba(139,53,255,.28),0 8px 28px rgba(0,0,0,.52);
    backdrop-filter:blur(10px);
  }

  #chatForm { display:flex; flex-wrap:nowrap; gap:6px; width:100%; }
  #chatInput {
    flex:1 1 auto;
    width:0;
    min-width:0;
    min-height:48px;
    height:48px;
    padding:10px 11px;
    font-size:16px;
    line-height:1.25;
    touch-action:manipulation;
  }

  #emojiToggle,
  #chatSend {
    flex:0 0 auto;
    min-width:48px;
    min-height:48px;
    padding:8px 10px;
    font-size:14px;
    touch-action:manipulation;
  }

  #chatSend { min-width:76px; }
  #chatHint { max-height:36px; min-height:0; margin:5px 2px 0; overflow:auto; font-size:11px; line-height:1.2; }
  #chatNewMessages { bottom:70px; }

  #rankingPanel {
    order:2!important;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    width:100%;
    height:min(56dvh, 520px);
    min-height:240px;
    overflow:hidden;
  }

  #rankingPanel #ranking {
    min-height:0;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  #roundPodium { max-width:100%; }
  #roundPodium .round-podium-card { width:100%; padding:10px 7px; }
  #roundPodium .round-winners { gap:5px; }
  #roundPodium .round-winner { width:32%; font-size:12px; overflow-wrap:anywhere; }
  #roundPodium .round-winner .avatar { width:38px; height:38px; }

  #victoryScreen {
    top:0;
    bottom:0;
    max-height:var(--mobile-visual-height, 100dvh);
    padding:calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  #victoryContent {
    width:100%;
    max-width:620px;
    padding:14px 9px;
    border-radius:20px;
    gap:1px;
  }

  .victoryTrophy { font-size:clamp(48px, 15vw, 78px); margin:0 0 3px; }
  #victoryContent h2 { margin:4px 0 6px; font-size:clamp(17px, 5vw, 25px); letter-spacing:.04em; }
  #finalPodium { width:100%; gap:5px; margin:5px auto 8px; }
  .final-place { width:32%; min-width:0; min-height:118px; padding:7px 3px; gap:4px; }
  .final-first { min-height:152px; transform:translateY(-8px); }
  .final-medal { font-size:21px; }
  .final-avatar { width:48px; height:48px; }
  .final-first .final-avatar { width:64px; height:64px; }
  .final-place strong { max-width:100%; font-size:clamp(11px, 3.2vw, 14px); }
  .final-place span,
  .final-place small { font-size:11px; }
  #winnerName { max-width:100%; font-size:clamp(30px, 10vw, 54px); letter-spacing:0; overflow-wrap:anywhere; }
  #victorySubtitle { font-size:13px; text-align:center; }
  #closeVictory { min-height:48px; padding:10px 18px; }
  .champion-theme-panel { width:100%; max-height:none; margin:5px auto; padding:8px; }
  .champion-category-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
    max-height:min(38dvh, 330px);
    padding:2px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .champion-category-card { min-width:0; min-height:48px; padding:7px 5px; font-size:12px; overflow-wrap:anywhere; touch-action:manipulation; }

  #fastWinnerOverlay { padding:calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); }
  #fastWinnerAvatar { width:min(60vw, 42dvh); height:min(60vw, 42dvh); max-width:min(60vw, 42dvh); max-height:min(60vw, 42dvh); border-width:5px; }
  #fastWinnerName { max-width:95vw; font-size:clamp(30px, 9vw, 48px); overflow-wrap:anywhere; }
}

@media (max-width:900px) and (max-height:600px) {
  #chatPanel.live-chat-column { height:min(46dvh, 300px); min-height:190px; }
  #rankingPanel { height:min(48dvh, 320px); min-height:200px; }
}

@media (max-width:900px) {
  html.mobile-keyboard-open body.player-public { padding-bottom:8px; }
  html.mobile-keyboard-open .live-question-column { padding:6px!important; }
  html.mobile-keyboard-open .quiz-title-mark { width:88px; max-height:27px; margin-bottom:1px; }
  html.mobile-keyboard-open .central-status-line { gap:2px 5px; margin-bottom:1px; }
  html.mobile-keyboard-open .central-status-line #progress { font-size:13px; }
  html.mobile-keyboard-open .central-status-line #status { padding:2px 6px; font-size:10px; }
  html.mobile-keyboard-open #timer { margin:2px auto 4px; padding:3px 9px; font-size:clamp(30px, 8vw, 40px); }
  html.mobile-keyboard-open .live-question-column #question { margin:3px auto 5px; padding:7px 8px; font-size:clamp(18px, 5vw, 24px); }
  html.mobile-keyboard-open .chat-composer { margin-bottom:4px; padding:5px; }
  html.mobile-keyboard-open #chatInput,
  html.mobile-keyboard-open #chatSend,
  html.mobile-keyboard-open #emojiToggle { min-height:44px; height:44px; }
}

@media (max-width:900px) and (orientation:landscape) {
  main { padding-top:calc(4px + env(safe-area-inset-top)); }
  .live-layout { gap:7px!important; }
  .live-question-column { padding:8px!important; }
  .quiz-title-mark { width:100px; max-height:32px; margin-bottom:2px; }
  .central-status-line { margin-bottom:2px; }
  #timer { margin:2px auto 4px; padding:3px 10px; font-size:clamp(30px, 8vh, 40px); }
  .live-question-column #question { margin:3px auto 5px; padding:8px; font-size:clamp(19px, 4vw, 24px); }
  #answers { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px; margin:3px 0; }
  #answers button.answer-button { min-height:44px; padding:6px 8px; font-size:14px; }
  #chatPanel.live-chat-column { height:min(42dvh, 250px); min-height:170px; }
  #chatInput, #emojiToggle, #chatSend { min-height:44px; height:44px; }
  #victoryContent { padding:8px; }
  .victoryTrophy { font-size:44px; }
  #finalPodium { margin:2px auto 4px; }
  .final-place { min-height:94px; }
  .final-first { min-height:116px; }
  .final-avatar { width:38px; height:38px; }
  .final-first .final-avatar { width:48px; height:48px; }
}

@media (max-width:380px) {
  .live-layout > .panel { padding:9px; }
  #chatPanel.live-chat-column { height:min(45dvh, 390px); }
  #emojiToggle { min-width:42px; padding-inline:7px; }
  #chatSend { min-width:68px; padding-inline:7px; }
  .champion-category-grid { grid-template-columns:minmax(0, 1fr); }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  #chatPanel, #rankingPanel { scroll-behavior:auto; }
}