/* Лоби: маси със залог (кредити) и онлайн игра с приятел. Префикс .lo- */
.lo-page{display:flex; flex-direction:column; gap:16px; max-width:880px; margin:0 auto; padding-bottom:24px}
.lo-head h1{margin:2px 0 0}
.lo-wallet{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 18px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,197,61,.18), transparent 60%), var(--pcard)}
.lo-wl{display:flex; flex-direction:column; gap:2px}
.lo-cr{font:700 clamp(32px,9vw,44px)/1 var(--num); color:var(--paccent); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.good{color:var(--pgood)}

.lo-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:5px; border-radius:20px; background:rgba(3,8,30,.5); border:1px solid var(--pline)}
.lo-tabs button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:56px; padding:6px 4px; border:0; border-radius:15px; background:none; color:var(--ptext); font:700 clamp(12px,3.4vw,15px)/1.15 var(--body); text-align:center; cursor:pointer; transition:background .2s, color .2s, transform .15s}
.lo-tabs button small{display:inline-flex; align-items:center; gap:3px; font:500 11px/1.1 var(--body); color:var(--pmuted)}
.lo-tabs button small .pi{width:12px; height:12px}
.lo-tabs button.on{background:linear-gradient(180deg,#ffd36b,#f0a91f); color:#1b1405}
.lo-tabs button.on small{color:#4a3510}
.lo-tabs button:active{transform:scale(.96)}

.lo-tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.lo-tier{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:22px; border:1px solid var(--pline);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01)), var(--pcard); box-shadow:0 14px 34px rgba(0,0,0,.28);
  animation:lo-in .45s var(--pease, cubic-bezier(.2,.8,.2,1)) both}
.lo-tier:nth-child(2){animation-delay:.06s} .lo-tier:nth-child(3){animation-delay:.12s}
.lo-tier::before{content:''; position:absolute; inset:-40% -30% auto auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(255,197,61,.22), transparent 70%); pointer-events:none}
.lo-tier.t1::before{background:radial-gradient(circle, rgba(255,120,90,.25), transparent 70%)}
.lo-tier.t2::before{background:radial-gradient(circle, rgba(130,110,255,.28), transparent 70%)}
.lo-tier header{display:flex; align-items:center; gap:12px}
.lo-tier h3{margin:0; font:700 34px/1 var(--num); color:var(--ptext); font-variant-numeric:tabular-nums}
.lo-chip{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; flex:none;
  background:repeating-conic-gradient(#f0a91f 0 15deg, #fff4d4 15deg 30deg); box-shadow:inset 0 0 0 6px #b5770e, 0 6px 14px rgba(0,0,0,.4)}
.lo-tier.t1 .lo-chip{background:repeating-conic-gradient(#d9364b 0 15deg, #ffe8ea 15deg 30deg); box-shadow:inset 0 0 0 6px #8e1626, 0 6px 14px rgba(0,0,0,.4)}
.lo-tier.t2 .lo-chip{background:repeating-conic-gradient(#5b4bd6 0 15deg, #ecebff 15deg 30deg); box-shadow:inset 0 0 0 6px #302689, 0 6px 14px rgba(0,0,0,.4)}
.lo-chip .pi{width:24px; height:24px; padding:5px; border-radius:50%; background:#1b1405; color:var(--paccent)}
.lo-tier dl{display:flex; gap:8px; margin:0}
.lo-tier dl div{flex:1; padding:8px 10px; border-radius:12px; background:rgba(3,8,30,.45)}
.lo-tier dt{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--pmuted)}
.lo-tier dd{margin:2px 0 0; font:700 19px/1.1 var(--num); font-variant-numeric:tabular-nums}
.lo-acts{display:flex; flex-direction:column; gap:8px}
.lo-acts .pbtn{min-height:46px}
.lo-tier.poor{opacity:.72}

.lo-h{margin:6px 0 8px}
.lo-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.lo-row{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--pcard); border:1px solid var(--pline); animation:lo-in .35s ease both}
.lo-rinfo{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.lo-rinfo b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-rinfo span{font-size:13px; color:var(--pmuted)}
.lo-ava{--s:44px; display:grid; place-items:center; width:var(--s); height:var(--s); flex:none; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.08); box-shadow:0 0 0 2px rgba(255,197,61,.5)}
.lo-ava svg{width:100%; height:100%; display:block}
.lo-ava .pi{width:50%; height:50%; color:var(--pmuted)}
.lo-ava.empty{background:none; box-shadow:inset 0 0 0 2px var(--pline); animation:lo-pulse 1.6s ease-in-out infinite}
.lo-empty{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; border:1px dashed var(--pline); color:var(--pmuted)}
.lo-empty p{margin:0}
.lo-empty .pi{flex:none; width:28px; height:28px}
.lo-code{margin-top:14px; display:flex; flex-direction:column; gap:6px}
.lo-code label{font-size:14px; color:var(--pmuted)}
.lo-code .prow{gap:8px; flex-wrap:nowrap}
.lo-code input{flex:1; min-width:0; height:48px; font:700 22px var(--num); letter-spacing:.3em; text-transform:uppercase; text-align:center}
.lo-code .pbtn{min-height:48px}
.lo-net{display:flex; align-items:flex-start; gap:8px; margin:0; font-size:13px; color:var(--pmuted)}
.lo-net .pi{flex:none; width:16px; height:16px; margin-top:1px}
.lo-net.ok{color:var(--pgood)}
.lo-soon{margin:0}

/* стая */
.lo-back{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:40px; color:var(--ptext); text-decoration:none; font-weight:600}
.lo-back .pi{width:18px; height:18px}
.lo-rhead{padding:16px 18px; text-align:center; background:radial-gradient(120% 140% at 50% 0%, rgba(255,197,61,.16), transparent 60%), var(--pcard)}
.lo-rhead h1{margin:4px 0 10px}
.lo-pot{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; font-size:15px; color:var(--pmuted)}
.lo-pot b{color:var(--ptext); font-family:var(--num); font-size:18px}
.lo-pot b.good{color:var(--pgood)}
.lo-seats{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px}
.lo-seat{display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 8px; border-radius:20px; background:var(--pcard); border:1px solid var(--pline); text-align:center; min-width:0}
.lo-seat b{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lo-seat.on{animation:lo-seat .5s cubic-bezier(.2,1.4,.4,1) both}
.lo-seat.wait{border-style:dashed}
.lo-vs{font:400 14px var(--display); color:var(--paccent); text-transform:uppercase}
.lo-invite{display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px; text-align:center}
.lo-invite p{margin:0}
.lo-invite .prow{justify-content:center; gap:8px; flex-wrap:wrap}
.lo-bigcode{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:0; border-radius:16px; background:rgba(3,8,30,.55); cursor:pointer; color:var(--paccent)}
.lo-bigcode span{display:grid; place-items:center; width:clamp(38px,11vw,48px); height:clamp(48px,13vw,58px); border-radius:10px; background:var(--paccent); color:#1b1405; font:700 clamp(24px,7vw,32px)/1 var(--num)}
.lo-bigcode .pi{width:22px; height:22px; margin-left:4px}
.lo-bigcode:active{transform:scale(.97)}
.lo-ract{display:flex; flex-direction:column; gap:10px}
.lo-ract .pbtn.big{min-height:54px; font-size:17px}
.lo-wait,.lo-done{display:flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:12px; border-radius:14px; background:rgba(3,8,30,.45); color:var(--pmuted)}
.lo-wait .pi{animation:lo-spin 2.4s linear infinite}

/* горна лента и вход от екрана с игрите */
.lo-hcr{display:inline-flex; align-items:center; gap:5px; height:40px; padding:0 12px; border-radius:99px; background:rgba(255,197,61,.12); border:1px solid rgba(255,197,61,.35); color:var(--paccent); text-decoration:none; font:700 15px var(--num); white-space:nowrap}
.lo-hcr .pi{width:18px; height:18px}
.lo-hcr small{font:500 11px var(--body); color:var(--pmuted)}
@media (max-width:520px){ .lo-hcr small{display:none} .lo-hcr{padding:0 10px} }
.lo-cta{display:flex; align-items:center; gap:12px; width:100%; max-width:560px; box-sizing:border-box; margin:10px auto 0; padding:12px 14px; border-radius:18px; text-decoration:none; color:var(--ptext);
  background:linear-gradient(100deg, rgba(255,197,61,.22), rgba(217,54,75,.18)), var(--pcard); border:1px solid rgba(255,197,61,.45); box-shadow:0 10px 26px rgba(0,0,0,.3)}
.lo-cta-ic{display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:var(--paccent); color:#1b1405}
.lo-cta-ic .pi{width:22px; height:22px}
.lo-cta-t{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.lo-cta-t small{font-size:12px; color:var(--pmuted)}
.lo-cta>.pi{width:20px; height:20px; color:var(--paccent)}
.lo-cta:active{transform:scale(.98)}

/* белот: 4 места в два отбора */
.lo-teams{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px}
.lo-team{display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:20px; border:1px solid var(--pline); background:rgba(255,255,255,.03)}
.lo-team.mine{border-color:rgba(255,197,61,.55); background:rgba(255,197,61,.07)}
.lo-team .peyebrow{text-align:center}
.lo-pair{display:flex; flex-direction:column; gap:8px}
.lo-pair .lo-seat{padding:12px 6px}
.lo-pair .lo-seat .pbtn{min-height:36px}
@media (max-width:520px){ .lo-teams{grid-template-columns:minmax(0,1fr)} .lo-teams .lo-vs{text-align:center} .lo-pair{flex-direction:row} .lo-pair .lo-seat{flex:1; min-width:0} }

@keyframes lo-in{from{opacity:0; translate:0 10px}}
@keyframes lo-seat{from{opacity:0; scale:.8}}
@keyframes lo-pulse{50%{opacity:.45}}
@keyframes lo-spin{to{rotate:360deg}}
@media (max-width:420px){ .lo-tabs button small{display:none} .lo-seat{padding:12px 4px} }
@media (max-width:520px){ .phdr-item[data-id="coins"]{display:none} }

/* частна маса: създаване и покана */
.lo-priv{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.lo-priv .ph3{margin:2px 0 4px}
.lo-priv p{margin:0}
.lo-fs{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.lo-fs legend{font-weight:600; margin-bottom:6px; padding:0}
.lo-opts{display:flex; flex-wrap:wrap; gap:8px}
.lo-opts .pchip{min-height:40px; padding:6px 14px; cursor:pointer; font-size:14px}
.lo-link{display:flex; gap:8px; width:100%; max-width:460px}
.lo-link .pinput{flex:1; min-width:0; font-size:13px; padding:8px 10px}
.lo-idle{margin:0; font-size:13px}

/* Игрите: „Срещу компютъра“ (голямата карта) и „Играй онлайн“ */
#hubApp .cta[data-k]{position:relative; margin-top:12px}
#hubApp .cta[data-k]::before{content:attr(data-k); position:absolute; top:-11px; left:18px; padding:3px 10px; border-radius:99px; background:var(--night2, #111b44); border:1px solid var(--gold, #ffc53d); color:var(--gold, #ffc53d); font:700 11px/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
#hubApp .lbonline{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:58px; margin-top:10px; padding:10px 18px; border-radius:20px; border:2px solid var(--gold, #ffc53d); background:rgba(255,197,61,.08); color:var(--paper, #fffdf7); cursor:pointer; font:inherit; text-align:left; transition:background .2s, transform .15s}
#hubApp .lbonline:hover{background:rgba(255,197,61,.16)}
#hubApp .lbonline:active{transform:translateY(2px)}
#hubApp .lbonline:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
#hubApp .lbonline .i{width:28px; height:28px; color:var(--gold, #ffc53d); flex:0 0 auto}
#hubApp .lbonline span{display:flex; flex-direction:column; gap:1px}
#hubApp .lbonline b{font:400 clamp(18px,4.6vw,22px) var(--display)}
#hubApp .lbonline small{color:var(--soft, #aab6e4); font-size:13px}

/* търсене на противник */
.lo-mm{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:6px 0 2px}
.lo-mm p{margin:4px 0 10px}
.lo-mm-t{font:700 18px var(--num); font-variant-numeric:tabular-nums}
.lo-mm-spin{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:rgba(255,197,61,.12); color:var(--paccent); box-shadow:0 0 0 0 rgba(255,197,61,.45); animation:lo-mm-pulse 1.6s ease-out infinite}
.lo-mm-spin .pi{width:34px; height:34px}
@keyframes lo-mm-pulse{70%{box-shadow:0 0 0 18px rgba(255,197,61,0)} 100%{box-shadow:0 0 0 0 rgba(255,197,61,0)}}
@media (prefers-reduced-motion:reduce){ .lo-mm-spin{animation:none} }
.lo-wbtns{display:flex; flex-wrap:wrap; gap:8px}