:root {
  color-scheme: dark;
  --bg: #0b0e11;
  --card: #161a1e;
  --line: #2b3139;
  --ink: #f5f7fa;
  --muted: #848e9c;
  --green: #0ecb81;
  --red: #f6465d;
  --gold: #f0b90b;
  --glass-bg: rgba(22, 26, 30, 0.65);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --neon-green: rgba(14, 203, 129, 0.4);
  --neon-red: rgba(246, 70, 93, 0.4);
  --neon-gold: rgba(240, 185, 11, 0.4);
  --stable-height: 100dvh;
  --tg-stable-height: 100dvh;
  --tg-content-top: 0px;
  --tg-content-bottom: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: Nunito, "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; }
body { min-height: var(--stable-height); overscroll-behavior: none; }
button, input, select, a { font: inherit; touch-action: manipulation; }
button { border: 0; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
h2, h3, p { margin-top: 0; }
h2 { font-size: 28px; margin-bottom: 12px; }
.boot, .app { min-height: var(--tg-stable-height, var(--stable-height)); }
.boot {
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  height: var(--tg-stable-height, 100dvh);
  box-sizing: border-box;
  padding: calc(28px + var(--safe-top, 0px) + var(--tg-content-top, 0px)) 24px calc(36px + var(--safe-bottom, 0px) + var(--tg-content-bottom, 0px));
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 115%, #0a3a4a 0%, transparent 55%),
    radial-gradient(80% 50% at 50% 0%, #1a1404 0%, transparent 46%),
    #061014;
}
.boot-sea { position: absolute; inset: 0; pointer-events: none; }
.boot-sea i {
  position: absolute;
  bottom: -20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(155, 231, 255, .35);
  animation: bubble 7s linear infinite;
}
.boot-sea i:nth-child(1) { left: 12%; animation-duration: 6.2s; }
.boot-sea i:nth-child(2) { left: 24%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: -2s; }
.boot-sea i:nth-child(3) { left: 41%; animation-duration: 5.4s; animation-delay: -1s; }
.boot-sea i:nth-child(4) { left: 58%; width: 9px; height: 9px; animation-duration: 9s; animation-delay: -3s; }
.boot-sea i:nth-child(5) { left: 71%; animation-duration: 6.8s; animation-delay: -4s; }
.boot-sea i:nth-child(6) { left: 83%; width: 5px; height: 5px; animation-duration: 7.4s; animation-delay: -1.6s; }
.boot-sea i:nth-child(7) { left: 33%; width: 3px; height: 3px; animation-duration: 5s; }
.boot-sea i:nth-child(8) { left: 91%; animation-duration: 8.6s; animation-delay: -2.4s; }
.boot-sonar, .boot-sonar.delay {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(240, 185, 11, .28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sonar 2.8s ease-out infinite;
}
.boot-sonar.delay { animation-delay: 1.4s; }
.boot-whale { position: relative; width: 132px; height: 132px; z-index: 1; animation: rise 1.1s ease both, hunt 3.2s ease-in-out 1.1s infinite; }
.boot-kicker { position: relative; margin: 18px 0 0; color: var(--gold); letter-spacing: .28em; font-size: 11px; font-weight: 900; }
.boot h1 { position: relative; font-size: 44px; margin: 4px 0 0; letter-spacing: -0.04em; }
.boot h1 span { color: var(--gold); }
.boot-tag { position: relative; margin: 0 0 8px; color: #c9d4de; font-weight: 800; }
#boot-message { position: relative; min-height: 24px; }
.boot-langs { position: relative; margin-top: 8px; }
#boot-retry { position: relative; max-width: 220px; background: var(--gold); color: #111; border: 0; }
.logo { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 28px; background: var(--gold); color: #111; font-size: 48px; font-weight: 900; }
.boot p, .copy, .hint, .facts dd, .card p { color: var(--muted); }
.boot .boot-kicker { color: var(--gold); }
.boot .boot-tag { color: #d5e2ea; }
.app { width: min(100%, 520px); max-width: 100%; height: var(--stable-height); margin: auto; padding: max(10px, var(--safe-top)) max(12px, var(--safe-right)) calc(72px + var(--safe-bottom)) max(12px, var(--safe-left)); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.app:not(.admin-app) { height: var(--tg-stable-height, 100dvh); padding: calc(max(10px, var(--safe-top, 0px)) + var(--tg-content-top, 0px)) max(12px, var(--safe-right)) calc(72px + var(--safe-bottom, 0px) + var(--tg-content-bottom, 0px)) max(12px, var(--safe-left)); }
#main { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-bottom: 0; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; flex: none; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.badge.demo { background: #3a2d0a; color: var(--gold); }
.badge.real { background: #123226; color: var(--green); }
.balance-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.balance { display: block; font-size: clamp(20px, 6.5vw, 30px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(58vw, 240px); }
.balance.flash { animation: flash .6s ease; }
.add-funds {
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: 4px;
  border-radius: 50%;
  border: 1px solid rgba(240, 185, 11, .65);
  background: rgba(240, 185, 11, .08);
  color: var(--gold);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.add-funds:active { background: rgba(240, 185, 11, .12); }
.streak { margin: 6px 0 0; color: var(--gold); font-weight: 800; font-size: 13px; }
.streak.hot { animation: streak-pulse .8s ease-in-out infinite; }
.brand-side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; margin-left: auto; }
.lang-pop { position: relative; }
#lang-now, #mute {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #12161c;
  display: grid;
  place-items: center;
}
#lang-now svg, [data-flag] svg {
  width: 22px;
  height: 15px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.lang-menu b { display: grid; }
#mute { color: #d8dde6; }
#mute svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mute[aria-pressed="true"] { color: var(--muted); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 25;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: #161a1e;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.lang-menu[hidden] { display: none !important; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}
.lang-menu button.active { background: #3a2d0a; color: var(--gold); }
.quote { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.quote .mascot { margin-top: 2px; }
.mascot { width: 84px; height: 60px; flex: none; animation: hunt 3.2s ease-in-out infinite; cursor: pointer; }
.boot-whale.mascot { width: 196px; height: 140px; animation: rise 1.1s ease both, hunt 3.2s ease-in-out 1.1s infinite; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot .whale { transform-box: fill-box; transform-origin: 32% 55%; transform: rotate(-8deg); }
.mascot .body { fill: #1f8fbf; }
.mascot .belly { fill: #d7f3ff; }
.mascot .tail, .mascot .fin { fill: #176f96; }
.mascot .tail, .mascot .fin, .mascot .brow, .mascot .eye, .mascot .eye-white, .mascot .shine { transform-box: fill-box; transform-origin: center; }
.mascot .tail { transform-origin: 0% 50%; }
.mascot .fin { transform-origin: 50% 0%; }
.mascot .eye-white { fill: #fff; }
.mascot .eye { fill: #111; }
.mascot .shine { fill: #fff; pointer-events: none; }
.mascot .mouth { fill: none; stroke: #083044; stroke-width: 2.4; stroke-linecap: round; display: none; }
.mascot .mouth.idle { display: block; }
.mascot .joy, .mascot .stars, .mascot .crosses, .mascot .lid, .mascot .crown, .mascot .tear { display: none; }
.mascot .crown { fill: #f0b90b; }
.mascot .lid { fill: #1f8fbf; }
.mascot .brow { fill: none; stroke: #083044; stroke-width: 2.2; stroke-linecap: round; }
.mascot .spout { fill: #9be7ff; opacity: .9; transform-box: fill-box; transform-origin: center bottom; animation: spout 3s ease-in-out infinite; }
.mascot .drop { fill: #9be7ff; opacity: 0; animation: drip 3s ease-in infinite; }
.mascot .drop.d2 { animation-delay: -1s; }
.mascot .drop.d3 { animation-delay: -2s; }
.mascot.hunt { animation: hunt 1s ease-in-out infinite; }
.mascot.hunt .whale { transform: rotate(10deg); }
.mascot.hunt .mouth.idle { display: none; }
.mascot.hunt .mouth.tense { display: block; }
.mascot.hunt .eye, .mascot.hunt .eye-white, .mascot.hunt .shine { transform: scaleY(.45); }
.mascot.hunt .brow { transform: translateY(2px) rotate(12deg); }
.mascot.hunt .tail { transform: rotate(16deg); }
.mascot.hunt .fin { transform: rotate(12deg); }
.mascot.hunt .spout, .mascot.hunt .drop { animation-duration: 1s; }
.mascot.win { animation: hop .45s ease; }
.mascot.win .whale { transform: rotate(-14deg); }
.mascot.win .mouth.idle { display: none; }
.mascot.win .mouth.grin { display: block; }
.mascot.win .eye, .mascot.win .eye-white, .mascot.win .shine { display: none; }
.mascot.win .joy { display: block; fill: none; stroke: #083044; stroke-width: 2.4; stroke-linecap: round; }
.mascot.win .brow { transform: translateY(-2px) rotate(-16deg); }
.mascot.win .tail { transform: rotate(-28deg); }
.mascot.win .fin { transform: rotate(-18deg); }
.mascot.win .spout { animation: spout-high .6s ease-in-out infinite; }
.mascot.big { animation: hop .45s ease 2; }
.mascot.big .whale { transform: rotate(-16deg); }
.mascot.big .mouth.idle { display: none; }
.mascot.big .mouth.cheer { display: block; fill: #083044; stroke: none; }
.mascot.big .eye, .mascot.big .eye-white, .mascot.big .shine, .mascot.big .joy { display: none; }
.mascot.big .stars { display: block; fill: #f0b90b; }
.mascot.big .brow { transform: translateY(-3px) rotate(-22deg); }
.mascot.big .tail { transform: rotate(-24deg); animation: wag .35s ease-in-out 2; }
.mascot.big .fin { animation: flap .35s ease-in-out 2; }
.mascot.big .crown { display: block; animation: rise .35s ease both; }
.mascot.big .spout { animation: spout-high .45s ease-in-out infinite; }
.mascot.bust { animation: shake .35s linear; }
.mascot.bust .whale { transform: scale(.9) rotate(6deg); }
.mascot.bust .mouth.idle { display: none; }
.mascot.bust .mouth.sad { display: block; }
.mascot.bust .eye, .mascot.bust .eye-white, .mascot.bust .shine { display: none; }
.mascot.bust .crosses { display: block; }
.mascot.bust .crosses path { stroke: #111; stroke-width: 2.2; stroke-linecap: round; }
.mascot.bust .brow { transform: translateY(2px) rotate(18deg); }
.mascot.bust .tail { transform: rotate(26deg); }
.mascot.bust .fin { transform: rotate(20deg); }
.mascot.bust .spout { animation: spout-fall 1.2s ease-in infinite; }
.mascot.bust .tear { display: block; fill: #f6465d; animation: tear .8s ease-in infinite; }
.mascot.blink .lid { display: block; }
.mascot.blink .shine { display: none; }
.mascot.poke { animation: hop .35s ease; }
.stake-open {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 16px;
  background: #12161c;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
}
.stake-open strong { color: var(--ink); font-size: 28px; font-weight: 900; }
.stake-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.stake-quick button { min-height: 44px; border-radius: 14px; background: var(--card); font-weight: 800; }
.pad {
  width: min(100%, 520px);
  margin: auto 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #12161c;
  color: white;
}
.pad::backdrop { background: rgba(0,0,0,.55); }
.pad-label { margin: 0; color: var(--muted); font-weight: 800; }
#pad-value { margin: 4px 0 12px; font-size: 40px; font-weight: 900; letter-spacing: -0.03em; }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad-keys button { min-height: 52px; border-radius: 14px; background: #1e2329; font-size: 24px; font-weight: 900; }
.pad-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pad-quick button { min-height: 42px; border-radius: 12px; background: #1e2329; font-weight: 800; color: var(--gold); }
#stake-done { width: 100%; min-height: 52px; border-radius: 16px; background: var(--gold); color: #111; font-weight: 900; }
.risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.risk {
  min-height: 78px;
  padding: 8px 6px;
  border-radius: 18px;
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 250ms ease, box-shadow 250ms ease, color 250ms ease;
}
.risk b, .risk small, .risk-icon { display: block; }
.risk-icon { width: 24px; height: 24px; margin: 0 auto 2px; color: currentColor; }
.risk-icon svg { width: 24px; height: 24px; display: block; }
.risk b { font-size: 14px; font-weight: 800; }
.risk small { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.risk[data-risk="calm"] { background: rgba(14,203,129,.08); border-color: rgba(14,203,129,.2); }
.risk[data-risk="hunt"] { background: rgba(240,185,11,.08); border-color: rgba(240,185,11,.2); }
.risk[data-risk="whale"] { background: rgba(246,70,93,.08); border-color: rgba(246,70,93,.2); }
.risk[data-risk="calm"].active { background: #0ecb81; color: #fff; box-shadow: 0 0 24px var(--neon-green); transform: scale(1.03); }
.risk[data-risk="hunt"].active { background: #f0b90b; color: #111; box-shadow: 0 0 24px var(--neon-gold); transform: scale(1.03); }
.risk[data-risk="whale"].active { background: #f6465d; color: #fff; box-shadow: 0 0 24px var(--neon-red); transform: scale(1.03); }
.risk.active small { color: rgba(255,255,255,.82); }
.risk[data-risk="hunt"].active small { color: rgba(0,0,0,.72); }
.admin-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.admin-form { display: grid; gap: 10px; }
.admin-form h2 { margin-bottom: 0; }
.admin-form label { display: grid; gap: 6px; font-weight: 800; }
.field-help { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.math-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.math-table th, .math-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.math-table th { color: var(--muted); font-size: 11px; font-weight: 800; }
.field-auto { margin: 6px 0 0; color: #6b7280; font-size: 12px; font-weight: 700; }
.person-id { margin: 0; font-variant-numeric: tabular-nums; }
.admin-tabs button { min-height: 44px; border-radius: 14px; background: var(--card); color: var(--muted); font-weight: 800; }
.admin-tabs button.active { background: #3a2d0a; color: var(--gold); }
.admin-balance { font-size: 28px; font-weight: 900; margin: 8px 0; }
.admin-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.admin-presets button { min-height: 40px; border-radius: 12px; background: #2b3139; font-weight: 800; }
.admin-user { background: var(--card); border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.admin-link, .admin-back { display: grid; place-items: center; text-decoration: none; text-align: center; color: var(--ink); }
.admin-back { width: auto; padding: 0 14px; }
.admin-app { height: auto; min-height: var(--stable-height); overflow: visible; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.admin-actions button, .admin-actions input { width: auto; flex: 1 1 120px; }
.admin-actions button { padding: 0 12px; background: #2b3139; }
.admin-user h4 { margin: 0 0 6px; }
.metric { display: flex; justify-content: space-between; gap: 12px; background: var(--card); border-radius: 16px; padding: 12px; }
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.spark, .coin, .shard, .drop, .shock, .vignette { position: absolute; }
.spark { width: 8px; height: 8px; border-radius: 50%; animation: spark .8s ease-out forwards; }
.coin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 10px #f0b90b;
  animation: coin .95s ease-out forwards;
}
.shard {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: #f6465d;
  transform: rotate(var(--tilt, 12deg));
  animation: shard 1s ease-in forwards;
}
.drop {
  width: 6px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  background: #f6465d;
  opacity: .85;
  animation: shard 1.05s ease-in forwards;
}
.shock {
  left: 50%;
  top: 42%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: shock .7s ease-out forwards;
}
.shock.green { border: 2px solid #0ecb81; box-shadow: 0 0 24px #0ecb81; }
.shock.gold { border: 2px solid #f0b90b; box-shadow: 0 0 28px #f0b90b; }
.shock.red { border: 2px solid #f6465d; box-shadow: 0 0 24px #f6465d; }
.shock.hard { animation-duration: .55s; }
.vignette { inset: 0; background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(246, 70, 93, .28)); animation: fade-out .95s ease forwards; }
.vignette.deep { background: radial-gradient(circle at 50% 40%, transparent 18%, rgba(246, 70, 93, .42)); }
body.juice-win { animation: wash-green .45s ease; }
body.juice-big { animation: wash-gold .6s ease; }
body.juice-bust { animation: wash-red .55s ease; }
body.juice-loss { animation: wash-red .5s ease; }
.switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--card); }
.switch button { min-height: 40px; border-radius: 11px; background: transparent; color: var(--muted); font-weight: 800; }
.switch button.on { background: #2b3139; color: white; }
.notice { display: flex; gap: 8px; align-items: center; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #3a2d0a; color: var(--gold); }
.notice span { flex: 1; }
.view { display: none; padding-top: 8px; }
.view.active { display: block; flex: 1; min-height: 0; overflow: auto; animation: view-in 200ms ease; }
#view-trade.view.active { display: flex; flex-direction: column; overflow: hidden; }
.pair { margin: 0; color: var(--muted); font-weight: 800; letter-spacing: .08em; font-size: 13px; white-space: nowrap; }
.price { margin: 0; font-size: clamp(28px, 8.5vw, 44px); font-weight: 900; line-height: .95; font-family: "SF Mono", ui-monospace, monospace; }
.pnl { margin: 4px 0 8px; font-size: 18px; font-weight: 800; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.neutral { color: var(--muted) !important; }
#market-canvas {
  width: 100%;
  flex: 1 1 0;
  min-height: 88px;
  height: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, #0d1117 0%, #0a0e13 100%);
  box-shadow: inset 0 0 60px rgba(14, 203, 129, 0.03);
  position: relative;
}
#market-canvas.up { box-shadow: inset 0 0 60px rgba(14, 203, 129, 0.03), inset 0 0 0 1px rgba(14, 203, 129, .45); }
#market-canvas.down { box-shadow: inset 0 0 60px rgba(14, 203, 129, 0.03), inset 0 0 0 1px rgba(246, 70, 93, .45); }
#market-canvas.heat { animation: heat-pulse 600ms ease-in-out infinite; }
#market-canvas.critical { animation: heat-pulse 300ms ease-in-out infinite, chart-shake 300ms linear infinite; }
#market-canvas.rush { box-shadow: inset 0 0 60px rgba(14, 203, 129, 0.08), inset 0 0 0 1px rgba(14, 203, 129, .75), 0 0 26px rgba(14, 203, 129, .2); }
#market-canvas.scare { box-shadow: inset 0 0 40px rgba(246, 70, 93, 0.3); animation: chart-shake-soft 180ms linear infinite; }
#market-canvas.tease { box-shadow: inset 0 0 36px rgba(240, 185, 11, 0.35); }
#market-canvas.gold { box-shadow: inset 0 0 48px rgba(240, 185, 11, 0.22); }
.price.punch { animation: punch .16s ease; }
.label { margin: 10px 0 6px; font-weight: 800; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips button, .ghost, .side { min-height: 48px; border-radius: 16px; }
.chips button { background: var(--card); color: var(--ink); font-weight: 800; }
.chips button.on { outline: 2px solid var(--gold); }
.stake-open, .stake-quick, .risks, .sides { flex-shrink: 0; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; margin-bottom: 12px; padding-bottom: 0; flex-shrink: 0; }
.side { display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #04140c; line-height: 1.05; }
.side small { font-size: 12px; font-weight: 800; }
.side.long { background: var(--green); }
.side.short { background: var(--red); color: white; }
.side.slim { width: 100%; margin-top: 8px; }
.ghost { width: 100%; margin-top: 10px; background: transparent; border: 1px solid var(--line); font-weight: 800; }
.ghost.wide { margin-top: 12px; }
.ghost.danger { color: var(--red); }
.card, .facts, .record, .round-card { background: var(--card); border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.app:not(.admin-app) .card,
.app:not(.admin-app) .facts,
.app:not(.admin-app) .record,
.app:not(.admin-app) .round-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 20px;
}
.card h3 { margin-bottom: 6px; }
.card code, .sheet code { display: block; margin-top: 8px; color: var(--gold); overflow-wrap: anywhere; font-size: 12px; }
.facts { padding: 4px 14px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.identity { display: flex; gap: 12px; align-items: center; }
.identity h2, .row-title h2 { margin: 0; }
#profile-monogram { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--gold); color: #111; font-size: 28px; font-weight: 900; }
.row-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-title button, details summary { background: transparent; color: var(--gold); font-weight: 800; min-height: 44px; }
.round-card, .record { width: 100%; text-align: left; }
.stack { display: grid; gap: 8px; }
input, select { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: #0e1217; color: white; padding: 0 12px; }
details { margin-top: 8px; }
.tabs { position: fixed; left: 50%; bottom: 0; z-index: 20; transform: translateX(-50%); width: min(100%, 520px); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(8px + var(--safe-bottom, 0px) + var(--tg-content-bottom, 0px)); background: rgba(11,14,17,.96); border-top: 1px solid var(--line); }
.tabs a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; color: var(--muted); text-decoration: none; font-size: 10px; font-weight: 800; letter-spacing: .5px; overflow: hidden; }
.tabs a b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-weight: 800; }
.tabs svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tabs a.active { color: var(--gold); }
.tabs a.active b { font-weight: 900; }
.tabs a.active svg { transform: scale(1.15); }
.sheet { position: relative; overflow: hidden; width: min(100% - 24px, 420px); margin: auto auto 24px; padding: 22px; border: 0; border-radius: 24px; background: #161a1e; color: white; text-align: center; }
.sheet::backdrop { background: rgba(0,0,0,.72); }
.sheet-glow { position: absolute; inset: -20%; pointer-events: none; opacity: 0; }
.result-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sheet-mark { position: relative; z-index: 2; font-size: 42px; margin-bottom: 0; }
.sheet h2, .sheet-money, .result-flavor, .sheet code, .sheet button { position: relative; z-index: 2; }
.sheet h2 { font-size: 34px; font-weight: 900; margin: 0 0 8px; }
.sheet-money { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; }
.result-flavor { margin: 0 0 10px; color: var(--muted); }
.sheet { animation: sheet-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sheet.win { box-shadow: 0 0 0 2px rgba(14,203,129,.45), 0 0 40px rgba(14,203,129,.2); }
.sheet.loss { animation: sheet-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 0 2px rgba(246,70,93,.45); }
.sheet.margin { animation: sheet-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 0 2px rgba(246,70,93,.8), 0 18px 40px rgba(246,70,93,.18); }
.sheet.win .sheet-glow { opacity: 1; background: radial-gradient(circle at 50% 0%, rgba(14,203,129,.28), transparent 58%); animation: glow-pulse .9s ease; }
.sheet.loss .sheet-glow { opacity: 1; background: radial-gradient(circle at 50% 110%, rgba(246,70,93,.3), transparent 60%); }
.sheet.margin .sheet-glow { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(246,70,93,.36), transparent 62%); animation: glow-pulse .7s ease; }
.sheet.win .sheet-mark { animation: hop .45s ease; }
.sheet.loss .sheet-mark, .sheet.margin .sheet-mark { animation: shake .4s linear; }
.sheet.loss .sheet-money, .sheet.margin .sheet-money { animation: punch .45s ease; }
.toasts { position: fixed; left: 50%; bottom: calc(84px + var(--safe-bottom)); width: min(100% - 32px, 420px); transform: translateX(-50%); }
.toast { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: #1e2329; }
@keyframes flash { 50% { color: var(--gold); } }
@keyframes draw-in { from { opacity: .2; } }
@keyframes hop { 40% { transform: translateY(-8px) scale(1.06); } }
@keyframes hunt { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes spout { 50% { transform: translateY(-3px) scaleY(1.2); opacity: 1; } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes coin { to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin, 180deg)) scale(.4); opacity: 0; } }
@keyframes shard { to { transform: translateY(var(--fall, 420px)) rotate(var(--tilt, 18deg)); opacity: 0; } }
@keyframes shock { to { width: 280px; height: 280px; opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes glow-pulse { 50% { opacity: 1; } to { opacity: .35; } }
@keyframes punch { 40% { transform: scale(1.08); } }
@keyframes lose-in { from { transform: translateY(16px) rotate(-1.5deg); opacity: 0; } }
@keyframes wash-green { 30% { background: #123226; } }
@keyframes wash-gold { 30% { background: #3a2d0a; } }
@keyframes wash-red { 30% { background: #3a1218; } }
@keyframes pop-in { from { transform: translateY(18px) scale(.94); } }
@keyframes drop-in { from { transform: translateY(-24px); } 60% { transform: translateY(6px); } }
@keyframes bubble { to { transform: translateY(-110vh); opacity: 0; } }
@keyframes sonar { from { width: 70px; height: 70px; opacity: .55; } to { width: 240px; height: 240px; opacity: 0; } }
@keyframes rise { from { transform: translateY(28px); opacity: 0; } }
@keyframes sheet-in { from { transform: scale(.95); opacity: 0; } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes streak-pulse { 50% { transform: scale(1.08); } }
@keyframes heat-pulse { 50% { box-shadow: inset 0 0 40px rgba(246,70,93,.15); } }
@keyframes chart-shake { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes chart-shake-soft { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
@keyframes wag { 50% { transform: rotate(-50deg); } }
@keyframes flap { 50% { transform: rotate(-28deg) translateY(-3px); } }
@keyframes spout-high { 50% { transform: translateY(-8px) scaleY(2); opacity: 1; } }
@keyframes spout-fall { 50% { transform: translateY(6px) scaleY(.55); opacity: .35; } }
@keyframes drip { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tear { to { transform: translateY(8px); opacity: 0; } }
@keyframes liq-flash { 0% { background: #fff; opacity: .95; } 17% { background: #fff; opacity: .7; } 100% { background: rgba(80,8,16,.55); opacity: 0; } }
#fx.liq-flash { animation: liq-flash 480ms linear forwards; }
body.juice-bust { animation: wash-red .55s ease, shake .4s linear; }
@media (max-height: 820px) {
  .price { font-size: 28px; }
  .pnl { font-size: 15px; margin-bottom: 4px; }
  .hint { display: none; }
  .stake-open { min-height: 48px; margin-top: 8px; }
  .stake-open strong { font-size: 22px; }
  .side { min-height: 48px; }
}
@media (max-height: 700px) {
  .price { font-size: 24px; }
  .pair { font-size: 11px; }
  .stake-quick button { min-height: 40px; }
  .sides { margin-top: 8px; margin-bottom: 8px; }
  #market-canvas { min-height: 72px; }
}
@media (max-height: 600px) {
  #market-canvas { min-height: 64px; }
}
@media (max-height: 520px) {
  #view-trade.view.active { overflow: auto; }
}
@media (max-width: 380px) {
  .app { padding-left: max(10px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); }
  #lang-now, #mute { width: 32px; min-height: 32px; }
  .add-funds { width: 24px; height: 24px; font-size: 16px; }
  .side { font-size: 16px; }
}
@media (min-width: 720px) {
  .price { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}