/* Oddiy oq-qora dizayn. Dizayner keyin shu faylni almashtiradi.
   Hamma o'lchamlar 1080x1920 (vertikal telefon) ekran uchun; oyna kichik bo'lsa o'zi kichrayadi. */
:root { --bg:#000; --fg:#fff; --dim:#8a8a8a; --red:#ff5a5a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:#111; color:var(--fg);
  font-family: system-ui, Arial, sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--dim); font-size:26px; }

#viewport { position:fixed; inset:0; }
#stage { position:absolute; left:50%; top:50%; width:1080px; height:1920px;
  background:var(--bg); border:6px solid #fff; overflow:hidden; transform-origin:center center;
  transform:translate(-50%,-50%); }

/* kirish */
.screen { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:760px;
  display:flex; flex-direction:column; gap:14px; }
h1 { margin:0 0 10px; font-size:64px; font-weight:600; letter-spacing:2px; text-align:center; }
label { color:var(--dim); font-size:26px; margin-top:6px; }
input, select { background:#000; color:#fff; border:2px solid #fff; padding:16px; font-size:30px; border-radius:8px; }
button { background:#000; color:#fff; border:2px solid #fff; padding:24px 32px; font-size:38px; border-radius:8px; cursor:pointer; }
button:disabled { opacity:.3; cursor:default; }
button:active:not(:disabled) { background:#fff; color:#000; }
.row { display:flex; gap:14px; }
.row button { flex:1; }
.msg { color:var(--red); min-height:34px; font-size:26px; }
#lobbyInfo { font-size:28px; }

/* stol */
#table { position:absolute; inset:0; }
#timerWrap { display:none; position:absolute; left:0; right:0; top:0; height:10px; background:#222; }
#timerBar { height:100%; width:0; background:#fff; }
#hintsLabel { position:absolute; left:24px; top:30px; display:flex; align-items:center; gap:12px; margin:0; font-size:32px; }
#hintsLabel input { width:40px; height:40px; padding:0; }

#arrow { position:absolute; left:540px; top:780px; width:672px; height:672px; margin:-336px 0 0 -336px;
  fill:rgba(255,255,255,.3); stroke:rgba(255,255,255,.85); stroke-width:4; stroke-linejoin:round;
  transition:transform .6s ease; pointer-events:none; }
#arrow.mine { fill:rgba(255,255,255,.55); }

#seats { position:absolute; inset:0; pointer-events:none; }
.seat { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; }
.seat.out { opacity:.35; }
/* kartalar yelpig'ich bo'lib, profil to'rtburchagi orqasidan chiqib turadi */
.fan { position:relative; width:240px; height:100px; }
.fan i { position:absolute; left:50%; bottom:0; width:58px; height:84px; margin-left:-29px; border:2px solid #fff; border-radius:6px;
  transform-origin:50% 135%;
  background:repeating-linear-gradient(45deg,#000,#000 5px,#2a2a2a 5px,#2a2a2a 10px); }
.plate { position:relative; z-index:1; margin-top:-36px; min-width:150px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 20px 10px; border:2px solid var(--dim); border-radius:14px; background:#000; }
.seat.cur .plate { border-color:#fff; }
.ava { width:84px; height:84px; border:3px solid #fff; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:600; background:#111; overflow:hidden; flex:0 0 auto; }
.ava img { width:100%; height:100%; object-fit:cover; }
.plate .nm { font-size:28px; font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#center { position:absolute; left:540px; top:780px; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:50px; }
#deckBox { position:absolute; left:34px; top:780px; transform:translateY(-50%); }
#deckBox, #topBox, #chosenBox { display:flex; flex-direction:column; align-items:center; gap:8px; }
#chosenSuit { font-size:110px; line-height:1; }
#chosenSuit.red { color:var(--red); }
.cardback { width:120px; height:170px; border:3px solid #fff; border-radius:12px;
  background:repeating-linear-gradient(45deg,#000,#000 8px,#2a2a2a 8px,#2a2a2a 16px); }

.card { width:130px; height:184px; border:3px solid #fff; border-radius:12px; background:#111;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15;
  font-size:52px; font-weight:600; user-select:none; flex:0 0 auto; cursor:default; }
.card.red { color:var(--red); }
.card.big { width:180px; height:254px; font-size:76px; background:#fff; color:#000; cursor:default; }
.card.big.red { color:#d00; }
.card.playable { box-shadow:0 0 0 5px #fff; transform:translateY(-24px); cursor:pointer; }
.card.dim { filter:brightness(.55); }

#hint { position:absolute; left:0; right:0; top:1185px; text-align:center; font-size:36px; min-height:44px; }
#log { position:absolute; left:0; right:0; top:1250px; width:auto; text-align:center; color:var(--dim); font-size:26px; min-height:34px; }

/* mening kartalarim ham yelpig'ich: profil to'rtburchagi orqasidan chiqib turadi */
/* mening kartalarim ham yelpig'ich bo'lib profil to'rtburchagi orqasidan chiqib turadi */
#hand { position:absolute; left:0; right:0; bottom:345px; height:280px; }
#hand .fancard { position:absolute; left:50%; bottom:0; margin-left:-65px; margin-top:0;
  align-items:flex-start; justify-content:flex-start; padding:8px 0 0 12px; font-size:46px;
  transform-origin:50% 220%; transform:rotate(var(--a,0deg)) translateY(var(--lift,0px)); transition:transform .15s; }
#hand .fancard .s { margin-top:-6px; }
#hand .fancard.playable { --lift:-36px; }

#myRow { z-index:3; position:absolute; left:50%; bottom:215px; transform:translateX(-50%); display:flex; align-items:center; gap:26px; }
#myName { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:170px;
  padding:12px 20px 10px; border:2px solid var(--dim); border-radius:16px; background:#000; }
#myName.turn { border-color:#fff; }
#myName .ava { width:100px; height:100px; font-size:54px; }
#myName .nm { font-size:30px; font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini { width:150px; padding:14px 8px; border:2px solid var(--dim); border-radius:14px; background:#000; text-align:center; }
.mini .v { font-size:54px; font-weight:600; line-height:1.1; }
.mini .l { font-size:24px; color:var(--dim); margin-top:4px; }

#buttons { position:absolute; left:30px; right:30px; bottom:30px; display:flex; flex-direction:row; gap:20px; }
#buttons button { flex:1; height:160px; padding:0 10px; font-size:52px; font-weight:600; border-radius:20px; border-width:4px; }

/* oynalar */
.modal { position:absolute; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:5; }
.modal .box { background:#000; border:3px solid #fff; border-radius:16px; padding:36px 44px; min-width:620px; text-align:center; font-size:38px; }
#suitBtns { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:20px; margin-top:24px; }
#suitBtns button { font-size:80px; padding:10px 30px; }
#suitBtns button.red { color:var(--red); }
.table { width:100%; border-collapse:collapse; margin:20px 0; font-size:34px; }
.table td { border-bottom:1px solid #333; padding:10px 8px; }
.table td:last-child { text-align:right; }
#deckCount, #chosenBox .muted { white-space:nowrap; }

#flagBtn { position:absolute; right:20px; top:20px; display:flex; align-items:center; gap:12px; padding:14px 24px; font-size:34px; z-index:2; }

.ring { position:absolute; left:-8px; top:-8px; pointer-events:none; overflow:visible; }
.ring rect { fill:none; stroke:#fff; stroke-width:8; }

#readyBtn, #roundReadyBtn { font-size:46px; font-weight:600; padding:30px 20px; border-width:4px; }

/* kutish rejimi */
#waitTools { position: absolute; left: 24px; top: 90px; display: flex; gap: 14px; z-index: 5; }
#waitTools select, #waitTools button { font-size: 34px; padding: 14px 18px; background: #000; color: #fff; border: 2px solid #fff; border-radius: 12px; }
.plate, #myName { position: relative; }
.chk { position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: #000; font-size: 38px; font-weight: bold; display: flex; align-items: center; justify-content: center; z-index: 3; }

.flag { position: absolute; left: 50%; top: -62px; margin-left: -35px; z-index: 4; }
.finfo { font-size: 30px; white-space: nowrap; text-align: center; margin-top: 6px; }
#myName { position: relative; }


.iconbtn { position: absolute; right: 24px; width: 100px; height: 100px; padding: 0; display: flex; align-items: center; justify-content: center; z-index: 5; background: #000; color: #fff; border: 3px solid #fff; border-radius: 16px; }
#spkBtn { top: 110px; }
#micBtn { top: 230px; }
.iconbtn.on { background: #fff; color: #000; }
.iconbtn .slash { stroke: currentColor; }
.iconbtn.on .slash { display: none; }

/* ===== Ranglar: ko'zni charchatmaydigan yashil stol, krem kartalar ===== */
:root { --bg:#1b4d3e; --fg:#f4efe0; --dim:#7fa596; --red:#c62828; }
#stage { background: radial-gradient(ellipse at 50% 42%, #2a6b57 0%, #1b4d3e 55%, #123529 100%); border-color: #d9c27a; }
body, html { background:#0c2219; }
input, select, button, #waitTools select, #waitTools button { background:#14382d; color:#f4efe0; border-color:#d9c27a; }
button:active:not(:disabled) { background:#d9c27a; color:#14382d; }
.seat .plate, #myName, .mini { background:#14382d; border-color:#4f8a74; }
.seat.cur .plate, #myName.turn { border-color:#f0d27a; }
.ava { background:#0f2d24; border-color:#d9c27a; }
.card, .card.big { background:#f6f0e0; color:#1d1d1d; border-color:#bfae7a; box-shadow:0 3px 8px rgba(0,0,0,.45); }
.card.red, .card.big.red { color:#c62828; }
.card.playable { box-shadow:0 0 0 6px #f0d27a, 0 3px 8px rgba(0,0,0,.45); }
.card.dim { filter:brightness(.7); }
.fan i, .cardback { border-color:#f4efe0; background:repeating-linear-gradient(45deg,#1f3f8f,#1f3f8f 6px,#2d56b8 6px,#2d56b8 12px); }
.ring rect { stroke:#f0d27a; }
.chk { background:#f0d27a; color:#14382d; }
.modal .box { background:#14382d; border-color:#d9c27a; }
.iconbtn { background:#14382d; color:#f4efe0; border-color:#d9c27a; }
.iconbtn.on { background:#f0d27a; color:#14382d; }
.table td { border-bottom-color:#2f6a56; }
#buttons button:disabled { opacity:.45; }

/* ===== Kattaroq kartalar ===== */
#hand .fancard { width:190px; height:268px; margin-left:-95px; font-size:68px; padding:10px 0 0 16px; border-radius:16px; }
#hand .fancard .s { margin-top:-8px; }
#hand { bottom:330px; }
.card.big { width:240px; height:340px; font-size:100px; }
.fan { width:320px; height:130px; }
.fan i { width:84px; height:120px; margin-left:-42px; border-radius:8px; }
.plate { margin-top:-50px; }
.cardback { width:150px; height:212px; }

/* ===== Yana kattaroq: qo'ldagi kartalar 2x, yarmi ko'rinadi; o'rtadagi karta ham katta ===== */
#hand { bottom:230px; height:420px; }
#hand .fancard { width:260px; height:368px; margin-left:-130px; font-size:92px; padding:12px 0 0 20px; border-radius:20px; }
.card.big { width:300px; height:424px; font-size:130px; }
#hint { top:1120px; }
#log { top:1185px; }

/* ===== Qo'ldagi kartalar yana katta, o'rtadagi kichikroq, chegaralar yumshoq ===== */
#hand .fancard { width:320px; height:452px; margin-left:-160px; font-size:112px; padding:14px 0 0 24px; border-radius:28px; }
.card.big { width:240px; height:340px; font-size:104px; }
.card, .card.big { border:2px solid rgba(191,174,122,.55); border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.card.playable { box-shadow:0 0 0 4px rgba(240,210,122,.85), 0 6px 16px rgba(0,0,0,.35); }
.fan i, .cardback { border:2px solid rgba(244,239,224,.6); border-radius:12px; }
#hint { top:1050px; }
#log { top:1115px; }
#hand .fancard { width:300px; height:424px; margin-left:-150px; font-size:104px; }
#hand { height:520px; }
#hand .fancard { width:360px; height:509px; margin-left:-180px; font-size:124px; padding:16px 0 0 28px; }

/* koloda: faqat son, kartaning ustida */
#deckBox { position:absolute; }
#deckCount { position:absolute; left:0; top:0; width:100%; height:212px; display:flex; align-items:center; justify-content:center;
  font-size:84px; font-weight:700; color:#f4efe0; text-shadow:0 2px 6px rgba(0,0,0,.7); }

/* raqamlar (J Q 10 6 7 ...) hech qachon yopilib qolmasin: qo'l yuqoriroq, ko'rsatkich kartaning yuqori chetida */
#hand { bottom:330px; }
#hand .fancard { padding:10px 0 0 18px; line-height:1; }
#hand .fancard .s { margin-top:0; }
#hint { top:985px; }
#log { top:1040px; }

/* qo'l kartalari 1.5x: pastga siljitilgan, tugmalar orqasiga kirib turadi */
#hand { bottom:40px; height:800px; }
#hand .fancard { padding:10px 0 0 14px; }
#hint { top:960px; }
#log { top:1015px; }
#buttons button:disabled { opacity:1; background:#0f2d24; color:#6f9a8a; border-color:#3d6f5c; }

/* qo'l: ozgina yoyilgan, enli; pastki qismi profil va tugmalar orqasida */
#hand { bottom:200px; height:600px; }
#hand .fancard { transform-origin:50% 100%; transform:translateX(var(--x,0px)) translateY(calc(var(--y,0px) + var(--lift,0px))) rotate(var(--a,0deg)); padding:10px 0 0 16px; }
#hand .fancard.playable { --lift:-40px; }

/* ===== Yangi joylashuv: pastki panel, raqiblarning kartalari avatar tagida, egri strelkalar ===== */
#dirArrows { position:absolute; left:0; top:0; width:1080px; height:1920px; pointer-events:none; }
#dirArrows path { fill:none; stroke:rgba(244,239,224,.35); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
#arrow { opacity:.4; }
#bottomBar { position:absolute; left:0; right:0; bottom:0; height:450px; background:linear-gradient(#183f33,#0f2d24); border-radius:56px 56px 0 0; border-top:3px solid #d9c27a; z-index:2; box-shadow:0 -10px 30px rgba(0,0,0,.35); }
#myRow { z-index:3; bottom:225px; gap:60px; }
#myName, .mini { background:transparent; border:none; }
#myName.turn .ava { border-color:#f0d27a; box-shadow:0 0 0 5px rgba(240,210,122,.6); }
.mini { width:190px; padding:0; }
.mini .v { font-size:86px; font-weight:700; }
.mini .l { font-size:28px; color:#8fb5a5; }
#buttons { z-index:3; }
#topCard { transform:rotate(-10deg); }
.seat { flex-direction:column-reverse; }
.fan { height:120px; margin-top:-64px; }
.fan i { top:0; bottom:auto; transform-origin:50% -40%; }
.plate { margin-top:0; }

/* ===== Kirish ekrani: kattaroq, yumaloq burchakli ===== */
.screen { width:900px; gap:22px; }
h1 { font-size:96px; margin-bottom:30px; }
#lobby label { font-size:36px; margin-top:12px; }
#lobby input { font-size:46px; padding:30px 34px; border-radius:28px; border-width:3px; }
#joinBtn { font-size:60px; font-weight:600; padding:46px 20px; border-radius:32px; border-width:4px; margin-top:24px; background:#d9c27a; color:#14382d; border-color:#d9c27a; }
#joinBtn:active:not(:disabled) { background:#f0d27a; }
#lobbyMsg { font-size:36px; min-height:50px; text-align:center; color:#f4efe0; }
#reloadBtn { font-size:44px; padding:30px 20px; border-radius:28px; border-width:3px; margin-top:10px; }

/* kirish ekrani: biroz kichikroq */
.screen { width:720px; gap:16px; }
h1 { font-size:76px; margin-bottom:20px; }
#lobby label { font-size:28px; margin-top:6px; }
#lobby input { font-size:36px; padding:20px 26px; border-radius:22px; }
#joinBtn { font-size:46px; padding:30px 20px; border-radius:26px; margin-top:16px; }
#lobbyMsg { font-size:28px; min-height:40px; }
#reloadBtn { font-size:34px; padding:20px 20px; border-radius:22px; margin-top:6px; }

#hand { z-index:1; }

.pile { position:relative; width:240px; height:340px; transform:none !important; }

/* o'ynab bo'lmaydigan kartalar: shaffof emas, qoraytirilgan krem */
.card.dim { filter:none; background:#cfc8b2; }
#hand .fancard { transition:transform .45s ease; }

/* ===== Dizayn v3: yashil stol, krem panel, kvadrat rasm ramkalari ===== */
#stage { background:radial-gradient(ellipse at 50% 40%,#3b8a5a 0%,#2a6e47 55%,#1d5236 100%); border:6px solid #d9c27a; border-radius:36px; }
#stage::after { content:''; position:absolute; inset:18px; border:3px solid rgba(217,194,122,.5); border-radius:26px; pointer-events:none; z-index:1; }
#table::before { content:'\2660'; position:absolute; left:50%; top:790px; transform:translate(-50%,-50%); font-size:720px; line-height:1; color:rgba(255,255,255,.05); pointer-events:none; }
#hintsLabel, #waitTools select, #waitTools button, #flagBtn, .iconbtn { background:linear-gradient(#f7f0dc,#e8dcb8); color:#1d4a35; border:3px solid #d9c27a; border-radius:18px; box-shadow:0 4px 10px rgba(0,0,0,.25); }
#hintsLabel { padding:10px 22px; font-weight:600; }
#flagBtn svg path { stroke:#1d4a35; }
#flagBtn svg path:last-child { fill:#1d4a35; }
.iconbtn.on { background:linear-gradient(#2f8a5a,#1f6a44); color:#f7f0dc; border-color:#f0d27a; }
.fan { display:none; }
.plate { width:176px; height:176px; min-width:0; padding:0; margin:0; display:block; position:relative; background:#1d4a35; border:4px solid #f1e6c0; border-radius:20px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.plate .ava { width:100%; height:100%; border:none; border-radius:16px; font-size:96px; color:#fff; }
.plate .nm, #myName .nm { position:absolute; left:0; right:0; bottom:0; max-width:none; text-align:center; background:rgba(12,40,28,.78); color:#fff; padding:8px 4px; font-size:28px; border-radius:0 0 16px 16px; }
.seat.cur .plate, #myName.turn { border-color:#f0d27a; }
.cnt { position:absolute; right:-18px; bottom:-18px; width:60px; height:60px; border-radius:50%; background:linear-gradient(#f7f0dc,#e8dcb8); color:#1d4a35; border:3px solid #d9c27a; font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:3; }
#myName { width:176px; height:176px; min-width:0; padding:0; display:block; position:relative; background:#1d4a35; border:4px solid #f1e6c0; border-radius:20px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
#myName .ava { width:100%; height:100%; border:none; border-radius:16px; font-size:96px; color:#fff; }
#myName.turn .ava { box-shadow:none; }
#bottomBar { background:linear-gradient(#f6efd9,#e9dfbd); border-top:4px solid #d9c27a; box-shadow:0 -8px 24px rgba(0,0,0,.35); }
.mini { background:linear-gradient(#fffaf0,#efe5c8); border:3px solid #e3d7ac; border-radius:20px; padding:16px 8px; width:210px; }
.mini .v { color:#1d4a35; font-size:84px; }
.mini .l { color:#4a7a62; }
#buttons button { background:linear-gradient(#2f7a52,#1f5a3a); color:#f7f0dc; border:4px solid #d9c27a; border-radius:24px; box-shadow:0 4px 10px rgba(0,0,0,.3); }
#buttons button:disabled { background:#c9c4ae; color:#8a8a78; border-color:#d8cfae; opacity:1; }
#dirArrows path { stroke:rgba(255,255,255,.5); }
.cardback, .fan i { background:repeating-linear-gradient(45deg,#b32424,#b32424 8px,#8f1a1a 8px,#8f1a1a 16px); border:4px solid #f4ecd2; border-radius:14px; }
#deckBox .cardback { box-shadow:5px 5px 0 #e9dfbd,10px 10px 0 #b9ad8a; }
.ring rect { stroke:#f0d27a; stroke-width:10; }
#waitTools { top:125px; }

/* ===== Dizayn v4: haqiqiy karta ko'rinishi (dbk), chiroyli fon, yashil/sariq tugmalar ===== */
.card, .card.big { container-type:inline-size; position:relative; background:#fbfbf7; color:#1b1b1b; border:2px solid #cfcfc6; border-radius:5cqw; }
#hand .fancard { border-radius:28px; }
.card.dim { background:#d9d9d1; }
.face { position:absolute; inset:0; font-family:Georgia,"Times New Roman",serif; pointer-events:none; }
.idx { position:absolute; left:5cqw; top:3cqw; display:flex; flex-direction:column; align-items:center; line-height:1; font-weight:700; }
.idx b { font-size:21cqw; letter-spacing:-1.2cqw; }
.idx span { font-size:17cqw; margin-top:1cqw; }
.idx.br { left:auto; top:auto; right:5cqw; bottom:3cqw; transform:rotate(180deg); }
.area { position:absolute; left:20cqw; right:20cqw; top:8cqw; bottom:8cqw; }
.pip { position:absolute; font-style:normal; font-size:25cqw; line-height:1; transform:translate(-50%,-50%); }
.pip.flip { transform:translate(-50%,-50%) rotate(180deg); }
.pip.ace { font-size:62cqw; }
.court { position:absolute; inset:0; width:100%; height:100%; }
.cs { position:absolute; font-style:normal; font-size:15cqw; line-height:1; left:-1cqw; top:2cqw; }
.cs.b { left:auto; top:auto; right:-1cqw; bottom:2cqw; transform:rotate(180deg); }
.cardback, .fan i { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%22%20height%3D%22140%22%20fill%3D%22%23b32424%22/%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2290%22%20height%3D%22130%22%20fill%3D%22none%22%20stroke%3D%22%23f4ecd2%22%20stroke-width%3D%222.5%22/%3E%3Cg%20stroke%3D%22%23f4ecd2%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2020%20L100%20120%20M0%2050%20L100%20150%20M0%20-10%20L100%2090%20M0%2080%20L60%20140%20M0%20110%20L30%20140%22/%3E%3Cpath%20d%3D%22M100%2020%20L0%20120%20M100%2050%20L0%20150%20M100%20-10%20L0%2090%20M100%2080%20L40%20140%20M100%20110%20L70%20140%22/%3E%3C/g%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2270%22%20rx%3D%2230%22%20ry%3D%2240%22%20fill%3D%22%238f1a1a%22%20stroke%3D%22%23f4ecd2%22%20stroke-width%3D%222%22/%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2270%22%20rx%3D%2224%22%20ry%3D%2234%22%20fill%3D%22none%22%20stroke%3D%22%23f4ecd2%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%221%22/%3E%3Ctext%20x%3D%2250%22%20y%3D%2286%22%20text-anchor%3D%22middle%22%20font-size%3D%2246%22%20fill%3D%22%23f4ecd2%22%20font-family%3D%22serif%22%3E%26%239824%3B%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%2222%22%20font-size%3D%2210%22%20fill%3D%22%23f4ecd2%22%20font-family%3D%22serif%22%3E%26%239830%3B%3C/text%3E%3Ctext%20x%3D%2282%22%20y%3D%2222%22%20text-anchor%3D%22end%22%20font-size%3D%2210%22%20fill%3D%22%23f4ecd2%22%20font-family%3D%22serif%22%3E%26%239827%3B%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%22126%22%20font-size%3D%2210%22%20fill%3D%22%23f4ecd2%22%20font-family%3D%22serif%22%3E%26%239829%3B%3C/text%3E%3Ctext%20x%3D%2282%22%20y%3D%22126%22%20text-anchor%3D%22end%22%20font-size%3D%2210%22%20fill%3D%22%23f4ecd2%22%20font-family%3D%22serif%22%3E%26%239824%3B%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat; border:3px solid #f4ecd2; border-radius:14px; }
#stage { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-opacity%3D%22.055%22%20font-family%3D%22serif%22%20text-anchor%3D%22middle%22%3E%3Ctext%20x%3D%2245%22%20y%3D%2262%22%20font-size%3D%2246%22%3E%26%239824%3B%3C/text%3E%3Ctext%20x%3D%22135%22%20y%3D%2262%22%20font-size%3D%2246%22%3E%26%239829%3B%3C/text%3E%3Ctext%20x%3D%2245%22%20y%3D%22152%22%20font-size%3D%2246%22%3E%26%239830%3B%3C/text%3E%3Ctext%20x%3D%22135%22%20y%3D%22152%22%20font-size%3D%2246%22%3E%26%239827%3B%3C/text%3E%3C/g%3E%3Cpath%20d%3D%22M90%200%20L180%2090%20L90%20180%20L0%2090Z%22%20fill%3D%22none%22%20stroke%3D%22%23d9c27a%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2290%22%20r%3D%225%22%20fill%3D%22%23d9c27a%22%20fill-opacity%3D%22.15%22/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 40%,#3b8a5a 0%,#2a6e47 55%,#1d5236 100%); }
#table::before { display:none; }
.plate .nm, #myName .nm { background:none; padding:0 4px 8px; font-size:30px; font-weight:700; text-shadow:0 0 6px #000,0 0 3px #000,0 2px 4px #000,1px 1px 2px #000; }
.plate .ava, #myName .ava { text-shadow:0 2px 8px rgba(0,0,0,.45); }
#hintsChk { -webkit-appearance:none; appearance:none; width:44px; height:44px; padding:0; border-radius:12px; border:3px solid #2f8a5a; background:#fff; display:inline-grid; place-items:center; cursor:pointer; }
#hintsChk:checked { background:linear-gradient(#37a56b,#237a4e); }
#hintsChk:checked::after { content:'\2713'; color:#fff; font-size:34px; font-weight:700; line-height:1; }
.iconbtn { background:linear-gradient(#2f8a5a,#1f6a44); color:#f7f0dc; border-color:#d9c27a; }
.iconbtn.on { background:linear-gradient(#ffe27a,#f0b92a); color:#4a3200; border-color:#fff3b8; }
#deckCount { left:50%; top:50%; width:auto; height:auto; transform:translate(-50%,-50%); padding:4px 20px; background:rgba(20,56,45,.88); border:3px solid #d9c27a; border-radius:30px; font-size:60px; text-shadow:none; }
/* karta chegaralari: haqiqiy kartadagidek yupqa och kulrang, yumshoq soya */
.card, .card.big, #hand .fancard { border:1.5px solid #d3d3cc; border-radius:4.5cqw; box-shadow:0 2px 6px rgba(0,0,0,.28); }
.card.playable { box-shadow:0 0 0 5px rgba(240,210,122,.9), 0 2px 6px rgba(0,0,0,.28); }
.cardback, .fan i { border:2.5px solid #fbfbf7; border-radius:10px; }

/* ===== Shrift va tugma ranglari (rasmdagidek) ===== */
html, body, button, input, select, textarea { font-family:'Marcellus', Georgia, 'Times New Roman', serif !important; letter-spacing:.3px; }
.face, .idx { font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important; }
.mini .v, .cnt, #deckCount, .plate .ava, #myName .ava, h1 { font-family:'Playfair Display', Georgia, serif !important; }
#buttons button, #joinBtn { font-weight:400; letter-spacing:1px; }
.mini .l, #hintsLabel, #flagBtn { letter-spacing:.8px; }
.iconbtn.on { background:linear-gradient(#f7f0dc,#e8dcb8); color:#1d4a35; border-color:#d9c27a; box-shadow:0 0 0 3px rgba(240,210,122,.55), 0 4px 10px rgba(0,0,0,.25); }
/* burchaklar: haqiqiy kartadagidek ozgina yumaloq */
.card, .card.big { border-radius:12px; }
#hand .fancard { border-radius:18px; }

/* ===== Rasmga yaqinlashtirish: kattaroq ramkalar, yon tomondagi soni plitkasi, bezaklar ===== */
#decor { position:absolute; left:0; top:0; width:1080px; height:1920px; opacity:.28; pointer-events:none; }
.plate { width:208px; height:208px; }
.plate .ava { font-size:110px; }
.cnt { top:14px; bottom:auto; width:64px; height:150px; border-radius:16px; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-bottom:8px; }
.cnt.r { right:-72px; left:auto; }
.cnt.l { left:-72px; right:auto; }
.cnt u { position:absolute; left:8px; bottom:8px; width:10px; background:linear-gradient(#5bd18a,#2f9a5a); border-radius:6px; text-decoration:none; opacity:.9; }
.cnt b { position:relative; font-size:36px; margin-left:12px; }
#hint::before, #hint::after { content:'\2756'; color:#d9c27a; margin:0 14px; font-size:30px; }
#hint:empty::before, #hint:empty::after { content:''; }

/* karta shrifti: aniqroq va kattaroq */
.face, .idx { font-family:'Merriweather', Georgia, 'Times New Roman', serif !important; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; font-variant-emoji:text; }
.idx b { font-size:20cqw; letter-spacing:-.5cqw; font-weight:900; }
.idx span { font-size:19cqw; margin-top:.5cqw; font-weight:700; }
.pip { font-size:27cqw; font-weight:700; }
.pip.ace { font-size:66cqw; }

.cimg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.card.big { height:366px !important; }
#hand { bottom:130px; }

/* ===== v5: kichikroq pastki panel, kichik o'yinchi kublari, raqib kartalari yelpig'ichi, katta qo'l, surib tashlash ===== */
#bottomBar { height:300px; border-radius:44px 44px 0 0; }
#buttons { bottom:24px; }
#buttons button { height:118px; font-size:44px; }
#myRow { bottom:150px; gap:44px; }
#myName, #myName .ava { width:132px; height:132px; }
#myName { border-width:3px; border-radius:16px; }
#myName .ava { font-size:70px; border-radius:12px; }
.plate { width:132px; height:132px; border-width:3px; border-radius:16px; }
.plate .ava { font-size:72px; border-radius:12px; }
.plate .nm, #myName .nm { font-size:22px; padding:0 4px 5px; }
.mini { width:150px; padding:10px 6px; border-radius:16px; }
.mini .v { font-size:60px; }
.mini .l { font-size:22px; }
.chk { width:44px; height:44px; font-size:30px; right:-12px; top:-12px; }
.cnt { display:none !important; }
/* raqibning qolgan kartalari: plitka tagida kichik yelpig'ich */
.seat { flex-direction:column-reverse; }
.fan { display:block !important; position:relative; width:220px; height:92px; margin-top:-26px; }
.fan i { position:absolute; top:0; bottom:auto; left:50%; width:54px; height:78px; margin-left:-27px; transform-origin:50% 160%; border-width:2px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.4); }
#hint { top:1010px; }
#log { top:1062px; }
#hand { z-index:1; }
#hand .fancard { touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
  transform:translateX(calc(var(--x,0px) + var(--dx,0px))) translateY(calc(var(--y,0px) + var(--lift,0px) + var(--dy,0px))) rotate(var(--a,0deg)); }
#hand .fancard.dragging { transition:none !important; cursor:grabbing; z-index:60 !important; --a:0deg; box-shadow:0 14px 34px rgba(0,0,0,.5); }
#hand .fancard.pulled { box-shadow:0 0 0 6px rgba(240,210,122,.95), 0 14px 34px rgba(0,0,0,.5); }
#topBox.magnet #topCard, #topBox.magnet:not(:has(#topCard.pile)) { filter:drop-shadow(0 0 28px rgba(240,210,122,.95)); }
/* mast tanlash: qora mastlar qora, qizillari qizil (oq emas) */
#suitBtns button { background:#fbfbf7; color:#111; border:3px solid #d9c27a; border-radius:20px; font-family:Georgia,'Times New Roman',serif !important; font-size:92px; line-height:1; padding:14px 30px; }
#suitBtns button.red { color:#bc1c26; }
.modal { background:rgba(0,0,0,.9); }
#chosenSuit { background:#fbfbf7; color:#111; border:3px solid #d9c27a; border-radius:22px; padding:6px 26px 12px; font-family:Georgia,'Times New Roman',serif !important; }
#chosenSuit.red { color:#bc1c26; }
/* koloda chap yuqorida, chap o'yinchining ustini yopmasin */
#deckBox { left:34px; top:440px; }
/* v5b: o'rtadagi karta kattaroq */
.card.big { width:290px; height:443px !important; }
.pile { width:290px; height:443px; }
#hint { top:1040px; }
#log { top:1092px; }
/* raqib kartalari: to'g'ri, yonma-yon qator (qiyshaymaydi) */
.fan { height:92px; margin-top:-26px; }
.fan i { transform-origin:50% 50%; }
/* qo'l: aylanish tepadagi nuqta atrofida, chekkadan chiqib ketmasin */
#hand .fancard { transform-origin:50% 0%; }
/* raqib kartalari yelpig'ichi: ////||||\\\\ (tepadagi nuqta atrofida ochiladi) */
.fan i { transform-origin:50% -150%; }
#table .fan, #hand { transition:opacity .15s; }
#table.dealing .fan, #table.dealing #hand { opacity:0; }
.fan { margin-top:-6px; height:96px; }

/* ===== v6: o'lchamlar namunadagi o'yinga moslandi ===== */
/* o'rtadagi karta ~0.73 x qo'ldagi karta */
.card.big { width:330px; height:504px !important; }
.pile { width:330px; height:504px; }
#hint { top:1065px; }
#log { top:1118px; }
/* pastki panel past va past: karta tagida */
#bottomBar { height:250px; border-radius:40px 40px 0 0; }
#buttons { bottom:14px; }
#buttons button { height:84px; font-size:38px; border-radius:20px; border-width:3px; }
#myRow { bottom:112px; gap:40px; }
#myName, #myName .ava { width:122px; height:122px; }
#myName .ava { font-size:64px; }
.mini { width:140px; padding:6px 6px; }
.mini .v { font-size:54px; }
.mini .l { font-size:20px; }
/* o'yinchi kublari va raqib yelpig'ichi */
.plate { width:164px; height:164px; }
.plate .ava { font-size:88px; }
.plate .nm, #myName .nm { font-size:24px; }
.fan { width:240px; height:104px; margin-top:-12px; }
.fan i { width:62px; height:90px; margin-left:-31px; transform-origin:50% -120%; }
/* koloda: kattaroq, chapda; son tepasida */
.cardback { width:200px; height:284px; }
#deckBox { left:30px; top:470px; }
#deckCount { height:auto; }
/* koloda pastki o'ngda (maketdagidek), hint matniga tegmaydi */
#deckBox { left:auto; right:30px; top:1190px; }
#hint { top:1090px; font-size:32px; left:60px; right:290px; }
#log { top:1140px; }

/* ===== v7: yon tomondagi holat yozuvi + yengil ishlash uchun optimizatsiya ===== */
#sideInfo { position:absolute; left:720px; right:24px; top:540px; text-align:left; font-size:28px; line-height:1.25; color:rgba(255,255,255,.75); pointer-events:none; z-index:1; }
#sideInfo div { margin-bottom:10px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
/* kartalar rasm: container query va og'ir soya kerak emas */
.card, .card.big { container-type:normal; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.card.playable { box-shadow:0 0 0 5px rgba(240,210,122,.9); }
#hand .fancard { will-change:transform; backface-visibility:hidden; }
.cimg { image-rendering:auto; }
.ring rect { will-change:stroke-dashoffset; }
#stage { contain:layout paint; }
#decor, #dirArrows { will-change:auto; }

/* ===== v8: tugmalar o'ng tomonda (karta olish / pas / jazo), chapda profil va hisob ===== */
#buttons { left:auto; right:24px; bottom:14px; width:330px; flex-direction:column; gap:8px; }
#buttons button { flex:none; width:100%; height:68px; font-size:34px; border-radius:16px; border-width:3px; }
#myRow { left:24px; transform:none; bottom:62px; gap:22px; }
/* profil chapda, Hand/Total uning o'ng tomonida va kichikroq */
#myName { order:-1; }
#myRow { gap:16px; }
.mini { width:104px; padding:4px 4px; border-radius:14px; }
.mini .v { font-size:42px; }
.mini .l { font-size:18px; margin-top:0; }

/* ===== v9: koloda oldingi joyida (chapda), soni uning ostida ===== */
#deckBox { left:20px; right:auto; top:880px; transform:translateY(-50%); }
#deckCount { position:static; left:auto; top:auto; transform:none; width:auto; height:auto; padding:0; background:none; border:none; border-radius:0; font-size:48px; color:#f4efe0; text-shadow:0 2px 6px rgba(0,0,0,.7); }
#sideInfo { left:730px; top:830px; right:20px; }

/* v10: haqiqiy karta orqasi (dbk.webp) */
.cardback, .fan i { background:url(dbk.webp) center/100% 100% no-repeat !important; border:0 !important; border-radius:0 !important; box-shadow:none; }
.cardback { width:200px; height:305px; }
.fan i { width:62px; height:95px; margin-left:-31px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
#deckBox .cardback { filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35)); }
#sideInfo { top:915px; }

/* v11: kichik o'rta to'plam, bitta katta tugma, raund oxiri */
.pile { width:270px; height:412px; }
.card.big { width:270px; height:412px !important; }
#sideInfo { left:800px; right:10px; }
#buttons { left:24px; right:auto; bottom:36px; width:400px; flex-direction:column; }
#buttons button { height:150px; font-size:64px; border-radius:24px; border-width:4px; }
#buttons button#takeBtn { height:70px; font-size:32px; }
#myRow { left:450px; right:auto; bottom:62px; transform:none; }
#overlay .box, #overlayBox { min-width:0; width:980px; padding:30px 30px; font-size:42px; }
.endlist { margin:18px 0; }
.endrow { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #2f6a56; min-height:128px; }
.endname { width:190px; text-align:left; font-size:34px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.endcards { flex:1; display:flex; align-items:center; justify-content:flex-start; padding-left:40px; min-height:107px; font-size:60px; }
.ec { width:80px; height:122px; margin-left:-40px; flex:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.ec .cimg { width:100%; height:100%; display:block; }
.endpts { width:150px; text-align:right; display:flex; flex-direction:column; line-height:1.1; }
.endpts b { font-size:52px; }
.endpts small { font-size:26px; opacity:.7; }
.ec { position:relative; }
.ec { margin-left:var(--ov,-18px); } .endcards { padding-left:18px; }
#arrow { width:1000px; height:1000px; margin:-500px 0 0 -500px; opacity:1; fill:rgba(255,255,255,.16); stroke:none; }
#arrow.mine { fill:rgba(255,255,255,.26); }
#suitModal { background:rgba(0,0,0,.38); align-items:flex-start; padding-top:520px; }

/* v12: raqib kartalari - bitta chiziq + son */
.cnt { display:flex !important; top:10px; width:64px; height:150px; }
.fan { display:none !important; }
.cnt u { transition:height .4s ease; }

/* ===== v13: Figma dizayni (1080x1920): 5 o'rinli yoy, markazdagi profil, tekis pastki panel, ikonka tugmalar ===== */
html, body, button, input, select, textarea, .nm, .mini .l, #hint, #log, #sideInfo, #speakLabel { font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important; font-weight:700; }
/* ramka: sariq chiziq hamma narsa ustida (kartalar va panel ostida qolmaydi), burchaklari yumaloq */
#stage { border:0; border-radius:40px; }
#stage::after { content:''; position:absolute; inset:0; border:6px solid #d9c27a; border-radius:40px; pointer-events:none; z-index:50; }

/* pastki panel: devordan devorgacha tekis */
#bottomBar { left:0; right:0; height:246px; border-radius:0; border-top:4px solid #d9c27a; background:linear-gradient(#f6efd9,#e9dfbd); }
#buttons { left:45px; right:auto; bottom:38px; width:370px; flex-direction:column; gap:0; z-index:3; }
#buttons button { height:167px; font-size:50px; border-radius:22px; border-width:4px; white-space:nowrap; font-weight:700; letter-spacing:0; }

/* mening profilim markazda; Total / Hand uning o'ng yonida ustma-ust */
#myRow { left:440px; right:auto; bottom:23px; transform:none; display:grid; grid-template-columns:200px 101px; grid-template-rows:78px 78px; column-gap:16px; row-gap:12px; align-content:center; gap:12px 16px; z-index:3; }
#myName { order:0; grid-column:1; grid-row:1 / 3; width:200px; height:200px; border:10px solid #e9c96a; border-radius:30px; background:#14382d; }
#myName .ava { width:100%; height:100%; border-radius:20px; font-size:110px; }
#myName .nm { font-size:26px; padding:0 4px 8px; }
#myName.turn { border-color:#f7dc86; box-shadow:0 0 0 4px rgba(240,210,122,.45); }
#miniTotal { grid-column:2; grid-row:1; }
#miniHand { grid-column:2; grid-row:2; }
.mini { width:101px; height:78px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid #e3d7ac; border-radius:14px; background:linear-gradient(#fffaf0,#efe5c8); }
.mini .v { font-size:42px; line-height:1; color:#1d4a35; }
.mini .l { font-size:18px; margin-top:2px; color:#4a7a62; letter-spacing:0; }

/* raqiblar: tepada yoy, kartalar soni ostida //||\\ */
.seat { flex-direction:column; transform:translate(-50%,-79px); }
.plate { width:158px; height:158px; border-width:3px; border-radius:18px; }
.plate .ava { font-size:92px; border-radius:14px; }
.plate .nm { font-size:24px; }
.bars { margin-top:6px; height:30px; font-size:28px; line-height:30px; letter-spacing:3px; white-space:nowrap; color:rgba(214,245,226,.8); }
.cnt { display:none !important; }

/* mikrofon nuqtasi: bor = mikrofon yoqilgan, qizil yonsa = gapiryapti */
.mdot { position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%; background:#7d1a1a; border:3px solid #f1e6c0; box-sizing:border-box; z-index:4; display:none; }
#myName .mdot { top:-14px; right:-14px; }
.mdot.lit { background:#ff2d2d; box-shadow:0 0 12px 4px rgba(255,45,45,.85); animation:mdotPulse .5s ease-in-out infinite alternate; }
@keyframes mdotPulse { from { transform:scale(1); } to { transform:scale(1.25); } }

/* o'ng ustun: dinamik, mikrofon, yordam (hammasi 97x97 ikonka) */
.iconbtn { right:30px; width:97px; height:97px; border-radius:18px; }
#spkBtn { top:385px; } #micBtn { top:497px; } #helpBtn { top:609px; }
.iconbtn svg { width:52px; height:52px; }
#helpBtn span { font-size:64px; line-height:1; font-weight:700; }

/* markaz, koloda, yozuvlar (o'ngga tekislangan ustun) */
#center { top:850px; } #arrow { top:850px; }
#deckBox { left:32px; top:450px; transform:none; }
#sideInfo { left:auto; right:30px; width:330px; top:748px; text-align:right; font-size:26px; }
#hint { left:auto; right:30px; width:340px; top:890px; text-align:right; font-size:32px; }
#hint::before, #hint::after { content:none !important; }
#log { left:auto; right:30px; width:340px; top:975px; text-align:right; font-size:26px; }
#speakLabel { position:absolute; right:30px; width:340px; top:1070px; text-align:right; font-size:30px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6); z-index:2; pointer-events:none; }
#waitTools { left:24px; top:380px; }

/* bosiladigan hamma narsa bosilganda biroz kichrayadi */
button { transition:transform .12s ease, filter .12s ease; }
button:active:not(:disabled) { transform:scale(.93); filter:brightness(.92); }
button.iconbtn:active:not(:disabled) { background:linear-gradient(#2f8a5a,#1f6a44); color:#f7f0dc; }
button.iconbtn.on:active:not(:disabled) { background:linear-gradient(#f7f0dc,#e8dcb8); color:#1d4a35; }
#myName .ring { left:-18px; top:-18px; }
.chk { right:auto; left:-12px; }
#dirArrows { transform:translateY(45px); }

/* v13b: raqib kartalari haqiqiy karta orqasi bilan; mening profilim raqiblar bilan bir xil o'lcham (170) */
.bars { display:none; }
.fanr { position:relative; width:170px; height:92px; margin-top:4px; }
.fanr i { position:absolute; top:0; left:50%; width:46px; height:70px; margin-left:-23px; background:url(dbk.webp) center/100% 100% no-repeat; transform-origin:50% -70%; transform:rotate(var(--a,0deg)); filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.fcount { position:absolute; left:50%; bottom:0; transform:translateX(-50%); min-width:40px; height:34px; padding:0 10px; border-radius:17px; background:linear-gradient(#f7f0dc,#e8dcb8); color:#1d4a35; border:2px solid #d9c27a; font-size:22px; line-height:30px; text-align:center; z-index:2; }
.seat { transform:translate(-50%,-85px); }
.plate { width:170px; height:170px; }
.plate .ava { font-size:98px; }
#myRow { left:455px; grid-template-columns:170px 101px; bottom:38px; }
#myName { width:170px; height:170px; border-width:8px; }
#myName .ava { font-size:98px; border-radius:18px; }
#myName .ring { left:-16px; top:-16px; }
#myName .mdot { top:-12px; right:-12px; }
#waitTools { top:430px; }
.fanr { width:190px; height:112px; }
.fanr i { width:58px; height:88px; margin-left:-29px; transform-origin:50% -60%; }
.fcount { min-width:44px; height:36px; font-size:24px; line-height:32px; }
#spkBtn { top:440px; } #micBtn { top:552px; } #helpBtn { top:664px; }
#sideInfo { top:800px; font-size:24px; }
#hint { top:950px; font-size:28px; width:360px; }
#log { top:1080px; font-size:24px; }
#speakLabel { top:1150px; }

/* v13c: raqib kartalari profil tagidan chiqib turadi (~68% ko'rinadi), soni yozilmaydi; yordam = ptichka */
.fcount { display:none; }
.seat .plate { z-index:2; }
.fanr { z-index:1; margin-top:-30px; height:70px; }
.fanr i { top:0; }
#helpBtn svg { width:52px; height:52px; }
.fanr { margin-top:-36px; height:76px; width:200px; }
.fanr i { width:72px; height:110px; margin-left:-36px; transform-origin:50% -40%; }
/* v13d: raqib kartalari 1.2x, ismlar 1.2x */
.fanr { margin-top:-43px; height:91px; width:240px; }
.fanr i { width:86px; height:132px; margin-left:-43px; }
.plate .nm { font-size:29px; }
#myName .nm { font-size:31px; }

/* v13e: vaqt aylanasi 1.2x qalin; raqib profili meniki bilan bir xil (ramka, burchak, ism) */
.ring rect { stroke-width:12; }
.plate, #myName { width:170px; height:170px; border:8px solid #e9c96a; border-radius:26px; box-sizing:border-box; }
.plate .ava, #myName .ava { border-radius:18px; font-size:98px; }
.plate .nm, #myName .nm { font-size:31px; padding:0 4px 8px; }
.plate .ring, #myName .ring { left:-18px; top:-18px; }
.mdot { top:-12px; right:-12px; }
#myName .mdot { top:-12px; right:-12px; }
.seat.cur .plate { border-color:#f7dc86; }
.seat .plate { border-color:#e9c96a; }
.seat.cur .plate { border-color:#f7dc86; }

/* v14: yurish yo'nalishi — statik strelkalar olib tashlandi, aylanadigan strelka chiroyli */
#dirArrows { display:none; }
#arrow { fill:none; stroke:none; opacity:1; transition:transform .7s cubic-bezier(.5,.1,.2,1); }
#arrow .trk { fill:none; stroke:rgba(233,201,106,.22); stroke-width:6; stroke-dasharray:4 22; stroke-linecap:round; }
#arrow .trail { fill:none; stroke:rgba(247,220,134,.45); stroke-width:14; stroke-linecap:round; }
#arrow .head path { fill:url(#arrG); stroke:#fff3c4; stroke-width:3; stroke-linejoin:round; }
#arrow .head path.h2 { opacity:.55; }
#arrow .head { filter:drop-shadow(0 0 14px rgba(247,220,134,.75)); }
#arrow.mine .head { filter:drop-shadow(0 0 22px rgba(255,236,160,1)); }
#arrow.mine .trk { stroke:rgba(247,220,134,.45); }

/* v14b: ramka 4 tomonda bir xil; vaqt aylanasi ramka markaziga to'g'ri o'rnashadi */
.plate .ring, #myName .ring { left:-20px; top:-20px; }
#myName.turn { box-shadow:none; }
.plate, #myName { box-shadow:none; }
.plate .ring, #myName .ring { left:-25px; top:-25px; }
.ring rect { stroke:#fff3c4; }
.ring rect { stroke:#e5533d; }

/* v15: raqib kartalari 1.2x, o'z kartalarim va raqam/belgilar kattaroq */
.fanr { margin-top:-52px; height:109px; width:288px; }
.fanr i { width:103px; height:158px; margin-left:-51px; }
.idx b { font-size:27cqw; letter-spacing:-.8cqw; }
.idx span { font-size:23cqw; }
.idx { left:4cqw; top:2cqw; }
.idx.br { left:auto; top:auto; right:4cqw; bottom:2cqw; }

/* v16: raqib kartalarining 50% ko'rinadi; raqam/harf 1.4x */
.fanr { margin-top:-79px; height:79px; }
.idx b { font-size:38cqw; letter-spacing:-1.5cqw; }
.idx span { font-size:32cqw; }
.idx { left:3.5cqw; top:1.5cqw; }
.idx.br { left:auto; top:auto; right:3.5cqw; bottom:1.5cqw; }

#voiceDbg { position:absolute; right:30px; width:380px; top:1230px; text-align:right; font-size:20px; line-height:1.3; white-space:pre-line; color:#cfe8d8; opacity:.85; z-index:2; pointer-events:none; font-family:'Playfair Display',serif; }

/* ===== v17: Menyu, Do'stlar bilan (xona yaratish), kod bilan kirish ===== */
.pg { position:absolute; inset:0; display:flex; flex-direction:column; padding:0 70px; box-sizing:border-box; color:#f4efe0; z-index:5; }
.pg.hidden { display:none !important; }
.pg h1 { margin:0; font-size:132px; font-weight:800; letter-spacing:3px; text-align:center; color:#f0d27a; text-shadow:0 6px 18px rgba(0,0,0,.45); margin-top:230px; }
.pg .sub { text-align:center; font-size:46px; color:#e9dfb8; letter-spacing:12px; margin-top:6px; }
.pg .orn { text-align:center; font-size:56px; color:#d9c27a; letter-spacing:26px; margin-top:34px; opacity:.85; }
.bal { position:absolute; top:52px; right:60px; display:flex; gap:14px; }
.bal span { display:flex; align-items:center; gap:12px; height:84px; padding:0 26px 0 18px; border-radius:42px; background:#14382d; border:4px solid #e9c96a; font-size:40px; color:#fff; }
.bal .ico { width:52px; height:52px; }
.bal b { font-weight:800; }
.modes { margin-top:110px; display:flex; flex-direction:column; gap:34px; }
.mode { display:flex; align-items:center; gap:34px; text-align:left; width:100%; height:216px; padding:0 40px; border-radius:44px; border:5px solid #e9c96a; background:linear-gradient(#fffaf0,#efe5c8); color:#14382d; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.mode .mi { font-style:normal; width:130px; height:130px; flex:none; border-radius:30px; background:#14382d; color:#f0d27a; display:flex; align-items:center; justify-content:center; font-size:88px; }
.mode .mt { flex:1; display:flex; flex-direction:column; gap:8px; }
.mode b { font-size:58px; font-weight:800; }
.mode em { font-size:32px; font-style:normal; font-weight:700; color:#4f6b5c; }
.mode .arr { font-size:110px; line-height:1; color:#b58a1a; }
.mode.off { opacity:.55; filter:grayscale(.4); }
.mode:active:not(:disabled) { background:linear-gradient(#f3ead0,#e4d7ae); color:#14382d; }
.link { background:none !important; border:none !important; color:#e9dfb8 !important; font-size:38px; padding:20px; text-decoration:underline; }
#reloadBtn.link { margin:auto auto 60px; }
.pg .top { display:flex; align-items:center; justify-content:space-between; height:84px; margin-top:52px; position:relative; }
.pg .top h2 { position:absolute; left:0; right:0; text-align:center; margin:0; font-size:64px; font-weight:800; color:#f0d27a; pointer-events:none; }
.pg .top .bal { position:static; z-index:1; }
.back { width:100px; height:100px; padding:0; border-radius:50%; font-size:88px; line-height:80px; background:linear-gradient(#fffaf0,#efe5c8); color:#14382d; border:4px solid #e9c96a; z-index:1; }
.back:active:not(:disabled) { background:#efe5c8; color:#14382d; }
.sec { margin-top:60px; }
#lobby .sec { margin-top:200px; }
.lab { font-size:50px; font-weight:800; color:#fff; margin-bottom:22px; }
.stakeval { font-size:120px; font-weight:800; color:#f0d27a; text-align:center; line-height:1.1; margin-bottom:14px; text-shadow:0 4px 12px rgba(0,0,0,.4); }
#stake { -webkit-appearance:none; appearance:none; width:100%; height:26px; padding:0; border:none; border-radius:13px; background:rgba(0,0,0,.35); outline:none; margin:20px 0 0; }
#stake::-webkit-slider-thumb { -webkit-appearance:none; width:96px; height:96px; border-radius:50%; background:#fffaf0; border:8px solid #e9c96a; box-shadow:0 4px 12px rgba(0,0,0,.5); }
#stake::-moz-range-thumb { width:80px; height:80px; border-radius:50%; background:#fffaf0; border:8px solid #e9c96a; }
.ticks { position:relative; height:50px; margin:26px 48px 0; font-size:36px; color:#e9dfb8; }
.ticks span { position:absolute; transform:translateX(-50%); }
.note { min-height:44px; margin-top:10px; font-size:34px; color:#ff9a8a; text-align:center; }
.seg { display:flex; background:rgba(0,0,0,.32); border-radius:56px; padding:8px; gap:6px; }
.seg button { flex:1; height:112px; border-radius:48px; border:none; background:transparent; color:#e9dfb8; font-size:60px; font-weight:800; padding:0; }
.seg button.on { background:linear-gradient(#fffaf0,#efe5c8); color:#14382d; }
.seg.half { width:50%; }
.seg button:active:not(:disabled) { background:rgba(255,250,240,.35); color:#14382d; }
.seg button.on:active { background:#efe5c8; }
.chk2 { display:flex; align-items:center; gap:32px; margin-top:56px; font-size:50px; font-weight:800; color:#fff; }
.chk2 input { display:none; }
.chk2 i { width:92px; height:92px; border-radius:24px; border:5px solid #e9c96a; background:rgba(0,0,0,.3); flex:none; position:relative; }
.chk2 input:checked + i::after { content:''; position:absolute; left:24px; top:8px; width:26px; height:50px; border:solid #f0d27a; border-width:0 10px 10px 0; transform:rotate(45deg); }
.chk2 em { font-style:normal; font-size:34px; color:#cfe0d3; font-weight:700; }
.big { margin-top:64px; height:170px; border-radius:60px; border:5px solid #e9c96a; background:linear-gradient(#f7dc86,#d9a93f); color:#14382d; font-size:80px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:30px; padding:0; box-shadow:0 10px 24px rgba(0,0,0,.4); width:100%; }
.big span { font-size:60px; }
.big:active:not(:disabled) { background:linear-gradient(#e9c96a,#c89a34); color:#14382d; }
.msg2 { min-height:50px; margin-top:20px; font-size:38px; text-align:center; color:#ffd6cf; }
.foot2 { display:flex; justify-content:space-between; margin-top:auto; padding-bottom:50px; }
#lobby input#room { width:100%; box-sizing:border-box; font-size:96px; text-align:center; letter-spacing:16px; padding:36px 20px; border-radius:36px; border:5px solid #e9c96a; background:rgba(0,0,0,.35); color:#f0d27a; text-transform:uppercase; font-weight:800; }
#lobby input#room::placeholder { font-size:48px; letter-spacing:2px; color:#a9bfae; text-transform:none; }
#handSize { display:none !important; }
#roomInfo { position:absolute; left:0; right:0; top:560px; text-align:center; z-index:3; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.6); }
#roomInfo .rl { font-size:34px; color:#e9dfb8; }
#roomInfo .rc { font-size:128px; font-weight:800; letter-spacing:18px; color:#f0d27a; line-height:1.15; padding-left:18px; }
#roomInfo .rm { font-size:38px; margin-top:6px; }
#roomInfo .rn { font-size:44px; margin-top:14px; font-weight:800; }

/* v18: yordam yoqilganda tashlab bo'lmaydigan kartalar aniq qorayadi */
#hand .fancard.dim { filter:brightness(.42) saturate(.55); }
#hand .fancard.playable { filter:none; }

/* v19: asosiy menyu + rejimlar */
.modes.home { margin-top:90px; gap:28px; }
.modes.home .mode { height:190px; }
#menu .modes { margin-top:120px; }
#menu .top { margin-top:52px; }

/* v20: ism maydoni */
.nickIn { width:100%; box-sizing:border-box; font-size:56px; text-align:center; padding:30px 20px; border-radius:32px; border:5px solid #e9c96a; background:rgba(0,0,0,.35); color:#f0d27a; font-weight:800; font-family:inherit; }
.nickIn::placeholder { font-size:44px; color:#a9bfae; font-weight:600; }
.nickSec { margin-top:30px; }
.nickSec .lab { font-size:40px; margin-bottom:14px; }
#lobby #joinBtn { margin-top:44px; }

/* v21: beta xabarlari, shikoyat va takliflar */
.fbSec { margin-top:40px; }
.fbHint { font-size:38px; line-height:1.35; color:#dfe9dd; margin-bottom:34px; }
#fb .seg { margin-bottom:30px; }
#fbText { width:100%; box-sizing:border-box; height:520px; resize:none; font-size:44px; line-height:1.3; padding:26px 28px; border-radius:30px; border:5px solid #e9c96a; background:rgba(0,0,0,.35); color:#f5ecd0; font-family:inherit; }
#fbText::placeholder { color:#a9bfae; }
.fbCount { text-align:right; font-size:32px; color:#a9bfae; margin:12px 6px 30px; }
#fb #fbSend { margin-top:0; }
.nbox { max-width:880px; width:86%; box-sizing:border-box; padding:60px 54px !important; border-radius:44px !important; border:5px solid #e9c96a !important; }
.nbeta { display:inline-block; font-size:42px; font-weight:800; letter-spacing:10px; color:#1d3a2c; background:#e9c96a; padding:8px 30px 8px 40px; border-radius:18px; margin-bottom:36px; }
.nbox .nt { font-size:56px; line-height:1.25; font-weight:800; color:#fff; margin:0 0 26px; }
.nbox .ns { font-size:42px; line-height:1.35; color:#e6efe3; margin:0 0 46px; }
.nbox .nh { font-size:62px; margin:0 0 28px; color:#f0d27a; font-family:inherit; }
.nbox .big { width:100%; }
.stores { display:flex; gap:24px; justify-content:center; margin:0 0 46px; }
.stores span { flex:1; font-size:46px; font-weight:800; color:#1d3a2c; background:#f0d27a; padding:26px 10px; border-radius:26px; }
#betaGo { font-size:50px; padding-left:20px; padding-right:20px; white-space:nowrap; }

#updBar { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:30; background:#e9c96a; color:#1d3a2c; font-size:30px; font-weight:800; padding:14px 30px; border-radius:30px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.4); }

/* v22: stavka tanlanganda "Do'stlar bilan" ekrani sig'sin (zichroq joylashuv) */
#create.paid .sec { margin-top:34px; }
#create.paid .nickSec { margin-top:20px; }
#create.paid .lab { margin-bottom:14px; }
#create.paid .seg button { height:96px; font-size:54px; }
#create.paid .stakeval { font-size:96px; margin-bottom:6px; }
#create.paid #stake { margin-top:10px; }
#create.paid .ticks { margin-top:32px; height:42px; }
#create.paid .note { min-height:36px; margin-top:4px; }
#create.paid .chk2 { margin-top:34px; }
#create.paid .big { margin-top:34px; height:150px; }
#create.paid .msg2 { min-height:30px; margin-top:12px; }
#create.paid .foot2 { padding-bottom:30px; }

/* v23: profil rasmi + ramka (tepada), Google kirish ekrani */
.av { --fr:linear-gradient(135deg,#f7dc86,#b58a1a); width:128px; height:128px; border-radius:50%; padding:9px; box-sizing:border-box; background:var(--fr); box-shadow:0 6px 16px rgba(0,0,0,.45); flex:none; }
.av .in { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:#14382d; display:flex; align-items:center; justify-content:center; border:4px solid #14382d; box-sizing:border-box; }
.av .in b { font-size:56px; font-weight:800; color:#f0d27a; }
.av .in img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#14382d; }
.av .in img.off { display:none; }
.av.fr0 { --fr:linear-gradient(135deg,#f7dc86,#b58a1a); }
.av.fr1 { --fr:linear-gradient(135deg,#f4f6f8,#8e99a3,#e6ebef); }
.av.fr2 { --fr:linear-gradient(135deg,#7be3a0,#1a8f52,#7be3a0); }
.av.fr3 { --fr:linear-gradient(135deg,#ff8a7a,#b3261e,#f7dc86); }
.av.fr4 { --fr:linear-gradient(135deg,#7ec8ff,#2b5fd9,#a9e0ff); }
.av.fr5 { --fr:conic-gradient(#ff5e5e,#ffd23f,#5eff8a,#4fd2ff,#b67bff,#ff5e5e); }
.av.big { width:260px; height:260px; padding:16px; margin:0 auto 22px; }
.av.big .in b { font-size:110px; }
.prof { position:absolute; left:60px; top:34px; display:flex; align-items:center; gap:22px; background:none !important; border:none !important; padding:0 !important; color:#fff !important; text-align:left; z-index:2; }
.prof .pn { font-size:40px; font-weight:800; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 3px 8px rgba(0,0,0,.6); }
.pbox .pmName { font-size:64px; font-weight:800; color:#f0d27a; margin-bottom:34px; }
.pbox .pmLab { font-size:40px; color:#e6efe3; margin-bottom:22px; }
.frames { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; justify-items:center; margin-bottom:44px; }
.frames .av { width:170px; height:170px; padding:12px; opacity:.8; cursor:pointer; }
.frames .av.sel { opacity:1; outline:6px solid #fff; outline-offset:6px; }
.frames .av .in b { font-size:70px; }
#pmOut { margin-top:18px; }
.lgBox { margin:110px 0 0; text-align:center; }
.lgT { font-size:76px; font-weight:800; color:#f0d27a; }
.lgS { font-size:42px; color:#e9dfb8; margin:16px 0 20px; }
#gWrap { height:170px; display:flex; justify-content:center; align-items:center; }
#gBtn { transform:scale(2.7); transform-origin:center center; min-height:44px; }

/* v24: kvadrat ramka; ranglar: 0 oltin (standart), 1 qizil, 2 qora, 3 ko'k, 4 yashil, 5 oq, 6 sariq */
.av { border-radius:26%; }
.av .in { border-radius:22%; }
.av .in img { border-radius:0; }
.av.fr0 { --fr:linear-gradient(135deg,#f3d27a,#b98a22); }
.av.fr1 { --fr:linear-gradient(135deg,#ff5a52,#b3140d); }
.av.fr2 { --fr:linear-gradient(135deg,#4a4f55,#0b0c0d); }
.av.fr3 { --fr:linear-gradient(135deg,#5aa2ff,#1741b8); }
.av.fr4 { --fr:linear-gradient(135deg,#55d98a,#14803f); }
.av.fr5 { --fr:linear-gradient(135deg,#ffffff,#c9ced2); }
.av.fr6 { --fr:linear-gradient(135deg,#fff06a,#e0b800); }
.frames { grid-template-columns:repeat(4,1fr); gap:22px; }
.frames .av { width:140px; height:140px; padding:11px; }
.frames .av .in b { font-size:60px; }
.frames .av.sel { outline-offset:5px; outline-radius:30px; }

/* v25: mikrofon nuqtasi profil ichiga, burchakdan va chetlardan joy qoldirib, 2 baravar katta (22px -> 44px) */
.mdot, #myName .mdot { top:14px; right:14px; width:44px; height:44px; border-width:6px; }
.mdot.lit { box-shadow:0 0 18px 6px rgba(255,45,45,.85); }

/* v26: do'stlar, chat, o'yindagi profil - zamonaviy uslub (yarim shaffof kartalar, oddiy shrift) */
.mod, .mod * { font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important; letter-spacing:0 !important; }
.mod .back { font-family:inherit; }
.dot { width:30px; height:30px; border-radius:50%; border:4px solid #17372b; box-sizing:border-box; flex:none; }
.dot.on { background:#ff3b30; box-shadow:0 0 14px 4px rgba(255,59,48,.75); }
.dot.off { background:radial-gradient(circle at 40% 35%,#6a706d,#2b302e); box-shadow:inset 0 2px 5px rgba(0,0,0,.7); }
.avd { position:relative; flex:none; }
.avd .dot { position:absolute; right:-6px; bottom:-6px; }
.avs { width:112px; height:112px; padding:7px; }
.avs .in { border-width:3px; }
.avs .in b { font-size:46px; }
.mine { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; background:rgba(8,32,24,.55); border:2px solid rgba(233,201,106,.35); border-radius:34px; padding:22px 32px; }
.mine .t { font-size:30px; color:#a9c7b6; font-weight:600; }
.mine .id { font-size:62px; font-weight:800; color:#f0d27a; letter-spacing:5px !important; }
.mine button { height:84px; padding:0 32px; border-radius:42px; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:34px; font-weight:700; }
.tabs2 { display:flex; gap:10px; margin-top:30px; background:rgba(8,32,24,.55); border-radius:50px; padding:8px; }
.tabs2 button { flex:1; height:96px; border-radius:42px; border:none; background:transparent; color:#cfe3d6; font-size:40px; font-weight:700; padding:0; }
.tabs2 button.on { background:#f0d27a; color:#14382d; }
.cnt { display:inline-block; min-width:44px; height:44px; line-height:44px; border-radius:22px; background:#ff3b30; color:#fff; font-size:30px; margin-left:10px; padding:0 10px; box-sizing:border-box; }
.list { margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.row { display:flex; align-items:center; gap:26px; min-height:140px; padding:14px 28px; border-radius:36px; background:rgba(8,32,24,.55); border:2px solid rgba(255,255,255,.08); color:#fff; width:100%; text-align:left; }
.row .nm { font-size:46px; font-weight:700; line-height:1.1; }
.row .st { font-size:30px; color:#a9c7b6; font-weight:500; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }
.row .mid { flex:1; min-width:0; }
.row .bd, .bd2 { min-width:52px; height:52px; line-height:52px; border-radius:26px; background:#ff3b30; color:#fff; font-size:32px; font-weight:800; text-align:center; padding:0 12px; box-sizing:border-box; }
.row .arr { font-size:70px; color:#f0d27a; line-height:1; }
.btn2 { height:92px; padding:0 38px; border-radius:46px; border:none; font-size:38px; font-weight:700; }
.btn2.ok { background:#2fae6a; color:#fff; }
.btn2.no { background:rgba(255,255,255,.14); color:#fff; }
.btn2.gold { background:#f0d27a; color:#14382d; }
.sbar { display:flex; gap:18px; margin-top:26px; }
.sbar input { flex:1; min-width:0; height:120px; border-radius:60px; border:2px solid rgba(233,201,106,.5); background:rgba(8,32,24,.55); color:#f0d27a; font-size:60px; font-weight:800; letter-spacing:8px !important; padding:0 40px; box-sizing:border-box; }
.sbar .btn2 { height:120px; border-radius:60px; font-size:42px; }
.hint2 { font-size:34px; color:#cfe3d6; margin-top:30px; }
.empty { font-size:36px; color:#a9c7b6; text-align:center; padding:60px 30px; line-height:1.35; }
.chead { display:flex; align-items:center; gap:24px; margin-top:52px; height:120px; flex:none; }
.chead .nm { font-size:50px; font-weight:700; color:#fff; line-height:1.1; }
.chead .st { font-size:30px; color:#a9c7b6; }
.msgs { flex:1; display:flex; flex-direction:column; gap:14px; padding:30px 0 20px; overflow-y:auto; min-height:0; }
.msgs > :first-child { margin-top:auto; }
.bub { max-width:76%; padding:18px 26px 12px; border-radius:34px; font-size:42px; line-height:1.25; word-break:break-word; }
.bub small { display:block; font-size:24px; opacity:.6; margin-top:4px; text-align:right; }
.bub.in { align-self:flex-start; background:rgba(8,32,24,.7); color:#fff; border-bottom-left-radius:10px; }
.bub.out { align-self:flex-end; background:#2f8a5f; color:#fff; border-bottom-right-radius:10px; }
.bub .cim { display:block; max-width:100%; max-height:620px; border-radius:22px; margin-bottom:8px; }
.cinp { display:flex; gap:16px; padding-bottom:50px; flex:none; align-items:center; }
.cinp input { flex:1; min-width:0; height:112px; border-radius:56px; background:rgba(8,32,24,.6); border:2px solid rgba(255,255,255,.15); color:#fff; font-size:42px; padding:0 40px; box-sizing:border-box; }
.cinp .s, .cinp .chImg { width:112px; height:112px; border-radius:50%; background:#f0d27a; border:none; color:#14382d; font-size:54px; display:flex; align-items:center; justify-content:center; padding:0; flex:none; }
.cinp .chImg { background:rgba(255,255,255,.14); color:#fff; font-size:50px; }
.pop { text-align:center; }
.pop .av.big { width:210px; height:210px; padding:13px; }
.pop .pn { font-size:60px; font-weight:800; color:#f0d27a; }
.pop .pid { font-size:38px; color:#cfe3d6; margin:8px 0 8px; }
.pop .pon { font-size:34px; color:#cfe3d6; min-height:44px; margin-bottom:30px; }
.pop .big { margin-top:0; height:130px; font-size:48px; }
.pop .big2 { margin-top:20px; }
.pid2 { font-size:38px; color:#cfe3d6; margin:-18px 0 26px; }
.pbox .btn2 { margin-bottom:34px; }
.mode .bd2 { margin-right:6px; }
.seat .plate { pointer-events:auto; cursor:pointer; }

/* v27: zamonaviy yashil fon (harakatlanuvchi yorug'lik dog'lari) + tugmalar bosilganda jismoniy harakat */
#stage { background:linear-gradient(165deg,#0f5545 0%,#0a3f37 42%,#062c2a 100%) !important; }
#bgfx { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; border-radius:inherit; }
#bgfx .pt { position:absolute; inset:0; opacity:.9; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-opacity%3D%22.055%22%20font-family%3D%22serif%22%20text-anchor%3D%22middle%22%3E%3Ctext%20x%3D%2245%22%20y%3D%2262%22%20font-size%3D%2246%22%3E%26%239824%3B%3C/text%3E%3Ctext%20x%3D%22135%22%20y%3D%2262%22%20font-size%3D%2246%22%3E%26%239829%3B%3C/text%3E%3Ctext%20x%3D%2245%22%20y%3D%22152%22%20font-size%3D%2246%22%3E%26%239830%3B%3C/text%3E%3Ctext%20x%3D%22135%22%20y%3D%22152%22%20font-size%3D%2246%22%3E%26%239827%3B%3C/text%3E%3C/g%3E%3Cpath%20d%3D%22M90%200%20L180%2090%20L90%20180%20L0%2090Z%22%20fill%3D%22none%22%20stroke%3D%22%23d9c27a%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2290%22%20r%3D%225%22%20fill%3D%22%23d9c27a%22%20fill-opacity%3D%22.15%22/%3E%3C/svg%3E"); }

button, .mode, .row[data-act], .tabs2 button, .frames .av { transition:translate .42s cubic-bezier(.3,1.9,.5,1), scale .42s cubic-bezier(.3,1.9,.5,1), filter .15s, box-shadow .25s; -webkit-tap-highlight-color:transparent; }
button:active:not(:disabled), .mode:active:not(:disabled), .row[data-act]:active, .frames .av:active { transform:none; translate:0 8px; scale:.95; filter:brightness(.92); transition-duration:.07s,.07s,.07s,.07s; }
.mode:active:not(:disabled), .big:active:not(:disabled), .btn2:active { box-shadow:0 2px 6px rgba(0,0,0,.35) !important; }
.pbox .nickIn { font-size:44px; padding:18px 20px; margin:-8px 0 14px; border-radius:26px; }

/* v28: karta qutisi qalinligi (kamayib boradi), orqaga tugmasi strelkasi aniq markazda */
#deckBox.dk3 .cardback { box-shadow:5px 5px 0 #efe6c8,10px 10px 0 #cfc3a0,15px 15px 0 #a99d7c; }
#deckBox.dk2 .cardback { box-shadow:5px 5px 0 #efe6c8,10px 10px 0 #cfc3a0; }
#deckBox.dk1 .cardback { box-shadow:4px 4px 0 #efe6c8; }
#deckBox.dk0 .cardback { box-shadow:none; opacity:.12; }
#deckBox.dk0 #deckCount { color:#ffb4a8; }
.back { font-size:0 !important; line-height:0 !important; display:flex; align-items:center; justify-content:center; }
.back::before { content:''; flex:none; width:34px; height:34px; box-sizing:border-box; border-left:11px solid currentColor; border-bottom:11px solid currentColor; border-radius:3px; transform:translateX(6px) rotate(45deg); }

/* v29: balans oynalari - yangi uslub: tiniq (shisha), yumshoq burchakli, ~1.6x katta */
.bal { top:34px; right:50px; gap:16px; }
.bal span { height:134px; gap:14px; padding:0 34px 0 24px; border-radius:40px; background:rgba(6,40,34,.5); border:2px solid rgba(255,255,255,.2); box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:64px; font-weight:800; color:#fff; }
.bal span b, .bal .ico + b { font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important; letter-spacing:0 !important; font-weight:800; }
.bal .ico { width:82px; height:82px; }
.pg .top .bal { position:static; gap:0; }
.pg .top .bal span { height:100px; font-size:48px; padding:0 26px 0 18px; border-radius:30px; }
.pg .top .bal .ico { width:60px; height:60px; }
.prof .pn { max-width:190px; font-size:38px; }
/* v29b: balans oynalari ustma-ust (yonma-yon emas) */
#home .bal { flex-direction:column; align-items:flex-end; gap:14px; }
#home .bal span { height:124px; font-size:60px; padding:0 34px 0 22px; }
#home .bal .ico { width:76px; height:76px; }
#home h1 { margin-top:310px; }

/* v30: stol plitalarida profil rasmi */
.plate .ava, #myName .ava { position:relative; overflow:hidden; }
.plate .ava .pimg, #myName .ava .pimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* v31 sinov kirishi */
#testBox { margin:20px auto 0; width:min(300px,80%); }
#testBox input { width:100%; box-sizing:border-box; margin:10px 0; text-align:center; }

/* v32 'Kod bilan kirish' - Yaratish tagida ikkinchi tugma */
#toJoin.sec2 { margin-top:14px; background:rgba(255,255,255,.08); color:#f1ead2; border:1.5px solid rgba(240,210,122,.55); box-shadow:none; }
#toJoin.sec2 span { color:#f0d27a; }
/* v33 diagonal gradient (GPU: faqat transform; background-position ishlatilmaydi) */
#bgfx::before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(135deg,#1f8f6c 0%,#0f6a55 18%,#0b4a3d 38%,#0e6a60 58%,#1d9a78 78%,#0b4a3d 100%); opacity:.75; }
/* yengillashtirish: kichikroq dog'lar, siljiydigan yaltirash olib tashlandi */
#bgfx { contain:strict; }

/* v35 chat: galochka va "yozmoqda..." */
.bub small .tk { margin-left:8px; letter-spacing:-6px; font-weight:700; opacity:.9; }
.bub small .tk.rd { color:#7fd8ff; opacity:1; }
#chSt.typ { color:#7fe8b2; font-style:italic; }

/* v36 Google tekshiruvi tugaguncha ekran yashirin (eski ekran lip etib ko'rinmasin) */
#stage.authwait > .pg, #stage.authwait > .modal { visibility:hidden; }

/* v37 fon animatsiyasi olib tashlandi: statik gradient */

/* v38 versiya yozuvi (chetda) */
#verTag { position:absolute; right:22px; bottom:14px; z-index:5; font-size:24px; font-weight:700; color:rgba(241,234,210,.55); pointer-events:none; }

/* v39 ekran almashish: orqaga chapdan, oldinga o'ngdan yengil surilib kirish */
.pg.slideFwd { animation:slideFwd .28s cubic-bezier(.22,.8,.3,1) both; }
@keyframes slideFwd { from { transform:translate3d(140px,0,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } }
.pg.slideBack { animation:slideBack .28s cubic-bezier(.22,.8,.3,1) both; }
@keyframes slideBack { from { transform:translate3d(-140px,0,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .pg.slideBack, .pg.slideFwd { animation:none; } }

/* v40 iOS: ekran yonga surilib ketmasin */
html, body { position:fixed; inset:0; width:100%; overflow:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%; }
#viewport { overflow:hidden; touch-action:pan-y; overscroll-behavior:none; contain:layout paint; }