/* Contador Hack — estilo terminal
   Layout: sessão de terminal em coluna única (~74ch). Logo em ASCII, boas-vindas estilo neofetch,
   barra de categorias com busca, lista ls paginada, página de post dedicada. Barra de comando fixa embaixo.
   Tema escuro único, de propósito. As regras específicas do WordPress ficam no fim do arquivo. */
:root {
  --bg: #11120f;
  --bg-2: #191b16;
  --bg-3: #20231c;
  --line: #2a2d25;
  --fg: #d4d6cc;
  --dim: #868a7c;
  --amber: #f0b44c;
  --green: #9fcf6e;
  --cyan: #7cc4c9;
  --red: #e07a63;
  --violet: #b59be0;
  --pink: #e58fb6;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar-h: 7.5rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.7 var(--mono);
  padding-inline: 16px;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) { body { font-size: 16px; } }
::selection { background: var(--amber); color: var(--bg); }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd { font: inherit; font-size: .85em; color: var(--fg); background: var(--bg-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

.term { max-width: 74ch; margin-inline: auto; padding-block: 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
main.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

/* hues para categorias (atribuídas pelo gerador) */
.h0 { --c: var(--cyan); } .h1 { --c: var(--green); } .h2 { --c: var(--violet); }
.h3 { --c: var(--red); } .h4 { --c: var(--amber); } .h5 { --c: var(--pink); }

/* prompt */
.prompt { color: var(--dim); display: flex; flex-wrap: wrap; column-gap: .6ch; margin: 0 0 12px; font-size: .88em; }
.prompt .u { color: var(--green); }
.prompt .p { color: var(--cyan); }
.prompt .c { color: var(--fg); }
.prompt .c::before { content: "$ "; color: var(--dim); }

/* ===== Cabeçalho + logo ===== */
.site-head { display: grid; gap: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 20px; }
.logo { display: block; width: 100%; text-decoration: none; cursor: pointer; border-radius: 6px; }
.logo .ascii {
  margin: 0; font-family: var(--mono); line-height: 1.12; white-space: pre; overflow: hidden; max-width: 100%;
  font-weight: 700; letter-spacing: 0; user-select: none;
}
.ascii .a-main { color: var(--fg); }
.ascii .a-hack { color: var(--amber); text-shadow: 0 0 .6em color-mix(in srgb, var(--amber) 35%, transparent); }
.ascii.rendering .a-main, .ascii.rendering .a-hack { color: var(--green); text-shadow: none; }
.ascii.done { animation: settle .6s ease-out 1; }
@keyframes settle { 0% { filter: brightness(1.8); } 100% { filter: none; } }
.tagline .render { color: var(--green); font-variant-numeric: tabular-nums; white-space: pre; }
.tagline .render.busy::after { content: "▌"; animation: blink .6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .ascii.done { animation: none; } }
.tagline { margin: 0; color: var(--dim); font-size: .85em; display: flex; flex-wrap: wrap; gap: 0 1.4ch; }
.tagline .score { color: var(--amber); font-variant-numeric: tabular-nums; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9em; }
.nav a { color: var(--dim); text-decoration: none; }
.nav a::before { content: "./"; color: var(--line); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--amber); }
.nav a[aria-current="page"]::before { color: var(--amber); }

/* cabeçalho compacto da página de post */
/* coluna da logo com largura FIXA: se dependesse do conteúdo, a logo (vazia até o JS desenhar) media 0px,
   a fonte calculada saía inválida e a arte aparecia em tamanho normal, estourando o cabeçalho */
.site-head.compact { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 12px 24px; padding-bottom: 14px; }
.site-head.compact > * { min-width: 0; }
.site-head.compact .logo { width: 100%; }
.site-head.compact .ascii { font-size: 3.2px; } /* tamanho de partida (o JS ajusta à largura exata) */
.site-head.compact .nav { justify-content: flex-end; }
@media (max-width: 560px) {
  .site-head.compact { grid-template-columns: minmax(0, 1fr); }
  .site-head.compact .logo { width: min(15rem, 100%); }
  .site-head.compact .nav { justify-content: flex-start; }
}

/* ===== Boas-vindas (neofetch) ===== */
.welcome {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px;
  border: 1px solid var(--line); border-radius: 8px; padding: 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 55%),
    var(--bg-2);
}
.welcome > * { min-width: 0; }
.welcome .hello { display: grid; gap: 14px; align-content: start; }
.welcome .eyebrow { color: var(--green); font-size: .8em; margin: 0; }
.welcome .eyebrow::before { content: "● "; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.welcome h1 { margin: 0; font-size: clamp(1.45rem, 4.8vw, 2.05rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; font-weight: 800; }
.welcome h1 .strike { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; font-weight: 500; }
.welcome h1 em { font-style: normal; color: var(--amber); }
.welcome .lede { margin: 0; color: var(--dim); max-width: 46ch; }
.welcome .stack { display: flex; flex-wrap: wrap; gap: 6px; }
.welcome .stack span { font-size: .75em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--fg); background: var(--bg); }
.fetch { margin: 0; display: grid; gap: 3px; font-size: .84em; align-content: start; border-left: 1px dashed var(--line); padding-left: 24px; }
.fetch .who { color: var(--green); font-weight: 700; }
.fetch .sep { color: var(--line); letter-spacing: -.1em; overflow: hidden; white-space: nowrap; }
.fetch dl div { display: flex; gap: 1ch; }
.fetch dt { color: var(--amber); min-width: 11ch; }
.fetch dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fetch .ok { color: var(--green); }
.swatches { display: flex; gap: 0; margin-top: 10px; }
.swatches i { width: 1.6em; height: 1em; display: block; }
@media (max-width: 680px) {
  .welcome { grid-template-columns: 1fr; padding: 20px 18px; gap: 20px; }
  .fetch { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .welcome .eyebrow::before { animation: none; } }

/* ===== Categorias ===== */
.catbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.catsearch {
  display: flex; align-items: center; gap: 1ch; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); padding: 6px 12px; font-size: .88em;
}
.catsearch:focus-within { border-color: var(--amber); }
.catsearch label { color: var(--dim); white-space: nowrap; }
.catsearch input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: none; border: 0; padding: 2px 0; caret-color: var(--amber); }
.catsearch input:focus { outline: none; }
.catsearch input::placeholder { color: var(--dim); opacity: .75; }
.catsearch .n { color: var(--dim); font-size: .85em; white-space: nowrap; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cat {
  --c: var(--fg);
  font: inherit; font-size: .82em; cursor: pointer; color: var(--fg);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 9px;
  transition: border-color .15s, background .15s;
}
.cat .ico { width: 15px; height: 15px; color: var(--c); flex: none; transition: transform .2s; }
.cat:hover .ico { transform: scale(1.12); }
.cat .n { color: var(--dim); font-size: .85em; font-variant-numeric: tabular-nums; }
.cat:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.cat[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 16%, var(--bg-2)); border-color: var(--c); }
.cat[aria-pressed="true"] .n { color: var(--fg); }
.cat.all { --c: var(--amber); }
.more {
  font: inherit; font-size: .82em; cursor: pointer; color: var(--amber); background: none;
  border: 1px dashed var(--line); border-radius: 999px; padding: 3px 11px;
}
.more:hover { border-color: var(--amber); }
.cats-empty { color: var(--dim); font-size: .85em; }
@media (prefers-reduced-motion: reduce) { .cat { transition: none; } }

/* chips de tag dentro dos posts */
.t { color: var(--c, var(--dim)); font-size: .78em; white-space: nowrap; text-decoration: none; }
.t::before { content: "#"; opacity: .6; }
a.t:hover { text-decoration: underline; }

/* ===== Post em destaque ===== */
.featured {
  position: relative; display: grid; gap: 14px;
  border: 1px solid var(--amber); border-radius: 8px; padding: 26px 20px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 8%, transparent), transparent 55%), var(--bg-2);
}
.featured .label {
  position: absolute; top: -0.8em; left: 14px; padding: 0 8px; background: var(--bg);
  color: var(--amber); font-size: .76em; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.featured .label::before { content: "★ "; }
.featured .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--dim); font-size: .8em; font-variant-numeric: tabular-nums; }
.featured h2 { margin: 0; font-size: clamp(1.25rem, 4.2vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.featured h2 a { color: var(--fg); text-decoration: none; }
.featured h2 a:hover { color: var(--amber); }
.featured p { margin: 0; color: var(--dim); }
.diff { margin: 0; padding: 10px 14px; background: var(--bg); border-radius: 5px; border: 1px solid var(--line); font-size: .82em; line-height: 1.65; overflow-x: auto; font-variant-numeric: tabular-nums; }
.diff .h { color: var(--dim); } .diff .m { color: var(--red); } .diff .p { color: var(--green); }
.featured .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.run {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--bg); background: var(--amber); font-weight: 700; font-size: .85em; padding: 7px 14px; border-radius: 5px;
}
.run:hover { color: var(--bg); background: #ffc864; }
.run kbd { background: none; border: 0; padding: 0; color: inherit; opacity: .6; }

/* ===== Lista ls ===== */
.ls { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ls .total { color: var(--dim); font-size: .82em; margin-bottom: 6px; }
.entry {
  display: grid; grid-template-columns: auto auto 1fr; gap: 0 2ch; align-items: baseline;
  padding: 10px; margin-inline: -10px; border-radius: 5px; text-decoration: none; color: var(--fg);
  border-left: 2px solid transparent;
}
.entry:hover, .entry:focus-visible { background: var(--bg-2); border-left-color: var(--c, var(--amber)); }
.entry:hover .title { color: var(--amber); }
.entry > * { min-width: 0; }
.entry .date { color: var(--dim); font-size: .82em; font-variant-numeric: tabular-nums; }
.entry .len { color: var(--green); font-size: .82em; font-variant-numeric: tabular-nums; text-align: right; min-width: 5ch; }
.entry .title { font-weight: 500; }
.entry .desc { grid-column: 3; color: var(--dim); font-size: .88em; margin-top: 2px; }
.entry .tags { grid-column: 3; }
.empty { color: var(--dim); font-size: .9em; padding-block: 8px; }
@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr auto; gap: 2px 1ch; }
  .entry .date { grid-row: 1; grid-column: 1; }
  .entry .len { grid-row: 1; grid-column: 2; }
  .entry .title, .entry .desc, .entry .tags { grid-column: 1 / -1; }
  .featured { padding: 24px 16px 16px; }
}

/* ===== Paginação ===== */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 10px; }
.pager .pages { display: flex; flex-wrap: wrap; gap: 4px; }
.pg, .step {
  font: inherit; font-size: .85em; cursor: pointer; color: var(--dim); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 4px; min-width: 2.2em; padding: 4px 9px; font-variant-numeric: tabular-nums;
}
.pg:hover, .step:hover:not(:disabled) { color: var(--fg); border-color: var(--dim); }
.pg[aria-current="page"] { color: var(--bg); background: var(--amber); border-color: var(--amber); font-weight: 700; }
.step { color: var(--fg); }
.step:disabled { opacity: .35; cursor: default; }
.pager .info { width: 100%; color: var(--dim); font-size: .78em; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }

/* ===== Página do post ===== */
.progress { position: fixed; top: 0; left: 0; right: 0; height: calc(3px + env(safe-area-inset-top, 0px)); z-index: 20; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); }
.crumbs { padding: 0; display: flex; flex-wrap: wrap; gap: 0 .8ch; font-size: .82em; color: var(--dim); margin: 0 0 6px; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs li { list-style: none; }
.crumbs li + li::before { content: "/ "; color: var(--line); }
.crumbs ol { display: contents; }
.frontmatter { color: var(--dim); font-size: .86em; margin: 0 0 22px; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 2px solid var(--line); padding-left: 12px; }
.frontmatter b { color: var(--cyan); font-weight: 400; }
.frontmatter i { color: var(--green); font-style: normal; }
.post h1 { font-size: clamp(1.45rem, 5vw, 2.05rem); line-height: 1.25; margin: 0 0 22px; text-wrap: balance; letter-spacing: -.02em; font-weight: 800; }
.post h1::before { content: "# "; color: var(--amber); }
.post h2 { font-size: 1.08em; margin: 2em 0 .6em; scroll-margin-top: 20px; }
.post h2::before { content: "## "; color: var(--amber); }
.post .body > * { max-width: 70ch; }
.post p, .post ul { margin: 0 0 1.15em; }
.post ul { padding-left: 0; list-style: none; }
.post li::before { content: "- "; color: var(--amber); }
.post :not(pre) > code { color: var(--amber); background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
.post pre { margin: 0 0 1.3em; padding: 14px 16px; overflow-x: auto; max-width: 100%; background: var(--bg-2); border-left: 2px solid var(--amber); font-size: .85em; line-height: 1.6; }
.post pre .c { color: var(--dim); font-style: italic; }
.post .k { color: var(--red); } .post .s { color: var(--green); } .post .f { color: var(--cyan); }
.note { border: 1px dashed var(--line); padding: 10px 14px; color: var(--dim); }
.note b { color: var(--amber); font-weight: 500; }
.toc { color: var(--dim); font-size: .88em; margin: 0 0 26px; }
.toc a { color: var(--dim); }
.toc a:hover { color: var(--amber); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-block: 18px; border-top: 1px dashed var(--line); margin-top: 28px; font-size: .9em; color: var(--dim); }

.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.post-pager a {
  display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); text-decoration: none; color: var(--fg); min-width: 0;
}
.post-pager a:hover { border-color: var(--amber); }
.post-pager a:hover .ttl { color: var(--amber); }
.post-pager .dir { color: var(--dim); font-size: .78em; display: flex; justify-content: space-between; gap: 8px; }
.post-pager .ttl { font-weight: 500; font-size: .92em; line-height: 1.45; }
.post-pager .next { text-align: right; grid-column: 2; }
.post-pager .next .dir { flex-direction: row-reverse; }
@media (max-width: 560px) { .post-pager { grid-template-columns: 1fr; } .post-pager .next { grid-column: 1; } }

/* sessão de comandos */
#session:empty { display: none; }
#session { display: grid; gap: 14px; }
#session .out { white-space: pre-wrap; overflow-wrap: anywhere; }
#session .err { color: var(--red); }

.site-foot { border-top: 1px dashed var(--line); padding-top: 16px; color: var(--dim); font-size: .8em; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.site-foot a { color: var(--dim); }

/* ===== Barra de comando ===== */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.bar-inner { max-width: 74ch; margin-inline: auto; display: grid; gap: 8px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: inherit; font-size: .78em; color: var(--dim); background: var(--bg-2); cursor: pointer; border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; }
.chip:hover { color: var(--amber); border-color: var(--amber); }
.chip.key { color: var(--fg); }
.cmdline { display: flex; align-items: center; gap: 1ch; }
.cmdline label { color: var(--green); white-space: nowrap; font-size: .9em; }
.cmdline label span { color: var(--dim); }
#cmd { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: 0; padding: 4px 0; caret-color: var(--amber); }
#cmd:focus { outline: none; }
#cmd::placeholder { color: var(--dim); opacity: .75; }
@media (max-width: 420px) { .cmdline label .host { display: none; } }

/* ===== Terminal recolhível: gaveta que desce e sobe ===== */
.bar {
  --ease: cubic-bezier(.22, .8, .24, 1);
  transition: transform .7s var(--ease), background-color .3s;
  will-change: transform;
}
.bar-inner { transition: opacity .35s ease .1s; }
.bar-head { position: absolute; right: 16px; top: 1px; transform: translateY(-100%); display: flex; }
.bar-toggle {
  font: inherit; font-size: .74em; cursor: pointer; color: var(--dim);
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
  padding: 4px 12px 5px 10px;
}
.bar-toggle:hover { color: var(--amber); }
.bar-toggle .arrow { display: inline-block; transition: transform .7s var(--ease); }
.bar-toggle kbd { font-size: .9em; padding: 0 4px; }
.bar-toggle .grip { width: 18px; height: 3px; border-radius: 2px; background: var(--line); }
.bar-toggle:hover .grip { background: var(--amber); }

.bar.collapsed { transform: translateY(100%); }
.bar.collapsed .bar-inner { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .7s; }
.bar.collapsed .bar-toggle { color: var(--fg); box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
.bar.collapsed .arrow { transform: rotate(180deg); }
.bar.instant, .bar.instant * { transition: none !important; }

body { transition: padding-bottom .7s cubic-bezier(.22, .8, .24, 1); }
body.term-off { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .bar, .bar-inner, .bar-toggle .arrow, body { transition: none; }
}


/* ===== Página sobre ===== */
.about .prose-block { display: grid; gap: 1em; }
.about .prose-block p { margin: 0; max-width: 66ch; }
.welcome h1.typed { min-height: 2.4em; }
.type-cursor { display: inline-block; width: .55em; height: 1em; background: var(--amber); vertical-align: -.12em; margin-left: .08em; animation: blink 1s steps(1) infinite; }
.welcome h1 .strike.pending { text-decoration: none; color: var(--fg); font-weight: 800; }
.welcome h1 .strike.flick { animation: flick .9s steps(1) 1; }
@keyframes flick {
  0% { opacity: 1; } 10% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 55% { opacity: 0; } 70% { opacity: 1; }
}
.blink-dot { animation: pulse 1.2s steps(1) infinite; }
pre.json { margin: 0; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; font-size: .86em; line-height: 1.7; }
pre.json .ky { color: var(--cyan); } pre.json .st { color: var(--green); } pre.json .nu { color: var(--amber); } pre.json .pu { color: var(--dim); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 2ch; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.timeline .hash { color: var(--amber); font-size: .82em; }
.timeline time { color: var(--dim); font-size: .82em; font-variant-numeric: tabular-nums; }
.timeline strong { font-weight: 500; }
.timeline p { margin: 2px 0 0; color: var(--dim); font-size: .9em; }
@media (max-width: 520px) { .timeline li { grid-template-columns: auto 1fr; } .timeline li > div { grid-column: 1 / -1; } }
.contact { margin: 0; display: grid; gap: 6px; }
.contact div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 1ch; align-items: center; }
.contact dt { color: var(--amber); }
.contact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.contact .val { user-select: all; overflow-wrap: anywhere; }
.copy { font: inherit; font-size: .72em; cursor: pointer; color: var(--dim); background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; }
.copy:hover { color: var(--amber); border-color: var(--amber); }
.copy.done { color: var(--green); border-color: var(--green); }
@media (prefers-reduced-motion: reduce) { .type-cursor, .blink-dot, .welcome h1 .strike.flick { animation: none; } }


/* ===== Comentários ===== */
.comments { display: grid; gap: 18px; margin-top: 44px; padding-top: 28px; border-top: 1px dashed var(--line); }
.comments .prompt { margin: 0; }
.cmt-count { margin: 0; font-size: 1.1em; font-weight: 700; }
.cmt-count::before { content: "## "; color: var(--amber); }
.cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cmt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmt.new { animation: cmt-in .5s cubic-bezier(.22, .8, .24, 1); }
@keyframes cmt-in { from { opacity: 0; transform: translateY(8px); background: color-mix(in srgb, var(--amber) 8%, transparent); } }
.avatar {
  width: 2.3rem; height: 2.3rem; border-radius: 6px; display: grid; place-items: center;
  font-weight: 700; font-size: .8em; color: var(--a); background: color-mix(in srgb, var(--a) 15%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
}
.cmt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .85em; }
.cmt-head .who { color: var(--fg); font-weight: 500; }
.cmt-head time { color: var(--dim); font-size: .92em; }
.badge { font-size: .72em; color: var(--bg); background: var(--amber); border-radius: 3px; padding: 0 6px; font-weight: 700; letter-spacing: .04em; }
.badge.local { background: var(--line); color: var(--fg); }
.cmt-body p { margin: 4px 0 6px; overflow-wrap: anywhere; white-space: pre-wrap; }
.cmt-body .at { color: var(--cyan); }
.cmt-actions { display: flex; gap: 8px; }
.cmt-actions button {
  font: inherit; font-size: .74em; cursor: pointer; color: var(--dim); background: none;
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.cmt-actions button:hover { color: var(--amber); border-color: var(--amber); }
.like[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
.cmt-empty { margin: 0; color: var(--dim); }

.cmt-form { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.cmt-form:focus-within { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); }
.cmt-cmd { margin: 0; color: var(--dim); font-size: .82em; }
.cmt-cmd span:first-child { color: var(--green); }
.cmt-cmd .dim { color: var(--amber); }
.field { display: grid; gap: 4px; }
.field label { color: var(--amber); font-size: .8em; }
.field label::before { content: "--"; color: var(--dim); }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); width: 100%;
  border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; caret-color: var(--amber); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--amber); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); opacity: .6; }
.field .err { border-color: var(--red); }
.cmt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cmt-foot .hint { color: var(--dim); font-size: .78em; font-variant-numeric: tabular-nums; }
.cmt-foot .hint.bad, .cmt-foot .bad { color: var(--red); }
.cmt-form .run { border: 0; cursor: pointer; font-family: inherit; }
.cmt-note { margin: 0; color: var(--dim); font-size: .75em; }
@media (prefers-reduced-motion: reduce) { .cmt.new { animation: none; } }

/* ===== Conquistas: popup ===== */
.ach-stack {
  position: fixed; z-index: 30; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 16px);
  width: min(370px, calc(100% - 32px)); display: grid; gap: 10px; pointer-events: none;
}
.ach-toast {
  --rc: var(--fg);
  position: relative; overflow: hidden; pointer-events: auto; cursor: default;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 14px 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 94%, var(--rc));
  border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line));
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  animation: ach-in .55s cubic-bezier(.2, 1.3, .35, 1) both;
}
.ach-toast.out { animation: ach-out .38s ease-in both; }
@keyframes ach-in { from { opacity: 0; transform: translateX(110%) scale(.96); } }
@keyframes ach-out { to { opacity: 0; transform: translateX(110%); } }
.ach-icon {
  position: relative; width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  animation: ach-pop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both;
}
.ach-icon svg { width: 26px; height: 26px; }
@keyframes ach-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.ach-icon .shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ach-icon .shine::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; width: 40%; left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
  animation: ach-shine 1s .55s ease-out both;
}
@keyframes ach-shine { to { left: 130%; } }
.ach-text { display: grid; gap: 1px; min-width: 0; }
.ach-kicker { font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); font-weight: 700; }
.ach-name { font-size: 1em; font-weight: 700; color: var(--fg); overflow-wrap: anywhere; }
.ach-desc { font-size: .78em; color: var(--dim); line-height: 1.45; }
.ach-meta { font-size: .72em; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 3px; }
.ach-x { align-self: start; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer; color: var(--dim); background: none; border: 0; padding: 2px 4px; }
.ach-x:hover { color: var(--fg); }
.ach-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); transform-origin: 0 50%; animation: ach-timer var(--dur) linear both; opacity: .8; }
.ach-toast.paused .ach-timer { animation-play-state: paused; }
@keyframes ach-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* raridades */
.ach-toast.r-raro { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--rc) 22%, transparent); }
.ach-toast.r-epico { animation: ach-in .55s cubic-bezier(.2, 1.3, .35, 1) both, ach-glow 1.6s .5s ease-in-out 2; }
@keyframes ach-glow { 50% { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 34px color-mix(in srgb, var(--rc) 45%, transparent); } }
.ach-toast.r-lendario {
  background:
    linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--amber) 16%, transparent) 50%, transparent 70%) 0 0 / 250% 100%,
    color-mix(in srgb, var(--bg-2) 90%, var(--amber));
  animation: ach-in .7s cubic-bezier(.2, 1.3, .35, 1) both, ach-sweep 2.2s .5s linear 2;
  border-color: var(--amber);
}
@keyframes ach-sweep { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
.ach-toast.r-lendario .ach-kicker::before { content: "★ "; }
.ach-toast.r-level { --rc: var(--green); }
.ach-spark {
  position: absolute; left: 50%; top: 50%; color: var(--amber); font-size: 13px; font-weight: 700; pointer-events: none;
  animation: ach-spark 1.1s ease-out both;
}
@keyframes ach-spark { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity: 0; } }
@media (max-width: 480px) { .ach-stack { right: 12px; left: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .ach-toast, .ach-toast.out, .ach-icon, .ach-icon .shine::after, .ach-toast.r-epico, .ach-toast.r-lendario { animation: none; }
  .ach-timer { animation-duration: var(--dur); }
}

/* ===== Conquistas: página ===== */
.ach-page h1 { margin: 0 0 8px; font-size: clamp(1.4rem, 4.6vw, 1.9rem); letter-spacing: -.02em; font-weight: 800; }
.ach-page h1::before { content: "# "; color: var(--amber); }
.ach-page .lede { margin: 0; color: var(--dim); max-width: 62ch; }
.profile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center;
  padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.lvl { grid-row: span 3; width: 74px; height: 74px; border-radius: 10px; display: grid; place-content: center; text-align: center; border: 1px solid var(--green); background: color-mix(in srgb, var(--green) 10%, var(--bg)); }
.lvl small { font-size: .65em; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.lvl b { font-size: 1.9em; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.profile .rank { font-weight: 700; }
.profile .rank span { color: var(--dim); font-weight: 400; font-size: .85em; }
.xpbar { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--green) 0 8px, color-mix(in srgb, var(--green) 75%, var(--bg)) 8px 10px); transition: width .8s cubic-bezier(.22, .8, .24, 1); }
.profile .nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .78em; color: var(--dim); font-variant-numeric: tabular-nums; }
.rar-count { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78em; color: var(--dim); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 8px; }
.rar-count b { color: var(--rc); font-weight: 500; }
@media (max-width: 480px) { .profile { grid-template-columns: 1fr; } .lvl { grid-row: auto; } }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; }
.controls .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82em; color: var(--dim); }
.controls .sep { flex: 1; }
.ctl {
  font: inherit; font-size: .8em; cursor: pointer; color: var(--fg); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px;
}
.ctl:hover { border-color: var(--amber); color: var(--amber); }
.ctl[aria-pressed="false"] { color: var(--dim); }
.ctl.danger:hover { border-color: var(--red); color: var(--red); }
input[type="range"]#vol { accent-color: var(--amber); width: 7rem; }
.rfilter { display: flex; flex-wrap: wrap; gap: 6px; }
.rfilter button { font: inherit; font-size: .8em; cursor: pointer; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; }
.rfilter button[aria-pressed="true"] { color: var(--bg); background: var(--rc, var(--amber)); border-color: var(--rc, var(--amber)); }

.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px; }
.ach-card {
  --rc: var(--fg);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.ach-card .ic { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--dim); background: var(--bg); border: 1px dashed var(--line); }
.ach-card .ic svg { width: 22px; height: 22px; }
.ach-card.on { border-color: color-mix(in srgb, var(--rc) 45%, var(--line)); }
.ach-card.on .ic { color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 12%, var(--bg)); }
.ach-card .tx { display: grid; gap: 2px; min-width: 0; }
.ach-card .nm { font-weight: 700; font-size: .95em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ach-card .ds { color: var(--dim); font-size: .8em; line-height: 1.45; }
.ach-card .ft { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 2px; }
.ach-card .rl { font-size: .74em; color: var(--rc); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ach-card .bt { display: flex; gap: 6px; }
.secret-tag { font-size: .62em; font-weight: 400; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; text-transform: uppercase; letter-spacing: .08em; }
.r-comum { --rc: var(--fg); } .r-raro { --rc: var(--cyan); } .r-epico { --rc: var(--violet); } .r-lendario { --rc: var(--amber); } .r-exclusivo { --rc: var(--pink); }

.ach-groups { display: grid; gap: 26px; }
.ach-group { display: grid; gap: 12px; }
.ach-group h2 { margin: 0; font-size: 1em; display: flex; align-items: baseline; gap: 12px; text-transform: lowercase; }
.ach-group h2::before { content: "## "; color: var(--amber); }
.ach-group h2 span { color: var(--dim); font-weight: 400; font-size: .8em; font-variant-numeric: tabular-nums; }

/* ===== Easter eggs ===== */
.egg-box { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.egg-box .prompt { margin: 0; }
.egg-title { margin: 0; font-size: clamp(1.3rem, 4.4vw, 1.7rem); font-weight: 800; }
.deny { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--bg-2)); }
.deny-title { margin: 0; font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 800; letter-spacing: .08em; color: var(--red); animation: deny-blink 1s steps(1) 4; }
@keyframes deny-blink { 50% { opacity: .15; } }
.egg-log { margin: 0; min-height: 8em; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: .85em; line-height: 1.7; color: var(--green); white-space: pre-wrap; overflow-wrap: anywhere; }
.egg-log:empty { min-height: 0; padding: 0; border: 0; }
.egg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.egg-actions .ctl { text-decoration: none; }
.login-form { display: grid; gap: 12px; max-width: 26rem; }
.login-form .run { border: 0; cursor: pointer; font-family: inherit; }
.sim { display: grid; gap: 12px; }
.sim .prompt { margin: 0; }
.sim-links { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-links a.ctl { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .deny-title { animation: none; } }

/* ===== Gráfico de XP (estilo contribuições) ===== */
.cg { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 10px; min-width: 0; }
.cg-wrap { overflow-x: auto; padding-bottom: 2px; }
.cg-months { display: grid; gap: 3px; margin-left: 30px; font-size: .66em; color: var(--dim); height: 1.4em; }
.cg-months span { white-space: nowrap; overflow: visible; }
.cg-body { display: flex; gap: 4px; }
.cg-days { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; width: 26px; font-size: .62em; color: var(--dim); line-height: 11px; }
.cg-grid { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; gap: 3px; }
.cg-grid i, .cg-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.l0 { background: var(--bg-3); outline: 1px solid color-mix(in srgb, var(--line) 60%, transparent); outline-offset: -1px; }
.l1 { background: color-mix(in srgb, var(--green) 30%, var(--bg)); }
.l2 { background: color-mix(in srgb, var(--green) 55%, var(--bg)); }
.l3 { background: color-mix(in srgb, var(--green) 80%, var(--bg)); }
.l4 { background: var(--green); }
.cg-grid i.future { background: transparent; outline: 0; }
.cg-grid i:hover { outline: 1px solid var(--fg); outline-offset: 0; }
.cg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: .74em; color: var(--dim); font-variant-numeric: tabular-nums; }
.cg-legend { display: inline-flex; align-items: center; gap: 3px; }
.cg-legend i { margin: 0 1px; }

/* ===== Perfil ===== */
.pf-head { display: grid; gap: 12px; }
.pf-head .prompt { margin: 0; }
.pf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.identicon { --ic: var(--green); width: 104px; height: 104px; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.identicon i { border-radius: 2px; }
.identicon i.on { background: var(--ic); }
.pf-info { display: grid; gap: 4px; min-width: 0; }
.pf-info h1 { margin: 0; font-size: clamp(1.3rem, 4.4vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pf-handle { color: var(--dim); font-size: .88em; }
.pf-level { justify-self: start; margin-top: 6px; font-size: .78em; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 999px; padding: 1px 10px; }
.pf-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .74em; color: var(--dim); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pf-lv .xpbar { flex: 1 1 10rem; max-width: 18rem; height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.pf-lv .xpbar i { display: block; height: 100%; background: var(--green); }
.pf-meta { margin: 4px 0 0; color: var(--dim); font-size: .8em; }
.pf-actions { margin-top: 8px; }
.pf-edit { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-edit input { font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; min-width: 0; flex: 1 1 12rem; caret-color: var(--amber); }
.pf-edit input:focus { outline: none; border-color: var(--amber); }
.pf-note { margin: 0; color: var(--dim); font-size: .75em; }
@media (max-width: 520px) { .pf-card { grid-template-columns: 1fr; } .identicon { width: 84px; height: 84px; padding: 10px; } }

.pf-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 8px; }
.pf-stats div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); display: grid; gap: 2px; }
.pf-stats dt { color: var(--dim); font-size: .74em; }
.pf-stats dd { margin: 0; font-size: 1.45em; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-stats div:nth-child(5) dd { color: var(--green); }
.pf-graph { margin-top: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.pf-h { margin: 0 0 12px; font-size: 1em; text-transform: lowercase; }
.pf-h::before { content: "## "; color: var(--amber); }
.pf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 28px; }
.pf-cols > * { min-width: 0; }
.badges { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.badge-card { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.badge-card .bdg { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, var(--bg)); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); transition: transform .15s; }
.badge-card .bdg:hover { transform: translateY(-2px) scale(1.05); }
.badge-card .bdg svg { width: 22px; height: 22px; }
.badge-card .bn { font-size: .74em; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.badge-card .br { font-size: .64em; color: var(--rc); text-transform: uppercase; letter-spacing: .08em; }
.more-link { font-size: .82em; }
.favs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.favs li { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 2ch; align-items: center; gap: 10px; font-size: .85em; }
.favs .fl { display: inline-flex; align-items: center; gap: 8px; }
.favs .fl .ico { width: 15px; height: 15px; color: var(--c); }
.favs .fb { height: 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.favs .fb i { display: block; height: 100%; background: var(--c); }
.favs .fn { color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .favs li { grid-template-columns: 7.5rem minmax(0, 1fr) 2ch; } }
.pf-reads .entry { grid-template-columns: auto minmax(0, 1fr) auto; }
.pf-reads .ok { color: var(--green); }
.pf-reads .date { text-align: right; }
@media (max-width: 560px) { .pf-reads .entry { grid-template-columns: auto minmax(0, 1fr); } .pf-reads .date { grid-column: 2; text-align: left; grid-row: auto; } .pf-reads .title { grid-column: 2; } }
.pf-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-comments li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pf-comments .cm-post { font-size: .78em; color: var(--cyan); text-decoration: none; }
.pf-comments .cm-post::before { content: "em "; color: var(--dim); }
.pf-comments p { margin: 0; overflow-wrap: anywhere; }
.pf-comments time { font-size: .74em; color: var(--dim); }
@media (max-width: 520px) { .pf-stats { grid-template-columns: 1fr 1fr; } .pf-stats div:last-child { grid-column: 1 / -1; } }

/* ===== GIFs nas conquistas ===== */
.ach-gif { grid-column: 1 / -1; margin: -14px -14px 2px; position: relative; height: 160px; overflow: hidden; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--rc) 40%, var(--line)); }
.ach-gif figcaption { position: absolute; right: 6px; bottom: 4px; font-size: .58em; letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.55); padding: 0 5px; border-radius: 3px; }
.card-gif { grid-column: 1 / -1; margin: -14px -14px 4px; height: 96px; overflow: hidden; border-radius: 8px 8px 0 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.giphy-credit { margin: 0; font-size: .7em; color: var(--dim); letter-spacing: .06em; }

/* ===== Glitch nas lendárias ===== */
.ach-toast.glitch { animation: ach-in .7s cubic-bezier(.2, 1.3, .35, 1) both, ach-sweep 2.2s .5s linear 2, glitch-shake 2.6s .4s steps(1) infinite; }
.ach-toast.glitch .ach-name { position: relative; animation: glitch-rgb 2.6s .4s steps(1) infinite; }
.ach-toast.glitch::before, .ach-toast.glitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
}
.ach-toast.glitch::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 30%, transparent), color-mix(in srgb, var(--red) 30%, transparent));
  mix-blend-mode: screen; opacity: 0; animation: glitch-slice 2.6s .4s steps(1) infinite;
}
.ach-toast.glitch .ach-gif .gif-main { animation: glitch-img 2.6s .4s steps(1) infinite; }
@keyframes glitch-shake {
  0%, 8%, 100% { transform: none; }
  2% { transform: translate(-3px, 1px) skewX(-2deg); }
  4% { transform: translate(3px, -1px) skewX(2deg); }
  6% { transform: translate(-1px, 0); }
  52% { transform: translate(2px, 0) skewX(1deg); }
  54% { transform: none; }
}
@keyframes glitch-rgb {
  0%, 9%, 100% { text-shadow: none; }
  2% { text-shadow: -3px 0 var(--red), 3px 0 var(--cyan); }
  5% { text-shadow: 3px 0 var(--red), -3px 0 var(--cyan); }
  52% { text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
  55% { text-shadow: none; }
}
@keyframes glitch-slice {
  0%, 9%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  2% { opacity: 1; clip-path: inset(18% 0 62% 0); }
  4% { opacity: 1; clip-path: inset(55% 0 28% 0); }
  6% { opacity: 1; clip-path: inset(80% 0 6% 0); }
  52% { opacity: 1; clip-path: inset(36% 0 48% 0); }
  54% { opacity: 0; }
}
@keyframes glitch-img {
  0%, 9%, 100% { filter: none; transform: none; }
  2% { filter: hue-rotate(90deg) saturate(2); transform: translateX(-4px); }
  5% { filter: invert(.15) hue-rotate(-60deg); transform: translateX(4px); }
  52% { filter: hue-rotate(160deg); transform: translateX(2px); }
}
.ach-card.glitchy { position: relative; }
.ach-card.glitchy .nm { animation: glitch-rgb 3.4s steps(1) infinite; }
.ach-card.glitchy:hover { animation: glitch-shake 1.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .ach-toast.glitch, .ach-toast.glitch .ach-name, .ach-toast.glitch::after, .ach-toast.glitch .ach-gif .gif-main,
  .ach-card.glitchy .nm, .ach-card.glitchy:hover { animation: none; }
}

/* ===== Exclusivas (concedidas pelo autor): borda holográfica ===== */
@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ach-toast.r-exclusivo, .ach-card.r-exclusivo {
  border: 2px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--bg-2) 92%, var(--pink)), color-mix(in srgb, var(--bg-2) 92%, var(--pink))) padding-box,
    conic-gradient(from var(--holo), var(--pink), var(--amber), var(--green), var(--cyan), var(--violet), var(--pink)) border-box;
  animation: holo-spin 4s linear infinite;
}
.ach-toast.r-exclusivo { animation: ach-in .7s cubic-bezier(.2, 1.3, .35, 1) both, holo-spin 3s linear infinite; box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--pink) 30%, transparent); }
.ach-toast.r-exclusivo .ach-name { background: linear-gradient(90deg, var(--pink), var(--amber), var(--cyan), var(--pink)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-text 3s linear infinite; }
.ach-toast.r-exclusivo .ach-kicker::before { content: "♛ "; }
@keyframes holo-spin { to { --holo: 360deg; } }
@keyframes holo-text { to { background-position: -200% 0; } }
.secret-tag.granted { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 50%, transparent); }
@media (prefers-reduced-motion: reduce) { .ach-toast.r-exclusivo, .ach-card.r-exclusivo, .ach-toast.r-exclusivo .ach-name { animation: none; } }

/* ===== Painel de conceder exclusivas ===== */
.grant .prompt { margin: 0 0 12px; }
.grant-box {
  display: grid; gap: 14px; padding: 18px; border-radius: 8px; border: 2px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--bg-2) 94%, var(--pink)), color-mix(in srgb, var(--bg-2) 94%, var(--pink))) padding-box,
    conic-gradient(from var(--holo), var(--pink), var(--amber), var(--green), var(--cyan), var(--violet), var(--pink)) border-box;
  animation: holo-spin 6s linear infinite;
}
.grant-head { display: grid; gap: 2px; }
.grant-head strong { color: var(--pink); }
.grant-head span { color: var(--dim); font-size: .82em; }
.grant-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .grant-pick { grid-template-columns: 1fr; } }
.grant-opt {
  font: inherit; font-size: .82em; text-align: left; cursor: pointer; color: var(--fg);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line);
}
.grant-opt:hover { border-color: color-mix(in srgb, var(--pink) 60%, var(--line)); }
.grant-opt[aria-pressed="true"] { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, var(--bg)); }
.grant-opt .gi { flex: none; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent); }
.grant-opt .gi svg { width: 18px; height: 18px; }
.grant-opt .gn { font-weight: 700; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.grant-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.grant-form label { color: var(--pink); font-size: .8em; }
.grant-form input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px; caret-color: var(--pink); }
.grant-form input:focus { outline: none; border-color: var(--pink); }
.grant-form .run { border: 0; cursor: pointer; font-family: inherit; background: var(--pink); }
.grant-form .run:hover { background: color-mix(in srgb, var(--pink) 80%, #fff); }
@media (prefers-reduced-motion: reduce) { .grant-box { animation: none; } }

/* ===== Curtir post e voto negativo ===== */
.post-like-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -8px 0 22px; font-size: .85em; }
.post-like-row .hint { color: var(--dim); font-size: .9em; }
.like-post {
  font: inherit; font-size: .9em; cursor: pointer; color: var(--dim); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-variant-numeric: tabular-nums;
}
.like-post:hover { color: var(--pink); border-color: var(--pink); }
.like-post[aria-pressed="true"] { color: var(--pink); border-color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, var(--bg-2)); }
.like-post.pop { animation: like-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes like-pop { 40% { transform: scale(1.18); } }
.post-tags .sep { flex: 1; }
.cmt-actions .dislike[aria-pressed="true"] { color: var(--red); border-color: var(--red); }
@media (prefers-reduced-motion: reduce) { .like-post.pop { animation: none; } }

/* ===== GIF inteiro com fundo desfocado ===== */
.gif-fig { position: relative; overflow: hidden; background: var(--bg); margin: 0; display: grid; place-items: center; }
.gif-fig .gif-bg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(14px) brightness(.45) saturate(1.2); }
.gif-fig .gif-main { position: relative; display: block; max-width: 100%; width: auto; object-fit: contain; }
.gif-fig figcaption { position: absolute; right: 6px; bottom: 4px; font-size: .58em; letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.55); padding: 0 5px; border-radius: 3px; }
/* popup */
.ach-gif { height: 160px; }
.ach-gif .gif-main { height: 100%; }
/* cartões maiores, GIF sem corte */
.ach-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 14px; }
.card-gif { grid-column: 1 / -1; margin: -14px -14px 6px; height: 190px; border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line); }
.card-gif .gif-main { height: 100%; filter: saturate(.9); }
.ach-card.on .card-gif .gif-main { filter: none; }
/* perfil: conquista clicável */
.badge-card .bdg { position: relative; }
.badge-card .bdg::after { content: "ver"; position: absolute; bottom: -6px; right: -6px; font-size: .55em; color: var(--bg); background: var(--rc); border-radius: 3px; padding: 0 3px; opacity: 0; transition: opacity .15s; }
.badge-card .bdg:hover::after, .badge-card .bdg:focus-visible::after { opacity: 1; }

/* ===== Modal da conquista ===== */
.ach-modal {
  --rc: var(--fg);
  width: min(30rem, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; overflow: auto;
  color: var(--fg); background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line)); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--rc) 20%, transparent);
}
.ach-modal[open] { animation: am-in .35s cubic-bezier(.2, 1.2, .35, 1); }
.ach-modal::backdrop { background: rgba(8, 9, 7, .72); backdrop-filter: blur(3px); }
@keyframes am-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.am-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .78em; color: var(--dim); position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.am-x { font: inherit; font-size: 1.3em; line-height: 1; cursor: pointer; color: var(--dim); background: none; border: 0; padding: 0 4px; }
.am-x:hover { color: var(--fg); }
.am-gif { min-height: 200px; max-height: 340px; }
.am-gif .gif-main { max-height: 340px; width: 100%; height: auto; }
.am-body { display: grid; gap: 14px; padding: 18px 20px 20px; }
.am-title { display: flex; gap: 14px; align-items: center; }
.am-icon { flex: none; width: 48px; height: 48px; border-radius: 9px; display: grid; place-items: center; color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, var(--bg)); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.am-icon svg { width: 24px; height: 24px; }
.am-kicker { font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); font-weight: 700; }
.am-name { margin: 2px 0 0; font-size: 1.2em; line-height: 1.3; overflow-wrap: anywhere; }
.am-desc { margin: 0; color: var(--fg); line-height: 1.6; }
.am-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.am-meta div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.am-meta dt { font-size: .68em; color: var(--dim); }
.am-meta dd { margin: 0; font-size: .86em; }
.am-meta .am-r { color: var(--rc); }
.am-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ach-modal.r-lendario .am-name { animation: glitch-rgb 2.6s steps(1) infinite; }
.ach-modal.r-exclusivo { border: 2px solid transparent; background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    conic-gradient(from var(--holo), var(--pink), var(--amber), var(--green), var(--cyan), var(--violet), var(--pink)) border-box;
  animation: am-in .35s cubic-bezier(.2, 1.2, .35, 1), holo-spin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ach-modal[open], .ach-modal.r-exclusivo, .ach-modal.r-lendario .am-name { animation: none; } }

/* ===== Chamas nas conquistas concedidas pelo autor ===== */
.on-fire { position: relative; overflow: hidden; isolation: isolate; }
.on-fire > *:not(.flames):not(.ach-timer):not(.gif-fig) { position: relative; z-index: 1; }
.flames {
  position: absolute; left: 0; right: 0; bottom: 0; height: 75%; pointer-events: none; z-index: 0;
  mix-blend-mode: screen; overflow: hidden;
}
.flames::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(0deg, rgba(255, 90, 20, .38), rgba(255, 140, 30, .12) 55%, transparent);
  animation: ember-glow 1.6s ease-in-out infinite alternate;
}
.flames i {
  position: absolute; bottom: -24px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.7);
  margin-left: calc(var(--s) / -2);
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, #fff6c2 0%, #ffc23d 22%, #ff6a1f 46%, rgba(210, 30, 10, .5) 62%, transparent 74%);
  filter: blur(3px); opacity: 0;
  animation: flame var(--d) ease-in var(--dl) infinite;
}
.flames b {
  position: absolute; bottom: 0; left: var(--x); width: 3px; height: 3px; border-radius: 50%;
  background: #ffd36b; box-shadow: 0 0 6px 2px rgba(255, 140, 30, .8); opacity: 0;
  animation: spark var(--d) linear var(--dl) infinite;
}
@keyframes flame {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: .85; }
  60% { opacity: .55; }
  100% { transform: translate(var(--w), -110%) scale(.25) rotate(8deg); opacity: 0; }
}
@keyframes spark {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--w), -140px); opacity: 0; }
}
@keyframes ember-glow { from { opacity: .7; } to { opacity: 1; } }
/* brilho de fogo em volta */
.ach-toast.r-exclusivo.on-fire { animation: ach-in .7s cubic-bezier(.2, 1.3, .35, 1) both, holo-spin 3s linear infinite, fire-glow 1.2s ease-in-out infinite alternate; }
.ach-card.r-exclusivo.on-fire { animation: holo-spin 4s linear infinite, fire-glow 1.5s ease-in-out infinite alternate; }
@keyframes fire-glow {
  from { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px rgba(255, 100, 30, .25); }
  to   { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 34px rgba(255, 120, 30, .45), 0 0 4px rgba(255, 200, 80, .6); }
}
.ach-card.r-exclusivo .card-gif { z-index: 1; }
.grant-opt.on-fire .flames { height: 100%; }
.grant-opt.on-fire .flames i { filter: blur(4px); }
.am-body.on-fire { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .flames { display: none; } .ach-toast.r-exclusivo.on-fire, .ach-card.r-exclusivo.on-fire { animation: none; } }
/* GIF de ponta a ponta no popup e nos cartões */
.gif-fig.ach-gif { margin: -14px -14px 2px; }
.gif-fig.card-gif { margin: -14px -14px 6px; }

/* =====================================================================
   WordPress: links no lugar dos botões de filtro, comentários nativos,
   blocos do editor e barra de administração.
   ===================================================================== */

/* categorias e paginação viraram links (o filtro agora é do servidor) */
a.cat { text-decoration: none; }
.cat[aria-current="page"] { background: color-mix(in srgb, var(--c) 16%, var(--bg-2)); border-color: var(--c); }
.cat[aria-current="page"] .n { color: var(--fg); }
.cat.is-cat { font-weight: 700; }
.t.tc::before { content: "~/"; }
a.pg, a.step { text-decoration: none; display: inline-block; text-align: center; }
span.step[aria-disabled="true"] { opacity: .35; cursor: default; }
.pager .gap { color: var(--dim); padding-inline: 4px; }

/* cabeçalho dos arquivos de categoria, tag, busca e autor */
.arch-head { display: grid; gap: 6px; }
.arch-head .prompt { margin: 0; }
.arch-head h1 { margin: 0; font-size: clamp(1.35rem, 4.6vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
.arch-head h1 .ico { width: 1.1em; height: 1.1em; color: var(--c, var(--amber)); flex: none; }
.arch-head .lede { margin: 0; color: var(--dim); max-width: 62ch; }

/* comentários nativos */
.cmt-head .who a { color: inherit; text-decoration: none; }
.cmt-head .who a:hover { color: var(--amber); }
.badge.lvl-badge { background: color-mix(in srgb, var(--green) 25%, var(--bg-2)); color: var(--green); }
.cmt.pending { opacity: .75; }
.cmt-hidden summary { cursor: pointer; color: var(--dim); font-size: .85em; margin: 4px 0; }
.cmt-as { margin: 0; color: var(--dim); font-size: .85em; }
.cmt-as strong { color: var(--fg); font-weight: 500; }
.cmt-remember { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .8em; cursor: pointer; }
.cmt-remember input { accent-color: var(--amber); }
.field input.err, .field textarea.err { border-color: var(--red); }

/* painel de conceder exclusivas */
.grant-form select, .grant-form #grant-msg {
  font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 8px; min-width: 0; flex: 1 1 12rem; max-width: 100%;
}
.grant-form select:focus, .grant-form #grant-msg:focus { outline: none; border-color: var(--pink); }
.grant-out { margin: 0; color: var(--dim); font-size: .8em; min-height: 1.2em; }

/* perfil */
.pf-empty { margin: 0; color: var(--dim); font-size: .85em; }
.pf-status { color: var(--red); font-weight: 500; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-actions a.ctl { text-decoration: none; }

/* conteúdo vindo do editor de blocos */
.post .body img, .post .body video { max-width: 100%; height: auto; border-radius: 6px; }
.post .body figure { margin: 0 0 1.3em; }

/* Alinhamento escolhido no editor (bloco Imagem e imagens do editor clássico).
   Precisa ser mais específico que ".post .body figure", senão a margem dela anula o alinhamento. */
.post .body .aligncenter { display: block; margin-inline: auto; text-align: center; }
.post .body figure.aligncenter { display: table; margin: 0 auto 1.3em; }          /* encolhe para a largura da imagem */
.post .body figure.aligncenter > figcaption { display: table-caption; caption-side: bottom; }
.post .body .alignleft { float: left; margin: .35em 1.4em 1em 0; max-width: 50%; }
.post .body .alignright { float: right; margin: .35em 0 1em 1.4em; max-width: 50%; }
.post .body .alignwide, .post .body .alignfull { width: 100%; max-width: 100%; margin-inline: 0; }
.post .body .alignwide img, .post .body .alignfull img { width: 100%; }
.post .body figure > img { display: block; }
.post .body .alignleft > img, .post .body .alignright > img { max-width: 100%; }
/* nada de flutuante "vazando" para títulos, código ou o rodapé do post */
.post .body h2, .post .body h3, .post .body pre, .post .body hr { clear: both; }
.post .body::after { content: ""; display: block; clear: both; }
/* no celular, flutuar espreme o texto: as imagens laterais viram centralizadas */
@media (max-width: 560px) {
  .post .body .alignleft, .post .body .alignright { float: none; display: table; max-width: 100%; margin: 0 auto 1.3em; }
}
.post .body figcaption { color: var(--dim); font-size: .8em; margin-top: 6px; }
.post .body h3 { font-size: 1em; margin: 1.6em 0 .5em; }
.post .body h3::before { content: "### "; color: var(--amber); }
.post .body ol { padding-left: 2.2ch; margin: 0 0 1.15em; }
.post .body ol li::before { content: none; }
.post .body ol li::marker { color: var(--amber); }
.post .body blockquote { margin: 0 0 1.15em; border-left: 2px solid var(--line); padding-left: 14px; color: var(--dim); }
.post .body blockquote p:last-child { margin-bottom: 0; }
.post .body .wp-block-code { font-family: var(--mono); }
.post .body .wp-block-code code { font-family: inherit; }
.post .body table { width: 100%; border-collapse: collapse; font-size: .88em; display: block; overflow-x: auto; }
.post .body th, .post .body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.post .body th { color: var(--amber); font-weight: 500; }
.post .body hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }
.post .body .wp-block-separator { border-top: 1px dashed var(--line); }
.post .body a { overflow-wrap: anywhere; }
.post-pages { color: var(--dim); font-size: .88em; }
.prose-block > * { margin-top: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* barra de administração do WordPress (logado) */
body.admin-bar .progress { top: 32px; }
body.admin-bar .ach-stack { top: calc(env(safe-area-inset-top, 0px) + 48px); }
@media (max-width: 782px) {
  body.admin-bar .progress { top: 46px; }
  body.admin-bar .ach-stack { top: calc(env(safe-area-inset-top, 0px) + 62px); }
}

/* ===== Minha conta ===== */
.conta { gap: 22px; }
.conta-form { display: grid; gap: 16px; }
.conta-form .cmt-form .pf-h { margin: 0; }
.conta-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.conta-foot .run { border: 0; cursor: pointer; font-family: inherit; }
.conta-msg { margin: 0; padding: 10px 14px; border-radius: 6px; font-size: .88em; border: 1px solid var(--line); background: var(--bg-2); }
.conta-msg.ok { border-left: 3px solid var(--green); color: var(--green); }
.conta-msg.err { border-left: 3px solid var(--red); color: var(--red); }
.pf-actions a.ctl.danger:hover { color: var(--red); border-color: var(--red); }
.pf-bio { margin: 4px 0 0; color: var(--fg); font-size: .88em; max-width: 52ch; overflow-wrap: anywhere; }

/* ===== Avaliação com corações (barra de vida estilo Minecraft) =====
   Vermelho = voto positivo; verde (envenenado) = negativo; "split" = meio a meio; "empty" = sem votos.
   Os SVGs são pixel art 9x8 gerados uma vez; image-rendering mantém os pixels nítidos. */
:root {
  --hp-red: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'><path fill='%230a0b08' d='M2 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/><path fill='%23e5372b' d='M2 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/><path fill='%23a01a14' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1z'/><path fill='%23ffc2b8' d='M2 2h1v1h-1z'/></svg>");
  --hp-green: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'><path fill='%230a0b08' d='M2 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/><path fill='%236cb33c' d='M2 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/><path fill='%233b7a1f' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1z'/><path fill='%23d4f5b4' d='M2 2h1v1h-1z'/></svg>");
  --hp-empty: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'><path fill='%230a0b08' d='M2 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/><path fill='%232c2f27' d='M2 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/><path fill='%2322251e' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1z'/><path fill='%233a3e33' d='M2 2h1v1h-1z'/></svg>");
  --hp-split: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'><path fill='%230a0b08' d='M2 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/><path fill='%23e5372b' d='M2 1h1v1h-1zM3 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/><path fill='%236cb33c' d='M5 1h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM5 4h1v1h-1z'/><path fill='%233b7a1f' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1z'/><path fill='%23ffc2b8' d='M2 2h1v1h-1z'/><path fill='%23a01a14' d='M4 6h1v1h-1z'/></svg>");
}
.hp { display: inline-block; width: 18px; height: 16px; flex: none; background: var(--hp-empty) center / contain no-repeat; image-rendering: pixelated; }
.hp.red { background-image: var(--hp-red); }
.hp.green { background-image: var(--hp-green); }
.hp.split { background-image: var(--hp-split); }
.hp.empty { background-image: var(--hp-empty); }

.hp-rate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hp-bar { display: inline-flex; gap: 1px; padding: 4px 6px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line); cursor: help; }
.hp-bar .hp { width: 18px; height: 16px; }
.hp-btn {
  font: inherit; font-size: .85em; cursor: pointer; color: var(--fg);
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 9px;
  font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s;
}
.hp-btn.up:hover, .hp-btn.up[aria-pressed="true"] { border-color: #e5372b; }
.hp-btn.up[aria-pressed="true"] { background: color-mix(in srgb, #e5372b 16%, var(--bg-2)); }
.hp-btn.down:hover, .hp-btn.down[aria-pressed="true"] { border-color: #6cb33c; }
.hp-btn.down[aria-pressed="true"] { background: color-mix(in srgb, #6cb33c 16%, var(--bg-2)); }
.hp-btn[aria-pressed="false"] .hp { filter: saturate(.55) brightness(.9); }
.hp-btn.pop .hp { animation: hp-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hp-pop { 40% { transform: scale(1.35); } }
.post-tags .hp-rate { gap: 6px; }

/* corações nos comentários (substituem o +1 / −1) */
.cmt-actions .hp-mini { display: inline-flex; align-items: center; gap: 5px; }
.cmt-actions .hp-mini .hp { width: 12px; height: 11px; }
.cmt-actions .hp-mini[aria-pressed="false"] .hp { filter: saturate(.55) brightness(.9); }
.cmt-actions .like[aria-pressed="true"] { color: #ff8a80; border-color: #e5372b; }
.cmt-actions .dislike[aria-pressed="true"] { color: #a6e07a; border-color: #6cb33c; }

/* balão explicativo (mouse e foco pelo teclado); o leitor de tela usa o aria-label */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 15; transform: translate(-50%, 4px);
  width: max-content; max-width: min(19rem, 80vw); padding: 6px 10px; border-radius: 5px;
  font: 400 12px/1.45 var(--mono); text-align: left; white-space: normal; color: var(--fg);
  background: var(--bg-3); border: 1px solid var(--line-2, #363a30); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility 0s .15s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .25s, .25s, 0s; }
.post-tags [data-tip]::after { left: auto; right: 0; transform: translateY(4px); }
.post-tags [data-tip]:hover::after, .post-tags [data-tip]:focus-visible::after { transform: translateY(0); }
@media (hover: none) { [data-tip]:hover::after { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .hp-btn.pop .hp { animation: none; } [data-tip]::after { transition: none; } }
.post-like-row [data-tip]::after { left: 0; transform: translateY(4px); }
.post-like-row [data-tip]:hover::after, .post-like-row [data-tip]:focus-visible::after { transform: translateY(0); }

/* ===== Acessibilidade ===== */
/* Prefixos decorativos do "terminal" (#, ##, $, ./, --, -, ~/): visíveis na tela, mudos para leitores de tela.
   A sintaxe "texto / ''" dá texto alternativo vazio; navegadores sem suporte ignoram e mantêm a regra de cima. */
.prompt .c::before { content: "$ " / ""; }
.nav a::before { content: "./" / ""; }
.welcome .eyebrow::before { content: "● " / ""; }
.t::before { content: "#" / ""; }
.t.tc::before { content: "~/" / ""; }
.featured .label::before { content: "★ " / ""; }
.crumbs li + li::before { content: "/ " / ""; }
.post h1::before, .ach-page h1::before { content: "# " / ""; }
.post h2::before, .cmt-count::before, .ach-group h2::before, .pf-h::before { content: "## " / ""; }
.post .body h3::before { content: "### " / ""; }
.post li::before { content: "- " / ""; }
.field label::before { content: "--" / ""; }
.tagline .render.busy::after { content: "▌" / ""; }
.ach-toast.r-lendario .ach-kicker::before { content: "★ " / ""; }
.ach-toast.r-exclusivo .ach-kicker::before { content: "♛ " / ""; }
.badge-card .bdg::after { content: "ver" / ""; }

/* "pular para o conteúdo": só aparece ao navegar pelo teclado */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50; padding: 8px 14px; border-radius: 5px;
  color: var(--bg); background: var(--amber); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--bg); }
main:focus { outline: none; }

/* botão com cara de link (ex.: "help" do rodapé) */
.linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--amber); }

/* títulos da lista de posts agora são <h2> (estrutura de títulos para leitores de tela e buscadores) */
.entry h2.title { margin: 0; font-size: inherit; line-height: inherit; font-weight: 500; letter-spacing: normal; }
.entry h2.title::before { content: none; }

/* campo com erro (o texto do erro é anunciado e ligado ao campo) */
[aria-invalid="true"] { border-color: var(--red) !important; }

/* ===== Barra de vida: tremor dos corações (como no Minecraft com a vida baixa) =====
   No jogo, cada coração pula 1 pixel para cima/baixo, aleatório e independente, em saltos secos.
   Aqui: 1 pixel da arte = 2px; sequência irregular com steps() (sem deslizar) e, por coração,
   duração e atraso diferentes, para nenhum tremer igual ao vizinho. Com a vida baixa (≤ 40% positiva), mais rápido. */
@keyframes hp-tremor {
  0%   { transform: translateY(0); }
  11%  { transform: translateY(-2px); }
  23%  { transform: translateY(0); }
  31%  { transform: translateY(2px); }
  44%  { transform: translateY(-2px); }
  52%  { transform: translateY(0); }
  63%  { transform: translateY(2px); }
  71%  { transform: translateY(0); }
  84%  { transform: translateY(-2px); }
  92%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.hp-bar { overflow: visible; padding-block: 6px; }
.hp-bar .hp { animation: hp-tremor 1.6s steps(1, end) infinite; will-change: transform; }
.hp-bar .hp:nth-child(1) { animation-duration: 1.53s; animation-delay: -.21s; }
.hp-bar .hp:nth-child(2) { animation-duration: 1.31s; animation-delay: -.93s; }
.hp-bar .hp:nth-child(3) { animation-duration: 1.72s; animation-delay: -.47s; }
.hp-bar .hp:nth-child(4) { animation-duration: 1.19s; animation-delay: -1.12s; }
.hp-bar .hp:nth-child(5) { animation-duration: 1.44s; animation-delay: -.66s; }
.hp-bar.low .hp { animation-duration: .62s; }
.hp-bar.low .hp:nth-child(2n) { animation-duration: .51s; }
.hp-bar.low .hp:nth-child(3n) { animation-duration: .57s; }
@media (prefers-reduced-motion: reduce) { .hp-bar .hp, .hp-bar.low .hp { animation: none; } }

/* ===== Cartão clicável da lista + tags clicáveis =====
   O link do título se estende sobre o cartão inteiro (::after); as tags ficam por cima (z-index),
   com links próprios para os outros posts da mesma tag. Sem link dentro de link. */
.entry.card { position: relative; }
.entry-link { color: inherit; text-decoration: none; }
.entry-link::after { content: ""; position: absolute; inset: 0; border-radius: 5px; }
.entry-link:focus-visible { outline: none; }
.entry.card:focus-within { background: var(--bg-2); border-left-color: var(--c, var(--amber)); }
.entry.card:has(.entry-link:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.entry.card .tags { position: relative; z-index: 1; width: fit-content; }
.entry.card .tags a.t { padding-block: 2px; }
.featured .tags a.t { position: relative; z-index: 1; }
/* frontmatter do post: tags como links discretos */
.frontmatter i a { color: inherit; text-decoration: none; }
.frontmatter i a:hover, .frontmatter i a:focus-visible { color: var(--amber); text-decoration: underline; }

/* ===== Avaliação média na listagem (abaixo do título) =====
   Mesmos corações da página do post, menores (1 pixel da arte = 1,5px) e só para leitura.
   Fica por cima do link do cartão para o balão aparecer ao passar o mouse. */
.entry-hp { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; position: relative; z-index: 1; width: fit-content; }
.entry .entry-hp { grid-column: 3; }   /* só nos cartões da lista (o destaque é outro grid) */
.featured .entry-hp { margin: -4px 0 0; }
.hp-bar.hp-list { padding: 3px 4px; gap: 1px; background: transparent; border: 0; }
.hp-bar.hp-list .hp { width: 13.5px; height: 12px; }
.hp-count { color: var(--dim); font-size: .74em; font-variant-numeric: tabular-nums; }
.entry-hp [data-tip]::after { left: 0; transform: translateY(4px); }
.entry-hp [data-tip]:hover::after { transform: translateY(0); }
@media (max-width: 560px) { .entry .entry-hp { grid-column: 1 / -1; } }