/* Prra ko'rinishi. index.html ham, online.html ham shu faylni ishlatadi. */

:root{
  --felt:#0d3b3f;
  --felt-deep:#082326;
  --felt-line:rgba(217,164,65,.22);
  --gold:#d9a441;
  --gold-soft:#b8893a;
  --cream:#f6f1e4;
  --ink:#152220;
  --red:#b23a2f;
  --green:#5fae7d;
  --text:#e8e2d2;
  --text-dim:#9bb0ad;
  --card-w:60px;
  --card-h:86px;
}
*{box-sizing:border-box;}

/* hidden atributi har doim ishlasin. Brauzerning [hidden]{display:none} qoidasi
   mualliflik uslubidan kuchsiz — .mode{display:block} yoki .timer{display:inline-flex}
   uni bosib ketadi va element yashirinmay qoladi. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  -webkit-text-size-adjust:100%;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
  background:
    radial-gradient(120% 80% at 50% 0%, #12494d 0%, var(--felt) 42%, var(--felt-deep) 100%);
  color:var(--text);
  font-family:"Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 28px;}
@supports (padding:max(0px)){
  .wrap{
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
    padding-bottom:max(28px, env(safe-area-inset-bottom));
  }
}

/* ---------- sarlavha va hisob ---------- */
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.brand{font-family:Georgia,"Times New Roman",serif;font-size:30px;letter-spacing:.16em;color:var(--gold);}
.brand span{display:block;font-family:inherit;font-size:11px;letter-spacing:.24em;color:var(--text-dim);margin-top:2px;}
.target{font-size:13px;color:var(--text-dim);text-align:right;}

.scoreboard{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-top:1px solid var(--felt-line);border-bottom:1px solid var(--felt-line);
  padding:10px 4px;margin-bottom:14px;
}
.side{display:flex;flex-direction:column;gap:4px;min-width:0;}
.side.me{align-items:flex-start;}
.side.bot{align-items:flex-end;text-align:right;}
.who{font-size:12px;letter-spacing:.14em;color:var(--text-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pts{font-family:Georgia,serif;font-size:34px;line-height:1;color:var(--cream);}
.tally{font-size:12px;color:var(--text-dim);display:flex;gap:8px;}
.tally b{color:var(--gold);font-weight:600;}
.dash{font-family:Georgia,serif;color:var(--gold-soft);font-size:20px;padding:0 14px;}

/* ---------- stol ---------- */
.zone-label{font-size:12px;color:var(--text-dim);margin:0 0 6px;}
.zone-label.turn{font-size:14px;letter-spacing:.02em;}
.zone-label.turn.active{color:var(--gold);}
.felt{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 10px, transparent 10px 20px),
    rgba(0,0,0,.18);
  border:1px solid var(--felt-line);
  border-radius:4px;
  padding:12px;
  min-height:132px;
  margin-bottom:14px;
}
.row{display:flex;flex-wrap:wrap;gap:6px;}
.row.center{justify-content:center;}
.empty-note{color:var(--text-dim);font-size:13px;text-align:center;padding:34px 8px;}

/* ---------- karta ---------- */
.card{
  width:var(--card-w);height:var(--card-h);
  background:var(--cream);
  border-radius:5px;
  position:relative;
  box-shadow:0 2px 0 rgba(0,0,0,.28);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5px 6px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--ink);
  user-select:none;
  flex:0 0 auto;
}
.card.red{color:var(--red);}
.card .r{font-size:17px;line-height:1;font-weight:600;}
.card .s{font-size:15px;line-height:1;}
.card .s.big{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:26px;opacity:.16;}
.card .s.bot-right{align-self:flex-end;transform:rotate(180deg);}
.card.back{
  background:
    repeating-linear-gradient(45deg, #123f45 0 6px, #0d3236 6px 12px);
  border:1px solid rgba(217,164,65,.35);
  box-shadow:none;
}
.hand .card{cursor:pointer;transition:transform .12s ease;}
.hand .card:hover{transform:translateY(-8px);}
.hand .card:focus-visible{transform:translateY(-8px);outline:none;box-shadow:0 0 0 2px var(--gold);}
.hand.locked .card{cursor:default;opacity:.72;}
.hand.locked .card:hover{transform:none;}
.card.flash{animation:flash .5s ease;}
@keyframes flash{
  0%{box-shadow:0 0 0 0 var(--gold);}
  40%{box-shadow:0 0 0 4px var(--gold);}
  100%{box-shadow:0 2px 0 rgba(0,0,0,.28);}
}
@media (prefers-reduced-motion:reduce){
  .card.flash{animation:none;box-shadow:0 0 0 3px var(--gold);}
  .hand .card{transition:none;}
}

.table-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 6px;}
.deck-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.deck-chip .pip{
  width:20px;height:28px;border-radius:3px;
  background:repeating-linear-gradient(45deg,#123f45 0 4px,#0d3236 4px 8px);
  border:1px solid rgba(217,164,65,.35);flex:0 0 auto;
}
.deck-chip b{color:var(--cream);font-family:Georgia,serif;font-size:17px;font-weight:500;}
.deck-chip.empty .pip{opacity:.25;}

/* ---------- olingan kartalar lentasi ---------- */
.tricks{
  display:flex;gap:0;overflow-x:auto;padding:4px 0 10px;
  scrollbar-width:thin;
}
.trick{
  display:flex;gap:3px;align-items:center;flex:0 0 auto;
  padding:0 11px;border-right:1px solid var(--felt-line);
}
.trick:last-child{border-right:none;}
.trick:first-child{padding-left:0;}
.card.mini{width:38px;height:54px;padding:3px 4px;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.28);}
.card.mini .r{font-size:12px;}
.card.mini .s{font-size:10px;}
.card.mini .s.big{font-size:17px;}
.card.mini .bot-right{display:none;}
.card.mini.played{box-shadow:0 3px 0 var(--gold);}
.cut-row{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:16px 0;}
.cut-row .card.back{cursor:pointer;transition:transform .12s ease;}
.cut-row .card.back:hover{transform:translateY(-7px);}
.cut-row .card.back:focus-visible{transform:translateY(-7px);outline:none;box-shadow:0 0 0 2px var(--gold);}
.tricks-empty{color:var(--text-dim);font-size:13px;padding:14px 0;}

/* ---------- log va tugmalar ---------- */
.log{
  border-top:1px solid var(--felt-line);
  margin-top:16px;padding-top:10px;
  font-size:13px;line-height:1.6;color:var(--text-dim);
  max-height:96px;overflow-y:auto;
}
.log p{margin:0 0 3px;}
.log p.mine{color:var(--cream);}
button{
  font:inherit;font-size:14px;
  background:transparent;color:var(--gold);
  border:1px solid var(--gold-soft);border-radius:3px;
  padding:9px 18px;cursor:pointer;
}
button:hover{background:rgba(217,164,65,.12);}
button:disabled{opacity:.45;cursor:default;}
button:disabled:hover{background:transparent;}
button.solid{background:var(--gold);color:#11292b;border-color:var(--gold);font-weight:600;}
button.quiet{border-color:transparent;color:var(--text-dim);}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

/* ---------- modal ---------- */
.veil{
  position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(4,20,22,.82);
  display:flex;align-items:center;justify-content:center;padding:18px;z-index:20;
}
.veil[hidden]{display:none;}
.panel{
  background:#0f3438;border:1px solid var(--felt-line);border-radius:5px;
  padding:24px;max-width:420px;width:100%;
  max-height:calc(100vh - 36px);overflow-y:auto;
}
.panel h2{font-family:Georgia,serif;color:var(--gold);margin:0 0 4px;font-size:24px;font-weight:500;}
.panel p{color:var(--text-dim);font-size:14px;line-height:1.6;}
.panel table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.panel td{padding:7px 0;border-bottom:1px solid rgba(217,164,65,.14);}
.panel td:last-child{text-align:right;color:var(--cream);font-family:Georgia,serif;}
details{margin-top:18px;font-size:13px;color:var(--text-dim);}
summary{cursor:pointer;color:var(--gold-soft);}
details ul{padding-left:18px;line-height:1.7;}

/* ---------- bosh ekran ---------- */
.home{max-width:420px;margin:0 auto;padding-top:22px;}
.home .brand{font-size:44px;text-align:center;margin-bottom:6px;}
.home .brand span{text-align:center;font-size:12px;}
.home .lead{color:var(--text-dim);font-size:14px;line-height:1.7;text-align:center;margin:16px 0 26px;}
.mode{
  display:block;width:100%;text-align:left;margin-bottom:12px;
  padding:16px 18px;border:1px solid var(--felt-line);border-radius:5px;
  background:rgba(0,0,0,.16);color:var(--text);
}
.mode:hover{background:rgba(217,164,65,.09);border-color:var(--gold-soft);}
.mode b{display:block;color:var(--gold);font-size:16px;font-weight:600;margin-bottom:3px;}
.mode span{display:block;color:var(--text-dim);font-size:13px;line-height:1.5;}

/* ---------- onlayn: lobbi ---------- */
.field{
  font:inherit;font-size:16px;width:100%;
  background:rgba(0,0,0,.24);color:var(--cream);
  border:1px solid var(--felt-line);border-radius:3px;
  padding:11px 13px;margin-top:8px;
}
.field:focus{outline:none;border-color:var(--gold-soft);}
.field.code{
  font-family:Georgia,serif;font-size:26px;letter-spacing:.34em;
  text-align:center;text-transform:uppercase;
}
.code-box{
  font-family:Georgia,serif;font-size:38px;letter-spacing:.3em;
  color:var(--gold);text-align:center;
  background:rgba(0,0,0,.24);border:1px solid var(--felt-line);border-radius:4px;
  padding:18px 10px 18px 22px;margin:14px 0 6px;
  user-select:text;-webkit-user-select:text;
}
.hint{font-size:13px;color:var(--text-dim);line-height:1.6;}

/* ---------- kirish: yuklanish ekrani va hisob ---------- */
.loading{max-width:420px;margin:0 auto;padding-top:80px;text-align:center;}
.loading .brand{font-size:44px;}
.loading .brand span{text-align:center;font-size:12px;}
.loading p{color:var(--text-dim);font-size:14px;line-height:1.7;margin-top:26px;}
.spin{
  width:26px;height:26px;margin:30px auto 0;
  border:2px solid var(--felt-line);border-top-color:var(--gold);border-radius:50%;
  animation:spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
/* Harakatni kamaytirishni so'raganlar uchun aylanish o'rniga oddiy belgi */
@media (prefers-reduced-motion:reduce){
  .spin{animation:none;border-top-color:var(--felt-line);}
}

.account{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
  padding:11px 13px;border:1px solid var(--felt-line);border-radius:5px;
  background:rgba(0,0,0,.16);
}
.account img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  background:rgba(0,0,0,.3);border:1px solid var(--felt-line);
}
.account .txt{min-width:0;}
.account b{display:block;color:var(--cream);font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account span{display:block;color:var(--text-dim);font-size:12px;margin-top:2px;}
.account .chiq{margin-left:auto;flex:none;}

/* Login va parol oynalari */
.hint a, .panel a{color:var(--gold);}
.form-xato{color:#e89a8f;font-size:13px;line-height:1.5;min-height:1.5em;margin:10px 0 0;}
.panel label.hint{display:block;margin-top:12px;}

/* ---------- 4 kishilik stol ---------- */
.players{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.pcard{
  padding:8px 9px;border:1px solid var(--felt-line);border-radius:5px;
  background:rgba(0,0,0,.16);min-width:0;
}
/* Jamoadosh ajralib tursin — stolda kim kim bilanligi bir qarashda ko'rinadi */
.pcard.mate{border-color:rgba(95,174,125,.5);background:rgba(95,174,125,.08);}
.pcard.turn{border-color:var(--gold);background:rgba(217,164,65,.1);}
.pcard .pname{
  color:var(--cream);font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard .pmeta{color:var(--text-dim);font-size:11px;margin-top:2px;}
.pcard .prole{color:var(--green);font-size:11px;}
.pcard .ptake{display:flex;gap:3px;margin-top:6px;min-height:34px;flex-wrap:wrap;}
.pcard .ptake .empty-note{font-size:11px;margin:0;}
@media (max-width:420px){
  .players{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pcard{padding:6px 7px;}
  .pcard .pname{font-size:12px;}
}

/* ---------- chat ---------- */
.chat{
  margin-top:16px;border:1px solid var(--felt-line);border-radius:5px;
  background:rgba(0,0,0,.16);overflow:hidden;
}
.chat-log{max-height:150px;overflow-y:auto;padding:10px 12px;font-size:13px;line-height:1.7;}
.chat-log p{margin:0 0 5px;color:var(--text);word-break:break-word;}
.chat-log p b{color:var(--gold-soft);font-weight:600;margin-right:5px;}
.chat-log p.mine b{color:var(--green);}
.chat-log p.bosh{color:var(--text-dim);opacity:.75;}
.chat-in{display:flex;gap:8px;padding:8px;border-top:1px solid var(--felt-line);}
.chat-in .field{margin-top:0;flex:1;min-width:0;}
.chat-in button{flex:none;}

/* ---------- profil ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 4px;text-align:center;}
.stats div{padding:9px 4px;border:1px solid var(--felt-line);border-radius:4px;background:rgba(0,0,0,.16);}
.stats b{display:block;font-family:Georgia,serif;font-size:22px;color:var(--cream);}
.stats span{display:block;font-size:11px;color:var(--text-dim);margin-top:3px;}
.res{font-weight:600;}
.res.win{color:var(--green);}
.res.loss{color:var(--red);}
.res.draw{color:var(--gold);}

/* Ishlab chiqish rejimi ko'zga tashlanib tursin — ishlab chiqarishda bo'lmasligi kerak */
.dev-note{
  margin-top:16px;padding:9px 12px;border:1px dashed var(--gold-soft);border-radius:4px;
  color:var(--text-dim);font-size:12px;line-height:1.6;
}

/* ---------- onlayn: taymer va aloqa ---------- */
.timer{
  font-family:Georgia,serif;font-size:15px;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:7px;
}
.timer b{color:var(--cream);font-size:18px;font-weight:500;min-width:24px;text-align:right;}
.timer.low b{color:var(--red);}
.timer.mine b{color:var(--gold);}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;}
.dot.off{background:var(--red);}
.dot.wait{background:var(--gold-soft);}
.turnbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 6px;}

@media (max-width:420px){
  :root{--card-w:50px;--card-h:72px;}
  .brand{font-size:25px;}
  .home .brand{font-size:36px;}
  .pts{font-size:28px;}
  .code-box{font-size:30px;}
}

/* ---------- do'stlar ro'yxati (prra-arxitektura.md §3d) ---------- */
/* "Onlayn" degani ochiq ulanish bor, ya'ni hozir taklifni qabul qila oladi */
.dost-holat{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--text-dim);margin-right:6px;vertical-align:middle;}
.dost-holat.bor{background:var(--green);}
.dost-holat.band{background:var(--gold-soft);}