/* Portrait mini-app lobby. Scoped so arena and combat controls stay independent. */
#lobby{--gold:#d8b66c;--text:#eee8da;position:relative;isolation:isolate;width:100%;max-width:960px;min-height:100dvh;margin:0 auto;padding:0 20px 110px;background:#0c1513;color:var(--text);overflow:hidden}
#lobby::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:315px;background:linear-gradient(180deg,#08110f38,#0c151350 48%,#0c1513 96%),linear-gradient(90deg,#07100ee8,#08120f30),url('assets/mid-reference.png') center 38%/cover;opacity:.87;pointer-events:none}
#lobby .topbar{height:76px;padding:0;border:0;gap:12px}
#lobby .brand{display:flex;gap:6px;align-items:center;white-space:nowrap;font:700 23px Georgia,serif;letter-spacing:.1px;color:#ece8da}
#lobby .brand>span:not(.brand-mark){color:#ece8da}
#lobby .brand-mark{width:29px;height:31px;display:grid;place-items:center;flex-shrink:0;border:0;border-radius:5px;background:#a83f2e;color:#171d17;font:900 26px Georgia,serif;transform:none;box-shadow:none;margin-right:5px}
#lobby .brand small,#lobby .build,#lobby .arena-preview-link{display:none}
#lobby .top-right{margin-left:auto;gap:8px}
#lobby .profile{position:relative;width:36px;height:36px;border-radius:50%;border:1.5px solid #6dba91;background:radial-gradient(circle at 30% 25%,#667366,#263c33);color:#eee4cc;font:700 16px Georgia,serif}
#lobby .profile::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#74d89f;border:2px solid #12201b}
#lobby .lobby-heading{padding:18px 2px 22px;min-height:108px}
#lobby .lobby-heading h1{margin:0 0 4px;font:700 47px/1.08 Georgia,serif;letter-spacing:-1px;color:#f0ebde;text-shadow:0 2px 18px #0005}
#lobby .lobby-heading p{margin:0;color:#acb6af;font-size:14px;letter-spacing:2px;line-height:1.6}
#lobby .lobby-create{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:47px;margin:0 0 14px;border:1px solid #f0d392;border-radius:12px;background:linear-gradient(130deg,#ddbf7b,#ad8745);color:#15180e;font-size:15px;font-weight:800;letter-spacing:.1px;box-shadow:inset 0 1px #fff4,0 5px 20px #0003}
#lobby .lobby-create:hover,#lobby .room-enter:hover{filter:brightness(1.1);transform:none}
#lobby .room-toolbar{display:flex;flex-direction:column;gap:12px;margin:0 0 11px}
#lobby .id-search{order:-1;width:100%;min-width:0;min-height:43px;gap:10px;padding:0 12px;background:#17211fbd;border:1px solid #65777266;border-radius:12px;color:#acb7b3;box-shadow:inset 0 1px 7px #0002}
#lobby .id-search>span{font-size:27px;line-height:1}
#lobby .id-search input{width:100%;min-width:0;padding:11px 0;font-size:13px;color:#e7ebe6}
#lobby .id-search input::placeholder{color:#7f8c86}
#lobby .id-search:focus-within{border-color:#d9bb73;box-shadow:0 0 0 2px #dbbb7220}
#lobby .filter-group{display:grid;grid-template-columns:.8fr 1.2fr 1fr .9fr;width:100%;gap:6px;padding:0;border:0;background:none}
#lobby .filter-group button{min-width:0;min-height:37px;padding:7px 4px;border:1px solid #5a6d655e;border-radius:20px;background:#17221fd9;color:#b6c1bb;font-size:11px;white-space:nowrap}
#lobby .filter-group button.active{background:linear-gradient(140deg,#e0bf77,#ac8744);border-color:#f0d089;color:#131811;font-weight:800}
#lobby .access-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#lobby .access-filters{display:flex;flex-wrap:wrap;gap:6px}
#lobby .access-filters button{min-height:31px;padding:6px 10px;font-size:10px;color:#a6b3ac;border:1px solid #52665a66;border-radius:18px;background:#121e19c7;white-space:nowrap}
#lobby .access-filters button.active{border-color:#639a7b;color:#d8eee0;background:linear-gradient(#244233aa,#163027aa);box-shadow:inset 0 0 12px #66b28515}
#lobby .access-filters button.active::before{display:none}
#lobby #room-count{font-size:9px;color:#74877d;white-space:nowrap}
#lobby .room-table-head{display:none}
#lobby .room-row{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr) 77px;grid-template-rows:auto auto auto;gap:4px 10px;align-items:center;min-height:109px;padding:10px 10px 10px 0;margin:0 0 10px;border:1px solid #64776e80;border-radius:14px;background:linear-gradient(120deg,#23322b8c,#111e1cdb);box-shadow:inset 0 1px #ffffff06,0 7px 18px #0002;overflow:hidden}
#lobby .room-owner{display:contents}
#lobby .room-avatar{grid-column:1;grid-row:1/4;align-self:stretch;width:82px;height:auto;min-height:87px;margin:-10px 0 -10px;border:0;border-radius:0;background-image:url('assets/heroes.png');background-repeat:no-repeat;background-size:auto 125%;box-shadow:none;position:relative}
#lobby .room-avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#17231d96)}
#lobby .room-avatar.pudge{background-position:13% 26%}
#lobby .room-avatar.sf{background-position:87% 26%}
#lobby .room-owner>div:not(.room-avatar){grid-column:2;grid-row:1;min-width:0;align-self:start}
#lobby .room-owner strong{display:block;font:700 15px/1.2 Georgia,serif;color:#e7e3d6;overflow-wrap:anywhere}
#lobby .room-owner strong small{display:inline-block;padding:1px 3px;margin-left:2px;border:1px solid #aa965146;border-radius:3px;color:#ceb977;background:none;font:7px Arial,sans-serif;vertical-align:middle}
#lobby .room-owner>div>span{display:flex;flex-wrap:wrap;gap:1px 4px;margin-top:4px;color:#a4afa7;font-size:9px;line-height:1.4}
#lobby .room-owner code{font:10px Arial,sans-serif;letter-spacing:.5px;color:#82958a}
#lobby .room-owner b{display:none}
#lobby .room-players{position:static;grid-column:3;grid-row:1;justify-self:center;font-size:12px;line-height:1.3;color:#bdc8c1}
#lobby .room-players::before{content:'●';margin-right:5px;font-size:8px;color:#85978c}
#lobby .room-players span{color:#85958b;font-size:11px}
#lobby .room-row .fee-pill{grid-column:2;grid-row:2;min-width:0;padding:0;border:0;background:none;font-size:11px;font-weight:600;color:#78c99b;white-space:nowrap}
#lobby .room-row .fee-pill.stars{color:#dfb55f}
#lobby .room-row .fee-pill.ton{color:#6fceea}
#lobby .access-status{grid-column:2;grid-row:3;color:#7cbd96;font-size:9px;white-space:nowrap;min-width:0}
#lobby .access-status.private{color:#93a299}
#lobby .access-status>span{color:inherit;font-size:8px}
#lobby .room-enter{grid-column:3;grid-row:2/4;min-width:0;width:100%;min-height:37px;padding:7px 4px;border:1px solid #efcf89;border-radius:10px;background:linear-gradient(135deg,#e2c27e,#a88141);color:#151a10;font-size:11px;font-weight:800;line-height:1.2;justify-content:center;letter-spacing:0}
#lobby .room-enter>span{display:none}
#lobby .empty-rooms{padding:28px 18px;margin-top:9px;border:1px solid #61776a48;border-radius:16px;background:#17231ec9;text-align:center}
#lobby .empty-rooms>span{font-size:28px;color:#bbab78}
#lobby .empty-rooms h2{font:700 23px Georgia,serif;color:#e4e5d8}
#lobby .empty-rooms p{color:#92a498;font-size:12px;line-height:1.6}
#lobby .empty-rooms .secondary{border-radius:9px;border-color:#65745988;background:#1d3026;color:#b9ccbc;font-size:11px;padding:11px}
#lobby .room-demo-note{font-size:9px;line-height:1.6;color:#6f8578;text-align:center;margin:17px 0 0}
#lobby>footer{display:none}
#lobby .main-tabs{position:fixed;z-index:8;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:960px;min-height:76px;height:auto;padding:8px 14px max(9px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;border:0;border-top:1px solid #52625770;background:#0b1613f5;backdrop-filter:blur(14px);box-shadow:0 -6px 24px #0003}
#lobby .main-tabs button,#lobby .main-tabs #training-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:49px;height:auto;margin:0;padding:4px 0;color:#819489;background:none;font-size:10px;white-space:nowrap}
#lobby .main-tabs #rooms-tab{order:0}#lobby .main-tabs #training-tab{order:1}#lobby .main-tabs #store-tab{order:2}#lobby .main-tabs #profile-tab{order:3}
#lobby .main-tabs button>span{display:block;margin:0;padding:0;border:0;color:inherit;font-size:23px;line-height:1}
#lobby .main-tabs button.current{color:#dfba6b}
#lobby .main-tabs button.current::after{content:"";position:absolute;bottom:-3px;left:30%;right:30%;height:2px;border-radius:2px;background:#d7b773}
@media(min-width:600px){#lobby{padding-left:32px;padding-right:32px}#lobby .topbar{height:84px}#lobby .lobby-heading h1{font-size:57px}#lobby .lobby-heading{padding-top:25px;min-height:132px}#lobby .room-row{grid-template-columns:112px minmax(0,1fr) 112px;min-height:127px;padding-right:17px;column-gap:18px}#lobby .room-avatar{width:112px}#lobby .room-owner strong{font-size:20px}#lobby .room-owner>div>span{font-size:12px}#lobby .room-row .fee-pill{font-size:13px}#lobby .access-status{font-size:11px}#lobby .room-enter{font-size:14px;min-height:43px}#lobby .filter-group button{font-size:13px}#lobby .access-filters button{font-size:12px;padding:7px 17px}}
@media(max-width:359px){#lobby{padding-left:12px;padding-right:12px}#lobby .brand{font-size:20px}#lobby .room-row{grid-template-columns:68px minmax(0,1fr) 69px;column-gap:7px}#lobby .room-avatar{width:68px}#lobby .room-owner strong{font-size:13px}#lobby .room-enter{font-size:10px}#lobby .filter-group button{font-size:10px}#lobby .access-filters button{font-size:9px;padding:6px 8px}}

#lobby .main-tabs button::before{display:none!important;content:none!important}#lobby .main-tabs button.current::after{top:auto;bottom:0}

#lobby .main-tabs .nav-icon{width:25px;height:25px;flex-shrink:0;overflow:visible}#lobby .main-tabs button.current .nav-icon{filter:drop-shadow(0 0 6px #d7b77325)}
/* Telegram fullscreen: keep controls clear of native close/menu and home indicator. */
.telegram-app #lobby{padding-top:max(env(safe-area-inset-top,0px),var(--app-safe-top,0px));padding-bottom:calc(110px + var(--app-safe-bottom,0px))}
.telegram-app #lobby .main-tabs{padding-bottom:max(9px,env(safe-area-inset-bottom,0px),var(--app-safe-bottom,0px))}
.telegram-app .game-top{top:calc(14px + var(--app-safe-top,0px));left:calc(18px + var(--app-safe-left,0px));right:calc(18px + var(--app-safe-right,0px))}
.telegram-app .game-preview-tools{top:calc(79px + var(--app-safe-top,0px));right:calc(18px + var(--app-safe-right,0px))}
.telegram-app .duel-meta{top:calc(23px + var(--app-safe-top,0px));left:calc(65px + var(--app-safe-left,0px))}
.telegram-app .objective{top:calc(73px + var(--app-safe-top,0px))}
.telegram-app .game-bottom{bottom:calc(18px + var(--app-safe-bottom,0px));left:calc(20px + var(--app-safe-left,0px));right:calc(20px + var(--app-safe-right,0px))}