/* Fbrkha host experience V2 — modern mode only.
   Fbrkha stays purple-led, but the host UI is calmer, clearer and more presentation-friendly. */

html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"]{
  --fhx-bg:#080b20;
  --fhx-panel:rgba(17,20,46,.96);
  --fhx-panel-2:rgba(25,29,61,.97);
  --fhx-line:rgba(255,255,255,.10);
  --fhx-line-strong:rgba(255,255,255,.17);
  --fhx-text:#fbfaf5;
  --fhx-muted:#aab3c8;
  --fhx-purple:#9b5cff;
  --fhx-purple-2:#7438df;
  --fhx-gold:#f2c94c;
  --fhx-green:#55d6a8;
  --fhx-red:#ff7188;
  min-height:100dvh;
  background:
    radial-gradient(760px 520px at 96% -12%,rgba(155,92,255,.18),transparent 64%),
    radial-gradient(560px 400px at -8% 35%,rgba(242,201,76,.055),transparent 68%),
    linear-gradient(180deg,#0c102c 0%,var(--fhx-bg) 58%,#050717 100%)!important;
}

html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"]{
  width:min(1440px,calc(100% - 20px));
  margin-inline:auto;
  color:var(--fhx-text);
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .game-hud{
  border-color:var(--fhx-line)!important;
  background:rgba(7,10,29,.88)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(17px) saturate(120%);
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-button,
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-chip{
  border-color:var(--fhx-line)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-chip.room-code-qr{
  color:var(--fhx-gold)!important;
}

/* Lobby */
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero{
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero h1{
  font-size:clamp(34px,5vw,62px)!important;
  line-height:1.15!important;
  text-wrap:balance;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero p{
  color:var(--fhx-muted)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-layout{
  gap:12px!important;
  align-items:stretch!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.lobby-join-card,.lobby-panel){
  border-color:var(--fhx-line)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,var(--fhx-panel-2),var(--fhx-panel))!important;
  box-shadow:0 18px 46px rgba(0,0,0,.20)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-qr{
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .room-code{
  color:var(--fhx-gold)!important;
  letter-spacing:.10em!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-ready-status.ready{
  border-color:rgba(85,214,168,.20)!important;
  background:rgba(85,214,168,.055)!important;
  color:#baf5df!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-ready-status.waiting{
  border-color:var(--fhx-line)!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--fhx-muted)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .player-chip{
  border-color:var(--fhx-line)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-start{
  min-height:54px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,var(--fhx-purple),var(--fhx-purple-2))!important;
  box-shadow:0 12px 28px rgba(116,56,223,.20)!important;
}

/* Round chrome */
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .timer-shell{
  border-color:var(--fhx-line)!important;
  background:rgba(7,10,29,.75)!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .timer-fill{
  background:linear-gradient(90deg,var(--fhx-purple),var(--fhx-gold))!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .timer-shell.urgent .timer-fill{
  background:linear-gradient(90deg,#ff7188,#ffb45c)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.tiebreak-banner,.surprise-banner,.round-mode-banner){
  border-color:var(--fhx-line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}

html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.host-question-stage,.question-stage,.question-card,.host-voting-content){
  border-color:var(--fhx-line)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-question-stage,
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-voting-content{
  border-radius:23px!important;
  background:linear-gradient(180deg,rgba(24,29,61,.96),rgba(15,19,44,.96))!important;
  box-shadow:0 15px 40px rgba(0,0,0,.18)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.host-question-stage,.question-stage) h1,
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .question-text{
  color:var(--fhx-text)!important;
  text-wrap:balance;
}

html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .stage-players{
  border-color:var(--fhx-line)!important;
  background:rgba(7,10,29,.56)!important;
  border-radius:18px!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .player-status-chip{
  min-height:52px!important;
}

html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.answer-entry-card,.host-player-vote-card,.submission-card,.vote-confirmation){
  border-color:var(--fhx-line)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,var(--fhx-panel-2),var(--fhx-panel))!important;
  box-shadow:0 12px 32px rgba(0,0,0,.16)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .answer-input{
  border-color:rgba(255,255,255,.13)!important;
  background:rgba(5,8,24,.80)!important;
  color:var(--fhx-text)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .answer-input:focus{
  border-color:rgba(155,92,255,.58)!important;
  box-shadow:0 0 0 3px rgba(155,92,255,.10)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .btn-primary{
  background:linear-gradient(135deg,var(--fhx-purple),var(--fhx-purple-2))!important;
  box-shadow:0 10px 24px rgba(116,56,223,.18)!important;
}

/* Voting / reveal */
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .vote-option{
  border-color:var(--fhx-line)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .vote-option:hover{
  border-color:rgba(155,92,255,.40)!important;
  background:rgba(155,92,255,.065)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.reveal-answer-card,.answers-voters-summary,.ranking-stage,.scoreboard-card,.team-scoreboard){
  border-color:var(--fhx-line)!important;
  background:linear-gradient(180deg,var(--fhx-panel-2),var(--fhx-panel))!important;
  box-shadow:0 16px 44px rgba(0,0,0,.18)!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .scoreboard-row{
  border-color:var(--fhx-line)!important;
  background:rgba(255,255,255,.025)!important;
}

/* Always-visible host controls */
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-tools-panel.always-visible{
  z-index:70!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar{
  gap:6px!important;
  padding:7px!important;
  border:1px solid var(--fhx-line)!important;
  border-radius:16px!important;
  background:rgba(6,9,26,.92)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(17px);
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar .btn{
  min-height:42px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar .btn-danger{
  background:rgba(255,113,136,.10)!important;
  border:1px solid rgba(255,113,136,.20)!important;
  color:#ffb2bf!important;
}

/* Host phone: presentation controls stay usable without pretending to be a participant phone. */
@media(max-width:760px){
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"]{
    width:calc(100% - 10px)!important;
    max-width:calc(100% - 10px)!important;
    padding-top:calc(104px + env(safe-area-inset-top))!important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .game-hud{
    position:fixed!important;
    top:max(5px,env(safe-area-inset-top))!important;
    left:5px!important;
    right:5px!important;
    width:auto!important;
    margin:0!important;
    z-index:82!important;
    padding:5px!important;
    border-radius:15px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .game-hud-main{
    gap:5px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-brand{
    min-width:70px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-brand .logo-image{
    max-width:86px!important;
    max-height:38px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-button,
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .hud-chip{
    min-height:40px!important;
    height:40px!important;
    padding:0 8px!important;
    font-size:10px!important;
    border-radius:10px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .settings-icon-only,
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .utility-hud-button{
    width:40px!important;
    min-width:40px!important;
    padding:0!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .game-hud-meta{
    padding:4px 6px!important;
    font-size:9px!important;
  }

  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero{
    margin-top:9px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero h1{
    font-size:clamp(28px,9vw,40px)!important;
    margin-bottom:5px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-hero p{font-size:11px!important}
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-layout{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.lobby-join-card,.lobby-panel){
    padding:14px!important;
    border-radius:18px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-join-card{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-qr{
    grid-row:1/6!important;
    width:112px!important;
    max-width:112px!important;
    margin:0!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .room-code{
    font-size:clamp(30px,10vw,42px)!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .join-direct-link{font-size:9px!important}
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .player-chips{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .player-chip{
    min-height:50px!important;
    padding:7px!important;
    border-radius:12px!important;
  }

  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .timer-shell{
    margin:6px 0!important;
    min-height:42px!important;
    border-radius:12px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.host-question-stage,.host-voting-content){
    padding:12px!important;
    border-radius:18px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.host-question-stage,.question-stage) h1,
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .question-text{
    font-size:clamp(23px,7vw,34px)!important;
    line-height:1.4!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .stage-players{
    padding:8px!important;
    border-radius:14px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.answer-entry-card,.host-player-vote-card){
    padding:12px!important;
    border-radius:17px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .answer-input{
    min-height:50px!important;
    font-size:16px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .vote-grid{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .vote-option{
    min-height:58px!important;
    padding:10px 12px!important;
    border-radius:14px!important;
  }

  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-tools-panel.always-visible{
    position:fixed!important;
    inset-inline:5px!important;
    bottom:max(4px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    z-index:72!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar{
    display:flex!important;
    justify-content:flex-start!important;
    gap:4px!important;
    padding:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    border-radius:14px!important;
  }
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar::-webkit-scrollbar{display:none!important}
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .host-toolbar .btn{
    flex:0 0 auto!important;
    min-height:40px!important;
    padding:7px 10px!important;
    font-size:10px!important;
  }

  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] :is(.reveal-answer-card,.answers-voters-summary,.ranking-stage,.scoreboard-card){
    border-radius:18px!important;
  }
}

@media(max-width:390px){
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .player-chips{grid-template-columns:1fr!important}
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-join-card{grid-template-columns:96px minmax(0,1fr)!important}
  html[data-ui-mode="modern"] body.host-active[data-game-brand="fbrkha"] #app[data-fbrkha-role="host"] .lobby-qr{width:96px!important;max-width:96px!important}
}