/* ═══ Тема «Жидкое стекло». Тёмный город, стекло, золото и цвет у каждой игры.
   Главные действия — водяные кнопки, второстепенные — обычные. Размытие только на меню, шторке и карте. ═══ */
:root { --bg0: #070913; --bg1: #0d1124; --ink: #f5f6fb; --mute: #9aa1ba; --faint: #68708c; --edge: rgba(255,255,255,.12);
  --card: linear-gradient(160deg, rgba(255,255,255,.105), rgba(255,255,255,.03)); --gold: #f6c95a; --aqua: #5ccbff; --green: #45dd96;
  --red: #ff5b74; --violet: #a58cff; --pink: #ff7cc2; --orange: #ff9f4d; --r: 22px; }
html, body { background: var(--bg0); }
.bg { background:
    radial-gradient(80% 40% at 10% -6%, rgba(246,201,90,.22), transparent 70%),
    radial-gradient(70% 38% at 108% 18%, rgba(92,140,255,.24), transparent 70%),
    radial-gradient(80% 44% at 36% 110%, rgba(165,140,255,.20), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0)); }
.bg i { display: none; }
.noanim *, .noanim *::before, .noanim *::after { animation: none !important; transition: none !important; }

.glass { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.26); }
.page { animation: page .22s ease-out; }
.stage.on { animation: page .2s ease-out; }
@keyframes page { from { opacity: 0; transform: translateY(8px); } }

/* ─── шапка ─── */
#top { background: linear-gradient(rgba(7,9,19,.97) 52%, transparent); padding-bottom: 16px; gap: 8px; }
.ava { border-radius: 15px; background: linear-gradient(145deg, #ffe690, #e0a12f); color: #2a1c00; box-shadow: 0 6px 18px rgba(246,201,90,.32), inset 0 1px 0 rgba(255,255,255,.65); }
.cash { color: var(--gold); border-radius: 16px; padding: 8px 13px; }
.admbtn { width: 40px; height: 40px; border-radius: 14px; display: none; place-items: center; flex: none; color: #2a1c00;
  background: linear-gradient(180deg, #ffe690, #e0a12f); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(246,201,90,.3); }
.admbtn.show { display: grid; }
.admbtn.on { background: linear-gradient(180deg, #ff93a3, #d93a58); color: #fff; }
.admbtn svg { width: 20px; height: 20px; }
.h { font-size: 12px; letter-spacing: .1em; color: var(--faint); margin: 22px 4px 10px; display: flex; align-items: center; gap: 8px; }
.h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.ico { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); color: var(--c, var(--ink));
  background: rgba(255,255,255,.07); background: linear-gradient(145deg, color-mix(in srgb, var(--c, #fff) 34%, transparent), color-mix(in srgb, var(--c, #fff) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.ico.gold { --c: var(--gold); } .ico.aqua { --c: var(--aqua); } .ico.green { --c: var(--green); } .ico.red { --c: var(--red); } .ico.violet { --c: var(--violet); }
.ico svg { width: 22px; height: 22px; }
.chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--mute); font-weight: 600; }
.chip.gold { background: rgba(246,201,90,.15); border-color: rgba(246,201,90,.35); color: var(--gold); }
.chip.green { background: rgba(69,221,150,.15); border-color: rgba(69,221,150,.35); color: var(--green); }
.chip.red { background: rgba(255,91,116,.15); border-color: rgba(255,91,116,.35); color: var(--red); }
.bar { height: 8px; background: rgba(255,255,255,.09); }
.bar i { background: linear-gradient(90deg, #ffe690, var(--gold)); box-shadow: 0 0 12px rgba(246,201,90,.55); }

/* ─── профиль: герой и показатели ─── */
.hero { position: relative; overflow: hidden; padding: 18px 16px 16px; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 0% 0%, rgba(246,201,90,.30), transparent 55%), radial-gradient(80% 120% at 100% 0%, rgba(92,140,255,.26), transparent 60%); pointer-events: none; }
.hero > * { position: relative; }
.hero .ava { width: 62px; height: 62px; border-radius: 21px; font-size: 27px; }
.lvl { min-width: 58px; padding: 7px 10px; border-radius: 16px; text-align: center; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }
.lvl b { display: block; font-size: 24px; line-height: 1; }
.lvl small { color: var(--mute); font-size: 10.5px; }
.wallet { position: relative; overflow: hidden; }
.wallet::before { content: ""; position: absolute; right: -40px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(246,201,90,.26), transparent 68%); }
.wallet > * { position: relative; }
.kv { padding: 10px 12px; border-radius: 15px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.kv .mut { font-size: 11.5px; }
.kv b { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 12px; display: flex; align-items: center; gap: 11px; position: relative; overflow: hidden; border-radius: 18px; min-width: 0;
  background: radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--c, #fff) 22%, transparent), transparent 60%), var(--card); }
.stat::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c, #fff), transparent); opacity: .7; }
.stat .ico { width: 40px; height: 40px; border-radius: 50%; }
.stat > div:last-child { min-width: 0; }
.stat .v { font-size: 17px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .k { color: var(--mute); font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── кнопки. Водяная — капля: прозрачное стекло, блик сверху, свет снизу, бегущий отблеск ─── */
.btn { min-height: 52px; border-radius: 26px; font-size: 15.5px; color: #fff; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 120%, rgba(150,225,255,.55), transparent 60%), linear-gradient(180deg, rgba(96,170,255,.62), rgba(52,96,235,.52));
  border: 1px solid rgba(205,235,255,.6);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.7), inset 0 -10px 18px rgba(18,44,150,.42), inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(46,110,255,.32); }
.btn::before { left: 9%; right: 9%; top: 3px; height: 42%; border-radius: 22px 22px 40px 40px; background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.04)); z-index: -1; }
.btn > i.sheen { position: absolute; top: 0; bottom: 0; left: -60%; width: 46%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation: sheen 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.btn:active { transform: scale(.955); filter: brightness(1.12) saturate(1.1); }
.btn.gold { color: #2a1c00; background: radial-gradient(120% 90% at 50% 120%, rgba(255,246,190,.8), transparent 60%), linear-gradient(180deg, #ffe690, #f6c95a 48%, #df9f2d);
  border-color: rgba(255,244,196,.95); box-shadow: inset 0 2px 1px rgba(255,255,255,.85), inset 0 -10px 18px rgba(150,88,0,.36), 0 10px 26px rgba(246,201,90,.36); }
.btn.gold::before { background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.05)); }
.btn.green { color: #04281a; background: radial-gradient(120% 90% at 50% 120%, rgba(200,255,228,.75), transparent 60%), linear-gradient(180deg, #93f5c4, #45dd96 48%, #28b472);
  border-color: rgba(206,255,232,.9); box-shadow: inset 0 2px 1px rgba(255,255,255,.75), inset 0 -10px 18px rgba(0,90,50,.36), 0 10px 26px rgba(69,221,150,.3); }
.btn.red { background: radial-gradient(120% 90% at 50% 120%, rgba(255,200,208,.6), transparent 60%), linear-gradient(180deg, #ff93a3, #ff5b74 48%, #d83957);
  border-color: rgba(255,206,214,.8); box-shadow: inset 0 2px 1px rgba(255,255,255,.6), inset 0 -10px 18px rgba(120,0,30,.36), 0 10px 26px rgba(255,91,116,.3); }
/* обычная кнопка — для второстепенного */
.btn.ghost, .btn.flat { border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: none; color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost::before, .btn.flat::before, .btn.ghost > i.sheen, .btn.flat > i.sheen { display: none; }
.btn.ghost:active, .btn.flat:active { background: rgba(255,255,255,.14); filter: none; }
.btn.sm { min-height: 42px; border-radius: 21px; }
.btn.ghost.sm, .btn.flat.sm { border-radius: 14px; }

/* маленькая водяная кнопка — на карте */
.wbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 42px; padding: 0 15px; border-radius: 21px;
  font-weight: 700; font-size: 13.5px; color: #fff; background: linear-gradient(180deg, rgba(70,96,170,.6), rgba(22,30,70,.72)); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -8px 12px rgba(0,0,40,.3), 0 8px 18px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); transition: transform .14s; }
.wbtn::before { content: ""; position: absolute; left: 9%; right: 9%; top: 2px; height: 42%; border-radius: 18px 18px 30px 30px; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
.wbtn:active { transform: scale(.93); }
.wbtn svg { width: 17px; height: 17px; }
.wbtn.on { background: linear-gradient(180deg, #ffe690, #df9f2d); color: #2a1c00; border-color: rgba(255,244,196,.95); }
.wbtn.round { width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 24px; border-radius: 50%; }

/* ─── водяное меню: полоса жидкого стекла, активная вкладка — прозрачная капля ─── */
#nav { left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); border-radius: 32px; padding: 6px;
  background: linear-gradient(180deg, rgba(150,180,255,.20), rgba(40,56,120,.20)); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -10px 20px rgba(10,20,70,.4), 0 16px 36px rgba(0,0,0,.5); overflow: hidden; }
#nav::before { content: ""; position: absolute; left: 6%; right: 6%; top: 2px; height: 38%; border-radius: 28px 28px 50px 50px; background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,0)); pointer-events: none; }
#nav button { color: rgba(225,232,255,.6); border-radius: 26px; padding: 8px 0 6px; position: relative; z-index: 1; }
#nav button.on { color: #fff; background: radial-gradient(120% 100% at 50% 120%, rgba(160,225,255,.55), transparent 62%), linear-gradient(180deg, rgba(120,180,255,.5), rgba(60,104,240,.42));
  border: 0; box-shadow: inset 0 2px 1px rgba(255,255,255,.75), inset 0 -8px 14px rgba(18,44,150,.4), 0 6px 18px rgba(60,130,255,.45); text-shadow: 0 1px 2px rgba(0,20,80,.5); }
#nav button.on::before { content: ""; position: absolute; left: 14%; right: 14%; top: 3px; height: 40%; border-radius: 20px 20px 34px 34px; background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0)); }
#nav button.on::after { display: none; }
#nav button.on svg { transform: translateY(-1px) scale(1.1); filter: drop-shadow(0 1px 2px rgba(0,20,80,.5)); }
#view { padding-bottom: calc(104px + var(--safe-b)); }

.sheet-body { left: 8px; right: 8px; bottom: 8px; border-radius: 30px; background: linear-gradient(165deg, rgba(48,60,116,.94), rgba(15,19,44,.97));
  border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 -10px 40px rgba(0,0,0,.5);
  transform: translateY(calc(100% + 30px)); }
.opt { background: rgba(255,255,255,.06); border: 1px solid var(--edge); border-radius: 16px; }

/* ─── уведомления: стеклянная плашка со значком и таймером ─── */
#toasts { top: calc(58px + var(--safe-t)); gap: 8px; }
.toast { display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; border-radius: 22px; text-align: left; max-width: 90vw; position: relative; overflow: hidden; font-weight: 600;
  background: linear-gradient(165deg, rgba(58,72,134,.94), rgba(20,26,58,.96)); border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 34px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: toastIn .45s cubic-bezier(.2,1.3,.4,1), toastOut .35s ease-in 2.5s forwards; }
.toast .ti { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(92,203,255,.2); color: var(--aqua); }
.toast .ti svg { width: 18px; height: 18px; stroke-width: 2.2; }
.toast.ok .ti { background: rgba(69,221,150,.22); color: var(--green); }
.toast.bad .ti { background: rgba(255,91,116,.22); color: var(--red); }
.toast.ok { border-color: rgba(69,221,150,.5); }
.toast.bad { border-color: rgba(255,91,116,.5); }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--aqua); opacity: .6; transform-origin: left; animation: toastBar 2.5s linear forwards; }
.toast.ok::after { background: var(--green); }
.toast.bad::after { background: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-22px) scale(.86); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes toastBar { to { transform: scaleX(0); } }

.stage { background: radial-gradient(90% 46% at 50% -6%, rgba(92,140,255,.26), transparent 70%), linear-gradient(180deg, var(--bg1), var(--bg0)); }
.stage-top .x, .hud .pill { background: var(--card); border: 1px solid var(--edge); border-radius: 15px; }
.timebar i { background: linear-gradient(90deg, var(--gold), #ffe690); box-shadow: 0 0 10px rgba(246,201,90,.6); }
.play { background: rgba(3,5,13,.6); border-radius: 24px; border: 1px solid var(--edge); box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.result .score { background: linear-gradient(120deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; }
.tile { background: var(--card); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px rgba(0,0,0,.26); border-radius: 18px; }
.seq span { background: rgba(246,201,90,.16); border-color: rgba(246,201,90,.45); }

/* ─── работа ─── */
.job { border-radius: 20px; position: relative; overflow: hidden; background: radial-gradient(70% 140% at 0% 50%, color-mix(in srgb, var(--c, #fff) 20%, transparent), transparent 62%), var(--card); }
.job::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--c, var(--aqua)); box-shadow: 0 0 10px var(--c, var(--aqua)); }
.job .n { font-size: 15.5px; font-weight: 700; }
.job .tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--c); background: rgba(255,255,255,.08); background: color-mix(in srgb, var(--c) 18%, transparent); }
.job.best { border-color: rgba(246,201,90,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(246,201,90,.22), 0 12px 30px rgba(246,201,90,.16); }

/* ─── казино ─── */
.gcard { min-height: 138px; border-radius: 24px; position: relative; overflow: hidden;
  background: radial-gradient(100% 90% at 100% 0%, color-mix(in srgb, var(--c) 44%, transparent), transparent 62%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), var(--card); }
.gcard::after { display: none; }
.gcard .ico { width: 54px; height: 54px; border-radius: 18px; }
.gcard .ico svg { width: 29px; height: 29px; }
.gcard b { font-size: 17.5px; }
.gcard .tagc { position: absolute; right: 12px; top: 12px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 11px; color: var(--c); background: rgba(7,9,19,.6); border: 1px solid rgba(255,255,255,.2); }
.betbox { border-radius: 26px; margin: 0 10px calc(10px + var(--safe-b)); padding: 12px; }
.betrow input { background: rgba(0,0,0,.3); border-radius: 15px; }
.quick button { background: rgba(255,255,255,.08); border: 1px solid var(--edge); border-radius: 12px; color: var(--ink); }
.seg { padding: 4px; border-radius: 18px; }
.seg button.on { background: linear-gradient(180deg, rgba(120,180,255,.5), rgba(60,104,240,.42)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6); }

/* ─── город: плитки разделов ─── */
.tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sect { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 124px; transition: transform .15s; position: relative; overflow: hidden; border-radius: 24px;
  background: radial-gradient(100% 90% at 100% 0%, color-mix(in srgb, var(--c, #fff) 40%, transparent), transparent 62%), radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c, #fff) 14%, transparent), transparent 70%), var(--card); }
.sect:active { transform: scale(.96); }
.sect .ico { width: 50px; height: 50px; border-radius: 17px; }
.sect .ico svg { width: 26px; height: 26px; }
.sect b { font-size: 16.5px; }
.sect small { color: var(--mute); font-size: 12.5px; line-height: 1.3; }
.sect .arr { position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: rgba(255,255,255,.08); }
.sect .arr svg { width: 14px; height: 14px; transform: rotate(180deg); }
.sect .dot { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(246,201,90,.6); } 100% { box-shadow: 0 0 0 10px rgba(246,201,90,0); } }
.bonus { position: relative; overflow: hidden; background: radial-gradient(90% 140% at 0% 50%, rgba(246,201,90,.28), transparent 60%), var(--card); border-color: rgba(246,201,90,.35); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-weight: 600; margin: 0 2px 12px; padding: 6px 2px; }
.back svg { width: 18px; height: 18px; }
.line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 9px; border-radius: 19px; transition: transform .14s; }
.line:active { transform: scale(.985); }
.line .t { font-weight: 700; }
.line .r { text-align: right; font-weight: 700; white-space: nowrap; }
.line.off { opacity: .45; }
.tabs { display: flex; gap: 7px; overflow-x: auto; margin: 0 -14px 12px; padding: 0 14px 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 9px 15px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); color: var(--mute); font-weight: 600; font-size: 13.5px; }
.tabs button.on { color: #fff; border-color: rgba(205,235,255,.6); background: linear-gradient(180deg, rgba(120,180,255,.5), rgba(60,104,240,.42)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6); }
.spark { width: 100%; height: 120px; display: block; }
.mini { width: 74px; height: 28px; flex: none; }
.meter { height: 8px; border-radius: 8px; background: rgba(255,91,116,.3); overflow: hidden; display: flex; margin-top: 9px; }
.meter i { background: var(--green); height: 100%; }
.field { width: 100%; height: 48px; border-radius: 15px; padding: 0 14px; font: inherit; font-weight: 600; color: #fff; background: rgba(0,0,0,.28); border: 1px solid var(--edge); outline: none; margin-top: 8px; }
.field:focus { border-color: rgba(92,203,255,.7); }
.wheelbox { width: 270px; height: 270px; position: relative; margin: 14px auto; }
.wheelbox canvas { width: 100%; height: 100%; border-radius: 50%; transition: transform 4.6s cubic-bezier(.12,.72,.1,1); box-shadow: 0 0 0 6px rgba(246,201,90,.35), 0 16px 40px rgba(0,0,0,.5); }
.wheelbox::after { content: ""; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); border: 11px solid transparent; border-top: 22px solid var(--gold); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.crash { width: 100%; flex: 1; position: relative; min-height: 260px; }
.crash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash .m { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 62px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pad4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 320px; }
.pad4 button { aspect-ratio: 1; border-radius: 26px; opacity: .4; transition: opacity .12s, transform .12s; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -12px 20px rgba(0,0,0,.25); }
.pad4 button.lit { opacity: 1; transform: scale(1.04); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 34px currentColor; }
.empty { text-align: center; color: var(--mute); padding: 26px 10px; }
.alert { border-color: rgba(255,91,116,.5); background: radial-gradient(90% 90% at 100% 0%, rgba(255,91,116,.3), transparent 60%), var(--card); }

/* ─── карты «больше-меньше» и плинко ─── */
.pcard { width: 132px; height: 184px; border-radius: 18px; background: linear-gradient(160deg, #fff, #dfe5fa); color: #171c40; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 -6px 12px rgba(80,90,150,.2); display: grid; place-items: center; font-weight: 900; font-size: 62px; }
.pcard.red { color: #d92e52; }
.pcard small { position: absolute; left: 12px; top: 8px; font-size: 20px; line-height: 1.05; text-align: center; }
.pcard.flip { animation: flip .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes flip { 0% { transform: rotateY(90deg) scale(.9); } 100% { transform: none; } }
.plinko { width: 100%; flex: 1; position: relative; min-height: 300px; }
.plinko canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── админка ─── */
.admhead { background: radial-gradient(100% 140% at 0% 0%, rgba(255,91,116,.3), transparent 60%), var(--card); border-color: rgba(255,91,116,.35); }
.sw { width: 52px; height: 30px; border-radius: 30px; background: rgba(255,255,255,.14); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sw.on { background: linear-gradient(180deg, #93f5c4, #28b472); }
.sw.on::after { transform: translateX(22px); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.presets button { padding: 6px 11px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid var(--edge); font-weight: 700; font-size: 12.5px; }
.presets button.on { background: linear-gradient(180deg, #ffe690, #df9f2d); color: #2a1c00; border-color: transparent; }

/* ─── карта ─── */
.mapwrap { position: absolute; inset: 0; background: #0b0f1e; overflow: hidden; touch-action: none; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#world img, #world canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#mapImg { opacity: 0; transition: opacity .5s; }
#lGang { transition: opacity .35s; }
#lFree { animation: freePulse 1.5s ease-in-out infinite alternate; }
@keyframes freePulse { from { opacity: .55; } to { opacity: 1; } }
#mapSel { position: absolute; display: none; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 0 2px rgba(92,203,255,.9), 0 0 16px 4px rgba(92,203,255,.8); pointer-events: none; }
.maphud { position: absolute; left: 0; right: 0; top: calc(66px + var(--safe-t)); display: flex; gap: 8px; padding: 0 12px 6px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
.maphud::-webkit-scrollbar { display: none; }
.maptip { position: absolute; left: 12px; right: 74px; bottom: calc(100px + var(--safe-b)); padding: 10px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(70,96,170,.6), rgba(22,30,70,.72)); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; }
.zoom { position: absolute; right: 12px; bottom: calc(100px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }