/* LKDOUB header only. No game, lobby, modal or engine rules. */
.header.lk-compact-header {
  min-height:74px; height:74px; padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  display:flex; flex-wrap:nowrap; align-items:center; gap:14px;
  background:linear-gradient(180deg,#06252b,#061d24); border-bottom:1px solid #d8b36a48;
}
.lk-compact-header .identity { flex:none; min-width:0; gap:8px; }
.lk-compact-header .identity-star { font-size:29px; line-height:1; }
.lk-compact-header .identity-name { font-size:21px; letter-spacing:1.5px; line-height:1.05; }
.lk-compact-header .identity-name small { font-size:7px; letter-spacing:2.4px; margin-top:4px; }
.lk-compact-header #connection { flex:1; min-width:0; margin:0; text-align:center; font-size:11px; color:#bdd6d1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lk-compact-header .top-controls { display:flex; flex:none; align-items:center; flex-wrap:nowrap; gap:6px; margin:0; }
.lk-compact-header .top-controls .lk-header-button {
  min-height:38px; min-width:38px; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 11px; border:1px solid #d8b36a55; border-radius:10px;
  background:#ffffff08; color:#fff0d3; font-size:11px; font-weight:800; line-height:1.1;
  white-space:nowrap;
}
.lk-compact-header .top-controls .lk-header-button:disabled { opacity:.42; cursor:not-allowed; }
.lk-compact-header .top-controls .lk-header-button:not(:disabled):hover { background:#ffffff14; border-color:#e9c77e; }
.lk-compact-header .lk-header-exit { color:#ffc2b8!important; }
.lk-compact-header .lk-header-symbol { font-size:15px; }
@media(max-width:800px) {
  .header.lk-compact-header { height:56px; min-height:56px; padding:0 9px; gap:5px; display:flex; grid-template-columns:none; }
  .lk-compact-header .identity { gap:4px; }
  .lk-compact-header .identity-star { font-size:21px; }
  .lk-compact-header .identity-name { font-size:13px; letter-spacing:.7px; }
  .lk-compact-header .identity-name small { font-size:5px; letter-spacing:1.2px; }
  .lk-compact-header #connection { display:none; }
  .lk-compact-header .top-controls { display:flex; grid-column:auto; gap:4px; margin-left:auto; }
  .lk-compact-header .top-controls .lk-header-button { min-width:30px; min-height:32px; width:32px; height:32px; padding:3px; border-radius:8px; font-size:13px; }
  .lk-compact-header .lk-header-label { display:none; }
  .lk-compact-header .lk-header-symbol { font-size:14px; }
}
@media(max-width:360px) {
  .lk-compact-header .identity-name { font-size:11px; }
  .lk-compact-header .identity-name small { font-size:4px; }
  .lk-compact-header .top-controls { gap:3px; }
  .lk-compact-header .top-controls .lk-header-button { min-width:28px; width:28px; height:30px; }
}

/* JS updates these two button labels at runtime. Keep mobile icon-only controls. */
@media(max-width:800px) {
  .lk-compact-header #gameSound, .lk-compact-header #mic { font-size:0!important; }
  .lk-compact-header #gameSound::after { content:"♪"; font-size:16px; }
  .lk-compact-header #mic::after { content:"🎙"; font-size:15px; }
}

/* Header controls: help, classement, sound, microphone, exit (exit last).
   Audio and mic scripts replace button textContent, so draw state icons via CSS. */
.lk-compact-header #helpButton { order:1; }
.lk-compact-header #scoreButton { order:2; }
.lk-compact-header #gameSound { order:3; }
.lk-compact-header #mic { order:4; }
.lk-compact-header #exitRoom { order:5; margin-left:4px; }
.lk-compact-header #gameSound, .lk-compact-header #mic { position:relative; }
.lk-compact-header #gameSound[aria-pressed="true"],
.lk-compact-header #mic[aria-pressed="true"] {
  border-color:#67dfac; background:#15483e; color:#b5ffdc;
}
.lk-compact-header #gameSound[aria-pressed="false"],
.lk-compact-header #mic[aria-pressed="false"] {
  border-color:#aa685f; background:#3d292c; color:#ffb6ad;
}
@media(max-width:800px) {
  .lk-compact-header #gameSound, .lk-compact-header #mic {
    font-size:0!important; overflow:hidden;
  }
  .lk-compact-header #gameSound::after,
  .lk-compact-header #mic::after { font-size:17px; line-height:1; }
  .lk-compact-header #gameSound[aria-pressed="true"]::after { content:"🔊"; }
  .lk-compact-header #gameSound[aria-pressed="false"]::after { content:"🔇"; }
  .lk-compact-header #mic[aria-pressed="true"]::after { content:"🎙"; }
  .lk-compact-header #mic[aria-pressed="false"]::after { content:"🎙"; filter:grayscale(1); opacity:.65; }
  .lk-compact-header #mic[aria-pressed="false"]::before {
    content:""; position:absolute; height:2px; width:22px;
    background:#ff9d94; transform:rotate(-48deg); z-index:2;
    pointer-events:none;
  }
  .lk-compact-header #exitRoom { margin-left:2px; }
}

/* Fine spacing and a clean outline microphone, matching the Hezz-style header. */
.lk-compact-header .top-controls { gap:7px; }
.lk-compact-header #gameSound { margin-left:14px; }
.lk-compact-header #exitRoom { margin-left:14px; }
@media (max-width:800px) {
  .lk-compact-header .top-controls { gap:5px; }
  .lk-compact-header #gameSound { margin-left:12px; }
  .lk-compact-header #exitRoom { margin-left:12px; }
  /* Replace the emoji with a sharp, scalable line microphone. */
  .lk-compact-header #mic::after {
    content:"" !important;
    display:block; width:18px; height:20px; flex:none;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='13' rx='3' fill='black'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3m-4 0h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='13' rx='3' fill='black'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3m-4 0h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .lk-compact-header #mic[aria-pressed="false"]::after { filter:none; opacity:1; }
  .lk-compact-header #mic[aria-pressed="false"]::before { width:23px; }
}
@media(max-width:360px) {
  .lk-compact-header .top-controls { gap:3px; }
  .lk-compact-header #gameSound { margin-left:7px; }
  .lk-compact-header #exitRoom { margin-left:7px; }
}