.multiplayer-view{align-items:center;justify-content:center;box-sizing:border-box;padding:12px;overflow:hidden;background:rgba(0,3,8,.24)}
.multiplayer-content{display:flex;flex-direction:column;width:min(92vw,470px);max-width:470px;max-height:calc(100% - 8px);box-sizing:border-box;padding:clamp(16px,3vw,26px);overflow-y:auto;overscroll-behavior:contain}
.multiplayer-content>p:not(.selection-kicker):not(.multiplayer-status){margin:7px 0 12px}.multiplayer-content h2{font-size:clamp(1.45rem,3.5vw,2rem)}
.match-mode-panel{display:grid;gap:3px;margin:10px 0;padding:10px 12px;border-left:3px solid #8ed5ff;border-radius:10px;background:rgba(78,151,203,.12);text-align:left}.match-mode-panel strong{color:#e8f7ff;font-size:.88rem}.match-mode-panel span{color:rgba(222,239,251,.72);font-size:.73rem;line-height:1.35}
.multiplayer-actions{margin:8px 0 10px;gap:8px}.match-join-panel{gap:8px;margin-top:4px;padding-top:12px}.match-join-panel input,.match-invite-output{padding:10px 12px;border-radius:10px}.match-created-panel{gap:8px;margin-top:12px;padding:13px;border-radius:14px}.match-code-output{font-size:clamp(1.13rem,3.4vw,1.55rem);letter-spacing:.1em}.match-copy-row{gap:8px}.match-start-footer{position:sticky;z-index:8;bottom:-1px;margin:10px -4px -1px;padding:10px 4px 4px;background:linear-gradient(180deg,rgba(3,7,12,0),rgba(3,7,12,.96) 30%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.match-start-button{margin:0;cursor:pointer;box-shadow:0 12px 34px rgba(50,105,148,.5),inset 0 1px rgba(255,255,255,.86)}.match-start-button:disabled{opacity:.72;cursor:not-allowed}.multiplayer-status{margin:12px 0 0;font-size:.78rem;line-height:1.35}.multiplayer-status[data-state="ready"]{color:#9ff1ba}.multiplayer-status[data-state="invite"]{color:#a8dcff}.multiplayer-content[data-lobby-mode="host-ready"] .match-mode-panel{border-left-color:#9ff1ba}.multiplayer-content .title-back{margin-top:5px;padding-top:5px;padding-bottom:5px}
@media(max-width:620px){.match-copy-row{grid-template-columns:1fr}}@media(max-height:720px){.multiplayer-view{padding:8px}.multiplayer-content{padding:14px 16px;border-radius:20px}.match-mode-panel{margin:7px 0;padding:8px 10px}.match-created-panel{margin-top:8px;padding:10px}.multiplayer-content .selection-start{min-height:42px}}

.match-name-panel{display:grid;gap:7px;margin:7px 0 10px;text-align:left}.match-name-panel label{font-size:.76rem;color:rgba(222,239,251,.78)}.match-name-panel input{padding:10px 12px;border-radius:10px;border:1px solid rgba(142,213,255,.28);background:rgba(4,16,30,.62);color:#eff9ff;font:inherit}.match-players-panel{margin:12px 0 0;padding:12px;border-radius:14px;background:rgba(78,151,203,.1);text-align:left}.match-players-list{display:grid;gap:7px;margin:8px 0 0;padding:0;list-style:none}.match-players-list li{display:flex;align-items:center;gap:8px;color:#eaf7ff;font-size:.86rem}.match-player-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}.match-player-role{color:rgba(222,239,251,.68);font-size:.76rem}


/* UI polish: desktop lobby breathing room without changing the tablet layout. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .multiplayer-view { padding: clamp(24px, 4vw, 58px); }
  .multiplayer-content {
    width: min(74vw, 720px);
    max-width: 720px;
    padding: clamp(28px, 3.5vw, 46px);
    border-radius: 30px;
    gap: 4px;
  }
  .multiplayer-content h2 { font-size: clamp(2rem, 3vw, 2.85rem); }
  .multiplayer-content>p:not(.selection-kicker):not(.multiplayer-status) { font-size: 1rem; line-height: 1.5; }
  .match-mode-panel { margin: 16px 0; padding: 16px 18px; border-radius: 16px; }
  .match-mode-panel strong { font-size: 1.04rem; }
  .match-mode-panel span { font-size: .9rem; }
  .match-name-panel { gap: 9px; margin: 12px 0 16px; }
  .match-name-panel label { font-size: .9rem; }
  .match-name-panel input,
  .match-join-panel input,
  .match-invite-output { padding: 14px 16px; border-radius: 14px; font-size: 1rem; }
  .multiplayer-actions,
  .match-join-panel { gap: 12px; }
  .multiplayer-content .selection-start { min-height: 54px; font-size: .95rem; }
  .match-created-panel,
  .match-players-panel { padding: 18px; border-radius: 20px; }
  .match-code-output { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .match-copy-row { gap: 12px; }
  .match-players-list li { font-size: 1rem; }
  .multiplayer-status { font-size: .92rem; margin-top: 16px; }
}