/* Kamon Duel — shafaq siluetlari: to'q binafsha osmon, iliq ufq, siluet kamonchilar; urg'u — iliq oltin, tomonlar — firuza va olovrang. 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: #15131f; --sur: #221e33; --sur2: #2c2742; --sur3: #383150; --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: 22, 18, 36; --ts: 0 1px 2px rgba(20,10,6,.8), 0 2px 16px rgba(20,10,6,.5); --c0: #55b8de; --c1: #ec6a55; }
html, body { height: 100%; overflow: hidden; background: #15131f linear-gradient(180deg, #151a33 0%, #3d3560 40%, #a8657a 66%, #efa36e 74%, #1d1c2a 75%, #121119 100%); overscroll-behavior: none; }
body { position: fixed; inset: 0; color: #fff; font-family: var(--font, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: 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: #15131f linear-gradient(180deg, #151a33, #3d3560 45%, #a8657a 70%, #121119); 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: kd-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 kd-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: kd-up .55s cubic-bezier(.2,.9,.25,1) both .08s; }
@keyframes kd-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: kd-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: kd-spin 1s linear infinite; flex: none; }
@keyframes kd-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: kd-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: kd-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 kd-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: kd-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: kd-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; } }

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

/* jon chiziqlari va raund belgilari */
.plate .hpb { position: relative; width: min(34vw, 190px); height: 10px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.plate .hpb i, .plate .hpb b { position: absolute; inset: 0; transform-origin: left; }
.plate .hpb i { z-index: 1; transition: transform .45s cubic-bezier(.2,.9,.25,1); }
.plate .hpb b { background: rgba(255,255,255,.75); transition: transform 1.1s ease .35s; }
.plate.p0 .hpb i { background: linear-gradient(90deg, #3d9cc4, var(--c0)); } .plate.p1 .hpb i { background: linear-gradient(90deg, #d4513f, var(--c1)); }
.plate.r .hpb i, .plate.r .hpb b { transform-origin: right; }
.plate .row2 { display: flex; align-items: center; gap: 8px; } .plate.r .row2 { flex-direction: row-reverse; }
.plate .hpn { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .9; }
.rdots { display: flex; gap: 4px; } .rdots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); } .rdots i.on { background: var(--gold1); border-color: var(--gold1); }
.windbar { position: absolute; left: 50%; top: calc(104px + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-shadow: var(--ts); }
.windbar .wv { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; }
.windbar svg { width: 30px; height: 18px; transition: transform .4s; } .windbar small { font-size: 11px; font-weight: 700; opacity: .85; }
.aimlbl { position: absolute; transform: translate(-50%, -100%); font-size: 13px; font-weight: 850; white-space: nowrap; text-shadow: var(--ts); font-variant-numeric: tabular-nums; pointer-events: none; }
.aimlbl i { font-style: normal; opacity: .75; font-weight: 700; margin: 0 2px 0 6px; }
@media (max-height: 500px) { .windbar { top: calc(4px + var(--sat)); left: auto; right: 64px; transform: none; } }
/* yo'l (kampaniya) */
.stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 4px 0 10px; }
.stg { aspect-ratio: 1; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; font-weight: 850; cursor: pointer; font-variant-numeric: tabular-nums; }
.stg.done { background: rgba(242,193,78,.18); border-color: rgba(242,193,78,.6); }
.stg.cur { background: var(--gold1); color: var(--ink); border-color: var(--gold1); }
.stg:disabled { opacity: .35; cursor: default; }
.look { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.look button { display: inline-flex; align-items: center; gap: 7px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--fg); cursor: pointer; padding: 0 10px; font-weight: 750; font-size: 13px; }
.look button[aria-pressed="true"] { border-color: var(--gold1); } .look button:disabled { opacity: .4; cursor: default; }
.look .sw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.look small { font-weight: 650; opacity: .8; }
.bot-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.22); font-style: normal; font-size: 11px; font-weight: 800; }
.btn-main svg { width: 26px; height: 26px; flex: none; }
.btypes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.btypes button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: var(--fg); text-align: left; cursor: pointer; }
.btypes button[aria-pressed="true"] { border-color: var(--gold1); background: rgba(242,193,78,.1); }
.btypes b { font-size: 14.5px; } .btypes small { font-size: 12px; line-height: 1.3; opacity: .8; }
.hint { bottom: calc(46px + var(--sab)); }
.sps { position: absolute; left: max(10px, var(--sal)); bottom: calc(12px + var(--sab)); display: flex; gap: 8px; }
.spb { position: relative; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px 0 10px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(var(--navy), .6); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.spb svg { width: 22px; height: 22px; } .spb i { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold1); color: var(--ink); font-style: normal; font-size: 12px; line-height: 20px; text-align: center; font-weight: 900; }
.spb.on { border-color: var(--gold1); background: rgba(242,193,78,.25); box-shadow: 0 0 0 3px rgba(242,193,78,.25); }
.spb:disabled { opacity: .35; } .spb:disabled i { background: rgba(255,255,255,.4); } .spb.idle { opacity: .55; }
@media (max-width: 380px) { .spb span { display: none; } }
.hint { bottom: calc(70px + var(--sab)); }