/* =====================================================================
   HIGHER OR LOWER — sun-side known fact over the horizon, cold-side
   mystery below. Dark notched panels, chunky sprites, slot-machine values.
   Font sizes stay on the 8px grid.
   ===================================================================== */
@property --split{syntax:'<length>';inherits:true;initial-value:450px}
.hl-tint{position:fixed;inset:0;z-index:1;pointer-events:none;transition:--split .45s cubic-bezier(.3,1.2,.4,1);
  background:linear-gradient(180deg,rgba(255,118,30,.30) 0,rgba(255,100,40,.12) calc(var(--split) - 160px),rgba(255,150,60,.04) calc(var(--split) - 2px),rgba(40,120,255,.05) calc(var(--split) + 2px),rgba(30,80,220,.16) calc(var(--split) + 200px),rgba(8,24,110,.36) 100%)}
.hl-tint::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--split);background:repeating-linear-gradient(0deg,rgba(255,170,70,.06) 0 2px,transparent 2px 8px);-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
.hl-tint::after{content:'';position:absolute;left:0;right:0;top:var(--split);bottom:0;background:radial-gradient(rgba(120,190,255,.14) 1px,transparent 1.5px) 0 0/8px 8px;-webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent)}
.hl-heat{position:absolute;left:0;right:0;top:0;height:var(--split);background:radial-gradient(ellipse 40% 60% at 12% 24%,rgba(255,210,110,.22),transparent 70%);animation:hlHeat 3s ease-in-out infinite}
@keyframes hlHeat{50%{opacity:.55}}
.hl-horizon{position:absolute;left:0;right:0;top:var(--split);height:4px;margin-top:-2px;background:linear-gradient(90deg,transparent,#ff9a3c 15%,#fff3c4 50%,#5ff3ff 85%,transparent);box-shadow:0 0 24px rgba(255,220,160,.6);opacity:.6}
/* dark scrim behind the play column so text never sits on the bright Sun */
.hl-scrim{position:absolute;left:50%;top:120px;bottom:0;width:min(980px,120vw);transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(6,4,20,.72),rgba(6,4,20,.45) 60%,transparent 100%)}

.g-higherlower .hl-stage{top:164px;width:min(700px,92vw)}
.hl-pair{display:flex;flex-direction:column;gap:12px;transition:opacity .28s,transform .28s;perspective:1200px}
.hl-pair.out{opacity:0;transform:translateY(-16px) scale(.98)}

/* ---------- cards: dark notched panels with a colored rail ---------- */
.hl-card{--su:0;--sd:0;--rail:#ff9a3c;position:relative;padding:14px 20px 18px;touch-action:none;user-select:none;-webkit-user-select:none;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  transition:box-shadow .25s,background .25s}
.hl-known{--rail:#ff9a3c;background:linear-gradient(180deg,#2a1206 0,#160a14 46px,#100a26);box-shadow:inset 0 6px 0 var(--rail),inset 0 0 0 2px rgba(255,154,60,.35),inset 0 -40px 60px -40px rgba(255,140,40,.25)}
.hl-myst{--rail:#4f8cff;background:linear-gradient(180deg,#081438 0,#0a0c2c 46px,#080822);box-shadow:inset 0 6px 0 var(--rail),inset 0 0 0 2px rgba(79,140,255,.4),inset 0 -40px 60px -40px rgba(63,140,255,.25)}
.hl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:4px}
.hl-tag{font-size:16px;letter-spacing:4px;text-transform:uppercase;white-space:nowrap}.hl-known .hl-tag{color:#ffb070}.hl-myst .hl-tag{color:#7ab4ff}
.hl-dl{font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:10px}
.hl-ic{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.hl-ic::before{content:'';position:absolute;inset:0;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.hl-known .hl-ic::before{background:radial-gradient(circle at 50% 40%,#5a2a0c,#2a1006 70%)}
.hl-myst .hl-ic::before{background:radial-gradient(circle at 50% 40%,#13306a,#0a1236 70%)}
.hl-ic .hl-sprite{position:relative;display:block;animation:hlBob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,200,120,.35))}
.hl-myst .hl-ic .hl-sprite{animation-delay:-1.2s;filter:drop-shadow(0 0 10px rgba(95,243,255,.35))}
.hl-ic::after{content:'';position:absolute;left:22%;right:22%;bottom:6px;height:6px;background:rgba(0,0,0,.5);animation:hlShadow 2.4s ease-in-out infinite}
.hl-myst .hl-ic::after{animation-delay:-1.2s}
@keyframes hlBob{50%{transform:translateY(-6px)}}@keyframes hlShadow{50%{transform:scaleX(.75);opacity:.6}}
.hl-tx{min-width:0}
.hl-lb{font-weight:700;font-size:24px;line-height:32px;letter-spacing:1px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hl-lb sup,.hl-gap sup{font-size:16px;line-height:0;vertical-align:10px}
.hl-val{font-weight:700;font-size:48px;line-height:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-val sup{font-size:24px;line-height:0;vertical-align:24px;margin-left:2px}
.hl-known .hl-val{color:#ffd34d;text-shadow:-3px 0 rgba(255,61,154,.55),3px 0 rgba(255,240,180,.35),0 0 20px rgba(255,180,60,.7)}
.hl-myst .hl-val{color:#9ff8ff;text-shadow:-3px 0 rgba(255,61,154,.5),3px 0 rgba(46,240,255,.6),0 0 20px rgba(95,243,255,.6)}
.hl-val.hid .hl-qm{display:inline-block;color:#4f8cff;letter-spacing:8px;text-shadow:0 0 12px rgba(79,140,255,.8);animation:hlQm 1s steps(2) infinite}
@keyframes hlQm{50%{color:#9ff8ff;transform:translateY(-2px)}}
/* slot reel */
.hl-val .dg{display:inline-block;width:.75em;text-align:center;overflow:hidden;vertical-align:top;height:64px}
.hl-val sup .dg{height:32px;vertical-align:baseline}
.hl-val .dg i{display:block;font-style:normal}
.hl-val .dg i.sp{animation:hlSpin .09s linear;color:#6a8ae8}
@keyframes hlSpin{from{transform:translateY(-60%)}to{transform:none}}
.hl-val .dg.lk i{animation:hlLand .32s cubic-bezier(.2,1.9,.4,1)}
@keyframes hlLand{0%{transform:translateY(-70%);color:#fff}100%{transform:none}}
.hl-val.rolling{background:linear-gradient(180deg,transparent 0 10%,rgba(95,243,255,.08) 10% 90%,transparent 90%)}
.hl-val.locked{animation:hlLocked .5s cubic-bezier(.2,1.8,.4,1);transform-origin:0 50%}
@keyframes hlLocked{40%{transform:scale(1.1);filter:brightness(2)}}

/* swipe hints */
.hl-myst.drag{transition:none}
.hl-myst::before,.hl-myst::after{content:'';position:absolute;left:0;right:0;height:10px;pointer-events:none;z-index:2}
.hl-myst::before{top:0;background:#ffd34d;box-shadow:0 0 24px #ffb84a;opacity:var(--su)}
.hl-myst::after{bottom:0;background:#5ff3ff;box-shadow:0 0 24px #5ff3ff;opacity:var(--sd)}

/* ---------- question pill ---------- */
.hl-q{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px}
.hl-q>span{font-weight:700;font-size:24px;line-height:32px;letter-spacing:3px;text-transform:uppercase;color:#fff;background:#0c0928;padding:6px 24px;box-shadow:inset 0 0 0 4px #ffd34d,0 0 0 4px #0c0928,0 0 24px rgba(255,200,120,.35);text-align:center;text-shadow:-2px 0 rgba(255,61,154,.6),2px 0 rgba(46,240,255,.6)}
.hl-q::before,.hl-q::after{content:'';flex:1;height:4px;max-width:120px}
.hl-q::before{background:repeating-linear-gradient(90deg,#ff9a3c 0 8px,transparent 8px 12px)}.hl-q::after{background:repeating-linear-gradient(90deg,#5ff3ff 0 8px,transparent 8px 12px)}
.hl-q.qpop>span{animation:hlQpop .45s cubic-bezier(.2,1.7,.4,1)}
@keyframes hlQpop{0%{transform:scale(.7);opacity:0}}

/* ---------- actions ---------- */
.hl-act{position:relative;margin-top:14px;min-height:104px}
.hl-hint{font-size:16px;line-height:24px;color:#8ab8ff;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-btns{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:6px}
.hl-btns .btn{position:relative;min-height:72px;font-size:24px;letter-spacing:6px;display:flex;align-items:center;justify-content:center;gap:12px;border-width:4px;transition:transform .08s,box-shadow .12s,background .12s}
.hl-up{border-color:#ffb84a;color:#ffe2b0;background:linear-gradient(180deg,#3a1c08,#1c0c06);box-shadow:0 6px 0 #8a4a14,0 0 18px rgba(255,170,60,.35)}
.hl-dn{border-color:#5ff3ff;color:#c8fbff;background:linear-gradient(180deg,#0a2a4a,#081430);box-shadow:0 6px 0 #1a5a8a,0 0 18px rgba(95,243,255,.3)}
.hl-btns .btn:not(:disabled):hover{transform:translateY(-3px)}
.hl-up:not(:disabled):hover{box-shadow:0 9px 0 #8a4a14,0 0 30px rgba(255,170,60,.7)}.hl-dn:not(:disabled):hover{box-shadow:0 9px 0 #1a5a8a,0 0 30px rgba(95,243,255,.6)}
.hl-btns .btn:not(:disabled):active{transform:translateY(5px)}.hl-up:active{box-shadow:0 1px 0 #8a4a14}.hl-dn:active{box-shadow:0 1px 0 #1a5a8a}
.hl-btns .ar{font-size:24px}.hl-up .ar{animation:hlUp 1s steps(2) infinite}.hl-dn .ar{animation:hlDn 1s steps(2) infinite}
@keyframes hlUp{50%{transform:translateY(-4px)}}@keyframes hlDn{50%{transform:translateY(4px)}}
.hl-btns .btn:disabled{opacity:.25;cursor:default;box-shadow:none}
.hl-btns .btn.chosen{opacity:1;color:#0a0724;transform:translateY(5px)}.hl-up.chosen{background:#ffb84a;box-shadow:0 1px 0 #8a4a14,0 0 30px rgba(255,170,60,.8)}.hl-dn.chosen{background:#5ff3ff;box-shadow:0 1px 0 #1a5a8a,0 0 30px rgba(95,243,255,.8)}
.btn:focus-visible{outline:4px solid #fff;outline-offset:4px}
.hl-myst.nudge-up{animation:hlNU .3s cubic-bezier(.2,1.6,.4,1)}.hl-myst.nudge-dn{animation:hlND .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes hlNU{40%{transform:translateY(-8px)}}@keyframes hlND{40%{transform:translateY(8px)}}
/* right: green burst · wrong: red crack */
.hl-myst.good{--rail:#2ee6a8;background:linear-gradient(180deg,#06382a 0,#082222 46px,#06141c);box-shadow:inset 0 6px 0 var(--rail),inset 0 0 0 4px #2ee6a8,inset 0 0 60px rgba(46,230,168,.3);animation:hlGood .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes hlGood{0%{filter:brightness(2.2)}30%{transform:scale(1.025)}}
.hl-myst.good .hl-val{color:#c8ffec;text-shadow:-3px 0 rgba(255,61,154,.5),3px 0 rgba(46,240,255,.6),0 0 24px rgba(46,230,168,.95)}
.hl-myst.good .hl-tag{color:#2ee6a8}
.hl-myst.bad{--rail:#ff4f6a;background:linear-gradient(180deg,#3a0814 0,#240812 46px,#14060e);box-shadow:inset 0 6px 0 var(--rail),inset 0 0 0 4px #ff4f6a,inset 0 0 60px rgba(255,79,106,.3)}
.hl-myst.bad .hl-val{color:#ff9aa8;text-shadow:0 0 18px rgba(255,79,106,.9)}.hl-myst.bad .hl-tag{color:#ff8fa0}
.hl-myst.bad .hl-ic .hl-sprite{filter:grayscale(.6) brightness(.7);animation:none}
.hl-crack{position:absolute;left:0;top:30%;width:100%;height:40%;pointer-events:none;z-index:3;overflow:visible}
.hl-crack polyline{fill:none;stroke:#fff;vector-effect:non-scaling-stroke;stroke-width:4px;filter:drop-shadow(0 0 6px #ff4f6a);stroke-dasharray:2000;stroke-dashoffset:2000;animation:hlCrack .35s steps(6) forwards}
.hl-crack polyline.b{stroke-width:3px;animation-delay:.15s}
@keyframes hlCrack{to{stroke-dashoffset:0}}

.hl-res{display:flex;flex-direction:column;align-items:flex-start;gap:10px;animation:hlIn .3s cubic-bezier(.2,1.5,.4,1) both}
@keyframes hlIn{from{opacity:0;transform:translateY(10px)}}
.hl-stamp{--tc:#fff;display:inline-flex;align-items:center;gap:12px;padding:4px 16px 4px 10px;color:var(--tc);background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 4px var(--tc),0 0 18px color-mix(in srgb,var(--tc) 50%,transparent);animation:hlStamp .45s cubic-bezier(.2,1.7,.4,1) both}
.hl-stamp b{font-weight:700;font-size:32px}.hl-stamp span{font-size:16px;letter-spacing:3px;text-transform:uppercase}
@keyframes hlStamp{0%{opacity:0;transform:scale(2.2) rotate(-8deg)}65%{opacity:1;transform:scale(.94)}100%{transform:none}}
.hl-gap{font-size:16px;line-height:24px;color:#d8e6ff}.hl-gap b{color:#fff}

/* ---------- transitions ---------- */
.hl-card.in,.hl-q.in{animation:hlEnter .5s cubic-bezier(.2,1.35,.4,1) both}
@keyframes hlEnter{from{opacity:0;transform:translateY(40px) scale(.96)}}
.hl-known.in{animation-name:hlDrop}@keyframes hlDrop{from{opacity:0;transform:translateY(-40px) scale(.96)}}
.hl-known.leave{transition:transform .38s cubic-bezier(.5,0,.8,.4),opacity .38s;transform:translateY(-70px) scale(.92);opacity:0}
.hl-myst.promote{transition:transform .44s cubic-bezier(.3,1.1,.4,1);z-index:2}
.hl-myst.promote .hl-act{opacity:0;transition:opacity .15s}
.hl-myst.flipin{transform-origin:50% 0;animation:hlFlip .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes hlFlip{0%{opacity:0;transform:rotateX(-80deg) translateY(20px)}60%{opacity:1}}

/* ---------- dimension banner ---------- */
.hl-shift{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 24px 32px;text-align:center;background:radial-gradient(ellipse at 50% 42%,#4a2008,#120a24 70%);box-shadow:inset 0 6px 0 #ff9a3c,inset 0 0 0 2px rgba(255,154,60,.4);animation:hlShift .6s cubic-bezier(.2,1.5,.4,1) both;overflow:hidden}
@keyframes hlShift{0%{opacity:0;transform:scale(.7)}}
.hl-shic{position:relative;margin:8px 0;animation:hlShic .8s cubic-bezier(.2,1.8,.4,1) .1s both}
.hl-shic::before{content:'';position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px;background:repeating-conic-gradient(rgba(255,200,110,.28) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:orbitDot 10s linear infinite}
.hl-shic svg{position:relative;display:block;animation:hlBob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,180,60,.6))}
@keyframes hlShic{0%{transform:scale(0) rotate(-40deg)}}
.hl-shn{font-weight:700;font-size:40px;line-height:48px;letter-spacing:4px;text-transform:uppercase;color:#fff3c4;text-shadow:-3px 0 #ff3d9a,3px 0 #2ef0ff,0 0 24px rgba(255,180,60,.8)}
.hl-shu{font-size:16px;letter-spacing:3px;color:#ffb88a;text-transform:uppercase}

/* ---------- briefing ---------- */
.hl-brief{cursor:default}
.hl-lb.hl-big{font-size:40px;line-height:48px;letter-spacing:3px;text-shadow:-3px 0 #ff3d9a,3px 0 #2ef0ff}.hl-lb.hl-big span{font-size:24px;color:var(--ink-2);text-shadow:none}
.hl-bt{font-size:16px;line-height:24px;color:#ffe0c0;margin-top:6px}
.hl-keys{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px;color:#c8dcff;margin-top:12px}.hl-keys b{display:inline-block;width:24px}.hl-keys .u{color:#ffd34d}.hl-keys .d{color:#5ff3ff}
.hl-ladder{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;margin:14px 0}
.hl-ladder span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;background:rgba(0,0,0,.35);min-width:52px}.hl-ladder small{font-size:16px;color:#8ab8ff}
.hl-ladder::before{content:'streak';font-size:16px;letter-spacing:3px;text-transform:uppercase;color:#8ab8ff;align-self:center;margin-right:6px}
.hl-go{width:100%}

/* ---------- game over ---------- */
.hl-over{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:96px 16px 16px;background:radial-gradient(ellipse at 50% 55%,rgba(6,4,20,.55),rgba(6,4,20,.88));animation:shadeIn .4s both}
.hl-ov{width:min(520px,94vw);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;box-shadow:inset 0 6px 0 #ff4f6a;animation:hlOv .5s cubic-bezier(.2,1.5,.4,1) .1s both}
.hl-ov.perfect{box-shadow:inset 0 6px 0 #ffd34d}
@keyframes hlOv{from{opacity:0;transform:translateY(40px) scale(.9)}}
.hl-burn{font-weight:700;font-size:48px;line-height:56px;letter-spacing:6px;color:#ffd34d;background:linear-gradient(180deg,#fff3c4,#ffd34d 30%,#ff9a3c 55%,#ff4f6a 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(255,90,60,.8));animation:hlBurn .5s cubic-bezier(.2,1.6,.4,1) .2s both,hlFlick .18s steps(2) .7s 6}
.hl-ov.perfect .hl-burn{background:linear-gradient(90deg,#fff3c4,#ffd34d,#ff9a3c,#ff5fb4,#c07cff,#5ff3ff,#fff3c4);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:hlBurn .5s cubic-bezier(.2,1.6,.4,1) both,rainbow 2s linear infinite;filter:drop-shadow(0 0 14px rgba(255,211,77,.8))}
@keyframes hlBurn{0%{opacity:0;transform:scale(2.6) rotate(6deg)}100%{transform:none}}
@keyframes hlFlick{50%{filter:drop-shadow(0 0 22px rgba(255,160,60,1)) brightness(1.3)}}
.hl-ovs{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.hl-ovs>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:12px;background:#0d0a30;min-height:136px}
.hl-ovs b{font-weight:700;font-size:64px;line-height:64px;color:#fff;text-shadow:-3px 0 rgba(255,61,154,.6),3px 0 rgba(46,240,255,.6)}.hl-ovs b.g{color:var(--gold);text-shadow:-3px 0 rgba(255,61,154,.6),3px 0 rgba(46,240,255,.6),0 0 24px rgba(255,211,77,.6)}
.hl-ovs small{font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--ink-3)}
.hl-ovs .hl-fl{animation:hlFlick2 .36s steps(2) infinite;transform-origin:50% 100%}
@keyframes hlFlick2{50%{transform:scaleY(1.08) translateY(-2px)}}
.hl-ovt{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.hl-ovt .pip.miss{background:#3a1030;box-shadow:inset 0 0 0 2px #ff4f6a}
.hl-pb{font-weight:700;font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);animation:lowpulse .6s steps(2) infinite}

/* ---------- HUD streak flame ---------- */
.hud.hl-hud .dist{display:flex;align-items:center;gap:10px;color:#ffb84a}
.hl-sn{font-weight:700}.hl-fl{display:flex;transform-origin:50% 100%}.hl-fl svg{display:block}
.hud.hl-hud .dist:not([data-lv="0"]) .hl-fl{animation:hlFlick2 .36s steps(2) infinite}
.hud.hl-hud .dist[data-lv="0"]{color:#8a82c8}.hud.hl-hud .dist[data-lv="2"]{color:#ffd34d;text-shadow:0 0 12px rgba(255,180,60,.7)}
.hud.hl-hud .dist[data-lv="3"]{color:#9ff8ff;text-shadow:0 0 14px rgba(95,243,255,.8)}.hud.hl-hud .dist[data-lv="4"]{color:#ffd8f4;text-shadow:-2px 0 rgba(255,61,154,.7),2px 0 rgba(46,240,255,.7),0 0 16px rgba(192,124,255,.9)}
.hud.hl-hud .dist.dead{color:#6a6a8a;text-shadow:none}
.hl-pop{animation:bump .4s cubic-bezier(.2,1.8,.4,1)}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .g-higherlower .hl-stage{top:152px}
  .hl-pair{gap:8px}
  .hl-card{padding:10px 14px 14px}
  .hl-tag{letter-spacing:3px}.hl-dl{letter-spacing:1px}
  .hl-body{gap:12px;margin-top:6px}
  .hl-ic{width:80px;height:80px}.hl-ic .hl-sprite{width:70px;height:70px}
  .hl-lb{font-size:16px;line-height:24px;letter-spacing:0}
  .hl-val{font-size:32px;line-height:48px}.hl-val sup{font-size:16px;vertical-align:16px}.hl-val .dg{height:48px}.hl-val sup .dg{height:24px}
  .hl-q{min-height:40px}.hl-q>span{font-size:16px;line-height:24px;letter-spacing:2px;padding:6px 14px}
  .hl-q::before,.hl-q::after{max-width:16px}
  .hl-act{margin-top:10px;min-height:96px}
  .hl-hint{margin-bottom:8px}
  .hl-btns{gap:12px}.hl-btns .btn{min-width:0;min-height:64px;font-size:24px;letter-spacing:1px;padding:4px;gap:8px}
  .hl-lb{-webkit-line-clamp:3}
  .hl-stamp b{font-size:24px}
  .hl-shic svg{width:84px;height:84px}.hl-shn{font-size:24px;line-height:32px}.hl-shift{padding:24px 16px}
  .hl-lb.hl-big{font-size:24px;line-height:32px}
  .hl-burn{font-size:32px;line-height:40px;letter-spacing:4px}
  .hl-ovs b{font-size:48px;line-height:48px}.hl-ovs>div{min-height:112px}
  .hud.hl-hud{grid-template-columns:88px 76px 88px;gap:6px;top:10px}.hud.hl-hud .box{padding:4px 8px;height:56px}.hud.hl-hud .label{letter-spacing:1px}
  .hud.hl-hud .val{font-size:24px;line-height:32px}
  .hud.hl-hud .pip{width:4px;height:12px}.hud.hl-hud .pips{gap:1px;padding-top:10px}.hud.hl-hud .pipcap{letter-spacing:1px}.hud.hl-hud .pcl{display:none}
  .hud.hl-hud .dist{gap:6px}.hud.hl-hud .hl-fl svg{width:20px;height:26px}
  .hl-ladder span{min-width:0;padding:4px 6px}
}
.nb{font-weight:400}
.hl-pair.dim{opacity:.18;transform:scale(.97);filter:blur(1px)}