/* ==========================================================================
   JoJo Sheet — tema
   ========================================================================== */

:root {
    --ink: #0d0618;
    --deep: #1b0a33;
    --purple: #5b1e9e;
    --violet: #8a2be2;
    --pink: #ff2e88;
    --magenta: #d6006f;
    --gold: #ffcc00;
    --orange: #ff7a00;
    --cyan: #00e0ff;
    --green: #2dff9a;
    --paper: #fff8ec;
    --paper-ink: #22102f;

    /* Tons derivados: acompanham a paleta sorteada ([data-theme] logo abaixo) */
    --bg-mid: color-mix(in srgb, var(--deep) 70%, var(--purple));
    --bg-warm: color-mix(in srgb, var(--deep) 72%, var(--magenta));
    --on-dark: color-mix(in srgb, #fff 82%, var(--violet));
    --on-dark-hi: color-mix(in srgb, #fff 90%, var(--violet));
    --on-dark-mid: color-mix(in srgb, #fff 70%, var(--purple));
    --on-dark-dim: color-mix(in srgb, #fff 60%, var(--purple));
    --muted: color-mix(in srgb, var(--paper-ink) 60%, var(--paper));
    --paper-tint: color-mix(in srgb, var(--violet) 12%, var(--paper));
    --cyan-mid: color-mix(in srgb, var(--cyan) 80%, var(--ink));
    --cyan-deep: color-mix(in srgb, var(--cyan) 55%, var(--ink));

    --font-title: 'Bangers', 'Impact', sans-serif;
    --font-jp: 'Dela Gothic One', 'Bangers', sans-serif;
    --font-body: 'Oswald', 'Arial Narrow', sans-serif;

    --skew: -8deg;
}

/* ---------- Paletas sorteadas (App\Support\Themes) ----------
   Regras para manter tudo legível em qualquer tema:
   - ink/deep: escuros (fundo do site, texto branco por cima)
   - purple/magenta/violet/pink: fortes o bastante para texto branco
   - gold/cyan/green/orange: claros (usados com texto escuro --ink)
   - paper/paper-ink: papel da ficha e o texto dela
   Cores com significado fixo (HP/EST/DUR/ENE, erros, sépia do "To Be Continued") não mudam. */
[data-theme="phantom-blood"] {
    --ink: #120607; --deep: #2b0b0e; --purple: #6e1424; --violet: #a3283c;
    --pink: #d3423f; --magenta: #8f1b2b; --gold: #e0b04f; --orange: #cf6f2c;
    --cyan: #d8c49a; --green: #a8c97f; --paper: #f7edd8; --paper-ink: #2b1511;
}
[data-theme="battle-tendency"] {
    --ink: #04141b; --deep: #0a2b35; --purple: #0f5663; --violet: #1b8a91;
    --pink: #f0582f; --magenta: #b8361c; --gold: #ffb627; --orange: #ff7f11;
    --cyan: #47e3d3; --green: #a2e86a; --paper: #fdf6e8; --paper-ink: #10272d;
}
[data-theme="stardust-crusaders"] {
    --ink: #070a1d; --deep: #111a46; --purple: #273393; --violet: #4c5cd6;
    --pink: #8a4fe0; --magenta: #5b2aa8; --gold: #f2c14e; --orange: #e08a3c;
    --cyan: #ead09a; --green: #62e3b2; --paper: #fbf3e2; --paper-ink: #151b3e;
}
[data-theme="diamond-is-unbreakable"] {
    --ink: #071b20; --deep: #0f3039; --purple: #1d5d6c; --violet: #2b8796;
    --pink: #f25c9b; --magenta: #c9387c; --gold: #ffe066; --orange: #ffa45c;
    --cyan: #8ff0d4; --green: #a8f07c; --paper: #fff6fa; --paper-ink: #1a2b31;
}
[data-theme="golden-wind"] {
    --ink: #13061a; --deep: #2c0d36; --purple: #5c1a70; --violet: #9140b3;
    --pink: #e0399b; --magenta: #a8137a; --gold: #ffd43b; --orange: #ff9f1c;
    --cyan: #8de08a; --green: #4ade80; --paper: #fffaea; --paper-ink: #2b1034;
}
[data-theme="stone-ocean"] {
    --ink: #031426; --deep: #082a4b; --purple: #0d4f7b; --violet: #1f7dbd;
    --pink: #2b8fd8; --magenta: #1660a3; --gold: #c6f36b; --orange: #ffb84d;
    --cyan: #6fe3ff; --green: #4be39a; --paper: #f2faff; --paper-ink: #0b2339;
}
[data-theme="steel-ball-run"] {
    --ink: #150d05; --deep: #3a2110; --purple: #6b3a1b; --violet: #a15a26;
    --pink: #d9692b; --magenta: #a3441d; --gold: #f2c35b; --orange: #ff8c3a;
    --cyan: #8fd3f4; --green: #b8da6e; --paper: #fbf1e1; --paper-ink: #2f1c0e;
}
[data-theme="jojolion"] {
    --ink: #0a1425; --deep: #14284b; --purple: #24427c; --violet: #3d66b3;
    --pink: #f0697d; --magenta: #c94460; --gold: #ffd98a; --orange: #ff9b71;
    --cyan: #b9e6ff; --green: #8fe3c0; --paper: #ffffff; --paper-ink: #14284b;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: #fff;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1.5px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(135deg, var(--deep) 0%, var(--bg-mid) 45%, var(--bg-warm) 75%, var(--deep) 100%) fixed;
    overflow-x: hidden;
}

a { color: inherit; }

/* ---------- ゴゴゴ (menacing) ---------- */
.menacing {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.menacing span {
    position: absolute;
    font-family: var(--font-jp);
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--violet);
    opacity: 0;
    text-shadow: 3px 3px 0 var(--ink);
    animation: menace 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.7s);
}
@keyframes menace {
    0%, 100% { opacity: 0; transform: translateY(20px) scale(.8) rotate(-8deg); }
    20%      { opacity: .35; }
    50%      { opacity: .5; transform: translateY(-20px) scale(1.05) rotate(-4deg); }
    52%      { transform: translate(-2px, -21px) scale(1.05) rotate(-3deg); }
    54%      { transform: translate(2px, -19px) scale(1.05) rotate(-5deg); }
    80%      { opacity: .2; }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem clamp(1rem, 4vw, 3rem);
    background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 85%, transparent));
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 6px 0 var(--pink);
    backdrop-filter: blur(6px);
}

.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.logo-star {
    font-size: 2rem;
    color: var(--gold);
    display: inline-block;
    animation: spin-star 8s linear infinite;
    filter: drop-shadow(0 0 6px var(--gold));
}
.logo:hover .logo-star { animation-duration: .6s; }
@keyframes spin-star { to { transform: rotate(360deg); } }
.logo-text {
    font-family: var(--font-title);
    font-size: 2rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 3px 3px 0 var(--pink);
}
.logo-text em {
    font-style: normal;
    color: var(--gold);
    text-shadow: 3px 3px 0 var(--purple);
}

.site-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.site-nav a {
    font-family: var(--font-title);
    font-size: 1.3rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    padding: .35rem 1rem;
    transform: skewX(var(--skew));
    border: 2px solid transparent;
    transition: background .2s, color .2s, transform .2s;
}
.site-nav a:hover { background: var(--pink); transform: skewX(var(--skew)) translateY(-2px); }
.site-nav a.active { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--pink); }

/* ---------- Main / footer ---------- */
.site-main {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem;
}

.site-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    background: var(--ink);
    border-top: 4px solid var(--pink);
}
.quote {
    margin: 0;
    font-style: italic;
    color: var(--gold);
    font-size: 1.1rem;
    transition: opacity .4s;
}

.tbc {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .9rem;
    font-family: var(--font-title);
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #e9d9a6;
    background: #4b3a23;
    border: 2px solid #e9d9a6;
    animation: tbc-slide 4s ease-in-out infinite;
}
.tbc svg { width: 2.2rem; fill: #e9d9a6; }
@keyframes tbc-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-8px); }
}

/* ---------- Títulos ---------- */
.page-title, .hero-title {
    position: relative;
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    line-height: .95;
    letter-spacing: 3px;
    color: var(--gold);
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 5px 5px 0 var(--pink), 10px 10px 0 var(--purple);
    transform: rotate(-2deg);
}
.page-title { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.page-sub { margin: .8rem 0 2rem; font-size: 1.15rem; color: var(--on-dark); }

.section-title {
    display: inline-block;
    margin: 3rem 0 1rem;
    padding: .2rem 1.2rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 2px;
    background: var(--pink);
    transform: skewX(var(--skew));
    box-shadow: 5px 5px 0 var(--gold);
}

/* ---------- Botões ---------- */
.btn {
    display: inline-block;
    padding: .7rem 1.8rem;
    font-family: var(--font-title);
    font-size: 1.4rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: var(--ink);
    border: 3px solid var(--ink);
    cursor: pointer;
    transform: skewX(var(--skew));
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { transform: skewX(var(--skew)) translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); filter: brightness(1.08); }
.btn:active { transform: skewX(var(--skew)) translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-sm { padding: .35rem 1rem; font-size: 1.1rem; box-shadow: 3px 3px 0 var(--ink); }
.btn-gold { background: var(--gold); }
.btn-pink { background: var(--pink); color: #fff; }
.btn-danger { background: #ff3b3b; color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 var(--pink); }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    right: 1.5rem;
    bottom: 5rem;
    z-index: 50;
    padding: .8rem 1.4rem;
    font-family: var(--font-title);
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--green);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    transform: skewX(var(--skew));
    animation: toast-in .5s cubic-bezier(.2, 1.6, .4, 1), toast-out .4s ease-in 4s forwards;
}
.toast-error { background: #ff3b3b; color: #fff; }
@keyframes toast-in { from { transform: skewX(var(--skew)) translateX(120%); } }
@keyframes toast-out { to { opacity: 0; transform: skewX(var(--skew)) translateY(30px); visibility: hidden; } }

/* ==========================================================================
   Home
   ========================================================================== */
.hero {
    position: relative;
    padding: 4rem 0 3rem;
    text-align: center;
}
.hero-burst {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 900px;
    height: 900px;
    translate: -50% -50%;
    z-index: -1;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--pink) 18%, transparent) 0 6deg, transparent 6deg 14deg);
    mask: radial-gradient(circle, #000 15%, transparent 65%);
    animation: spin-star 60s linear infinite;
}
.hero-kicker {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .2rem 1rem;
    font-size: 1.1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--purple);
    transform: skewX(var(--skew));
}
.hero-title {
    font-size: clamp(4rem, 13vw, 9.5rem);
    animation: hero-pop 1s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes hero-pop {
    from { opacity: 0; transform: rotate(-12deg) scale(.4); }
    to   { opacity: 1; transform: rotate(-2deg) scale(1); }
}
.hero-sub { max-width: 620px; margin: 1.8rem auto 2.2rem; font-size: 1.3rem; color: var(--on-dark-hi); }
.hero-sub strong { color: var(--gold); }
.hero-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

.hero-sfx .sfx {
    position: absolute;
    font-family: var(--font-jp);
    font-size: clamp(2rem, 5vw, 3.6rem);
    color: var(--cyan);
    text-shadow: 3px 3px 0 var(--ink);
    animation: tremble .25s steps(2) infinite;
}
.sfx-1 { left: 0; top: 15%; transform: rotate(-12deg); }
.sfx-2 { right: 0; bottom: 10%; color: var(--pink) !important; transform: rotate(10deg); }
@keyframes tremble {
    0%   { translate: 0 0; }
    50%  { translate: 2px -2px; }
    100% { translate: -2px 1px; }
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.feature-card {
    position: relative;
    overflow: hidden;
    padding: 1.8rem 1.6rem 2.2rem;
    text-decoration: none;
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%);
    transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), box-shadow .25s;
}
.feature-card:hover { transform: rotate(-1.5deg) translateY(-6px) scale(1.02); }
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, .18) 2px, transparent 0) 0 0 / 10px 10px;
    pointer-events: none;
}
.card-pink   { background: linear-gradient(150deg, var(--pink), var(--magenta)); }
.card-purple { background: linear-gradient(150deg, var(--violet), var(--purple)); }
.card-cyan   { background: linear-gradient(150deg, var(--cyan), var(--cyan-deep)); color: var(--ink); }
.feature-num {
    display: inline-block;
    padding: .1rem .7rem;
    font-family: var(--font-title);
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--ink);
    background: var(--gold);
}
.feature-card h2 {
    margin: .7rem 0 .4rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 2.3rem;
    letter-spacing: 1.5px;
    text-shadow: 3px 3px 0 var(--ink);
}
.card-cyan h2 { color: #fff; }
.feature-card p { position: relative; margin: 0; font-size: 1.05rem; }
.feature-pose {
    position: absolute;
    right: -.5rem;
    bottom: -1.5rem;
    font-size: 8rem;
    opacity: .2;
    transition: transform .4s;
}
.feature-card:hover .feature-pose { transform: rotate(25deg) scale(1.2); opacity: .35; }

.banner {
    margin-top: 4rem;
    padding: 2rem;
    text-align: center;
    background: var(--gold);
    color: var(--ink);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--pink);
    transform: rotate(1deg);
}
.banner blockquote { margin: 0; min-height: 2.4em; font-size: 1.5rem; font-weight: 500; transition: opacity .4s; }

/* ==========================================================================
   Escolha de ficha / lista
   ========================================================================== */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 3rem 1.5rem;
    text-decoration: none;
    border: 4px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.choice::after {
    /* Linhas de velocidade */
    content: '';
    position: absolute;
    inset: -50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, .14) 0 4deg, transparent 4deg 12deg);
    opacity: 0;
    transition: opacity .3s;
    animation: spin-star 20s linear infinite;
}
.choice:hover { transform: scale(1.04) rotate(-1deg); }
.choice:hover::after { opacity: 1; }
.choice > * { position: relative; z-index: 1; }
.choice-usuario { background: linear-gradient(160deg, var(--pink), var(--magenta)); }
.choice-stand   { background: linear-gradient(160deg, var(--violet), var(--purple)); }
.choice-icon { font-size: 4rem; filter: drop-shadow(4px 4px 0 var(--ink)); }
.choice-label {
    font-family: var(--font-title);
    font-size: 2.6rem;
    letter-spacing: 2px;
    color: var(--gold);
    text-shadow: 3px 3px 0 var(--ink);
}
.choice-hint { font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; }

.empty { font-size: 1.2rem; color: var(--on-dark); }

.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.2rem;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    border-left: 8px solid var(--pink);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .4);
    transition: transform .2s;
}
.sheet-item:hover { transform: translateX(6px); }
.sheet-item-stand { border-left-color: var(--violet); }
.sheet-item-main { display: grid; text-decoration: none; }
.sheet-item-type { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
.sheet-item-name { font-family: var(--font-title); font-size: 1.7rem; letter-spacing: 1px; }
.sheet-item-date { font-size: .85rem; color: var(--on-dark-dim); }
.sheet-item-actions { display: flex; gap: .8rem; }
.sheet-item-actions form { margin: 0; }

/* ==========================================================================
   Ficha (tela + impressão)
   ========================================================================== */
.sheet-toolbar {
    position: sticky;
    top: 82px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 210mm;
    margin: 0 auto 1.5rem;
    padding: .7rem 1rem;
    background: var(--ink);
    border: 3px solid var(--gold);
    box-shadow: 6px 6px 0 var(--pink);
}
.sheet-toolbar-title {
    flex: 1;
    font-family: var(--font-title);
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    color: var(--gold);
}

.sheet {
    --accent: var(--pink);
    --accent-2: var(--purple);
    position: relative;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 10mm 12mm;
    color: var(--paper-ink);
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--purple) 9%, transparent) 1px, transparent 0) 0 0 / 6px 6px,
        var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 14px 14px 0 var(--ink), 14px 14px 0 4px var(--gold);
    animation: sheet-in .6s cubic-bezier(.2, 1.4, .4, 1);
}
.sheet-stand { --accent: var(--violet); --accent-2: var(--magenta); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px) rotate(1deg); } }

.sheet-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -10mm -12mm 6mm;
    padding: 6mm 12mm 7mm;
    background: linear-gradient(110deg, var(--accent) 0 62%, var(--gold) 62% 64%, var(--accent-2) 64%);
    border-bottom: 3px solid var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.sheet-brand { display: grid; }
.sheet-brand-kicker {
    font-size: 11pt;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
}
.sheet-brand-title {
    font-family: var(--font-title);
    font-size: 32pt;
    letter-spacing: 2px;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 1px var(--ink);
    text-shadow: 3px 3px 0 var(--ink);
}
.sheet-sfx {
    font-family: var(--font-jp);
    font-size: 30pt;
    color: var(--gold);
    text-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-8deg);
    animation: tremble .3s steps(2) infinite;
}

.sheet-grid { display: grid; gap: 5mm; }
.sheet-grid-top { grid-template-columns: 52mm 1fr; margin-bottom: 4mm; }
.sheet-grid-half { grid-template-columns: 1fr 1fr; }
.sheet-block { display: grid; gap: 2.5mm; align-content: start; }
.row { display: flex; gap: 4mm; }
.row > * { flex: 1; }

.sheet-section { margin-bottom: 4mm; break-inside: avoid; }
.sheet-section-title {
    display: inline-block;
    margin: 0 0 2mm;
    padding: .5mm 4mm;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 15pt;
    letter-spacing: 1.5px;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--ink);
    transform: skewX(var(--skew));
    box-shadow: 3px 3px 0 var(--gold);
}

/* Campos */
.field { display: grid; gap: .5mm; min-width: 0; }
.field-label {
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-2);
}
.field-label:empty { display: none; }
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 1mm 1.5mm;
    font-family: var(--font-body);
    font-size: 12pt;
    color: var(--paper-ink);
    background: rgba(255, 255, 255, .6);
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    outline: none;
    transition: background .2s, border-color .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; border-color: var(--accent); box-shadow: 0 3px 0 var(--gold); }
.field textarea {
    resize: vertical;
    border: 2px solid var(--ink);
    line-height: 7mm;
}
.field-lined textarea {
    /* Pauta de caderno */
    background: repeating-linear-gradient(transparent 0 calc(7mm - 1px), color-mix(in srgb, var(--purple) 25%, transparent) calc(7mm - 1px) 7mm), rgba(255, 255, 255, .6);
    background-attachment: local;
}
.field-xl input { font-family: var(--font-title); font-size: 22pt; letter-spacing: 1px; }
.field-sm { flex: 0 0 22mm !important; }

input[type=number] { -moz-appearance: textfield; }
.print-only { display: none !important; }
.warn { color: #c40045; font-weight: 700; }
.invalid input, .invalid select, input.invalid, .invalid > input { background: #ffd6e0 !important; border-color: #c40045 !important; }

/* Vínculo entre fichas */
.linked {
    display: block;
    padding: 1mm 1.5mm;
    font-family: var(--font-title);
    font-size: 14pt;
    letter-spacing: .5px;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 2px solid var(--ink);
}
.linked:hover { color: var(--accent-2); }
.linked-empty { font-family: var(--font-body); font-size: 11pt; color: var(--muted); }

/* Nível e XP */
.progress-row { display: flex; gap: 4mm; align-items: end; }
.field-level { flex: 0 0 20mm; }
.field-level input { font-family: var(--font-title); font-size: 20pt; text-align: center; }
.xpbar { flex: 1; display: grid; gap: 1mm; }
.xpbar-track {
    height: 5mm;
    background: #fff;
    border: 2px solid var(--ink);
    overflow: hidden;
}
.xpbar-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(-45deg, var(--gold) 0 6px, var(--orange) 6px 12px);
    transition: width .5s cubic-bezier(.2, 1.4, .4, 1);
}
.xpbar-values { display: flex; align-items: center; gap: 2mm; font-family: var(--font-title); font-size: 13pt; }
.xpbar-values input {
    width: 22mm;
    padding: .5mm 1mm;
    font-family: var(--font-title);
    font-size: 13pt;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 255, 255, .6);
}
.xp-grant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2mm;
    padding: 2mm;
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    border: 2px dashed var(--ink);
}
.xp-grant input { width: 28mm; padding: 1mm; font-family: var(--font-body); font-size: 11pt; border: 2px solid var(--ink); }
.xp-grant small { flex: 1 1 100%; font-size: 9.5pt; color: var(--accent-2); }

/* Atributos */
.points-line { margin: 0 0 2mm; font-size: 10.5pt; }
.points-line.over .points-left { color: #c40045; font-weight: 700; }
.rule-hint { margin-left: 2mm; font-size: 9pt; font-style: italic; color: var(--muted); }
.attr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3mm; }
.attr {
    display: grid;
    justify-items: center;
    padding: 2mm 1.5mm;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--accent);
    cursor: text;
}
.attr-abbr { font-family: var(--font-title); font-size: 17pt; letter-spacing: 1px; line-height: 1; color: var(--accent); }
.attr-name { font-size: 7.5pt; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-2); }
.attr input {
    width: 100%;
    font-family: var(--font-title);
    font-size: 24pt;
    text-align: center;
    color: var(--paper-ink);
    background: transparent;
    border: 0;
    outline: none;
}
.attr-invested { font-size: 8pt; color: var(--muted); }

/* Stepper: [−] valor [+] [⟲] */
.stepper {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2mm;
}
.stepper-reset { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.stepper input { width: 100%; min-width: 0; text-align: center; cursor: default; caret-color: transparent; }
.stepper input[data-numeric] { cursor: text; caret-color: auto; }
.step {
    display: grid;
    place-items: center;
    width: 6.5mm;
    height: 6.5mm;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14pt;
    line-height: 1;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.step:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.step:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.step-reset { color: var(--ink); background: var(--gold); font-size: 12pt; }
.step:disabled { opacity: .25; cursor: not-allowed; box-shadow: none; }

/* Atributos: − valor + numa linha, ⟲ embaixo ocupando a largura */
.attr { padding: 2mm 1mm; }
.attr .stepper { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6mm; }
.attr .step:not(.step-reset) { width: 5.5mm; height: 5.5mm; font-size: 12pt; }
.attr .stepper input { font-size: 19pt; padding-left: .05em !important; padding-right: .2em !important; }
.attr .step-reset { grid-column: 1 / -1; width: 100%; height: 5.5mm; font-size: 11pt; }
.pr-split .stepper input { width: 9mm; }

/* A fonte Bangers é inclinada: sem folga lateral o último dígito é cortado */
.attr input, .res-values input, .field-level input, .xpbar-values input, .grade-input,
.meter-head input, .chip input, .pr-split input, .field-xl input, .param-d6 input {
    padding-left: .2em !important;
    padding-right: .35em !important;
    overflow: visible;
}
.attr.invalid { background: #ffd6e0; box-shadow: 3px 3px 0 #c40045; }

/* Recursos */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr)); gap: 3mm; }
.res {
    --res: var(--accent);
    display: grid;
    gap: 1mm;
    padding: 2mm 3mm;
    background: #fff;
    border: 2px solid var(--ink);
    border-top: 6px solid var(--res);
}
.res-hp { --res: #e8173d; }
.res-est { --res: #f08a00; }
.res-pd { --res: var(--violet); }
.res-pr { --res: var(--cyan); }
.res-dur { --res: #2d7cff; }
.res-ene { --res: #00b37a; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; }
.res-label { font-family: var(--font-title); font-size: 15pt; letter-spacing: 1px; color: var(--res); }
.res-max { font-size: 9pt; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.res-max output { font-family: var(--font-title); font-size: 15pt; letter-spacing: 1px; color: var(--paper-ink); }
.res-values { display: flex; align-items: center; gap: 1.5mm; font-family: var(--font-title); font-size: 18pt; }
.res-values .stepper { flex: 1; }
.res-values input {
    width: 100%;
    padding: 0 1mm;
    font-family: var(--font-title);
    font-size: 18pt;
    text-align: center;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
}
.res small { font-size: 8pt; color: var(--muted); }

/* Barra de recurso: preenchimento animado + rastro (como em jogo de luta) */
.res-bar {
    --pct: 0%;
    position: relative;
    height: 4.5mm;
    margin-top: .5mm;
    overflow: hidden;
    background: repeating-linear-gradient(-45deg, var(--paper-tint) 0 4px, #fff 4px 8px);
    border: 2px solid var(--ink);
    transform: skewX(var(--skew));
}
.res-bar-fill, .res-bar-trail {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pct);
}
.res-bar-trail {
    background: #fff3b0;
    transition: width .9s cubic-bezier(.4, 0, .2, 1) .35s;
}
.res-bar-fill {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45) 0 35%, transparent 35%),
        repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .18) 6px 12px),
        var(--res);
    background-size: auto, 34px 34px, auto;
    border-right: 2px solid var(--ink);
    transition: width .45s cubic-bezier(.2, 1.3, .4, 1);
    animation: bar-flow 1.2s linear infinite;
}
.res-bar.is-empty .res-bar-fill { border-right: 0; }
@keyframes bar-flow { to { background-position: 0 0, 34px 0, 0 0; } }
/* Ao curar, o rastro acompanha junto (sem atraso) */
.res-bar.heal .res-bar-trail { transition-delay: 0s; transition-duration: .45s; }
.res-bar.hit { animation: bar-hit .35s steps(2); }
.res-bar.heal .res-bar-fill { animation: bar-flow 1.2s linear infinite, bar-heal .6s ease-out; }
@keyframes bar-hit {
    0%   { translate: 0 0; }
    25%  { translate: -3px 1px; }
    50%  { translate: 3px -1px; }
    75%  { translate: -2px 0; }
}
@keyframes bar-heal { 0% { filter: brightness(1.8); } }
.res-bar.is-low .res-bar-fill { animation: bar-flow 1.2s linear infinite, bar-low .8s ease-in-out infinite; }
@keyframes bar-low { 50% { filter: brightness(1.4) saturate(1.4); } }
.res.invalid { background: #ffd6e0; }
.pr-split { display: grid; gap: 1mm; font-size: 10pt; font-weight: 700; }
.pr-split > div { display: flex; align-items: center; justify-content: space-between; gap: 2mm; }
.pr-split input { width: 12mm; font-family: var(--font-title); font-size: 14pt; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; }
.pips { display: flex; gap: 2.2mm; padding: 1mm 0 0 1mm; }
.pips button {
    width: 4.5mm;
    height: 4.5mm;
    padding: 0;
    background: #fff;
    border: 2px solid var(--ink);
    transform: rotate(45deg);
    cursor: pointer;
    transition: transform .15s;
}
.pips button:hover { transform: rotate(45deg) scale(1.25); }
.pips button.on { background: var(--violet); box-shadow: 0 0 0 1px var(--gold); }
.chip-pd .pips { padding: 0 0 0 .3rem; }

.derived {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2mm;
    margin-top: 3mm;
}
.derived > div {
    display: grid;
    justify-items: center;
    padding: 1.5mm;
    background: var(--ink);
    color: #fff;
    transform: skewX(var(--skew));
}
.derived span { font-size: 8pt; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.derived output { font-family: var(--font-title); font-size: 16pt; letter-spacing: 1px; }
.derived small { font-size: 7.5pt; color: var(--on-dark-mid); text-align: center; }

/* Retrato */
.portrait {
    position: relative;
    height: 62mm;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--purple) 8%, transparent) 0 6px, transparent 6px 12px),
        #fff;
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--accent);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-empty {
    display: grid;
    text-align: center;
    font-family: var(--font-title);
    font-size: 16pt;
    letter-spacing: 1px;
    color: var(--accent-2);
}
.portrait-empty small { font-family: var(--font-body); font-size: 9pt; color: var(--muted); }
.portrait-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.portrait-clear {
    position: absolute;
    top: 2mm;
    right: 2mm;
    width: 7mm;
    height: 7mm;
    font-size: 14pt;
    line-height: 1;
    color: #fff;
    background: var(--ink);
    border: 0;
    cursor: pointer;
}
[hidden] { display: none !important; }

/* Parâmetros do Stand */
.params { width: 100%; border-collapse: collapse; font-size: 10pt; }
.params thead th {
    padding: 1mm 2mm;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 11pt;
    letter-spacing: 1px;
    text-align: left;
    color: #fff;
    background: var(--accent-2);
}
.params tbody th { padding: 1.5mm 2mm; text-align: left; font-weight: 700; white-space: nowrap; }
.params td { padding: 1mm 1.5mm; }
.params tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--paper-ink) 20%, transparent); }
.params tbody tr.invalid { background: #ffd6e0; }
.param-d6 { white-space: nowrap; }
.param-d6 input {
    width: 9mm;
    padding: .5mm;
    font-family: var(--font-title);
    font-size: 12pt;
    text-align: center;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
}
.param-rolled { font-size: 9pt; color: var(--muted); }
.grade-input {
    width: 10mm;
    padding: .5mm;
    font-family: var(--font-title);
    font-size: 17pt;
    text-align: center;
    color: var(--accent);
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--gold);
    cursor: pointer;
}
.param-effect { font-size: 9.5pt; }
.range-m { display: inline-flex; align-items: center; gap: 1mm; margin-left: 1mm; }
.range-m input { width: 13mm; padding: .5mm; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-family: var(--font-body); font-size: 10pt; }
.dice-btn, .evo-btn {
    padding: .5mm 1.5mm;
    font-size: 11pt;
    line-height: 1.2;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    transition: transform .15s;
}
.dice-btn:hover:not(:disabled) { transform: rotate(-15deg) scale(1.1); }
.evo-btn { color: #fff; background: var(--accent); font-size: 9pt; }
.evo-btn:hover:not(:disabled) { transform: translateY(-2px); }
.dice-btn:disabled, .evo-btn:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }
.params-bottom { display: grid; grid-template-columns: 1fr 62mm; gap: 4mm; align-items: center; }
.param-errors { margin: 0 0 2mm; padding: 2mm 3mm 2mm 7mm; font-weight: 700; color: #fff; background: #c40045; border: 2px solid var(--ink); }
.param-flags:empty { display: none; }
.param-flags { margin: 2mm 0 0; padding: 2mm 3mm 2mm 7mm; font-size: 9.5pt; background: #fff3b0; border: 2px dashed var(--ink); }
.params td.param-grade-cell { text-align: center; }
.grade-chip {
    display: inline-block;
    min-width: 9mm;
    padding: 0 1.5mm;
    font-family: var(--font-title);
    font-size: 18pt;
    line-height: 1.2;
    text-align: center;
    color: var(--accent);
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--gold);
}
.grade-chip-rolled { font-size: 13pt; color: var(--paper-ink); box-shadow: none; background: transparent; border-style: dashed; }
.bank { display: block; font-size: 8pt; color: var(--muted); }
.muted { font-size: 8.5pt; color: var(--muted); }
.param-adjust { font-size: 9.5pt; white-space: nowrap; }
.penalty { display: inline-flex; align-items: center; gap: 1mm; font-weight: 700; color: #c40045; cursor: pointer; }
.penalty input { width: 4mm; height: 4mm; accent-color: #c40045; }
.shift { display: inline-flex; border: 2px solid var(--ink); }
.shift label { cursor: pointer; }
.shift input { position: absolute; opacity: 0; pointer-events: none; }
.shift span { display: block; padding: .5mm 1.5mm; font-size: 8.5pt; font-weight: 700; background: #fff; }
.shift label + label span { border-left: 2px solid var(--ink); }
.shift input:checked + span { color: #fff; background: var(--accent); }
.shift input:disabled + span { opacity: .45; cursor: not-allowed; }
.shift input:checked:disabled + span { opacity: 1; }
.evo-stepper { grid-template-columns: auto minmax(5mm, auto) auto auto; }
.evo-stepper output { font-family: var(--font-title); font-size: 14pt; text-align: center; padding: 0 .3em 0 .15em; }
.param-d6 output { display: inline-block; min-width: 5mm; font-family: var(--font-title); font-size: 14pt; text-align: center; padding-right: .2em; }
.param-notes { font-size: 10pt; }
.param-notes p { margin: 2mm 0 0; }
.param-notes small { color: var(--muted); }
.evo-line input { width: 10mm; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-family: var(--font-body); font-size: 10pt; }
.evo-line.over { color: #c40045; }
.link-warning { padding: 2mm 3mm; font-weight: 700; color: #fff; background: #c40045; }

/* Skills */
.skills { display: grid; gap: 3mm; }
.skill {
    padding: 2.5mm 3mm;
    background: #fff;
    border: 2px solid var(--ink);
    border-left: 6px solid var(--accent);
    box-shadow: 3px 3px 0 var(--gold);
    break-inside: avoid;
    animation: sheet-in .4s cubic-bezier(.2, 1.4, .4, 1);
}
.skill-head { display: flex; gap: 2mm; align-items: center; }
.skill-name {
    flex: 1;
    padding: .5mm 1mm;
    font-family: var(--font-title);
    font-size: 16pt;
    letter-spacing: 1px;
    color: var(--accent);
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
}
.skill-head select, .skill-cost select { font-family: var(--font-body); font-size: 10pt; border: 2px solid var(--ink); background: #fff; }
.skill-mini { font-size: 9pt; font-weight: 700; }
.skill-mini input { width: 9mm; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; }
.skill-remove { width: 7mm; height: 7mm; font-size: 14pt; line-height: 1; color: #fff; background: var(--ink); border: 0; cursor: pointer; }
.skill-cost { display: flex; flex-wrap: wrap; gap: 2mm 5mm; margin: 1.5mm 0; font-size: 10pt; }
.skill-cost b { color: var(--accent-2); }
.skill-cost input { width: 8mm; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-family: var(--font-body); }
.skill-cost input:not([readonly]) { background: #fff3b0; }
.skill-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 3mm; }
.skill-fields textarea { font-size: 10.5pt; line-height: 1.4; }
.skill-roll { font-size: 8.5pt; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field-label small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.skills-section > p small { color: var(--muted); margin-left: 2mm; }

/* ==========================================================================
   Conta: login, cadastro e chip no cabeçalho
   ========================================================================== */
.account { display: flex; align-items: center; gap: .7rem; }
.account form { margin: 0; }
.account-chip {
    display: grid;
    padding: .15rem .8rem;
    line-height: 1.1;
    background: var(--purple);
    border: 2px solid var(--gold);
    transform: skewX(var(--skew));
}
.account-chip b { font-family: var(--font-title); font-size: 1.15rem; letter-spacing: 1px; font-weight: 400; }
.account-chip small { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.account-mestre { background: var(--magenta); }

.auth { position: relative; max-width: 620px; margin: 0 auto; text-align: center; }
.auth-burst {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 760px;
    height: 760px;
    translate: -50% -50%;
    z-index: -1;
    background: repeating-conic-gradient(color-mix(in srgb, var(--gold) 16%, transparent) 0 5deg, transparent 5deg 13deg);
    mask: radial-gradient(circle, #000 10%, transparent 62%);
    animation: spin-star 70s linear infinite;
}
.auth-card {
    display: grid;
    gap: 1rem;
    padding: 1.6rem 1.8rem 1.4rem;
    text-align: left;
    color: var(--paper-ink);
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--purple) 9%, transparent) 1px, transparent 0) 0 0 / 6px 6px, var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink), 12px 12px 0 4px var(--pink);
    animation: sheet-in .5s cubic-bezier(.2, 1.4, .4, 1);
    transition: box-shadow .3s;
}
.auth-card.is-master { box-shadow: 12px 12px 0 var(--ink), 12px 12px 0 4px var(--gold); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-field { display: grid; gap: .25rem; }
.auth-field > span { font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple); }
.auth-field > span small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.auth-field input, .auth-field textarea {
    width: 100%;
    padding: .55rem .7rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--paper-ink);
    background: #fff;
    border: 3px solid var(--ink);
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}
.auth-field input:focus, .auth-field textarea:focus { border-color: var(--pink); box-shadow: 4px 4px 0 var(--gold); }
.auth-field > small { font-size: .8rem; color: var(--muted); }
.auth-master input { background: #fff3b0; }
.auth-remember { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.auth-submit { justify-self: center; margin-top: .3rem; }
.auth-switch { margin: 0; text-align: center; font-size: .95rem; }
.auth-switch a { font-weight: 700; color: var(--magenta); }
.auth-error { margin: 0; padding: .6rem .9rem; font-weight: 700; color: #fff; background: #c40045; border: 2px solid var(--ink); }

.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.role-tab { cursor: pointer; }
.role-tab input { position: absolute; opacity: 0; pointer-events: none; }
.role-tab span {
    display: grid;
    gap: .1rem;
    padding: .6rem .9rem;
    text-align: center;
    background: #fff;
    border: 3px solid var(--ink);
    transform: skewX(var(--skew));
    transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), background .2s, color .2s, box-shadow .2s;
}
.role-tab b { font-family: var(--font-title); font-weight: 400; font-size: 1.6rem; letter-spacing: 1.5px; }
.role-tab small { font-size: .8rem; color: var(--muted); }
.role-tab:hover span { transform: skewX(var(--skew)) translateY(-2px); }
.role-jogador input:checked + span { color: #fff; background: var(--pink); box-shadow: 5px 5px 0 var(--ink); }
.role-mestre input:checked + span { color: var(--ink); background: var(--gold); box-shadow: 5px 5px 0 var(--ink); }
.role-tab input:checked + span small { color: inherit; }
.role-tab input:focus-visible + span { outline: 3px dashed var(--cyan); outline-offset: 3px; }

/* Requisitos da senha */
.pw-rules { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: -.3rem 0 0; padding: 0; list-style: none; }
.pw-rules li {
    padding: .1rem .55rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #7a6a8a;
    background: #fff;
    border: 2px solid #cbb8e6;
    transform: skewX(var(--skew));
    transition: color .2s, background .2s, border-color .2s;
}
.pw-rules li::before { content: '✗ '; }
.pw-rules li.ok { color: var(--ink); background: var(--green); border-color: var(--ink); }
.pw-rules li.ok::before { content: '✓ '; }
.pw-note { margin-top: -.5rem; font-size: .8rem; color: #7a6a8a; }
.auth-card-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 1.7rem; letter-spacing: 1.5px; color: var(--purple); }
.auth-warning { margin: 0 0 1.4rem; padding: .6rem .9rem; font-weight: 700; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--pink); }
a.account-chip { text-decoration: none; transition: transform .15s; }
a.account-chip:hover { transform: skewX(var(--skew)) translateY(-2px); }

/* ==========================================================================
   Organização do mestre e campanhas
   ========================================================================== */
.sheet-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    max-width: 210mm;
    margin: -.6rem auto 1.5rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    background: color-mix(in srgb, var(--ink) 85%, transparent);
    border: 2px dashed var(--gold);
}
.sheet-meta select, .sheet-organize select, .campaign-new input {
    margin-left: .4rem;
    padding: .3rem .5rem;
    font-family: var(--font-body);
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    border: 2px solid var(--ink);
    background: #fff;
}
.sheet-meta small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--on-dark); }

.sheet-item { flex-wrap: wrap; }
.sheet-item-account { color: var(--gold); text-transform: none; letter-spacing: 0; }
.sheet-organize { display: flex; flex: 1 1 100%; align-items: center; gap: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(255, 255, 255, .2); }
.sheet-organize select { margin: 0; min-width: 12rem; }

.group-title {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    margin: 2rem 0 .8rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 1.5px;
    color: var(--cyan);
}
.group-title a { text-decoration: none; }
.group-title a:hover { color: var(--gold); }
.group-title small { font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; color: var(--on-dark-dim); }

.campaign-new { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 2rem; }
.campaign-new input { margin: 0; flex: 1 1 14rem; padding: .6rem .8rem; border-width: 3px; }
.campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; }
.campaign-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: .4rem;
    padding: 1.4rem 1.4rem 1.6rem;
    text-decoration: none;
    background: linear-gradient(150deg, var(--violet), var(--purple));
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%);
    transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.campaign-card:nth-child(3n+2) { background: linear-gradient(150deg, var(--pink), var(--magenta)); }
.campaign-card:nth-child(3n+3) { background: linear-gradient(150deg, var(--cyan-mid), var(--cyan-deep)); }
.campaign-card:hover { transform: rotate(-1.5deg) translateY(-5px); }
.campaign-part { justify-self: start; padding: .05rem .6rem; font-family: var(--font-title); letter-spacing: 2px; color: var(--ink); background: var(--gold); }
.campaign-card h2 { margin: .2rem 0 0; font-family: var(--font-title); font-weight: 400; font-size: 2rem; letter-spacing: 1.5px; text-shadow: 3px 3px 0 var(--ink); }
.campaign-card p { margin: 0; color: var(--on-dark-hi); }
.campaign-count { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }

.campaign-title { margin-top: 1rem; }
.campaign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; align-items: start; margin-top: 1rem; }
.campaign-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.campaign-side { position: sticky; top: 90px; margin-top: 3rem; }
.campaign-notes { display: grid; gap: .9rem; }
.campaign-notes textarea { resize: vertical; line-height: 1.5; }
.lore-text { background: #fffdf6 !important; }
.notes-text { background: #fff3b0 !important; }
.lore-read { font-size: 1.05rem; line-height: 1.6; white-space: normal; }
.empty-dark { margin: 0; color: var(--muted); }
.campaign-delete { margin-top: 1rem; text-align: right; }

@media (max-width: 960px) {
    .campaign-layout { grid-template-columns: 1fr; }
    .campaign-side { position: static; margin-top: 0; }
    .auth-grid { grid-template-columns: 1fr; }
    .account { flex-wrap: wrap; justify-content: center; }
}

/* NPC: ficha sem jogador atribuído */
.npc-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .5rem;
    font-family: var(--font-title);
    font-size: .9rem;
    letter-spacing: 2px;
    vertical-align: middle;
    color: var(--ink);
    background: var(--cyan);
    border: 2px solid var(--ink);
    transform: skewX(var(--skew));
    text-shadow: none;
}
.sheet .npc-stamp {
    position: absolute;
    top: 30mm;
    right: 10mm;
    z-index: 2;
    padding: 1mm 4mm;
    font-family: var(--font-title);
    font-size: 20pt;
    letter-spacing: 3px;
    color: var(--cyan);
    border: 3px solid var(--cyan);
    background: rgba(255, 255, 255, .85);
    transform: rotate(-8deg);
    box-shadow: 3px 3px 0 var(--ink);
}

/* ==========================================================================
   Etiquetas, revelação e somente leitura
   ========================================================================== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .7rem;
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.4;
    text-decoration: none;
    color: var(--tag-text, #fff);
    background: var(--tag, var(--pink));
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transform: skewX(var(--skew));
    white-space: nowrap;
}
.tag small { font-family: var(--font-body); font-size: .75rem; opacity: .8; }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.section-title .tag { margin-left: .6rem; font-size: 1.1rem; vertical-align: middle; transform: skewX(0); }

.tags-panel .section-title { margin-top: 2.5rem; }
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.tag-filter .tag { transition: transform .15s; }
.tag-filter .tag:hover { transform: skewX(var(--skew)) translateY(-2px); }
.tag-filter .tag.active { outline: 3px solid var(--gold); outline-offset: 2px; }
.tag-all { --tag: #fff; --tag-text: var(--ink); }
.tag-manage { display: inline-flex; align-items: center; gap: .2rem; }
.tag-edit-btn {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: .9rem;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: .6;
}
.tag-edit-btn:hover { opacity: 1; color: var(--gold); }
.tag-edit { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; padding: .6rem .8rem; background: color-mix(in srgb, var(--ink) 70%, transparent); border: 2px dashed var(--gold); }
.tag-edit form { margin: 0; }
.tag-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tag-new { margin-top: 1rem; }
.tag-form input[type=text] { width: 18rem; max-width: 100%; padding: .4rem .6rem; font-family: var(--font-body); font-size: 1rem; border: 2px solid var(--ink); }

/* Seletor de cor das etiquetas (pop-up próprio) */
.color-picker { position: relative; display: inline-block; }
.color-picker-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2.3rem;
    padding: 0 .5rem;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
    cursor: pointer;
    transition: transform .12s;
}
.color-picker-toggle:hover { transform: translate(-1px, -1px); }
.color-picker-toggle[aria-expanded="true"] { box-shadow: 3px 3px 0 var(--gold); }
.color-picker-caret { font-size: .8rem; }
.swatch {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--swatch);
    border: 2px solid var(--ink);
    transform: rotate(45deg) scale(.85);
}
.color-popup {
    position: absolute;
    z-index: 30;
    top: calc(100% + .6rem);
    left: 0;
    width: 19rem;
    padding: .8rem;
    color: var(--paper-ink);
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--purple) 9%, transparent) 1px, transparent 0) 0 0 / 6px 6px, var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink), 6px 6px 0 3px var(--gold);
    animation: popup-in .2s cubic-bezier(.2, 1.5, .4, 1);
}
.color-popup::before {
    /* setinha apontando para o botão */
    content: '';
    position: absolute;
    top: -.75rem;
    left: 1rem;
    border: .6rem solid transparent;
    border-bottom-color: var(--ink);
    border-top: 0;
}
@keyframes popup-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.color-popup-title {
    display: inline-block;
    margin-bottom: .6rem;
    padding: 0 .6rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: #fff;
    background: var(--purple);
    transform: skewX(var(--skew));
}
.color-popup-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.color-option {
    display: grid;
    justify-items: center;
    gap: .25rem;
    padding: .45rem .1rem .3rem;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
}
.color-option .swatch { width: 1.7rem; height: 1.7rem; }
.color-option small { font-family: var(--font-body); font-size: .72rem; font-weight: 700; line-height: 1.1; text-align: center; color: var(--paper-ink); }
.color-option:hover { transform: translateY(-2px); }
.color-option:hover .swatch { transform: rotate(45deg) scale(1); }
.color-option[aria-pressed="true"] { border-color: var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--pink); }
.color-option:focus-visible { outline: 3px dashed var(--cyan); outline-offset: 1px; }

/* Seleção de etiquetas na ficha (mestre) */
.tag-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 100%; }
.tag-picker > span { margin-right: .4rem; }
.tag-picker small a { color: var(--gold); }
.tag-option { cursor: pointer; }
.tag-option input { position: absolute; opacity: 0; pointer-events: none; }
.tag-option .tag { opacity: .35; filter: grayscale(.6); transition: opacity .15s, filter .15s; text-transform: none; }
.tag-option input:checked + .tag { opacity: 1; filter: none; }
.tag-option input:focus-visible + .tag { outline: 3px dashed var(--cyan); outline-offset: 2px; }

.reveal-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.reveal-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); }
.reveal-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .5rem;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    border: 2px solid var(--ink);
}
.sheet-organize form { margin: 0; }
.sheet-organize-move { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.readonly-banner {
    max-width: 210mm;
    margin: -.6rem auto 1.5rem;
    padding: .5rem 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: var(--ink);
    background: var(--cyan);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--pink);
}
.sheet-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sheet-fieldset:disabled .step,
.sheet-fieldset:disabled .dice-btn,
.sheet-fieldset:disabled .xp-grant,
.sheet-fieldset:disabled .skill-remove,
.sheet-fieldset:disabled [data-add-skill],
.sheet-fieldset:disabled [data-roll-all],
.sheet-fieldset:disabled .portrait-empty,
.sheet-fieldset:disabled .portrait-file,
.sheet-fieldset:disabled .portrait-clear { display: none; }
.sheet-fieldset:disabled input,
.sheet-fieldset:disabled select,
.sheet-fieldset:disabled textarea { color: var(--paper-ink); opacity: 1; -webkit-text-fill-color: var(--paper-ink); }
.linked-hidden { color: var(--muted); letter-spacing: 3px; cursor: help; }

/* ==========================================================================
   Modo Combate
   ========================================================================== */
.combat { --accent: var(--pink); --accent-2: var(--purple); }
.combat-toolbar { max-width: none; position: sticky; }
.combat-toolbar small { margin-left: .6rem; font-size: 1rem; color: #fff; }
.save-state { font-size: .9rem; color: var(--green); }
.save-state.error { color: #ff6b6b; }
.combat-title {
    margin: 0 0 1.5rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: 2px;
    color: var(--gold);
    text-shadow: 4px 4px 0 var(--pink);
    transform: rotate(-1deg);
}
.combat-title em { font-style: normal; color: #fff; }
.combat-state {
    margin-bottom: 1.5rem;
    padding: .6rem 1rem;
    font-family: var(--font-title);
    font-size: 2rem;
    letter-spacing: 3px;
    text-align: center;
    border: 3px solid var(--ink);
    transform: skewX(var(--skew));
    animation: tremble .2s steps(2) infinite;
}
.combat-state.is-dying { background: var(--gold); color: var(--ink); }
.combat-state.is-dead { background: var(--ink); color: #ff3b3b; border-color: #ff3b3b; animation: none; }
.combat.low-hp .panel-user { animation: pulse-red 1.2s ease-in-out infinite; }
@keyframes pulse-red { 50% { box-shadow: 10px 10px 0 #ff3b3b; } }

.combat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.8rem; margin-bottom: 1.8rem; }
.panel {
    padding: 1.2rem 1.4rem;
    color: var(--paper-ink);
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--purple) 9%, transparent) 1px, transparent 0) 0 0 / 6px 6px, var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
}
.panel-stand { --accent: var(--violet); }
.panel-title {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .1rem 1rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--ink);
    transform: skewX(var(--skew));
    box-shadow: 3px 3px 0 var(--gold);
}
.panel-empty { display: grid; align-content: start; justify-items: start; gap: .6rem; }
.panel-empty p { margin: 0; }

.meter { margin-bottom: .9rem; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-title); font-size: 1.5rem; letter-spacing: 1px; }
.meter-head input {
    width: 4.5rem;
    font-family: var(--font-title);
    font-size: 1.5rem;
    text-align: right;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
}
.meter-track { height: 18px; background: #fff; border: 3px solid var(--ink); overflow: hidden; }
.meter-fill { height: 100%; transition: width .5s cubic-bezier(.2, 1.4, .4, 1); }
.meter-hp .meter-fill { background: linear-gradient(90deg, #ff2d55, #ff6b3d); }
.meter-est .meter-fill { background: linear-gradient(90deg, #f08a00, var(--gold)); }
.meter-dur .meter-fill { background: linear-gradient(90deg, #2d7cff, var(--cyan)); }
.meter-ene .meter-fill { background: linear-gradient(90deg, #00b37a, var(--green)); }
.meter small { font-size: .8rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1rem; }
.chip {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .7rem;
    font-size: .95rem;
    color: #fff;
    background: var(--ink);
    transform: skewX(var(--skew));
}
.chip b { color: var(--gold); letter-spacing: 1px; }
.chip output { font-family: var(--font-title); font-size: 1.2rem; letter-spacing: 1px; }
.chip input { width: 2.8rem; font-family: var(--font-title); font-size: 1.2rem; text-align: center; color: #fff; background: transparent; border: 0; border-bottom: 2px solid var(--gold); }
.chip small { color: var(--on-dark-mid); }

.actions { display: grid; gap: .45rem; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.action-row input, .attack-form input, .attack-form select {
    width: 6rem;
    padding: .35rem .5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--ink);
    background: #fff;
}
.action-hint { font-size: .8rem; color: var(--muted); }
.panel .btn-outline { color: var(--paper-ink); border-color: var(--paper-ink); }
.determination { display: grid; gap: .5rem; margin-top: .4rem; }
.determination-result { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem; background: color-mix(in srgb, var(--violet) 12%, transparent); border: 2px dashed var(--violet); }

.panel-attack { margin-bottom: 1.8rem; }
.attack-form { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.attack-form label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-2); }
.attack-form select { width: auto; }
.attack-result { margin: 1rem 0 .6rem; font-size: 1.05rem; }
.attack-result p { margin: .25rem 0; }
.attack-result .dmg { font-family: var(--font-title); font-size: 1.6rem; letter-spacing: 1px; color: #e8173d; }
.combat-log {
    width: 100%;
    padding: .6rem;
    font-family: 'Consolas', monospace;
    font-size: .85rem;
    color: var(--gold);
    background: var(--ink);
    border: 2px solid var(--ink);
    resize: vertical;
}
.stat-radar { width: 100%; height: auto; overflow: visible; }
.stat-radar .ring { fill: none; stroke: color-mix(in srgb, var(--paper-ink) 25%, transparent); stroke-width: 1; }
.stat-radar .ring-outer { stroke: var(--ink); stroke-width: 2; fill: #fff; }
.stat-radar .axis { stroke: color-mix(in srgb, var(--paper-ink) 30%, transparent); }
.stat-radar .area {
    fill: color-mix(in srgb, var(--accent) 45%, transparent);
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linejoin: round;
    transition: d .4s;
}
.stat-radar .dot { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.stat-radar .label { font-family: var(--font-body); font-size: 10px; font-weight: 700; fill: var(--paper-ink); text-transform: uppercase; }
.stat-radar .rank { font-family: var(--font-title); font-size: 16px; fill: var(--accent); stroke: var(--ink); stroke-width: .5; }

.sheet-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2mm;
    margin-top: 4mm;
    font-family: var(--font-title);
    font-size: 13pt;
    letter-spacing: 1px;
    color: #4b3a23;
}
.sheet-footer svg { width: 12mm; fill: #4b3a23; }

/* ==========================================================================
   Livro de regras
   ========================================================================== */
.rulebook { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; margin-top: 2.5rem; align-items: start; }
.rulebook-toc {
    position: sticky;
    top: 100px;
    padding: 1.2rem;
    background: var(--ink);
    border: 3px solid var(--gold);
    box-shadow: 6px 6px 0 var(--pink);
}
.rulebook-toc-title { font-family: var(--font-title); font-size: 1.5rem; letter-spacing: 1.5px; color: var(--gold); }
.rulebook-toc ol { margin: .8rem 0 0; padding-left: 1.4rem; display: grid; gap: .4rem; }
.rulebook-toc a { text-decoration: none; font-size: 1.1rem; transition: color .2s, padding .2s; }
.rulebook-toc a:hover { color: var(--pink); padding-left: 4px; }
.rulebook-toc a.active { color: var(--gold); font-weight: 700; }

.rulebook-content {
    padding: 2rem 2.5rem;
    color: var(--paper-ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 10px 10px 0 var(--purple);
    animation: sheet-in .5s cubic-bezier(.2, 1.4, .4, 1);
}
.prose { font-size: 1.15rem; line-height: 1.65; }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-title); font-weight: 400; letter-spacing: 1.5px; line-height: 1.1; }
.prose h1 { margin-top: 0; font-size: 2.8rem; color: var(--pink); text-shadow: 3px 3px 0 var(--gold); }
.prose h2 { font-size: 2rem; color: var(--purple); border-bottom: 3px solid var(--gold); }
.prose blockquote { margin: 1rem 0; padding: .6rem 1.2rem; background: var(--paper-tint); border-left: 6px solid var(--violet); font-style: italic; }
.prose code { padding: .1rem .35rem; background: var(--ink); color: var(--gold); font-size: .9em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th { background: var(--purple); color: #fff; font-family: var(--font-title); letter-spacing: 1px; font-weight: 400; }
.prose th, .prose td { padding: .4rem .8rem; border: 2px solid var(--ink); text-align: left; }
.prose tr:nth-child(even) td { background: color-mix(in srgb, var(--purple) 7%, transparent); }
.rulebook-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.rulebook-pager .btn-outline { color: var(--paper-ink); border-color: var(--paper-ink); }

/* ==========================================================================
   ZA WARUDO! (clique no ★ do logo)
   ========================================================================== */
.za-warudo {
    position: fixed;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 10px;
    height: 10px;
    z-index: 100;
    border-radius: 50%;
    pointer-events: none;
    background: #fff;
    mix-blend-mode: difference;
    translate: -50% -50%;
    opacity: 0;
}
body.time-stop .za-warudo { animation: za-warudo 1.4s ease-out forwards; }
body.time-stop .site-main,
body.time-stop .site-header,
body.time-stop .site-footer { filter: grayscale(1) contrast(1.2) sepia(.3) hue-rotate(200deg); transition: filter .6s .5s; }
body.time-stop *, body.time-stop *::before, body.time-stop *::after { animation-play-state: paused !important; }
body.time-stop .za-warudo { animation-play-state: running !important; }
@keyframes za-warudo {
    0%   { opacity: 1; width: 10px; height: 10px; }
    50%  { opacity: 1; width: 300vmax; height: 300vmax; }
    100% { opacity: 0; width: 300vmax; height: 300vmax; }
}

/* ==========================================================================
   To Be Continued (3 cliques na seta do rodapé)
   Congela a cena em tons pastel por 3s e volta com um flash branco lento.
   ========================================================================== */
.tbc[data-tbc] { cursor: pointer; user-select: none; }

.tbc-fx {
    position: fixed;
    inset: 0;
    z-index: 110;
    pointer-events: none;
    opacity: 0;
}
.tbc-fx::after {
    /* Flash branco da volta */
    content: '';
    position: fixed;
    inset: 0;
    background: #fff;
    opacity: 0;
}
.tbc-big {
    position: fixed;
    left: 4vw;
    bottom: 7vh;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    padding: .4rem 1.4rem;
    border-width: 3px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
    opacity: 0;
}
.tbc-big svg { width: 4.5rem; }

/* Congelado: cena desbotada em pastel, nada se mexe, nada é clicável */
body.tbc-freeze .tbc-fx { opacity: 1; pointer-events: auto; }
body.tbc-freeze .site-header,
body.tbc-freeze .site-main,
body.tbc-freeze .site-footer,
body.tbc-freeze .menacing {
    filter: sepia(.4) saturate(.5) brightness(1.2) contrast(.8) hue-rotate(-15deg);
}
body.tbc-freeze::after {
    /* Véu pastel por cima da cena congelada */
    content: '';
    position: fixed;
    inset: 0;
    z-index: 105;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 196, 220, .35), rgba(196, 240, 222, .28) 50%, rgba(214, 200, 255, .35));
}
body.tbc-freeze *, body.tbc-freeze *::before, body.tbc-freeze *::after { animation-play-state: paused !important; }
body.tbc-freeze .tbc-big { animation: tbc-enter .45s cubic-bezier(.2, .9, .3, 1) forwards !important; animation-play-state: running !important; }
@keyframes tbc-enter {
    from { opacity: 0; transform: translateX(-60vw); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Volta ao normal: branco que se desfaz devagar */
body.tbc-flash .tbc-fx { opacity: 1; }
body.tbc-flash .tbc-fx::after { animation: tbc-flash 1.8s ease-out forwards; }
@keyframes tbc-flash {
    0%   { opacity: 1; }
    25%  { opacity: .9; }
    100% { opacity: 0; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 860px) {
    .site-header { flex-direction: column; }
    .sheet-toolbar { top: 0; flex-wrap: wrap; }
    .sheet { padding: 6mm; }
    .sheet-header { margin: -6mm -6mm 5mm; }
    .sheet-grid-top, .sheet-grid-half, .params-bottom { grid-template-columns: 1fr; }
    .attr-grid, .derived { grid-template-columns: repeat(3, 1fr); }
    .skill-fields { grid-template-columns: 1fr; }
    .params { font-size: 9pt; }
    .rulebook { grid-template-columns: 1fr; }
    .rulebook-toc { position: static; }
}

/* ==========================================================================
   Impressão / PDF — mantém o visual da tela
   ========================================================================== */
@page { size: A4; margin: 0; }

@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }

    html, body { background: #fff !important; }
    .no-print, .menacing, .za-warudo, .tbc-fx, .toast { display: none !important; }

    .site-main { max-width: none; padding: 0; }
    .sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        border: 0;
        box-shadow: none;
    }
    .field input, .field select, .field textarea { background-color: transparent; }
    .field select { appearance: none; -webkit-appearance: none; }
    .field textarea { resize: none; overflow: hidden; }
    .grade-input, .attr, .res, .skill { background: #fff; }
    .print-only { display: inline !important; }
    input::placeholder, textarea::placeholder { color: transparent; }

    /* Livro de regras também imprime limpo */
    .rulebook { display: block; margin: 0; }
    .rulebook-content { border: 0; box-shadow: none; padding: 12mm 15mm; }
    .page-title { display: none; }
}

/* ==========================================================================
   Mobile — celulares e tablets pequenos (só tela; impressão não muda)
   ========================================================================== */
/* Grades nunca exigem mais largura do que a tela tem */
.features { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.choice-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.campaign-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.combat-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* Explosões giratórias não criam rolagem lateral */
.hero, .auth { overflow-x: clip; }

@media screen and (max-width: 860px) {
    /* Cabeçalho compacto: logo + conta numa linha, menu deslizante embaixo */
    .site-header {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo account" "nav nav";
        gap: .4rem .8rem;
        padding: .6rem 1rem .5rem;
    }
    .logo { grid-area: logo; }
    .logo-star { font-size: 1.6rem; }
    .logo-text { font-size: 1.6rem; }
    .account { grid-area: account; flex-wrap: nowrap; justify-content: flex-end; gap: .5rem; }
    .account-chip b { font-size: 1rem; }
    .account-chip small { font-size: .6rem; }
    .site-nav {
        grid-area: nav;
        flex-wrap: nowrap;
        gap: .3rem;
        margin: 0 -1rem;
        padding: .2rem 1rem .55rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: 0 0 auto; padding: .25rem .8rem; font-size: 1.15rem; white-space: nowrap; }

    /* Barra da ficha: título em cima, botões dividindo a linha */
    .sheet-toolbar { top: 0; flex-wrap: wrap; gap: .5rem; padding: .5rem .7rem; box-shadow: 4px 4px 0 var(--pink); }
    .sheet-toolbar-title { order: -1; flex: 1 1 100%; font-size: 1.3rem; line-height: 1.1; }
    .sheet-toolbar .btn { flex: 1 1 auto; padding: .35rem .6rem; font-size: 1rem; text-align: center; white-space: nowrap; }
    .combat-toolbar .save-state { order: -1; }

    .sheet-meta { gap: .6rem; }
    .sheet-meta { padding: .5rem .7rem; }
    .sheet-meta > label:not(.reveal-toggle) { display: flex; align-items: center; flex: 1 1 100%; min-width: 0; max-width: 100%; }
    .sheet-meta select { flex: 1; min-width: 0; }

    .toast { left: 1rem; right: 1rem; bottom: 1rem; font-size: 1.1rem; text-align: center; }
}

@media screen and (max-width: 640px) {
    .site-main { padding: 1.5rem 1rem 3rem; }
    .site-footer { flex-direction: column; text-align: center; gap: .7rem; }
    .quote { font-size: 1rem; }
    .section-title { margin-top: 2.2rem; font-size: 1.6rem; }
    .page-sub { margin-bottom: 1.4rem; font-size: 1.05rem; }
    .btn { padding: .6rem 1.4rem; font-size: 1.25rem; }
    .btn-sm { padding: .35rem .9rem; font-size: 1.05rem; }

    /* Home */
    .hero { padding: 3rem 0 1.5rem; }
    .hero-burst { width: 600px; height: 600px; }
    .hero-kicker { font-size: .85rem; letter-spacing: 2px; }
    .hero-sub { font-size: 1.1rem; margin: 1.3rem auto 1.6rem; }
    .hero-actions { gap: 1.1rem; }
    .hero-sfx .sfx { font-size: 1.8rem; }
    .sfx-1 { top: .2rem; }
    .sfx-2 { bottom: -1.2rem; }
    .features { gap: 1.4rem; margin-top: 2rem; }
    .feature-card { padding: 1.4rem 1.2rem 1.8rem; box-shadow: 6px 6px 0 var(--ink); }
    .feature-card h2 { font-size: 1.9rem; }
    .feature-pose { font-size: 6rem; }
    .banner { margin-top: 2.5rem; padding: 1.3rem 1rem; box-shadow: 6px 6px 0 var(--pink); }
    .banner blockquote { font-size: 1.2rem; }

    /* Escolha do tipo de ficha e lista */
    .choice-grid { gap: 1.2rem; }
    .choice { padding: 1.6rem 1rem; box-shadow: 6px 6px 0 var(--ink); }
    .choice-icon { font-size: 2.6rem; }
    .choice-label { font-size: 2rem; text-align: center; }
    .choice-hint { font-size: .95rem; text-align: center; }
    .sheet-item { padding: .8rem .9rem; border-left-width: 6px; }
    .sheet-item:hover { transform: none; }
    .sheet-item-main { flex: 1 1 100%; }
    .sheet-item-name { font-size: 1.5rem; }
    .sheet-item-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; flex: 1 1 100%; }
    .sheet-item-actions .btn { width: 100%; padding: .35rem .4rem; font-size: 1rem; text-align: center; white-space: nowrap; }
    .sheet-organize { flex-wrap: wrap; }
    .sheet-organize-move { flex: 1 1 100%; }
    .sheet-organize select { flex: 1 1 100%; min-width: 0; }
    .sheet-organize-move .btn { flex: 1; text-align: center; }
    .group-title { flex-wrap: wrap; font-size: 1.5rem; }
    .tag-form input[type=text] { width: 100%; }
    .color-popup { width: min(19rem, calc(100vw - 2rem)); }

    /* Folha da ficha */
    .sheet { padding: 5mm 4mm; box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 3px var(--gold); }
    .sheet-header { margin: -5mm -4mm 5mm; padding: 5mm 4mm 7mm; }
    .sheet-brand-kicker { font-size: 8pt; letter-spacing: 2px; }
    .sheet-brand-title { font-size: 24pt; }
    .sheet-sfx { font-size: 22pt; }
    .sheet .npc-stamp { top: 24mm; right: 4mm; font-size: 15pt; }
    .row { flex-wrap: wrap; gap: 3mm; }
    .row > * { flex: 1 1 40%; }
    .progress-row { flex-wrap: wrap; }
    .xp-grant input { flex: 1 1 auto; width: auto; min-width: 0; }
    .derived { gap: 2.5mm; }
    /* PD e PR ocupam a linha toda: losangos e botões cabem dentro da caixa */
    .res-pd, .res-pr { grid-column: 1 / -1; }
    .res-pd .pips { gap: 0; justify-content: space-between; max-width: 60mm; padding: 1.5mm 1.5mm 0; }
    .res-pd .pips button { width: min(6mm, calc(100% / 7.5)); height: auto; aspect-ratio: 1; }
    .chip-pd { padding-top: .5rem; padding-bottom: .5rem; }
    .chip-pd .pips { padding: 0 .3rem; }
    .stat-radar { max-width: 300px; margin: 0 auto; }
    .skill-head { flex-wrap: wrap; }
    .skill-name { flex: 1 1 100%; }

    /* Parâmetros do Stand: a tabela vira um cartão por parâmetro */
    .params, .params tbody, .params tr, .params th, .params td { display: block; }
    .params thead { display: none; }
    .params tbody tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "name name name name name name"
            "d6 d6 rolled rolled final final"
            "adjust adjust adjust evo evo evo"
            "effect effect effect effect effect effect";
        gap: 2mm 2mm;
        margin-bottom: 3mm;
        padding: 2mm 3mm 2.5mm;
        background: #fff;
        border: 2px solid var(--ink);
        box-shadow: 3px 3px 0 var(--accent);
    }
    .params tbody th {
        grid-area: name;
        padding: 0 0 1mm;
        font-family: var(--font-title);
        font-weight: 400;
        font-size: 15pt;
        letter-spacing: 1px;
        color: var(--accent);
        border-bottom: 2px solid var(--ink);
    }
    .params td { padding: 0; min-width: 0; }
    .params td::before {
        display: block;
        margin-bottom: .5mm;
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--accent-2);
    }
    .params td:nth-of-type(1) { grid-area: d6; }
    .params td:nth-of-type(1)::before { content: 'd6'; }
    .params td:nth-of-type(2) { grid-area: rolled; }
    .params td:nth-of-type(2)::before { content: 'Sorteado'; }
    .params td:nth-of-type(3) { grid-area: adjust; white-space: normal; }
    .params td:nth-of-type(3)::before { content: 'Ajuste do Potencial'; }
    .params td:nth-of-type(4) { grid-area: evo; }
    .params td:nth-of-type(4)::before { content: 'Evolução'; }
    .params td:nth-of-type(5) { grid-area: final; }
    .params td:nth-of-type(5)::before { content: 'Final'; }
    .params td:nth-of-type(6) { grid-area: effect; padding-top: 1.5mm; border-top: 1px dashed color-mix(in srgb, var(--paper-ink) 25%, transparent); }
    .params td:nth-of-type(6)::before { content: 'Efeito'; }
    .params td.param-grade-cell { text-align: left; }
    .param-effect { font-size: 10.5pt; }

    /* Conta */
    .auth-card { padding: 1.2rem 1rem; box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 3px var(--pink); }
    .auth-card.is-master { box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 3px var(--gold); }
    .auth-burst { width: 520px; height: 520px; }
    .role-tab b { font-size: 1.3rem; }

    /* Campanhas */
    .campaign-card { padding: 1.2rem 1.1rem 1.4rem; box-shadow: 6px 6px 0 var(--ink); }
    .campaign-card h2 { font-size: 1.7rem; }

    /* Modo Combate */
    .combat-title { font-size: 2rem; }
    .combat-state { font-size: 1.5rem; }
    .panel { padding: 1rem .9rem; box-shadow: 6px 6px 0 var(--ink); }
    .combat-grid { gap: 1.4rem; }
    .action-row input { flex: 1 1 5rem; min-width: 0; }
    .attack-form label { flex: 1 1 8rem; }
    .attack-form input, .attack-form select { width: 100%; }

    /* Livro de regras */
    .rulebook { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; gap: 1.4rem; }
    .rulebook-toc a { overflow-wrap: anywhere; }
    .rulebook-content { padding: 1.2rem 1rem; box-shadow: 6px 6px 0 var(--purple); }
    .prose { font-size: 1.05rem; }
    .prose h1 { font-size: 2.1rem; }
    .prose h2 { font-size: 1.6rem; }
    .prose table { display: block; overflow-x: auto; }
    .rulebook-pager { flex-wrap: wrap; }

    /* Campos de texto com 16px: o iPhone não dá zoom ao tocar */
    .sheet-meta select, .sheet-organize select, .skill-head select, .skill-cost select,
    .xp-grant input, .skill-fields textarea, .combat-log, .field select { font-size: 16px; }
}

/* Telas bem estreitas (≤ 400px): atributos em duas colunas para o valor caber entre − e + */
@media screen and (max-width: 400px) {
    .attr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dedo, não mouse: botões − / + maiores */
@media screen and (pointer: coarse) {
    .step { width: 8.5mm; height: 8.5mm; }
    .attr .step:not(.step-reset) { width: 7mm; height: 7mm; }
    .attr .step-reset { height: 7mm; }
    .dice-btn, .evo-btn { min-width: 8.5mm; min-height: 8.5mm; }
    .pips { gap: 3.5mm; }
    .pips button { width: 6mm; height: 6mm; }
    .tag-edit-btn { width: 2.2rem; height: 2.2rem; }
    .skill-remove, .portrait-clear { width: 9mm; height: 9mm; }
}

/* ---------- Selo da paleta sorteada (no rodapé, entre a frase e o To Be Continued) ---------- */
.theme-badge {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .35rem .3rem .8rem;
    font-size: .85rem;
    letter-spacing: .5px;
    color: var(--on-dark);
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    border: 2px solid var(--gold);
    box-shadow: 4px 4px 0 var(--magenta);
    transform: skewX(var(--skew));
}
.theme-badge > * { transform: skewX(calc(var(--skew) * -1)); }
.theme-badge b { font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; letter-spacing: 1px; color: var(--gold); }
.theme-dice {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    background: var(--gold);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: scale .2s, rotate .2s;
}
.theme-dice:hover { scale: 1.12; rotate: -12deg; }
.theme-dice:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.theme-dice.is-rolling { animation: dice-roll .45s ease-out; }
.theme-badge.is-new { animation: badge-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dice-roll { from { rotate: 0deg; scale: 1; } 50% { rotate: 200deg; scale: 1.25; } to { rotate: 360deg; scale: 1; } }
@keyframes badge-pop { from { scale: .85; } to { scale: 1; } }

@media screen and (max-width: 640px) {
    /* No celular o rodapé quebra em linhas: frase, To Be Continued e o selo embaixo */
    .site-footer { flex-wrap: wrap; }
    .theme-badge { order: 3; margin: 0 auto; font-size: .72rem; padding-left: .55rem; }
    .theme-badge b { font-size: .9rem; }
    .theme-dice { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-dice.is-rolling, .theme-badge.is-new { animation: none; }
}