/* miniapp/public/app.css — the MorphBET Telegram Mini App. The app's own palette (lib/config/theme.dart,
   the same tokens as site/public/styles.css): always the dark brand, whatever Telegram's theme is. */
:root{--bg:#06081c;--card:#0e1130;--surface:#141838;--raise:#1a1f48;--line:rgba(255,255,255,.08);--fg:#eef0ff;--mut:#9aa0c7;--dim:#6b7099;--cyan:#00f5ff;--blue:#448aff;--violet:#7c4dff;--pink:#e040fb;--gold:#f0c040;--ok:#2ee59d;--bad:#ff5c7a;--grad:linear-gradient(90deg,#e040fb,#7c4dff 40%,#448aff 70%,#00f5ff);--r:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
body{min-height:var(--tg-viewport-stable-height,100vh)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 70% at 50% -10%,#1b1f4a 0%,var(--bg) 62%)}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.aurora .a1{width:90vw;height:90vw;left:-30vw;top:-30vw;background:#7c4dff}
.aurora .a2{width:70vw;height:70vw;right:-35vw;top:20vh;background:#00f5ff;opacity:.16}
.wrap{max-width:560px;margin:0 auto;padding:14px 16px 32px}
.view{animation:viewIn .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view,.tile,.spin,.pulse{animation:none!important}}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 16px}
.bar h1{font-size:20px;font-weight:800;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--mut)}
.chip b{color:var(--fg)}

/* home */
.hello{border-radius:24px;padding:20px 18px 18px;background:linear-gradient(160deg,#1a1650 0%,#0e1130 55%,#0b1a3a 100%);border:1px solid rgba(124,77,255,.28);box-shadow:0 18px 50px -24px rgba(124,77,255,.6);position:relative;overflow:hidden}
.hello::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,245,255,.22),transparent 70%)}
.hello .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--cyan);background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.25);padding:4px 9px;border-radius:999px;margin:14px 0 10px}
.hello h2{font-size:26px;line-height:1.1;margin:0 0 8px;font-weight:800}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hello p{margin:0;color:var(--mut);font-size:14px}
.sec{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--dim);margin:22px 2px 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;text-align:left;border-radius:var(--r);padding:14px;background:var(--card);border:1px solid var(--line);min-height:104px;display:flex;flex-direction:column;gap:8px;transition:transform .12s ease,border-color .2s;animation:viewIn .4s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i)*35ms)}
.tile:active{transform:scale(.97)}
.tile.wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:14px;background:linear-gradient(110deg,rgba(124,77,255,.28),rgba(0,245,255,.10));border-color:rgba(124,77,255,.45)}
.tile .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--cyan)}
.tile.wide .ic{width:46px;height:46px;background:var(--grad);color:#fff}
.tile .ic svg{width:21px;height:21px}
.tile b{font-size:15px}.tile small{color:var(--mut);font-size:12px;line-height:1.35}
.tile .soon{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);padding:2px 6px;border-radius:999px}
.tile .go{margin-left:auto;font-size:20px;color:var(--fg);opacity:.8}

/* steps */
.steps{display:flex;align-items:center;gap:6px;margin:0 0 18px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--surface)}
.steps i.on{background:var(--grad)}
.q{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.15}
.sub{color:var(--mut);margin:0 0 16px;font-size:14px}
.field{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:6px 6px 6px 14px;transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:rgba(0,245,255,.55);box-shadow:0 0 0 4px rgba(0,245,255,.08)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:20px;font-weight:800;letter-spacing:.06em;padding:10px 0}
.field input::placeholder{color:var(--dim);letter-spacing:.02em;font-weight:600;font-size:16px}
.field.search input{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
.ghost{padding:9px 12px;border-radius:12px;background:var(--surface);font-weight:700;font-size:13px;color:var(--mut)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:16px;font-weight:800;font-size:15px;background:var(--grad);color:#fff;box-shadow:0 10px 30px -12px rgba(124,77,255,.8);transition:transform .12s ease,opacity .2s}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.4;box-shadow:none}
.btn.alt{background:var(--surface);box-shadow:none;border:1px solid var(--line);color:var(--fg)}
.row{display:flex;gap:10px;margin-top:12px}.row .btn{flex:1}
.err{margin:12px 2px 0;color:var(--bad);font-size:13px;font-weight:600}
.note{margin:12px 2px 0;color:var(--mut);font-size:13px}

/* the from/to strip */
.route{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:16px}
.route .end{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.route .end span{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route .arrow{color:var(--cyan);font-weight:800}
.route button{font-size:12px;font-weight:700;color:var(--cyan)}

/* bookmaker picker */
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.book{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:16px;background:var(--card);border:1.5px solid var(--line);transition:transform .12s,border-color .15s,background .15s}
.book:active{transform:scale(.96)}
.book.sel{border-color:var(--cyan);background:rgba(0,245,255,.07)}
.book span{font-size:12px;font-weight:700;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.badge.sm{width:30px;height:30px;border-radius:9px;font-size:11px}
.more{margin:12px auto 0;display:block}

/* converting */
.loading{text-align:center;padding:26px 0 8px}
.orb{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:conic-gradient(from 0deg,#e040fb,#7c4dff,#448aff,#00f5ff,#e040fb);position:relative;animation:spin 1.6s linear infinite}
.orb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}
.stages{list-style:none;padding:0;margin:18px auto 0;max-width:300px;text-align:left}
.stages li{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--dim);font-weight:600;font-size:14px;transition:color .3s}
.stages li.on{color:var(--fg)}.stages li.done{color:var(--mut)}
.stages li i{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;flex:none;display:grid;place-items:center;font-style:normal;font-size:10px}
.stages li.done i{background:var(--ok);border-color:var(--ok);color:#06081c}
.stages li.on i{border-color:var(--cyan);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(0,245,255,.18)}}
.elapsed{color:var(--dim);font-size:12px;margin-top:10px}

/* result */
.code-card{border-radius:24px;padding:18px;text-align:center;background:linear-gradient(160deg,#16204f,#0e1130 60%);border:1px solid rgba(0,245,255,.3);box-shadow:0 18px 50px -26px rgba(0,245,255,.6)}
.code-card .lbl{font-size:12px;color:var(--mut);font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.code{font-size:34px;font-weight:900;letter-spacing:.12em;margin:8px 0 4px;word-break:break-all}
.odds{display:flex;justify-content:center;gap:16px;color:var(--mut);font-size:13px;margin-top:6px}
.odds b{color:var(--fg);font-size:15px}
.legs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.leg{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.leg .n{width:24px;height:24px;border-radius:8px;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--mut);flex:none}
.leg .t{flex:1;min-width:0}
.leg .t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg .t small{color:var(--mut);font-size:12px}
.leg .o{font-weight:800;color:var(--cyan);font-size:14px}
.leg .x{width:30px;height:30px;border-radius:10px;background:var(--surface);color:var(--mut);font-size:15px;flex:none}
.leg.fail{border-color:rgba(255,92,122,.25);background:rgba(255,92,122,.05)}
.leg.fail small{color:#ff9fb2}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--raise);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;transition:all .25s;pointer-events:none;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%)}

/* option chips, steppers, live progress (split · merge) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:10px 15px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:14px;color:var(--mut);transition:all .15s}
.opt.on{border-color:var(--cyan);color:var(--fg);background:rgba(0,245,255,.08)}
.opt:active{transform:scale(.96)}
.slots{display:flex;flex-direction:column;gap:8px}
.slot{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:34px;height:34px;border-radius:10px;background:var(--surface);font-size:18px;font-weight:800}
.stepper button[disabled]{opacity:.3}
.stepper b{min-width:22px;text-align:center;font-size:17px}
.pbar{height:8px;border-radius:8px;background:var(--surface);overflow:hidden;max-width:320px;margin:18px auto 0}
.pbar i{display:block;height:100%;width:3%;background:var(--grad);border-radius:8px;transition:width .4s ease}
.pmsg{color:var(--mut);font-size:14px;margin:12px auto 0;max-width:320px;min-height:40px}
.ticket{margin-bottom:14px}
details.games{margin-top:8px}
details.games summary{cursor:pointer;color:var(--cyan);font-weight:700;font-size:13px;padding:6px 2px;list-style:none}
details.games summary::-webkit-details-marker{display:none}
details.games .legs{margin-top:6px}
.codes{display:flex;flex-direction:column;gap:10px}
.crow{display:flex;align-items:center;gap:8px}
.crow .field{flex:1;min-width:0}
.crow .field input{font-size:17px}
.src{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:11px;background:var(--surface);font-size:12px;font-weight:700;max-width:46%;flex:none}
.src span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src.ask{color:var(--gold);border:1px dashed rgba(240,192,64,.5)}
.mixlist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mixcode{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px}
.leg .badge.sm{flex:none}

/* a feature that is in the app, not yet here */
.sheet{text-align:center;padding:30px 6px}
.sheet .ic{width:72px;height:72px;margin:0 auto 16px;border-radius:22px;display:grid;place-items:center;background:var(--grad);color:#fff}
.sheet .ic svg{width:34px;height:34px}
.sheet h2{margin:0 0 8px;font-size:22px}.sheet p{color:var(--mut);margin:0 auto 20px;max-width:340px}

/* the MORPHBET wordmark (brand/wordmark-motion.html, the same rules as site/public/styles.css) */
.mb-logo{position:relative;display:inline-flex;align-items:baseline;gap:.045em;font-size:var(--h,26px);line-height:1;padding:.82em .42em 0 .06em;filter:drop-shadow(0 .09em .42em rgba(124,77,255,.25));--ball-base:#fff;--ball-ink:#b546fe;--o-ring:#a748fe;--arrow:#27b6ff;--trophy:#2fbeff;--cutout:#06081c}
.mb-logo .L{font-family:Montserrat,"Arial Black",sans-serif;font-weight:900;font-style:italic;letter-spacing:-.012em;background-clip:text;-webkit-background-clip:text;color:transparent}
.mb-logo .g1{background-image:linear-gradient(180deg,#e040fb,#ba45fe)}.mb-logo .g3{background-image:linear-gradient(180deg,#954aff,#7555ff)}.mb-logo .g4{background-image:linear-gradient(180deg,#7555ff,#606cff)}.mb-logo .g5{background-image:linear-gradient(180deg,#606cff,#4b82ff)}.mb-logo .g6{background-image:linear-gradient(180deg,#4b82ff,#33a5ff)}.mb-logo .g8{background-image:linear-gradient(180deg,#1acdff,#00f5ff)}
.mb-logo .cell{display:inline-flex}.mb-logo .oCell svg{height:.8em;width:auto;position:relative;top:.05em}.mb-logo .eCell svg{height:.705em;width:auto;position:relative;top:.002em}
.mb-logo .oRing{stroke:var(--o-ring)}.mb-logo .ballBase{fill:var(--ball-base)}.mb-logo .ballInk{fill:var(--ball-ink)}.mb-logo .ballLine{stroke:var(--ball-ink)}.mb-logo .arrowP{fill:var(--arrow)}.mb-logo .trophyP{fill:var(--trophy)}.mb-logo .trophyH{stroke:var(--trophy)}.mb-logo .starC{fill:var(--cutout)}
.mb-logo .trophyG{filter:drop-shadow(0 0 10px rgba(0,213,255,.45));transform-box:fill-box;transform-origin:50% 100%}
.mb-logo .fx{position:absolute;top:0;right:0;height:1.02em;width:auto;pointer-events:none;overflow:visible}
.mb-logo .ball{animation:mbspin 6.5s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbspin{to{transform:rotate(360deg)}}
.mb-logo .arrowT,.mb-logo .arrowB{animation:mbswap 5.2s ease 1.4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbswap{0%,40%{transform:scaleX(1)}46%{transform:scaleX(-1.12)}49%,90%{transform:scaleX(-1)}96%{transform:scaleX(1.12)}100%{transform:scaleX(1)}}
.mb-logo.play .gl{animation:mbrise .55s cubic-bezier(.2,1.3,.35,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes mbrise{from{opacity:0;transform:translateY(.38em) scale(.9)}to{opacity:1;transform:none}}
.mb-logo .swoosh{clip-path:inset(-20% 0% -20% 0%)}.mb-logo.play .swoosh{animation:mbdraw .55s ease-out .5s both}
@keyframes mbdraw{from{clip-path:inset(-20% 100% -20% 0%)}to{clip-path:inset(-20% 0% -20% 0%)}}
.mb-logo.play .trophyG{animation:mbpop .6s cubic-bezier(.25,1.5,.4,1) .82s both}@keyframes mbpop{from{transform:scale(0)}}
.mb-logo .starC{animation:mbtwinkle 4.6s ease-in-out 1.8s infinite;transform-box:fill-box;transform-origin:center}
@keyframes mbtwinkle{0%,84%,100%{transform:scale(1) rotate(0)}92%{transform:scale(1.28) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.mb-logo *,.mb-logo.play .gl,.mb-logo.play .swoosh,.mb-logo.play .trophyG{animation:none!important}.mb-logo .swoosh{clip-path:none}}