/* Fbrkha hosted display stabilization r220
   Loaded last: fixes host/projector geometry and readable full copy without changing game logic. */

html[data-ui-mode="modern"] body[data-game-brand="fbrkha"]{
  --fb220-page:#080510;
  --fb220-panel:rgba(24,15,36,.92);
  --fb220-line:rgba(255,255,255,.10);
  --fb220-ink:#fffafc;
  --fb220-muted:#bdb3c8;
  overflow-x:hidden!important;
}

/* Host display should use the screen, not an arbitrary narrow legacy card. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] #app{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(
  .game-hud,.cinematic-stage,.question-stage,.host-voting-content,.reveal-stage,
  .ranking-stage,.final-podium-stage,.final-score-stage,.share-summary-stage,
  .reveal-transition-screen,.two-truth-reveal-stage,.waiting-stage
){
  width:min(1500px,calc(100vw - 28px))!important;
  max-width:1500px!important;
  margin-inline:auto!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Compact HUD, full labels, no accidental truncation. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .game-hud{
  min-height:62px!important;
  padding:8px 12px!important;
  display:grid!important;
  grid-template-columns:minmax(180px,auto) minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(
  .game-hud-meta,.hud-chip,.hud-brand,.stage-kicker,.host-toolbar,.host-tools-panel
){
  min-width:0!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(
  .game-hud-meta span,.hud-chip,.host-toolbar button,.host-tools-panel button
){
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.3!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .host-tools-panel{
  flex-wrap:wrap!important;
  gap:7px!important;
}

/* Lobby: join card + participants remain balanced at TV sizes. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-hero{
  width:min(980px,100%)!important;
  margin-inline:auto!important;
  text-align:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-layout{
  width:min(1220px,calc(100vw - 32px))!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.35fr)!important;
  gap:18px!important;
  align-items:stretch!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(.lobby-join-card,.lobby-panel){
  min-width:0!important;
  border-radius:24px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chips{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:8px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chip{
  min-width:0!important;
  min-height:56px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chip-avatar{
  width:42px!important;height:42px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chip-avatar :is(img,svg){
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chip-info{
  min-width:0!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chip-info b{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;
}

/* Question stage: prompt is the visual priority. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage{
  min-height:calc(100dvh - 92px)!important;
  padding:clamp(18px,2.4vw,34px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage :is(h1,h2,.question-copy,.host-voting-question){
  width:min(1200px,100%)!important;
  max-width:1200px!important;
  margin-inline:auto!important;
  color:var(--fb220-ink)!important;
  font-size:clamp(28px,3.5vw,56px)!important;
  line-height:1.38!important;
  text-align:center!important;
  text-wrap:balance!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-visual{
  width:min(820px,72vw)!important;
  max-height:48vh!important;
  margin-inline:auto!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-visual-img{
  width:100%!important;height:100%!important;max-height:48vh!important;object-fit:contain!important;
}

/* Host answering/player-management region. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .host-player-management{
  width:min(1180px,100%)!important;
  margin-inline:auto!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(.answer-entry-card,.host-player-card,.host-player-vote-card){
  width:min(860px,100%)!important;
  margin-inline:auto!important;
  min-width:0!important;
  padding:clamp(16px,2vw,26px)!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(.answer-input,.input){
  max-width:100%!important;
  min-width:0!important;
}

/* Voting: never crop an option or force unreadable single-line answers. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .host-voting-content{
  min-height:calc(100dvh - 100px)!important;
  padding:clamp(16px,2.2vw,30px)!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .vote-grid{
  width:min(1280px,100%)!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .vote-option{
  width:100%!important;
  min-width:0!important;
  min-height:88px!important;
  height:auto!important;
  padding:15px 18px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  line-height:1.45!important;
  font-size:clamp(17px,1.55vw,25px)!important;
  overflow-wrap:anywhere!important;
}

/* Reveal/result: keep the answer, author and voters visible together without clipping. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(.reveal-stage,.two-truth-reveal-stage){
  min-height:calc(100dvh - 94px)!important;
  padding:clamp(16px,2.4vw,34px)!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .reveal-answer-card{
  width:min(1080px,100%)!important;
  min-width:0!important;
  margin-inline:auto!important;
  padding:clamp(20px,3vw,42px)!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(
  .revealed-answer-text,.summary-answer,.answer-explanation,.answer-authors,
  .answers-voters-summary,.projector-voter-names
){
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  overflow-wrap:anywhere!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .revealed-answer-text{
  font-size:clamp(30px,4vw,62px)!important;
  line-height:1.25!important;
  text-align:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .voter-chips,
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .projector-voter-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:8px!important;
}

/* Ranking/final: stable rows on TV and desktop. */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .scoreboard-card{
  width:min(1120px,100%)!important;
  margin-inline:auto!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .scoreboard-row{
  min-width:0!important;
  min-height:62px!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) minmax(116px,auto)!important;
  gap:12px!important;
  align-items:center!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .scoreboard-name{
  min-width:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .scoreboard-score{
  font-size:clamp(23px,2.6vw,38px)!important;
}

/* Mobile player stays touch-first and never gets the TV dimensions. */
@media(max-width:760px){
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .game-hud{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:7px 8px!important;
    gap:7px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .hud-brand{display:none!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-layout{grid-template-columns:1fr!important;width:calc(100% - 18px)!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .player-chips{grid-template-columns:1fr!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage{
    width:100%!important;min-height:auto!important;padding:13px 10px 22px!important;gap:12px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage :is(h1,h2,.question-copy,.host-voting-question){
    font-size:clamp(22px,7.2vw,34px)!important;line-height:1.4!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-visual{width:100%!important;max-height:34vh!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .vote-grid{grid-template-columns:1fr!important;gap:8px!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .vote-option{min-height:68px!important;font-size:17px!important;padding:12px!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(.reveal-stage,.two-truth-reveal-stage,.host-voting-content){
    width:100%!important;min-height:auto!important;padding:12px 9px 22px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .revealed-answer-text{font-size:clamp(26px,8vw,38px)!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .scoreboard-row{
    grid-template-columns:38px minmax(0,1fr) minmax(84px,auto)!important;gap:7px!important;min-height:54px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .host-tools-panel .btn{
    flex:1 1 135px!important;min-height:44px!important;
  }
}
@media(min-width:1600px){
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :is(
    .game-hud,.cinematic-stage,.question-stage,.host-voting-content,.reveal-stage,
    .ranking-stage,.final-podium-stage,.final-score-stage,.share-summary-stage
  ){width:min(1660px,calc(100vw - 50px))!important;max-width:1660px!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage :is(h1,h2,.question-copy,.host-voting-question){
    font-size:clamp(40px,3.4vw,66px)!important;
  }
}


/* r226 mobile toast containment — Firefox/iPhone RTL safe-area */
@media (max-width: 560px) {
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] #toast.toast,
  body[data-game-brand="fbrkha"] #toast.toast {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}


/* r716 — Fbrkha category picker: readable mobile cards, no zero-width text column. */
@media (max-width:560px){
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-wrap{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:7px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-wrap .category-choice{
    width:100%!important;
    min-width:0!important;
    min-height:68px!important;
    height:auto!important;
    padding:10px!important;
    padding-inline-start:10px!important;
    grid-template-columns:30px minmax(0,1fr) 22px!important;
    gap:8px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-text{
    min-width:0!important;
    width:auto!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-text strong{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.35!important;
  }
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice-favorite-btn{
    position:static!important;
    inset:auto!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
  }
}

/* r1009: full, readable authoritative participant names in every Fbrkha phase.
   Server snapshots own identity and colourSlot; CSS only fixes the presentation.
   Never shorten, alter or synthetically replace the player's own name. */
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] :is(
  .player-chip,.player-chip-info,.ranking-row,.scoreboard-row,
  .scoreboard-name,.player-name,.participant-name,.waiting-name,
  .voter-chip,.participant-inline-name,.answer-authors,
  .answer-voters,.projector-voter-grid,.award-winners
){
  min-width:0!important;
  max-width:100%!important;
  max-height:none!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  overflow-wrap:anywhere!important;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] :is(
  .player-chip-info b,.scoreboard-name,.player-name,.participant-name,
  .waiting-name,.voter-chip,.participant-inline-name,
  .answer-authors strong,.answer-voters span,.reveal-score-changes b,
  .award-winners b,.podium-card h2,.answers-voters-list .participant-tone
){
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow:visible!important;
  max-height:none!important;
  line-height:1.45!important;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .player-chip{
  height:auto!important;
  min-height:52px!important;
  align-items:center!important;
  overflow:visible!important;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .player-chip-info{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
  overflow:visible!important;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .player-chip-info b{
  display:block!important;
  font-size:clamp(13px,1.15vw,17px)!important;
  font-weight:850!important;
  unicode-bidi:plaintext;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .voter-chip{
  height:auto!important;
  min-height:40px!important;
  padding:7px 12px!important;
  font-size:clamp(13px,1.25vw,18px)!important;
  flex:0 1 auto!important;
  unicode-bidi:plaintext;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] :is(
  .scoreboard-name,.player-name,.waiting-name,.answer-authors strong,
  .participant-inline-name,.reveal-score-changes b
){font-size:clamp(13px,1.35vw,19px)!important}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] :is(
  .answer-authors,.answer-voters,.reveal-score-changes,.answers-voters-list,
  .award-winners,.voter-chips,.projector-voter-grid
){height:auto!important;overflow:visible!important;flex-wrap:wrap!important}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role] :is(
  .scoreboard-row,.ranking-row
){min-height:54px!important;height:auto!important}
@media(max-width:600px){
  body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .player-chip-info b{
    font-size:13px!important;
  }
  body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .voter-chip{
    font-size:13px!important;
  }
  body[data-game-brand="fbrkha"] #app[data-fbrkha-role] .scoreboard-name{
    min-width:0!important;
    flex-wrap:wrap!important;
    font-size:13px!important;
  }
}

/* r1011 — show the server's current player identity while submitting,
   voting and watching results; a compact separate row avoids hiding it
   beneath points or device-dependent header icons. */
body[data-game-brand="fbrkha"] #app[data-fbrkha-role="player"] .game-hud .hud-player-identity{
  grid-column:1 / -1!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:9px!important;flex-wrap:wrap!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  padding:4px 8px!important;margin:0!important;
  text-align:center!important;
  color:#e5d7f4!important;
  border-top:1px solid rgba(255,255,255,.11);
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role="player"] .game-hud .hud-player-identity span{
  color:#cfbfdf!important;font-size:12px!important;
}
body[data-game-brand="fbrkha"] #app[data-fbrkha-role="player"] .game-hud .hud-player-identity strong{
  display:block!important;max-width:100%!important;
  color:#ffffff!important;
  font-size:clamp(14px,1.3vw,17px)!important;
  line-height:1.4!important;font-weight:850!important;
  white-space:normal!important;overflow:visible!important;
  overflow-wrap:anywhere!important;word-break:normal!important;
  text-overflow:clip!important;-webkit-line-clamp:unset!important;
}
@media(max-width:650px){
  body[data-game-brand="fbrkha"].player-active:is(.text-entry-focused,.keyboard-open)
  #app[data-fbrkha-role="player"] .game-hud .hud-player-identity{
    display:none!important;
  }
}