/* ==========================================================================
   Enzo Games — folha de estilo única do site
   Linguagem visual: gibi de domingo. Laranja do Garfield, retícula preta,
   contornos de nanquim (borda preta grossa) e sombras chapadas.
   Regra: cores, fontes e sombras só via tokens abaixo. Nada de estilo inline.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    /* Cores da marca */
    --orange-deep: #e65100;      /* fundo da página */
    --orange: #f58220;           /* ação principal */
    --orange-light: #ff9900;     /* pelo do Garfield / logo */
    --orange-hover: #ffa447;
    --ink: #111111;              /* contornos e sombras */
    --paper: #fff5d1;            /* papel de gibi (cards) */
    --paper-ink: #3b3024;        /* texto sobre papel */
    --surface: #1b1b1b;          /* painéis escuros */
    --surface-2: #262626;
    --line: #3a3a3a;
    --text: #ffffff;
    --text-muted: #e2d8cc;
    --danger: #d32f2f;
    --danger-light: #ff6b6b;
    --caution: #ffcc00;
    --focus: #ffcf5c;
    --caption: #ffe14d;          /* recordatório de gibi */

    /* Retícula (pontinhos de gráfica) por cima das cores chapadas */
    --halftone: radial-gradient(circle, rgba(17, 17, 17, 0.09) 1px, transparent 1.6px) 0 0 / 7px 7px;
    --halftone-forte: radial-gradient(circle, rgba(17, 17, 17, 0.22) 1.2px, transparent 1.8px) 0 0 / 6px 6px;
    /* Contorno de explosão de onomatopeia (clip-path) */
    --estouro: polygon(50% 0%, 60% 17%, 80% 6%, 77% 29%, 100% 33%, 83% 50%, 100% 67%, 77% 71%, 80% 94%, 60% 83%, 50% 100%, 40% 83%, 20% 94%, 23% 71%, 0% 67%, 17% 50%, 0% 33%, 23% 29%, 20% 6%, 40% 17%);

    /* Pódio do ranking */
    --gold: #ffd54a;
    --silver: #e3e3e3;
    --bronze: #f0b27a;

    /* Tema Degustador da Noite */
    --purple: #8a2be2;
    --purple-deep: #4b0082;
    --mp5k: #ff6600;

    /* Tipografia: Bangers (títulos), Comic Neue (texto), Luckiest Guy (só o logo) */
    --font-heading: 'Bangers', 'Luckiest Guy', 'Arial Black', sans-serif;
    --font-sans: 'Comic Neue', 'Trebuchet MS', sans-serif;
    --font-logo: 'Luckiest Guy', 'Bangers', 'Arial Black', sans-serif;

    /* Contorno e sombra "de gibi" */
    --stroke: 3px solid var(--ink);
    --stroke-thick: 4px solid var(--ink);
    --pop-sm: 2px 2px 0 var(--ink);
    --pop: 4px 4px 0 var(--ink);
    --pop-lg: 6px 6px 0 var(--ink);
    --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.45);

    --radius-sm: 6px;
    --radius: 12px;
    --radius-pill: 999px;

    --reader-page-width: 800px;
    --reader-bar-space: 96px;
    --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--orange-deep);
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.28) 15%, transparent 16%),
        radial-gradient(rgba(0, 0, 0, 0.28) 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: var(--orange-light); text-decoration: none; }

[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------- botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 26px;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--ink);
    background: var(--orange);
    border: var(--stroke);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { background: var(--orange-hover); transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn img { width: 52px; height: 52px; object-fit: contain; }

.btn--dark { background: var(--surface); color: var(--text); }
.btn--dark:hover { background: #000; }
.btn--purple { background: var(--surface); color: var(--text); border-color: var(--purple); box-shadow: 4px 4px 0 var(--purple); }
.btn--purple:hover { background: #000; box-shadow: 6px 6px 0 var(--purple); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #f44336; }
.btn--muted { background: #555; color: #fff; }
.btn--muted:hover { background: #666; }
.btn--small { font-size: 1.15rem; padding: 6px 16px; }

/* Voltar (páginas internas) */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 1px;
    color: var(--text);
    background: var(--surface);
    border: var(--stroke);
    border-radius: var(--radius-pill);
    box-shadow: var(--pop-sm);
    transition: transform 0.15s ease;
}
.back-link:hover { color: var(--text); transform: translate(-1px, -1px); }

/* ------------------------------------------------------------------ logo */
.logo-link { display: inline-block; color: inherit; }

/* Logo: letras com pelo listrado, brilho e extrusão; o Enzo espia por trás
   de "ENZO" (olhos seguem o mouse, js/site.js) e o rabo sai do "S".
   Entrada: letras caem uma a uma; depois (.logo-ready) pulinhos de vez em quando. */
.garfield-classic-logo {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-logo);
    font-weight: 400;
    font-size: clamp(2.7rem, 12vw, 6rem);
    line-height: 1.1;
    padding: 1em 0.45em 0.12em 0.1em;
    white-space: nowrap;
    cursor: pointer;
}

.garfield-classic-logo .char {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 0.09em var(--ink);
    /* extrusão 3D: miolo marrom e borda de nanquim */
    text-shadow:
        -0.012em 0.012em 0 #7a2e00, -0.024em 0.024em 0 #7a2e00, -0.036em 0.036em 0 #7a2e00,
        -0.048em 0.048em 0 #7a2e00, -0.06em 0.06em 0 #7a2e00, -0.072em 0.072em 0 #7a2e00,
        -0.084em 0.084em 0 #7a2e00, -0.096em 0.096em 0 var(--ink), -0.108em 0.108em 0 var(--ink),
        -0.12em 0.12em 0 var(--ink);
}
/* Pelo: degradê laranja com listras de gato */
.garfield-classic-logo .char::after,
.garfield-classic-logo .char::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 0;
    text-shadow: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.garfield-classic-logo .char::after {
    z-index: 2;
    background-image:
        repeating-linear-gradient(100deg, transparent 0 0.24em, rgba(120, 38, 0, 0.45) 0.24em 0.3em),
        linear-gradient(#ffc740, #ff9900 52%, #ee7410);
}
/* Brilho de plástico no topo + faixa de luz que atravessa no hover */
.garfield-classic-logo .char::before {
    z-index: 3;
    background-image:
        linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.75) 0 16%, rgba(255, 255, 255, 0) 30%);
    background-size: 300% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
    background-repeat: no-repeat;
}

.garfield-classic-logo .c1 { --i: 0; z-index: 10; transform: rotate(-3deg); }
.garfield-classic-logo .c2 { --i: 1; z-index: 9; transform: translateY(0.07em) rotate(2deg) scale(0.95); margin-left: -0.045em; }
.garfield-classic-logo .c3 { --i: 2; z-index: 8; transform: translateY(-0.045em) rotate(-2deg); margin-left: -0.07em; }
.garfield-classic-logo .c4 { --i: 3; z-index: 7; transform: translateY(0.035em) rotate(4deg); margin-left: -0.09em; }
.garfield-classic-logo .space { width: 0.22em; }
.garfield-classic-logo .c5 { --i: 4; z-index: 5; transform: translateY(-0.05em) rotate(-3deg); }
.garfield-classic-logo .c6 { --i: 5; z-index: 4; transform: translateY(0.045em) rotate(2deg); margin-left: -0.13em; }
.garfield-classic-logo .c7 { --i: 6; z-index: 3; transform: translateY(-0.025em) rotate(-1deg); margin-left: -0.045em; }
.garfield-classic-logo .c8 { --i: 7; z-index: 2; transform: translateY(0.05em) rotate(3deg); margin-left: -0.09em; }
.garfield-classic-logo .c9 { --i: 8; z-index: 1; transform: rotate(-2deg); margin-left: -0.11em; }

/* O Enzo (cabeça de óculos e barba) espiando atrás de "ENZO" */
.logo-cat {
    position: absolute;
    z-index: 1;
    left: 0.42em;
    top: 0;
    width: 1.62em;
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
    transform-origin: 50% 90%;
    filter: drop-shadow(-0.03em 0.04em 0 rgba(0, 0, 0, 0.35));
    animation: cat-peek 0.6s var(--ease-pop) 0.85s both, cat-tilt 8s ease-in-out 3s infinite;
}
.garfield-classic-logo:hover .logo-cat { animation: cat-peek 0.6s var(--ease-pop) 0.85s both, cat-tilt 1.2s ease-in-out infinite; }

/* Rabo listrado saindo do "S" */
.logo-tail {
    position: absolute;
    z-index: 0;
    right: -0.02em;
    bottom: 0.28em;
    width: 0.62em;
    height: auto;
    overflow: visible;
    transform-origin: 8% 92%;
    animation: tail-in 0.4s ease-out 1.05s both, tail-wag 1.3s ease-in-out infinite alternate;
}

/* Entrada: letras caem uma a uma */
.garfield-classic-logo:not(.logo-ready) .char { animation: logo-drop 0.7s var(--ease-pop) both; animation-delay: calc(var(--i) * 70ms); }
/* Depois: uma onda de pulinhos a cada 7 s; no hover, onda rápida e brilho */
.garfield-classic-logo.logo-ready .char { animation: logo-hop 7s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
.garfield-classic-logo.logo-ready:hover .char { animation: logo-hop-fast 0.55s ease-in-out both; animation-delay: calc(var(--i) * 45ms); }
.garfield-classic-logo:hover .char::before { background-position: -100% 0, 0 0; transition: background-position 0.7s ease; }
.garfield-classic-logo:hover .logo-tail { animation-duration: 0.4s, 0.35s; }
.garfield-classic-logo:active .char { scale: 0.94 1.06; }

@keyframes logo-drop {
    0% { translate: 0 -1.3em; scale: 1.15 0.75; opacity: 0; }
    55% { translate: 0 0.08em; scale: 0.9 1.12; opacity: 1; }
    78% { translate: 0 -0.05em; scale: 1.06 0.95; }
    100% { translate: 0 0; scale: 1 1; opacity: 1; }
}
@keyframes logo-hop {
    0%, 9%, 100% { translate: 0 0; }
    3% { translate: 0 -0.13em; }
    6% { translate: 0 0.02em; }
}
@keyframes logo-hop-fast {
    0%, 100% { translate: 0 0; }
    40% { translate: 0 -0.16em; }
    75% { translate: 0 0.03em; }
}
@keyframes cat-peek {
    from { translate: 0 0.55em; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
}
@keyframes cat-tilt {
    0%, 86%, 100% { rotate: 0deg; }
    90% { rotate: -7deg; }
    95% { rotate: 4deg; }
}
@keyframes tail-in { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes tail-wag { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }

/* --------------------------------------------------------- cabeçalho */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 34px 20px 10px;
    text-align: center;
}
.site-header--inner { position: relative; padding-top: 70px; }
.site-header--inner .back-link { position: absolute; top: 20px; left: 20px; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.site-nav a {
    padding: 4px 16px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: var(--text);
    background: var(--surface);
    border: var(--stroke);
    border-radius: var(--radius-pill);
    box-shadow: var(--pop-sm);
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.site-nav a:hover { background: #000; color: var(--orange-light); transform: translateY(-2px); }

/* ---------------------------------------------------------- seções */
.section { padding: 34px 0 10px; }

.section-title {
    margin-bottom: 22px;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 3px 3px 0 var(--ink);
}
.section-title--center { text-align: center; }

.page-title {
    margin: 10px 0 34px;
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 9vw, 4rem);
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--ink);
}

/* ------------------------------------------------------------ hero */
.hero { padding: 14px 0 0; }

.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 380px;
    overflow: hidden;
    color: var(--text);
    background: var(--surface);
    border: var(--stroke-thick);
    border-radius: var(--radius);
    box-shadow: var(--pop-lg);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-banner:hover { transform: translate(-2px, -3px); box-shadow: 9px 10px 0 var(--ink); }

.hero-bg {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.35) saturate(1.2);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    padding: 36px 44px;
}

.hero-cover-wrapper {
    flex: 0 0 auto;
    width: 240px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: var(--stroke);
    border-radius: var(--radius-sm);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.55);
    transform: rotate(-3deg);
    transition: transform 0.3s var(--ease-pop);
    background: #000;
}
.hero-banner:hover .hero-cover-wrapper { transform: rotate(0deg) scale(1.03); }

.hero-cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hero-text { flex: 1; min-width: 0; }

.hero-kicker {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 12px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    color: var(--ink);
    background: var(--caution);
    border: 2px solid var(--ink);
    box-shadow: var(--pop-sm);
    transform: rotate(-2deg);
}

.hero-text h2 {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 1px;
    text-shadow: 3px 3px 0 var(--ink);
}

.hero-text p {
    max-width: 46ch;
    margin-bottom: 22px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Estado "sem lançamento" */
.hero-banner-placeholder { cursor: default; justify-content: center; }
.hero-banner-placeholder:hover { transform: none; box-shadow: var(--pop-lg); }
.hero-bg.is-muted { background: var(--surface-2); filter: none; }
.hero-content.is-centered, .hero-text.is-centered { justify-content: center; text-align: center; }
.hero-text.is-centered p { margin-inline: auto; }

/* ------------------------------------------------ estante 3D de gibis
   Montada por js/shelf.js. Todo gibi tem o mesmo tamanho (--book-w, 9:16);
   quantos cabem por prateleira depende da largura, e novas prateleiras
   aparecem sozinhas conforme a coleção cresce. */
.bookcase {
    --book-w: clamp(120px, 38vw, 230px);
    --book-h: calc(var(--book-w) * 16 / 9);
    --book-d: calc(var(--book-w) * 0.12);   /* espessura do gibi */
    --shelf-gap: clamp(14px, 3vw, 38px);
    --pad: clamp(14px, 3vw, 40px);
    position: relative;
    padding: 36px var(--pad) 8px;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 196, 120, 0.22), transparent 60%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 3px, transparent 3px 150px),
        linear-gradient(#3d2314, #221209);
    border: var(--stroke-thick);
    border-radius: var(--radius);
    box-shadow: var(--pop-lg), inset 0 0 60px rgba(0, 0, 0, 0.8);
}
.bookcase > .loading, .bookcase > .home-error { margin: 0 auto 28px; }

.shelf-row { position: relative; margin-bottom: 30px; }

.shelf-books {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), var(--book-w));
    gap: 0 var(--shelf-gap);
    justify-content: center;
    perspective: 1700px;
    perspective-origin: var(--vx, 50%) 20%;
}

.shelf-book {
    position: relative;
    width: var(--book-w);
    transform-style: preserve-3d;
    cursor: pointer;
    outline-offset: 8px;
}

/* Sombra do gibi sobre a prateleira */
.shelf-book::before {
    content: '';
    position: absolute;
    left: 4%;
    width: 110%;
    top: calc(var(--book-h) - 10px);
    height: 18px;
    background: radial-gradient(ellipse at 45% 50%, rgba(0, 0, 0, 0.65), transparent 70%);
    pointer-events: none;
}

.book {
    position: relative;
    width: var(--book-w);
    height: var(--book-h);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    /* Pose de repouso: levemente virado, mostrando lombada e topo */
    transform: translateZ(var(--lift, 0px)) rotateX(var(--rx, -5deg)) rotateY(var(--ry, 16deg));
    transition: transform 0.55s var(--ease-pop);
    will-change: transform;
}
.shelf-book.is-active .book { --lift: 34px; transition: transform 0.1s linear; }
.shelf-book:focus-visible .book { --lift: 26px; --ry: 0deg; --rx: 0deg; }

.book-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.book-front {
    inset: 0;
    overflow: hidden;
    background: #000;
    border: 2px solid var(--ink);
    border-radius: 2px 5px 5px 2px;
    transform: translateZ(calc(var(--book-d) / 2));
}
.book-back {
    inset: 0;
    background: #7a2e0a;
    border: 2px solid var(--ink);
    transform: rotateY(180deg) translateZ(calc(var(--book-d) / 2));
}
.book-spine {
    top: 0;
    left: 0;
    width: var(--book-d);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(90deg, #6d2808, #c9581b 45%, #8a3510);
    border: 2px solid var(--ink);
    transform-origin: left center;
    transform: translateZ(calc(var(--book-d) / -2)) rotateY(-90deg);
}
.book-spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-heading);
    font-size: calc(var(--book-d) * 0.62);
    letter-spacing: 1px;
    white-space: nowrap;
    color: #ffd27a;
}
.book-pages {
    top: 2px;
    right: 0;
    width: var(--book-d);
    height: calc(100% - 4px);
    background: repeating-linear-gradient(90deg, #f6eedb 0 1px, #d6c9aa 1px 2px);
    border: 1px solid var(--ink);
    transform-origin: right center;
    transform: translateZ(calc(var(--book-d) / -2)) rotateY(90deg);
}
.book-top {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--book-d);
    background: repeating-linear-gradient(0deg, #f6eedb 0 1px, #d6c9aa 1px 2px);
    border: 1px solid var(--ink);
    transform-origin: top center;
    transform: translateZ(calc(var(--book-d) / -2)) rotateX(90deg);
}

.book-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    user-select: none;
}

/* Brilho holográfico: arco-íris que corre pela capa seguindo o mouse */
.book-foil {
    position: absolute;
    inset: 0;
    z-index: 12;
    background: linear-gradient(115deg,
        transparent 22%,
        rgba(255, 0, 170, 0.6) 36%,
        rgba(0, 255, 230, 0.6) 45%,
        rgba(255, 240, 0, 0.55) 54%,
        rgba(130, 80, 255, 0.6) 63%,
        transparent 78%);
    background-size: 300% 300%;
    background-position: var(--mx, 50%) var(--my, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.shelf-book.is-active .book-foil { opacity: 0.6; }

/* Reflexo de capa plastificada */
.book-glare {
    position: absolute;
    inset: 0;
    z-index: 13;
    background: radial-gradient(circle at var(--mx, 25%) var(--my, 15%), rgba(255, 255, 255, 0.6), transparent 55%);
    mix-blend-mode: overlay;
    opacity: 0.4;
    pointer-events: none;
}

.book-badge {
    position: absolute;
    bottom: 8px;
    right: 6px;
    z-index: 14;
    padding: 0 7px;
    font-family: var(--font-heading);
    font-size: clamp(0.8rem, 2.4vw, 1.1rem);
    letter-spacing: 1px;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: var(--pop-sm);
    transform: rotate(-6deg);
}
.book-badge.is-new { background: var(--caution); }

/* Prateleira de madeira: tampo em perspectiva + frente com veios */
.shelf-plank {
    position: absolute;
    z-index: 1;
    left: calc(var(--pad) * -1);
    right: calc(var(--pad) * -1);
    top: calc(var(--book-h) - 12px);
    height: 40px;
    pointer-events: none;
}
.shelf-plank::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 17px;
    background: linear-gradient(#e0a86c, #b3733a);
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
}
.shelf-plank::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
    height: 23px;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 29px),
        linear-gradient(#a0602a, #6b3914);
    border-block: 3px solid var(--ink);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.6);
}
.shelf-label {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 20px;
    padding: 0 10px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 1px;
    line-height: 1.35;
    color: var(--ink);
    background: linear-gradient(#f4d98a, #c99a3c);
    border: 2px solid var(--ink);
    border-radius: 3px;
    transform: translateX(-50%);
}

.book-caption { margin-top: 46px; }
.book-caption small {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 2.6vw, 1.15rem);
    letter-spacing: 1px;
    color: var(--orange-light);
}
.book-caption h3 {
    min-height: 2.5em;
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 2.6vw, 1.05rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sem mouse (celular): o holográfico passeia sozinho pela capa */
@media (hover: none) {
    .book-foil { opacity: 0.28; animation: foil-drift 7s linear infinite; }
    .shelf-book:nth-child(2n) .book-foil { animation-delay: -3s; }
    .shelf-book:active .book { --ry: 0deg; --rx: 0deg; --lift: 20px; }
}
@keyframes foil-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Edição especial com efeito glitch (Capítulo 2) */
.glitch-card .book-front { animation: signal-loss 2s infinite; }
.glitch-card .book-cover { animation: glitch-skew 1.5s infinite linear alternate-reverse; }
.glitch-card .comic-cover-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 10;
    pointer-events: none;
    animation: eye-swap 15s infinite;
}
.glitch-card .book-caption h3, .glitch-card .book-caption small { animation: text-glitch 2s infinite; }

.glitch-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-blend-mode: multiply;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 5;
}
.glitch-layer.cyan { background-color: cyan; animation: cyber-glitch-1 0.4s infinite steps(1); }
.glitch-layer.red { background-color: red; animation: cyber-glitch-2 0.5s infinite steps(1); }

.glitch-noise {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    opacity: 0.15;
    mix-blend-mode: overlay;
    animation: noise-move 0.1s infinite;
    pointer-events: none;
}

@keyframes signal-loss {
    0%, 94%, 100% { opacity: 1; filter: none; }
    95% { opacity: 0.1; filter: grayscale(1) brightness(3); }
    96% { opacity: 0.8; filter: grayscale(0.5) brightness(0.5); }
    97% { opacity: 0.2; filter: grayscale(1) brightness(0.2); }
    98% { opacity: 0.9; filter: grayscale(0.8) brightness(2); }
}
@keyframes eye-swap { 0%, 66% { opacity: 0; } 66.1%, 100% { opacity: 1; } }
@keyframes glitch-skew {
    0%, 90%, 98%, 100% { transform: skew(0deg); }
    92% { transform: skew(5deg); filter: contrast(150%); }
    94% { transform: skew(-5deg); filter: invert(10%); }
    96% { transform: skew(2deg); filter: contrast(120%); }
}
@keyframes cyber-glitch-1 {
    0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(-3px, 1px); }
    20% { clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%); transform: translate(-3px, 2px); }
    40% { clip-path: polygon(0 80%, 100% 80%, 100% 88%, 0 88%); transform: translate(-3px, 1px); }
    60% { clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); transform: translate(-3px, 2px); }
    80% { clip-path: polygon(0 70%, 100% 70%, 100% 72%, 0 72%); transform: translate(-3px, 1px); }
    100% { clip-path: polygon(0 30%, 100% 30%, 100% 32%, 0 32%); transform: translate(-3px, 2px); }
}
@keyframes cyber-glitch-2 {
    0% { clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); transform: translate(3px, -1px); }
    20% { clip-path: polygon(0 50%, 100% 50%, 100% 52%, 0 52%); transform: translate(3px, -2px); }
    40% { clip-path: polygon(0 90%, 100% 90%, 100% 92%, 0 92%); transform: translate(3px, -1px); }
    60% { clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%); transform: translate(3px, -2px); }
    80% { clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%); transform: translate(3px, -1px); }
    100% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); transform: translate(3px, -2px); }
}
@keyframes noise-move {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 5px); }
    50% { transform: translate(5px, -5px); }
    75% { transform: translate(-5px, -5px); }
}
@keyframes text-glitch {
    0%, 10% { text-shadow: 2px 0 red, -2px 0 cyan; }
    5% { text-shadow: -2px 0 red, 2px 0 cyan; }
    15%, 100% { text-shadow: none; }
}

.home-error {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    color: #8e1c1c;
    background: #ffebee;
    border: var(--stroke);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop);
}
.home-error h3 { margin-bottom: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 1.6rem; letter-spacing: 1px; }
.home-error .btn { margin-top: 12px; }
.home-error-detail { margin-top: 8px; font-size: 0.9rem; opacity: 0.8; }

/* ---------------------------------------------- universo (atalhos) */
.universe-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.universe-links .btn { font-size: 1.7rem; padding: 12px 26px; }

/* Mapa do mundo (home): áreas clicáveis invisíveis por cima da imagem */
.mapa-mundo {
    position: relative;
    max-width: 1140px;
    margin: 18px auto 0;
    line-height: 0;
    border: var(--stroke-thick);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--pop);
}
.mapa-mundo-img { display: block; width: 100%; height: auto; }
.mapa-area { position: absolute; display: block; border-radius: 14px; transition: background-color 0.2s, box-shadow 0.2s; }
.mapa-area:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.mapa-area:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.mapa-area--redonda { border-radius: 50%; }

/* ------------------------------------------------------ rodapé / PIX */
.site-footer {
    margin-top: 70px;
    padding: 40px 20px 26px;
    background: var(--surface);
    border-top: var(--stroke-thick);
}

.donation-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    background: #0d0d0d;
    border: var(--stroke-thick);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--orange);
}
.donation-mascot {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border: var(--stroke);
    border-radius: 50%;
    background: var(--orange);
}
.donation-text { flex: 1; min-width: 220px; }
.donation-text h2 {
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 2.1rem;
    letter-spacing: 1.5px;
    line-height: 1.1;
    color: var(--orange);
    text-shadow: var(--pop-sm);
}
.donation-text p { margin-bottom: 14px; font-weight: 700; }
.pix-copy-btn { font-size: 1.2rem; padding: 8px 18px; }
.donation-qr {
    width: 124px;
    height: 124px;
    padding: 5px;
    background: #fff;
    border: var(--stroke);
    border-radius: var(--radius-sm);
}
#pix-code { width: 100%; min-height: 90px; margin-top: 12px; padding: 8px; font-family: monospace; }

.site-credits {
    margin-top: 26px;
    font-size: 0.95rem;
    text-align: center;
    color: #a89f94;
}

/* ================================================================ leitor */
.reader-mode { overflow: hidden; }

.reader-ui { position: relative; display: flex; flex-direction: column; height: 100dvh; }

/* ---------------------------------------------- Leitor: tira do topo
   Cada grupo de controles é um quadro de gibi: papel com retícula, contorno
   de nanquim, sombra chapada e uma leve inclinação, como quadros colados. */
.floating-ui-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    pointer-events: none;
}

.floating-island {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 6px 10px;
    background: var(--halftone), var(--paper);
    border: var(--stroke);
    border-radius: 3px;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform 0.3s var(--ease-pop), opacity 0.3s ease;
}
.island-left { transform: rotate(-0.8deg); }
.island-right { transform: rotate(0.8deg); }
.ui-hidden .floating-ui-container .floating-island { transform: translateY(-160%); opacity: 0; pointer-events: none; }

/* Cabeça do Enzo: volta para a coleção do gibi */
.tira-casa {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: var(--halftone-forte), var(--orange-light);
    border: var(--stroke);
    border-radius: 50%;
    box-shadow: var(--pop-sm);
    cursor: pointer;
    transition: transform 0.15s var(--ease-pop);
}
.tira-casa img { width: 40px; height: auto; margin-top: 2px; pointer-events: none; }
.tira-casa:hover { transform: rotate(-8deg) scale(1.08); }

/* Recordatório amarelo com o capítulo (o <select> fica dentro, sem cara de formulário) */
.tira-recordatorio {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 3px 34px 4px 10px;
    background: var(--caption);
    border: 2px solid var(--ink);
    box-shadow: var(--pop-sm);
    cursor: pointer;
}
.tira-recordatorio::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    border: 7px solid transparent;
    border-top: 9px solid var(--ink);
    border-bottom: 0;
    transform: translateY(-30%);
    pointer-events: none;
}
.tira-recordatorio-sobre {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--paper-ink);
}
.island-select {
    min-width: 0;
    max-width: 340px;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    letter-spacing: 1px;
    line-height: 1.15;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    cursor: pointer;
}
.tira-recordatorio:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.island-select option { font-family: var(--font-sans); color: var(--paper-ink); background: var(--paper); }

/* Botões − / + / tela cheia: quadradinhos de nanquim */
.tira-botao {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    font-family: var(--font-sans);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    background: var(--text);
    border: 2px solid var(--ink);
    border-radius: 3px;
    box-shadow: var(--pop-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.tira-botao:hover { background: var(--caption); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.tira-botao:active,
.tira-balao:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.tira-botao:focus-visible,
.tira-balao:focus-visible,
.tira-casa:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Tela cheia: uma moldura de quadro com as quatro quinas */
.tira-moldura span {
    position: relative;
    width: 20px;
    height: 16px;
    background:
        linear-gradient(var(--ink), var(--ink)) top left / 7px 3px,
        linear-gradient(var(--ink), var(--ink)) top left / 3px 7px,
        linear-gradient(var(--ink), var(--ink)) top right / 7px 3px,
        linear-gradient(var(--ink), var(--ink)) top right / 3px 7px,
        linear-gradient(var(--ink), var(--ink)) bottom left / 7px 3px,
        linear-gradient(var(--ink), var(--ink)) bottom left / 3px 7px,
        linear-gradient(var(--ink), var(--ink)) bottom right / 7px 3px,
        linear-gradient(var(--ink), var(--ink)) bottom right / 3px 7px;
    background-repeat: no-repeat;
}

/* Zoom: porcentagem num balão de fala */
.tira-balao {
    position: relative;
    min-width: 64px;
    padding: 5px 10px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--text);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
}
.tira-balao::after {
    content: '';
    position: absolute;
    left: 12px;
    bottom: -8px;
    width: 12px;
    height: 10px;
    background: var(--text);
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: skewX(-35deg);
}

/* Degustador: a mesma tira, na noite roxa */
.theme-degustador .floating-island { background: var(--halftone), var(--surface); box-shadow: 5px 5px 0 var(--purple); }
.theme-degustador .tira-casa { background: var(--halftone-forte), var(--purple); }
.reader-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--reader-bar-space) 16px 20px;
}

.image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-inline: auto;
}
.reader-viewport.zoomed .image-container { align-items: flex-start; }

.page-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto 16px;
    container-type: inline-size;
}
.page-wrapper.cover-wrapper { margin-bottom: 26px; }

.webtoon-image {
    display: block;
    width: 100%;
    height: auto;
    border: var(--stroke);
    border-radius: 4px;
    box-shadow: var(--shadow-soft);
}

/* Página deitada: botão para ampliar em tela cheia */
.page-expand-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--caution);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--pop-sm);
}

.page-viewer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    background: #000;
    border: 0;
}
.page-viewer::backdrop { background: #000; }
.page-viewer-scroll { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; }
.page-viewer img { display: block; height: 100%; width: auto; max-width: none; }
.page-viewer .viewer-close { position: fixed; top: 12px; right: 12px; z-index: 2; }
.page-viewer-hint {
    white-space: nowrap;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border-radius: var(--radius-pill);
    pointer-events: none;
}

.next-chapter-container { display: flex; justify-content: center; width: 100%; padding: 30px 0 80px; }
.next-chapter-btn { padding: 8px 10px 8px 24px; cursor: pointer; }
.next-chapter-btn .reader-title { margin-right: 14px; font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: 1px; color: var(--ink); }
.next-chapter-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--ink);
    background: var(--orange);
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: var(--pop-sm);
}

.reader-empty {
    max-width: 520px;
    margin: 60px auto;
    padding: 30px;
    text-align: center;
    background: var(--surface);
    border: var(--stroke-thick);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--orange);
}
.reader-empty h2 { margin-bottom: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 2rem; letter-spacing: 1px; color: var(--orange); }
.reader-error-link { margin-top: 16px; }

/* --------------------------------------------- easter eggs e censura */
.macarronada-hotspot { position: absolute; bottom: 0; left: 20%; width: 60%; height: 30%; z-index: 10; }

.easter-egg-trigger { position: absolute; z-index: 10; }
.easter-egg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-in-out;
    z-index: 11;
}
.easter-egg-image.show-secret { opacity: 1; }

.cabo-coco-mask,
.crime-scene-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 20px, var(--caution) 20px, var(--caution) 40px);
    border: var(--stroke-thick);
    transition: opacity 0.5s ease;
}
.cabo-coco-mask { bottom: 1%; left: 26%; width: 33%; height: 37%; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); }
.crime-scene-overlay { inset: 0; border: 0; border-radius: 3px; }

.cabo-coco-text,
.crime-scene-overlay span {
    display: inline-block;
    max-width: 90%;
    padding: 0.3em 0.6em;
    font-family: var(--font-heading);
    line-height: 1.1;
    text-align: center;
    color: var(--caution);
    background: var(--ink);
    border: 2px solid var(--caution);
    transform: rotate(-10deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.cabo-coco-text { font-size: clamp(12px, 2.8cqi, 24px); }
.crime-scene-overlay span { font-size: 1.9rem; }
.cabo-coco-text small,
.crime-scene-overlay small { display: block; font-size: 0.6em; color: #fff; }

/* Aviso de conquista / leitura: recordatório amarelo com explosão (js/site.js siteToast) */
.achievement-popup {
    position: fixed;
    bottom: -180px;
    left: 50%;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 14px 22px 14px 14px;
    color: var(--ink);
    background: var(--halftone), var(--caption);
    border: var(--stroke-thick);
    box-shadow: 6px 6px 0 var(--ink);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) rotate(-1.5deg);
    transition: bottom 0.5s var(--ease-pop), opacity 0.3s ease;
}
.achievement-popup.show { bottom: 36px; opacity: 1; }
.achievement-burst {
    position: absolute;
    top: -30px;
    left: -20px;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--text);
    background: var(--danger);
    transform: rotate(-8deg);
}
.achievement-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    font-size: 2.2rem;
    background: var(--text);
    border: var(--stroke);
    border-radius: 50%;
}
.achievement-icon .ui-icone { width: 52px; height: 52px; }
.achievement-label { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase; color: var(--danger); }
.achievement-text { max-width: 380px; font-size: 1rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }

/* Transição de macarronada entre páginas (imagem via images.generated.css) */
.macaroni-wipe {
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: 99999;
    background-color: var(--orange);
    background-size: 300px;
    border-block: 25px solid var(--ink);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 -30px 60px rgba(0, 0, 0, 0.8);
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.macaroni-wipe.is-active { transform: translateY(0); }
.macaroni-wipe.is-leaving { transform: translateY(100%); }

/* ----------------------------------------------------- modal de senha */
.password-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}
.password-modal {
    width: min(450px, 100%);
    max-height: 92dvh;
    overflow: auto;
    padding: 30px 26px;
    text-align: center;
    color: #fff;
    background: var(--surface);
    border: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 40px rgba(211, 47, 47, 0.4);
    animation: modalPop 0.3s var(--ease-pop);
}
@keyframes modalPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.password-modal h3 { font-family: var(--font-heading); font-weight: 400; font-size: 2.8rem; letter-spacing: 2px; color: var(--danger); }
.password-modal p { margin: 10px 0 20px; font-size: 1.2rem; line-height: 1.4; }
.password-modal input {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    text-align: center;
    color: var(--caution);
    background: #000;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
}
.password-modal input:focus { border-color: var(--danger); }
.password-error { display: none; margin-bottom: 14px; font-weight: 700; color: var(--danger-light); }
.password-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ------------------------------------------------ galeria de personagens */
.characters-roster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
    gap: 44px 34px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
}
.character-card {
    position: relative;
    padding: 6px;
    background: #fff;
    border: var(--stroke);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-lg);
    cursor: pointer;
    transition: transform 0.35s var(--ease-pop), box-shadow 0.35s ease;
}
.character-card:nth-child(odd) { transform: rotate(-1.2deg); }
.character-card:nth-child(even) { transform: rotate(1.2deg); }
.character-card:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 10px 12px 0 var(--ink); }
.character-card img { display: block; width: 100%; height: auto; border-radius: 3px; }
.character-name {
    display: block;
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-align: center;
    color: var(--ink);
}

.viewer-open { overflow: hidden; }
.character-viewer {
    max-width: 95vw;
    max-height: 95dvh;
    margin: auto;
    padding: 16px;
    color: #fff;
    background: var(--surface);
    border: 3px solid var(--orange);
    border-radius: var(--radius);
}
.character-viewer::backdrop { background: rgba(0, 0, 0, 0.87); }
.character-viewer img { display: block; width: auto; max-width: 88vw; height: auto; max-height: 78dvh; margin: auto; object-fit: contain; }
.character-viewer p { margin-top: 8px; font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: 1px; text-align: center; }
.character-viewer .viewer-close { display: flex; margin: 0 0 12px auto; }

/* ========================================== tema Degustador da Noite */
body.theme-degustador {
    background-color: var(--purple-deep);
}
body.theme-degustador .page-title,
body.theme-degustador .section-title { color: var(--purple); }

.theme-degustador .hero-banner { border-color: var(--purple); background: #1a0033; box-shadow: 6px 6px 0 var(--purple); }
.theme-degustador .hero-banner:hover { box-shadow: 9px 10px 0 var(--purple); }
.theme-degustador .hero-cover-wrapper { border-color: var(--purple); }
.theme-degustador .hero-kicker { background: var(--purple); color: #fff; }
.theme-degustador .hero-banner .btn { background: var(--mp5k); }
.theme-degustador .hero-banner .btn:hover { background: var(--purple); color: #fff; }
.theme-degustador .back-link { border-color: var(--purple); box-shadow: 2px 2px 0 var(--purple); }
.theme-degustador .back-link:hover { background: var(--purple); }

/* Cabeçalho do Degustador: arte com o título (assets/degustador-header.png) */
.batman-title { padding: 0 0 18px; text-align: center; line-height: 0; }
.degustador-header {
    display: block;
    width: min(94vw, 760px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 0 22px rgba(138, 43, 226, 0.45));
    user-select: none;
}
/* Easter egg: o título abre a Degustação Noturna (js/ronda.js) */
.batman-title[data-ronda-trigger] { width: fit-content; margin-inline: auto; border-radius: var(--radius-sm); transition: filter 0.2s, scale 0.2s; }
.batman-title[data-ronda-trigger]:hover { filter: drop-shadow(0 0 14px rgba(255, 140, 0, 0.55)); scale: 1.02; }
.batman-title[data-ronda-trigger]:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }

/* ================================================================ cursores */
body { cursor: url('../assets/cursors/cutlery.svg') 7 3, default; }
body :is(a[href], button, select, [role="button"], [role="link"],
    .shelf-book, .hero-banner, .garfield-classic-logo, .character-card,
    .easter-egg-trigger, .macarronada-hotspot, .cabo-coco-mask, .webtoon-image),
body :is(a[href], button, select, [role="button"], [role="link"],
    .shelf-book, .hero-banner, .garfield-classic-logo, .character-card,
    .easter-egg-trigger, .macarronada-hotspot, .cabo-coco-mask) * {
    cursor: url('../assets/cursors/pasta.svg') 20 20, pointer;
}
body :is(input, textarea, [contenteditable="true"]) { cursor: text; }
body :is(button, select, input):disabled { cursor: not-allowed; }

/* Tema Degustador: MP5K laranja; nos itens clicáveis, com clarão de disparo. */
body.theme-degustador {
    cursor: url('../assets/cursors/mp5k.svg') 2 3, url('../assets/cursors/mp5k.png') 2 3, auto;
}
body.theme-degustador :is(a[href], button, select, [role="button"], [role="link"],
    .shelf-book, .hero-banner, .easter-egg-trigger, .cabo-coco-mask, .webtoon-image, .game-canvas),
body.theme-degustador :is(a[href], button, select, [role="button"], [role="link"],
    .shelf-book, .hero-banner, .easter-egg-trigger, .cabo-coco-mask) * {
    cursor: url('../assets/cursors/mp5k-fogo.svg') 2 3, url('../assets/cursors/mp5k-fogo.png') 2 3, pointer;
}
body.theme-degustador :is(input, textarea, [contenteditable="true"]) { cursor: text; }

/* ============================================================ responsivo */
@media (max-width: 768px) {
    .site-header { padding-top: 22px; }
    .site-header--inner { padding-top: 64px; }
    .site-header--inner .back-link { top: 14px; left: 14px; }

    .hero-banner { min-height: 0; }
    .hero-content { flex-direction: column; gap: 22px; padding: 26px 20px 28px; text-align: center; }
    .hero-cover-wrapper { width: min(50vw, 190px); }
    .hero-text p { margin-inline: auto; }


    .universe-links .btn { width: 100%; font-size: 1.45rem; padding: 10px 16px; }
    .btn img { width: 40px; height: 40px; }

    .donation-container { flex-direction: column; text-align: center; padding: 20px 16px; }
    .donation-text h2 { font-size: 1.7rem; }

    .character-card:nth-child(n) { transform: none; }
}

@media (max-width: 600px) {
    :root { --reader-bar-space: 150px; }
    .floating-ui-container { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
    .floating-island { min-height: 54px; padding: 5px 8px; gap: 6px; max-width: 100%; }
    .island-left { flex: 1 1 100%; min-width: 0; }
    .island-left .tira-recordatorio { flex: 1; }
    .island-left .island-select { width: 100%; max-width: none; font-size: 1.2rem; }
    .island-right { margin-left: auto; }
    .tira-botao { width: 36px; height: 36px; }
    .reader-viewport { padding-inline: 8px; }
    .webtoon-image { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================ animação "entrar no gibi"
   js/comic-open.js: gibi voa da estante, a capa abre e a câmera mergulha. */
.comic-fly { position: fixed; inset: 0; z-index: 99990; pointer-events: all; perspective: 2400px; }
.comic-fly-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(40, 20, 8, 0.8), rgba(0, 0, 0, 0.94));
    opacity: 0;
}
.comic-fly-book {
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    perspective: 2400px;
}
.comic-fly-page,
.comic-fly-cover-front,
.comic-fly-cover-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 3px solid var(--ink);
    border-radius: 3px 8px 8px 3px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.comic-fly-page { background: var(--paper); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.comic-fly img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.comic-fly-cover {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
}
.comic-fly-cover-front { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.comic-fly-cover-back {
    transform: rotateY(180deg);
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 6px),
        var(--paper);
}
.comic-fly img.is-landscape { object-fit: contain; background: #111; }
.comic-fly-flash { position: absolute; inset: 0; background: var(--orange-deep); opacity: 0; pointer-events: none; }
.is-flying-source { visibility: hidden; }

/* Leitor: continuação da entrada, sem a transição de macarronada */
body.enter-from-comic .macaroni-wipe { transition: none; transform: translateY(-100%); }
body.enter-from-comic .reader-viewport { animation: reader-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes reader-enter {
    from { opacity: 0; transform: scale(1.12); }
    to { opacity: 1; transform: none; }
}

/* =============================================== Janela de jogo (easter eggs)
   js/flappy.js: janela em tela cheia aberta pelo logo da home. */
.game-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 16px;
    border: 0;
    background: rgba(10, 6, 3, 0.94);
    color: var(--text);
}
.game-dialog[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.game-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.game-topo { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; min-height: 44px; }
.game-aviso { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; color: var(--caution); text-align: left; }
.game-ranking[hidden] { display: none; }
.game-canvas {
    display: block;
    border: var(--stroke-thick);
    border-radius: var(--radius-sm);
    box-shadow: 6px 6px 0 var(--orange);
    touch-action: none;
    cursor: pointer;
    outline: none;
}
.game-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
body.game-dialog-open { overflow: hidden; }

/* Degustação Noturna no celular: botões PULAR / ↻ / ATIRAR abaixo do jogo */
.ronda-controles {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    width: min(100%, 640px);
    padding: 0 8px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ronda-botao {
    min-height: 72px;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: #fff;
    border: var(--stroke-thick);
    border-radius: var(--radius);
    box-shadow: var(--pop-sm);
    touch-action: none;
    transition: transform 0.06s ease, filter 0.06s ease;
}
.ronda-botao--pular { background: #7b2cbf; }
.ronda-botao--atirar { background: #ff6600; }
.ronda-botao--recarregar { min-width: 64px; background: #2a2a3a; font-size: 1.8rem; }
.ronda-botao.is-apertado { transform: translateY(3px) scale(0.97); filter: brightness(1.25); box-shadow: none; }

/* Caçada ao Inominável: ◀ ▶ ▼ à esquerda, TIRO e PULAR à direita */
.cacada-controles {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 720px);
    padding: 0 8px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.cacada-controles__lado { display: flex; gap: 8px; align-items: stretch; }
.cacada-botao { min-width: 64px; min-height: 76px; padding: 0 10px; }
.cacada-botao[data-tecla="esquerda"], .cacada-botao[data-tecla="direita"] { background: #2a2a3a; font-size: 1.8rem; }
.cacada-botao--baixo { min-width: 48px; background: #1d1d2b; font-size: 1.2rem; }
.cacada-botao[data-tecla="pulo"] { min-width: 96px; }
/* v2 (metroidvania): direcional em cruz + 5 botões de ação */
.cacada-controles--v2 { align-items: center; width: min(100%, 760px); }
.cacada-direcional {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 44px);
    gap: 4px;
}
.cacada-direcional .cacada-botao { min-width: 0; min-height: 0; padding: 0; font-size: 1.3rem; background: #2a2a3a; }
.cacada-direcional [data-tecla="cima"] { grid-column: 2; grid-row: 1; }
.cacada-direcional [data-tecla="esquerda"] { grid-column: 1; grid-row: 2; }
.cacada-direcional [data-tecla="direita"] { grid-column: 3; grid-row: 2; }
.cacada-direcional [data-tecla="baixo"] { grid-column: 2; grid-row: 3; }
.cacada-direcional .cacada-botao--diagonal { font-size: 0.95rem; background: #1f1f2c; opacity: 0.85; }
.cacada-direcional [data-tecla="cima esquerda"] { grid-column: 1; grid-row: 1; }
.cacada-direcional [data-tecla="cima direita"] { grid-column: 3; grid-row: 1; }
.cacada-direcional [data-tecla="baixo esquerda"] { grid-column: 1; grid-row: 3; }
.cacada-direcional [data-tecla="baixo direita"] { grid-column: 3; grid-row: 3; }
.cacada-analogico {
    position: relative;
    width: 160px;
    height: 150px;
    flex: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 50%, rgba(123, 44, 191, 0.18), rgba(123, 44, 191, 0) 70%);
}
.cacada-analogico__base {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 112px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid rgba(230, 214, 255, 0.55);
    background: rgba(20, 10, 40, 0.45);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.cacada-analogico__pino {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid #111;
    background: radial-gradient(circle at 35% 30%, #ffb36b, #ff6600 60%, #b84a00);
    box-shadow: 0 3px 0 #111;
}
.cacada-analogico.is-ativo .cacada-analogico__base { border-color: rgba(255, 210, 63, 0.8); }
.cacada-acoes {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 40px 72px;
    gap: 6px;
}
.cacada-acoes .cacada-botao--menor { min-width: 64px; min-height: 0; font-size: 0.95rem; background: #3a2a55; }
.cacada-acoes [data-tecla="golpe"] { grid-column: 1 / span 2; grid-row: 2; min-height: 0; }
.cacada-acoes [data-tecla="pulo"] { grid-column: 3; grid-row: 2; min-height: 0; }
@media (orientation: landscape) and (pointer: coarse) {
    .cacada-controles--v2 {
        position: fixed;
        inset: auto 0 max(8px, env(safe-area-inset-bottom)) 0;
        width: 100%;
        padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right));
        pointer-events: none;
        z-index: 2;
    }
    .cacada-controles--v2 .cacada-botao { pointer-events: auto; opacity: 0.78; }
    .cacada-controles--v2 { align-items: flex-end; }
    .cacada-controles--v2 .cacada-analogico {
        pointer-events: auto;
        width: 42vw;
        height: 62vh;
        background: none;
        opacity: 0.85;
    }
    .cacada-controles--v2 .cacada-analogico__base { left: 90px; top: calc(100% - 80px); width: 104px; height: 104px; }
    .cacada-controles--v2 .cacada-analogico:not(.is-ativo) .cacada-analogico__base { opacity: 0.6; }
    .cacada-controles--v2 .cacada-direcional { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 38px); }
    .cacada-controles--v2 .cacada-acoes { grid-template-rows: 32px 54px; gap: 5px; }
    .cacada-controles--v2 .cacada-botao--menor { min-width: 54px; font-size: 0.8rem; }
    .cacada-controles--v2 [data-tecla="golpe"], .cacada-controles--v2 [data-tecla="pulo"] { font-size: 1.15rem; min-width: 70px; }
}
@media (max-width: 560px) {
    .cacada-acoes [data-tecla="golpe"], .cacada-acoes [data-tecla="pulo"] { font-size: 1.25rem; }
    .cacada-direcional { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 40px); }
    .cacada-acoes .cacada-botao--menor { min-width: 52px; font-size: 0.8rem; }
    .cacada-controles { gap: 8px; padding: 0 4px; }
    .cacada-controles__lado { gap: 6px; flex: 1; }
    .cacada-botao, .cacada-botao[data-tecla="pulo"] { flex: 1; min-width: 0; padding: 0 4px; font-size: 1.15rem; }
    .cacada-botao--baixo { flex: 0.7; }
}

/* Estante no tema do Degustador: luz roxa, lombadas pretas e roxas, detalhes MP5K */
.theme-degustador .bookcase {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(170, 90, 255, 0.35), transparent 60%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 3px, transparent 3px 150px),
        linear-gradient(#2a1238, #140818);
    border-color: var(--purple);
    box-shadow: 6px 6px 0 var(--purple), inset 0 0 60px rgba(0, 0, 0, 0.8);
}
.theme-degustador .book-spine { background: linear-gradient(90deg, #1a0a26, #4b1f7a 45%, #22102f); }
.theme-degustador .book-spine span { color: var(--mp5k); }
.theme-degustador .book-back { background: #2a1238; }
.theme-degustador .book-badge.is-new { background: var(--mp5k); }
.theme-degustador .book-caption small { color: var(--mp5k); }
.theme-degustador .shelf-label { background: linear-gradient(#c9a6ff, #8a2be2); color: #fff; }
.theme-degustador .comic-fly-flash { background: var(--purple-deep); }

/* Capa fora do 9:16 (js/site.js fitCover): inteira, com a própria capa desfocada atrás */
.cover-letterbox { background: #111; }
.hero-cover-wrapper.cover-letterbox { position: relative; }
.cover-letterbox::before {
    content: '';
    position: absolute;
    inset: -14px;
    background: var(--cover-bg) center / cover no-repeat;
    filter: blur(10px) brightness(0.5) saturate(1.2);
}
.book-front.cover-letterbox > img,
.hero-cover-wrapper.cover-letterbox > img,
.comic-fly .cover-letterbox > img { position: relative; z-index: 1; object-fit: contain; object-position: center; }

/* =============================================================== ZeZoVerso
   zezoverso.html: spin-offs e o Superkid. Tema cósmico (roxo, rosa e ciano). */
body.theme-zezoverso { background: radial-gradient(circle at 20% 10%, #3a1a6b 0%, #120a2a 45%, #07041a 100%) fixed; color: #fff; }
.theme-zezoverso .section-title { color: #fff; text-shadow: 3px 3px 0 #000, 0 0 16px rgba(255, 79, 216, 0.7); }
.theme-zezoverso .back-link { border-color: #ff4fd8; box-shadow: 2px 2px 0 #ff4fd8; }
.zezoverso-title { padding: 0 0 18px; line-height: 0; text-align: center; }
.zezoverso-header { display: block; width: min(94vw, 570px); height: auto; margin-inline: auto; filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35)); }
.theme-zezoverso .section { scroll-margin-top: 16px; }
.theme-zezoverso .characters-roster .character-name { color: var(--text); }


/* ============================ Conta: medalhão, balão de fala e Ficha do Leitor
   js/auth-widget.js. Nada de "menu": o botão é um medalhão de personagem, entrar
   é um balão de fala e a conta abre como uma página de gibi com quadros. */
.site-header { position: relative; }
.conta { position: absolute; top: 18px; right: 20px; z-index: 30; }
.conta[hidden] { display: none; }

/* Ícones de gibi (js/site.js siteIcon): arte de assets/ui ou emoji até ela existir */
.ui-icone { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; line-height: 1; object-fit: contain; vertical-align: middle; }

/* Explosão de onomatopeia (PSST!, CONQUISTA!): contorno feito com drop-shadow */
.conta-balao-estouro,
.achievement-burst,
.ficha-estouro {
    display: inline-grid;
    place-items: center;
    clip-path: var(--estouro);
    filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}

.conta-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s var(--ease-pop);
}
.conta-botao:hover { transform: rotate(-3deg) scale(1.05); }
.conta-botao:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.conta-chave,
.conta-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    overflow: hidden;
    font-size: 1.5rem;
    color: var(--ink);
    background: var(--halftone-forte), var(--orange-light);
    border: var(--stroke);
    border-radius: 50%;
    box-shadow: var(--pop-sm);
}
img.conta-chave { padding: 6px; object-fit: contain; }
.conta-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.conta-inicial { font-family: var(--font-heading); font-size: 1.5rem; }
/* Faixa com o nome (ou ENTRAR) presa atrás do medalhão */
.conta-nome {
    margin-left: -14px;
    padding: 4px 14px 4px 22px;
    background: var(--caption);
    border: var(--stroke);
    box-shadow: var(--pop-sm);
    transform: rotate(-3deg);
}
.conta-botao:not(.conta-botao--logado) .conta-nome { color: var(--text); background: var(--danger); }

/* Deslogado: balão de fala com o botão do Google */
.conta-balao {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(300px, calc(100vw - 32px));
    padding: 24px 18px 16px;
    text-align: center;
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    border-radius: 30px;
    box-shadow: var(--pop);
    animation: balao-pop 0.3s var(--ease-pop) both;
}
/* Rabinho do balão apontando para o medalhão (nanquim por fora, papel por dentro) */
.conta-balao::before,
.conta-balao::after { content: ''; position: absolute; right: 30px; border-style: solid; border-color: transparent; }
.conta-balao::before { top: -20px; border-width: 0 6px 20px 14px; border-bottom-color: var(--ink); }
.conta-balao::after { top: -14px; right: 33px; border-width: 0 4px 15px 10px; border-bottom-color: var(--text); }
.conta-balao-estouro {
    position: absolute;
    top: -26px;
    left: -18px;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: var(--text);
    background: var(--danger);
    transform: rotate(-10deg);
}
.conta-balao-titulo { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: 1px; line-height: 1.05; }
.conta-balao-texto { font-size: 0.85rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.conta-google { display: flex; justify-content: center; min-height: 44px; }
.conta-erro { font-size: 0.85rem; font-weight: 700; color: var(--danger); }
@keyframes balao-pop { from { opacity: 0; transform: scale(0.6) rotate(-4deg); } }

/* Leitor: só o medalhão, dentro do quadro da direita */
.conta.conta--ilha { position: relative; top: auto; right: auto; display: flex; align-items: center; }
.conta--ilha .conta-nome { display: none; }
.conta--ilha .conta-chave,
.conta--ilha .conta-avatar { width: 42px; height: 42px; font-size: 1.25rem; }
.conta--ilha .conta-balao { top: calc(100% + 22px); right: -10px; }

/* --------------------------------------------- Página de gibi (Ficha e Placar)
   <dialog class="pagina-gibi">: papel com retícula, contorno grosso, sombra
   chapada e abertura "virando a página". */
.pagina-gibi {
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: auto;
    color: var(--paper-ink);
    background: var(--halftone), var(--paper);
    border: var(--stroke-thick);
    border-radius: 2px;
    box-shadow: 10px 10px 0 var(--ink);
}
.pagina-gibi[open] { display: flex; flex-direction: column; transform-origin: left center; animation: pagina-virar 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pagina-gibi::backdrop { background: var(--halftone-forte), rgba(10, 6, 3, 0.78); }
@keyframes pagina-virar {
    from { opacity: 0; transform: perspective(1600px) rotateY(-80deg); }
    60% { opacity: 1; }
    to { transform: none; }
}
.pagina-topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 12px;
    background: var(--halftone-forte), var(--orange-light);
    border-bottom: var(--stroke-thick);
}
/* Selo de capa (como o "R$ 5,90 / Nº 3" das capas) */
.pagina-selo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    transform: rotate(-3deg);
}
.pagina-selo-numero { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: 1px; }
.pagina-sobre { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.pagina-manchete {
    font-family: var(--font-logo);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--caption);
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--ink);
}
.pagina-fechar {
    align-self: start;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--text);
    background: var(--danger);
    border: var(--stroke);
    border-radius: 50%;
    box-shadow: var(--pop-sm);
    cursor: pointer;
    transform: rotate(8deg);
    transition: transform 0.15s var(--ease-pop);
}
.pagina-fechar:hover { transform: rotate(-8deg) scale(1.08); }
.pagina-fechar:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pagina-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 14px; }
.pagina-continua {
    padding: 4px 12px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--caption);
    border: var(--stroke);
    transform: rotate(-1deg);
}

/* Quadros da ficha: a página branca entre eles faz a calha do gibi */
.ficha-grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; padding: 14px; }
.quadro { position: relative; min-width: 0; padding: 34px 14px 14px; background: var(--text); border: var(--stroke); }
.quadro-recordatorio {
    position: absolute;
    top: -2px;
    left: -2px;
    padding: 3px 10px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--caption);
    border: var(--stroke);
}
.quadro-texto { margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.quadro--conquistas,
.quadro--secretos { grid-column: 1 / -1; }

/* Quadro do leitor: retrato + balão de fala + faixa com o nome, em fundo de ação */
.quadro--leitor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
    padding: 16px;
    background: var(--halftone-forte), radial-gradient(circle at 25% 55%, var(--caption), var(--orange-light) 55%, var(--orange));
}
.ficha-retrato {
    position: relative;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    background: var(--paper);
    border: var(--stroke-thick);
    border-radius: 50%;
    box-shadow: var(--pop);
}
.ficha-retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha-retrato .conta-inicial { font-size: 3rem; }
.ficha-fala {
    position: relative;
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    border-radius: 22px;
}
.ficha-fala::before,
.ficha-fala::after { content: ''; position: absolute; border-style: solid; border-color: transparent; }
.ficha-fala::before { left: -17px; bottom: 12px; border-width: 6px 17px 8px 0; border-right-color: var(--ink); }
.ficha-fala::after { left: -11px; bottom: 14px; border-width: 4px 12px 5px 0; border-right-color: var(--text); }
.ficha-nome {
    justify-self: start;
    max-width: 100%;
    padding: 4px 14px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    letter-spacing: 1px;
    line-height: 1.1;
    overflow-wrap: anywhere;
    color: var(--text);
    background: var(--ink);
    box-shadow: 3px 3px 0 var(--danger);
    transform: rotate(-2deg);
}

/* Recordes: o número estoura como onomatopeia */
.ficha-recordes { display: grid; gap: 8px; }
.ficha-recorde { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-recorde-jogo { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; }
.ficha-estouro {
    min-width: 84px;
    padding: 18px 16px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--danger);
    background: var(--caption);
}
.ficha-ranking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 6px 12px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--orange-light);
    border: var(--stroke);
    box-shadow: var(--pop-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ficha-ranking:hover { transform: translate(-1px, -1px); box-shadow: var(--pop); }
.ficha-ranking .ui-icone { font-size: 1.4rem; }

/* Álbum de conquistas: figurinhas coladas (bloqueada = espaço tracejado "cole aqui") */
.figurinhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.figurinha {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--paper);
    border: 2px dashed var(--line);
    border-radius: 6px;
    transform: rotate(var(--giro, 0deg));
}
.figurinha--feita { background: var(--halftone), var(--text); border: var(--stroke); box-shadow: var(--pop-sm); }
.figurinha-arte {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--halftone-forte), var(--silver);
    border: 2px solid var(--ink);
    border-radius: 50%;
}
.figurinha--feita .figurinha-arte { background: var(--halftone-forte), var(--caption); }
.figurinha-icone { width: 46px; height: 46px; font-size: 1.9rem; }
.figurinha:not(.figurinha--feita) .figurinha-icone { opacity: 0.75; }
.figurinha-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.figurinha-titulo { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 1px; line-height: 1.05; color: var(--ink); }
.figurinha-descricao { font-size: 0.78rem; line-height: 1.25; }
.figurinha-barra { height: 10px; margin-top: 2px; overflow: hidden; background: var(--text); border: 2px solid var(--ink); }
.figurinha-barra span {
    display: block;
    width: 0;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--orange) 0 6px, var(--orange-light) 6px 12px);
    transition: width 0.5s ease;
}
.figurinha-conta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }

/* Álbum dos Enzos secretos: vagas numeradas; achado = figurinha colada */
.album-secretos { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; list-style: none; }
.album-vaga {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    background: var(--paper);
    border: 2px dashed var(--line);
    border-radius: 3px;
}
.album-numero { font-family: var(--font-heading); font-size: 0.85rem; color: var(--line); }
.album-vaga--achada { background: var(--halftone-forte), var(--orange-light); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg); }
.album-vaga--achada:nth-child(even) { transform: rotate(2deg); }
.album-vaga--achada .album-numero { position: absolute; right: 3px; bottom: 1px; font-size: 0.7rem; color: var(--ink); }
.album-icone { width: 80%; height: auto; font-size: 1.15rem; }

.ficha-sair {
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--paper-ink);
    background: transparent;
    border: 2px solid var(--paper-ink);
    border-radius: 3px;
    cursor: pointer;
}
.ficha-sair:hover { color: var(--text); background: var(--ink); }
/* Atalho do admin para o terminal (admin.html): de propósito, cara de terminal. */
.ficha-terminal {
    padding: 5px 10px;
    font: 700 0.78rem/1.2 ui-monospace, Consolas, monospace;
    color: #8dffa8;
    background: #020502;
    border: 2px solid var(--paper-ink);
    border-radius: 3px;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(141, 255, 168, .6);
}
.ficha-terminal:hover { background: #0b1f10; }

/* Placar global (ranking), na mesma página de gibi */
.ranking-dialog { width: min(500px, calc(100vw - 24px)); }
.ranking-dialog[open] { gap: 12px; padding: 16px; }
.ranking-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ranking-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-logo);
    font-size: clamp(1.7rem, 5vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--caption);
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--ink);
}
.ranking-trofeu { width: 46px; height: 46px; font-size: 1.9rem; -webkit-text-stroke: 0; text-shadow: none; }
.ranking-abas { display: flex; gap: 8px; }
.ranking-aba {
    flex: 1;
    padding: 6px 10px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    border-radius: 3px;
    cursor: pointer;
}
.ranking-aba[aria-selected="true"] { background: var(--caption); box-shadow: var(--pop-sm); transform: rotate(-1deg); }
.ranking-aba:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ranking-corpo { display: flex; flex-direction: column; gap: 10px; min-height: 120px; overflow-y: auto; }
.ranking-podio,
.ranking-lista { display: grid; gap: 6px; list-style: none; }
.ranking-linha {
    display: grid;
    grid-template-columns: 3em minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--text);
    border: 2px solid var(--ink);
}
.ranking-podio .ranking-linha { padding: 10px 12px; font-size: 1.1rem; border-width: 3px; box-shadow: var(--pop-sm); }
.ranking-linha--1 { background: var(--halftone), var(--gold); transform: rotate(-0.6deg); }
.ranking-linha--2 { background: var(--halftone), var(--silver); }
.ranking-linha--3 { background: var(--halftone), var(--bronze); transform: rotate(0.6deg); }
.ranking-linha--eu { outline: 3px solid var(--danger); outline-offset: -1px; }
.ranking-pos,
.ranking-pontos { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: 1px; }
.ranking-pos { display: grid; place-items: center start; color: var(--ink); }
.ranking-medalha { width: 34px; height: 34px; font-size: 1.6rem; }
.ranking-pontos { color: var(--orange-deep); }
.ranking-nome { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ranking-lista--eu { padding-top: 10px; border-top: 2px dashed var(--ink); }
.ranking-vazio,
.ranking-convite { padding: 8px; font-weight: 700; text-align: center; text-transform: uppercase; }
.ranking-convite { font-size: 0.85rem; }

@media (max-width: 768px) {
    .conta { top: 14px; right: 14px; }
    .game-aviso { font-size: 0.95rem; }
}
@media (max-width: 600px) {
    .site-header .conta-nome { display: none; }
    .ficha-grade,
    .figurinhas { grid-template-columns: minmax(0, 1fr); }
    .pagina-topo { gap: 10px; padding: 12px; }
    .pagina-selo { display: none; }
    .pagina-topo { grid-template-columns: minmax(0, 1fr) auto; }
    .ficha-retrato { width: 84px; height: 84px; }
}


/* Abas da ficha: marcadores de papel logo abaixo da capa */
.pagina-abas { display: flex; gap: 6px; padding: 0 16px; margin-top: -2px; }
.pagina-aba {
    padding: 6px 16px 5px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--paper-ink);
    background: var(--silver);
    border: var(--stroke);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.pagina-aba:hover { transform: translateY(2px); }
.pagina-aba[aria-current="page"] { color: var(--ink); background: var(--caption); box-shadow: var(--pop-sm); }
.pagina-aba:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pagina-corpo { display: flex; flex-direction: column; }
.pagina-voltar {
    align-self: flex-start;
    margin: 12px 14px 0;
    padding: 4px 12px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    box-shadow: var(--pop-sm);
    cursor: pointer;
}

/* Fala do balão: texto do leitor (ou do Enzo) e o modo de edição */
.ficha-fala-texto { overflow-wrap: anywhere; }
.ficha-fala--enzo .ficha-fala-texto::before { content: 'ENZO: '; color: var(--danger); }
.ficha-fala-editar {
    display: block;
    margin: 6px 0 0 auto;
    padding: 2px 8px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--caption);
    border: 2px solid var(--ink);
    cursor: pointer;
}
.ficha-fala-campo {
    width: 100%;
    padding: 4px;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--paper);
    border: 2px dashed var(--ink);
    resize: none;
}
.ficha-fala-campo:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.ficha-fala-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ficha-fala-conta { margin-right: auto; font-size: 0.75rem; }
.ficha-fala-salvar,
.ficha-fala-cancelar {
    padding: 3px 10px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--orange-light);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
}
.ficha-fala-cancelar { background: var(--text); }

/* Leitores do site: cada leitor é um quadrinho clicável */
.leitores { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.leitores-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; list-style: none; }
.leitor-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: left;
    color: var(--paper-ink);
    background: var(--halftone), var(--text);
    border: var(--stroke);
    box-shadow: var(--pop-sm);
    cursor: pointer;
    transform: rotate(var(--giro, 0deg));
    transition: transform 0.15s var(--ease-pop), box-shadow 0.15s ease;
}
.leitor-card:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: var(--pop); }
.leitor-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.leitor-card--eu { background: var(--halftone), var(--caption); }
.leitor-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.leitor-medalhao {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--halftone-forte), var(--orange-light);
    border: var(--stroke);
    border-radius: 50%;
}
.leitor-medalhao { overflow: hidden; }
.leitor-medalhao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leitor-medalhao .conta-inicial { font-size: 1.3rem; }
.leitor-nome { flex: 1; min-width: 0; font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 1px; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.leitor-selo { display: flex; flex-direction: column; align-items: center; padding: 1px 6px; font-size: 0.55rem; font-weight: 700; line-height: 1.1; color: var(--ink); background: var(--text); border: 2px solid var(--ink); }
.leitor-selo strong { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; }
.leitor-fala {
    position: relative;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--text);
    border: 2px solid var(--ink);
    border-radius: 14px;
    overflow-wrap: anywhere;
}
.leitor-fala--vazia { color: var(--line); }
.leitor-numeros { display: flex; gap: 12px; font-family: var(--font-heading); font-size: 1rem; letter-spacing: 1px; color: var(--ink); }
.leitor-numeros .ui-icone { width: 1.4em; height: 1.4em; }
.leitores-mais { align-self: center; width: auto; }
.leitores-mais[hidden] { display: none; }

/* Nome no placar abre a ficha do leitor */
button.ranking-nome { padding: 0; font: inherit; font-weight: 700; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
button.ranking-nome:hover { text-decoration: underline 2px; }
button.ranking-nome:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Leitor: Enzo secreto (área invisível sobre a arte; brilha ao ser achado) */
.enzo-secreto-hotspot { position: absolute; z-index: 10; cursor: pointer; border-radius: 50%; }
.enzo-secreto-hotspot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.enzo-secreto-hotspot.is-found { animation: enzo-secreto-brilho 0.9s ease-out; }
@keyframes enzo-secreto-brilho {
    0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.9); background: rgba(255, 204, 0, 0.45); }
    100% { box-shadow: 0 0 0 36px rgba(255, 204, 0, 0); background: rgba(255, 204, 0, 0); }
}
.easter-egg-trigger.is-found { animation: enzo-secreto-brilho 0.9s ease-out; }

/* ------------------------------------------------------------------
   Cartas dos Leitores (js/comentarios.js): fim de cada capítulo.
   Celular / tela estreita: embaixo do botão "Ler próximo".
   Computador (.fim-capitulo--lado): coluna à direita da última página,
   grudada na tela enquanto a página rola.
   ------------------------------------------------------------------ */
.fim-capitulo { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.fim-capitulo .next-chapter-container { padding-bottom: 30px; }
.cartas { width: 100%; max-width: 640px; margin: 0 auto 80px; color: var(--ink); text-align: left; }
.fim-capitulo--lado .cartas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 28px);
    width: var(--cartas-largura, 340px);
    max-width: none;
    margin: 0;
}
.cartas-painel {
    position: relative;
    padding: 0 14px 14px;
    background: var(--halftone), var(--paper);
    border: var(--stroke-thick);
    box-shadow: var(--pop-lg);
}
.fim-capitulo--lado .cartas-painel {
    position: sticky;
    top: 12px;
    max-height: calc(100dvh - var(--reader-bar-space) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.cartas-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: -3px -3px 12px -17px; }
/* No painel lateral (que rola sozinho) a manchete fica presa no topo. */
.fim-capitulo--lado .cartas-topo { position: sticky; top: 0; z-index: 2; margin-top: 0; padding: 0 0 6px; background: var(--paper); }
.cartas-manchete {
    margin: 0;
    padding: 4px 12px;
    font: 1.35rem/1.1 var(--font-heading);
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--caption);
    border: var(--stroke);
}
.cartas-total:not(:empty) {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    margin: 4px 0 0;
    padding: 0 8px;
    font: 1.1rem/1 var(--font-heading);
    color: var(--text);
    background: var(--danger);
    border: var(--stroke);
    clip-path: var(--estouro);
}

/* Escrever */
.cartas-escrever { margin-bottom: 14px; }
.cartas-convite { margin: 0 0 8px; font-weight: 700; }
.cartas-entrar,
.cartas-enviar,
.cartas-mais {
    padding: 6px 14px;
    font: 1rem/1.1 var(--font-heading);
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--orange-light);
    border: var(--stroke);
    box-shadow: var(--pop-sm);
    cursor: pointer;
}
.cartas-entrar:hover, .cartas-enviar:hover, .cartas-mais:hover { background: var(--orange-hover); }
.cartas-entrar:active, .cartas-enviar:active, .cartas-mais:active { transform: translate(2px, 2px); box-shadow: none; }
.cartas-enviar:disabled, .cartas-mais:disabled { opacity: 0.6; cursor: progress; }
.cartas-form { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; }
.cartas-campo {
    width: 100%;
    min-height: 72px;
    padding: 8px 10px;
    font: 700 0.95rem/1.3 var(--font-sans);
    color: var(--ink);
    background: var(--text);
    border: var(--stroke);
    border-radius: 16px;
    resize: vertical;
}
.cartas-campo:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.cartas-form-rodape { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cartas-contador { margin-right: auto; font-size: 0.75rem; font-weight: 700; color: var(--paper-ink); }
.cartas-erro { grid-column: 1 / -1; margin: 4px 0 0; font-weight: 700; color: var(--danger); }
.cartas-aviso { margin: 4px 0 10px; font-weight: 700; color: var(--paper-ink); }
.cartas-mais { display: block; margin: 12px auto 0; background: var(--text); }

/* Uma carta */
.cartas-lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.carta { position: relative; min-width: 0; }
.carta-medalhao {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    color: var(--ink);
    background: var(--halftone-forte), var(--orange-light);
    border: var(--stroke);
    border-radius: 50%;
}
.carta-medalhao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta-medalhao .conta-inicial { font-size: 1.1rem; }
.carta-cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.carta-autor { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.carta-nome { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.carta-autor:hover .carta-nome { text-decoration: underline; }
.carta--minha .carta-nome { color: var(--orange-deep); }
.carta-data { margin-left: auto; flex-shrink: 0; font-size: 0.75rem; color: var(--paper-ink); }
.carta-balao {
    position: relative;
    margin: 0 0 0 18px;
    padding: 8px 12px;
    font: 700 0.95rem/1.35 var(--font-sans);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--text);
    border: var(--stroke);
    border-radius: 16px;
}
/* Rabinho do balão apontando para o medalhão */
.carta-balao::before,
.carta-balao::after { content: ''; position: absolute; border-style: solid; border-color: transparent; }
.carta-balao::before { left: 8px; top: -14px; border-width: 0 8px 14px 4px; border-bottom-color: var(--ink); }
.carta-balao::after { left: 11px; top: -9px; border-width: 0 5px 10px 2px; border-bottom-color: var(--text); }

/* A tarja: barra preta torta do tamanho da palavra. Nada por baixo dela. */
.carta-tarja {
    display: inline-block;
    width: calc(var(--letras, 5) * 0.62em);
    height: 1.05em;
    margin: 0 1px;
    vertical-align: -0.12em;
    background: var(--ink);
    transform: rotate(-1.5deg) skewX(-6deg);
    user-select: none;
}
.carta-tarja:nth-of-type(even) { transform: rotate(1.2deg) skewX(4deg); }

/* Só admin: faixa em cima da carta */
.carta-admin { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px 18px; }
.carta-acao {
    padding: 2px 8px;
    font: 700 0.72rem/1.4 var(--font-sans);
    text-transform: uppercase;
    color: var(--text);
    background: var(--ink);
    border: 2px solid var(--ink);
    cursor: pointer;
}
.carta-acao:hover { color: var(--ink); background: var(--caption); }
.carta-acao--banir { background: var(--danger); border-color: var(--ink); }
.carta-acao--certeza { color: var(--ink); background: var(--caution); animation: carta-treme 0.3s; }
.carta-acao--salvar { background: var(--orange-deep); }
.carta-acao:disabled { opacity: 0.6; cursor: progress; }
@keyframes carta-treme { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.carta-apagar-minha { padding: 0; font: 700 0.72rem var(--font-sans); color: var(--paper-ink); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.carta-apagar-minha.carta-acao--certeza { color: var(--danger); background: none; }

/* Modo censura: cada palavra é um botão; marcada = tarja */
.carta-censura { margin-left: 18px; }
.carta-censura .carta-balao { margin-left: 0; }
.carta-censura-dica { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; color: var(--danger); }
.carta-palavra { padding: 0 1px; font: inherit; color: inherit; background: none; border: 0; border-radius: 3px; cursor: pointer; }
.carta-palavra:hover { outline: 2px dashed var(--ink); }
.carta-palavra[aria-pressed='true'] { color: var(--text); background: var(--ink); }
.carta-censura-acoes { display: flex; gap: 6px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .carta-acao--certeza { animation: none; } }