.lobby-friends{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px;padding:17px 20px;margin-top:12px;background:#1d343b;border:1px solid #567f84;color:#e2f0ec;text-align:left}.lobby-friends>span{flex:1}.lobby-friends strong,.lobby-friends small{display:block}.lobby-friends strong{font-size:14px}.lobby-friends small{font-size:11px;color:#acc7c6;margin-top:4px}.rooms-page{max-width:1080px;margin:auto;padding:16px 0 35px}.rooms-heading{text-align:center;margin-bottom:30px}.rooms-heading h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,60px);line-height:1.03;letter-spacing:-1.8px;margin:15px 0}.rooms-heading p{color:#b3bcb9}.rooms-panel{border:1px solid #475650;background:linear-gradient(135deg,#202d2bc9,#131b1ae8),url('/public/art/citadel.png') center/cover;box-shadow:0 24px 60px #0003;padding:30px}.room-deck{display:flex;gap:20px;align-items:center;padding-bottom:24px;border-bottom:1px solid #53615870}.room-deck-fan{display:flex;width:135px;padding-left:10px;flex-shrink:0}.room-deck-fan>.portrait{width:49px;height:72px;object-fit:cover;margin-left:-10px;border:1px solid #a59471;border-radius:3px;transform:rotate(-8deg)}.room-deck-fan>.portrait:nth-child(2){transform:rotate(0);z-index:1}.room-deck-fan>.portrait:nth-child(3){transform:rotate(8deg)}.room-deck>div:nth-child(2){flex:1}.room-deck small,.room-deck strong,.room-deck span{display:block}.room-deck small{font-size:9px;letter-spacing:1.7px;color:var(--gold)}.room-deck strong{font-family:Georgia,serif;font-weight:400;font-size:24px;margin:6px 0}.room-deck span{font-size:11px;color:#b9c4bb}.room-name{display:block;max-width:440px;margin:25px auto 30px}.room-name>span{display:block;font-size:12px;margin-bottom:9px;color:#cfdbd2}.room-name .text-input{height:47px}.room-options{display:grid;grid-template-columns:1fr 1fr;gap:28px}.room-option{position:relative;padding:26px;background:#101b1ab8;border:1px solid #4c60595e}.room-option-number{position:absolute;right:23px;top:20px;color:#99b9af21;font:58px Georgia,serif}.room-option h2{font:30px Georgia,serif;margin:12px 0}.room-option p{font-size:12px;color:#b6c2b9;max-width:290px;min-height:42px}.room-field{display:block;font-size:11px;color:#c4cdc7;margin:24px 0 17px}.room-field input,.room-field select{display:block;width:100%;height:47px;margin-top:9px;background:#0d1715;border:1px solid #576960;color:#f0f0e6;padding:0 14px;border-radius:3px;font:inherit;font-size:14px}.room-field input{text-transform:uppercase;letter-spacing:4px;font-weight:650}.rooms-rules{display:flex;justify-content:center;flex-wrap:wrap;gap:15px 25px;padding-top:24px;color:#acb9b3;font-size:11px}.rooms-rules span{display:flex;align-items:center;gap:8px}.rooms-rules .icon{width:16px}.room-wait{text-align:center;padding:20px 10px 12px}.room-code-label{display:block;margin-top:24px;color:#c0cec6;font-size:12px}.room-code{display:block;width:100%;max-width:410px;text-align:center;margin:10px auto 20px;font:600 clamp(32px,7vw,62px) ui-monospace,monospace;letter-spacing:.16em;background:#0d161399;color:#f0d7a4;border:1px solid #aa947455;padding:18px 8px 18px 20px;border-radius:4px}.room-copy-actions{display:flex;justify-content:center;gap:12px}.room-seats{display:flex;align-items:center;justify-content:center;gap:25px;margin:40px auto 30px}.room-seats>div{min-width:180px;max-width:300px;overflow-wrap:anywhere}.room-seats i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#81c6b7;margin-right:8px}.room-seats strong{font-size:16px}.room-seats small{display:block;color:#96b5a5;font-size:9px;letter-spacing:1.3px;margin-top:12px}.room-seats>.empty{color:#a4b1aa}.room-seats>.empty i{background:#a3987c}.room-seats>span{font:italic 24px Georgia,serif;color:#c8b48e}.room-wait h2{font:27px Georgia,serif;margin:15px 0}.room-wait p{font-size:13px;color:#b8c5bd;margin:10px 0 25px}.room-leave{display:block;margin:25px auto 0;color:#cabba7}.room-sigil{display:block;font:64px Georgia,serif;color:#dab27b}.room-error{border:1px solid #ba7b665e;background:#492f23;color:#f6d2b3;padding:15px 20px;margin-bottom:16px;line-height:1.6}.room-network-alert{background:#382d20;color:#f6d7a6;border-bottom:1px solid #9e7d3f;padding:11px 20px;text-align:center;font-size:12px}
@media(max-width:760px){.rooms-page{padding-top:0}.rooms-heading{margin-bottom:22px}.rooms-heading p{font-size:12px}.rooms-panel{padding:18px}.room-options{grid-template-columns:1fr;gap:16px}.room-option{padding:23px 20px}.room-deck{gap:10px;flex-wrap:wrap}.room-deck strong{font-size:21px}.room-deck>.button{margin-left:auto}.room-deck-fan{width:104px}.room-seats{gap:10px}.room-seats>div{min-width:0;flex:1}.room-seats strong{font-size:13px}.room-seats small{font-size:8px;line-height:1.5}.room-copy-actions{flex-wrap:wrap}.room-wait{padding:8px 0}.room-wait h2{font-size:25px}.room-wait p{font-size:12px}.rooms-rules{justify-content:flex-start;padding-left:10px}.lobby-friends{padding:14px}}

.room-deck-fan>.portrait{position:relative;inset:auto;flex-shrink:0}.rooms-heading h1{font-size:clamp(36px,4.5vw,48px);margin:12px 0}.rooms-heading{margin-bottom:24px}.rooms-heading p{font-size:13px}.room-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,310px);align-items:center;gap:24px;padding-bottom:24px;border-bottom:1px solid #53615870;margin-bottom:24px}.room-setup .room-deck{border:0;padding:0;gap:12px}.room-setup .room-name{margin:0;width:100%}.room-setup .room-deck-fan{width:105px}.room-setup .room-deck strong{font-size:22px}.room-setup .room-deck>.button{padding:0 14px;font-size:11px}.room-option{padding:23px}.room-field{margin-top:18px}.rooms-page{padding-top:0}
@media(max-width:900px){.room-setup{grid-template-columns:1fr}.room-setup .room-name{max-width:none}.room-deck-fan{width:110px}}
.room-setup .room-deck-fan{width:140px}

/* Keep the desktop lobby while bringing the invitation form into thumb reach. */
.rooms-page .room-mobile-copy, .rooms-page .room-mobile-rules { display:none; }
@media(max-width:700px) {
  .rooms-page { width:100%; min-width:0; padding:0 0 12px; }
  .rooms-page .room-wide-copy, .rooms-page .rooms-rules-wide { display:none; }
  .rooms-page .room-mobile-copy { display:inline; }
  .rooms-heading { text-align:left; margin-bottom:16px; }
  .rooms-heading>.eyebrow { font-size:8px; letter-spacing:1.2px; }
  .rooms-heading h1 { font-size:29px; letter-spacing:-.5px; line-height:1.15; margin:7px 0 0; overflow-wrap:anywhere; }
  .rooms-heading>p { display:none; }
  .rooms-panel { padding:14px; border-radius:8px; min-width:0; }
  .room-setup { gap:13px; padding-bottom:15px; margin-bottom:14px; }
  .room-setup .room-deck { display:grid; grid-template-columns:40px minmax(0,1fr) auto; flex-wrap:nowrap; gap:10px; width:100%; min-width:0; }
  .room-setup .room-deck-fan { width:40px; padding:0; }
  .room-deck-fan>.portrait { width:36px; height:48px; margin:0; transform:none; }
  .room-deck-fan>.portrait:not(:first-child) { display:none; }
  .room-deck>div:nth-child(2) { min-width:0; }
  .room-deck small { font-size:7px; letter-spacing:1px; }
  .room-setup .room-deck strong { font-size:18px; line-height:1.2; margin:4px 0; overflow-wrap:anywhere; }
  .room-deck span { font-size:9px; line-height:1.45; letter-spacing:0; }
  .room-setup .room-deck>.button { display:flex; align-items:center; justify-content:center; gap:4px; min-width:58px; min-height:44px; padding:8px 6px; margin:0; font-size:11px; border-color:#758a8970; }
  .room-deck>.button .room-mobile-copy { font:inherit; color:inherit; }
  .room-deck>.button>.icon { width:12px; height:12px; flex-shrink:0; }
  .room-setup .room-name>span { font-size:11px; margin-bottom:6px; }
  .rooms-page .text-input { min-height:48px; height:48px; width:100%; max-width:100%; font-size:16px; border-radius:5px; padding:10px 12px; }
  .room-options { grid-template-columns:minmax(0,1fr); gap:12px; }
  .room-option { padding:14px; min-width:0; border-radius:6px; }
  .room-option-number, .room-option>.eyebrow { display:none; }
  .room-option h2 { font-size:21px; line-height:1.15; margin:0 0 8px; }
  .room-option p { min-height:0; max-width:none; font-size:11px; line-height:1.45; margin:0 0 12px; }
  .room-option .room-format-note { display:none; }
  .room-option-join .room-option-intro { display:none; }
  .room-field { font-size:11px; margin:9px 0 12px; }
  .room-field input { margin-top:6px; letter-spacing:3px; }
  .rooms-page .button { min-height:48px; height:auto; line-height:1.3; white-space:normal; font-size:12px; }
  .room-option>.button { width:100%; justify-content:center; padding:12px; }
  .room-error { padding:12px 14px; font-size:12px; margin-bottom:12px; overflow-wrap:anywhere; }
  .rooms-page .room-mobile-rules { display:block; margin-top:8px; color:#b7c7c0; font-size:11px; }
  .room-mobile-rules>summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 4px; cursor:pointer; list-style:none; }
  .room-mobile-rules>summary::-webkit-details-marker { display:none; }
  .room-mobile-rules>summary>.icon { width:15px; height:15px; flex-shrink:0; }
  .room-mobile-rules>summary>.icon:last-child { margin-left:auto; transform:rotate(90deg); }
  .room-mobile-rules[open]>summary>.icon:last-child { transform:rotate(-90deg); }
  .room-mobile-rules>div { display:grid; gap:12px; padding:4px 4px 14px; line-height:1.5; }
  .room-mobile-rules>div>p { margin:0; color:#d9ded2; }
  .room-mobile-rules>div>span { display:flex; align-items:flex-start; gap:8px; }
  .room-mobile-rules>div>span>.icon { width:16px; height:16px; flex-shrink:0; }
  .room-mobile-rules>summary:focus-visible { outline:2px solid #eed6a5; outline-offset:2px; border-radius:4px; }
  .room-wait { padding:8px 0 0; }
  .room-wait>.eyebrow { font-size:8px; letter-spacing:1.2px; }
  .room-wait p { margin:8px 0 16px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  .room-wait .room-wait-format { font-size:10px; margin:7px 0 13px; }
  .room-code-label { margin-top:12px; font-size:11px; }
  .rooms-page .room-wait .room-code { max-width:100%; width:100%; min-width:0; margin:7px auto 12px; padding:13px 8px 13px 15px; font-size:clamp(28px,8.4vw,40px); line-height:1.2; letter-spacing:.13em; border-radius:6px; }
  .room-copy-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .room-copy-actions>.button { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-width:0; padding:10px 7px; font-size:11px; }
  .room-copy-actions>.button>.icon { width:15px; height:15px; flex-shrink:0; }
  .room-seats { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:9px; align-items:center; margin:24px auto 20px; }
  .room-seats>div { min-width:0; max-width:100%; }
  .room-seats i { width:6px; height:6px; margin-right:4px; }
  .room-seats strong { font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
  .room-seats small { font-size:7px; letter-spacing:.5px; line-height:1.45; margin-top:7px; }
  .room-seats>span { font-size:18px; }
  .room-wait h2 { font-size:22px; line-height:1.2; margin:12px 0 8px; overflow-wrap:anywhere; }
  .room-wait .room-wait-instructions { font-size:11px; margin-bottom:12px; }
  .room-leave { min-height:44px; min-width:120px; padding:10px 12px; margin:12px auto 0; font-size:12px; }
  .room-sigil { font-size:42px; }
}
@media(max-width:360px) {
  .rooms-heading h1 { font-size:26px; }
  .rooms-panel { padding:11px; }
  .room-option { padding:12px; }
  .room-setup .room-deck { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .room-setup .room-deck-fan { display:none; }
  .room-copy-actions>.button { font-size:10px; gap:4px; }
  .room-copy-actions>.button>.icon { width:12px; height:12px; }
}
@media(max-width:700px) and (max-height:760px) {
  .rooms-heading { margin-bottom:12px; }
  .rooms-heading h1 { font-size:27px; }
  .room-setup { gap:10px; padding-bottom:12px; margin-bottom:12px; }
  .room-option-create .room-option-intro { display:none; }
  .room-options { gap:10px; }
  .room-seats { margin-block:18px 14px; }
}