/* =====================================================================
   DAVRA — bo‘rtib chiqqan 3D tugmalar
   Har tugma: yuz (yorug‘ gradient + yaltiroq yuqori qism) + qalinlik (pastki qirra)
   Bosilganda — tugma pastga «botadi», qalinlik yo‘qoladi
   --b  : tugma rangi        --bd : qalinlik (qirra) rangi
   ===================================================================== */
.btn.btn, .mbtn.mbtn, .ib.ib, .code-chip.code-chip, .chip-s.chip-s, .ans.ans, .peek.peek, .splay.splay, .stop.stop, .me-chip.me-chip, .adm-chip.adm-chip, .gtile.gtile, .vis.vis, .bigc.bigc, .gcard.gcard, .gwho.fr {
  --d: 5px;
  --bd: color-mix(in srgb, var(--b, #38246a) 50%, #05020c);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.1) 100%),
    var(--bg2, var(--b, #38246a));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 var(--d) 0 var(--bd),
    0 calc(var(--d) + 6px) 14px -4px rgba(0, 0, 0, 0.55);
  transform: translateY(0);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.2s, opacity 0.2s;
  margin-bottom: var(--d);
}
.btn.btn:active, .mbtn.mbtn:active, .ib.ib:active, .code-chip.code-chip:active, .chip-s.chip-s:active, .ans.ans:active, .peek.peek:active, .splay.splay:active, .stop.stop:active, .me-chip.me-chip:active, .adm-chip.adm-chip:active, .gtile.gtile:active, .vis.vis:active, .bigc.bigc:active, .gcard.gcard:active, .gwho.fr:active {
  transform: translateY(calc(var(--d) - 1px));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 0 var(--bd),
    0 3px 6px -2px rgba(0, 0, 0, 0.5);
  filter: brightness(1.04);
}
@media (hover: hover) {
  .btn:hover, .mbtn:hover, .ib:hover, .splay:hover, .gtile:hover, .bigc:hover, .gcard:hover, .gwho.fr:hover { filter: brightness(1.08); }
}

/* --- ranglar --- */
.btn { --b: #3d2775; color: var(--milk); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.btn.primary { --b: var(--acc); color: var(--acc-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
body[data-theme='mafia'] .btn.primary, .btn.danger { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.btn.gold, .mbtn { --b: #f2b544; --bd: #a8661a; color: #2a1a07; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.danger { --b: #e2364f; --bd: #8a0f24; }
.btn.btn.danger { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.1)), #e2364f !important; }
.btn.quick { --b: #2ec4b6; --bd: #127a70; }
.mbtn.comp { --b: #4f63e0; --bg2: linear-gradient(135deg, #2f80ed, #6a4bd6); --bd: #2a2280; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.mbtn.sol { --b: #ef5a45; --bg2: linear-gradient(135deg, #e2364f, #ff8a3d); --bd: #8a1f1a; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.btn.ghost {
  --b: rgba(255, 255, 255, 0.04); --bd: rgba(0, 0, 0, 0.45); --d: 4px;
  border: 1.5px solid rgba(255, 244, 230, 0.16);
}
.ib, .code-chip { --b: #2e1d58; --d: 4px; }
.ib.sm { --b: #3d2775; --d: 3px; }
.me-chip, .adm-chip, .peek { --b: #34215f; --d: 4px; }
.adm-chip { --b: color-mix(in srgb, var(--gold) 18%, #2a1a4f); }
.it-chip { --b: color-mix(in srgb, #2ec4b6 18%, #2a1a4f); }
.chip-s { --b: #4a3184; --d: 3px; }
.chip-s.on { --b: #f2b544; --bd: #a8661a; color: #2a1a07; }
.ans { --b: var(--qc); --d: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.gtile { --b: #2a1a4f; --d: 4px; }
.stop { --b: rgba(13, 6, 32, 0.55); --d: 3px; }
.splay { --d: 6px; --bd: rgba(0, 0, 0, 0.5); }
.s-blocks .splay { --bg2: linear-gradient(160deg, #3a6ee0, #142a63); --bd: #0c1a40; }
.s-merge .splay { --bg2: linear-gradient(160deg, #26b87c, #08301f); --bd: #04200f; }
.s-stack .splay { --bg2: linear-gradient(160deg, #7a5ae6, #22134f); --bd: #140a33; }
.s-g2048 .splay { --bg2: linear-gradient(160deg, #dc9a24, #3a2307); --bd: #241503; }
.s-sort .splay { --bg2: linear-gradient(160deg, #1fb3a3, #0b3d38); --bd: #052522; }
.s-screw .splay { --bg2: linear-gradient(160deg, #8c97ad, #2d3342); --bd: #1a1e28; }

/* asosiy harakat tugmalari: vaqti-vaqti bilan yaltirab o‘tadi */
.btn.btn.primary, .mbtn.mbtn:not(.comp):not(.sol), .btn.btn.gold {
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.1) 100%),
    var(--bg2, var(--b));
  animation: btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine { 0%, 62% { background-position: -160% 0, 0 0, 0 0; } 100% { background-position: 260% 0, 0 0, 0 0; } }

/* o‘chirilgan tugma — yassi */
.btn.btn[disabled], .btn.btn.off { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(calc(var(--d) - 1px)); filter: grayscale(0.4); animation: none; }

/* qatordagi tugmalar balandligi teng bo‘lsin, qalinlik joy olmasin */
.row > .btn, .dock-in > .btn, .bar > .ib, .bar > .code-chip { margin-bottom: var(--d); }
.bar { align-items: flex-start; }

/* kino rejimida (mafiya va b.) to‘q fon ustida qirralar yaxshi ko‘rinsin */
body.cine-on .btn:not(.primary):not(.gold):not(.ghost), body.cine-choy .btn:not(.primary):not(.gold):not(.ghost) { --b: #3a2466; }
body.cine-choy .ib, body.cine-choy .code-chip { --b: #4a2a16; --bd: #1e0e05; }
body.cine-choy .btn:not(.primary):not(.gold):not(.ghost) { --b: #5a3418; --bd: #241105; }

@media (prefers-reduced-motion: reduce) {
  .btn.primary, .mbtn, .btn.gold { animation: none; }
}

/* tanlangan holatlar (viktorina javobi, belgilangan) — oq halqa saqlanadi */
.ans.ans.mine { box-shadow: 0 0 0 3px #fff, 0 var(--d) 0 var(--bd), 0 12px 18px -6px rgba(0, 0, 0, 0.5); }
.answers.rev .ans.ans.ok { box-shadow: 0 0 0 3px #fff, 0 0 30px var(--qc), 0 var(--d) 0 var(--bd); }
.answers.master .ans.ans.ok { box-shadow: 0 0 0 3px #fff, 0 var(--d) 0 var(--bd); }
.gtile.gtile.on, .gtile.gtile.sel { box-shadow: 0 0 0 2px var(--acc), 0 var(--d) 0 var(--bd); }
.gtile.sel { --b: color-mix(in srgb, var(--acc) 16%, #2a1a4f); }
.vis { --b: #34215f; --d: 5px; }
.stop.stop { position: absolute; }
.vis.on { --b: color-mix(in srgb, var(--gold) 16%, #34215f); }