/* ===================== EÓNICA v2 — controles, mando, pantalla completa ===================== */
:root { --tOp: 1; --hs: 38px; }
/* ---------- barra rápida: fuera del HUD para quedar por encima del joystick ---------- */
#hotbar { position: fixed; left: 50%; bottom: calc(6px + var(--sb)); transform: translateX(-50%); display: flex; gap: 4px; pointer-events: auto; z-index: 8; transition: opacity .35s; }
#hotbar.shifted { transform: none; }
.hs { width: var(--hs); height: var(--hs); }
.hs img { width: calc(var(--hs) - 6px); height: calc(var(--hs) - 6px); }
body.is-touch:not(.pad) { --hs: 40px; }
#hotbar .pad-g { display: none; align-self: center; font-size: 10px; font-weight: 900; color: #fff; background: rgba(10,8,20,.75); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 2px 5px; pointer-events: none; }
body.pad #hotbar .pad-g { display: block; }
#held-name { bottom: calc(var(--hs) + 14px + var(--sb)); }
/* ---------- joystick: solo la zona inferior izquierda ---------- */
#stick-zone { left: 0; top: 46%; width: 40%; bottom: 0; }
#touch { opacity: var(--tOp); }
/* ---------- botones de acción: más separados ---------- */
#b-atk { right: calc(16px * var(--btn) + var(--sr)); bottom: calc(16px * var(--btn) + var(--sb)); width: calc(80px * var(--btn)); height: calc(80px * var(--btn)); }
#b-esp { right: calc(108px * var(--btn) + var(--sr)); bottom: calc(12px * var(--btn) + var(--sb)); width: calc(56px * var(--btn)); height: calc(56px * var(--btn)); }
#b-dodge { right: calc(28px * var(--btn) + var(--sr)); bottom: calc(108px * var(--btn) + var(--sb)); width: calc(56px * var(--btn)); height: calc(56px * var(--btn)); }
#b-def { right: calc(106px * var(--btn) + var(--sr)); bottom: calc(88px * var(--btn) + var(--sb)); width: calc(54px * var(--btn)); height: calc(54px * var(--btn)); }
#b-act { right: calc(176px * var(--btn) + var(--sr)); bottom: calc(72px * var(--btn) + var(--sb)); width: calc(60px * var(--btn)); height: calc(60px * var(--btn)); }
#b-mag { right: calc(172px * var(--btn) + var(--sr)); bottom: calc(144px * var(--btn) + var(--sb)); width: calc(50px * var(--btn)); height: calc(50px * var(--btn)); }
#small-btns { top: calc(146px + var(--st)); gap: 7px; }
body.btn-l #small-btns { right: auto; left: 50%; transform: translateX(-50%); top: calc(28px + var(--st)); }
body.btn-l #boss-bar { top: calc(80px + var(--st)); }
#gold { align-self: center; margin-right: 2px; }
#hud-tr { align-items: flex-end; }
/* avisos: en táctil arriba para no tapar los botones */
body.is-touch:not(.pad) #hint { bottom: auto; top: calc(54px + var(--st)); max-width: min(540px, 62vw); }
body.is-touch:not(.pad) #banner { top: 34%; }
body.is-touch:not(.pad) #areaname { top: 25%; }
#hint { bottom: calc(var(--hs) + 40px + var(--sb)); }
/* ---------- mando / teclado ---------- */
body.pad #touch { display: none !important; }
#ctx-prompt { position: absolute; left: 50%; bottom: calc(var(--hs) + 12px + var(--sb)); transform: translateX(-50%); display: none; align-items: center; gap: 6px; background: rgba(10,8,24,.82); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; padding: 3px 10px 3px 4px; font-size: 12px; font-weight: 800; white-space: nowrap; }
#ctx-prompt.on { display: flex; }
.glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #1c1a2c; border: 1px solid rgba(255,255,255,.5); font-size: 12px; font-weight: 900; line-height: 1; color: #fff; }
.glyph.g-x { color: #8ab4ff; } .glyph.g-o { color: #ff7a8a; } .glyph.g-s { color: #ff9ad8; } .glyph.g-t { color: #6affc8; }
.glyph.wide { border-radius: 6px; font-size: 10px; }
.gp-focus { outline: none; }
body.pad .gp-focus, body.kbnav .gp-focus { outline: 3px solid #6ae0ff !important; outline-offset: 1px; box-shadow: 0 0 0 5px rgba(106,224,255,.32), 0 0 14px rgba(106,224,255,.55) !important; position: relative; z-index: 3; }
body.pad .slot.gp-focus, body.kbnav .slot.gp-focus { transform: scale(1.06); }
.pad-legend { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 12px; }
.pad-legend .glyph { justify-self: start; }
/* ---------- pantalla completa / modo solo juego ---------- */
body.solo #quest-track, body.solo #minimap, body.solo #gold, body.solo #clock, body.solo #pet-hud, body.solo #stat-icons, body.solo #btn-map, body.solo #btn-menu, body.solo #btn-bit, body.solo #small-btns, body.solo #surv, body.solo #bar-xp { display: none !important; }
body.solo #hud-tl { width: 120px; opacity: .78; }
body.solo #bar-mp, body.solo #bar-sta { height: 6px; } body.solo #bar-mp b, body.solo #bar-sta b { display: none; }
body.solo #btn-full { opacity: .45; }
body.solo.pad #hotbar:not(.peek) { opacity: 0; pointer-events: none; }
body.solo.pad #ctx-prompt { opacity: .85; }
/* ---------- ventanas modales propias (compatibles con mando) ---------- */
.v2modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(4,3,10,.62); }
.v2modal .box { width: min(460px, 92vw); max-height: calc(100vh - 24px); overflow: auto; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.v2modal .box h3 { margin: 0 0 6px; font-size: 16px; color: var(--acc); }
.v2modal .box .msg { font-size: 13.5px; line-height: 1.5; white-space: pre-line; margin-bottom: 10px; }
.v2modal .box .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.v2modal .box input[type=text] { margin-bottom: 10px; }
/* ---------- editor de controles táctiles ---------- */
body.lay-edit #touch { display: block !important; visibility: visible !important; opacity: 1; }
body.lay-edit .lay-drag { outline: 2px dashed #ffd35a !important; outline-offset: 2px; }
body.lay-edit .lay-drag.lay-sel { outline: 3px solid #6aff9a !important; }
body.lay-edit #stick-zone { background: rgba(106,224,255,.08); outline: 2px dashed rgba(106,224,255,.5); }
#lay-bar { position: fixed; left: 50%; top: calc(8px + var(--st)); transform: translateX(-50%); z-index: 95; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; background: rgba(14,12,26,.95); border: 2px solid var(--acc); border-radius: 12px; padding: 6px 10px; max-width: 94vw; font-size: 12px; }
#lay-bar .btn { min-height: 32px; }
/* ---------- varios ---------- */
#btn-full { font-size: 18px; }
.chk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 12px; }
.remap-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.22); margin-bottom: 4px; font-size: 13px; }
.remap-row .nm { flex: 1; }
.remap-row.wait { outline: 2px solid var(--acc); animation: pulse 1s infinite; }
@media (max-height: 420px) {
  #small-btns { top: calc(122px + var(--st)); }
  body:not(.is-touch) .hs, body.pad .hs { width: 34px; height: 34px; }
}
/* ---------- máquina recreativa ---------- */
.arcbox { padding: 6px 2px 2px; }
.arcbar { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, #120a2a 0 10px, #1a1040 10px 20px); border: 2px solid #ff40a0; overflow: hidden; }
.arczone { position: absolute; top: 0; bottom: 0; background: rgba(64, 255, 128, .45); border-left: 2px solid #40ff80; border-right: 2px solid #40ff80; }
.arcmark { position: absolute; top: 2px; width: 14px; height: 18px; margin-left: -7px; background: #ffe040; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.arcmsg { margin-top: 8px; font-size: 13px; color: #e0d8ff; text-align: center; }

/* =====================================================================================
   EÓNICA v2.1 — diseño renovado + componentes nuevos
   ===================================================================================== */
:root { --panel: rgba(17, 14, 34, 0.97); --panel2: #18152d; --line: #3d3566; --acc3: #5ef0c8; --glass: rgba(18, 15, 36, .72); }
/* ---------- paneles ---------- */
.panel { background: linear-gradient(180deg, #211b40 0%, #15122a 38%, #120f24 100%); border: 1px solid rgba(170, 150, 255, .28); box-shadow: 0 18px 60px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06); }
.ptabs { background: linear-gradient(180deg, #1f1a3c, #17132d); border-bottom: 1px solid rgba(170, 150, 255, .18); }
.ptab { border-radius: 10px 10px 0 0; transition: color .15s, background .15s; }
.ptab.on { background: var(--panel2); color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); }
.ptabs .pclose { box-shadow: -10px 0 10px #1a1633; }
.pbody { background: radial-gradient(120% 80% at 50% 0%, #1d1937 0%, var(--panel2) 60%); }
.phead { background: linear-gradient(90deg, rgba(255, 211, 90, .12), transparent 60%); border-bottom: 1px solid rgba(170, 150, 255, .18); }
.cols > .c2 { background: rgba(6, 4, 16, .35); border: 1px solid rgba(255, 255, 255, .05); }
.sec { color: #b3a9e0; letter-spacing: .8px; display: flex; align-items: center; gap: 6px; }
.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(179, 169, 224, .35), transparent); }
/* ---------- botones ---------- */
.btn { border-radius: 10px; border: 1px solid #5d4c95; background: linear-gradient(180deg, #3a3068, #2a2250); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 rgba(0, 0, 0, .35); transition: transform .06s, filter .15s; }
.btn:active { transform: translateY(1px) scale(.98); filter: brightness(1.15); background: linear-gradient(180deg, #4a3d84, #372d68); }
.btn.pri { background: linear-gradient(180deg, #9a6a16, #6c4a0e); border-color: #e0a83a; color: #fff1c8; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn.bad { background: linear-gradient(180deg, #5c2034, #401424); border-color: #a24a60; }
.btn.dis { filter: grayscale(.6); }
/* ---------- casillas ---------- */
.slot { background: linear-gradient(160deg, rgba(60, 52, 100, .45), rgba(10, 8, 22, .55)); border: 1px solid #3f3770; box-shadow: inset 0 0 6px rgba(0, 0, 0, .45); transition: transform .08s; }
.slot:active { transform: scale(.94); }
.slot.hot { border-color: #8a7330; box-shadow: inset 0 0 6px rgba(0, 0, 0, .45), inset 0 -2px 0 rgba(255, 211, 90, .35); }
.slot.sel { border: 2px solid var(--acc); background: linear-gradient(160deg, rgba(140, 100, 20, .55), rgba(60, 40, 6, .6)); box-shadow: 0 0 10px rgba(255, 211, 90, .45); }
.row { background: linear-gradient(90deg, rgba(40, 34, 74, .55), rgba(16, 13, 32, .4)); border: 1px solid rgba(255, 255, 255, .04); }
.row.cant { opacity: .55; }
.chip { background: rgba(140, 120, 255, .16); border: 1px solid rgba(160, 140, 255, .22); }
/* ---------- HUD ---------- */
.hbtn { background: linear-gradient(180deg, rgba(40, 32, 76, .82), rgba(16, 12, 34, .82)); border: 1px solid rgba(190, 170, 255, .38); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#minimap { border: 2px solid rgba(200, 185, 255, .45); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .45); border-radius: 14px; }
.bar { border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.bar i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: rgba(255, 255, 255, .22); border-radius: 6px 6px 0 0; }
#bar-hp i { background: linear-gradient(#ff7a7a, #d02a44); } #bar-mp i { background: linear-gradient(#8ab8ff, #3a50d0); } #bar-sta i { background: linear-gradient(#a8ff8a, #34b04a); }
#gold { background: linear-gradient(180deg, rgba(60, 44, 10, .75), rgba(26, 18, 4, .75)); border: 1px solid rgba(255, 211, 90, .35); }
#clock { background: linear-gradient(180deg, rgba(30, 24, 60, .6), rgba(10, 8, 22, .6)); border: 1px solid rgba(255, 255, 255, .12); }
.toast { border-radius: 10px; background: linear-gradient(90deg, rgba(24, 20, 46, .92), rgba(12, 10, 26, .86)); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
#dialog { background: linear-gradient(180deg, rgba(30, 24, 60, .97), rgba(14, 11, 30, .97)); border: 2px solid rgba(160, 140, 255, .55); box-shadow: 0 10px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
#dialog .por { border: 2px solid rgba(255, 211, 90, .45); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .25)); }
.mg { background: linear-gradient(180deg, #221c44, #14112a); box-shadow: 0 16px 50px rgba(0, 0, 0, .6); }
.sb { background: linear-gradient(180deg, rgba(40, 32, 76, .78), rgba(16, 12, 34, .78)); }
.tb { box-shadow: 0 3px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15); }
/* ---------- correr fijo ---------- */
.sb.on { background: linear-gradient(180deg, rgba(255, 211, 90, .75), rgba(160, 110, 20, .8)); border-color: #ffe39a; box-shadow: 0 0 12px rgba(255, 211, 90, .6); }
#run-ind { display: none; margin-top: 3px; font-size: 10px; font-weight: 800; color: #2a1a00; background: linear-gradient(180deg, #ffe08a, #e0a830); border-radius: 8px; padding: 1px 7px; width: max-content; box-shadow: 0 0 8px rgba(255, 211, 90, .5); }
#run-ind.on { display: block; }
/* ---------- botón contextual BUCEAR / EMERGER ---------- */
#b-ctx { right: calc(244px * var(--btn) + var(--sr)); bottom: calc(128px * var(--btn) + var(--sb)); width: calc(52px * var(--btn)); height: calc(52px * var(--btn)); background: linear-gradient(180deg, rgba(30, 160, 200, .7), rgba(10, 80, 130, .7)); border-color: rgba(150, 235, 255, .8); animation: ctxin .25s ease-out; }
#b-ctx span { font-size: 19px; } #b-ctx small { font-size: 7.5px; }
body.lay-edit #b-ctx.hidden { display: flex !important; opacity: .7; }
@keyframes ctxin { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#ctx-prompt2 { position: absolute; left: 50%; bottom: calc(var(--hs) + 42px + var(--sb)); transform: translateX(-50%); display: none; align-items: center; gap: 6px; background: rgba(8, 40, 60, .85); border: 1px solid rgba(120, 220, 255, .5); border-radius: 12px; padding: 3px 10px 3px 4px; font-size: 12px; font-weight: 800; white-space: nowrap; }
#ctx-prompt2.on { display: flex; }
/* ---------- BIT ---------- */
#btn-bit.ping { animation: bitping 1s ease-in-out 3; border-color: #6ae0ff; }
@keyframes bitping { 0%, 100% { box-shadow: 0 0 0 0 rgba(106, 224, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(106, 224, 255, .45); } }
/* ---------- mascota ---------- */
.petbars { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.petimg { width: 56px; height: 56px; image-rendering: pixelated; background: rgba(0, 0, 0, .3); border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); }
.pbar { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
.pbar span { width: 52px; color: #b3a9e0; font-weight: 700; } .pbar .bar { flex: 1; height: 8px; margin: 0; } .pbar b { width: 50px; text-align: right; font-size: 10.5px; }
.petmsg { font-size: 12.5px; color: #ffd0e8; background: rgba(255, 128, 192, .12); border: 1px solid rgba(255, 128, 192, .3); border-radius: 8px; padding: 5px 8px; margin: 4px 0; animation: tin .25s ease-out; }
.petacts { display: flex; flex-wrap: wrap; gap: 4px; }
/* ---------- minijuegos: presentación y cuenta atrás ---------- */
.mg-intro .mgdiff { color: #ffd35a; font-size: 12px; margin: 4px 0; letter-spacing: 1px; }
.mg-intro .mgtip { font-size: 13px; line-height: 1.5; color: #e2dcff; }
.mg-intro .mgcount { font-size: 54px; font-weight: 900; color: #ffd35a; min-height: 10px; text-shadow: 0 0 18px rgba(255, 211, 90, .6); }
.mgcount.pop { animation: cpop .7s ease-out; }
@keyframes cpop { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .8; } }
.mg.danger { border-color: #ff6060; box-shadow: 0 0 24px rgba(255, 60, 60, .45); }
.rodeo-warn { min-height: 16px; font-size: 12px; font-weight: 800; color: #ff8080; }
/* ---------- cofres ---------- */
.ctools { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 8px; background: rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; }
.cinfo { flex-shrink: 0; padding: 6px 8px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 6, 20, .55); min-height: 46px; }
.crow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crow img { width: 34px; height: 34px; image-rendering: pixelated; background: rgba(0, 0, 0, .3); border-radius: 8px; }
.crow .t { flex: 1; min-width: 140px; font-size: 12px; } .crow .t small { display: block; color: var(--dim); font-size: 10.5px; line-height: 1.3; }
.chint { font-size: 11.5px; color: #b8b0e0; line-height: 1.4; }
.cols > .c2.cpl { background: rgba(6, 4, 16, .3); }
/* ---------- banco ---------- */
.bankbox { display: flex; gap: 8px; margin-bottom: 8px; }
.bankbox > div { flex: 1; background: linear-gradient(160deg, rgba(255, 211, 90, .16), rgba(0, 0, 0, .25)); border: 1px solid rgba(255, 211, 90, .35); border-radius: 12px; padding: 8px 10px; }
.bankbox small { display: block; color: #d8c890; font-size: 11px; } .bankbox b { font-size: 20px; color: #ffe08a; }
.banknote { font-size: 11.5px; line-height: 1.45; color: #cfc6f0; margin-bottom: 8px; }
.bankrow .bklab { width: 92px; font-weight: 800; color: #b3a9e0; }
/* ---------- fabricación ---------- */
.craftbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 4px; }
.v2sel { background: linear-gradient(180deg, #2e2756, #221c44); color: var(--txt); border: 1px solid #6a58b0; border-radius: 9px; padding: 6px 26px 6px 9px; font-size: 12.5px; font-weight: 700; max-width: 100%; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffd35a 50%), linear-gradient(135deg, #ffd35a 50%, transparent 50%), linear-gradient(180deg, #2e2756, #221c44); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%, 0 0; background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat; }
.v2search { width: auto !important; flex: 1; min-width: 110px; padding: 6px 9px !important; font-size: 13px !important; }
.craftnote { font-size: 11px; color: #a39cc4; margin-bottom: 6px; }
.chs { font-style: normal; color: #6ae0ff; font-size: 10px; }
.iacts { margin-top: 8px; clear: both; display: flex; flex-wrap: wrap; gap: 2px; }
/* ---------- guía ---------- */
.guide .gtop { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.guide .gtop img { width: 40px; height: 40px; image-rendering: pixelated; background: rgba(0, 0, 0, .3); border-radius: 8px; }
.guide .gtop b { font-size: 15px; color: var(--acc); } .guide .gtop small { display: block; color: var(--dim); font-size: 11px; }
.guide .grow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border-radius: 8px; background: rgba(0, 0, 0, .22); margin-bottom: 3px; font-size: 11.5px; }
.guide .grow img { width: 22px; height: 22px; image-rendering: pixelated; }
.guide .gn { font-weight: 800; } .guide .gq { color: #c8c0ec; flex: 1; min-width: 120px; } .guide .gyes { color: var(--good); font-weight: 800; font-size: 10.5px; }
.guide .grow.gok { border: 1px solid rgba(106, 255, 154, .35); }
.v2modal .box .msg .guide { white-space: normal; }
/* ---------- diálogos: «Más» ---------- */
.dch.collapsed .dch-x { display: none; }
.dch-more { border-style: dashed !important; }
/* ---------- mapa interactivo ---------- */
.pbody.mapbody { padding: 4px; overflow: hidden; touch-action: none; }
.mapwrap { position: relative; width: 100%; height: 100%; }
.mapcv { display: block; border-radius: 12px; touch-action: none; background: #04040a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mapctl { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mapctl .mbtn { width: 38px; height: 38px; padding: 0; font-size: 16px; margin: 0; background: linear-gradient(180deg, rgba(40, 32, 76, .9), rgba(16, 12, 34, .9)); }
.maplegend { position: absolute; left: 8px; top: 28px; max-height: calc(100% - 64px); overflow: auto; background: rgba(10, 8, 24, .9); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; padding: 6px 9px; font-size: 11px; line-height: 1.55; min-width: 150px; }
.maplegend b { color: var(--acc); } .maplegend .lg { display: inline-block; width: 18px; text-align: center; font-weight: 900; }
.maphelp { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 10.5px; color: #d8d0ff; background: rgba(10, 8, 24, .78); padding: 3px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.maphelp .glyph { min-width: 18px; height: 18px; font-size: 10px; }
/* ---------- progreso de encargos ---------- */
.qprog { position: relative; height: 12px; margin-top: 4px; background: rgba(0, 0, 0, .45); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.qprog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4ab0f0, #6aff9a); }
.qprog span { position: relative; font-size: 9.5px; font-weight: 800; padding-left: 6px; text-shadow: 0 1px 2px #000; }