:root {
  --bg: #000;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-hi: rgba(255, 255, 255, 0.095);
  --line: rgba(205, 228, 255, 0.13);
  --line-hi: rgba(220, 239, 255, 0.24);
  --text: #f4f7fb;
  --dim: rgba(244, 247, 251, 0.56);
  --faint: rgba(244, 247, 251, 0.34);
  --blue: #38b6ff;
  --blue-soft: rgba(56, 182, 255, 0.14);
  --blue-line: rgba(56, 182, 255, 0.46);
  --ok: #5ee6a0;
  --warn: #ffc65c;
  --bad: #ff6b7d;
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(30, 104, 180, .25), transparent 38%),
    radial-gradient(ellipse at 91% 34%, rgba(105, 51, 163, .16), transparent 34%),
    radial-gradient(ellipse at 48% 100%, rgba(16, 75, 131, .14), transparent 42%),
    linear-gradient(155deg, #090d17 0%, #05070c 48%, #090812 100%);
  color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none;
}
body { -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img { -webkit-user-drag: none; }
#app { position: fixed; inset: 0; }

/* ---------- стекло ---------- */
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.11), transparent 43%),
    radial-gradient(85% 75% at 100% 100%, rgba(76,157,255,.075), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 46%, rgba(255,255,255,.055)),
    rgba(11,16,28,.36);
  border: 1px solid var(--line);
  border-top-color: rgba(255,255,255,.27);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
  border-radius: 23px;
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.035);
}
.glass::before {
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.105), transparent 19%, transparent 66%, rgba(91,177,255,.055));
  opacity: .78;
}
.glass::after {
  content: ""; position: absolute; z-index: 2; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); opacity: .55;
}
.glass > * { position: relative; z-index: 1; }
.glass > .glass { overflow: hidden; }

@media (hover: hover) {
  .glass { transition: border-color .28s ease, box-shadow .28s ease, background-color .28s ease; }
  .glass:hover { border-color: rgba(220,239,255,.23); box-shadow: 0 17px 44px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.04); }
}

/* ---------- кнопки ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 56px; border-radius: 20px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
  background:
    radial-gradient(130% 120% at 8% 0%, rgba(255,255,255,.25), transparent 42%),
    radial-gradient(100% 150% at 100% 100%, rgba(70,166,255,.1), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035) 48%, rgba(255,255,255,.1)),
    rgba(255,255,255,.045);
  border: 1px solid rgba(225,242,255,.3); border-top-color: rgba(255,255,255,.48); color: var(--text);
  -webkit-backdrop-filter: blur(27px) saturate(180%); backdrop-filter: blur(27px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.07), 0 12px 32px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn::before, .btn::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
}
.btn::before {
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 34%, rgba(255,255,255,.025) 72%, rgba(255,255,255,.085));
}
.btn::after {
  left: -70%; right: auto; width: 48%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-18deg) translateX(-140%);
  transition: transform .75s cubic-bezier(.2,.75,.2,1);
}
.btn:hover::after, .btn:focus-visible::after { transform: skewX(-18deg) translateX(510%); }
.btn:active { transform: scale(0.975); box-shadow: inset 0 2px 10px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px rgba(0,0,0,.2); }
.btn.primary {
  background:
    radial-gradient(130% 130% at 8% 0%, rgba(187,238,255,.34), transparent 45%),
    linear-gradient(145deg, rgba(77,194,255,.31), rgba(56,182,255,.12) 52%, rgba(255,255,255,.075)),
    rgba(28,117,180,.18);
  border-color: rgba(160,224,255,.48); color: #e0f5ff;
  box-shadow: 0 0 34px rgba(56,182,255,.18), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.2);
}
.btn.primary:active { box-shadow: 0 0 22px rgba(56,182,255,.16), inset 0 2px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.34); }
.btn.sm { height: 46px; font-size: 15px; border-radius: 16px; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.ico-btn, .pill {
  position: relative; isolation: isolate; overflow: hidden;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.2);
  transition: transform .18s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ico-btn::before, .pill::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 48%, rgba(255,255,255,.06)); }
.ico-btn { width: 56px; height: 56px; flex: none; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.24); }
.ico-btn svg { width: 22px; height: 22px; }
.ico-btn:active, .pill:active { transform: scale(.96); }
.pill { height: 34px; padding: 0 15px; border-radius: 12px; font-size: 14px; font-weight: 600; background: linear-gradient(145deg, rgba(113,207,255,.26), rgba(56,182,255,.09)); border: 1px solid rgba(145,220,255,.42); color: #dff5ff; flex: none; }
.btn:focus-visible, .ico-btn:focus-visible, .pill:focus-visible { outline: 2px solid rgba(190,235,255,.9); outline-offset: 3px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- навигация ---------- */
#nav {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 20;
  display: flex; gap: 4px; padding: 5px; border-radius: 24px;
  max-width: calc(100vw - 16px);
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(255,255,255,.13), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(8,12,22,.5);
  border: 1px solid rgba(220,239,255,.19); border-top-color: rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(32px) saturate(185%); backdrop-filter: blur(32px) saturate(185%);
  box-shadow: 0 12px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.04);
}
#nav.hide { display: none; }
#nav button { position: relative; isolation: isolate; overflow: hidden; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 46px; padding: 0 9px; border-radius: 19px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--dim); -webkit-backdrop-filter: blur(18px) saturate(155%); backdrop-filter: blur(18px) saturate(155%); transition: background .25s, color .25s, transform .18s ease, box-shadow .25s ease; }
#nav button::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 52%, rgba(255,255,255,.035)); opacity: 0; transition: opacity .25s ease; }
#nav button:active { transform: scale(.96); }
#nav button svg { width: 21px; height: 21px; }
#nav button.on { color: #fff; background: radial-gradient(ellipse at 25% 0%, rgba(255,255,255,.22), transparent 62%), linear-gradient(145deg, rgba(84,174,255,.2), rgba(255,255,255,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.13), 0 5px 18px rgba(13,85,150,.2); }
#nav button.on::before { opacity: 1; }

/* ---------- главная ---------- */
.home { position: absolute; inset: 0; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 0; }
.case-wrap { position: absolute; inset: 0; animation: float 6.5s ease-in-out infinite; }
.case-fallback { position: absolute; inset: 0; place-items: center; font-size: clamp(96px, 28vw, 170px); filter: drop-shadow(0 16px 40px rgba(56,182,255,.22)); }
.case-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 46%;
  transform: scale(1.03); transition: opacity .5s ease, filter .5s ease;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #000 62%, transparent 100%);
}
.home.locked .case-img { opacity: .5; filter: saturate(.55) brightness(.85); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--c, #ffc65c); box-shadow: 0 0 8px var(--c, #ffc65c); opacity: 0; animation: rise var(--d, 5s) ease-in infinite; animation-delay: var(--t, 0s); left: var(--x); bottom: 14%; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-190px) scale(1); } }
.lock-badge { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid var(--line-hi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lock-badge svg { width: 30px; height: 30px; }

.dock { flex: none; padding: 0 20px calc(92px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.case-title-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.case-title-row .case-name { flex: 1; }
.prize-btn { width: auto; min-width: 74px; padding: 0 15px; }
.case-name { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.case-name svg { width: 22px; height: 22px; opacity: .7; }
.case-note { text-align: center; font-size: 14px; color: var(--dim); margin-top: -4px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.case-note svg { width: 15px; height: 15px; }
.lock-card { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.lk-top { display: flex; align-items: center; gap: 13px; }
.lk-top img, .lk-top .lk-prize-icon { width: 52px; height: 52px; object-fit: contain; flex: none; }
.lk-top .lk-prize-icon.emoji { display: grid; place-items: center; font-size: 34px; }
.lk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-t b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lk-t span { font-size: 13.5px; color: var(--dim); }
.lk-n { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.lk-n small { font-size: 14px; color: var(--faint); font-weight: 600; }
.bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--blue); box-shadow: 0 0 12px var(--blue); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.row-btns { display: flex; gap: 10px; }
.hint { text-align: center; font-size: 13px; color: var(--faint); margin: -2px 0 0; }

/* ---------- профиль ---------- */
.page { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--safe-t) + 22px) 18px calc(112px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.me { display: flex; align-items: center; gap: 15px; padding: 16px; }
.ava { width: 62px; height: 62px; border-radius: 50%; flex: none; object-fit: cover; background: var(--glass-hi); border: 1px solid var(--line-hi); display: grid; place-items: center; font-size: 25px; font-weight: 700; }
.me-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-t b { font-size: 21px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-t span { font-size: 14px; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; border-radius: 20px; }
.stat b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--dim); }
.card { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.card h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.45; }
.wheel-card { border-color: rgba(255,198,92,.22); background: linear-gradient(130deg, rgba(255,198,92,.07), rgba(255,255,255,.025)); }
.ticket-count { flex: none; padding: 7px 10px; border-radius: 13px; background: rgba(255,198,92,.1); border: 1px solid rgba(255,198,92,.28); color: #ffdc91; font-size: 14px; font-weight: 700; }
.wheel-actions { width: 100%; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; align-items: center; }
.wheel-actions .btn { height: 54px; min-width: 0; font-size: 16px; }
.wheel-prizes-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.wheel-game { position: relative; width: 100%; display: grid; place-items: center; flex: none; }
.wheel-game-preview { flex: 0 0 auto; width: min(76vw, 320px); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
.wheel-game-roll { flex: none; width: min(82vw, 340px); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
.wheel-disc { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 7px solid rgba(255,255,255,.76); background: var(--wheel-gradient, conic-gradient(#ff4d6d 0deg 180deg, #ff5ec4 180deg 360deg)); box-shadow: 0 0 44px rgba(255,94,196,.26), inset 0 0 0 2px rgba(0,0,0,.22); }
.wheel-game-preview .wheel-disc { animation: idle-wheel-spin 24s linear infinite; transform-origin: 50% 50%; }
.wheel-game-roll .wheel-disc { border-width: 9px; box-shadow: 0 0 55px rgba(255,94,196,.3), inset 0 0 0 2px rgba(0,0,0,.24); }
.wheel-game-roll .wheel-disc { transition: transform 9s cubic-bezier(.08,.72,.12,1); will-change: transform; }
.wheel-mark { position: absolute; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%,-50%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.wheel-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.86); border-radius: 50%; background: #17151d; box-shadow: 0 2px 12px rgba(0,0,0,.35); font-size: 22px; z-index: 2; }
.wheel-pointer { position: absolute; z-index: 4; top: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 27px solid #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.wheel-game-preview .wheel-pointer { top: 1px; border-left-width: 12px; border-right-width: 12px; border-top-width: 22px; }
@keyframes idle-wheel-spin { to { transform: rotate(360deg); } }
.wheel-game.gone { opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .45s ease, transform .6s ease; }
.wheel-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wheel-page-head > div { display: flex; flex-direction: column; gap: 7px; }
.wheel-page-head h2 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.wheel-page-head span { color: var(--dim); font-size: 14px; line-height: 1.45; }
.task-ticket-btn { height: 52px; font-size: 16px; color: #ffdc91; background: rgba(255,198,92,.09); border-color: rgba(255,198,92,.25); }
.task-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.task-page-head > div { display: flex; flex-direction: column; gap: 7px; }
.wallet-pills { display: flex; flex: none; gap: 6px; }
.wallet-pills .ticket-count { padding: 7px 8px; }
.task-page-head h2 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.task-page-head span:not(.ticket-count) { color: var(--dim); font-size: 14px; line-height: 1.45; }
.task-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.task-card-head { display: flex; align-items: flex-start; gap: 12px; }
.task-card-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-card-head h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.task-card-head p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.task-card .ticket-count { font-size: 13px; white-space: nowrap; }
.task-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
.task-actions .btn, .task-card > .btn { height: 48px; border-radius: 16px; font-size: 14px; padding: 0 8px; }
.task-open-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.task-done { border-color: rgba(94,230,160,.25); }
.task-earned { color: var(--ok); font-size: 14px; font-weight: 650; }
.wheel-prizes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.wheel-prizes-head .h2 { margin: 0; }
.wheel-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.wheel-legend-row { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 16px; }
.legend-icon { width: 32px; height: 32px; flex: none; object-fit: contain; }
.wheel-legend-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.2; }
.sheet-prize-row { display: flex; align-items: center; gap: 13px; padding: 10px 13px; border-radius: 18px; }
.sheet-prize-icon { width: 44px; height: 44px; flex: none; object-fit: contain; }
.sheet-prize-icon.emoji { display: grid; place-items: center; font-size: 30px; }
.image-fallback { display: grid; place-items: center; }
.captcha-sequence { display: flex; justify-content: center; gap: 8px; }
.captcha-step { width: 42px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--dim); font-size: 23px; font-weight: 750; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.captcha-step.done { color: #fff; background: rgba(56,182,255,.16); border-color: rgba(127,208,255,.48); box-shadow: 0 0 20px rgba(56,182,255,.12); }
.captcha-keyboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.captcha-key { height: 56px; border-radius: 16px; color: #fff; font-size: 27px; font-weight: 650; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); border: 1px solid var(--line-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform .16s, opacity .16s, background .16s; }
.captcha-key:active { transform: scale(.94); background: var(--blue-soft); }
.captcha-key.selected, .captcha-key[disabled] { opacity: .3; pointer-events: none; }
.captcha-progress { margin: -5px 0 0; text-align: center; color: var(--faint); font-size: 13px; }
.captcha-retry { height: 48px; font-size: 14px; background: rgba(255,255,255,.055); }
.linkrow { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 15px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.linkrow span { flex: 1; min-width: 0; font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; -webkit-user-select: text; }
.linkrow button { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-hi); }
.linkrow svg { width: 18px; height: 18px; }
.h2 { margin: 8px 4px -2px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.prize-row { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 20px; }
.prize-icon { width: 46px; height: 46px; object-fit: contain; flex: none; }
.prize-icon.emoji { display: grid; place-items: center; font-size: 31px; }
.pr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-t b { font-size: 16.5px; font-weight: 650; }
.pr-t span { font-size: 13px; color: var(--faint); }
.chip { flex: none; font-size: 12.5px; font-weight: 650; padding: 6px 11px; border-radius: 11px; border: 1px solid var(--line-hi); color: var(--dim); background: rgba(255,255,255,.04); }
.chip.wait { color: #cfeeff; border-color: var(--blue-line); background: var(--blue-soft); }
.chip.pend { color: var(--warn); border-color: rgba(255,198,92,.4); background: rgba(255,198,92,.09); }
.chip.done { color: var(--ok); border-color: rgba(94,230,160,.4); background: rgba(94,230,160,.09); }
.chip.no { color: var(--bad); border-color: rgba(255,107,125,.4); background: rgba(255,107,125,.09); }
.chip.ticket { color: #ffdc91; border-color: rgba(255,198,92,.35); background: rgba(255,198,92,.08); }
.empty { text-align: center; color: var(--faint); font-size: 14.5px; padding: 26px 10px; }

/* ---------- состояния ---------- */
.center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.center .loader { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); border-top-color: var(--blue); animation: rot .8s linear infinite; }
.center h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.center p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.5; max-width: 320px; }
.center .btn { width: auto; padding: 0 30px; }

/* ---------- шторка ---------- */
#sheet { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#sheet.on { pointer-events: auto; }
#sheet .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .3s ease; }
#sheet.on .backdrop { opacity: 1; }
#sheet .panel {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); padding: 14px 18px 18px; border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.13), transparent 65%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
    rgba(8,10,18,.78);
  border: 1px solid rgba(225,241,255,.24); border-top-color: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(38px) saturate(175%); backdrop-filter: blur(38px) saturate(175%);
  box-shadow: 0 20px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.27), inset 0 -1px 0 rgba(255,255,255,.04);
  transform: translateY(110%); transition: transform .42s cubic-bezier(.2,.9,.25,1);
  display: flex; flex-direction: column; gap: 14px; max-height: 86%; overflow-y: auto;
}
#sheet.on .panel { transform: none; }
.grab { width: 38px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 0 auto 2px; }
.panel h3 { margin: 4px 0 0; font-size: 23px; font-weight: 750; letter-spacing: -0.02em; text-align: center; }
.panel .sub { margin: -6px 0 0; font-size: 14.5px; color: var(--dim); text-align: center; line-height: 1.45; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.ch-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-soft); border: 1px solid var(--blue-line); flex: none; }
.ch-ic svg { width: 20px; height: 20px; }
.ch-t { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.big-ok { width: 70px; height: 70px; border-radius: 50%; margin: 4px auto 0; display: grid; place-items: center; background: rgba(94,230,160,.1); border: 1px solid rgba(94,230,160,.45); box-shadow: 0 0 40px rgba(94,230,160,.18); }
.big-ok svg { width: 34px; height: 34px; }

/* ---------- рулетка ---------- */
#roulette { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, rgba(35, 39, 78, .54) 0%, rgba(9, 10, 18, .96) 48%, #030407 100%); display: none; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .42s ease; }
#roulette::before { content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 32% 40%, rgba(75, 149, 255, .16), transparent 34%), radial-gradient(ellipse at 72% 60%, rgba(179, 92, 255, .13), transparent 38%); filter: blur(22px); animation: roulette-ambience 8s ease-in-out infinite alternate; }
#roulette::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .46) 0%, rgba(255, 221, 147, .18) 19%, transparent 58%); }
#roulette.jackpot::after { animation: jackpot-flash 1s cubic-bezier(.12,.7,.2,1) both; }
#roulette > * { z-index: 1; }
#roulette.on { display: flex; }
#roulette.vis { opacity: 1; }
.r-title { position: absolute; top: calc(var(--safe-t) + 34px); left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 750; letter-spacing: .18em; color: rgba(226, 232, 255, .64); text-shadow: 0 0 22px rgba(136, 164, 255, .32); transition: opacity .4s, color .3s, transform .3s; }
.r-title-win { color: #fff4d1; letter-spacing: .22em; text-shadow: 0 0 12px rgba(255, 228, 161, .85), 0 0 34px rgba(255, 194, 87, .5); transform: scale(1.08); }
.r-stage { position: relative; width: 100%; height: 170px; transition: opacity .45s ease, transform .6s cubic-bezier(.3,.7,.2,1), height .6s ease; }
.r-stage.gone { opacity: 0; transform: scale(.94); pointer-events: none; }
.r-mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
.r-strip { position: absolute; left: 0; top: 50%; margin-top: -68px; display: flex; gap: 14px; will-change: transform; }
.r-item { position: relative; overflow: hidden; width: 104px; height: 136px; flex: none; border-radius: 22px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.09), rgba(255,255,255,.025) 62%); border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 36px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: .48; transform: scale(.92); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s; }
.r-item::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -58%; width: 44%; pointer-events: none; opacity: 0; transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); }
.r-icon { width: 70px; height: 70px; object-fit: contain; }
.r-icon.emoji { display: grid; place-items: center; font-size: 49px; }
.r-item.near { opacity: 1; transform: scale(1.08); border-color: color-mix(in srgb, var(--c) 82%, white); background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.15), rgba(255,255,255,.045) 70%); box-shadow: 0 0 30px -4px var(--c), inset 0 0 26px rgba(255,255,255,.055); }
.r-item.near::after, .r-item.won::after { opacity: 1; animation: card-sweep 1.15s ease-in-out infinite; }
.r-item.won { opacity: 1; transform: scale(1.14); border-color: var(--c); box-shadow: 0 0 50px -2px var(--c), 0 0 100px -22px rgba(255,236,185,.72), inset 0 0 28px rgba(255,255,255,.11); background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.2), rgba(255,255,255,.055) 70%); animation: winner-card .78s cubic-bezier(.16,1.4,.3,1) both; }
.r-line { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; z-index: 3; background: linear-gradient(180deg, transparent, var(--blue) 20%, var(--blue) 80%, transparent); box-shadow: 0 0 14px var(--blue); border-radius: 2px; }
.r-line::before, .r-line::after { content: ""; position: absolute; left: 50%; margin-left: -7px; border: 7px solid transparent; }
.r-line::before { top: -2px; border-top: 9px solid var(--blue); }
.r-line::after { bottom: -2px; border-bottom: 9px solid var(--blue); }
.r-result { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 24px; display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.r-result.on { display: flex; }
.r-glow { position: relative; width: 220px; height: 220px; display: grid; place-items: center; isolation: isolate; }
.r-glow::before { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, rgba(255,255,255,.14) 23%, transparent 68%); opacity: .5; animation: pulse 1.8s ease-in-out infinite; }
.r-glow::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 18px rgba(255,255,255,.08); animation: halo-orbit 8s linear infinite; }
.r-win-icon { position: relative; width: 176px; height: 176px; object-fit: contain; animation: jackpot-pop 1s cubic-bezier(.16,1.35,.28,1) both; filter: drop-shadow(0 14px 28px rgba(0,0,0,.52)) drop-shadow(0 0 22px var(--c)); }
.r-win-icon.emoji { display: grid; place-items: center; font-size: 125px; }
@keyframes roulette-ambience { from { transform: translate3d(-2%, -1%, 0) scale(.96); } to { transform: translate3d(2%, 1%, 0) scale(1.08); } }
@keyframes jackpot-flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }
@keyframes card-sweep { 0%, 20% { transform: translateX(0) rotate(24deg); } 75%, 100% { transform: translateX(370%) rotate(24deg); } }
@keyframes winner-card { 0% { transform: scale(.92); } 58% { transform: scale(1.22); } 100% { transform: scale(1.14); } }
@keyframes jackpot-pop { 0% { transform: scale(.18) rotate(-18deg); opacity: 0; } 65% { transform: scale(1.13) rotate(4deg); opacity: 1; } 82% { transform: scale(.96) rotate(-2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes pulse { 50% { opacity: .75; transform: scale(1.1); } }
@keyframes halo-orbit { to { transform: rotate(360deg) scale(1.035); } }
.r-name { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-shadow: 0 0 26px color-mix(in srgb, var(--c) 42%, transparent); }
.r-need { font-size: 15.5px; color: var(--dim); line-height: 1.45; max-width: 310px; }
.r-need b { color: var(--text); font-weight: 650; }
.r-actions { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.r-result > * { animation: up .55s cubic-bezier(.2,.9,.3,1) both; }
.r-result > :nth-child(2) { animation-delay: .1s; } .r-result > :nth-child(3) { animation-delay: .16s; } .r-result > :nth-child(4) { animation-delay: .22s; } .r-result > :nth-child(5) { animation-delay: .3s; }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- тост и конфетти ---------- */
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translate(-50%, 20px); z-index: 90; max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 16px; font-size: 14.5px; font-weight: 550; text-align: center; opacity: 0; pointer-events: none; background: rgba(24,24,28,.78); border: 1px solid var(--line-hi); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; width: 100%; height: 100%; }

@media (max-height: 640px) { .case-name { font-size: 28px; } .dock { gap: 10px; } .btn { height: 52px; } }
@media (max-width: 380px) { #nav { gap: 2px; } #nav button { gap: 3px; padding: 0 5px; font-size: 11px; } #nav button svg { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) {
  .case-wrap, .spark, .wheel-game-preview .wheel-disc, .r-glow::before, .r-glow::after, .r-item::after, .r-item.won, .r-win-icon, #roulette::before, #roulette.jackpot::after { animation: none !important; }
  .btn, .btn::after, .ico-btn, .pill, #nav button { transition-duration: .01ms !important; }
}

/* ---------- яркая чёткая рулетка ---------- */
#roulette { background: radial-gradient(ellipse at 50% 45%, #1b2a6b 0%, #0b0f24 55%, #04050b 100%); }
.r-mask { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.r-item { opacity: 1; transform: scale(.94); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, #5b8cff) 38%, #1a1f3a) 0%, #12152a 100%);
  border: 2px solid color-mix(in srgb, var(--c, #5b8cff) 75%, white);
  box-shadow: 0 0 18px -6px var(--c, #5b8cff), inset 0 1px 0 rgba(255,255,255,.25); }
.r-item .r-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)) saturate(1.15) contrast(1.05); }
.r-item.near { transform: scale(1.08); background: linear-gradient(180deg, color-mix(in srgb, var(--c, #5b8cff) 55%, #1a1f3a) 0%, #161a33 100%); border-color: #fff; box-shadow: 0 0 34px -2px var(--c, #5b8cff); }
.r-item.won { background: linear-gradient(180deg, color-mix(in srgb, var(--c, #5b8cff) 65%, #1a1f3a) 0%, #181c38 100%); border-color: #fff; }
.r-line { width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--blue); }
.r-title { color: #fff; }

/* Главный экран кейса: лента предметов, кнопка открытия и сетка 3×4 */
.home {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 18px) 14px calc(102px + var(--safe-b));
}
.case-machine {
  flex: none;
  padding: 12px 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(107, 160, 255, .22);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(40, 116, 255, .34), transparent 65%),
    linear-gradient(180deg, rgba(14, 25, 54, .98), rgba(5, 9, 20, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 16px 38px rgba(0,0,0,.32);
}
.case-machine-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 2px 11px; }
.case-machine-head { justify-content: flex-end; }
.case-machine-head span { font-size: 11px; color: rgba(223,232,255,.56); }
.case-track-frame {
  position: relative;
  height: 105px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(110,153,255,.17);
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(4,8,20,.86), rgba(14,21,42,.74));
  box-shadow: inset 0 0 24px rgba(17,76,168,.2);
}
.case-track-window { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.case-track-strip { width: max-content; display: flex; align-items: center; gap: 10px; padding: 0 10px; animation: case-marquee 34s linear infinite; will-change: transform; }
.case-track-item {
  --prize-color: #8bb7ff;
  width: 76px;
  height: 75px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--prize-color) 58%, transparent);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--prize-color) 25%, transparent), transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 0 19px -8px var(--prize-color), 0 7px 20px rgba(0,0,0,.22);
}
.case-track-strip.spinning .case-track-item.target { border-color: #fff; box-shadow: 0 0 30px color-mix(in srgb, var(--prize-color) 72%, transparent), inset 0 0 16px rgba(255,255,255,.12); }
.case-track-item.won { transform: scale(1.08); border-color: var(--prize-color); box-shadow: 0 0 30px color-mix(in srgb, var(--prize-color) 72%, transparent), inset 0 0 18px rgba(255,255,255,.13); }
.case-track-icon { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
.case-track-icon.emoji { display: grid; place-items: center; font-size: 38px; }
.case-track-pointer { position: absolute; z-index: 3; left: 50%; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; filter: drop-shadow(0 0 7px #4faaff); }
.case-track-pointer.top { top: 0; border-top: 10px solid #48adff; }
.case-track-pointer.bottom { bottom: 0; border-bottom: 10px solid #48adff; }
@keyframes case-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.case-action { display: flex; flex-direction: column; gap: 10px; }
.case-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px; }
.case-title-copy { display: flex; flex-direction: column; gap: 2px; }
.case-title-copy span { color: rgba(206,220,250,.47); font-size: 9.5px; font-weight: 750; letter-spacing: .14em; }
.case-title-copy b { font-size: 25px; line-height: 1.15; letter-spacing: -.035em; }
.case-key-count { padding: 8px 11px; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); color: rgba(245,248,255,.88); font-size: 13px; font-weight: 650; }
.case-action .btn { min-height: 54px; }
.case-action .case-note { margin: -2px 0 0; font-size: 12px; }
.case-action .lock-card { margin-top: 1px; }
.case-action .hint { margin: 0; text-align: center; }
.case-prizes { display: flex; flex-direction: column; gap: 10px; }
.case-prizes-head { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; }
.case-prizes-head b { font-size: 11px; letter-spacing: .15em; color: rgba(241,245,255,.72); }
.case-prizes-head button { color: rgba(127,193,255,.9); font-size: 12px; font-weight: 650; }
.case-prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.case-prize-card {
  --rarity-color: #9299a6;
  min-width: 0;
  min-height: 121px;
  display: grid;
  grid-template-rows: 57px minmax(16px, auto) 14px;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 8px 5px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rarity-color) 19%, transparent), transparent 66%),
    linear-gradient(165deg, #11121a, #08090e);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 17px -9px var(--rarity-color);
}
.case-prize-card.rarity-common, .sheet-rarity.rarity-common { --rarity-color: #9299a6; }
.case-prize-card.rarity-rare, .sheet-rarity.rarity-rare { --rarity-color: #55bdff; }
.case-prize-card.rarity-epic, .sheet-rarity.rarity-epic { --rarity-color: #a772ff; }
.case-prize-card.rarity-mythic, .sheet-rarity.rarity-mythic { --rarity-color: #ff65b8; }
.case-prize-card.rarity-legendary, .sheet-rarity.rarity-legendary { --rarity-color: #ffd15a; }
.case-prize-card.rarity-epic { box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 20px -8px #a772ff; }
.case-prize-card.rarity-mythic { box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 22px -7px #ff65b8; }
.case-prize-card.rarity-legendary { box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 22px -7px #ffd15a; }
.case-prize-icon { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 4px 9px rgba(0,0,0,.4)); }
.case-prize-icon.emoji { display: grid; place-items: center; font-size: 39px; }
.case-prize-card b { width: 100%; min-width: 0; align-self: end; overflow: hidden; color: #f4f5fa; font-size: 11px; line-height: 1.15; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.case-rarity, .sheet-rarity { color: var(--rarity-color, #aeb4c0); font-size: 9px; line-height: 1.1; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.sheet-rarity { flex: none; }
.case-result-card { display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid color-mix(in srgb, var(--win-color) 55%, transparent); border-radius: 19px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--win-color) 17%, transparent), transparent 72%), linear-gradient(160deg, #11131b, #08090d); box-shadow: 0 0 24px -12px var(--win-color), inset 0 1px rgba(255,255,255,.08); }
.case-result-top { display: flex; align-items: center; gap: 12px; }
.case-result-icon { width: 54px; height: 54px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--win-color) 45%, transparent)); }
.case-result-icon.emoji { display: grid; place-items: center; font-size: 38px; }
.case-result-top > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.case-result-top span { color: color-mix(in srgb, var(--win-color) 80%, white); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.case-result-top b { font-size: 18px; }
.case-result-card p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.case-result-card p b { color: var(--text); }
.case-result-card .btn { height: 46px; min-height: 46px; border-radius: 15px; font-size: 14px; }
.sheet-prize-row { min-height: 66px; }
@media (max-width: 360px) {
  .home { gap: 14px; padding-left: 11px; padding-right: 11px; }
  .case-prize-grid { gap: 7px; }
  .case-prize-card { min-height: 114px; grid-template-rows: 53px minmax(16px, auto) 13px; }
  .case-prize-icon { width: 51px; height: 51px; }
}
@media (prefers-reduced-motion: reduce) { .case-track-strip { animation: none !important; } }

/* ---------- жидкое стекло: глубина, цветные рефлексы и мягкий объём ---------- */
.case-machine {
  border-color: rgba(160,204,255,.28);
  border-top-color: rgba(224,241,255,.38);
  background:
    radial-gradient(120% 85% at 8% 0%, rgba(83,159,255,.28), transparent 66%),
    radial-gradient(85% 80% at 100% 100%, rgba(159,103,255,.12), transparent 66%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 48%, rgba(255,255,255,.055)),
    rgba(8,13,26,.56);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
  box-shadow: 0 18px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.23), inset 0 -1px 0 rgba(255,255,255,.04);
}
.case-track-frame {
  border-color: rgba(190,216,255,.2);
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(98,160,255,.2), transparent 65%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(4,8,20,.58);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 25px rgba(17,76,168,.16), 0 8px 20px rgba(0,0,0,.18);
}
.case-track-item {
  border-color: color-mix(in srgb, var(--prize-color) 48%, rgba(225,241,255,.48));
  background:
    radial-gradient(ellipse at 16% 0%, rgba(255,255,255,.22), transparent 52%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--prize-color) 24%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(12,17,30,.4);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.25), 0 0 20px -9px var(--prize-color);
}
.case-prize-card {
  border-color: color-mix(in srgb, var(--rarity-color) 48%, rgba(220,238,255,.32));
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.17), transparent 52%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--rarity-color) 17%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 54%, rgba(255,255,255,.045)),
    rgba(9,13,23,.54);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), inset 0 -1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.21), 0 0 18px -9px var(--rarity-color);
}
.case-result-card {
  border-color: color-mix(in srgb, var(--win-color) 52%, rgba(225,241,255,.42));
  border-top-color: color-mix(in srgb, var(--win-color) 48%, rgba(255,255,255,.55));
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--win-color) 27%, rgba(255,255,255,.13)), transparent 66%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.022)),
    rgba(9,12,22,.54);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  box-shadow: 0 16px 38px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.21), 0 0 26px -13px var(--win-color);
}
.r-item {
  border: 1px solid color-mix(in srgb, var(--c, #5b8cff) 48%, rgba(235,244,255,.56));
  background:
    radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.24), transparent 52%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--c, #5b8cff) 34%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
    rgba(8,12,24,.56);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.28), 0 0 18px -8px var(--c, #5b8cff);
}
.r-item.near {
  background:
    radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.32), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--c, #5b8cff) 48%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035)),
    rgba(10,15,29,.62);
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 0 34px -2px var(--c, #5b8cff), inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 24px rgba(255,255,255,.07);
}
.r-item.won {
  background:
    radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.4), transparent 58%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--c, #5b8cff) 58%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.045)),
    rgba(10,15,29,.66);
  border-color: rgba(255,255,255,.94);
  box-shadow: 0 0 44px -2px var(--c, #5b8cff), 0 0 76px -26px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.43), inset 0 0 28px rgba(255,255,255,.1);
}
.wheel-game-preview .wheel-disc { box-shadow: 0 18px 50px rgba(0,0,0,.38), 0 0 40px rgba(101,144,255,.18), inset 0 0 0 2px rgba(255,255,255,.25); }

/* Золотой ключ — главный акцент кейса */
.case-key-count {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 60px; padding: 7px 11px; border-radius: 15px;
  border: 1px solid rgba(255,224,111,.74); border-top-color: rgba(255,248,193,.94);
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(255,255,235,.42), transparent 58%),
    linear-gradient(145deg, rgba(255,219,86,.42), rgba(255,170,16,.16) 52%, rgba(153,78,0,.2)),
    rgba(67,39,0,.38);
  color: #fff1b5; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,195,33,.58);
  box-shadow: 0 0 26px rgba(255,177,20,.2), inset 0 1px 0 rgba(255,255,225,.56), inset 0 -2px 8px rgba(162,85,0,.22);
}
.case-key-count b { position: relative; z-index: 1; }
.gold-key-icon { flex: none; overflow: visible; filter: drop-shadow(0 0 4px rgba(255,184,25,.8)) drop-shadow(0 2px 4px rgba(94,48,0,.65)); }
.case-key-icon { width: 25px; height: 25px; animation: key-glow 2.8s ease-in-out infinite alternate; }
.btn-key-icon { width: 22px; height: 22px; }
.note-key-icon { width: 16px; height: 16px; }
.task-key-icon { width: 18px; height: 18px; }
.wallet-key-icon { width: 17px; height: 17px; }
.case-note .note-key-icon { vertical-align: -3px; margin-right: 5px; }
.ticket-count.key-wallet {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  color: #fff0ab;
  border-color: rgba(255,219,91,.5);
  background: linear-gradient(145deg, rgba(255,207,54,.2), rgba(180,95,0,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 16px rgba(255,185,26,.1);
}
.btn.key-cta, .btn.key-open {
  color: #352000;
  background:
    radial-gradient(130% 120% at 8% 0%, rgba(255,255,241,.65), transparent 46%),
    linear-gradient(180deg, #ffe676 0%, #ffc631 42%, #e99108 100%);
  border-color: rgba(255,245,180,.92); border-top-color: #fff9d7;
  text-shadow: 0 1px 0 rgba(255,246,196,.54);
  box-shadow: 0 0 30px rgba(255,177,18,.25), inset 0 1px 0 rgba(255,255,235,.8), inset 0 -2px 0 rgba(143,76,0,.25), 0 12px 28px rgba(0,0,0,.25);
}
.btn.key-cta::before, .btn.key-open::before {
  background: linear-gradient(180deg, rgba(255,255,230,.38), transparent 43%, rgba(130,69,0,.1));
}
.btn.key-cta:active, .btn.key-open:active {
  box-shadow: 0 0 22px rgba(255,177,18,.24), inset 0 3px 12px rgba(142,73,0,.22), inset 0 1px 0 rgba(255,255,235,.65);
}
@keyframes key-glow {
  from { filter: drop-shadow(0 0 3px rgba(255,185,30,.6)) drop-shadow(0 2px 4px rgba(94,48,0,.62)); }
  to { filter: drop-shadow(0 0 8px rgba(255,208,55,.95)) drop-shadow(0 2px 5px rgba(94,48,0,.72)); }
}
@media (prefers-reduced-motion: reduce) { .case-key-icon { animation: none !important; } }

/* Колесо: эмалевые сегменты под стеклянным бликом */
.wheel-disc {
  isolation: isolate;
  border: 8px solid rgba(231,241,255,.88);
  box-shadow: 0 20px 56px rgba(0,0,0,.4), 0 0 42px rgba(98,147,255,.2), inset 0 0 0 2px rgba(7,12,24,.44), inset 0 0 0 4px rgba(255,255,255,.18);
}
.wheel-disc::before {
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,.28), transparent 27%, transparent 62%, rgba(255,255,255,.08)),
    radial-gradient(ellipse at 26% 9%, rgba(255,255,255,.22), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 34%, rgba(7,13,27,.14));
  mix-blend-mode: screen; opacity: .78;
}
.wheel-mark { z-index: 1; width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.48)); }
.wheel-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.34)); }
.wheel-hub {
  border: 3px solid rgba(255,249,218,.95);
  background:
    radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.68), transparent 54%),
    linear-gradient(145deg, #ffe88e, #cc8510 58%, #744300);
  box-shadow: 0 4px 14px rgba(0,0,0,.42), 0 0 22px rgba(255,197,47,.42), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(92,50,0,.5);
  color: #261700;
}
.wheel-pointer { border-top-color: #fff0a0; filter: drop-shadow(0 2px 4px rgba(74,43,0,.65)) drop-shadow(0 0 9px rgba(255,213,78,.8)); }

.wheel-prizes { display: flex; flex-direction: column; gap: 9px; }
.wheel-prizes-head { margin: 0; }
.wheel-prizes-head > b { color: rgba(241,245,255,.78); font-size: 11px; letter-spacing: .13em; }
.wheel-prizes-head > span { margin-left: auto; color: var(--dim); font-size: 10px; white-space: nowrap; }
.wheel-prizes-head > button { color: #9fd8ff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.wheel-prize-rail {
  display: flex; gap: 9px; margin: 0 -18px; padding: 1px 18px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wheel-prize-rail::-webkit-scrollbar { display: none; }
.wheel-prize-card { flex: 0 0 112px; min-height: 121px; scroll-snap-align: start; }
.wheel-actions { display: block; width: 100%; }
.wheel-actions .btn { width: 100%; height: 56px; }
@media (max-width: 360px) {
  .wheel-prizes-head { gap: 7px; }
  .wheel-prizes-head > b { font-size: 10px; }
  .wheel-prize-card { flex-basis: 106px; }
}
/* ===== задания: кнопки не должны сжиматься/обрезаться ===== */
/* .page — flex-колонка фиксированной высоты, а у .glass overflow:hidden, поэтому карточки
   сжимались до высоты экрана и обрезали кнопки. */
.page > * { flex-shrink: 0; }

/* ===== бесплатный ключ: подсветка, когда его можно забрать ===== */
.daily-key-card.key-ready { border-color: rgba(255, 209, 90, .6); }
.key-glow-ring {
  position: absolute !important; inset: 0; z-index: 0 !important; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 30px rgba(255, 209, 90, .5), inset 0 0 0 1px rgba(255, 209, 90, .55);
  opacity: .35; animation: key-ring-pulse 2s ease-in-out infinite;   /* только opacity — дёшево для GPU */
}
.btn.key-glow {
  border-color: rgba(255, 209, 90, .65); color: #fff1c4;
  background:
    radial-gradient(130% 130% at 8% 0%, rgba(255, 232, 160, .38), transparent 45%),
    linear-gradient(145deg, rgba(255, 196, 70, .36), rgba(255, 170, 40, .14) 52%, rgba(255, 255, 255, .06)),
    rgba(150, 100, 10, .22);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@keyframes key-ring-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .key-glow-ring { animation: none; opacity: .7; } }

/* ---------- 5 вкладок ---------- */
#nav.five { gap: 2px; width: min(440px, calc(100vw - 16px)); }
#nav.five button { flex: 1 1 0; flex-direction: column; gap: 2px; height: 52px; padding: 0 2px; font-size: 10.5px; border-radius: 18px; }
#nav.five button svg { width: 21px; height: 21px; }

/* ---------- сегмент-переключатель ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 17px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.seg button { height: 38px; border-radius: 13px; font-size: 14px; font-weight: 650; color: var(--dim); transition: background .22s, color .22s; }
.seg button.on { color: #fff; background: linear-gradient(145deg, rgba(84,174,255,.24), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12); }

/* ---------- топ ---------- */
.top-loader { position: static; min-height: 220px; }
.top-rewards { padding: 15px 15px 14px; display: flex; flex-direction: column; gap: 12px; border-color: rgba(255,198,92,.26); background: radial-gradient(120% 140% at 50% 0%, rgba(255,198,92,.13), transparent 65%), rgba(255,255,255,.03); }
.tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tr-head b { font-size: 17px; font-weight: 750; }
.tr-head span { font-size: 13px; color: var(--dim); }
.tr-head i { font-style: normal; font-variant-numeric: tabular-nums; color: #ffdc91; font-weight: 700; }
.tr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 17px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tr-item.p1 { border-color: rgba(255,209,90,.5); background: linear-gradient(170deg, rgba(255,209,90,.16), rgba(255,255,255,.02)); }
.tr-item.p2 { border-color: rgba(205,222,240,.38); }
.tr-item.p3 { border-color: rgba(222,150,95,.4); }
.tr-medal { font-size: 26px; line-height: 1; }
.tr-place { font-size: 12px; color: var(--dim); font-weight: 600; }
.tr-keys { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; color: #ffdc91; }
.tr-key { width: 20px; height: 20px; }
.top-rewards p { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.45; }
.top-me { display: flex; align-items: center; gap: 12px; padding: 13px 13px 13px 16px; border-color: var(--blue-line); background: linear-gradient(130deg, rgba(56,182,255,.1), rgba(255,255,255,.02)); }
.top-me > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.top-me b { font-size: 16px; font-weight: 700; }
.top-me span { font-size: 12.5px; color: var(--dim); line-height: 1.35; }
.top-me .btn { width: auto; flex: none; height: 42px; padding: 0 14px; font-size: 14px; }

.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin-top: 6px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; animation: podUp .55s cubic-bezier(.2,.9,.3,1.2) both; }
.pod2 { animation-delay: .08s; } .pod3 { animation-delay: .16s; }
@keyframes podUp { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.pod-ava { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 21px; font-weight: 750; background: var(--glass-hi); border: 2px solid rgba(205,222,240,.55); }
.pod1 .pod-ava { width: 66px; height: 66px; font-size: 25px; border-color: #ffd15a; box-shadow: 0 0 0 4px rgba(255,209,90,.14), 0 8px 26px rgba(255,190,60,.28); }
.pod3 .pod-ava { border-color: rgba(222,150,95,.75); }
.pod-name { max-width: 100%; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-count { font-size: 12px; color: var(--dim); }
.pod-base { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 4px; border-radius: 16px 16px 10px 10px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border: 1px solid var(--line); border-bottom: 0; height: 64px; }
.pod1 .pod-base { height: 88px; background: linear-gradient(180deg, rgba(255,209,90,.22), rgba(255,209,90,.03)); border-color: rgba(255,209,90,.4); }
.pod3 .pod-base { height: 50px; }
.pod-base b { font-size: 22px; font-weight: 800; }
.pod-base span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 750; color: #ffdc91; }
.pod-key { width: 15px; height: 15px; }
.pod.me .pod-name { color: var(--blue); }
.empty-pod { opacity: .35; }
.top-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; }
.top-row.me { border-color: var(--blue-line); background: var(--blue-soft); }
.tr-rank { width: 24px; text-align: center; font-size: 15px; font-weight: 750; color: var(--dim); font-variant-numeric: tabular-nums; }
.top-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--glass-hi); border: 1px solid var(--line-hi); }
.top-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-name em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--blue); padding: 2px 6px; border-radius: 7px; background: var(--blue-soft); margin-left: 4px; }
.top-count { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- промокод ---------- */
.promo-card { border-color: rgba(255,145,189,.24); background: radial-gradient(120% 120% at 100% 0%, rgba(255,145,189,.1), transparent 60%), rgba(255,255,255,.03); }
.promo-head { display: flex; align-items: center; gap: 12px; }
.promo-head > div { display: flex; flex-direction: column; gap: 3px; }
.promo-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; color: #ffb3d1; background: rgba(255,145,189,.12); border: 1px solid rgba(255,145,189,.3); }
.promo-ico svg { width: 22px; height: 22px; }
.promo-row { display: flex; gap: 8px; }
.promo-input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text); font: 650 15px var(--font); letter-spacing: .06em; text-transform: uppercase; outline: none; transition: border-color .2s, background .2s; }
.promo-input::placeholder { color: var(--faint); letter-spacing: 0; text-transform: none; font-weight: 500; }
.promo-input:focus { border-color: var(--blue-line); background: rgba(56,182,255,.06); }
.promo-row .btn { width: auto; flex: none; height: 50px; padding: 0 16px; font-size: 14.5px; }
.promo-hist { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.ph-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.ph-row code { font-family: inherit; font-weight: 700; color: var(--text); padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px dashed var(--line-hi); }
.ph-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row i { font-style: normal; color: var(--faint); }
.shake { animation: shake .42s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.promo-win { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 4px 4px; }
.promo-win-ico { width: 104px; height: 104px; display: grid; place-items: center; font-size: 62px; border-radius: 32px; background: radial-gradient(circle, rgba(255,198,92,.25), transparent 70%); animation: podUp .6s cubic-bezier(.2,.9,.3,1.3) both; }
.promo-win-ico img { width: 92px; height: 92px; object-fit: contain; }
.promo-win-key { width: 72px; height: 72px; }
.promo-win h2 { margin: 4px 0 0; font-size: 23px; }
.promo-win p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.45; }
.promo-win p.dim { font-size: 13.5px; color: var(--faint); }
.promo-win .btn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .pod, .promo-win-ico, .shake { animation: none !important; } }

.linkrow.bio-row { height: auto; min-height: 50px; padding: 10px 8px 10px 15px; }
.linkrow.bio-row span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; color: var(--text, #fff); word-break: break-word; }
.task-progress { color: var(--dim); font-size: 14px; }
.task-progress b { color: var(--text); font-weight: 700; }
.prize-row .withdraw-btn { flex: none; width: auto; min-width: 0; height: 38px; padding: 0 18px; border-radius: 13px; font-size: 14.5px; white-space: nowrap; }
.prize-row .pr-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Спецзадание — золотая рамка, всегда сверху */
.task-card.task-special { position: relative; border: 2px solid #f5c542; background: linear-gradient(160deg, rgba(255, 209, 90, .16), rgba(255, 170, 40, .05)); box-shadow: 0 0 0 1px rgba(255, 215, 100, .25), 0 8px 28px rgba(255, 190, 60, .28); animation: specialGlow 2.6s ease-in-out infinite; }
.task-card.task-special.task-done { animation: none; opacity: .85; }
.special-badge { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #2a1a00; background: linear-gradient(90deg, #ffe08a, #f5b829); letter-spacing: .2px; }
.special-badge span { font-weight: 600; opacity: .8; }
.special-meta { font-size: 12.5px; color: #ffd76a; font-weight: 600; margin-top: -6px; }
@keyframes specialGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 215, 100, .25), 0 8px 24px rgba(255, 190, 60, .2); } 50% { box-shadow: 0 0 0 1px rgba(255, 215, 100, .5), 0 8px 34px rgba(255, 190, 60, .45); } }

/* окно выигрыша подарка с колеса */
.win-sheet-prize { display: flex; justify-content: center; margin: 4px 0 8px; }
.win-sheet-prize .win-sheet-icon, .win-sheet-prize img { width: 140px; height: 140px; object-fit: contain; font-size: 96px; filter: drop-shadow(0 10px 28px rgba(255, 190, 60, .45)); }