.friend-room-entry{margin-left:auto;background:linear-gradient(#2b6c53,#164633)!important;color:#ffe2a0!important}.friend-room-dialog{width:min(520px,92vw);padding:25px 30px;text-align:center}.friend-room-dialog h2{margin:4px 0 8px;color:#6b4317}.friend-kicker{color:#ad772d;letter-spacing:2px}.friend-main-action{width:220px;margin:14px auto;padding:10px;border-radius:20px;border:1px solid #b27b2c}.friend-divider{display:flex;align-items:center;gap:12px;margin:13px 0;color:#a29178;font-size:10px}.friend-divider:before,.friend-divider:after{content:"";height:1px;flex:1;background:#cbbda5}.friend-room-dialog form{display:flex;gap:8px;justify-content:center}.friend-room-dialog input{width:190px;padding:9px 12px;border:1px solid #c7b38e;border-radius:7px;background:#fffdf7;font:700 16px monospace;letter-spacing:4px;text-align:center}.friend-room-dialog form button{border:1px solid #bda16e;border-radius:7px;padding:7px 17px}.friend-room-dialog strong{color:#bd7623;font:700 27px monospace;letter-spacing:4px}.friend-seat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.friend-seat{position:relative;min-height:92px;padding:9px 4px;border:1px dashed #b8a47c;border-radius:9px;background:#f9f1df;color:#6f5a38;display:flex;flex-direction:column;align-items:center;justify-content:center}.friend-seat.filled{border-style:solid;background:#fffaf0}.friend-seat .avatar{width:38px;height:38px;font-size:13px}.friend-seat b{max-width:90px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.friend-seat small{font-size:8px;color:#a08761}.friend-seat .remove-ai{position:absolute;right:2px;top:2px;min-height:20px;border:0;background:none;color:#ad6a55}.friend-room-actions{display:flex;justify-content:center;gap:8px}.friend-room-actions button{border:1px solid #b99962;border-radius:18px;padding:7px 16px}.friend-room-actions button:disabled{filter:grayscale(1);opacity:.45}.friend-leave{margin-top:13px;border:0;background:none;color:#9d7663}.friend-room-dialog [hidden]{display:none!important}
@media(orientation:landscape) and (max-height:600px){.friend-room-dialog{width:min(580px,88vw);padding:14px 22px}.friend-room-dialog h2{font-size:16px}.friend-main-action{margin:7px auto;padding:6px}.friend-divider{margin:7px 0}.friend-seat-list{margin:8px 0}.friend-seat{min-height:66px;padding:4px}.friend-seat .avatar{width:30px;height:30px}.friend-room-actions button{padding:4px 13px}.friend-leave{margin-top:5px}.friend-room-dialog .auth-error{margin:2px}}

/* Four-way friend table: seats map directly to game order (bottom, left, top, right). */
.friend-room-dialog{width:min(620px,94vw)}
.friend-seat-list{position:relative;display:block;width:min(410px,82vw);height:238px;margin:10px auto 12px;border:7px solid #7a5129;border-radius:50%;background:radial-gradient(ellipse at center,#187557,#0a4939 70%,#063327);box-shadow:inset 0 0 0 3px #c99a5270,inset 0 0 35px #001c16aa,0 8px 20px #49301544}
.friend-table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;color:#eed08f;text-shadow:0 2px 3px #001b15;pointer-events:none}.friend-table-center b{font-size:15px}.friend-table-center small{font-size:9px;color:#a9c5b8}
.friend-seat-list .friend-seat{position:absolute;width:106px;min-height:67px;padding:4px;border:2px dashed #c6ae7d;border-radius:12px;background:#fff7e9ee;box-shadow:0 4px 11px #001a1488;z-index:2}.friend-seat-list .friend-seat.seat-0{left:50%;bottom:-4px;transform:translateX(-50%)}.friend-seat-list .friend-seat.seat-1{left:-18px;top:50%;transform:translateY(-50%)}.friend-seat-list .friend-seat.seat-2{left:50%;top:-4px;transform:translateX(-50%)}.friend-seat-list .friend-seat.seat-3{right:-18px;top:50%;transform:translateY(-50%)}
.friend-seat-list .friend-seat.filled{background:#fffaf0;border-style:solid}.friend-seat-list .friend-seat.mine{border-color:#f29b28;background:#ffe6b5;box-shadow:0 0 0 3px #ffb23f80,0 5px 13px #001a1490}.friend-seat-list .friend-seat em{position:absolute;top:-15px;left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:7px;background:#54391f;color:#ffe0a1;font-size:8px;font-style:normal;white-space:nowrap}.friend-seat-list .friend-seat .avatar{width:32px;height:32px}.friend-seat-list .friend-seat b{margin-top:2px}.friend-seat-list .seat-choice{width:100%;min-height:42px;border:0;background:transparent;color:#9a6a31;font-size:10px;font-weight:700;cursor:pointer}.friend-seat-list .seat-choice:hover{color:#d87915;background:#fff0cc}.friend-room-entry.create{background:linear-gradient(#c88a30,#8e561b)!important}.match-bar .friend-room-entry{margin-left:0}.match-bar>div+.friend-room-entry{margin-left:auto}
@media(orientation:landscape) and (max-height:600px){.friend-room-dialog{width:min(620px,94vw);padding:8px 18px}.friend-seat-list{width:370px;height:184px;margin:5px auto 7px}.friend-seat-list .friend-seat{width:94px;min-height:55px}.friend-seat-list .friend-seat .avatar{width:25px;height:25px}.friend-seat-list .friend-seat b{font-size:9px}.friend-seat-list .friend-seat small{font-size:7px}.friend-seat-list .seat-choice{min-height:34px}.friend-room-actions button{padding:3px 12px}.friend-room-dialog h2{margin:1px}.friend-room-dialog .muted{margin:2px}}
.friend-room-actions{align-items:center;flex-wrap:wrap}.ai-level-picker{display:flex;flex-direction:column;align-items:stretch;gap:3px;color:#80653c;font-size:9px;text-align:left}.ai-level-picker>span{padding-left:7px;color:#9a7846}.ai-level-picker>button{position:static!important;width:104px!important;height:30px!important;display:flex;align-items:center;justify-content:space-between;padding:0 10px!important;border:1px solid #b99962!important;border-radius:15px!important;background:linear-gradient(#fffdf6,#ead9b9)!important;color:#69451c!important;box-shadow:0 2px 7px #53351024}.ai-level-picker>button i{font-style:normal;color:#b37728}.ai-level-menu{position:absolute;z-index:30;left:0;top:48px;width:142px;padding:5px;border:1px solid #b88c4c;border-radius:11px;background:#fffaf0;box-shadow:0 12px 28px #2e1d0b66}.ai-level-menu[hidden]{display:none!important}.ai-level-menu button{position:static!important;width:100%!important;height:auto!important;min-height:35px!important;display:grid!important;grid-template-columns:1fr auto;text-align:left;padding:5px 8px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#64431e!important}.ai-level-menu button:hover,.ai-level-menu button[aria-selected="true"]{background:#f0d69f!important;color:#7b430a!important}.ai-level-menu button small{font-size:8px;color:#9c815d}
.friend-seat-list .friend-seat.seat-0 em{top:auto;bottom:-15px}

/* One-screen mobile room controls: four equal actions anchor to the corners. */
.friend-room-dialog{width:min(720px,96vw);max-height:96dvh;overflow:hidden}
#friendRoomActive{position:relative;min-height:338px;padding:0 112px 38px}
#friendRoomActive .friend-seat-list{width:min(400px,100%);height:226px;margin:28px auto 8px}
#friendRoomActive .friend-room-actions{position:absolute;inset:0;display:block;pointer-events:none}
#friendRoomActive .friend-room-actions>button{position:absolute;width:104px;height:35px;min-height:35px;padding:0 6px;border-radius:18px;pointer-events:auto;font-weight:700;white-space:nowrap}
#friendAddAiBtn{left:0;top:62px}
#friendInviteBtn{right:0;top:62px}
#friendLeaveBtn{left:0;bottom:0;color:#7c513f}
#friendStartBtn{right:0;bottom:0}
#friendRoomActive .ai-level-picker{position:absolute;left:0;top:102px;transform:none;pointer-events:auto;white-space:nowrap}

@media(orientation:landscape) and (max-height:600px),(orientation:portrait) and (max-width:700px){
  .friend-room-dialog{width:min(700px,96vw);max-height:96dvh;padding:7px 12px;overflow:hidden}
  #friendRoomActive{min-height:292px;padding:0 106px 35px}
  #friendRoomActive .friend-kicker{font-size:8px}
  #friendRoomActive h2{font-size:15px;line-height:1.25;margin:0}
  #friendRoomActive>.muted{font-size:9px;line-height:1.2;margin:1px 0}
  #friendRoomActive .friend-seat-list{width:min(370px,100%);height:184px;margin:25px auto 3px}
  #friendRoomActive .friend-room-actions>button{width:98px;height:32px;min-height:32px;font-size:10px}
  #friendAddAiBtn,#friendInviteBtn{top:48px}
  #friendRoomActive .ai-level-picker{left:0;top:84px;font-size:8px}
  #friendRoomActive .ai-level-picker>button{width:98px!important;height:28px!important;font-size:9px!important}.ai-level-menu{top:43px;width:132px}.ai-level-menu button{font-size:9px!important}
}
@media(orientation:portrait) and (max-width:700px){
  body.virtual-landscape .friend-room-dialog{width:min(700px,96dvh);max-width:96dvh;max-height:96vw}
}