/* BEMMAFIA V13.18 | Calm lobby / creation settings only / secure role selection */
:root{--bem-gold:#e7bd79;--bem-gold-soft:#c9a775;--bem-crimson:#ce3444;--bem-ink:#0c0b11;--bem-border:rgba(225,174,112,.19)}
.dashboard-shell{background:radial-gradient(ellipse at 95% 0%,#37121c7d,transparent 36%),linear-gradient(120deg,#0b0b10,#100d14 60%,#120b11)}
.dash-sidebar{background:linear-gradient(180deg,#140d13 0%,#0b0b11 90%);border-right-color:#6e403442}
.dash-sidebar:before{content:"";display:block;position:absolute;inset:0 0 auto; height:3px;background:linear-gradient(90deg,transparent,var(--bem-gold),#d23e51,transparent)}
.dash-brand{padding:4px 4px 10px;margin-bottom:4px}
.dash-brand span{font-family:Georgia,serif;letter-spacing:.035em;color:#f4d3a1;font-weight:800;text-shadow:0 0 16px #9d36304d}
.dash-brand img{border-radius:14px;filter:drop-shadow(0 8px 16px #0008)}
.side-label{color:#8c786f;margin-top:10px}
.nav-item{border-radius:13px;transition:transform .18s ease,background .2s,color .2s,border-color .2s,box-shadow .2s ease}
.nav-item.active{background:linear-gradient(90deg,#76202a,#2e121f);color:#fff0df;border-color:#aa4951;box-shadow:inset 3px 0 #e6ad74,0 0 20px #9d222028}
.nav-item:not(.active):hover{background:#27202a;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.dash-header{background:linear-gradient(90deg,#130e16,#170f15);border-bottom:1px solid var(--bem-border)}
.dash-main{max-width:1540px}
.rooms-browser-hero{position:relative;isolation:isolate;min-height:220px;align-items:center;border:1px solid #9b5b4852;border-radius:19px;background:linear-gradient(90deg,#120d13 0%,#1e1018 60%,#100d10 100%);box-shadow:0 24px 60px #0003}
.rooms-browser-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent 20%,#210c10bb 100%),radial-gradient(circle at 83% 54%,#962b2b66,transparent 39%)}
.rooms-browser-intro{max-width:660px;position:relative;z-index:1}
.rooms-browser-intro:before{content:"BEMMAFIA / O‘YIN MAYDONI";display:block;letter-spacing:.22em;color:#c9a775;font-size:10px;font-weight:800;margin-bottom:9px}
.rooms-browser-intro h2{font-family:Georgia,serif;font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,3.8vw,50px);color:#ffdfae;text-shadow:0 6px 30px #000b}
.rooms-browser-intro p{color:#d5bec0;max-width:510px}
.rooms-browser-intro .btn.primary{min-width:210px;background:linear-gradient(110deg,#bf2634,#771928);border:1px solid #d48978;box-shadow:0 9px 22px #be243333}
.rooms-browser-metrics{position:relative;z-index:1;flex:0 1 340px}
.rooms-browser-metrics>div{background:#120f16dc;border:1px solid #62413d}
.rooms-browser-metrics strong{color:#f3d8a9}
.rooms-browser-metrics span{font-size:11px}
.rooms-direct-join{background:#141117;border-color:#574039;border-radius:13px}
.rooms-direct-join input{background:#090b10;border-color:#4d3d42}
.rooms-section{border-color:#4b3338!important;background:linear-gradient(145deg,#16131bcf,#0e1018ed)!important;border-radius:18px}
.rooms-section .section-heading h2{font-family:Georgia,serif;color:#fae2c0}
.rooms-toolbar input,.rooms-toolbar select{background:#0d0d14!important;border:1px solid #5a4244!important;border-radius:10px!important;color:#efedef!important}
.rooms-browser .rooms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-content:start}
.rooms-browser .public-room-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:226px;padding:20px 20px 18px;border:1px solid #59413b;border-radius:15px;background:linear-gradient(126deg,#1d151b,#100f15 75%);box-shadow:inset 0 1px #ffffff09,0 15px 22px #0002;transition:transform .18s ease,border-color .18s ease}
.rooms-browser .public-room-card:hover{border-color:#d08770;transform:translateY(-2px)}
.public-room-card .bem-room-art{position:absolute;inset:0 0 0 auto;width:40%;overflow:hidden;pointer-events:none;opacity:.34;-webkit-mask-image:linear-gradient(90deg,transparent,black 38%);mask-image:linear-gradient(90deg,transparent,black 38%)}
.public-room-card .bem-room-art img{height:100%;width:100%;object-fit:cover;object-position:center 20%;filter:saturate(.8) contrast(1.1)}
.public-room-card>:not(.bem-room-art){position:relative;z-index:1}
.public-room-card h3{font-family:Georgia,serif;font-size:21px;margin-top:13px;color:#f7e9d9}
.public-room-card .room-owner{font-size:12px;color:#bdaea7}
.public-room-card .room-card-top{justify-content:space-between;gap:8px}
.public-room-card .room-status{font-size:10px;letter-spacing:.02em}
.public-room-card .occupancy{margin-top:auto;padding-top:14px;max-width:62%}
.public-room-card .occupancy-bar{max-width:62%;background:#31242e}
.public-room-card .occupancy-bar span{background:linear-gradient(90deg,#a92d3a,#e1a876)}
.public-room-card .room-join{align-self:flex-start;min-width:140px;width:auto!important;margin-top:15px!important;background:linear-gradient(90deg,#972333,#c13547)}
.public-room-card .room-join:disabled{background:#3b353a;box-shadow:none}
.bem-create-open{overflow:hidden}
.bem-create-layer:not(.hidden){display:flex!important;position:fixed!important;inset:0;z-index:1000;align-items:center;justify-content:center;padding:22px 15px;overflow-y:auto;overscroll-behavior:contain}
.bem-create-backdrop{position:fixed;inset:0;background:#040306da;backdrop-filter:blur(8px)}
.bem-create-dialog{position:relative;z-index:1;width:min(100%,720px);max-height:calc(100dvh - 34px);overflow:auto;border:1px solid #9c6556;border-radius:19px;background:linear-gradient(145deg,#21151c,#0d0e13 76%);box-shadow:0 32px 110px #000b,0 0 30px #9d273122}
.bem-create-dialog:before{content:"";display:block;height:4px;background:linear-gradient(90deg,#982433,#e9bd7e,#a32c39)}
.bem-create-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 27px 14px}
.bem-create-head h2{font:700 clamp(26px,3vw,35px) Georgia,serif;color:#f5d49e;margin:9px 0 9px}
.bem-create-head p{font-size:13px;line-height:1.6;color:#d1bbc0;max-width:520px}
.bem-create-close{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #65424b;background:#2b2027;color:#f8d7cf;border-radius:10px;font-size:24px;cursor:pointer}
.bem-create-form{padding:0 27px 27px}
.bem-create-form label{display:flex;flex-direction:column;gap:8px;min-width:0;color:#e4d4d5;font-size:13px;font-weight:700}
.bem-create-form input,.bem-create-form select{width:100%;background:#0e0e15;border:1px solid #55424a;border-radius:10px;color:#fff;padding:12px 14px;min-height:45px}
.bem-create-form input:focus,.bem-create-form select:focus{outline:2px solid #b85363;outline-offset:1px}
.bem-create-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.bem-create-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.bem-create-note{background:#20191c;border:1px solid #654c40;padding:17px;border-radius:12px;margin-top:8px}
.bem-create-note strong{font-size:13px;color:#f3ce9b}
.bem-create-note p{margin-top:6px;font-size:12px;line-height:1.8;color:#c6bbba}
.bem-create-note b{color:#f0e6df}
.bem-create-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:21px}
.bem-create-actions .btn.primary{min-width:180px;background:linear-gradient(90deg,#a22232,#d03f49);border:1px solid #c76e6b}
.game[data-phase="lobby"]{background:radial-gradient(ellipse at 35% 0%,#41151c50,transparent 44%),#0b0c12}
.game[data-phase="lobby"] .game-header{background:linear-gradient(90deg,#160e15,#110e15);border-bottom-color:#6d443f}
.game[data-phase="lobby"] .arena-top h1{font-family:Georgia,serif;font-size:29px;color:#efd0a0}
.game[data-phase="lobby"] .arena-top p{color:#d4bac0}
.game[data-phase="lobby"] .video-tile{border-color:#534042;background:linear-gradient(150deg,#291620,#121722)}
.game[data-phase="lobby"] .action-panel{background:linear-gradient(135deg,#1b141c,#0d1018);border:1px solid #68463e;box-shadow:0 18px 38px #0003}
.game[data-phase="lobby"] .action-panel h2{color:#f4d8ae;font-family:Georgia,serif;font-size:24px}
.game[data-phase="lobby"] .ready-panel{background:#18161e;border:1px solid #634d49;border-radius:13px;padding:17px;margin:17px 0}
.game[data-phase="lobby"] .role-lobby-panel{margin-top:18px;padding:18px;border-radius:13px;background:#101118;border:1px solid #654941}
.game[data-phase="lobby"] .role-picker-head h3{font-family:Georgia,serif;font-size:20px;color:#f0d1a3}
.game[data-phase="lobby"] .role-choice{background:#191821;border-color:#604c52}
.game[data-phase="lobby"] .role-choice-checked{background:#38202b;border-color:#c4665d}
.game[data-phase="lobby"] .role-slot-fixed{background:#302329;color:#f2caaa}
.bem-room-rules{border:1px solid #4c3d42;background:#17131b;border-radius:12px;padding:14px 16px;margin:15px 0}
.bem-room-rules strong{color:#e8c08c;font-size:13px}
.bem-room-rules p{margin:5px 0 2px;font-size:12px!important;color:#d6c6bf!important}
.bem-room-rules small{font-size:11px;line-height:1.55;color:#a99b9b}
.bem-roles-explain{padding:11px 14px;background:#312322;border-left:3px solid #dc9e69;border-radius:8px;color:#e3d1c4!important;line-height:1.65;margin:0 0 16px;font-size:12px!important}
@media(max-width:1250px){.rooms-browser .rooms-grid{grid-template-columns:1fr 1fr}.rooms-browser-metrics{flex:1 1 260px}}
@media(max-width:900px){.rooms-browser .rooms-grid{grid-template-columns:1fr}.rooms-browser-hero{flex-wrap:wrap}.rooms-browser-metrics{flex-basis:100%}.game[data-phase="lobby"] .arena-top h1{font-size:24px}}
@media(max-width:650px){.rooms-browser-hero{padding:22px 17px;min-height:0}.rooms-browser-intro h2{font-size:34px}.rooms-browser-metrics{gap:7px}.rooms-browser-metrics>div{min-height:86px}.rooms-browser .public-room-card{padding:17px;min-height:212px}.public-room-card h3{font-size:19px}.bem-create-layer:not(.hidden){padding:8px}.bem-create-dialog{max-height:calc(100dvh - 12px)}.bem-create-head{padding:18px 17px 9px}.bem-create-form{padding:0 17px 18px}.bem-create-row{grid-template-columns:1fr;gap:11px;margin-top:11px}.bem-create-times{grid-template-columns:1fr 1fr}.bem-create-times label:last-child{grid-column:1/-1}.bem-create-actions>.btn{flex:1}.game[data-phase="lobby"] .role-lobby-panel{padding:12px}}
@media(prefers-reduced-motion:reduce){.rooms-browser .public-room-card,.nav-item{transition:none}}

.bem-create-open #authArea:not(.hidden){z-index:1500}


.game[data-phase="lobby"] .voice-banner,
.game[data-phase="lobby"] .media-controls{display:none!important}
.game[data-phase="lobby"] .sidebar{grid-template-rows:1fr}
.game[data-phase="lobby"] .chat-block{height:100%}
.game[data-phase="lobby"] .video-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.game[data-phase="lobby"] .video-tile.lobby-seat{aspect-ratio:auto;min-height:190px;padding:15px 15px 16px;align-items:stretch;justify-content:space-between;overflow:hidden;border:1px solid #6b4c45;background:radial-gradient(circle at top,#3a232d 0%,#1b1a24 52%,#12151c 100%);box-shadow:inset 0 0 0 1px #ffffff05,0 18px 34px #00000030}
.game[data-phase="lobby"] .video-tile.lobby-seat:before{content:"";position:absolute;inset:auto -10% -35% auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#8e3f58aa 0%,transparent 70%);pointer-events:none}
.game[data-phase="lobby"] .video-tile.lobby-seat.offline{opacity:.7}
.game[data-phase="lobby"] .video-tile.lobby-seat.waiting{border-color:#6a4f43}
.game[data-phase="lobby"] .video-tile.lobby-seat.ready{border-color:#855f47;box-shadow:inset 0 0 0 1px #ffffff05,0 0 0 1px #8d6947,0 18px 34px #00000030}
.game[data-phase="lobby"] .video-tile.lobby-seat.speaking{border-color:#ff7a9f!important;box-shadow:0 0 0 2px #ff7a9f33,0 0 32px #ff7a9f24,inset 0 0 0 1px #ffffff05}
.lobby-seat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lobby-seat-tags{display:flex;flex-wrap:wrap;gap:6px}
.lobby-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em}
.lobby-badge.host{background:#4d3529;color:#ffd8ad;border:1px solid #815c3c}
.lobby-badge.self{background:#2f3048;color:#d8d7ff;border:1px solid #4e5084}
.lobby-badge.ready{background:#20382d;color:#b8ffd8;border:1px solid #2f7550}
.lobby-badge.waiting{background:#3e2430;color:#ffc7d4;border:1px solid #8a4860}
.seat-mic{width:44px;height:44px;border-radius:14px;border:1px solid #604757;background:linear-gradient(180deg,#2d2130,#1c1822);color:#f8d5dd;display:grid;place-items:center;font-size:19px;box-shadow:0 12px 22px #00000022}
.seat-mic.on{border-color:#b15c77;background:linear-gradient(180deg,#6a2944,#341b2a);color:#fff0f4;box-shadow:0 0 0 1px #bd5f7a,0 10px 25px #6a294466}
.seat-mic:disabled{opacity:1}
.lobby-avatar-wrap{position:relative;display:flex;justify-content:center;padding-top:5px}
.game[data-phase="lobby"] .lobby-seat .avatar{width:72px;height:72px;border-radius:24px;background:linear-gradient(135deg,#5f4663,#a34f67);border:2px solid #f7d2dc14;box-shadow:0 14px 32px #00000040;font-size:30px}
.lobby-speaking{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 10px;border-radius:999px;background:#5b2440;color:#ffd0de;border:1px solid #c25f87;font-size:10px;font-weight:700}
.lobby-seat-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.lobby-seat-name{font-size:16px;line-height:1.2;color:#f5f1f0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-seat-status{font-size:12px;color:#ebc8a1;font-weight:700}
.lobby-seat-meta{font-size:11px;color:#a9a4b5}
.video-tile.lobby-seat.empty{justify-content:center;align-items:center;border-style:dashed;border-color:#5a4b51;background:linear-gradient(180deg,#161922,#101218);gap:10px}
.empty-plus{width:54px;height:54px;border-radius:18px;border:1px dashed #826f77;display:grid;place-items:center;font-size:30px;color:#e6c4cc}
.empty-label{font-size:12px;color:#9994a5;text-align:center}
.game[data-phase="lobby"] .action-panel{padding:18px 20px}
.game[data-phase="lobby"] .action-panel>h2,.game[data-phase="lobby"] .action-panel>.how-to{display:none}
@media(max-width:800px){
  .game[data-phase="lobby"] .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game[data-phase="lobby"] .video-tile.lobby-seat{min-height:170px;padding:12px}
  .game[data-phase="lobby"] .lobby-seat .avatar{width:58px;height:58px;border-radius:18px;font-size:24px}
  .seat-mic{width:38px;height:38px;border-radius:12px}
}
@media(max-width:500px){
  .game[data-phase="lobby"] .video-grid{grid-template-columns:1fr 1fr}
  .lobby-badge{font-size:9px;padding:4px 7px}
  .lobby-seat-name{font-size:14px}
  .lobby-seat-status,.lobby-seat-meta{font-size:10px}
}