/* Mergan — kechki vodiy: iliq tuman, tosh, oltin urg'u. Sahna ustida og'ir panel yo'q: katta matn, soya, yumaloq tugmalar. Telefon portret birinchi. */
:root, :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: dark; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --bg: #1b1614; --sur: #2a221e; --sur2: #362c27; --sur3: #443832; --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.2); --fg: #fff; --mut: #e0d2c4; --acc: #ffb733; --acc-ink: #2a1400; --acc-text: #ffc757; --red: #ff6a55; --green: #7fe0a0;
  --gold1: #ffd768; --gold2: #ff8d1e; --ink: #2a1400; --navy: 30, 22, 20; --ts: 0 1px 2px rgba(20,10,6,.8), 0 2px 16px rgba(20,10,6,.5); --c0: #4fa6cc; --c1: #e0574a; }
html, body { height: 100%; overflow: hidden; background: #3b332c linear-gradient(180deg, #8a7d92 0%, #d8b39b 32%, #e9c9a0 46%, #6f7348 47%, #3e4a2a 70%, #2b2a1e 100%); overscroll-behavior: none; }
body { position: fixed; inset: 0; color: #fff; font-family: var(--font, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#vig { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 95% 80% at 50% 48%, transparent 60%, rgba(20, 12, 8, .3) 100%); }
body.low #vig { display: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { position: absolute; }
#ui button, #ui a, #ui input { pointer-events: auto; }
.sp { flex: 1; }

#splash { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; padding-top: calc(16vh + var(--sat)); background: #2a2420 linear-gradient(180deg, #8a7d92, #d8b39b 40%, #4a4a30 60%, #2a2a1e); transition: opacity .55s ease; pointer-events: none; }
#splash.off { opacity: 0; }
.sp-box { width: min(320px, 78vw); text-align: center; }
.sp-box b { display: block; font-size: clamp(46px, 13.5vw, 68px); line-height: .98; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 18px; text-shadow: var(--ts); }
.sp-bar { height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .24); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 4%; border-radius: 4px; background: linear-gradient(90deg, var(--gold1), var(--gold2)); transition: width .2s ease; }
.sp-box small { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 650; min-height: 18px; text-shadow: var(--ts); }

/* tugmalar */
.btn-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 66px; padding: 0 22px; border: 0; border-radius: 20px; background: linear-gradient(180deg, var(--gold1) 0%, #ffb62e 46%, var(--gold2) 100%); color: var(--ink); font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; cursor: pointer; text-decoration: none; box-shadow: 0 5px 0 #b34c08, 0 14px 30px rgba(20,10,6,.42), inset 0 1.5px 0 rgba(255,255,255,.65); transition: transform .08s ease, box-shadow .08s ease, filter .15s; }
.btn-main:active { transform: translateY(4px); box-shadow: 0 1px 0 #b34c08, 0 6px 18px rgba(20,10,6,.42), inset 0 1.5px 0 rgba(255,255,255,.65); }
.btn-main:disabled { filter: saturate(.55) brightness(.85); cursor: default; font-size: 17px; text-transform: none; font-style: normal; font-weight: 800; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 16px; background: rgba(var(--navy), .62); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform .08s, background .15s; }
.btn2:active { transform: translateY(2px) scale(.985); }
.btn2 svg { width: 21px; height: 21px; flex: none; }
.btn2 b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff7a1e; color: #fff; font-size: 13px; line-height: 22px; font-weight: 800; }
.btn2 b:empty { display: none; }
.btn-link { display: block; width: 100%; min-height: 44px; border: 0; background: transparent; color: #fff; font-size: 15.5px; font-weight: 700; text-shadow: var(--ts); cursor: pointer; }
.rbtn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(var(--navy), .5); color: #fff; cursor: pointer; text-decoration: none; transition: transform .08s; }
.rbtn:active { transform: scale(.92); }
.rbtn svg { width: 21px; height: 21px; }
.rbtn.txt { font-size: 13.5px; font-weight: 800; }
.rbtn.big { width: 56px; height: 56px; } .rbtn.big svg { width: 26px; height: 26px; }

/* menyu */
#scrMenu { inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.m-top { position: relative; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--sat)) max(12px, var(--sar)) 0 max(12px, var(--sal)); }
.m-top .gu-menu2 { top: calc(100% + 2px); right: 12px; color: #fff; pointer-events: auto; }
.m-logo { padding: clamp(6px, 3vh, 34px) 20px 0; text-align: center; animation: mg-logo .7s cubic-bezier(.2,.9,.25,1.1) both; }
.m-logo h1 { margin: 0; font-size: clamp(50px, 15vw, 80px); line-height: .96; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; color: #fff; text-shadow: var(--ts), 0 6px 34px rgba(255,150,60,.34); }
.m-logo p { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: #fff3e0; text-shadow: var(--ts); }
.m-logo::after { content: ""; display: block; width: 94px; height: 5px; margin: 11px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold1), var(--gold2)); }
@keyframes mg-logo { from { opacity: 0; transform: translateY(-14px) scale(1.06); } }
.m-bottom { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; padding: 0 max(14px, var(--sar)) calc(12px + var(--sab)) max(14px, var(--sal)); animation: mg-up .55s cubic-bezier(.2,.9,.25,1) both .08s; }
@keyframes mg-up { from { opacity: 0; transform: translateY(26px); } }
.m-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.m-chips[hidden] { display: none; }
.lv { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: rgba(var(--navy), .46); color: #fff; font-size: 14.5px; font-weight: 750; cursor: pointer; }
.lv b { font-weight: inherit; } .lv i { font-style: normal; font-size: 11.5px; opacity: .75; }
.lv.on { background: #fff; color: #2a1d16; border-color: #fff; font-weight: 850; }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.m-small { display: flex; align-items: center; gap: 7px; }
.btn-range { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 1px solid rgba(255,215,104,.55); border-radius: 16px; background: rgba(var(--navy), .62); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; text-align: left; }
.btn-range svg { width: 24px; height: 24px; color: var(--gold1); flex: none; }
.btn-range span { flex: 1; } .btn-range small { display: block; font-size: 12.5px; font-weight: 650; color: #f3e2c8; }
.btn-range i { font-style: normal; font-weight: 850; color: var(--gold1); font-variant-numeric: tabular-nums; }
#menuSponsors:empty { display: none; }
@media (min-width: 760px) and (min-height: 501px) {
  #scrMenu { align-items: flex-start; } .m-top { width: 100%; }
  .m-logo { text-align: left; padding: 3vh 0 0 5vw; } .m-logo h1 { font-size: 88px; } .m-logo::after { margin-left: 2px; }
  .m-bottom { width: 400px; margin-left: 5vw; padding: 0 0 5vh; }
  .btn-main:hover, .btn2:hover, .rbtn:hover, .lv:hover, .btn-range:hover { filter: brightness(1.12); }
}
@media (max-height: 500px) {
  .m-logo { text-align: left; padding: 0; position: absolute; left: 66px; top: calc(8px + var(--sat)); } .m-logo h1 { font-size: 32px; } .m-logo p, .m-logo::after { display: none; }
  .m-bottom { position: absolute; right: max(10px, var(--sar)); bottom: 8px; width: min(380px, 50vw); gap: 6px; padding: 0; }
  .btn-main { min-height: 52px; font-size: 21px; } .btn2, .btn-range { min-height: 44px; font-size: 14.5px; } .lv { height: 38px; } .btn-range small { display: none; }
}

/* kutish, do'st */
.center-panel { left: 0; right: 0; bottom: 0; padding: 22px max(16px, var(--sar)) calc(16px + var(--sab)) max(16px, var(--sal)); background: linear-gradient(180deg, transparent, rgba(var(--navy), .74) 24%, rgba(var(--navy), .9)); pointer-events: auto; animation: mg-up .35s cubic-bezier(.2,.9,.25,1) both; }
.center-panel h3 { margin: 0 0 6px; font-size: 26px; font-weight: 900; font-style: italic; text-transform: uppercase; text-shadow: var(--ts); line-height: 1.08; }
.center-panel p { margin: 0 0 12px; color: #f0e2d2; font-size: 14.5px; line-height: 1.4; }
.center-panel .lbl { margin: 16px 0 7px; font-weight: 700; }
.center-panel .btns { display: grid; gap: 9px; margin-top: 12px; }
@media (min-width: 760px) and (min-height: 501px) { .center-panel { left: 5vw; right: auto; width: 420px; bottom: 5vh; padding: 22px; border-radius: 22px; background: rgba(var(--navy), .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.spin { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: var(--gold1); animation: mg-spin 1s linear infinite; flex: none; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
.wait-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .wait-row h3 { margin: 0; }
.code-big { font: 900 54px/1.05 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; text-align: center; padding: 8px 0; margin: 4px 0 8px; color: var(--gold1); text-shadow: var(--ts); }
.code-row { display: flex; gap: 8px; } .code-row .btn2 { flex: none; }
.code-input { flex: 1; min-width: 0; min-height: 52px; font: 800 24px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-align: center; text-transform: uppercase; border-radius: 16px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; outline: none; user-select: text; -webkit-user-select: text; }
.code-input:focus { border-color: var(--gold1); }

/* jang HUD */
#hud { inset: 0; pointer-events: none; }
#hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(118px + var(--sat)); background: linear-gradient(180deg, rgba(30,18,14,.5), rgba(30,18,14,.12) 70%, transparent); }
.top { position: absolute; left: max(10px, var(--sal)); right: max(10px, var(--sar)); top: calc(8px + var(--sat)); display: flex; align-items: flex-start; gap: 8px; }
.turn { flex: 1; min-width: 0; text-align: center; padding-top: 2px; }
.turn span { display: block; font-size: 21px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.12; text-shadow: var(--ts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; text-shadow: var(--ts); white-space: nowrap; color: #fff3e0; }
.turn.me span { color: var(--gold1); }
.plates { position: absolute; left: max(10px, var(--sal)); right: max(10px, var(--sar)); top: calc(60px + var(--sat)); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.plate { min-width: 0; max-width: 42%; display: flex; flex-direction: column; gap: 4px; text-shadow: var(--ts); }
.plate.r { align-items: flex-end; text-align: right; }
.plate .nm { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; white-space: nowrap; max-width: 100%; }
.plate .nm b { overflow: hidden; text-overflow: ellipsis; } .plate .nm i { font-style: normal; font-weight: 650; opacity: .8; font-size: 12px; }
.plate .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.plate.p0 .dot { background: var(--c0); } .plate.p1 .dot { background: var(--c1); }
.pips { display: flex; gap: 4px; }
.pips i { width: 26px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: background .3s, transform .3s; }
.pips i.off { background: rgba(255,255,255,.2); transform: scaleY(.7); }
.plate.r .pips { flex-direction: row-reverse; }
.wind { position: absolute; left: 50%; top: calc(58px + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; text-shadow: var(--ts); }
.wind .wc { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: rgba(var(--navy), .35); display: grid; place-items: center; }
.wind svg { width: 30px; height: 30px; transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.wind b { font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; } .wind small { font-size: 11px; font-weight: 700; opacity: .85; margin-top: -2px; }
.cnt { position: absolute; right: max(12px, var(--sar)); bottom: calc(14px + var(--sab)); font-size: 13px; font-weight: 800; text-shadow: var(--ts); opacity: .9; font-variant-numeric: tabular-nums; }
.tbar { position: absolute; left: 0; right: 0; top: 0; height: calc(3px + var(--sat)); background: rgba(0,0,0,.2); }
.tbar i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold1); transform-origin: left; }
.tbar.low i { background: var(--red); }
.tbar[hidden] { display: none; }
.hint { left: 50%; transform: translateX(-50%); bottom: calc(22px + var(--sab)); width: min(92vw, 440px); text-align: center; font-size: 15px; font-weight: 750; line-height: 1.35; text-shadow: var(--ts); animation: mg-up .4s both; }
.meter { left: 50%; transform: translateX(-50%); bottom: calc(26px + var(--sab)); width: min(78vw, 340px); text-align: center; text-shadow: var(--ts); }
.meter .bar { position: relative; height: 12px; border-radius: 7px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); overflow: hidden; }
.meter .bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #ffe7a0, var(--gold1) 60%, var(--gold2)); }
.meter .bar.full i { background: linear-gradient(90deg, var(--gold1), #fff3c4); }
.meter .bar.sway i { background: linear-gradient(90deg, var(--gold2), var(--red)); }
.meter .nums { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.meter .nums span i { font-style: normal; font-weight: 650; opacity: .8; font-size: 12px; margin-right: 4px; }
.cancel-zone { left: 50%; top: calc(150px + var(--sat)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px dashed rgba(255,255,255,.6); background: rgba(var(--navy), .4); font-size: 14px; font-weight: 800; text-shadow: var(--ts); }
.cancel-zone svg { width: 18px; height: 18px; }
.cancel-zone.on { background: rgba(224,87,74,.75); border-style: solid; }
.banner { left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: mg-ban 1.6s cubic-bezier(.2,.9,.25,1) both; }
.banner b { display: block; font-size: clamp(32px, 10vw, 54px); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; text-shadow: var(--ts), 0 4px 30px rgba(0,0,0,.35); }
.banner small { display: block; font-size: 16px; font-weight: 800; text-shadow: var(--ts); }
.banner.hit b { color: var(--gold1); } .banner.bad b { color: #ffb4a6; } .banner.miss b { color: #fff; font-size: clamp(26px, 8vw, 40px); }
.banner.score b { color: var(--gold1); font-size: clamp(44px, 14vw, 72px); }
@keyframes mg-ban { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.85); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%); } }
.conn-banner { left: 50%; top: calc(150px + var(--sat)); transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: rgba(160,40,30,.85); font-size: 14px; font-weight: 750; white-space: nowrap; }
.rscore { position: absolute; left: max(12px, var(--sal)); top: calc(60px + var(--sat)); text-shadow: var(--ts); }
.rscore b { display: block; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; } .rscore small { font-size: 12.5px; font-weight: 750; }
.rshots { display: flex; gap: 3px; margin-top: 6px; }
.rshots i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 850; background: rgba(255,255,255,.18); }
.rshots i.v { background: rgba(255,215,104,.9); color: #2a1400; } .rshots i.z { background: rgba(255,255,255,.35); } .rshots i.cur { box-shadow: 0 0 0 2px #fff; }
@media (max-height: 500px) { .plates { top: calc(52px + var(--sat)); } .wind { top: calc(4px + var(--sat)); left: auto; right: 64px; transform: none; } .turn span { font-size: 18px; } #hud::before { height: 96px; } .cancel-zone { top: calc(56px + var(--sat)); } }

/* yakun */
.ovr { inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.ov-title { padding: calc(70px + var(--sat)) 20px 0; text-align: center; animation: mg-logo .6s both; }
.ov-title h2 { margin: 0; font-size: clamp(46px, 14vw, 76px); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; text-shadow: var(--ts), 0 6px 30px rgba(0,0,0,.4); }
.ovr.win h2 { color: var(--gold1); }
.ov-title p { margin: 4px 0 0; font-size: 16px; font-weight: 750; text-shadow: var(--ts); }
.ov-bottom { margin-top: auto; display: grid; gap: 10px; padding: 0 max(14px, var(--sar)) calc(14px + var(--sab)) max(14px, var(--sal)); animation: mg-up .5s both .15s; pointer-events: auto; }
.ov-stats { display: flex; justify-content: center; gap: 22px; text-shadow: var(--ts); }
.ov-stats span { text-align: center; } .ov-stats b { display: block; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; } .ov-stats i { font-style: normal; font-size: 12.5px; font-weight: 700; opacity: .9; }
.ov-stats b.up { color: var(--green); } .ov-stats b.down { color: #ffb4a6; }
.ov-row { display: flex; gap: 9px; } .ov-row .btn2 { flex: 1; }
@media (min-width: 760px) and (min-height: 501px) { .ov-bottom { width: 420px; margin-left: auto; margin-right: auto; padding-bottom: 5vh; } }
@media (max-height: 500px) { .ov-title { padding-top: calc(16px + var(--sat)); } .ov-title h2 { font-size: 40px; } .ov-bottom { width: 400px; margin-left: auto; margin-right: auto; } }

.mg-set .row { margin-bottom: 14px; } .mg-set .gu-seg { margin-top: 6px; } .mg-now { display: block; margin-top: 6px; color: var(--mut); }
.mg-rules h4 { margin: 14px 0 6px; } .mg-rules ul { margin: 0; padding-left: 20px; } .mg-rules li { margin: 4px 0; line-height: 1.4; } .mg-rules p { line-height: 1.45; }
.nogl { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: #2a2420; text-align: center; } .nogl h2 { margin: 0 0 8px; } .nogl p { color: #eadccc; margin: 0 0 18px; }

/* ---- nishonga otish: hisob jadvali, mo'ljal (scope), ochko */
.sb { position: absolute; left: max(10px, var(--sal)); right: max(10px, var(--sar)); top: calc(60px + var(--sat)); display: grid; gap: 4px; pointer-events: none; }
.sb-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 12px; background: rgba(var(--navy), .5); text-shadow: var(--ts); font-size: 13.5px; }
.sb-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.sb-row.p0 .dot { background: var(--c0); } .sb-row.p1 .dot { background: var(--c1); }
.sb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.sb-c { display: flex; gap: 3px; } .sb-c i { width: 26px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.sb-c i.f { background: rgba(255,255,255,.88); color: #241a12; } .sb-c i.ten { background: var(--gold1); color: var(--ink); } .sb-c i.cur { box-shadow: 0 0 0 2px #fff; }
.sb-t { min-width: 26px; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.sb-s { min-width: 28px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--gold1); color: var(--ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.sb-need { font-size: 12px; font-weight: 750; text-align: right; opacity: .9; text-shadow: var(--ts); }
.bot-tag { font-style: normal; padding: 0 5px; border-radius: 5px; background: rgba(255,255,255,.22); font-size: 11px; }
#hud .wind { top: calc(136px + var(--sat)); bottom: auto; left: auto; right: max(12px, var(--sar)); transform: none; } #hud .wind .wc { width: 52px; height: 52px; } #hud .wind svg { width: 34px; height: 34px; } #hud .wind b { font-size: 15px; }
@media (max-height: 500px) { #hud .wind { top: calc(112px + var(--sat)); } }
.scope { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .08s linear; }
.scope .sc-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(10,14,20,.38) 100%); }
.scope .ret { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.scope .ret i { position: absolute; display: block; }
.scope .ret .r1 { left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4); }
.scope .ret .h { top: -1px; width: 14px; height: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); } .scope .ret .h.l { left: -32px; } .scope .ret .h.r { left: 18px; }
.scope .ret .v { left: -1px; width: 2px; height: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); } .scope .ret .v.t { top: -32px; } .scope .ret .v.b { top: 18px; }
.scope .ret .dot { left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #ff3b2f; box-shadow: 0 0 0 1.5px #fff, 0 0 6px rgba(255,59,47,.9); }
.scope .sc-wind { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 14px; background: rgba(var(--navy), .6); font-size: 14px; font-weight: 750; white-space: nowrap; text-shadow: var(--ts); }
.scope .sc-wind svg { width: 18px; height: 18px; } .scope .sc-wind b { font-size: 16px; }
@media (max-height: 500px) { .scope .sc-wind { top: auto; bottom: 8px; } }
.pop { left: 50%; top: 34%; transform: translate(-50%, -50%); text-align: center; animation: mg-ban 1.6s cubic-bezier(.2,.9,.25,1) both; pointer-events: none; }
.pop b { display: block; font-size: clamp(56px, 18vw, 96px); font-weight: 900; line-height: 1; text-shadow: var(--ts), 0 6px 30px rgba(0,0,0,.4); }
.pop.gold b { color: var(--gold1); } .pop.miss b { font-size: clamp(30px, 9vw, 46px); }
.pop small { display: block; font-size: 15px; font-weight: 800; text-shadow: var(--ts); }
.ov-stars { text-align: center; font-size: 44px; color: var(--gold1); letter-spacing: 6px; text-shadow: var(--ts); } .ov-stars i { font-style: normal; color: rgba(255,255,255,.25); }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 4px 0 6px; }
.stg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--fg); cursor: pointer; }
.stg b { font-size: 15px; } .stg small { font-size: 10px; color: var(--gold1); letter-spacing: 1px; } .stg.cur { border-color: var(--gold1); background: rgba(242,193,78,.14); } .stg:disabled { opacity: .35; cursor: default; }
.mono { font-size: 12px; font-weight: 700; text-shadow: var(--ts); }
.m-two .btn-main { grid-column: 1 / -1; }
@media (max-height: 500px) { .sb { top: calc(50px + var(--sat)); left: auto; width: min(360px, 52vw); } }
.btn-main svg { width: 28px; height: 28px; flex: none; }
#hud ~ .hint, .hint { bottom: calc(84px + var(--sab)); }

/* shamol: o'ng-chap strelka */
.wind2 { position: absolute; left: 50%; top: calc(142px + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px 7px; border-radius: 16px; background: rgba(var(--navy), .55); text-shadow: var(--ts); white-space: nowrap; }
.wind2 .wt { font-size: 11px; font-weight: 750; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.wl { display: flex; align-items: center; gap: 6px; } .wl b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; } .wl em { font-style: normal; font-size: 12px; font-weight: 750; opacity: .85; }
.wa { display: inline-flex; color: #8fe0ff; } .wa svg { width: 100%; height: 16px; } .wa.left svg { transform: scaleX(-1); }
.wind2 small, .sc-wind small { font-size: 12px; font-weight: 750; } .wind2 small.fb, .sc-wind small.fb { opacity: .8; font-weight: 650; }
.scope .sc-wind { flex-direction: column; gap: 1px; top: calc(50% + 64px); }
@media (max-height: 500px) { .wind2 { top: calc(4px + var(--sat)); left: auto; right: 70px; transform: none; } }