/* Gameplay 2.5: layout and meeting UX. Keep the playfield visually quiet. */
#hud{align-items:flex-start;flex-wrap:nowrap}
.hud-left,.hud-right{flex-wrap:nowrap;min-width:0}
.hud-left{flex:0 1 auto}.hud-right{flex:0 0 auto}
#hudMoreWrap{position:relative;display:inline-flex}
#hudMoreMenu{position:absolute;top:calc(100% + 6px);right:0;z-index:65;min-width:136px;padding:5px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:3px}
#hudMoreMenu[hidden]{display:none!important}
#hudMoreMenu button{width:100%;min-height:38px!important;justify-content:flex-start!important;border:0!important;background:transparent!important;backdrop-filter:none!important;text-align:left}
#hudMoreMenu button:hover{background:var(--surface-2)!important}
#hudMoreMenu .btn-leave{color:var(--danger)!important}

/* One action dock. interactBtn is moved into this grid by game.js. */
#actionStack{right:max(14px,env(safe-area-inset-right));bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));width:min(246px,48vw);max-width:none!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch}
#actionStack button,#actionStack #interactBtn{position:static!important;inset:auto!important;width:auto!important;min-width:0!important;min-height:43px!important;aspect-ratio:auto!important;border-radius:11px!important;padding:6px 9px!important;font-size:12px;line-height:1.15;white-space:normal;backdrop-filter:none}
#actionStack button[hidden]{display:none!important}
#actionStack #interactBtn:not(:disabled){background:var(--text);color:var(--surface);border-color:var(--text)}
#actionStack #killBtn:not(:disabled){background:#b91c1c;color:#fff;border-color:#b91c1c}

/* Detailed role configuration stays grouped rather than becoming a wall of controls. */
#lobbyPanel{width:min(620px,calc(100vw - 28px))}
#rulesGrid{align-items:start}
.role-group{grid-column:1/-1;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:0;margin:0;overflow:hidden}
.role-group>summary{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;cursor:pointer;font-size:12px;font-weight:750;list-style:none}
.role-group>summary::-webkit-details-marker{display:none}.role-group>summary::after{content:'+';font-size:16px;color:var(--muted)}.role-group[open]>summary::after{content:'−'}
.role-summary-note{font-size:10px;font-weight:550;color:var(--muted);margin-left:auto}
.role-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 8px 8px}
#rulesGrid .role-setting-grid label{background:var(--surface);min-height:36px}
.role-count-note{grid-column:1/-1;margin:0;padding:3px 1px 1px;font-size:11px;color:var(--muted)}
.speed-rule select{min-width:96px!important}

/* Meeting is a workspace: voting + communications + visible result. */
#meetingOverlay{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));backdrop-filter:none;background:rgba(3,7,18,.70)}
.meeting-card{width:min(820px,100%);max-height:calc(100dvh - 20px);padding:16px;display:flex;flex-direction:column;overflow:hidden}
.meeting-head{flex:0 0 auto}.meeting-head h2{font-size:21px}
#meetingBody{margin:8px 0 10px;flex:0 0 auto}
#meetingComms{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-bottom:10px;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
#meetingComms button{min-height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:0 11px;font-weight:700}
#meetingComms .meeting-progress{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#voteGrid{min-height:0;overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:2px;align-content:start}
.vote-card{min-width:0}.vote-card>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meeting-actions{flex:0 0 auto;margin-top:9px}
#meetingResult{display:none;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:12px}
#meetingResult.show{display:block}
.meeting-result-title{font-size:17px;font-weight:800;margin-bottom:9px}.meeting-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-height:34px;padding:5px 3px;border-bottom:1px solid var(--border)}.meeting-result-row:last-child{border-bottom:0}.meeting-result-name{display:flex;align-items:center;gap:7px;min-width:0}.meeting-result-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meeting-result-voters{grid-column:1/-1;padding-left:33px;font-size:11px;color:var(--muted);line-height:1.35}.meeting-result-count{font-weight:850;font-variant-numeric:tabular-nums}
#chatPanel{z-index:105}
#voiceUnlockBtn{position:fixed;z-index:110;left:50%;bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-weight:700}
#voiceUnlockBtn[hidden]{display:none!important}

/* Lightweight vitals: no animation, no permanent panel. */
#vitalsOverlay{position:fixed;inset:0;z-index:83;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(3,7,18,.66)}#vitalsOverlay.show{display:flex}
#vitalsCard{width:min(520px,100%);max-height:min(600px,calc(100dvh - 32px));overflow:auto;padding:16px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
#vitalsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.vital-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}.vital-state{margin-left:auto;font-size:11px;font-weight:800}.vital-state.dead{color:var(--danger)}

@media(max-width:720px){
  #hud{top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));gap:4px}
  #hud .room-tag,#hud #connectionStatus,.hud-right .my-name{display:none!important}
  #hud .room-id{margin-left:0!important;border-radius:8px!important;padding-inline:7px!important;min-width:38px}
  #playerCountBtn{padding-inline:7px!important}
  .hud-left,.hud-right{gap:4px}
  #mapBtn,#micBtn,#chatToggle,#moreBtn{min-width:42px!important;padding-inline:7px!important;font-size:11px!important}
  #actionStack{width:min(196px,50vw);max-width:none!important;right:max(8px,env(safe-area-inset-right));bottom:max(8px,calc(env(safe-area-inset-bottom) + 6px));gap:5px}
  #actionStack button,#actionStack #interactBtn{min-height:39px!important;font-size:11px;padding:5px!important}
  #gameMeta{top:calc(51px + env(safe-area-inset-top));width:min(250px,62vw)}
  #chatStream{top:50px}
  .role-setting-grid{grid-template-columns:1fr}
  .meeting-card{padding:11px;max-height:calc(100dvh - 12px)}
  #meetingComms{margin-bottom:7px;padding:5px;gap:5px}#meetingComms button{min-height:35px;padding-inline:9px;font-size:11px}.meeting-progress{font-size:10px!important}
  #voteGrid{grid-template-columns:1fr;gap:6px}.vote-card{min-height:43px;padding:7px 9px}
  #vitalsGrid{grid-template-columns:1fr}
}
@media(max-width:430px){
  #mapBtn,#micBtn,#chatToggle,#moreBtn{min-width:38px!important;padding-inline:5px!important}
  #playerCountBtn{font-size:11px!important}.room-id{font-size:11px!important}
  #actionStack{width:min(184px,52vw);max-width:none!important}
  #gameMeta{width:min(220px,60vw);padding:8px 9px}
}
@media(max-height:520px) and (orientation:landscape){
  #hud{top:max(4px,env(safe-area-inset-top))}
  #actionStack{width:min(300px,45vw);max-width:none!important;grid-template-columns:repeat(3,minmax(0,1fr));right:max(7px,env(safe-area-inset-right));bottom:max(7px,env(safe-area-inset-bottom));gap:5px}
  #actionStack button,#actionStack #interactBtn{min-height:36px!important;font-size:10.5px}
  #gameMeta{top:calc(42px + env(safe-area-inset-top));width:235px}
  .meeting-card{max-height:calc(100dvh - 8px);padding:9px 11px}.meeting-head h2{font-size:18px}#meetingBody{margin:5px 0 6px;font-size:12px}#meetingComms{margin-bottom:5px}#voteGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.vote-card{min-height:37px;padding:5px 7px}.meeting-actions{margin-top:5px}#skipVoteBtn{min-height:37px}
}