/* ═══ Доводка: исправления по скриншотам, аватарки, окна, капля меню, графика казино. Подключается последним. ═══ */

/* ─── аватарка: фото поверх буквы ─── */
.ava { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; font-weight: 800; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ─── меню: ровная стеклянная полоса, без лишних бликов; капля плавно переезжает ─── */
#nav { overflow: visible; background: linear-gradient(180deg, rgba(120,150,235,.22), rgba(26,36,84,.34)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 16px 36px rgba(0,0,0,.5); }
#nav::before { display: none; }
#nav .drop { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 26px; opacity: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 50% 125%, rgba(170,230,255,.6), transparent 62%), linear-gradient(180deg, rgba(122,184,255,.62), rgba(58,102,240,.5));
  border: 1px solid rgba(214,238,255,.62);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.72), inset 0 -8px 14px rgba(16,42,150,.42), 0 8px 20px rgba(60,130,255,.42);
  transition: transform .42s cubic-bezier(.3,1.35,.5,1), width .3s, opacity .2s; }
#nav .drop::before { content: ""; position: absolute; left: 16%; right: 16%; top: 3px; height: 36%; border-radius: 20px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); }
#nav button { z-index: 1; background: none !important; box-shadow: none !important; transition: color .25s, transform .15s; }
#nav button.on { color: #fff; text-shadow: 0 1px 2px rgba(0,20,80,.55); }
#nav button.on::before { display: none; }
#nav button:active { transform: scale(.9); }
#nav button span { letter-spacing: .01em; }

/* ─── плитки города: стрелка сверху справа, текст не перекрывается; метка «новое» — на значке ─── */
.sect { padding: 14px 14px 15px; gap: 12px; min-height: 0; }
.sect .arr { top: 14px; bottom: auto; right: 12px; width: 28px; height: 28px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); }
.sect .dot { left: 52px; right: auto; top: 10px; width: 12px; height: 12px; border: 2px solid #12162c; }
.sect small { display: block; margin-top: 3px; min-height: 2.6em; }
.sect b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── выключенная кнопка: спокойная, без бликов ─── */
.btn[disabled] { filter: none; pointer-events: none; color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; box-shadow: none !important; }
.btn[disabled]::before, .btn[disabled] > i.sheen { display: none; }
.btn { font-weight: 700; letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
.btn svg { stroke-width: 2; }

/* ─── окна-шторки ─── */
.sheet-bg { background: rgba(4,6,16,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-body { padding: 8px 16px calc(16px + var(--safe-b)); max-height: 84vh; }
.sheet-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; border-radius: 30px 30px 0 0; background: radial-gradient(80% 120% at 50% 0%, rgba(120,170,255,.2), transparent 70%); pointer-events: none; }
.grip { width: 40px; height: 4px; margin: 4px auto 14px; background: rgba(255,255,255,.3); }
.sheet h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 40px 2px 0; position: relative; }
.sheet .sx { position: absolute; right: 14px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: var(--mute); z-index: 2; }
.sheet .sx svg { width: 15px; height: 15px; stroke-width: 2.2; }
.sheet .mut { position: relative; }
.opt { padding: 12px 13px; gap: 12px; }
.opt b { font-weight: 700; }
.opt .ico { width: 42px; height: 42px; }
.opt[data-build], .opt[data-d], .opt[data-e] { transition: transform .14s, background .2s, border-color .2s; }
.opt[data-build]:active, .opt[data-d]:active, .opt[data-e]:active { transform: scale(.975); background: rgba(255,255,255,.12); border-color: rgba(92,203,255,.5); }

/* ─── уведомления ─── */
.toast { padding: 9px 16px 9px 9px; font-size: 14px; line-height: 1.25; }
.toast span:last-child { min-width: 0; }

/* ─── карточки: общий порядок ─── */
.card { padding: 16px; margin-bottom: 12px; }
.line .grow, .opt .grow, .job .grow { min-width: 0; }
.line .t, .job .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line .mut, .opt .mut { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.toprow { border-radius: 18px; }
.toprow .pos { border-radius: 50%; }
.gcard { justify-content: flex-start; gap: 14px; }
.gcard small { display: block; margin-top: 2px; line-height: 1.3; }

/* ─── казино: стол с сукном, фишки, новая графика ─── */
.table { background: radial-gradient(90% 70% at 50% 40%, rgba(31,110,82,.5), rgba(10,34,40,.2) 70%, transparent); }
.table::before { content: ""; position: absolute; inset: 10px; border-radius: 26px; border: 1.5px dashed rgba(246,201,90,.22); pointer-events: none; }
.outcome { position: relative; z-index: 1; padding: 6px 16px; border-radius: 16px; }
.outcome.show { background: rgba(4,6,16,.55); border: 1px solid rgba(255,255,255,.12); }
.die { width: 74px; height: 74px; border-radius: 19px; background: linear-gradient(150deg, #ffffff, #dfe5fa 70%, #c3cbea); box-shadow: 0 14px 26px rgba(0,0,0,.5), inset 0 -7px 10px rgba(80,90,150,.3), inset 0 3px 3px rgba(255,255,255,.9); }
.die.dark { background: linear-gradient(150deg, #48519a, #232a66 70%, #161b48); box-shadow: 0 14px 26px rgba(0,0,0,.5), inset 0 -7px 10px rgba(0,0,30,.4), inset 0 3px 3px rgba(255,255,255,.25); }
.side small { margin-top: 10px; padding: 4px 12px; border-radius: 12px; background: rgba(4,6,16,.5); display: inline-block; color: var(--ink); }
.slots { position: relative; padding: 16px 16px 20px; border-radius: 28px; background: linear-gradient(170deg, #3a2478, #1a0f46 60%, #100930); border: 2px solid rgba(246,201,90,.7);
  box-shadow: 0 0 0 6px rgba(246,201,90,.12), 0 0 46px rgba(246,201,90,.28), inset 0 2px 0 rgba(255,255,255,.25), 0 20px 40px rgba(0,0,0,.5); }
.slots::before { content: "777"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 3px 16px; border-radius: 12px; font-weight: 900; font-size: 15px; letter-spacing: .14em; color: #2a1c00; background: linear-gradient(180deg, #ffe690, #df9f2d); box-shadow: 0 4px 12px rgba(246,201,90,.5); }
.slots::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -3px; background: rgba(255,91,116,.75); box-shadow: 0 0 10px #ff5b74; pointer-events: none; }
.reel { border-radius: 16px; background: linear-gradient(#f3f5ff, #ffffff 30%, #ffffff 70%, #e3e8fb); box-shadow: inset 0 14px 16px rgba(0,0,0,.34), inset 0 -14px 16px rgba(0,0,0,.34), 0 0 0 2px rgba(246,201,90,.5); }
.wheel { box-shadow: 0 0 0 8px #2a1d08, 0 0 0 12px var(--gold), 0 0 50px rgba(246,201,90,.3), 0 20px 50px rgba(0,0,0,.6); }
.coin div { background: radial-gradient(circle at 34% 28%, #fff6c8, #ffd35a 45%, #d99a1e 78%, #a8700a); box-shadow: inset 0 0 0 7px rgba(150,95,0,.4), inset 0 0 0 10px rgba(255,236,160,.35), 0 16px 34px rgba(0,0,0,.55); letter-spacing: .06em; font-size: 26px; }
.mines button { border-radius: 16px; background: linear-gradient(155deg, #4758c0, #252e74); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.34), inset 0 -8px 12px rgba(0,0,40,.35), 0 6px 14px rgba(0,0,0,.36); }
.mines button.gem { background: linear-gradient(155deg, #5df0b4, #0f9670); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 22px rgba(69,221,150,.5); }
.mines button.bomb { background: linear-gradient(155deg, #ff7f93, #a81a3c); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 0 22px rgba(255,91,116,.5); }
.pick button { height: 46px; border-radius: 23px; border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -8px 12px rgba(0,0,0,.25); color: #fff; }
.pick button.on { border-color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(255,255,255,.22); }
.dial .mid { background: radial-gradient(circle at 50% 30%, #1b2350, #080c22); box-shadow: inset 0 2px 0 rgba(255,255,255,.15), 0 0 30px rgba(0,0,0,.6); }
.pcard { background: linear-gradient(160deg, #ffffff, #e6ebfb); border: 1px solid rgba(255,255,255,.9); }
.pcard::after { content: ""; position: absolute; inset: 7px; border-radius: 12px; border: 1.5px solid rgba(23,28,64,.12); pointer-events: none; }

/* ─── игры из кнопок: плитки-капли и карточки памяти ─── */
.tile { min-height: 64px; border-radius: 20px; background: linear-gradient(180deg, rgba(120,170,255,.26), rgba(50,80,190,.2)); border: 1px solid rgba(190,220,255,.36);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -8px 14px rgba(10,30,110,.3), 0 8px 18px rgba(0,0,0,.3); }
.tile.ok { background: linear-gradient(180deg, #93f5c4, #28b472); border-color: #c8ffe2; color: #04281a; }
.tile.no { background: linear-gradient(180deg, #ff93a3, #d83957); border-color: #ffd0d6; }
.q { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.mem button { border-radius: 18px; background: linear-gradient(155deg, #4a5cc8, #232c70); box-shadow: inset 0 2px 0 rgba(255,255,255,.34), inset 0 -8px 12px rgba(0,0,40,.35), 0 8px 18px rgba(0,0,0,.36); }
.mem button::before { content: "?"; color: rgba(255,255,255,.32); font-size: 22px; font-weight: 900; }
.mem button.open::before { content: none; }
.hud .pill { font-size: 17px; }
.stage-top .t { font-size: 18px; }
.sect br { display: none; }
.sect small { min-height: 0; margin-top: 4px; }
.sect > div:last-of-type { margin-top: 2px; }

/* ═══ Водяные кнопки — настоящее стекло: полупрозрачные, размывают то, что под ними, с мягкими переходами ═══ */
.btn { color: #fff; border: 1px solid rgba(255,255,255,.42);
  background:
    radial-gradient(140% 120% at 50% 130%, rgba(150,215,255,.42), rgba(150,215,255,0) 62%),
    radial-gradient(90% 70% at 22% 0%, rgba(255,255,255,.26), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(150,195,255,.30), rgba(70,110,235,.20));
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.62), inset 0 -12px 22px rgba(30,70,200,.26), inset 0 0 18px rgba(255,255,255,.07), 0 12px 30px rgba(40,100,255,.24), 0 2px 6px rgba(0,0,0,.25);
  text-shadow: 0 1px 3px rgba(0,20,80,.45); }
.btn::before { left: 7%; right: 7%; top: 2px; height: 46%; border-radius: 24px 24px 60px 60px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.12) 55%, rgba(255,255,255,0)); filter: blur(.6px); }
.btn > i.sheen { background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent); filter: blur(3px); }
.btn:active { transform: scale(.96); filter: brightness(1.14); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.62), inset 0 -6px 14px rgba(30,70,200,.26), 0 4px 12px rgba(40,100,255,.2); }
.btn.gold { color: #2b1d00; text-shadow: 0 1px 0 rgba(255,255,255,.35); border-color: rgba(255,240,190,.75);
  background:
    radial-gradient(140% 120% at 50% 130%, rgba(255,250,210,.6), rgba(255,250,210,0) 62%),
    radial-gradient(90% 70% at 22% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,226,130,.86), rgba(238,176,58,.70));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -12px 22px rgba(170,100,0,.26), 0 12px 30px rgba(246,201,90,.30), 0 2px 6px rgba(0,0,0,.25); }
.btn.gold::before { background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.14) 55%, rgba(255,255,255,0)); }
.btn.green { color: #03301e; text-shadow: 0 1px 0 rgba(255,255,255,.3); border-color: rgba(200,255,228,.7);
  background:
    radial-gradient(140% 120% at 50% 130%, rgba(210,255,235,.55), rgba(210,255,235,0) 62%),
    radial-gradient(90% 70% at 22% 0%, rgba(255,255,255,.36), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(130,245,190,.80), rgba(40,185,118,.62));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -12px 22px rgba(0,100,60,.26), 0 12px 30px rgba(69,221,150,.26), 0 2px 6px rgba(0,0,0,.25); }
.btn.red { color: #fff; border-color: rgba(255,205,212,.65);
  background:
    radial-gradient(140% 120% at 50% 130%, rgba(255,205,212,.5), rgba(255,205,212,0) 62%),
    radial-gradient(90% 70% at 22% 0%, rgba(255,255,255,.3), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,135,152,.78), rgba(216,57,87,.60));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -12px 22px rgba(130,0,35,.28), 0 12px 30px rgba(255,91,116,.26), 0 2px 6px rgba(0,0,0,.25); }
.btn.ghost, .btn.flat { text-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.08); }
.wbtn { background: linear-gradient(180deg, rgba(160,195,255,.26), rgba(40,60,140,.30)); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%);
  border-color: rgba(255,255,255,.4); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -8px 14px rgba(20,40,130,.28), 0 8px 20px rgba(0,0,0,.35); text-shadow: 0 1px 3px rgba(0,20,80,.5); }
.wbtn.on { background: linear-gradient(180deg, rgba(255,226,130,.88), rgba(238,176,58,.72)); text-shadow: none; }
#nav .drop { background:
    radial-gradient(140% 120% at 50% 130%, rgba(160,225,255,.5), rgba(160,225,255,0) 62%),
    linear-gradient(180deg, rgba(160,200,255,.36), rgba(70,115,240,.26));
  -webkit-backdrop-filter: blur(10px) saturate(200%); backdrop-filter: blur(10px) saturate(200%); }
.tabs button.on, .seg button.on { background: linear-gradient(180deg, rgba(160,200,255,.4), rgba(70,115,240,.28)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* стекло меню и кнопок карты — с тёмной подложкой, чтобы надписи читались и на светлой карте */
#nav { background: linear-gradient(180deg, rgba(60,84,170,.42), rgba(14,20,56,.62)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
#nav button { color: rgba(232,238,255,.78); text-shadow: 0 1px 3px rgba(0,10,50,.6); }
.wbtn { background: linear-gradient(180deg, rgba(70,100,190,.5), rgba(16,24,66,.66)); }
.maptip { background: linear-gradient(180deg, rgba(60,84,170,.5), rgba(14,20,56,.7)); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }

/* ═══ Правки по скриншотам: гладкие кнопки без видимых полос, чёрно-серое меню, кнопка профиля сверху ═══ */

/* водяная кнопка: один плавный градиент, тонкий блик по кромке — никаких ступенек */
.btn { border-radius: 26px; border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(180deg, rgba(190,215,255,.34) 0%, rgba(130,170,255,.26) 45%, rgba(80,120,240,.24) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,40,.25), 0 10px 26px rgba(40,90,240,.22), 0 2px 6px rgba(0,0,0,.28); }
.btn::before { display: none; }
.btn > i.sheen { width: 60%; filter: blur(10px); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.btn.gold { border-color: rgba(255,238,180,.7); background: linear-gradient(180deg, rgba(255,232,150,.94) 0%, rgba(246,201,90,.92) 50%, rgba(226,166,52,.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(120,70,0,.3), 0 10px 26px rgba(246,201,90,.28), 0 2px 6px rgba(0,0,0,.28); }
.btn.green { border-color: rgba(200,255,228,.6); background: linear-gradient(180deg, rgba(150,246,200,.92) 0%, rgba(69,221,150,.9) 50%, rgba(38,180,114,.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,80,40,.3), 0 10px 26px rgba(69,221,150,.24), 0 2px 6px rgba(0,0,0,.28); }
.btn.red { border-color: rgba(255,205,212,.55); background: linear-gradient(180deg, rgba(255,150,165,.92) 0%, rgba(255,91,116,.9) 50%, rgba(214,55,85,.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(100,0,30,.3), 0 10px 26px rgba(255,91,116,.24), 0 2px 6px rgba(0,0,0,.28); }
.btn.gold::before, .btn.green::before, .btn.red::before { display: none; }
.btn.ghost, .btn.flat { border-radius: 16px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
.wbtn { background: linear-gradient(180deg, rgba(58,60,72,.74), rgba(18,19,26,.82)); border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(0,0,0,.4); text-shadow: none; }
.wbtn::before { display: none; }
.wbtn.on { background: linear-gradient(180deg, rgba(255,232,150,.95), rgba(226,166,52,.92)); border-color: rgba(255,238,180,.8); }
.maptip { background: linear-gradient(180deg, rgba(58,60,72,.74), rgba(18,19,26,.82)); border-color: rgba(255,255,255,.16); }

/* меню: чёрно-серое стекло, активная вкладка — светлая стеклянная капля */
#nav { background: linear-gradient(180deg, rgba(52,54,64,.68), rgba(10,11,15,.86)); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 36px rgba(0,0,0,.55); }
#nav button { color: rgba(236,238,245,.6); text-shadow: none; }
#nav button.on { color: #fff; text-shadow: none; }
#nav button.on svg { filter: none; }
#nav .drop { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.35); }
#nav .drop::before { display: none; }
.tabs button.on, .seg button.on { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09)); border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); color: #fff; }

/* шапка: кнопка профиля — аватарка, имя и стрелка в одной стеклянной плашке */
#top { padding-top: calc(10px + var(--safe-t) + var(--tg-content-safe-area-inset-top, 0px)); }
.who { padding: 5px 12px 5px 5px; border-radius: 20px; background: linear-gradient(180deg, rgba(58,60,72,.6), rgba(18,19,26,.7)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); text-align: left; min-width: 0; transition: transform .15s, border-color .2s; color: var(--ink); }
.who:active { transform: scale(.96); }
.who.on { border-color: rgba(246,201,90,.6); }
.who .ava { width: 38px; height: 38px; border-radius: 14px; }
.who .name { font-size: 15px; max-width: 34vw; }
.who .sub { font-size: 11.5px; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .chev { width: 14px; height: 14px; transform: rotate(180deg); color: var(--mute); margin-left: 2px; }
.admbtn { border-radius: 50%; }
.cash { border-radius: 20px; background: linear-gradient(180deg, rgba(58,60,72,.6), rgba(18,19,26,.7)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }

/* карта: фон вокруг города и кнопки не поверх карты */
.mapwrap { background: radial-gradient(80% 50% at 50% 50%, #141a30, #07090f); }
.maphud { top: calc(70px + var(--safe-t) + var(--tg-content-safe-area-inset-top, 0px)); }
.zoom { flex-direction: row; left: 12px; right: 12px; justify-content: flex-end; bottom: calc(100px + var(--safe-b)); }
.maptip { right: 12px; bottom: calc(156px + var(--safe-b)); text-align: center; }
#world { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.6); border-radius: 6px; overflow: hidden; }