/* =====================================================================
   MULTIPLAYER LOBBY UI — neon-phosphor briefing board
   Self-contained: does not depend on cockpit.css menu classes.
   ===================================================================== */
#mp-ui{ position:fixed; inset:0; z-index:120; display:none; font-family:"Courier New","Consolas",monospace; color:#d5ffe0; }
#mp-ui.show{ display:block; }
/* confirm dialog shown over an active match — dim but keep the game visible */
#mp-ui .mp-modal.mp-overlay{ background:rgba(0,8,4,.5); }
#mp-ui .mp-confirm{ width:min(440px,92vw); text-align:center; }
#mp-ui .mp-confirm h1{ font-size:22px; }
#mp-ui .mp-confirm .mp-sub{ margin:0 auto 6px; }
#mp-ui .mp-modal{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(circle at 50% 26%, rgba(11,38,20,.72), rgba(0,0,0,.86));
  pointer-events:auto; overflow:auto;
}
#mp-ui .mp-card{
  border:1px solid rgba(91,255,155,.6); background:rgba(0,14,7,.95);
  box-shadow:0 0 34px rgba(33,255,91,.22), inset 0 0 28px rgba(33,255,91,.08);
  border-radius:16px; padding:24px; width:min(940px,94vw); max-height:92vh; overflow:auto;
  text-shadow:0 0 7px rgba(91,255,155,.5);
}
#mp-ui .mp-kicker{ font-size:12px; letter-spacing:.26em; color:#a8ffc0; margin-bottom:6px; }
#mp-ui h1{ margin:2px 0 10px; letter-spacing:.16em; color:#d5ffe0; font-size:26px; }
#mp-ui .mp-sub{ color:#8decae; font-size:13px; line-height:1.5; margin-bottom:16px; max-width:60ch; }
#mp-ui .mp-hint{ color:#6fcf98; font-size:11px; margin:6px 0; }
#mp-ui .mp-status{ min-height:20px; color:#ffd24d; font-size:12px; margin:6px 0 12px; letter-spacing:.04em; }

#mp-ui label{ display:grid; gap:6px; font-weight:bold; color:#d5ffe0; font-size:12px; letter-spacing:.06em; }
#mp-ui input, #mp-ui select{
  box-sizing:border-box; width:100%; border:1px solid rgba(91,255,155,.55); border-radius:9px;
  background:#001006; color:#d5ffe0; padding:10px; font:bold 15px "Courier New",monospace; outline:none;
}
#mp-ui input:focus, #mp-ui select:focus{ border-color:#a8ffc0; box-shadow:0 0 10px rgba(91,255,155,.3); }
#mp-ui .mp-inline{ display:grid; gap:6px; }
#mp-ui .mp-check{ display:flex; align-items:center; gap:9px; font-weight:normal; color:#bdf6d3; }
/* themed tickbox — neon cockpit switch instead of the default browser checkbox */
#mp-ui .mp-check input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; flex:0 0 auto;
  border:1px solid rgba(91,255,155,.6); border-radius:4px; background:#001006; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 8px rgba(91,255,155,.12); transition:box-shadow .12s, border-color .12s;
}
#mp-ui .mp-check input[type=checkbox]:hover{ border-color:#a8ffc0; }
#mp-ui .mp-check input[type=checkbox]:checked{ border-color:#43ff77; box-shadow:0 0 10px rgba(67,255,119,.35), inset 0 0 8px rgba(67,255,119,.22); }
#mp-ui .mp-check input[type=checkbox]::after{
  content:''; width:5px; height:9px; margin-top:-2px; border:solid #43ff77; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); box-shadow:0 0 6px rgba(67,255,119,.7); transition:transform .12s ease-out;
}
#mp-ui .mp-check input[type=checkbox]:checked::after{ transform:rotate(45deg) scale(1); }
#mp-ui .mp-check input{ width:auto; }

#mp-ui button{
  cursor:pointer; border:1px solid rgba(91,255,155,.78); border-radius:10px; background:rgba(8,34,16,.96);
  color:#d5ffe0; padding:11px 14px; font:bold 14px "Courier New",monospace; letter-spacing:.08em;
  box-shadow:inset 0 0 12px rgba(91,255,155,.12); transition:background .12s, box-shadow .12s;
}
#mp-ui button:hover{ background:rgba(31,83,44,.96); box-shadow:0 0 16px rgba(91,255,155,.2), inset 0 0 14px rgba(91,255,155,.18); }
#mp-ui button:disabled{ opacity:.45; cursor:not-allowed; }
#mp-ui .mp-ghost{ border-color:rgba(168,255,192,.4); background:rgba(0,18,10,.85); }

/* ---- entry ---- */
#mp-ui .mp-pilot{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
#mp-ui .mp-entry-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#mp-ui .mp-entry-box{
  border:1px solid rgba(91,255,155,.35); border-radius:12px; padding:16px; display:grid; gap:12px;
  background:rgba(3,20,11,.6); align-content:start;
}
#mp-ui .mp-box-title{ font-size:12px; letter-spacing:.18em; color:#a8ffc0; }
#mp-ui .mp-code-input{ text-align:center; letter-spacing:.4em; font-size:20px; }
#mp-ui .mp-foot{ margin-top:18px; display:flex; justify-content:center; }

/* ---- room ---- */
#mp-ui .mp-room-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
#mp-ui .mp-codebox{ display:flex; align-items:center; gap:12px; }
#mp-ui .mp-codebox .mp-kicker{ margin:0; }
#mp-ui .mp-code{
  font:bold 30px "Courier New",monospace; letter-spacing:.34em; color:#ffd24d;
  text-shadow:0 0 12px rgba(255,210,77,.5); padding-left:6px;
}
#mp-ui .mp-copy{ padding:6px 10px; font-size:11px; }
#mp-ui .mp-lock{ color:#ff9a4d; border:1px solid rgba(255,154,77,.5); border-radius:6px; padding:3px 7px; font-size:10px; letter-spacing:.12em; }
#mp-ui .mp-room-meta{ text-align:center; font-size:12px; color:#a8ffc0; letter-spacing:.1em; }
#mp-ui .mp-cc{ color:#6fcf98; }

#mp-ui .mp-teams{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start; margin:8px 0 16px; }
#mp-ui .mp-vs{ align-self:center; color:#8decae; font-weight:bold; letter-spacing:.1em; padding-top:26px; }
#mp-ui .mp-team{ border:1px solid rgba(91,255,155,.28); border-radius:12px; padding:12px; background:rgba(2,16,9,.55); }
#mp-ui .mp-team.red{ border-color:rgba(255,123,123,.5); box-shadow:inset 0 0 22px rgba(255,90,90,.06); }
#mp-ui .mp-team.blue{ border-color:rgba(91,214,255,.5); box-shadow:inset 0 0 22px rgba(91,214,255,.06); }
#mp-ui .mp-team-head{ font-weight:bold; letter-spacing:.16em; margin-bottom:10px; display:flex; justify-content:space-between; }
#mp-ui .mp-team.red .mp-team-head{ color:#ff8a8a; }
#mp-ui .mp-team.blue .mp-team-head{ color:#7fdcff; }
#mp-ui .mp-team-head span{ color:#8decae; font-weight:normal; }

#mp-ui .mp-slot{
  display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 9px; margin-bottom:7px;
  border:1px solid rgba(91,255,155,.16); border-radius:8px; background:rgba(0,10,5,.5); font-size:13px;
}
#mp-ui .mp-slot.open{ color:#4f8f68; font-style:italic; justify-content:center; border-style:dashed; }
#mp-ui .mp-slot.ai{ color:#79b9d9; justify-content:center; border-style:dashed; border-color:rgba(91,214,255,.25); }
#mp-ui .mp-slot.filled{ background:rgba(6,26,14,.75); }
#mp-ui .mp-slot.me{ border-color:rgba(255,210,77,.55); box-shadow:0 0 10px rgba(255,210,77,.12); }
#mp-ui .mp-name{ flex:1; font-weight:bold; color:#e6fff0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mp-ui .mp-slot .mp-cc{ font-size:11px; }
#mp-ui .mp-ready{ width:16px; text-align:center; color:#4f8f68; }
#mp-ui .mp-ready.on{ color:#43ff77; text-shadow:0 0 8px rgba(67,255,119,.6); }
#mp-ui .mp-badge{ font-size:9px; letter-spacing:.08em; padding:2px 5px; border-radius:5px; border:1px solid currentColor; }
#mp-ui .mp-badge.host{ color:#ffd24d; }
#mp-ui .mp-badge.off{ color:#ff7b7b; }
#mp-ui .mp-x{ padding:2px 7px; font-size:11px; border-color:rgba(255,123,123,.5); color:#ff9a9a; background:rgba(30,6,6,.6); box-shadow:none; }
#mp-ui .mp-team-switch{ width:100%; margin-top:4px; padding:8px; font-size:11px; letter-spacing:.1em; }

#mp-ui .mp-me-row{ display:flex; justify-content:center; margin-bottom:14px; }
#mp-ui .mp-me-row button{ min-width:180px; }
#mp-ui .mp-me-row .mp-ready-on{ border-color:#43ff77; color:#43ff77; background:rgba(10,40,20,.9); box-shadow:0 0 16px rgba(67,255,119,.25), inset 0 0 12px rgba(67,255,119,.15); }

/* ---- host panel ---- */
#mp-ui .mp-host-panel{ border-top:1px solid rgba(91,255,155,.2); padding-top:14px; display:grid; gap:12px; }
#mp-ui .mp-host-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
#mp-ui .mp-stepper{ display:inline-flex; align-items:center; gap:10px; }
#mp-ui .mp-stepper button{ padding:6px 12px; }
#mp-ui .mp-stepper b{ min-width:52px; text-align:center; color:#ffd24d; }
#mp-ui .mp-start{ padding:14px; font-size:16px; letter-spacing:.14em; border-color:#43ff77; color:#eafff2; background:rgba(12,46,24,.95); box-shadow:inset 0 0 16px rgba(67,255,119,.14); }
#mp-ui .mp-start:hover:not(:disabled){ box-shadow:0 0 22px rgba(67,255,119,.3), inset 0 0 16px rgba(67,255,119,.2); }
#mp-ui .mp-block{ text-align:center; color:#ffd24d; font-size:12px; }
#mp-ui .mp-wait{ text-align:center; color:#8decae; font-size:13px; padding:12px; letter-spacing:.04em; }

/* ---- countdown ---- */
#mp-ui .mp-countdown{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:rgba(0,6,3,.78); z-index:5; }
#mp-ui .mp-cd-ring{
  width:150px; height:150px; border-radius:50%; border:3px solid rgba(91,255,155,.5);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 34px rgba(33,255,91,.35), inset 0 0 26px rgba(33,255,91,.14);
}
#mp-ui .mp-cd-ring span{ font:bold 68px "Courier New",monospace; color:#ffd24d; text-shadow:0 0 18px rgba(255,210,77,.6); }
#mp-ui .mp-cd-label{ letter-spacing:.3em; color:#a8ffc0; font-weight:bold; }

/* ---- result ---- */
#mp-ui .mp-result{ text-align:center; width:min(560px,94vw); }
#mp-ui .mp-win{ color:#ffd24d; }
#mp-ui .mp-loss{ color:#ff7b7b; }
#mp-ui .mp-result-sub{ color:#8decae; font-size:13px; margin-bottom:10px; }
#mp-ui .mp-result-score{ font:bold 56px "Courier New",monospace; color:#ffd24d; margin:8px 0; }
#mp-ui .mp-result-btns{ display:grid; gap:10px; margin-top:16px; }
#mp-ui .mp-scoreboard{ width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:12px; }
#mp-ui .mp-scoreboard th{ text-align:left; color:#a8ffc0; font-weight:bold; letter-spacing:.08em; padding:4px 8px; border-bottom:1px solid rgba(91,255,155,.3); }
#mp-ui .mp-scoreboard td{ padding:5px 8px; border-bottom:1px solid rgba(91,255,155,.12); color:#d5ffe0; }
#mp-ui .mp-scoreboard td.nm{ font-weight:bold; }
#mp-ui .mp-scoreboard td.sc{ color:#ffd24d; font-weight:bold; }
#mp-ui .mp-scoreboard td.wk{ color:#8decae; }
#mp-ui .mp-scoreboard tr.tr td:nth-child(2){ color:#ff8a8a; }
#mp-ui .mp-scoreboard tr.tb td:nth-child(2){ color:#7fdcff; }
#mp-ui .mp-feed{ border:1px solid rgba(91,255,155,.25); border-radius:10px; padding:10px 12px; margin:8px 0; text-align:left; font-size:12px; color:#bdf6d3; }
#mp-ui .mp-feed div{ padding:2px 0; }
#mp-ui .mp-feed b{ color:#ffd24d; }

@media (max-width:760px){
  #mp-ui .mp-pilot, #mp-ui .mp-entry-cols, #mp-ui .mp-host-row{ grid-template-columns:1fr; }
  #mp-ui .mp-teams{ grid-template-columns:1fr; }
  #mp-ui .mp-vs{ padding:0; text-align:center; }
  #mp-ui .mp-code{ font-size:24px; letter-spacing:.24em; }
  #mp-ui .mp-room-head{ flex-wrap:wrap; }
}