:root{--bg1:#070d1f;--bg2:#0e1a3a;--bl1:rgba(96,165,250,.34);--bl2:rgba(240,200,120,.22);--gl:rgba(255,255,255,.07);--gll:rgba(255,255,255,.17);--tx:#f2f6ff;--mut:#9fb0d3;--a:#8ec5ff;--b:#f0c878;--dr:rgba(255,255,255,.15);--ona:#071a33;--onb:#2b1d00;--hi:#f0c878;--btn:#f0c878;--onbtn:#2b1d00;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg1);color:var(--tx);font:500 15px/1.4 Onest,system-ui,sans-serif}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(360px 360px at 0% 4%,var(--bl1),transparent 70%),radial-gradient(380px 380px at 100% 30%,var(--bl2),transparent 70%),radial-gradient(420px 420px at 20% 100%,var(--bl1),transparent 70%),linear-gradient(var(--bg1),var(--bg2))}
.bg:before{content:"";position:absolute;inset:-25% -40%;background:linear-gradient(100deg,transparent 14%,rgba(142,197,255,.16) 21%,transparent 30%,transparent 44%,rgba(240,200,120,.16) 50%,transparent 58%,transparent 70%,rgba(142,197,255,.10) 78%,transparent 86%);transform:skewX(-9deg);animation:sweep 26s ease-in-out infinite alternate}
.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px) 0 0/24px 24px;-webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%);opacity:.5}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes sweep{from{transform:skewX(-9deg) translateX(-8%)}to{transform:skewX(-9deg) translateX(8%)}}
.app{max-width:480px;margin:0 auto;min-height:100vh;padding:12px 16px 110px}
.g{background:var(--gl);border:1px solid var(--gll);border-radius:22px;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 10px 30px rgba(0,0,0,.14),inset 0 1px 0 var(--gll)}
button:focus-visible,.card:focus-visible,input:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.view{display:none}.view.on{display:block}
.head{display:flex;justify-content:space-between;align-items:center}
.logo{font:800 24px Onest;letter-spacing:-.01em}.logo i{color:var(--a);font-style:normal}
.cnt{padding:7px 14px;border-radius:99px;font:700 13px Onest}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 0;padding:0 16px 4px;scrollbar-width:none}
.tabs button{all:unset;cursor:pointer;flex:none;padding:9px 16px;border-radius:99px;background:var(--gl);border:1px solid var(--gll);color:var(--mut);font-weight:600;font-size:14px}
.tabs button.on{background:var(--btn);color:var(--onbtn);border-color:transparent;font-weight:800}
.q{width:100%;margin:12px 0 2px;padding:13px 16px;border-radius:16px;color:var(--tx);font:inherit;background:var(--gl);border:1px solid var(--gll)}
.q::placeholder{color:var(--mut)}
.day{margin:20px 0 10px;font:700 13px Onest;color:var(--mut);letter-spacing:.06em}
.card{display:block;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:transform .15s;background:var(--gl);border:1px solid var(--gll);border-radius:22px;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 10px 30px rgba(0,0,0,.14),inset 0 1px 0 var(--gll)}
.card:active{transform:scale(.98)}
.r1{display:flex;justify-content:space-between;align-items:center;color:var(--mut);font-size:12px}.r1 b{font:700 15px Onest;color:var(--tx)}
.tn{font:800 20px/1.15 Onest;letter-spacing:-.01em;margin:6px 0 10px}.tn em{color:var(--mut);font-style:normal;font-weight:600;font-size:13px;padding:0 8px;display:inline-block}
.tn img{width:22px;height:22px;object-fit:contain;vertical-align:-4px}
.sk{display:flex;height:10px;overflow:hidden;margin:0 -3px}.sk i{flex:var(--f);transform:skewX(-20deg);margin:0 -1px}
.sk .w{background:var(--a)}.sk .d{background:var(--dr)}.sk .r{background:var(--b)}
.sk.off{background:repeating-linear-gradient(-45deg,var(--dr) 0 6px,transparent 6px 12px);margin:0;border-radius:4px}
.pk{margin-top:10px;font-size:13px;font-weight:600;display:flex;justify-content:space-between}.pk span{color:var(--mut);font-weight:500}.pk.none{color:var(--mut);font-weight:500}
.empty{display:none;text-align:center;color:var(--mut);padding:26px 0}
.back{all:unset;cursor:pointer;color:var(--mut);font-size:14px;margin-bottom:8px;display:inline-block}
.meta{display:flex;justify-content:space-between;color:var(--mut);font-size:13px}
.duel{display:flex;height:214px;margin:12px -6px 0;overflow:hidden;border-radius:26px;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.seg{flex:var(--f);min-width:0;transform:skewX(-9deg);margin:0 -5px;position:relative;transition:flex .9s cubic-bezier(.2,.9,.2,1)}
.seg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.seg>div{transform:skewX(9deg);height:100%;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between}
.seg .nm{font-weight:800;font-size:14px}.seg .pc{font:800 36px/.9 Onest;letter-spacing:-.03em}
.sw{background:linear-gradient(160deg,var(--a),color-mix(in srgb,var(--a) 70%,#000));color:var(--ona)}
.sd{background:var(--gl);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--tx)}.sd>div{align-items:center;text-align:center}.sd .pc{font-size:22px}
.sr{background:linear-gradient(200deg,var(--b),color-mix(in srgb,var(--b) 70%,#000));color:var(--onb)}.sr>div{align-items:flex-end;text-align:right}
.vd h1{margin:20px 0 0;font:800 30px/1.1 Onest;letter-spacing:-.02em}.vd p{margin:8px 0 0;color:var(--mut)}
.edge{display:flex;gap:10px;margin:16px 0}
.box{flex:1;padding:14px 16px}.box small{color:var(--mut);font-size:12px}.box b{display:block;font:800 28px/1.1 Onest;letter-spacing:-.02em}
.box.hl{border-color:var(--hi)}.box.hl b{color:var(--hi)}
.acc{margin-bottom:10px;overflow:hidden}
.acc>button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;padding:16px 18px;display:flex;gap:10px;align-items:center}
.acc .t{font:700 17px Onest}.acc .pv{margin-left:auto;color:var(--mut);font-size:13px}.acc .ch{color:var(--mut);font-size:11px;transition:transform .25s}.acc.open .ch{transform:rotate(180deg)}
.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.acc.open .bd{grid-template-rows:1fr}.bd>div{overflow:hidden}
.in{padding:0 18px 16px;color:var(--mut);font-size:14px}
.fr{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--tx)}
.st{display:flex;gap:4px}.st i{width:22px;height:9px;background:var(--dr);transform:skewX(-20deg)}.st .w{background:var(--a)}.st .l{background:var(--b)}
.go{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;margin-top:14px;padding:16px;text-align:center;border-radius:20px;background:var(--btn);color:var(--onbtn);font:800 17px Onest;letter-spacing:.03em;box-shadow:0 12px 28px color-mix(in srgb,var(--btn) 40%,transparent)}
.go:active{transform:scale(.98)}.go:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.note{text-align:center;color:var(--mut);font-size:12px;margin-top:10px}
.nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:456px;margin:0 auto;display:flex;padding:6px;border-radius:24px;z-index:60}
.nav button{all:unset;cursor:pointer;flex:1;text-align:center;padding:11px 0;border-radius:18px;font:700 15px Onest;color:var(--mut)}
.nav button.on{background:var(--gll);color:var(--tx)}
.duel.empty .seg{background:repeating-linear-gradient(-45deg,var(--dr) 0 8px,transparent 8px 16px),var(--gl);color:var(--mut)}.duel.empty .seg:after{display:none}
.duel.busy .seg{animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}
.box.hl2 b{color:var(--mut)}
.ck{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--gll);font-size:14px}.ck:first-child{border-top:0}
.ck b{font-size:12px;font-weight:700;color:var(--mut)}.ck.ok b{color:var(--a)}.ck.run b{color:var(--hi)}
.seg.dim{filter:saturate(.55);opacity:.55}.seg.pick{z-index:2;box-shadow:inset 0 0 0 2px var(--hi)}
.tg{display:block;width:fit-content;margin-top:6px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.24);color:inherit;text-transform:uppercase}
.sd .tg{background:rgba(255,255,255,.18);margin-inline:auto}.sr .tg{margin-left:auto}
.mkl{font-size:12px;color:var(--mut);margin:14px 0 -6px}

/* team crests in the match card header */
.th{display:flex;align-items:center;gap:12px;margin:14px -6px 0;padding:6px 4px 2px}
.th .tm{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.th .tm.r{flex-direction:row-reverse;text-align:right}
.th .tm img{width:40px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.th .nm{font:800 17px/1.15 Onest;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th .vs2{font:700 12px Onest;color:var(--mut);flex:none;padding-top:10px}
.kv2{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:13px}
.kv2:last-child{border:none}.kv2 span:first-child{color:var(--mut)}
.kv2 span:last-child{font-weight:700;color:var(--tx)}
.tab2{display:flex;gap:4px;margin-top:2px;flex-wrap:wrap}
.tab2 i{font-style:normal;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--gl);border:1px solid var(--gll);color:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
th{color:var(--mut);font-weight:600;text-align:left;padding:5px 6px;font-size:11px;text-transform:uppercase}
td{padding:5px 6px;border-top:1px solid var(--gll);font-size:12.5px;color:var(--tx)}
tr.hl td{color:var(--hi)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.bg:before,.duel.busy .seg{animation:none}}
@media(min-width:768px){.app{max-width:560px}}
/* раздел Ставки */
.bank-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  width:100%;text-align:left;padding:18px;border-radius:22px;cursor:pointer;
  font:inherit;color:var(--tx);
  background:var(--gl);border:1px solid var(--gll);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.14),inset 0 1px 0 var(--gll)}
.bank-btn small{display:block;font:700 11px/1 Onest;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.bank-btn b{display:block;font:800 26px/1.1 Onest;letter-spacing:-.02em;color:var(--hi)}
.bank-btn .pv{margin:0;flex:none}
.bank-btn:active{transform:scale(.985)}
.edge{display:flex;gap:10px}
.edge .box{flex:1;padding:12px 14px;border-radius:14px;text-align:center}
.edge .box small{color:var(--mut);font:600 11px Onest;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:4px}
.edge .box b{font:800 19px Onest;letter-spacing:-.02em}
.sb{display:flex;gap:8px;margin-top:10px}
.sb button{flex:1;padding:9px 6px;border-radius:10px;font:700 12px Onest}
.sb button:nth-child(1){background:rgba(110,231,183,.15);color:#6ee7b7;border:1px solid rgba(110,231,183,.3)}
.sb button:nth-child(2){background:rgba(255,107,107,.13);color:#ff8a8a;border:1px solid rgba(255,107,107,.28)}
.sb button:nth-child(3){background:rgba(255,255,255,.07);color:var(--mut);border:1px solid rgba(255,255,255,.1)}
.pf{font:800 15px Onest;white-space:nowrap}
.del{all:unset;flex:none;width:32px;height:32px;border-radius:10px;cursor:pointer;
  background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.25);
  color:#ff8a8a;font:800 14px Onest;line-height:1;display:grid;place-items:center}
.del:hover{background:rgba(255,107,107,.2)}
.bank-in{background:var(--gl) !important;border:1px solid var(--gll) !important;color:var(--tx) !important}

/* диалог сохранения прогноза */
.dlg{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,7,18,.72);backdrop-filter:blur(4px);padding:0 0 16px}
.dlg > .g{width:100%;max-width:480px;margin:0 12px;border-radius:20px}
.pickbox{padding:12px 14px;border-radius:12px;background:rgba(240,200,120,.1);
  border:1px solid rgba(240,200,120,.28);font:700 16px Onest}
.pickbox em{display:block;font:600 12px Onest;color:var(--mut);margin-top:3px;font-style:normal}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{display:block}
.grid2 label span{font:600 12px Onest;color:var(--mut);display:block;margin-bottom:5px}
.grid2 .q{margin:0}
.err{color:#ff8a8a;font:600 12px Onest;min-height:16px;margin-top:8px}
/* ── экран входа ── */
.gate{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;background:linear-gradient(180deg,#060b1a 0%,#0a1230 55%,#0d173a 100%)}
.gate .gcard{width:100%;max-width:380px;padding:30px 22px 26px;border-radius:24px;text-align:center;
  background:var(--gl);border:1px solid var(--gll);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 var(--gll)}
.gate .logo{font:800 26px Onest;letter-spacing:.02em;color:var(--tx);margin-bottom:14px}
.gate .logo span{color:var(--hi)}
.gate .hint{font:600 13px Onest;color:var(--mut);margin:0 0 18px;line-height:1.45}
.gate .tok-in{width:100%;margin:0 0 4px}
.gate .go{margin-top:10px}