#v-geral .streak.of-v2{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  text-align:left;min-width:0;flex:0 0 260px;
  padding-left:18px;border-left:1px solid var(--linha);
}
#v-geral .of-cab{display:flex;align-items:center;justify-content:space-between;min-height:18px}
#v-geral .of-topo{display:flex;align-items:flex-end;gap:10px}
#v-geral .of-num{font:500 var(--t24)/1.1 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
#v-geral .of-legenda{font-size:var(--t11);color:var(--muted);line-height:1.35}

#v-geral .of-ajuda-btn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  margin:-6px -6px -6px 0;border:0;background:transparent;color:var(--muted);border-radius:6px;
  cursor:pointer;flex-shrink:0;
}
#v-geral .of-ajuda-btn:hover{color:var(--ink);background:var(--fundo-3)}
#v-geral .of-ajuda-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
#v-geral .of-ajuda-btn .of-ic{margin-top:0;width:16px;height:16px}
#v-geral .of-ajuda{
  position:absolute;top:34px;right:-8px;z-index:6;width:260px;padding:12px 14px;border-radius:8px;
  background:var(--papel);color:var(--ink);border:1px solid var(--linha);box-shadow:0 10px 24px var(--sombra);
  font-size:var(--t12);line-height:1.45;
}
#v-geral .of-ajuda b{display:block;font:500 var(--t14)/1.2 var(--fd);margin-bottom:4px}
#v-geral .of-ajuda ul{padding-left:16px;margin-top:6px;display:flex;flex-direction:column;gap:4px}
@media (max-width:760px){
  #v-geral .of-ajuda{right:0;left:0;width:auto}
}

#v-geral .of-periodo{display:flex;justify-content:space-between;font-size:var(--t10);color:var(--muted);margin-top:-2px}

@media (max-width:1080px){
  #v-geral .streak.of-v2{flex:1 1 260px;border-left:0;border-top:1px solid var(--linha);padding-left:0;padding-top:14px}
}
@media (max-width:760px){
  #v-geral .streak.of-v2{flex:1 1 auto}
  #v-geral .of-falta:not(.of-falta--risco){min-height:calc(1.4em * 2)}
}

#v-geral .of-chama{position:relative;flex:none;width:52px;height:52px;display:flex;align-items:flex-end;justify-content:center}

span.chama,
#v-geral .of-chama .chama{
  --chama-tam:48px;display:inline-block;flex-shrink:0;overflow:visible;
  width:var(--chama-tam);height:var(--chama-tam);
  background-repeat:no-repeat;background-size:calc(var(--chama-tam) * 16) calc(var(--chama-tam) * 6);
}
.chama--bronze{
  background-image:url("/assets/chama/chama-bronze-1x-b3f29f22.png");
  background-image:image-set(url("/assets/chama/chama-bronze-1x-b3f29f22.png") 1x, url("/assets/chama/chama-bronze-2x-d114b020.png") 2x);
}
.chama--prata{
  background-image:url("/assets/chama/chama-prata-1x-2d5892d6.png");
  background-image:image-set(url("/assets/chama/chama-prata-1x-2d5892d6.png") 1x, url("/assets/chama/chama-prata-2x-7ee52b03.png") 2x);
}
.chama--ouro{
  background-image:url("/assets/chama/chama-ouro-1x-1c405cef.png");
  background-image:image-set(url("/assets/chama/chama-ouro-1x-1c405cef.png") 1x, url("/assets/chama/chama-ouro-2x-80acd2fd.png") 2x);
}
.chama--esmeralda{
  background-image:url("/assets/chama/chama-esmeralda-1x-0dd456f2.png");
  background-image:image-set(url("/assets/chama/chama-esmeralda-1x-0dd456f2.png") 1x, url("/assets/chama/chama-esmeralda-2x-a1b9a72e.png") 2x);
}
.chama--diamante{
  background-image:url("/assets/chama/chama-diamante-1x-badd9169.png");
  background-image:image-set(url("/assets/chama/chama-diamante-1x-badd9169.png") 1x, url("/assets/chama/chama-diamante-2x-242762ec.png") 2x);
}
.chama--marca{
  background-image:url("/assets/chama/chama-marca-1x-b1e8a8d7.png");
  background-image:image-set(url("/assets/chama/chama-marca-1x-b1e8a8d7.png") 1x, url("/assets/chama/chama-marca-2x-d5e29fa6.png") 2x);
}
.cfg-of-previa-caixa-grande .chama--marca{background-image:url("/assets/chama/chama-marca-2x-d5e29fa6.png")}

.chama--apagada{background-position:calc(var(--chama-tam) * -5) calc(var(--chama-tam) * -0)}
.chama--brasa{background-position:calc(var(--chama-tam) * -3) calc(var(--chama-tam) * -1)}
.chama--acesa{background-position:calc(var(--chama-tam) * -3) calc(var(--chama-tam) * -3)}
.chama--viva{background-position:calc(var(--chama-tam) * -3) calc(var(--chama-tam) * -2)}
.chama--acender{background-position:calc(var(--chama-tam) * -3) calc(var(--chama-tam) * -4)}
.chama--forte{background-position:calc(var(--chama-tam) * -3) calc(var(--chama-tam) * -5)}

@keyframes chama-apagada{from{background-position:0 calc(var(--chama-tam) * -0)}to{background-position:calc(var(--chama-tam) * -16) calc(var(--chama-tam) * -0)}}
@keyframes chama-brasa{from{background-position:0 calc(var(--chama-tam) * -1)}to{background-position:calc(var(--chama-tam) * -16) calc(var(--chama-tam) * -1)}}
@keyframes chama-media{from{background-position:0 calc(var(--chama-tam) * -2)}to{background-position:calc(var(--chama-tam) * -16) calc(var(--chama-tam) * -2)}}
@keyframes chama-pequena{from{background-position:0 calc(var(--chama-tam) * -3)}to{background-position:calc(var(--chama-tam) * -16) calc(var(--chama-tam) * -3)}}
@keyframes chama-acender{from{background-position:0 calc(var(--chama-tam) * -4)}to{background-position:calc(var(--chama-tam) * -12) calc(var(--chama-tam) * -4)}}
@keyframes chama-forte{from{background-position:0 calc(var(--chama-tam) * -5)}to{background-position:calc(var(--chama-tam) * -16) calc(var(--chama-tam) * -5)}}
@keyframes chama-pulso{0%,100%{opacity:1}50%{opacity:.62}}

@media (prefers-reduced-motion:no-preference){
  .chama--apagada{animation:chama-apagada 2.4s steps(16) infinite}
  .chama--brasa{animation:chama-brasa 1.5s steps(16) infinite}
  .chama--acesa{animation:chama-pequena 1.2s steps(16) infinite}
  .chama--viva{animation:chama-media 1.2s steps(16) infinite}
  .chama--acender{animation:chama-acender .84s steps(12) 1}
  .chama--forte{animation:chama-forte 1.1s steps(16) infinite}
  .chama.chama--instavel{animation:chama-pequena 1.2s steps(16) infinite, chama-pulso 1.8s ease-in-out infinite}
  .chama.chama--brasa.chama--instavel{animation:chama-brasa 1.5s steps(16) infinite, chama-pulso 1.8s ease-in-out infinite}
  .chama.chama--apagada.chama--instavel{animation:chama-apagada 2.4s steps(16) infinite, chama-pulso 1.8s ease-in-out infinite}
  .chama.chama--viva.chama--instavel{animation:chama-media 1.2s steps(16) infinite, chama-pulso 1.8s ease-in-out infinite}
  .chama.chama--forte.chama--instavel{animation:chama-forte 1.1s steps(16) infinite, chama-pulso 1.8s ease-in-out infinite}
}

#v-geral .of-meses{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
#v-geral .of-mes{position:relative;display:flex;justify-content:center;min-width:0}
#v-geral .of-q{
  position:relative;width:100%;max-width:28px;aspect-ratio:1/1;border-radius:4px;
  background:var(--fundo-3);box-shadow:inset 0 0 0 1px var(--linha-2);
  display:flex;align-items:center;justify-content:center;
  font:600 var(--t11)/1 var(--fd);color:var(--muted);
}
#v-geral .of-mes--com .of-q{background:var(--superficie);box-shadow:none;color:#FFFFFF}
#v-geral .of-mes--aberto .of-q{background:transparent;box-shadow:none;border:1.5px dashed var(--acento);color:var(--ink);font-weight:700}
#v-geral .of-mes--aberto.of-mes--com .of-q{background:var(--superficie);border:0;outline:1.5px dashed var(--acento);outline-offset:2px;color:#FFFFFF}
html[data-tema="BRONZE"] #v-geral .of-mes--com .of-q{background:#A24B18;color:#FFFFFF}
html[data-tema="PRATA"] #v-geral .of-mes--com .of-q{background:#6F8FAE;color:#1A1A1A}
html[data-tema="OURO"] #v-geral .of-mes--com .of-q{background:#C98607;color:#1A1A1A}
html[data-tema="ESMERALDA"] #v-geral .of-mes--com .of-q{background:#22A05B;color:#1A1A1A}
html[data-tema="DIAMANTE"] #v-geral .of-mes--com .of-q{background:#4659CA;color:#FFFFFF}
html[data-tema="NEUTRO"] #v-geral .of-mes--com .of-q{background:#2B7168;color:#FFFFFF}
#v-geral .of-mes--ano::before{content:"";position:absolute;left:-4px;top:-2px;bottom:-2px;width:1px;background:var(--ink-3,var(--muted))}
#v-geral .of-ano{position:absolute;left:-4px;top:-13px;font:600 var(--t10)/1 var(--fb);color:var(--muted);letter-spacing:.3px;white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  #v-geral .of-mes--aberto:not(.of-mes--com) .of-q{animation:of-respira 2.4s ease-in-out infinite}
}
@keyframes of-respira{0%,100%{background-color:transparent}50%{background-color:var(--claro-quente)}}

#v-geral .of-falta{display:flex;align-items:flex-start;gap:6px;font-size:var(--t12);line-height:1.4;color:var(--ink)}
#v-geral .of-ic{width:14px;height:14px;margin-top:2px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#v-geral .of-falta--risco{
  padding:6px 8px;border:1px solid var(--alerta-edge);border-left:3px solid var(--alerta);border-radius:4px;
  background:var(--alerta-bg);font-weight:500;
}
#v-geral .of-falta--risco .of-ic{color:var(--alerta)}
#v-geral .of-nota{font-size:var(--t10);color:var(--muted);margin-top:2px;line-height:1.4}
#v-geral .of-recorde{display:flex;align-items:center;gap:6px;font-size:var(--t11);color:var(--muted)}
#v-geral .of-recorde .of-ic{margin-top:0;color:var(--muted)}
#v-geral .of-recorde b{color:var(--ink-2,var(--ink));font-weight:600}

@media (min-width:761px){
  #v-geral .of-chama{width:76px;height:76px;overflow-x:clip;overflow-y:visible;pointer-events:none}
  #v-geral .of-chama .chama{--chama-tam:76px}
  #v-geral .of-chama .chama--bronze{background-image:url("/assets/chama/chama-bronze-2x-d114b020.png")}
  #v-geral .of-chama .chama--prata{background-image:url("/assets/chama/chama-prata-2x-7ee52b03.png")}
  #v-geral .of-chama .chama--ouro{background-image:url("/assets/chama/chama-ouro-2x-80acd2fd.png")}
  #v-geral .of-chama .chama--esmeralda{background-image:url("/assets/chama/chama-esmeralda-2x-a1b9a72e.png")}
  #v-geral .of-chama .chama--diamante{background-image:url("/assets/chama/chama-diamante-2x-242762ec.png")}
  #v-geral .of-chama .chama--marca{background-image:url("/assets/chama/chama-marca-2x-d5e29fa6.png")}
}

@media (min-width:1081px){
  #v-geral .lvlband{padding:12px 20px;gap:32px}
  #v-geral .lvlband .now{flex:none}
  #v-geral .lvlband .track{flex:1 1 220px;max-width:none}
  #v-geral .streak.of-v2{
    display:grid;flex:0 1 auto;margin-left:auto;padding-left:24px;
    grid-template-columns:76px max-content 12px minmax(200px,260px);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"chama cab . meses" "chama num . periodo" "chama num . frase" "rec rec . frase";
    column-gap:12px;row-gap:4px;align-items:start;
  }
  #v-geral .streak.of-v2 .of-topo{display:contents}
  #v-geral .streak.of-v2 .of-cab{grid-area:cab}
  #v-geral .streak.of-v2 .of-chama{grid-area:chama;align-self:end}
  #v-geral .streak.of-v2 .of-num-bloco{grid-area:num;align-self:end}
  #v-geral .streak.of-v2 .of-num{font-size:var(--t28)}
  #v-geral .streak.of-v2 .of-meses{grid-area:meses;align-self:center}
  #v-geral .streak.of-v2 .of-periodo{grid-area:periodo;margin-top:0}
  #v-geral .streak.of-v2>.of-falta,#v-geral .streak.of-v2>.of-risco-bloco{grid-area:frase;margin-top:2px}
  #v-geral .streak.of-v2 .of-recorde{grid-area:rec;align-self:end;margin-top:4px;white-space:nowrap}
}

#v-geral .lvlband{container:faixa / inline-size}
@media (min-width:1081px){
@container faixa (max-width:1110px){
  #v-geral .lvlband .track{flex:1 1 140px;min-width:0}
  #v-geral .streak.of-v2{padding-left:16px;column-gap:8px;grid-template-columns:56px max-content 4px minmax(0,248px)}
  #v-geral .streak.of-v2 .of-chama{width:56px;height:56px}
  #v-geral .streak.of-v2 .of-chama .chama{--chama-tam:56px}
}
}
#v-geral .of-chama .chama.chama--apagada{filter:contrast(1.35) brightness(.8)}
@media (max-width:760px){
  #v-geral .of-chama:has(.chama--apagada){width:60px;height:60px}
  #v-geral .of-chama .chama.chama--apagada{--chama-tam:60px}
}