.mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) 16px 40px;
  background: radial-gradient(ellipse at 12% 4%, #f4488066, transparent 45%),
    radial-gradient(ellipse at 88% 95%, #19d6c355, transparent 50%), #080d1de8;
  backdrop-filter: blur(16px);
}
.mp-overlay[hidden] { display: none; }
.mp-hide {
  display: block;
  margin: 0 max(0px, calc((100% - 850px) / 2)) 10px auto;
  padding: 10px 18px;
  border: 1px solid #f4dbb883;
  border-radius: 12px;
  background: #272d42;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.mp-lobby {
  max-width: 850px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 42px);
  border: 2px solid #e6b966;
  border-radius: 26px;
  background: radial-gradient(circle at 50% -20%, #424a7f, transparent 50%),
    linear-gradient(145deg, #222941, #151a2f);
  color: #f4f6ff;
  box-shadow: 0 18px 0 #080d18, 0 28px 70px #0008, inset 0 0 0 5px #ffffff0a;
}
.mp-lobby h2 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -.045em;
  color: #ffe2a4;
  text-shadow: 0 0 25px #ffc26680;
}
.mp-notice { line-height: 1.55; color: #bfcde0; max-width: 720px; }
.mp-steps { line-height: 1.5; padding: 14px 18px; border-radius: 12px; background: #122d41; border: 1px solid #67ccc584; color: #e8fbf5; font-weight: 600; }
.mp-status { min-height: 1.5em; line-height: 1.45; }
.mp-status:empty { display: none; }
.mp-status-error { padding: 12px 16px; border: 2px solid #ffb676; border-radius: 12px; background: #54223d; color: #fff2db; }
.mp-help { color: #bfcde0; margin: 12px 0; }
.mp-help summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mp-help p { max-width: 650px; line-height: 1.5; }
.mp-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; align-items: center; }
.mp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.mp-choices button { min-height: 90px; font-size: 1.2rem; }
.mp-choices button:last-child { background: linear-gradient(150deg, #216b81, #3444a4); border-color: #8acaff; box-shadow: 0 3px 0 #172963; }
.mp-choices button:last-child:hover { box-shadow: 0 5px 0 #172963; }
.mp-field { display: grid; gap: 6px; width: 100%; max-width: 310px; font-weight: 700; }
.mp-lobby input:not([type="checkbox"]), .mp-link {
  box-sizing: border-box;
  width: 100%;
  max-width: 310px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid #787e9f;
  background: #0b1128;
  color: #fff;
}
.mp-link { max-width: 100%; min-height: 90px; resize: vertical; overflow-wrap: anywhere; }
.mp-share-panel { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding: 18px; margin: 16px 0; border: 1px solid #7ba1a488; border-radius: 16px; background: #141f36; }
.mp-share-panel h3, .mp-share-panel .mp-link { flex-basis: 100%; margin: 0; }
.mp-share-panel h3 { color: #ffe2a4; }
.mp-share-steps { flex-basis: 100%; margin: 0; padding-left: 24px; color: #d5eee9; line-height: 1.6; }
.mp-share-steps li + li { margin-top: 6px; }
.mp-share-options { flex-basis: 100%; margin-bottom: 0; }
.mp-share-options[open] .mp-link { display: block; margin: 14px 0 10px; }
.mp-share-options .mp-qr { margin-top: 18px; }
.mp-qr { display: block; width: min(100%, 350px); height: auto; aspect-ratio: 1; margin: 0 auto; padding: 14px; box-sizing: border-box; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.mp-scanner { width: 100%; padding: 12px; border: 1px solid #8acaff; border-radius: 12px; background: #111e30; }
.mp-scanner video { display: block; max-width: 100%; max-height: 320px; margin: auto; }
.mp-scanner p { margin: 8px 0 0; }
.mp-lobby button {
  padding: 10px 15px;
  border: 1px solid #eeb661;
  border-radius: 11px;
  background: linear-gradient(150deg, #fa735a, #cf3d75);
  color: #fff;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 3px 0 #731a4a;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mp-lobby button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 #731a4a; }
.mp-lobby button.mp-secondary { border-color: #8999b3; background: #323e59; box-shadow: 0 3px 0 #111c32; }
.mp-lobby button.mp-secondary:hover:not(:disabled) { box-shadow: 0 5px 0 #111c32; }
.mp-lobby button.mp-primary { border-width: 2px; min-height: 46px; }
.mp-share-panel > .mp-primary { width: 100%; font-size: 1.05rem; }
.mp-standings > summary { color: #ffe2a4; font-weight: 750; }
.mp-lobby button.mp-leave { border-color: #8999b3; background: #323e59; box-shadow: 0 3px 0 #111c32; }
.mp-lobby button.mp-leave:hover:not(:disabled) { box-shadow: 0 5px 0 #111c32; }
.mp-lobby button:disabled { opacity: .45; cursor: not-allowed; }
.mp-lobby button:focus-visible, .mp-lobby input:focus-visible, .mp-link:focus-visible, .mp-help summary:focus-visible { outline: 3px solid #8acaff; outline-offset: 2px; }
.mp-members { padding: 0; list-style: none; display: grid; gap: 10px; }
.mp-members li { padding: 12px; background: #333f5a; border: 1px solid #7283a850; border-radius: 12px; }
.mp-members button { margin-left: 10px; }
.mp-access { margin: 18px 0; }
.mp-access .mp-members { margin: 12px 0 0; }
.mp-selection, .mp-games { padding: 20px; margin: 18px 0; border-radius: 16px; }
.mp-selection { background: #141f36; border: 1px solid #8095b777; }
.mp-selection h3, .mp-games h3 { margin: 0 0 6px; color: #ffe2a4; }
.mp-seat-hint, .mp-games > p { margin: 0 0 16px; line-height: 1.45; color: #bfcde0; }
.mp-seat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mp-seat { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 14px; border: 1px solid #8095b777; border-radius: 12px; background: #232f4a; box-sizing: border-box; font-weight: 700; cursor: pointer; }
.mp-seat:has(input:checked), .mp-seat-host { border-color: #76e2bd; background: #1a4749; color: #fff; }
.mp-seat-host { cursor: default; }
.mp-seat input { width: 19px; height: 19px; margin: 0; flex: none; accent-color: #70e5bd; }
.mp-seat-count { margin: 14px 0 0; color: #bff4dc; font-weight: 700; }
.mp-games { border: 1px solid #7ba1a452; background: #102f37; }
.mp-game-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.mp-game-list button { min-height: 60px; text-align: left; }
.mp-local-only { margin: 14px 0 0 !important; color: #adbdd0; font-size: .9rem; }
.mp-standings { padding: 16px; margin: 18px 0; border: 1px solid #7ba1a452; border-radius: 14px; background: #141f36; }
.mp-standings h3 { margin: 0 0 10px; color: #ffe2a4; }
.mp-standings ol, .mp-standings-games { margin: 8px 0; padding-left: 28px; }
.mp-standings li { padding: 4px 0; overflow-wrap: anywhere; }
.mp-standings-games { border-top: 1px solid #7ba1a452; padding-top: 10px; }
.mp-standings-games ul { padding-left: 20px; font-size: .9rem; color: #bfcde0; }
@media (max-width: 560px) {
  .mp-field, .mp-lobby input:not([type="checkbox"]) { max-width: 100%; }
  .mp-controls button { width: 100%; }
  .mp-choices { grid-template-columns: 1fr; }
  .mp-choices button { min-height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-lobby button { transition: none; }
}