/* =========================================================
   STRANGER THINGS RPG — estilos
   ========================================================= */
:root {
  --neon-red: #ff2a1c;
  --neon: drop-shadow(0 0 0.012em #ff8f6c) drop-shadow(0 0 0.06em rgba(255, 38, 22, 0.9)) drop-shadow(0 0 0.22em rgba(205, 0, 0, 0.55));
  --neon-hot: drop-shadow(0 0 0.02em #ffc0a8) drop-shadow(0 0 0.09em rgba(255, 60, 36, 1)) drop-shadow(0 0 0.34em rgba(230, 10, 10, 0.75));
  --font-logo: "Libre Baskerville", Georgia, serif;
  --font-type: "Courier Prime", "Courier New", monospace;
  --font-crt: "VT323", monospace;
  --font-paint: "Permanent Marker", cursive;
  --font-neon: "Tilt Neon", "Trebuchet MS", sans-serif;
  --font-file: "Special Elite", "Courier New", monospace;
  --font-ui: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --font-small: Verdana, Tahoma, "Segoe UI", sans-serif;
}

/* ---------- Tema HAWKINS: portal comunitário com neon anos 80 ---------- */
body.theme-hawkins {
  --bg: #0c0a22;
  --panel: #17133b;
  --panel-2: #201a4d;
  --line: #3a3378;
  --text: #efeaff;
  --muted: #aaa4d8;
  --red: #ff2e6b;
  --red-deep: #d0164a;
  --red-glow: rgba(255, 46, 107, 0.5);
  --teal: #27e3d6;
  --gold: #ffc53d;
  --spore: 255, 214, 120;
  /* brilho "gel" dos botões e cabeçalhos (metade de cima clara, de baixo escura) */
  --g1: #ff78a6; --g2: #ff3a74; --g3: #db1454; --g4: #ff4d82; --gb: #a50f3d;
  --h1: #7d60ff; --h2: #5b3ee6; --h3: #4527c8; --h4: #5a3ee4;
  --w1: #2fd9e6; --w2: #16b4c9; --w3: #0b91a8; --w4: #1ec3d8;
  --m1: #3d2c8f; --m2: #2b1d6e; --m3: #1e1257; --m4: #2b1b72;
  --t1: #1b1548; --t2: #120e34;
  --orb1: #ff4f8b; --orb2: #7a1a9a;
}
/* ---------- Tema MUNDO INVERTIDO: o mesmo portal, apodrecido ---------- */
body.theme-upside {
  --bg: #050608;
  --panel: #0c1016;
  --panel-2: #121821;
  --line: #2c1318;
  --text: #c9d2dd;
  --muted: #6f7f93;
  --red: #e0202e;
  --red-deep: #8a0c16;
  --red-glow: rgba(224, 32, 46, 0.45);
  --teal: #7f9bbd;
  --gold: #b8c4d4;
  --spore: 200, 215, 240;
  --g1: #d8404b; --g2: #a3131f; --g3: #6e0710; --g4: #8e0e18; --gb: #3a0308;
  --h1: #551019; --h2: #36080e; --h3: #220307; --h4: #30070c;
  --w1: #2a3441; --w2: #1a222c; --w3: #10161d; --w4: #18202a;
  --m1: #2c0b11; --m2: #1a060b; --m3: #0f0205; --m4: #1c050b;
  --t1: #0f0609; --t2: #070305;
  --orb1: #e0202e; --orb2: #2a0004;
}
/* cada elemento .t-h só aparece em Hawkins; .t-u só no Mundo Invertido */
.theme-hawkins .t-u, .theme-upside .t-h { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color 0.8s ease, color 0.8s ease;
}
body.theme-hawkins { background-image: radial-gradient(ellipse at 50% -10%, rgba(138, 60, 255, 0.35), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px); }
body.theme-upside { background-image: radial-gradient(ellipse at 50% -10%, rgba(160, 10, 20, 0.28), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 9px); }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid var(--bg); background: linear-gradient(90deg, var(--g2), var(--g3)); }

#spores { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes fogDrift { to { transform: translateX(8%); } }
@keyframes drift { to { transform: translateX(6%); } }

/* ===================== PORTÃO (fita VHS) ===================== */
.gate {
  position: fixed; inset: 0;
  z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #120406 0%, #000 72%);
  overflow: hidden;
  transition: opacity 0.8s ease;
}
.gate::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -20vh;
  height: 16vh;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.035), transparent);
  animation: roll 7s linear infinite;
  pointer-events: none;
}
.gate::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); pointer-events: none; }
@keyframes roll { to { transform: translateY(140vh); } }
.gate.fade { opacity: 0; pointer-events: none; }
.gate-inner { position: relative; z-index: 1; text-align: center; padding: 16px; }
.vhs-osd {
  position: absolute; z-index: 1;
  font-family: var(--font-crt);
  font-size: clamp(20px, 3.2vw, 32px);
  letter-spacing: 0.08em;
  color: #f1f1f1;
  text-shadow: 2px 0 rgba(255, 0, 40, 0.55), -2px 0 rgba(0, 200, 255, 0.55);
}
.vhs-tl { top: max(16px, 5vh); left: max(16px, 5vw); }
.vhs-br { bottom: max(16px, 5vh); right: max(16px, 5vw); }
.vhs-blink { animation: blink 1.2s steps(1) infinite; }
.gate-date { font-family: var(--font-crt); font-size: 22px; letter-spacing: 0.35em; color: #8d8578; margin: 0 0 28px; }
.gate-btn {
  background: transparent;
  color: #ff2626;
  border: 2px solid #ff2626;
  padding: 16px 34px;
  font-family: var(--font-logo);
  font-size: clamp(16px, 4vw, 22px);
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(255, 30, 30, 0.55);
  animation: pulse 2.4s ease-in-out infinite;
  transition: background 0.2s, color 0.2s;
}
.gate-btn:hover { background: #ff2626; color: #000; text-shadow: none; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 30, 30, 0.55), inset 0 0 14px rgba(255, 30, 30, 0.15); }
  50% { box-shadow: 0 0 34px rgba(255, 30, 30, 0.55), inset 0 0 24px rgba(255, 30, 30, 0.3); }
}
.gate-hint { color: #8d8578; font-size: 13px; margin: 18px 0 8px; font-family: var(--font-type); }
.link-btn { background: none; border: 0; color: #8d8578; text-decoration: underline; font-size: 14px; font-family: var(--font-type); }
.link-btn:hover { color: #ddd; }

/* ===================== ABERTURA ===================== */
.intro {
  position: fixed; inset: 0;
  z-index: 30;
  background: #000;
  overflow: hidden;
  font-family: var(--font-type);
  transition: opacity 1.4s ease;
}
.intro.fade { opacity: 0; pointer-events: none; }
.camera { position: absolute; inset: 0; z-index: 1; }
.scene {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.scene.show { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.scene.cut, .scene.cut.show { transition: none; }
.vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.78) 100%); }
.intro-ui { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; gap: 8px; opacity: 0.45; transition: opacity 0.3s; }
.intro-ui:hover, .intro-ui:focus-within { opacity: 1; }
.skip-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #bdb4a6;
  border: 1px solid #3a3a3a;
  padding: 6px 14px;
  font-family: var(--font-crt);
  font-size: 18px;
  letter-spacing: 0.1em;
}
.skip-btn:hover { color: #fff; border-color: #777; }
.intro-spores { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.5s ease; }
.intro-spores.on { opacity: 1; }

/* legendas de filme e rádio */
.subs {
  position: absolute; left: 50%; bottom: 11%; z-index: 4;
  max-width: 88vw;
  margin: 0;
  transform: translate(-50%, 6px);
  font-family: var(--font-type);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 28px);
  color: #f6eedb;
  text-align: center;
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.subs.on { opacity: 1; transform: translate(-50%, 0); }
.walkie {
  position: absolute; left: 50%; bottom: 9%; z-index: 4;
  transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
  max-width: 92vw;
  padding: 6px 14px;
  font-family: var(--font-crt);
  font-size: clamp(18px, 2.6vw, 26px);
  color: #d7f5d0;
  text-shadow: 0 0 8px rgba(120, 255, 140, 0.5);
  background: rgba(0, 0, 0, 0.5);
  border-left: 3px solid #5cff7a;
  opacity: 0;
  transition: opacity 0.2s;
}
.walkie.on { opacity: 1; }
.walkie-ch { color: #5cff7a; font-size: 0.8em; white-space: nowrap; }

/* --- 1. legenda --- */
.scene-open { display: grid; place-items: center; background: radial-gradient(ellipse at center, #0b0808 0%, #000 70%); }
.caption { margin: 0; text-align: center; font-family: var(--font-crt); letter-spacing: 0.3em; transition: opacity 1.2s ease; }
.scene-open.out .caption { opacity: 0; }
#cap1 { display: block; min-height: 1.2em; font-size: clamp(22px, 4vw, 40px); color: #eadfca; }
#cap2 { display: block; min-height: 1.2em; margin-top: 0.4em; font-size: clamp(15px, 2.4vw, 24px); color: #968a78; }
.vcr { display: block; min-height: 1.2em; margin-top: 1.4em; font-size: clamp(14px, 2vw, 20px); color: #ff3b3b; text-shadow: 0 0 8px rgba(255, 40, 40, 0.7); animation: blink 1s steps(1) infinite; }
.typing::after { content: "▌"; margin-left: 0.1em; color: #ff2626; animation: blink 0.8s steps(1) infinite; }

/* --- 2. parede com luzes --- */
.scene-lights {
  --cell: clamp(34px, 10vw, 106px);
  --bw: calc(var(--cell) * 0.15);
  --amb: 0.05;
  background: #000;
}
.rig { position: absolute; inset: -4%; animation: handheld 9s ease-in-out infinite alternate; }
@keyframes handheld {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0.4%, -0.3%) rotate(0.15deg); }
  50% { transform: translate(-0.3%, 0.25%) rotate(-0.1deg); }
  75% { transform: translate(0.25%, 0.4%) rotate(0.08deg); }
  100% { transform: translate(-0.4%, -0.2%) rotate(-0.12deg); }
}
.shake .rig { animation: jitter 0.12s steps(2) infinite; }
@keyframes jitter { 50% { transform: translate(0.4%, -0.3%) rotate(0.2deg); } }
.dolly { position: absolute; inset: 0; transition: transform 8s cubic-bezier(0.3, 0.1, 0.3, 1); }
.dolly.push { transform: scale(1.1); }
.dolly.push.push-fast { transform: scale(1.22); transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1); }
.dolly.flip { transform: rotate(180deg) scale(1.05); transition: transform 1.8s cubic-bezier(0.7, 0, 0.25, 1); }
.dolly.flip.creep { transform: rotate(180deg) scale(1.2); transition: transform 4.4s cubic-bezier(0.5, 0, 0.8, 0.6); }
.wall-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.wall-dim, .wall-lit {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(0, 0, 0, 0.28), transparent 42%),
    radial-gradient(ellipse at 78% 72%, rgba(70, 45, 10, 0.3), transparent 45%),
    radial-gradient(ellipse at 60% 15%, rgba(90, 70, 30, 0.18), transparent 35%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px calc(var(--cell) * 2.2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' fill='%234b3c27'/%3E%3Cpath d='M24 0C30 16 18 32 24 48S30 80 24 96M72 0C78 16 66 32 72 48S78 80 72 96' stroke='%233d4829' stroke-width='2' fill='none'/%3E%3Cg fill='%236c5533'%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Ccircle cx='31' cy='27' r='5'/%3E%3Ccircle cx='28' cy='34' r='5'/%3E%3Ccircle cx='20' cy='34' r='5'/%3E%3Ccircle cx='17' cy='27' r='5'/%3E%3Ccircle cx='72' cy='72' r='5'/%3E%3Ccircle cx='79' cy='75' r='5'/%3E%3Ccircle cx='76' cy='82' r='5'/%3E%3Ccircle cx='68' cy='82' r='5'/%3E%3Ccircle cx='65' cy='75' r='5'/%3E%3C/g%3E%3Cg fill='%237a3827'%3E%3Ccircle cx='24' cy='29' r='3.2'/%3E%3Ccircle cx='72' cy='77' r='3.2'/%3E%3C/g%3E%3Cg fill='%23434f2d'%3E%3Cellipse cx='31' cy='57' rx='6.5' ry='2.6' transform='rotate(-32 31 57)'/%3E%3Cellipse cx='65' cy='44' rx='6.5' ry='2.6' transform='rotate(32 65 44)'/%3E%3Cellipse cx='17' cy='8' rx='5' ry='2.2' transform='rotate(28 17 8)'/%3E%3Cellipse cx='79' cy='92' rx='5' ry='2.2' transform='rotate(-28 79 92)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--cell) * 0.95) auto,
    #4b3c27;
}
.wall-dim { filter: brightness(var(--amb)) saturate(0.85); transition: filter 0.25s ease; }
.wall-lit { -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
.wall-fix .letter { visibility: hidden; }
.wall-grid { display: flex; flex-direction: column; gap: calc(var(--cell) * 0.32); }
.wall-row { display: flex; justify-content: center; }
.cell { position: relative; width: var(--cell); padding-top: calc(var(--cell) * 0.66); text-align: center; }
.letter {
  display: inline-block;
  font-family: var(--font-paint);
  font-size: calc(var(--cell) * 0.72);
  line-height: 1;
  color: #0d0a06;
  text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.05);
  transform: rotate(var(--lr, 0deg));
}
.wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: #0f0e0a; stroke-width: 2.6; stroke-linecap: round; }
.wire-hi { stroke: #34322a; stroke-width: 0.9; transform: translateY(-0.8px); }
.tack { fill: #6d6a5e; stroke: #1a1914; stroke-width: 1; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.bulb {
  position: absolute;
  top: calc(var(--cell) * 0.2); left: 50%;
  width: var(--bw); height: calc(var(--bw) * 1.6);
  margin-left: calc(var(--bw) / -2);
  border-radius: 46% 46% 50% 50% / 34% 34% 66% 66%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.6) 0 9%, transparent 24%),
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c) 65%, #fff) 0, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  filter: brightness(0.3) saturate(0.55);
  transform-origin: 50% -25%;
  transform: rotate(var(--r, 0deg));
  transition: filter 0.05s linear, box-shadow 0.05s linear;
  z-index: 2;
}
.bulb::before { content: ""; position: absolute; left: 18%; right: 18%; top: -34%; height: 40%; border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #07140a, #2b3d2b 40%, #0a150b); }
.bulb::after { content: ""; position: absolute; left: 30%; right: 30%; top: 26%; bottom: 30%; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.05s; }
.bulb.half { filter: brightness(0.75) saturate(0.95); box-shadow: 0 0 calc(var(--bw) * 0.9) calc(var(--bw) * 0.1) var(--c); }
.bulb.on {
  filter: brightness(1.25) saturate(1.15);
  box-shadow: 0 0 calc(var(--bw) * 0.6) calc(var(--bw) * 0.22) var(--c), 0 0 calc(var(--bw) * 3) calc(var(--bw) * 0.7) color-mix(in srgb, var(--c) 60%, transparent);
}
.bulb.on::after { opacity: 0.9; }
.surge .bulb.on { filter: brightness(1.9) saturate(0.7); }
.bulb.dead { filter: brightness(0.14) saturate(0.2) !important; box-shadow: none !important; }
.bulb.dead::after { opacity: 0 !important; }
.spill {
  position: absolute; left: 50%;
  top: calc(var(--cell) * 0.2 + var(--bw) * 0.9);
  width: calc(var(--cell) * 3.2);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, transparent) 0, color-mix(in srgb, var(--c) 20%, transparent) 32%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.05s linear;
}
.flash-glow { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 238, 200, 0.3) 0, rgba(255, 226, 180, 0.12) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.flash-on .flash-glow { opacity: 1; }
.sparks i { position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 6px 2px #ffae3a; animation: spark 0.8s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* --- 3. Mundo Invertido na parede --- */
.cold-tint { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(40, 70, 120, 0.15), rgba(2, 6, 16, 0.72)); opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.upside .cold-tint { opacity: 1; }
.upside .wall-dim { filter: brightness(0.3) saturate(0.25) hue-rotate(190deg) contrast(1.1); transition: filter 1.5s ease; }
.upside .wall-lit { display: none; }
.upside .bulb { filter: grayscale(1) brightness(0.35) !important; }
.upside.strike .wall-dim { filter: brightness(1.05) saturate(0.4) hue-rotate(190deg) contrast(1.2); transition: none; }
.upside.strike .cold-tint { background: radial-gradient(ellipse at 50% 0%, rgba(255, 40, 40, 0.35), rgba(10, 0, 20, 0.4)); transition: none; }
.ud-fog {
  position: absolute; left: -20%; right: -20%; bottom: -6%; height: 42%;
  background: radial-gradient(ellipse 40% 50% at 30% 70%, rgba(80, 100, 140, 0.3), transparent 70%), radial-gradient(ellipse 40% 50% at 70% 80%, rgba(80, 100, 140, 0.25), transparent 70%);
  opacity: 0;
  transition: opacity 2s;
  animation: fogDrift 10s linear infinite alternate;
  pointer-events: none;
}
.upside .ud-fog { opacity: 1; }

/* brilho vermelho que cresce atrás das vinhas (sem bordas: só luz) */
.red-bloom {
  position: absolute; left: 50%; top: 50%;
  width: 110vmax; height: 110vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 70, 45, 0.85) 0%, rgba(210, 12, 12, 0.5) 22%, rgba(110, 0, 0, 0.22) 45%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  pointer-events: none;
}
.red-bloom.on { opacity: 1; transform: translate(-50%, -50%) scale(1.25); transition: opacity 3s ease-in, transform 4s cubic-bezier(0.5, 0, 0.8, 0.6); animation: bloomBeat 0.9s ease-in-out 1.2s infinite; }
@keyframes bloomBeat { 50% { filter: brightness(1.35); } }
/* a tela inteira fica vermelha e depois se abre para o título */
.redout {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, #ff4a2a 0%, #b30a0a 38%, #3a0000 78%, #0c0000 100%);
}
.redout.flick { animation: redFlick 0.26s ease-out; }
@keyframes redFlick { 0% { opacity: 0; } 30% { opacity: 0.75; } 100% { opacity: 0; } }
.redout.in { opacity: 1; transition: opacity 0.6s ease-in; }
.redout.out { opacity: 0; transition: opacity 1.8s ease-out; }

.vines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75)); }
.vines.pulse { animation: vinePulse 0.7s ease-out; }
.vines.charged .vine-vein { stroke-width: 1.2; stroke: #c54941; animation-duration: 2.4s; opacity: 0.55; }
@keyframes vinePulse { 0% { filter: drop-shadow(0 0 14px rgba(255, 40, 40, 0.9)) brightness(1.9); } 100% { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75)); } }
/* vinhas: corpo carnudo, brilho úmido e pulsos vermelhos correndo por dentro */
.vine-body { fill: #211a22; stroke: #080910; stroke-width: 0.65; stroke-linejoin: round; }
.vine-fiber { fill: #877079; opacity: 0.27; }
.vine-fold { fill: none; stroke: #07050b; stroke-width: 0.7; opacity: 0.65; stroke-linecap: round; }
.vine-shine { fill: none; stroke: rgba(193, 177, 192, 0.3); stroke-linecap: round; transform: translate(-0.8px, -0.8px); }
.vine-vein { fill: none; stroke: #a63136; stroke-width: 0.8; stroke-linecap: round; stroke-dasharray: 2 98; animation: vein 4.8s linear infinite; opacity: 0.4; }
@keyframes vein { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.vine-grow { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.grow .vine-grow { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t) cubic-bezier(0.3, 0.6, 0.2, 1) var(--d); }

.bolt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 4px #ff3a3a) drop-shadow(0 0 18px #ff0000); }
.bolt path, .site-bolt path { fill: none; stroke: #ffe6e6; stroke-linejoin: round; stroke-linecap: round; }
.bolt.go { animation: strike 0.5s linear forwards; }
.lightning { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 70, 60, 0.55), rgba(140, 0, 0, 0.25) 45%, transparent 75%); mix-blend-mode: screen; }
.lightning.go { animation: strike 0.5s linear forwards; }
.lightning.pop { background: rgba(255, 244, 220, 0.9); animation: popflash 0.35s ease-out forwards; }
@keyframes strike { 0% { opacity: 1; } 12% { opacity: 0.1; } 22% { opacity: 1; } 40% { opacity: 0.2; } 52% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes popflash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.camera.glitch { animation: glitch 0.4s steps(1) forwards; }
@keyframes glitch {
  0% { transform: translate(-2%, 0); filter: drop-shadow(6px 0 0 rgba(255, 0, 40, 0.8)) drop-shadow(-6px 0 0 rgba(0, 220, 255, 0.8)); clip-path: inset(10% 0 55% 0); }
  20% { transform: translate(3%, 1%); clip-path: inset(40% 0 20% 0); }
  40% { transform: translate(-1%, -1%) scale(1.04); clip-path: inset(0 0 70% 0); }
  60% { transform: translate(2%, 0); clip-path: inset(60% 0 5% 0); filter: drop-shadow(-8px 0 0 rgba(255, 0, 40, 0.8)) drop-shadow(8px 0 0 rgba(0, 220, 255, 0.8)); }
  80% { transform: translate(0, 0); clip-path: inset(30% 0 30% 0); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
}

/* --- 4. closes nas letras --- */
.scene-closeup { background: #000; }
.audio-sequence { transition: none !important; }
#title-film { display: none; }
.vector-sequence #title-film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.vector-sequence #intro-logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vector-sequence .title-haze, .vector-sequence .light-leak, .vector-sequence .flare { display: none; }
.vector-sequence #title-zoom { position: absolute; inset: 0; transform: none; }
.vector-sequence .intro-sub {
  position: absolute; top: var(--subtitle-top, 70%); left: 5%; right: 5%; margin: 0;
  font: 11px/1.5 var(--font-ui); letter-spacing: 0.38em; color: #bb877e;
}
.closeup-cam { position: absolute; left: 50%; top: 50%; }
.closeup-cam.go { animation: closeupMove var(--dur, 1400ms) cubic-bezier(0.3, 0.1, 0.3, 1) forwards; }
@keyframes closeupMove {
  0% { transform: translate(var(--x0), var(--y0)) scale(var(--s0)); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(var(--s1)); opacity: 1; }
}
.closeup-ch {
  display: block;
  transform: translate(-50%, -50%);
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 118vmin;
  line-height: 1;
  color: #090000;
  -webkit-text-stroke: 0.036em var(--neon-red);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 0.006em #ff8f6c) drop-shadow(0 0 0.035em rgba(255, 38, 22, 0.9)) drop-shadow(0 0 0.12em rgba(205, 0, 0, 0.5));
}
/* luz vazando pela lente, como filme antigo */
.light-leak {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse 40% 30% at 20% 30%, rgba(255, 80, 40, 0.16), transparent 70%), radial-gradient(ellipse 30% 40% at 80% 70%, rgba(255, 160, 80, 0.1), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: leak 9s ease-in-out infinite alternate;
}
@keyframes leak { to { transform: translate(6%, -4%) rotate(4deg); opacity: 0.6; } }

/* --- 5. título --- */
.scene-title { display: grid; place-items: center; background: #000; }
.title-haze { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(120, 0, 0, 0.3), transparent 70%); opacity: 0; transition: opacity 6s ease; }
.scene-title.show .title-haze { opacity: 1; }
.scene-title.bloom .title-haze { animation: bloom 2.4s ease-out; }
@keyframes bloom { 0% { opacity: 1; filter: brightness(3); } 100% { opacity: 1; filter: brightness(1); } }
.title-zoom { position: relative; text-align: center; transform-origin: center; }
.title-zoom.go { animation: titleZoom 11s cubic-bezier(0.2, 0.5, 0.25, 1) forwards; }
@keyframes titleZoom { from { transform: scale(1.7); } to { transform: scale(1); } }
.flare {
  position: absolute; left: 50%; top: 50%;
  width: 150vw; height: 2px;
  transform: translate(-50%, -50%) scaleX(0);
  background: linear-gradient(90deg, transparent 5%, rgba(255, 60, 40, 0.5) 30%, rgba(255, 110, 80, 0.95) 47%, #fff 50%, rgba(255, 110, 80, 0.95) 53%, rgba(255, 60, 40, 0.5) 70%, transparent 95%);
  box-shadow: 0 0 22px 5px rgba(255, 40, 20, 0.45);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.flare.go { animation: flare 2.4s ease-out forwards; }
@keyframes flare {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.05); }
  12% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.25); }
}
.intro-sub {
  min-height: 1.3em;
  margin: calc(var(--logo-size, 60px) * 0.22) 0 0;
  font-family: var(--font-crt);
  font-size: clamp(15px, 2.4vw, 25px);
  letter-spacing: 0.4em;
  color: #d8c8b4;
}

/* ===================== LOGO (abertura e topo do site) =====================
   Letras escuras com contorno vermelho por fora (o traço é pintado por baixo
   do preenchimento), como o logo da série: contorno limpo, sem engolir serifas. */
.logo {
  --logo-size: clamp(40px, 11.5vw, 140px);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: var(--logo-size);
  line-height: 1;
  color: transparent;
  text-rendering: geometricPrecision;
}
.logo-line1 { display: flex; align-items: baseline; white-space: nowrap; letter-spacing: -0.005em; }
.logo-line2 { display: flex; align-items: baseline; white-space: nowrap; font-size: 0.7em; letter-spacing: 0.03em; }
.logo .ch {
  display: inline-block;
  color: #0a0000;
  -webkit-text-stroke: 0.05em var(--neon-red);
  paint-order: stroke fill;
  filter: var(--neon);
}
.logo .ch.big { font-size: 1.3em; position: relative; top: 0.1em; }
.logo .ch.fly { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)); }
.logo .ch.land { opacity: 1; transform: none; transition: transform var(--fd, 7s) cubic-bezier(0.16, 0.6, 0.22, 1), opacity 1.8s ease; }
.baseline-probe { display: inline-block; width: 0; height: 0; }
.logo-bar { display: block; height: 0.03em; background: var(--neon-red); border-radius: 1px; filter: var(--neon); }
.logo-bar-top { position: absolute; left: 14%; right: 14%; top: 0.12em; }
.logo-bar-top.placed { right: auto; }
.logo-line2-wrap { display: flex; align-items: center; align-self: stretch; gap: 0.18em; margin-top: 0.05em; }
.logo-line2-wrap .logo-bar { flex: 1; }
.intro .logo-bar { transform: scaleX(0); }
.intro .logo-bar-left { transform-origin: right center; }
.intro .logo-bar-right { transform-origin: left center; }
.intro .logo-bar.grow { transform: scaleX(1); transition: transform 3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.logo.breath { animation: breath 3.4s ease-in-out infinite; }
@keyframes breath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* =========================================================
   SITE — portal no estilo 2005–2010 (brilho "gel", abas,
   coluna lateral com widgets), com as cores de agora
   ========================================================= */
.site { position: relative; z-index: 1; }
.site.entering { animation: siteIn 1.6s ease; }
@keyframes siteIn { from { opacity: 0; } to { opacity: 1; } }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 14px; }

/* barrinha do topo */
.topbar { position: relative; z-index: 3; background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid var(--line); font: 12px/1.4 var(--font-small); color: var(--muted); }
.topbar-in { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; }
.topbar a { color: var(--teal); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar b { color: var(--text); }

/* cabeçalho brilhante */
.masthead {
  position: relative; z-index: 3;
  background: linear-gradient(var(--m1), var(--m2) 50%, var(--m3) 50%, var(--m4));
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.orb {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 700 20px var(--font-logo);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 50% 65%, var(--orb1), var(--orb2));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 -4px 10px rgba(0, 0, 0, 0.35), 0 0 18px var(--red-glow);
}
.orb::after { content: ""; position: absolute; left: 12%; right: 12%; top: 5%; height: 45%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.05)); }
.brand-text { font: 700 23px/1.1 var(--font-ui); letter-spacing: -0.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.brand-text b { color: var(--gold); }
.brand-text small { display: block; margin-top: 3px; font: 12px var(--font-small); color: rgba(255, 255, 255, 0.72); text-shadow: none; }
.masthead-actions { display: flex; gap: 10px; align-items: center; }

/* chave Hawkins ⇄ Mundo Invertido */
.theme-switch {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font: 700 11px var(--font-small);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.sw-track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: #1b1d3a; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); transition: background 0.5s; }
.sw-knob {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 15%, var(--gold) 45%);
  box-shadow: 0 0 10px var(--gold);
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.3, 1.4), background 0.5s, box-shadow 0.5s;
}
.theme-upside .sw-track { background: #2a0508; }
.theme-upside .sw-knob { transform: translateX(18px); background: radial-gradient(circle at 40% 35%, #ffb3b3 0 15%, var(--red) 45%); box-shadow: 0 0 12px var(--red); }
.theme-hawkins .sw-h, .theme-upside .sw-u { color: #fff; }

/* botões "gel" */
.gloss-btn {
  display: inline-block;
  position: relative;
  padding: 11px 24px;
  border-radius: 8px;
  border: 1px solid var(--gb);
  font: 700 15px var(--font-ui);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(var(--g1), var(--g2) 50%, var(--g3) 51%, var(--g4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.gloss-btn:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 14px var(--red-glow); }
.gloss-btn:active { transform: translateY(1px); filter: brightness(0.95); }
.gloss-btn[disabled] { opacity: 0.6; cursor: wait; }
.theme-hawkins .gloss-alt { --g1: #86ecff; --g2: #2cc9e8; --g3: #0f9dbd; --g4: #2dd4f0; --gb: #0b7390; }
.theme-upside .gloss-alt { --g1: #5f6b7a; --g2: #3a4350; --g3: #232a33; --g4: #313944; --gb: #11161c; }
.gloss-small { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* abas de navegação */
.tabs-nav { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--t1), var(--t2)); border-bottom: 3px solid var(--g3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.tabs-in { display: flex; gap: 4px; padding-top: 7px; overflow-x: auto; scrollbar-width: none; }
.tabs-nav a {
  padding: 8px 18px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font: 700 14px var(--font-ui);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  transition: color 0.15s, background 0.15s;
}
.tabs-nav a:hover { color: #fff; background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); }
.tabs-nav a.active { color: #fff; border-color: rgba(0, 0, 0, 0.3); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); background: linear-gradient(var(--g1), var(--g2) 50%, var(--g3) 51%, var(--g4)); }

/* cada aba é uma página de conteúdo; o DOM continua vivo para preservar chats e formulários */
#site.site-pages .site-page:not(.page-active),
#site.site-pages .layout:not(.page-active-layout) { display: none !important; }
#site.site-pages .layout.page-active-layout:not(.show-side) { grid-template-columns: minmax(0, 1fr); }
#site.site-pages .layout.page-active-layout:not(.show-side) .side-col { display: none !important; }
#site.site-pages .site-page.page-entering { animation: pageEnter 0.42s ease-out both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.page-transition { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; opacity: 0; overflow: hidden; }
.page-transition.playing { visibility: visible; animation: pageVeil 0.56s ease-in-out both; }
.page-transition::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(123, 8, 28, 0.85), #09030d 72%); }
.theme-hawkins .page-transition::before { background: radial-gradient(ellipse at 50% 50%, rgba(255, 39, 84, 0.85), rgba(26, 5, 37, 0.98) 72%); }
.page-transition::after { content: ""; position: absolute; inset: 0; opacity: 0.28; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.65) 3px 4px); }
.page-transition-rift { position: absolute; left: 50%; top: 50%; width: min(86vw, 760px); height: 6px; transform: translate(-50%, -50%) scaleX(0.04); border-radius: 50%; background: #fff5dc; box-shadow: 0 0 20px 7px #f42d43, 0 0 95px 35px rgba(238, 0, 26, 0.9), 0 0 180px 80px rgba(238, 0, 26, 0.45); }
.page-transition.playing .page-transition-rift { animation: pageRift 0.56s ease-in-out both; }
@keyframes pageVeil { 0% { opacity: 0; } 34%, 58% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pageRift { 0% { transform: translate(-50%, -50%) scaleX(0.04); opacity: 0; } 36% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; } 62% { transform: translate(-50%, -50%) scaleX(0.8); opacity: 1; } 100% { transform: translate(-50%, -50%) scaleX(0.02); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #site.site-pages .site-page.page-entering { animation: none; }
  .page-transition { display: none; }
}

/* faixa principal */
.hero-wrap { padding-top: 18px; }
.hero {
  position: relative;
  min-height: 470px;
  display: flex; align-items: center; justify-content: center;
  padding: 92px 16px 48px;
  overflow: hidden;
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero::after { /* brilho de vidro na metade de cima */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg > * { position: absolute; }
.hero-content { position: relative; z-index: 3; }
.small-logo { --logo-size: clamp(34px, 8.6vw, 104px); }
.hero-logo { animation: flicker 7s infinite; }
/* passar o mouse acende o neon de vez: para de piscar e brilha mais forte */
.hero-logo:hover { animation: neonOn 0.5s steps(1); }
.hero-logo .ch, .hero-logo .logo-bar { transition: filter 0.25s ease; }
.hero-logo:hover .ch, .hero-logo:hover .logo-bar { filter: var(--neon-hot); }
.hero-logo:hover .ch { -webkit-text-stroke-color: #ff4a36; }
@keyframes neonOn { 0% { opacity: 0.5; } 20% { opacity: 1; } 35% { opacity: 0.6; } 50%, 100% { opacity: 1; } }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.4; } 94% { opacity: 1; } 96% { opacity: 0.6; } 97% { opacity: 1; } }
.hero-tag { max-width: 620px; margin: 30px auto 24px; font-family: var(--font-type); font-size: clamp(15px, 2.2vw, 19px); min-height: 3.2em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.typewriter::after { content: "▌"; animation: blink 1s steps(1) infinite; color: var(--red); margin-left: 2px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* selo estrelado "NOVO!" */
.starburst {
  position: absolute; top: 64px; right: 5%; z-index: 4;
  width: 98px; height: 98px;
  display: grid; place-items: center;
  font: 900 15px/1.05 var(--font-ui);
  text-align: center;
  clip-path: polygon(50% 0%, 60.35% 11.36%, 75% 6.7%, 78.28% 21.72%, 93.3% 25%, 88.64% 39.65%, 100% 50%, 88.64% 60.35%, 93.3% 75%, 78.28% 78.28%, 75% 93.3%, 60.35% 88.64%, 50% 100%, 39.65% 88.64%, 25% 93.3%, 21.72% 78.28%, 6.7% 75%, 11.36% 60.35%, 0% 50%, 11.36% 39.65%, 6.7% 25%, 21.72% 21.72%, 25% 6.7%, 39.65% 11.36%);
  animation: burst 1.8s ease-in-out infinite;
}
.theme-hawkins .starburst { background: radial-gradient(circle at 40% 35%, #fff6a8, #ffd21f 60%, #ffae00); color: #c4002e; }
.theme-upside .starburst { background: radial-gradient(circle at 40% 35%, #5a0a10, #1a0003 70%); color: #ff4a4a; }
@keyframes burst { 0%, 100% { transform: rotate(12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.1); } }

/* céu noturno com auroras de neon e luzes desfocadas (Hawkins) */
.sky-h { inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 125%, #3d1558 0%, transparent 60%), linear-gradient(#07061a 0%, #110c31 45%, #1b0f40 75%, #2a1045 100%); }
.sky-h::before {
  content: "";
  position: absolute; inset: 0 0 45% 0;
  background-image: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 26%, #fff, transparent), radial-gradient(1px 1px at 61% 12%, #fff, transparent), radial-gradient(1px 1px at 77% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 10%, #fff, transparent), radial-gradient(1px 1px at 6% 38%, #fff, transparent), radial-gradient(1px 1px at 53% 40%, #fff, transparent), radial-gradient(1px 1px at 35% 45%, #fff, transparent), radial-gradient(1px 1px at 94% 42%, #fff, transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}
.aurora { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; filter: blur(70px); opacity: 0.42; mix-blend-mode: screen; }
.aurora.a1 { left: -22%; top: -35%; background: radial-gradient(circle, #ff2e8a 0%, transparent 62%); animation: aur1 18s ease-in-out infinite alternate; }
.aurora.a2 { right: -25%; bottom: -45%; background: radial-gradient(circle, #1fd6d0 0%, transparent 62%); animation: aur2 23s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate(22vw, 14vh) scale(1.15); } }
@keyframes aur2 { to { transform: translate(-20vw, -12vh) scale(0.9); } }
.bokeh { position: absolute; inset: 0; }
.bokeh i { position: absolute; bottom: -20%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--c), transparent 70%); filter: blur(var(--b)); opacity: 0; animation: bokehUp var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes bokehUp { 0% { transform: translate(0, 0); opacity: 0; } 15%, 80% { opacity: var(--o); } 100% { transform: translate(var(--dx), -125vh); opacity: 0; } }

/* céu de tempestade, neblina e brilho vermelho pulsando (Invertido) */
.sky-u { inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 115%, #4a080e 0%, transparent 58%), linear-gradient(#050000 0%, #1f0306 45%, #0c0205 100%); }
.hero-clouds { position: absolute; left: -15%; top: 0; width: 130%; height: 75%; animation: drift 40s linear infinite alternate; }
.hero-fog { position: absolute; left: -30%; width: 160%; height: 45%; background: radial-gradient(ellipse 30% 50% at 25% 60%, rgba(90, 110, 150, 0.22), transparent 70%), radial-gradient(ellipse 35% 50% at 70% 50%, rgba(90, 110, 150, 0.18), transparent 70%); animation: fogDrift 16s linear infinite alternate; }
.hero-fog.f1 { bottom: -5%; }
.hero-fog.f2 { bottom: 20%; opacity: 0.6; animation-duration: 24s; animation-direction: alternate-reverse; }
.red-pulse { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 30, 40, 0.35), transparent 65%); animation: redPulse 5s ease-in-out infinite; }
@keyframes redPulse { 50% { opacity: 0.35; } }

/* luzes de Natal penduradas no topo da faixa */
.hero-lights { left: 0; right: 0; top: 0; height: 90px; z-index: 1; }
.hero-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-lights .wire { stroke: #07060c; stroke-width: 2.4; }
.hl-bulb {
  position: absolute;
  width: 12px; height: 19px;
  margin-left: -6px;
  border-radius: 46% 46% 50% 50% / 34% 34% 66% 66%;
  background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.6) 0 10%, transparent 26%), var(--c);
  transform: rotate(var(--r));
  transform-origin: 50% -30%;
  filter: brightness(0.35) saturate(0.5);
}
.hl-bulb::before { content: ""; position: absolute; left: 18%; right: 18%; top: -30%; height: 36%; border-radius: 2px; background: #122416; }
.theme-hawkins .hl-bulb { animation: hlChase 2.4s steps(1) infinite; animation-delay: calc(var(--i) * -0.15s); }
@keyframes hlChase {
  0%, 58% { filter: none; box-shadow: 0 0 8px 2px var(--c), 0 0 26px 7px color-mix(in srgb, var(--c) 45%, transparent); }
  58.01%, 100% { filter: brightness(0.35) saturate(0.5); box-shadow: none; }
}
.theme-upside .hl-bulb { filter: grayscale(1) brightness(0.28); }
.theme-upside .hl-bulb.flick { filter: none; background: #ff2323; box-shadow: 0 0 10px 3px #ff2323, 0 0 30px 8px rgba(255, 30, 30, 0.45); }
.scanlines { inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px); opacity: 0.45; pointer-events: none; }

/* letreiro de notícias */
.ticker {
  display: flex; align-items: stretch;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(#1c1c22, #060608);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.ticker-label {
  flex: 0 0 auto;
  display: flex; align-items: center;
  margin: 5px;
  padding: 2px 12px;
  border-radius: 6px;
  font: 700 12px var(--font-small);
  letter-spacing: 0.08em;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(var(--g1), var(--g2) 50%, var(--g3) 51%, var(--g4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ticker-track { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-move { display: inline-flex; white-space: nowrap; animation: marquee 45s linear infinite; font: 13px var(--font-small); color: var(--muted); }
.ticker-move span { padding: 0 26px; }
.theme-hawkins .ticker-move span::before { content: "★ "; color: var(--gold); }
.theme-upside .ticker-move { animation-duration: 60s; color: #ff5a64; text-shadow: 0 0 6px rgba(224, 32, 46, 0.6); font-family: var(--font-crt); font-size: 17px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* duas colunas: conteúdo e widgets */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; padding-top: 22px; padding-bottom: 30px; }
.main-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.side-col { display: flex; flex-direction: column; gap: 16px; }

/* caixas com cabeçalho brilhante */
.box { position: relative; z-index: 1; overflow: hidden; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.box-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(var(--h1), var(--h2) 50%, var(--h3) 51%, var(--h4));
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.box-head h2 { flex: 1; margin: 0; font: 700 18px var(--font-ui); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.box-icon { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: #fff; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.box-tag { padding: 2px 9px; border-radius: 999px; font: 700 11px var(--font-small); color: #fff; background: rgba(0, 0, 0, 0.3); }
.box-body { padding: 18px; }
.lead { margin: 0 0 18px; color: var(--muted); }
.muted { color: var(--muted); text-align: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }

/* widgets da lateral */
.widget { position: relative; z-index: 1; overflow: hidden; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.widget-head { padding: 7px 12px; font: 700 13px var(--font-ui); letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background: linear-gradient(var(--w1), var(--w2) 50%, var(--w3) 51%, var(--w4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.widget-body { margin: 0; padding: 12px; font-size: 13px; }
.status p { margin: 0 0 8px; }
.status-label { font: 11px var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #3cf07a; box-shadow: 0 0 8px #3cf07a; animation: blink 1.6s steps(1) infinite; }
.theme-upside .dot { background: var(--red); box-shadow: 0 0 8px var(--red); animation-duration: 0.9s; }
.lcd { display: inline-block; padding: 2px 10px; border-radius: 4px; font-family: var(--font-crt); font-size: 28px; letter-spacing: 0.18em; background: #040804; color: #5cff7a; border: 1px solid #1d3a22; text-shadow: 0 0 8px #5cff7a; }
.theme-upside .lcd { background: #080202; color: #ff3b3b; border-color: #3a0a0e; text-shadow: 0 0 8px #ff3b3b; }
.latest { list-style: none; }
.latest li { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.latest li:last-child { border-bottom: 0; }
.latest .mini { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 700 11px var(--font-small); color: #fff; background: linear-gradient(hsl(var(--hue) 80% 62%), hsl(var(--hue) 70% 42%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.theme-upside .latest .mini { background: #222a33; color: #7f8fa3; }
.latest small { display: block; color: var(--muted); font-size: 11px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 8px; }
.eq i { flex: 1; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(to top, #3cf07a, #ffc53d 60%, #ff2e5b); transform-origin: bottom; animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2n) { animation-duration: 0.6s; }
.eq i:nth-child(3n) { animation-duration: 1.2s; }
.eq i:nth-child(4n+1) { animation-delay: -0.4s; }
.eq i:nth-child(5n) { animation-duration: 0.75s; animation-delay: -0.2s; }
@keyframes eq { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
.theme-upside .eq i { background: linear-gradient(to top, #3a0a0e, #e0202e); animation-duration: 2.4s; opacity: 0.7; }
.now { margin: 0; font-size: 12px; color: var(--muted); }
.now b { color: var(--text); }
.tags { line-height: 1.9; }
.tags a { display: inline-block; margin: 0 4px; color: var(--teal); text-decoration: none; cursor: default; }
.tags a:hover { text-decoration: underline; }
.tags .s1 { font-size: 11px; }
.tags .s2 { font-size: 13px; }
.tags .s3 { font-size: 16px; }
.tags .s4 { font-size: 19px; font-weight: 700; }
.theme-upside .tags a { color: #8a98aa; }
.theme-upside .tags .s4 { color: var(--red); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  width: 88px; height: 31px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  font: 700 7.5px/1.15 var(--font-small);
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.badge b { font-size: 9px; }
.badge:hover { transform: translateY(-2px) scale(1.06); }
.theme-hawkins .b1 { background: #27e3d6; color: #120d33; }
.theme-hawkins .b2 { background: #ffc53d; color: #3a1a00; }
.theme-hawkins .b3 { background: #ff4fc8; color: #fff; }
.theme-hawkins .b4 { background: #8a3cff; color: #fff; }
.theme-hawkins .b5 { background: #ff2e5b; color: #fff; }
.theme-hawkins .b6 { background: linear-gradient(#fff, #cfd6e6); color: #1a1446; }
.theme-upside .badge { background: #0a0f16; color: #6f8196; border-color: #2a0a0e; box-shadow: none; }
.theme-upside .b5 { color: #ff3b3b; }

/* placas de neon dos lugares (Hawkins) */
.neon-card {
  position: relative;
  padding: 22px 20px 20px;
  border: 2px solid var(--n);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 22, 52, 0.92), rgba(12, 10, 30, 0.96));
  box-shadow: 0 0 10px var(--n), 0 0 26px color-mix(in srgb, var(--n) 30%, transparent), inset 0 0 16px color-mix(in srgb, var(--n) 22%, transparent);
  transition: transform 0.25s, box-shadow 0.25s;
}
.neon-card:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: 0 0 16px var(--n), 0 0 44px color-mix(in srgb, var(--n) 50%, transparent), inset 0 0 22px color-mix(in srgb, var(--n) 32%, transparent); }
.neon-title { margin: 0 0 10px; font-family: var(--font-neon); font-weight: 400; font-size: 28px; line-height: 1.1; color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px var(--n), 0 0 22px var(--n), 0 0 40px var(--n); animation: neonFlicker 7s infinite; }
.neon-card:nth-child(2) .neon-title { animation-delay: -2s; }
.neon-card:nth-child(3) .neon-title { animation-delay: -4.5s; }
.neon-card:nth-child(4) .neon-title { animation-delay: -1s; }
.neon-card:nth-child(5) .neon-title { animation-delay: -5.5s; }
.neon-card:nth-child(6) .neon-title { animation-delay: -3.2s; }
@keyframes neonFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.35; } }
.neon-card p { margin: 0; color: #d9d4f2; font-size: 14px; }
.neon-tag { display: inline-block; margin-top: 14px; padding: 2px 10px; border: 1px solid var(--n); border-radius: 4px; color: var(--n); font-family: var(--font-crt); font-size: 16px; letter-spacing: 0.1em; }

/* moradores: anuário (Hawkins) e cartazes de desaparecido (Invertido) */
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.players .muted { grid-column: 1 / -1; }
.player { position: relative; transition: transform 0.25s, box-shadow 0.25s; }
.player h4 { margin: 6px 0 0; font-family: var(--font-logo); font-size: 18px; }
.player .role { margin: 4px 0 8px; font-size: 13px; }
.player .meta { margin: 0; font-size: 12px; }
.p-avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font: 700 21px var(--font-logo); }
.theme-hawkins .player { --hue: 330; padding: 0 16px 16px; background: #f6f1e7; color: #1c1a2e; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.theme-hawkins .player:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 3px hsl(var(--hue) 90% 60%); }
.theme-hawkins .p-band { margin: 0 -16px 12px; padding: 5px 16px; background: linear-gradient(hsl(var(--hue) 85% 62%), hsl(var(--hue) 85% 52%) 50%, hsl(var(--hue) 80% 45%) 51%, hsl(var(--hue) 85% 52%)); color: #fff; font: 700 11px var(--font-small); letter-spacing: 0.1em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
.theme-hawkins .p-avatar { background: hsl(var(--hue) 80% 88%); color: hsl(var(--hue) 70% 32%); border: 3px solid hsl(var(--hue) 85% 55%); }
.theme-hawkins .player .role { color: hsl(var(--hue) 70% 40%); font-weight: 700; }
.theme-hawkins .player .meta { color: #5a5670; }
.theme-upside .player { padding: 14px 14px 16px; background: #cfc6b0; color: #16130f; text-align: center; filter: grayscale(0.55) brightness(0.8) contrast(1.05); transform: rotate(-1.5deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8); }
.theme-upside .player:nth-child(even) { transform: rotate(1.8deg); }
.theme-upside .player::before { content: ""; position: absolute; left: 50%; top: -9px; width: 70px; height: 20px; margin-left: -35px; background: rgba(220, 220, 200, 0.45); transform: rotate(-4deg); }
.theme-upside .player:hover { filter: grayscale(0.2) brightness(0.95); transform: rotate(0) scale(1.03); }
.theme-upside .p-band { margin-bottom: 12px; padding-bottom: 4px; border-bottom: 3px solid #16130f; font: 700 24px var(--font-logo); letter-spacing: 0.06em; color: #7a0a10; }
.theme-upside .p-avatar { margin: 0 auto; width: 80px; height: 90px; border-radius: 2px; color: transparent; border: 2px solid #16130f; background: radial-gradient(circle at 50% 36%, #3a342c 0 22%, transparent 23%), radial-gradient(ellipse at 50% 110%, #3a342c 0 48%, transparent 49%), #9d9481; }
.theme-upside .player h4 { font-size: 19px; text-transform: uppercase; }
.theme-upside .player .role { color: #3b342a; }
.theme-upside .player .meta { font-family: var(--font-file); color: #2b261f; }

/* conta */
.mode-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px dashed #a07d2a; border-radius: 8px; color: #e3c57a; background: rgba(160, 125, 42, 0.08); font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 3px solid var(--g3); }
.tab {
  padding: 8px 18px 7px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font: 700 14px var(--font-ui);
  color: var(--muted);
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.tab.active { color: #fff; border-color: rgba(0, 0, 0, 0.3); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); background: linear-gradient(var(--g1), var(--g2) 50%, var(--g3) 51%, var(--g4)); }
.form { padding: 18px 0 4px; }
fieldset { margin: 0 0 16px; padding: 12px 14px 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.15); }
legend { padding: 0 8px; font: 700 13px var(--font-ui); letter-spacing: 0.06em; color: var(--teal); text-transform: uppercase; }
label { display: block; flex: 1; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row label { min-width: 170px; }
.row label.narrow { flex: 0 0 100px; min-width: 100px; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: 15px var(--font-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 3px color-mix(in srgb, var(--teal) 30%, transparent); }
.form-msg { min-height: 1.4em; margin: 4px 0 10px; font-size: 13px; color: #ff7a7a; }
.profile { position: relative; padding: 0 clamp(16px, 3vw, 28px) 24px; border-radius: 12px; overflow: hidden; }
.profile-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 calc(-1 * clamp(16px, 3vw, 28px)); padding: 12px clamp(16px, 3vw, 28px); }
.profile-label { display: block; font: 11px var(--font-small); letter-spacing: 0.12em; opacity: 0.8; }
.profile-number { font-size: 22px; font-weight: 700; }
.profile-char { font-family: var(--font-logo); font-size: clamp(22px, 4vw, 30px); margin: 16px 0 12px; }
.profile-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 16px; }
.profile-data dt { font: 11px var(--font-small); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.profile-data dd { margin: 0; font-weight: 700; }
.profile-bio { white-space: pre-wrap; padding-top: 12px; margin: 0 0 18px; border-top: 1px dashed currentColor; }
.profile-bio:empty { display: none; }
.file-stamp { font: 700 13px var(--font-type); letter-spacing: 0.15em; border: 2px solid currentColor; padding: 1px 8px; transform: rotate(6deg); opacity: 0.85; white-space: nowrap; }
.theme-hawkins .profile { background: #f6f1e7; color: #1c1a2e; }
.theme-hawkins .profile-head { background: linear-gradient(#35c3d8, #1a9fb8 50%, #0e87a0 51%, #1aa2bb); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
.theme-upside .profile { background: linear-gradient(170deg, #1d242e, #0e131a); color: #c3cedb; border: 1px solid #2a0a0e; }
.theme-upside .profile-head { background: linear-gradient(var(--h1), var(--h2) 50%, var(--h3) 51%, var(--h4)); color: #ffb3b8; }
.theme-upside .profile-char { font-family: var(--font-file); }

.hint { color: var(--muted); font-size: 11px; opacity: 0.8; }

/* painel do administrador */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { padding: 6px 8px; text-align: left; font: 700 11px var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.admin-table td { padding: 8px; border-bottom: 1px dotted var(--line); vertical-align: middle; }
.admin-table td small { display: block; color: var(--muted); font-size: 11px; }
.admin-role { display: flex; gap: 6px; align-items: center; }
.admin-role input { margin: 0; padding: 6px 8px; min-width: 150px; }
.admin-you { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) {
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table tr:first-child { display: none; }
  .admin-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 4px 0; }
}

/* rodapé */
.footer { position: relative; z-index: 1; padding: 18px 0 26px; background: rgba(0, 0, 0, 0.45); border-top: 1px solid var(--line); font: 12px/1.6 var(--font-small); color: var(--muted); text-align: center; }
.footer p { margin: 4px 0; }
.footer-links a { color: var(--teal); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* avisos */
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 30px);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--gb, #000);
  font: 700 14px var(--font-ui);
  color: #fff;
  background: linear-gradient(var(--g1, #444), var(--g2, #333) 50%, var(--g3, #222) 51%, var(--g4, #333));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* transição entre os mundos */
.theme-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; }
.theme-flash.to-upside { background: radial-gradient(ellipse at 50% 0%, rgba(255, 40, 40, 0.8), rgba(20, 0, 0, 0.95) 70%); animation: themeFlash 1s ease-out forwards; }
.theme-flash.to-hawkins { background: radial-gradient(ellipse at 50% 80%, rgba(255, 200, 120, 0.9), rgba(255, 60, 140, 0.6) 60%, rgba(20, 10, 40, 0.9)); animation: themeFlash 1s ease-out forwards; }
@keyframes themeFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
body.flipping .site { animation: flip 0.9s ease; }
@keyframes flip {
  0% { filter: none; }
  40% { filter: invert(1) hue-rotate(180deg) blur(2px); transform: scaleY(-1); }
  100% { filter: none; transform: none; }
}

/* efeitos do Mundo Invertido por cima da página */
.ud-fx { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.edge-vines { position: absolute; top: 0; height: 100%; width: 20vw; }
.edge-left { left: 0; }
.edge-right { right: 0; }
.darkness { position: absolute; inset: 0; background: radial-gradient(circle 320px at var(--mx, 50%) var(--my, 45%), transparent 0, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.6) 100%); }
@media (pointer: coarse) { .darkness { background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.55) 100%); } }
.site-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 50, 50, 0.45), rgba(120, 0, 0, 0.15) 50%, transparent 80%); mix-blend-mode: screen; }
.site-flash.go { animation: strike 0.6s linear forwards; }
.site-bolt { position: absolute; left: 0; top: 0; width: 100%; height: 60%; opacity: 0; filter: drop-shadow(0 0 4px #ff4040) drop-shadow(0 0 16px #ff0000); }
.site-bolt.go { animation: strike 0.5s linear forwards; }
/* vinhas do site (mesmo estilo da abertura) */
.edge-vines { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75)); }

/* =========================================================
   CURSORES
   Hawkins: seta de vidro azul-água (Frutiger Aero), verde nos links.
   Invertido: lanterna (a escuridão da página acompanha a luz).
   ========================================================= */
.cursor-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
@media (pointer: fine) {
  body.theme-hawkins.fx-cursor, body.theme-hawkins.fx-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.6' y2='1'%3E%3Cstop offset='0' stop-color='%23f2feff'/%3E%3Cstop offset='.45' stop-color='%2362d4ff'/%3E%3Cstop offset='1' stop-color='%230a6fd1'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5.5 4.5v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='%23000' opacity='.28'/%3E%3Cpath d='M4 3v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='url(%23g)' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.6 6.4v9.8l6.2-5z' fill='url(%23s)'/%3E%3Cpath d='M4 3v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='none' stroke='%23064f9c' stroke-width='.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;
  }
  body.theme-hawkins.fx-cursor :is(a, button, label, summary, .neon-card, .badge, .tabs-nav a, [data-a], [data-chat], .cd-head, .cd-bar, [data-drag]) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.6' y2='1'%3E%3Cstop offset='0' stop-color='%23f4fff0'/%3E%3Cstop offset='.45' stop-color='%2362e08a'/%3E%3Cstop offset='1' stop-color='%230c9a4a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5.5 4.5v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='%23000' opacity='.28'/%3E%3Cpath d='M4 3v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='url(%23g)' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.6 6.4v9.8l6.2-5z' fill='url(%23s)'/%3E%3Cpath d='M4 3v22l5.5-5 4 9 4-1.7-3.9-8.8h7.4z' fill='none' stroke='%23085e2d' stroke-width='.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer;
  }
  body.theme-upside.fx-cursor, body.theme-upside.fx-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23262a30'/%3E%3Cstop offset='.45' stop-color='%23a7afb9'/%3E%3Cstop offset='1' stop-color='%231b1e23'/%3E%3C/linearGradient%3E%3CradialGradient id='l'%3E%3Cstop offset='0' stop-color='%23fffdf0'/%3E%3Cstop offset='1' stop-color='%23ffc95c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='6' fill='%23ffe9a8' opacity='.35'/%3E%3Cg transform='rotate(-45 16 16)'%3E%3Crect x='13' y='12' width='6' height='17' rx='2' fill='url(%23b)' stroke='%23070809' stroke-width='.8'/%3E%3Cpath d='M10.5 4.5h11L19.6 12h-7.2z' fill='url(%23b)' stroke='%23070809' stroke-width='.8'/%3E%3Crect x='10.5' y='3' width='11' height='2.4' rx='1.1' fill='url(%23l)' stroke='%23070809' stroke-width='.6'/%3E%3Crect x='15' y='16' width='2' height='3.4' rx='.7' fill='%23c0392b'/%3E%3C/g%3E%3C/svg%3E") 8 8, auto;
  }
  body.fx-cursor :is(input:not([type=checkbox]):not([type=radio]), textarea) { cursor: text; }
}
/* lanterna falhando: a página some no escuro por um instante */
.darkness { transition: background 0.04s; }
.darkness.off { background: rgba(0, 0, 0, 0.92); }

/* =========================================================
   REDES SOCIAIS
   ========================================================= */
.net-wrap { padding-top: 22px; }
.browser { overflow: hidden; border-radius: 8px 8px 4px 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }

/* ---------- Internet Explorer (Windows XP) ---------- */
.ie { background: #ece9d8; border: 1px solid #0831d9; font: 11px Tahoma, Verdana, sans-serif; color: #000; }
.ie-title {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 4px 0 8px;
  color: #fff; font: 700 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 0 #0a246a;
  background: linear-gradient(#0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
}
.ie-icon { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9fe3ff, #1a7fd9 60%, #0a4ca8); color: #fff; font: italic 700 14px Georgia, serif; text-shadow: none; }
.ie-title-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ie-btns { display: flex; gap: 2px; }
.ie-btns i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 3px; font: 700 11px Tahoma; font-style: normal; background: linear-gradient(#3c8cff, #1c5ff0); }
.ie-btns .x { background: linear-gradient(#e87b5b, #c73a16); }
.ie-menu { display: flex; gap: 14px; padding: 3px 8px; border-bottom: 1px solid #fff; box-shadow: 0 1px 0 #aca899; }
.ie-tools { display: flex; align-items: center; gap: 12px; padding: 4px 8px; border-bottom: 1px solid #aca899; white-space: nowrap; overflow: hidden; }
.ie-tb.back { font-weight: 700; color: #1d6a1d; }
.ie-sep { width: 1px; height: 18px; background: #aca899; }
.ie-address { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid #aca899; color: #444; }
.ie-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 2px 4px; background: #fff; border: 1px solid #7f9db9; color: #000; }
.ie-url span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ie-favicon { flex: 0 0 auto; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 2px; background: #3b5998; color: #fff; font: 700 10px Tahoma; }
.ie-go { font-weight: 700; color: #1d6a1d; }
.ie-view { position: relative; height: min(680px, 80vh); background: #fff; border-top: 1px solid #fff; }
.ie-status { display: flex; justify-content: space-between; padding: 3px 8px; border-top: 1px solid #aca899; }

/* ---------- thefacebook: o Facebook de 2005 ---------- */
.hb { height: 100%; overflow: auto; background: #fff; color: #333; font: 11px/1.45 "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
.hb a { color: #3b5998; text-decoration: none; }
.hb a:hover { text-decoration: underline; }
.hb :is(input, textarea, button) { all: revert; font: 11px "Lucida Grande", Tahoma, Verdana, sans-serif; }
.hb-top { display: flex; align-items: center; gap: 22px; height: 42px; padding: 0 16px; background: #3b5998; border-bottom: 1px solid #29447e; }
.hb .hb-logo { color: #fff; font: 700 21px/1 Tahoma, Verdana, sans-serif; letter-spacing: -0.03em; }
.hb .hb-logo:hover { text-decoration: none; }
.hb-top nav { display: flex; gap: 2px; }
.hb-top nav a { padding: 4px 8px; color: #fff; font-weight: 700; }
.hb-top nav a:hover { background: #6d84b4; text-decoration: none; }
.hb-net { margin-left: auto; color: #d8dfea; }
.hb-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 16px 80px; }
.hb-me { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; text-align: center; border: 1px solid #d8dfea; background: #f7f7f7; }
.hb-me small { color: #777; }
.hb-av { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ccc; color: #fff; font: 700 14px Tahoma, sans-serif; background: linear-gradient(hsl(var(--hue) 45% 72%), hsl(var(--hue) 40% 50%)); }
.hb-av.big { width: 100px; height: 100px; font-size: 32px; margin-bottom: 4px; }
.hb-links { list-style: none; margin: 10px 0; padding: 0; }
.hb-links li { border-bottom: 1px solid #d8dfea; }
.hb-links a { display: block; padding: 5px 6px; }
.hb-links a:hover, .hb-links a.on { background: #d8dfea; text-decoration: none; }
.hb-badge { padding: 0 4px; border-radius: 2px; background: #dd3c10; color: #fff; font-weight: 700; }
.hb-side-box { padding: 7px; border: 1px solid #e2c822; background: #fff9d7; }
.hb-h { margin: 0 0 6px; padding: 3px 8px; border-top: 1px solid #3b5998; background: #d8dfea; color: #3b5998; font-weight: 700; font-size: 12px; }
.hb-sub { margin: 12px 0 4px; color: #3b5998; font-size: 12px; }
.hb-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px; background: #f7f7f7; border: 1px solid #d8dfea; }
.hb-status input, .hb-search input { flex: 1; min-width: 140px; padding: 3px 4px; border: 1px solid #bdc7d8; }
.hb-search { margin: 0 0 8px; display: flex; }
.hb .hb-btn { display: inline-block; padding: 2px 8px; border: 1px solid; border-color: #d9dfea #0e1f5b #0e1f5b #d9dfea; background: #3b5998; color: #fff; font: 11px Tahoma, sans-serif; text-decoration: none; }
.hb .hb-btn.gray { border-color: #e7e7e7 #666 #666 #e7e7e7; background: #f0f0f0; color: #333; }
.hb .hb-btn.big { padding: 6px 14px; font-size: 13px; font-weight: 700; }
.hb-post, .hb-person { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eee; }
.hb-post { align-items: flex-start; }
.hb-post .hb-av, .hb-person .hb-av { width: 36px; height: 36px; font-size: 12px; }
.hb-grow { flex: 1; min-width: 0; }
.hb-person small { display: block; color: #777; }
.hb-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.hb-note { color: #777; }
.hb-meta { margin-top: 2px; color: #999; font-size: 10px; }
.hb-empty { padding: 10px 4px; color: #777; }
.hb-poke { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px; border: 1px solid #e2c822; background: #fff9d7; }
.hb-poke small { color: #777; }
.hb-profile { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.hb-pic { text-align: center; }
.hb-pic-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hb-pinfo h2 { margin: 0 0 6px; font-size: 16px; color: #333; }
.hb-cur { margin: 0 0 10px; padding: 6px 8px; background: #f7f7f7; border: 1px solid #d8dfea; }
.hb-cur small { color: #999; }
.hb-info { width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.hb-info th { width: 110px; padding: 3px 6px; color: #777; font-weight: 400; text-align: left; vertical-align: top; }
.hb-info td { padding: 3px 6px; }
.hb-bio { margin: 0 0 10px; white-space: pre-wrap; }
.hb-guest { max-width: 460px; margin: 40px auto; padding: 0 16px; text-align: center; font-size: 13px; }
.hb-guest h2 { color: #3b5998; font-size: 20px; }
.hb-loading { padding: 40px; text-align: center; color: #777; }

/* ---------- bate-papo (as duas redes) ---------- */
.chat-dock { position: absolute; right: 16px; bottom: 0; z-index: 5; display: flex; align-items: flex-end; gap: 6px; font: 11px Tahoma, Verdana, sans-serif; }
.cd-wins { display: flex; align-items: flex-end; gap: 6px; }
.cd-win { width: 220px; display: flex; flex-direction: column; background: #fff; border: 1px solid #999; border-bottom: 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); }
.cd-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; background: #6d84b4; border-bottom: 1px solid #3b5998; color: #fff; font-weight: 700; }
.cd-head span { display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-head button { all: unset; padding: 0 4px; font-size: 15px; line-height: 1; }
.cd-msgs { height: 210px; overflow: auto; padding: 6px; color: #333; }
.cd-msgs p { margin: 0 0 4px; overflow-wrap: anywhere; }
.cd-msgs p.me b { color: #3b5998; }
.cd-empty { color: #999; font-style: italic; }
.cd-err { color: #c00; }
.cd-win.min .cd-msgs, .cd-win.min .cd-form { display: none; }
.cd-form input { all: revert; display: block; box-sizing: border-box; width: 100%; padding: 5px; border: 0; border-top: 1px solid #ccc; font: 11px Tahoma, sans-serif; outline: none; }
.cd-win.flash .cd-head { animation: cdFlash 1s steps(1) infinite; }
@keyframes cdFlash { 50% { background: #f7b82d; color: #000; } }
.cd-barwrap { position: relative; }
.cd-bar { all: unset; display: block; padding: 6px 14px; border: 1px solid #999; border-bottom: 0; background: linear-gradient(#fafafa, #e3e3e3); color: #333; font-weight: 700; white-space: nowrap; }
.cd-list { position: absolute; right: 0; bottom: 100%; width: 210px; max-height: 250px; overflow: auto; background: #fff; border: 1px solid #999; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2); }
.cd-list a { display: flex; align-items: center; gap: 6px; padding: 5px 8px; color: #3b5998; text-decoration: none; }
.cd-list a:hover { background: #d8dfea; }
.cd-list p { margin: 0; padding: 8px; color: #777; }
.cd-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #bbb; vertical-align: middle; }
.cd-dot.on { background: #5ac739; box-shadow: 0 0 3px #5ac739; }
/* versão 4spore do bate-papo */
.ch-dock { font: 12px arial, helvetica, sans-serif; }
.ch-dock .cd-win { background: #f0e0d6; border-color: #d9bfb7; }
.ch-dock .cd-head { background: #ea8; border-bottom-color: #800000; color: #800000; }
.ch-dock .cd-msgs { color: #800000; }
.ch-dock .cd-msgs p.me b, .ch-dock .cd-msgs b { color: #117743; }
.ch-dock .cd-form input { background: #ffe; font: 12px arial, sans-serif; border-top-color: #d9bfb7; }
.ch-dock .cd-bar { background: linear-gradient(#fed6af, #ea8); border-color: #800000; color: #800000; }
.ch-dock .cd-list { background: #f0e0d6; border-color: #d9bfb7; }
.ch-dock .cd-list a { color: #800000; }
.ch-dock .cd-list a:hover { background: #ea8; }
.ch-dock .cd-win.flash .cd-head { animation-name: chFlash; }
@keyframes chFlash { 50% { background: #800000; color: #ffe; } }

/* ---------- navegador Tor ---------- */
.tor { background: #2b2a33; border: 1px solid #111; color: #fbfbfe; font: 12px "Segoe UI", system-ui, sans-serif; }
.tor-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px 0; background: #1c1b22; }
.tor-tab { display: flex; align-items: center; gap: 8px; max-width: 340px; padding: 7px 14px; overflow: hidden; border-radius: 6px 6px 0 0; background: #42414d; white-space: nowrap; }
.tor-tab span { overflow: hidden; text-overflow: ellipsis; }
.tor-newtab { padding: 6px 10px; color: #aaa; }
.tor-winbtns { display: flex; gap: 10px; margin-left: auto; padding-bottom: 8px; }
.tor-winbtns i { width: 12px; height: 12px; border-radius: 50%; background: #5b5a66; }
.onion { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #7d4698 0 30%, #59316b 31% 50%, #c79ae0 51% 66%, #7d4698 67%); }
.tor-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #42414d; }
.tor-nav { width: 24px; color: #ddd; font-size: 16px; text-align: center; }
.tor-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 4px; background: #1c1b22; }
.tor-url span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tor-ident { all: unset; padding: 4px 10px; border-radius: 4px; background: #59316b; color: #fff; font-weight: 600; white-space: nowrap; }
.tor-ident:hover { background: #7d4698; }
.tor-circuit { padding: 3px 10px; border-bottom: 1px solid #111; color: #b8b7c3; font-size: 11px; }
.tor-view { position: relative; height: min(680px, 80vh); background: #ffe; }

/* ---------- 4spore: imageboard no estilo 4chan ---------- */
.chan { position: relative; height: 100%; overflow: auto; padding: 6px 14px 90px; background: #ffe linear-gradient(#fed6af, #ffe 220px) no-repeat; color: #800000; font: 13px/1.35 arial, helvetica, sans-serif; }
.chan a { color: #0000ee; text-decoration: none; }
.chan a:hover { color: #dd0000; }
.chan :is(input, textarea, button) { all: revert; font: 13px arial, helvetica, sans-serif; }
.ch-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #89a; font-size: 11px; }
.ch-top a, .ch-top b { color: #800000; }
.ch-dim { color: #b09a9a; }
.ch-banner { width: 300px; max-width: 100%; height: 100px; margin: 12px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #800000; background: radial-gradient(ellipse at 50% 120%, #5a0a10, #120204 70%); color: #fff; }
.ch-banner span { font: 700 40px/1 Tahoma, sans-serif; letter-spacing: -2px; text-shadow: 0 0 12px #ff2a2a; }
.ch-banner small { color: #d9a0a0; font-size: 11px; letter-spacing: 0.15em; }
.ch-boardtitle { margin: 8px 0 4px; text-align: center; color: #af0a0f; font: 700 28px Tahoma, sans-serif; letter-spacing: -2px; }
.ch-you { margin: 0 0 6px; text-align: center; font-size: 12px; }
.chan hr { border: 0; border-top: 1px solid #d9bfb7; }
.ch-postform { text-align: center; }
.ch-postform table { margin: 0 auto; border-spacing: 1px; text-align: left; }
.ch-postform td.lbl { padding: 0 6px; background: #ea8; border: 1px solid #800000; color: #000; font-weight: 700; }
.ch-postform textarea { width: 310px; max-width: 60vw; }
.ch-rules { margin: 4px 0 0; color: #707070; font-size: 11px; }
.ch-thread { margin: 6px 0; }
.ch-op blockquote, .ch-post blockquote { margin: 6px 40px 8px 20px; overflow-wrap: anywhere; }
.ch-subject { color: #0f0c5d; font-weight: 700; }
.ch-name { color: #117743; font-weight: 700; }
.chan .ch-id { padding: 0 5px; border-radius: 8px; color: #fff; font-size: 11px; text-shadow: 0 0 2px #000; }
.chan .ch-id:hover { color: #fff; filter: brightness(1.2); }
.ch-youtag { color: #707070; }
.ch-date, .ch-no { color: #800000; }
.ch-no a { color: #800000; }
.chan .ch-del { color: #9a6a6a; font-size: 11px; }
.ch-reply { display: flex; margin: 4px 0; }
.ch-arrows { padding: 0 4px; color: #e0bfb7; }
.ch-post { max-width: 100%; padding: 4px 6px; background: #f0e0d6; border: 1px solid #d9bfb7; border-top: 0; border-left: 0; }
.ch-hl { background: #f0c0b0 !important; }
.ch-green { color: #789922; }
.chan .ch-quote { color: #dd0000; text-decoration: underline; }
.ch-omit { margin-left: 20px; color: #707070; font-size: 12px; }
.ch-replyform { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0 24px; }
.ch-replyform textarea { width: 360px; max-width: 70vw; }
.ch-empty, .ch-loading { text-align: center; color: #707070; }
.ch-contacts { max-width: 560px; margin: 8px auto; padding: 8px 12px; background: #f0e0d6; border: 1px solid #d9bfb7; }
.ch-contacts p { margin: 4px 0 10px; line-height: 1.9; }
.ch-menu { position: absolute; z-index: 6; min-width: 150px; background: #f0e0d6; border: 1px solid #d9bfb7; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.ch-menu b, .ch-menu span { display: block; padding: 4px 12px; color: #800000; }
.ch-menu b { border-bottom: 1px solid #d9bfb7; }
.ch-menu a { display: block; padding: 4px 12px; color: #800000; }
.ch-menu a:hover { background: #ea8; color: #800000; }

@media (max-width: 700px) {
  .hb-body, .hb-profile { grid-template-columns: 1fr; }
  .hb-side { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
  .hb-side-box { grid-column: 1 / -1; }
  .ie-menu, .ie-tools, .tor-circuit, .hb-net { display: none; }
  .chat-dock { right: 4px; }
  .cd-win { width: 170px; }
  .cd-wins .cd-win:not(:last-child) { display: none; }
  .ch-op blockquote, .ch-post blockquote { margin: 6px 8px 8px; }
}

/* =========================================================
   ENTRADA — "Bem-vindo a Hawkins" (login obrigatório)
   Sempre vermelho neon, nos dois mundos: tempestade do Mundo
   Invertido, letreiro no estilo do logo e a história do RPG.
   ========================================================= */
.portal {
  /* as cores do site viram vermelho aqui dentro (formulários, abas, botões) */
  --line: #4b1016; --text: #f3e4e4; --muted: #b9a1a3; --teal: #ff5b4f; --red: #ff2a1c;
  --g1: #ff6a5e; --g2: #e3261c; --g3: #a50f12; --g4: #d21f19; --gb: #5c0508;
  --red-glow: rgba(255, 40, 30, 0.55);
  position: fixed; inset: 0; z-index: 45;
  overflow-x: hidden; overflow-y: auto;
  color: var(--text);
  background: radial-gradient(ellipse at 50% -10%, #2c0307 0%, #0c0102 55%, #000 100%);
}
.portal .gloss-alt { --g1: #4a4f58; --g2: #2c3038; --g3: #1b1e24; --g4: #262a31; --gb: #0c0e12; }
.portal-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.portal-clouds { position: absolute; left: -15%; top: 0; width: 130%; height: 80%; animation: drift 50s linear infinite alternate; }
.portal-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: radial-gradient(ellipse at 50% 110%, rgba(255, 20, 30, 0.34), transparent 65%); animation: redPulse 6s ease-in-out infinite; }
.portal-spores { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(circle, rgba(255, 205, 195, 0.55) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255, 120, 110, 0.35) 0 1.2px, transparent 1.9px); background-size: 140px 180px, 220px 260px; background-position: 0 0, 60px 90px; animation: sporesUp 45s linear infinite; }
@keyframes sporesUp { to { background-position: 30px -1080px, 20px -1560px; } }
.portal-bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pbolt { filter: drop-shadow(0 0 3px #ff4a3a) drop-shadow(0 0 14px #ff0000); animation: strike 0.55s linear forwards; }
.pbolt.big { filter: drop-shadow(0 0 5px #ff6a5a) drop-shadow(0 0 26px #ff0000) drop-shadow(0 0 60px rgba(255, 0, 0, 0.6)); }
.pbolt path { fill: none; stroke: #ffe2dc; stroke-linecap: round; stroke-linejoin: round; }
.portal-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 0%, rgba(255, 60, 50, 0.4), rgba(120, 0, 0, 0.12) 50%, transparent 80%); }
.portal-flash.go { animation: strike 0.6s linear forwards; }
.portal-flash.big { background: radial-gradient(ellipse at 50% 10%, rgba(255, 90, 80, 0.62), rgba(160, 0, 0, 0.22) 55%, transparent 85%); }
.portal-in { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(30px, 7vh, 70px) 18px 24px; }

/* letreiro "BEM-VINDO A HAWKINS" com as barras do logo */
.portal-head { margin-bottom: clamp(24px, 5vh, 46px); text-align: center; }
.portal-kicker { margin: 0 0 clamp(22px, 3.2vw, 40px); font: 20px var(--font-crt); letter-spacing: 0.5em; color: #d9a5a5; text-shadow: 0 0 8px rgba(255, 40, 30, 0.6); }
.portal-title { margin: 0; font: 700 clamp(40px, 8.6vw, 104px)/0.95 var(--font-logo); text-transform: uppercase; }
.portal.thunder .portal-title { animation: ptThunder 0.5s ease-out; }
.pt-line { position: relative; display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; }
.pt-line1::before { content: ""; position: absolute; left: 13%; right: 13%; top: -0.14em; height: 0.045em; background: #ff2a1c; box-shadow: 0 0 0.08em #ff8f6c, 0 0 0.25em rgba(255, 30, 20, 0.9), 0 0 0.6em rgba(200, 0, 0, 0.6); }
.pt-line2 { gap: 0.3em; margin-top: 0.22em; font-size: 0.56em; }
.pt-line2::before, .pt-line2::after { content: ""; flex: 0 1 2.4em; align-self: center; height: 0.075em; background: #ff2a1c; box-shadow: 0 0 0.1em #ff8f6c, 0 0 0.35em rgba(255, 30, 20, 0.9), 0 0 0.8em rgba(200, 0, 0, 0.6); }
.pt-ch { display: inline-block; color: #0a0000; -webkit-text-stroke: 0.035em #ff3322; paint-order: stroke fill; filter: var(--neon); animation: ptOn 1.2s steps(1) both; animation-delay: calc(0.3s + var(--i) * 90ms); }
.pt-big { font-size: 1.3em; line-height: 0.8; }
.pt-space { display: inline-block; width: 0.3em; }
.pt-fail { animation: ptOn 1.2s steps(1) both, ptFail var(--t, 6s) steps(1) var(--d, 2s) infinite; animation-delay: calc(0.3s + var(--i) * 90ms), var(--d, 2s); }
@keyframes ptOn { 0% { opacity: 0.08; } 30% { opacity: 1; } 40% { opacity: 0.25; } 55%, 100% { opacity: 1; } }
@keyframes ptFail { 0%, 88%, 100% { opacity: 1; } 89% { opacity: 0.15; } 91% { opacity: 1; } 93% { opacity: 0.35; } 95% { opacity: 1; } }
@keyframes ptThunder { 0% { filter: brightness(1.9); } 100% { filter: none; } }

/* história + cartão */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: start; gap: clamp(20px, 3vw, 40px); }
.portal-lore, .portal-card { position: relative; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 20, 20, 0.16), inset 0 0 40px rgba(0, 0, 0, 0.6); }
.portal-lore { padding: 26px 28px 24px; border: 1px solid rgba(255, 50, 40, 0.32); background: linear-gradient(170deg, rgba(30, 4, 7, 0.8), rgba(8, 1, 2, 0.88)); }
.lore-chapter { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.lore-num { font: 700 46px/1 var(--font-logo); color: transparent; -webkit-text-stroke: 1.5px #ff3322; filter: var(--neon); }
.lore-rule { flex: 1; height: 2px; background: linear-gradient(90deg, #ff2a1c, transparent); box-shadow: 0 0 8px rgba(255, 40, 30, 0.7); }
.lore-open { margin: 0 0 16px; font: italic 700 clamp(18px, 2vw, 22px)/1.35 var(--font-logo); color: #ffd9d3; text-shadow: 0 0 12px rgba(255, 40, 30, 0.5); }
.portal-lore p { margin: 0 0 14px; font: 15px/1.75 var(--font-type); color: #e4d1d1; animation: loreIn 0.8s ease-out both; animation-delay: calc(0.9s + var(--i) * 0.25s); }
.portal-lore p:first-of-type::first-letter { float: left; margin: 0.08em 0.12em 0 0; font: 700 3.3em/0.8 var(--font-logo); color: #ff3322; text-shadow: 0 0 10px rgba(255, 40, 30, 0.8); }
.portal-lore .lore-end { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #ff2a1c; background: rgba(255, 30, 20, 0.08); box-shadow: -6px 0 18px -8px rgba(255, 40, 30, 0.8); font-style: italic; color: #fff0ee; }
@keyframes loreIn { from { opacity: 0; transform: translateY(8px); } }
.portal-card { padding: 22px 22px 20px; border: 1px solid rgba(255, 60, 50, 0.55); background: linear-gradient(170deg, rgba(26, 6, 8, 0.94), rgba(6, 1, 2, 0.95)); }
.portal-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ff3322, transparent); box-shadow: 0 0 10px #ff2a1c; }
.portal-card .form { padding-top: 16px; }
.portal-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.portal-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 170px; font: 21px var(--font-crt); letter-spacing: 0.12em; color: #ffb3aa; }
.portal-radio { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.portal-radio i { width: 4px; height: 100%; background: #ff3322; box-shadow: 0 0 6px #ff3322; transform-origin: bottom; animation: eq 0.7s ease-in-out infinite alternate; }
.portal-radio i:nth-child(2) { animation-delay: -0.3s; }
.portal-radio i:nth-child(3) { animation-delay: -0.5s; }
.portal-foot { margin: auto 0 0; padding-top: 28px; font: 11px var(--font-small); color: #7d6668; text-align: center; }

/* cartão de cada etapa (aguardando, recusado, ficha...) */
.portal-status { padding: 8px 4px 2px; text-align: center; }
.portal-status.in > * { animation: loreIn 0.5s ease-out both; }
.portal-status.in > :nth-child(2) { animation-delay: 0.08s; }
.portal-status.in > :nth-child(3) { animation-delay: 0.16s; }
.portal-status.in > :nth-child(n+4) { animation-delay: 0.24s; }
.portal-status p { margin: 0 0 10px; line-height: 1.6; color: #ead6d6; }
.portal-status .ps-small { font-size: 13px; color: var(--muted); }
.portal-status .ps-meta { font: 17px var(--font-crt); letter-spacing: 0.1em; color: #cc9a9a; }
.ps-icon { position: relative; display: grid; place-items: center; width: 78px; height: 78px; margin: 6px auto 16px; border: 2px solid #ff3322; border-radius: 50%; font: 700 34px var(--font-logo); color: #ff5a4a; box-shadow: 0 0 16px rgba(255, 40, 30, 0.6), inset 0 0 14px rgba(255, 40, 30, 0.4); text-shadow: 0 0 10px rgba(255, 40, 30, 0.8); }
.ps-signal::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #ff3322; box-shadow: 0 0 10px #ff3322; animation: blink 1.4s steps(1) infinite; }
.ps-signal i { position: absolute; inset: 0; border: 2px solid rgba(255, 60, 50, 0.7); border-radius: 50%; animation: psPing 2.4s ease-out infinite; }
.ps-signal i:nth-child(2) { animation-delay: 0.8s; }
.ps-signal i:nth-child(3) { animation-delay: 1.6s; }
@keyframes psPing { from { opacity: 1; transform: scale(0.35); } to { opacity: 0; transform: scale(1.7); } }
.ps-open i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff3322 60%, transparent 70%); animation: psOpen 1.2s ease-out both; }
@keyframes psOpen { from { transform: scale(0.2); opacity: 0; } 50% { opacity: 1; } to { transform: scale(2.4); opacity: 0.9; } }
.ps-title { margin: 0 0 12px; font: 700 26px/1.1 var(--font-logo); letter-spacing: 0.02em; text-transform: uppercase; color: #0a0000; -webkit-text-stroke: 0.04em #ff3322; paint-order: stroke fill; filter: var(--neon); }
.ps-granted { animation: neonOn 0.7s steps(1) both; }
.ps-btn { margin-top: 10px; }
.portal.leaving { animation: portalOut 0.9s ease-in forwards; }
@keyframes portalOut { 0% { opacity: 1; } 30% { filter: brightness(1.6); } 100% { opacity: 0; filter: brightness(0.4) blur(4px); transform: scale(1.04); } }
@media (max-width: 860px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { order: -1; } /* no celular o formulário vem primeiro, a história depois */
}
@media (max-width: 560px) {
  .portal-kicker { font-size: 16px; letter-spacing: 0.32em; }
  .portal-lore { padding: 20px 16px 18px; }
  .portal-lore p { font-size: 14px; }
  .portal-card { padding: 18px 14px 16px; }
}

.portal-closed { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed rgba(255, 90, 80, 0.5); border-radius: 8px; font-size: 13px; color: #ffcfc9; background: rgba(255, 40, 30, 0.08); }

/* página de bloqueio ("404 do Victor"): mesma tempestade da entrada, com o logo */
.lockout { position: fixed; inset: 0; z-index: 47; overflow-x: hidden; overflow-y: auto; color: #f3e4e4; background: radial-gradient(ellipse at 50% -10%, #2c0307 0%, #0c0102 55%, #000 100%); }
.lock-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 100%; max-width: 820px; margin: 0 auto; padding: clamp(36px, 8vh, 90px) 18px 24px; text-align: center; }
.lock-logo { --logo-size: clamp(38px, 9vw, 96px); margin-bottom: clamp(26px, 5vh, 48px); animation: flicker 7s infinite; }
.lockout.thunder .lock-logo { animation: ptThunder 0.5s ease-out; }
.lock-lead { margin: 0 0 6px; font: italic clamp(17px, 2.4vw, 22px)/1.4 var(--font-type); color: #f0d6d0; text-shadow: 0 0 10px rgba(255, 40, 30, 0.45); }
.lock-404 { display: flex; justify-content: center; gap: 0.06em; margin: 0; font: 700 clamp(110px, 24vw, 230px)/1 var(--font-logo); }
.lock-404 span { display: inline-block; color: #0a0000; -webkit-text-stroke: 0.03em #ff3322; paint-order: stroke fill; filter: var(--neon); animation: ptOn 1.2s steps(1) both; }
.lock-404 span:nth-child(2) { animation: ptOn 1.2s steps(1) 0.2s both, ptFail 5.5s steps(1) 2s infinite; }
.lock-404 span:nth-child(3) { animation-delay: 0.4s; }
.lock-shout { margin: 0 0 22px; font: 700 clamp(22px, 4vw, 36px)/1.15 var(--font-logo); text-transform: uppercase; letter-spacing: 0.03em; color: #0a0000; -webkit-text-stroke: 0.035em #ff3322; paint-order: stroke fill; filter: var(--neon); }
.lock-sorry { max-width: 560px; margin: 0 0 22px; font: 16px/1.7 var(--font-type); color: #e4d1d1; }
.lock-soon { max-width: 600px; margin: 0; padding: 14px 20px; border: 1px solid rgba(255, 60, 50, 0.55); border-radius: 12px; background: linear-gradient(170deg, rgba(30, 5, 8, 0.85), rgba(8, 1, 2, 0.9)); box-shadow: 0 0 26px rgba(255, 30, 20, 0.28), inset 0 0 24px rgba(0, 0, 0, 0.6); font: 700 clamp(16px, 2.2vw, 19px)/1.5 var(--font-ui); color: #fff0ee; }
.lock-foot { margin: auto 0 0; padding-top: 34px; }
.lock-foot .link-btn { font-size: 12px; color: #6d5557; }
.lock-foot .link-btn:hover { color: #d9b0b0; }

/* desempenho da entrada e do bloqueio: camadas animadas separadas, brilhos mais leves */
.portal-clouds, .portal-glow, .portal-spores, .grain { will-change: transform, opacity; transform: translateZ(0); }
.portal-clouds { animation-name: driftGpu; }
@keyframes driftGpu { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6%, 0, 0); } }
.portal-spores { animation-name: sporesGpu; background-position: 0 0, 60px 90px; }
@keyframes sporesGpu { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -180px, 0); } }
.portal-spores { inset: 0 0 -200px 0; }
.lock-logo, .lock-404 span, .pt-ch, .portal-flash, .pbolt { will-change: opacity; }
.pbolt.big { filter: drop-shadow(0 0 5px #ff6a5a) drop-shadow(0 0 22px #ff0000); }
.lockout.thunder .lock-logo, .portal.thunder .portal-title { animation: none; }

/* celular antigo com a cobrinha, ao lado do texto */
.lock-phone { position: fixed; right: clamp(16px, 4vw, 60px); top: 50%; z-index: 2; width: 190px; padding: 14px 12px 16px; transform: translateY(-50%) rotate(4deg); border-radius: 30px 30px 40px 40px; background: linear-gradient(160deg, #3c4148, #1d2025 60%, #2c3036); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 30, 20, 0.25); }
.ph-brand { margin-bottom: 8px; font: 700 11px var(--font-small); letter-spacing: 0.3em; text-align: center; color: #aab; }
.ph-screen { padding: 6px; border-radius: 8px; background: #8bac0f; box-shadow: inset 0 0 0 3px #10180a, inset 0 0 12px rgba(0, 0, 0, 0.4); }
.ph-screen canvas { display: block; width: 100%; image-rendering: pixelated; }
.ph-score { margin: 4px 0 0; font: 13px/1 var(--font-crt); color: #1e3a13; text-align: center; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ph-keys button { padding: 7px 0; border: 0; border-radius: 10px; background: linear-gradient(#e7e9ec, #b8bcc2); color: #222; font: 700 12px var(--font-small); box-shadow: 0 2px 0 #6b7078; cursor: pointer; }
.ph-keys button:active { transform: translateY(2px); box-shadow: none; }
@media (max-width: 1100px) { .lock-phone { position: relative; right: auto; top: auto; margin: 0 auto 30px; transform: rotate(-2deg); } .lockout { display: flex; flex-direction: column; } }

/* controles do site no painel do administrador */
.site-controls { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.site-controls-title { margin: 0 0 8px; font: 700 13px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ctl { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 8px 0; cursor: pointer; font-size: 13px; color: var(--muted); }
.ctl + .ctl { border-top: 1px dotted var(--line); }
.ctl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ctl-switch { position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin-top: 2px; border-radius: 999px; background: #2a2540; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); transition: background 0.25s; }
.ctl-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #c9c4dc); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform 0.25s cubic-bezier(0.6, 0, 0.3, 1.4); }
.ctl input:checked + .ctl-switch { background: #d4144d; }
.ctl input:checked + .ctl-switch::after { transform: translateX(20px); }
.ctl input:focus-visible + .ctl-switch { outline: 2px solid var(--teal); outline-offset: 2px; }
.ctl input:disabled + .ctl-switch { opacity: 0.6; }
.ctl-text b { color: var(--text); }

/* painel do administrador: fila de espera e situação de cada conta */
.nav-badge { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #ff2e2e; color: #fff; font: 700 11px/18px var(--font-small); text-align: center; box-shadow: 0 0 8px rgba(255, 40, 40, 0.7); }
.admin-queue { margin: 0 0 12px; padding: 9px 12px; border: 1px solid rgba(255, 197, 61, 0.55); border-radius: 8px; background: rgba(255, 197, 61, 0.1); font-size: 13px; }
.admin-queue.ok { border-color: var(--line); background: transparent; color: var(--muted); }
.st-cell { min-width: 150px; }
.st-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 700 10.5px var(--font-small); letter-spacing: 0.05em; text-transform: uppercase; }
.st-pendente { background: #ffc53d; color: #3a2400; }
.st-aprovado { background: #2ad18b; color: #04291a; }
.st-recusado { background: #5a1c22; color: #ffb3b8; }
.st-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 6px; vertical-align: middle; }
.admin-table tr.row-pendente td { background: rgba(255, 197, 61, 0.07); }

/* =========================================================
   ECONOMIA — Melvald's (Hawkins, dólar) e o cofre de blockchain (Invertido)
   ========================================================= */
.shop-wrap { padding-top: 22px; }
.wallet-chip a { color: var(--text); text-decoration: none; font-weight: 700; }
.wallet-chip a:hover { text-decoration: underline; }

/* moeda de blockchain, com a história no passar o mouse */
.blk-coin-wrap { position: relative; display: inline-flex; }
.blk-coin { all: unset; position: relative; isolation: isolate; overflow: hidden; display: block; width: 46px; height: 46px; cursor: help; border-radius: 50%; transform-origin: center; transition: filter 0.35s ease; }
.blk-coin-wrap.big .blk-coin { width: 96px; height: 96px; animation: coinIdle 5s ease-in-out infinite; }
.blk-coin img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; user-select: none; }
.blk-coin::after { position: absolute; inset: 6%; border-radius: 50%; background: linear-gradient(108deg, transparent 34%, rgba(255, 255, 255, 0.42) 48%, transparent 63%); content: ""; opacity: 0; pointer-events: none; transform: translateX(-150%); }
.theme-upside .blk-coin { filter: drop-shadow(0 0 7px rgba(255, 40, 40, 0.48)); }
.blk-coin:hover, .blk-coin:focus-visible { animation: coinHover 0.68s cubic-bezier(0.2, 0.72, 0.3, 1) both; filter: drop-shadow(0 6px 5px rgba(100, 62, 8, 0.34)); }
.blk-coin:hover::after, .blk-coin:focus-visible::after { animation: coinGlint 0.72s ease-out; opacity: 1; }
.theme-upside .blk-coin:hover, .theme-upside .blk-coin:focus-visible { filter: drop-shadow(0 0 10px rgba(255, 56, 56, 0.78)); }
.blk-coin:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@keyframes coinIdle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes coinHover { 0% { transform: translateY(0) rotate(0) scale(1); } 42% { transform: translateY(-7px) rotate(-7deg) scale(1.1); } 72% { transform: translateY(-2px) rotate(3deg) scale(1.045); } 100% { transform: translateY(-4px) rotate(0) scale(1.06); } }
@keyframes coinGlint { 0% { transform: translateX(-150%); } 100% { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .blk-coin-wrap.big .blk-coin, .blk-coin:hover, .blk-coin:focus-visible, .blk-coin:hover::after, .blk-coin:focus-visible::after { animation: none; transition: none; } }
.blk-story { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 30; width: min(380px, 86vw); padding: 14px 16px; transform: translateX(-50%) translateY(6px); border-radius: 10px; font: 12.5px/1.55 var(--font-ui); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.blk-story b { display: block; margin-bottom: 6px; font: 700 15px var(--font-logo); }
.blk-story p { margin: 0 0 8px; }
.blk-story .blk-small { margin: 0; font-size: 11.5px; opacity: 0.85; }
.blk-story code { font: 12px var(--font-crt); }
.blk-coin-wrap:hover .blk-story, .blk-coin:focus-visible + .blk-story { opacity: 1; visibility: visible; transform: translateX(-50%); }
.theme-hawkins .blk-story { background: #fbf6ea; color: #2a2438; border: 1px solid #d9ccb4; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.theme-upside .blk-story { background: #0b0203; color: #e8cfcf; border: 1px solid #5a0a10; box-shadow: 0 0 26px rgba(255, 30, 30, 0.35); }
.theme-upside .blk-story b { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 40, 40, 0.6); }

/* Melvald's General Store (Hawkins) */
.theme-hawkins .shop { border-color: #54417f; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48), 0 0 24px rgba(255, 46, 107, 0.09); }
.theme-hawkins .shop > .box-body { background: radial-gradient(ellipse at 50% 0, rgba(74, 47, 112, 0.28), transparent 55%), #17132f; }
.mv-sign { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; margin: 0 0 18px; padding: 17px 16px 21px; border: 1px solid #a56777; border-radius: 10px; background: radial-gradient(ellipse at 50% 0, rgba(135, 60, 88, 0.34), transparent 70%), repeating-linear-gradient(0deg, #3a2535 0 11px, #30202f 12px 14px); box-shadow: inset 0 0 0 3px #211625, inset 0 0 0 5px rgba(239, 156, 130, 0.3), 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 63, 111, 0.16); text-align: center; color: #fff0e5; }
.mv-sign::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 202, 175, 0.2); border-radius: 3px; pointer-events: none; }
.mv-sign::after { content: ""; position: absolute; bottom: 11px; left: 30%; right: 30%; height: 2px; background: linear-gradient(90deg, transparent, #ff7593 25%, #ffd6a9 50%, #ff7593 75%, transparent); box-shadow: 0 0 9px rgba(255, 70, 110, 0.8); pointer-events: none; }
.mv-sign b { position: relative; font: 700 clamp(32px, 5vw, 50px)/1 var(--font-logo); letter-spacing: 0.035em; color: #ffeedc; text-shadow: 1px 2px 0 #431b2b, 0 0 10px rgba(255, 121, 144, 0.8), 0 0 26px rgba(255, 46, 107, 0.42); animation: mvSignGlow 6s ease-in-out infinite; }
.mv-est, .mv-sub { position: relative; font: 700 10px var(--font-small); letter-spacing: 0.23em; text-transform: uppercase; color: #f0c3ad; }
.mv-est { margin-bottom: 5px; }
.mv-sub { margin-top: 8px; }
.mv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 18px; align-items: start; }
.mv-product { position: relative; padding: 18px; border: 1px solid rgba(180, 107, 167, 0.55); border-radius: 12px; background: radial-gradient(circle at 50% -10%, rgba(114, 58, 133, 0.4), transparent 48%), linear-gradient(155deg, #292044, #16152e 72%); color: #f6edf7; box-shadow: inset 0 1px 0 rgba(255, 207, 224, 0.14), 0 12px 28px rgba(0, 0, 0, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mv-product::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, transparent, #36e2da, #ff578e, transparent); box-shadow: 0 0 12px rgba(255, 74, 133, 0.5); }
.mv-product:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 207, 224, 0.18), 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 65, 122, 0.16); }
.mv-shelf { position: relative; z-index: 2; isolation: isolate; display: flex; justify-content: center; padding: 15px 0 17px; margin: -4px -4px 14px; border: 1px solid rgba(93, 198, 207, 0.42); border-radius: 8px; background: radial-gradient(ellipse at 50% 110%, rgba(255, 62, 130, 0.22), transparent 65%), radial-gradient(ellipse at 50% 35%, #39315e, #11162e 76%); box-shadow: inset 0 0 20px rgba(5, 13, 27, 0.65), 0 0 14px rgba(39, 227, 214, 0.11); }
.mv-shelf::before { content: ""; position: absolute; z-index: -1; top: 24px; left: 50%; width: 180px; height: 70px; transform: translateX(-50%); border-radius: 50%; background: rgba(255, 70, 123, 0.22); filter: blur(20px); animation: mvShelfGlow 5s ease-in-out infinite; }
.mv-shelf::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(176, 225, 228, 0.035) 4px 5px); pointer-events: none; }
.mv-shelf .blk-coin-wrap { z-index: 1; }
.mv-new { position: absolute; z-index: 2; top: 8px; right: 10px; padding: 3px 9px; border: 1px solid rgba(255, 199, 213, 0.45); border-radius: 4px; transform: rotate(5deg); background: #d41455; color: #fff; font: 900 11px var(--font-ui); letter-spacing: 0.08em; box-shadow: 0 0 11px rgba(255, 40, 105, 0.48); }
.mv-product h3 { margin: 0 0 5px; font: 700 27px var(--font-logo); color: #fff2e6; text-shadow: 0 0 12px rgba(255, 88, 138, 0.3); }
.mv-product h3 small { font-size: 14px; color: #68e5dc; }
.mv-desc { margin: 0 0 14px; font: 13px/1.55 var(--font-type); color: #d6c9e3; }
.mv-tag { display: inline-block; margin: 2px 0 15px; padding: 6px 12px; border: 1px solid rgba(255, 198, 95, 0.55); border-radius: 5px; background: rgba(76, 44, 25, 0.56); color: #ffe4ac; box-shadow: inset 0 1px 0 rgba(255, 225, 170, 0.12), 0 0 14px rgba(255, 181, 69, 0.14); font: 13px var(--font-ui); }
.mv-tag b { font: 24px/1 var(--font-crt); letter-spacing: 0.05em; color: #ffd16d; text-shadow: 0 0 8px rgba(255, 197, 61, 0.6); }
.mv-tag small { font-size: 11px; opacity: 0.8; }
.mv-buy label { margin: 0 0 8px; color: #c9bedb; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; }
.mv-buy input { background: #110f28; color: #f8f2fc; border: 1px solid #655784; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); font-size: 16px; }
.mv-buy input::placeholder { color: #9c90b2; }
.mv-buy input:focus-visible { outline: 2px solid #53ddd8; outline-offset: 2px; border-color: #53ddd8; }
.mv-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mv-quick button { padding: 5px 11px; border: 1px solid #6b5e8e; border-radius: 999px; background: #24203e; color: #e9e0f4; font: 700 12px var(--font-small); transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.mv-quick button:hover, .mv-quick button:focus-visible { border-color: #48dcd4; background: #193c49; box-shadow: 0 0 10px rgba(39, 227, 214, 0.28); }
.mv-total { margin: 0 0 6px; min-height: 1.5em; font-size: 13px; color: #e7dced; }
.mv-total b { color: #85ede3; }
.mv-warn { color: #ff8b9a; font-weight: 700; }
.mv-msg { margin: 0 0 8px; }
.mv .gloss-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 10px rgba(0, 0, 0, 0.38), 0 0 12px rgba(255, 51, 111, 0.23); }
.mv .gloss-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 16px rgba(255, 46, 107, 0.47); }
.mv-side { display: grid; gap: 14px; }
.mv-wallet { position: relative; isolation: isolate; overflow: visible; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid rgba(174, 194, 169, 0.24); border-radius: 12px; background: rgba(119, 143, 119, 0.12); color: #f0f3e9; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(233, 241, 225, 0.12); }
.mv-wallet::before { content: ""; position: absolute; z-index: 0; inset: 0 0 0 16%; background: url("wallet-dollars-overlay.png") right center / 100% auto no-repeat; opacity: 0.3; filter: saturate(0.72); pointer-events: none; transition: opacity 0.25s ease; }
.mv-wallet:hover::before { opacity: 0.4; }
.wallet-cash-layer { position: absolute !important; z-index: 2 !important; inset: 0; pointer-events: none; }
.wallet-cash-layer img { position: absolute; top: -28px; left: 0; display: block; width: 132px; max-width: none; height: auto; opacity: 0; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.32)); }
.wallet-cash-layer img:nth-child(1) { left: 2%; --cash-delay: 0ms; --cash-drift: -16px; --cash-rot-start: -8deg; --cash-rot-end: 95deg; }
.wallet-cash-layer img:nth-child(2) { left: 17%; --cash-delay: 120ms; --cash-drift: 18px; --cash-rot-start: 7deg; --cash-rot-end: -80deg; }
.wallet-cash-layer img:nth-child(3) { left: 32%; --cash-delay: 240ms; --cash-drift: -21px; --cash-rot-start: -12deg; --cash-rot-end: 115deg; }
.wallet-cash-layer img:nth-child(4) { left: 48%; --cash-delay: 360ms; --cash-drift: 16px; --cash-rot-start: 9deg; --cash-rot-end: -105deg; }
.wallet-cash-layer img:nth-child(5) { left: 64%; --cash-delay: 480ms; --cash-drift: -18px; --cash-rot-start: -6deg; --cash-rot-end: 88deg; }
.wallet-cash-layer img:nth-child(6) { left: 80%; --cash-delay: 600ms; --cash-drift: 20px; --cash-rot-start: 11deg; --cash-rot-end: -120deg; }
.mv-wallet-label { position: relative; z-index: 1; font: 700 11px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.mv-wallet > b, .mv-wallet > small { position: relative; z-index: 1; }
.mv-wallet b { font: 700 30px var(--font-logo); }
.mv-wallet small { font-size: 11.5px; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .mv-wallet:hover .wallet-cash-layer img { animation: walletBillsFall 1.2s cubic-bezier(0.2, 0.65, 0.35, 1) var(--cash-delay) both; } }
@keyframes walletBillsFall { 0% { opacity: 0; transform: translate3d(0, -12px, 0) rotate(var(--cash-rot-start)) scale(0.72); } 12% { opacity: 0.78; } 100% { opacity: 0; transform: translate3d(var(--cash-drift), 112px, 0) rotate(var(--cash-rot-end)) scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .mv-wallet:hover .wallet-cash-layer img { animation: none; opacity: 0; } }
.mv-receipt { display: grid; gap: 3px; padding: 14px 16px 18px; background: #fffef8; color: #333; font: 13px/1.4 var(--font-type); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); clip-path: polygon(0 0, 100% 0, 100% 94%, 95% 100%, 90% 94%, 85% 100%, 80% 94%, 75% 100%, 70% 94%, 65% 100%, 60% 94%, 55% 100%, 50% 94%, 45% 100%, 40% 94%, 35% 100%, 30% 94%, 25% 100%, 20% 94%, 15% 100%, 10% 94%, 5% 100%, 0 94%); }
.mv-receipt b { margin-bottom: 4px; text-align: center; border-bottom: 1px dashed #999; }
.mv-receipt em { margin-top: 4px; text-align: center; font-size: 12px; }
.mv-soon { padding: 14px; border: 2px dashed rgba(255, 255, 255, 0.25); border-radius: 12px; font: 13px var(--font-type); color: var(--muted); text-align: center; }

/* quadro do mercado (cotação do dia) */
.mk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: center; margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; }
.theme-hawkins .mk { position: relative; overflow: hidden; background: radial-gradient(ellipse at 15% 0, rgba(40, 138, 155, 0.2), transparent 56%), linear-gradient(135deg, #101b33, #10132a); color: #e8f4f6; border: 1px solid #3d8495; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 18px rgba(39, 227, 214, 0.13); }
.theme-hawkins .mk::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(148, 239, 227, 0.035) 4px 5px); pointer-events: none; }
.theme-upside .mk { background: #070203; color: #e8cfcf; border: 1px solid #5a0a10; }
.mk-price { display: grid; }
.mk-price span { font: 700 11px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.theme-hawkins .mk-price span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: #79f6de; box-shadow: 0 0 8px #79f6de; animation: mvMarketPulse 2.5s ease-in-out infinite; }
.mk-price b { font: 36px/1 var(--font-crt); letter-spacing: 0.04em; color: #78f6d7; text-shadow: 0 0 9px rgba(86, 245, 210, 0.55); }
.theme-upside .mk-price b { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 60, 60, 0.6); }
.mk-price em { font: 700 12px var(--font-small); font-style: normal; }
.mk-price em.up { color: #5cff7a; }
.mk-price em.down { color: #ff6b6b; }
.mk-flow { display: grid; gap: 6px; font-size: 13px; }
.mk-flow small { font-size: 11.5px; opacity: 0.8; }
.mk-bar { position: relative; display: block; height: 9px; border: 1px solid rgba(119, 189, 195, 0.24); border-radius: 999px; background: rgba(219, 244, 248, 0.09); overflow: hidden; }
.mk-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #28d9d5, #8aeedc, #ee5897); box-shadow: 0 0 8px rgba(70, 227, 214, 0.54); transition: width 0.4s; }
.mk-bar u { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: 0.8; }
.theme-upside .mk-bar i { background: linear-gradient(90deg, #8a0c16, #ff3b3b); }

/* comprar / vender */
.mv-mode { display: flex; gap: 7px; margin: 0 0 12px; }
.mv-mode button { flex: 1; padding: 8px 10px; border: 1px solid #66537e; border-radius: 7px; background: rgba(28, 23, 51, 0.85); color: #d8cce6; font: 700 13px var(--font-ui); transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; }
.mv-mode button:hover, .mv-mode button:focus-visible { border-color: #69dedc; box-shadow: 0 0 11px rgba(66, 226, 219, 0.2); }
.mv-mode button.on { background: linear-gradient(#d94179, #a82058); border-color: #f36e9f; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 205, 224, 0.35), 0 0 12px rgba(255, 55, 112, 0.28); }

/* enviar dinheiro */
.send-form { display: grid; gap: 8px; padding: 14px; border-radius: 12px; }
.theme-hawkins .send-form { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(31, 157, 163, 0.17), transparent 45%), linear-gradient(150deg, #22213e, #151829); border: 1px solid rgba(91, 173, 185, 0.47); color: #f3eff5; box-shadow: inset 0 1px 0 rgba(169, 244, 240, 0.1), 0 10px 26px rgba(0, 0, 0, 0.34); }
.theme-hawkins .send-form::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: linear-gradient(90deg, transparent, #6bebe3, #ed5eaa, transparent); box-shadow: 0 0 10px rgba(74, 229, 224, 0.42); }
.theme-upside .send-form { background: #0b0203; border: 1px solid #5a0a10; color: #e8cfcf; }
.send-title { margin: 0; font: 700 16px var(--font-logo); }
.mv .send-title { color: #fff0e7; text-shadow: 0 0 10px rgba(255, 73, 127, 0.28); }
.mv .send-title::before { content: "✦"; margin-right: 8px; color: #67e5db; text-shadow: 0 0 9px rgba(75, 229, 219, 0.65); }
.send-form label { margin: 0; font-size: 12px; font-weight: 700; }
.theme-hawkins .send-form label { color: #ccc1dc; }
.send-form :is(input, select) { margin-top: 3px; padding: 7px 9px; font-size: 14px; }
.theme-hawkins .send-form :is(input, select) { background: #11142a; color: #f5f2fc; border: 1px solid #605e82; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.3); }
.theme-hawkins .send-form :is(input, select)::placeholder { color: #9a91b1; }
.theme-hawkins .send-form :is(input, select):focus-visible { outline: 2px solid #59dcd8; outline-offset: 2px; border-color: #59dcd8; }
.send-info { margin: 0; font-size: 12px; opacity: 0.85; }
.mv .send-info { padding-top: 7px; border-top: 1px dashed rgba(119, 205, 209, 0.24); color: #d5cbe3; }
.send-msg { margin: 0; }
.vault-send { max-width: 460px; margin-top: 16px; }

/* painel do admin: saúde da economia */
.eh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.eh-card { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.22); }
.eh-card span { font: 700 10.5px var(--font-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.eh-card b { font: 700 20px var(--font-logo); color: var(--text); }
.eh-card small { font-size: 11.5px; color: var(--muted); }
.eh-flow { margin-bottom: 10px; }
.eh-rich { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.eh-filter { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.eh-filter select { width: auto; margin: 0; padding: 5px 8px; }
.eh-ledger { max-height: 360px; overflow: auto; }
@media (max-width: 760px) { .mk { grid-template-columns: 1fr; } }

/* livro-razão (os dois lados) */
.led-title { margin: 20px 0 8px; font: 700 12px var(--font-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mv .led-title { color: #85e6e0; text-shadow: 0 0 9px rgba(39, 227, 214, 0.32); }
.ledger { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ledger li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dotted var(--line); }
.mv .ledger li { padding: 9px 10px; border-bottom: 1px solid rgba(114, 94, 154, 0.35); }
.mv .ledger li:nth-child(odd) { background: rgba(83, 58, 120, 0.13); }
.led-block { font: 15px var(--font-crt); color: var(--teal); }
.led-what { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.led-amt { font-weight: 700; white-space: nowrap; }
.led-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ledger .led-empty { display: block; color: var(--muted); }

@keyframes mvSignGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
@keyframes mvShelfGlow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes mvMarketPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mv-sign b, .mv-shelf::before, .theme-hawkins .mk-price span::before { animation: none; }
  .mv-product { transition: none; }
}

/* cofre de blockchain (Mundo Invertido) */
.vault-head { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid #5a0a10; border-radius: 12px; background: radial-gradient(ellipse at 20% 50%, rgba(255, 30, 30, 0.14), transparent 60%), #070203; box-shadow: 0 0 30px rgba(255, 20, 20, 0.18), inset 0 0 30px rgba(0, 0, 0, 0.8); }
.vault-head > div { display: grid; }
.vault-label { font: 18px var(--font-crt); letter-spacing: 0.2em; color: #c97a7a; }
.vault-bal { font: 700 clamp(30px, 5vw, 44px)/1.1 var(--font-logo); color: #0a0000; -webkit-text-stroke: 0.035em #ff3b3b; paint-order: stroke fill; filter: var(--neon); }
.vault-head small { font: 16px var(--font-crt); color: #9a6a6a; letter-spacing: 0.08em; }
.vault-note { margin: 14px 0 0; font: 14px/1.6 var(--font-file); color: #b8a0a2; }

/* painel do administrador: economia */
.econ-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.econ-rate label { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex: 0 0 auto; }
.econ-rate input { width: 90px; margin: 0; padding: 5px 8px; }
.econ-adjust { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.econ-adjust input, .econ-adjust select { width: auto; margin: 0; padding: 5px 7px; font-size: 13px; }
.econ-adjust input[name="valor"] { width: 80px; }
.econ-adjust input[name="motivo"] { width: 150px; }
@media (max-width: 760px) {
  .mv-grid { grid-template-columns: 1fr; }
  .ledger li { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .ledger .led-date { grid-column: 2 / -1; }
  .vault-head { flex-direction: column; text-align: center; }
}

/* =========================================================
   ITENS — Melvald's.com (Hawkins), mercado negro (Invertido)
   e o inventário da ficha (inventory.js)
   ========================================================= */
.buy-wrap { padding-top: 22px; }
.ie-favicon.mvs-fav { background: #c4001a; }
.bonus-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.bonus-chips span { padding: 0 4px; border: 1px solid; border-radius: 3px; font: 700 10px/1.5 Verdana, Tahoma, sans-serif; white-space: nowrap; }
.bonus-chips .up { background: #dff5df; border-color: #9fd49f; color: #0b6b1f; }
.bonus-chips .down { background: #fde3e3; border-color: #f0a6a6; color: #b00020; }

/* ---------- Melvald's.com: loja virtual do começo dos anos 2000 ---------- */
.mvs { height: 100%; overflow: auto; background: #fff; color: #222; font: 11px/1.4 Verdana, Tahoma, Arial, sans-serif; }
.mvs a { color: #0033cc; text-decoration: underline; cursor: pointer; }
.mvs a:hover { color: #c4001a; }
.mvs :is(input, select, button) { all: revert; font: 11px Verdana, Tahoma, sans-serif; }
.mvs label { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0; font-size: 11px; color: inherit; }
.mvs-wait { padding: 40px; text-align: center; color: #777; }
.mvs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: linear-gradient(#ffe36e, #ffcc00); border-bottom: 2px solid #e0a800; }
.mvs .mvs-logo { all: unset; display: flex; flex-direction: column; cursor: pointer; }
.mvs-logo span { font: italic 900 30px/1 Georgia, "Times New Roman", serif; letter-spacing: -1px; color: #c4001a; text-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(0, 0, 0, 0.25); }
.mvs-logo b { color: #003399; }
.mvs-logo small { margin-top: 3px; font: 700 10px Verdana, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #7a4a00; }
.mvs-account { text-align: right; color: #333; }
.mvs-bal b { font-size: 12px; color: #006600; }
.mvs-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 14px; background: #003399; color: #fff; }
.mvs-search label { font-weight: 700; }
.mvs-search input { width: 170px; padding: 2px 3px; border: 1px solid #7f9db9; }
.mvs .mvs-search button { padding: 1px 10px; border: 2px outset #ffcc66; background: #ff9900; color: #fff; font-weight: 700; cursor: pointer; }
.mvs-secure { margin-left: auto; font-weight: 700; color: #ffe36e; }
.mvs-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 10px 0; background: #e8eefc; border-bottom: 3px solid #ff9900; }
.mvs .mvs-tabs button { padding: 4px 8px; border: 1px solid #9fb2dd; border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#fff, #d6e0f5); color: #003399; font-weight: 700; cursor: pointer; }
.mvs .mvs-tabs button:hover { background: linear-gradient(#fff, #fff1cf); }
.mvs .mvs-tabs button.on { border-color: #e07b00; background: linear-gradient(#ffc35c, #ff9900); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
.mvs-marquee { overflow: hidden; padding: 3px 0; white-space: nowrap; background: #fffbe0; border-bottom: 1px solid #f0d68a; font-weight: 700; color: #c4001a; }
.mvs-marquee span { display: inline-block; padding-left: 100%; animation: mvsMarquee 30s linear infinite; }
@keyframes mvsMarquee { to { transform: translateX(-100%); } }
.mvs-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 10px 12px 20px; }
.mvs-side { display: flex; flex-direction: column; gap: 10px; }
.mvs-box { border: 1px solid #9fb2dd; background: #f4f7ff; }
.mvs-box h4 { margin: 0; padding: 3px 6px; background: linear-gradient(#5a7fd6, #003399); color: #fff; font-size: 11px; }
.mvs-box ul, .mvs-box ol { margin: 0; padding: 6px 6px 6px 22px; }
.mvs-box ul { list-style: square; }
.mvs-box li { margin: 2px 0; }
.mvs-box li small { color: #777; }
.mvs-box a.on { font-weight: 700; color: #c4001a; }
.mvs-box p { margin: 5px 6px; }
.mvs-ok { font-weight: 700; color: #006600; }
.mvs-no { font-weight: 700; color: #c4001a; }
.mvs-18, .mvs-18i { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 2px solid #c4001a; border-radius: 50%; background: #fff; color: #c4001a; font: 900 9px/1 Arial, sans-serif; font-style: normal; }
.mvs-18 { position: absolute; top: 4px; right: 4px; }
.mvs-seals { display: flex; justify-content: center; gap: 6px; }
.mvs-seals span { display: grid; place-items: center; width: 64px; height: 38px; border: 2px solid #006600; border-radius: 4px; background: #eaffea; color: #006600; font: 700 9px/1.2 Verdana, sans-serif; text-align: center; }
.mvs-seals span + span { border-color: #e0a800; background: #fff8d6; color: #7a4a00; }
.mvs-main { min-width: 0; }
.mvs-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding: 12px 16px; border: 1px solid #e0a800; background: linear-gradient(135deg, #fff3b0, #ffd84d); }
.mvs-banner b { display: block; font: 900 16px Arial, sans-serif; color: #c4001a; }
.mvs-banner span { color: #5a3a00; }
.mvs-burst { flex: 0 0 auto; display: grid; place-items: center; align-content: center; width: 86px; height: 86px; background: #c4001a; color: #fff; font: 900 26px/1 Arial, sans-serif; text-align: center; transform: rotate(10deg); clip-path: polygon(50% 0%, 60.35% 11.36%, 75% 6.7%, 78.28% 21.72%, 93.3% 25%, 88.64% 39.65%, 100% 50%, 88.64% 60.35%, 93.3% 75%, 78.28% 78.28%, 75% 93.3%, 60.35% 88.64%, 50% 100%, 39.65% 88.64%, 25% 93.3%, 21.72% 78.28%, 6.7% 75%, 11.36% 60.35%, 0% 50%, 11.36% 39.65%, 6.7% 25%, 21.72% 21.72%, 25% 6.7%, 39.65% 11.36%); }
.mvs-burst small { font-size: 10px; text-transform: uppercase; }
.mvs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 2px solid #ff9900; font: 700 14px Arial, sans-serif; color: #003399; }
.mvs-h small { font: 10px Verdana, sans-serif; color: #777; }
.mvs .mvs-h a { color: #003399; text-decoration: none; }
.mvs .mvs-h a:hover { text-decoration: underline; }
.mvs .mvs-h .mvs-more { margin-left: auto; font: 700 10px Verdana, sans-serif; color: #0033cc; text-decoration: underline; }
.mvs-crumb { margin: 0 0 4px; color: #777; }
.mvs-dept-lead { margin: 0 0 8px; color: #444; }
.mvs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mvs-prod { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid #ccc; background: #fff; }
.mvs-prod:hover { border-color: #ff9900; box-shadow: 0 0 0 1px #ff9900; }
.mvs-pic { position: relative; display: grid; place-items: center; height: 74px; margin-bottom: 2px; border: 1px solid #ddd; background: radial-gradient(circle at 50% 40%, #fff, #eef1f7); }
.mvs-pic .shop-item-art { display: block; width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(45, 30, 16, 0.22)); }
.mvs-name { font-size: 12px; color: #0033cc; }
.mvs-desc { flex: 1; margin: 0; color: #444; }
.mvs-kind { margin: 0; font-size: 10px; color: #777; }
.mvs-price { margin: 2px 0 0; color: #c4001a; }
.mvs-price b { font: 700 16px Arial, sans-serif; }
.mvs-price small { font-size: 10px; color: #777; }
.mvs-have { margin: 0; font-size: 10px; font-weight: 700; color: #006600; }
.mvs-lock { margin: 0; font-size: 10px; color: #b00020; }
.mvs-buy { display: flex; align-items: center; gap: 5px; }
.mvs-buy label { font-size: 10px; color: #444; }
.mvs .mvs-btn { flex: 1; padding: 3px 8px; border: 1px solid #c56a00; border-radius: 3px; background: linear-gradient(#ffc35c, #ff9900 55%, #f08400); color: #fff; font: 700 11px Verdana, sans-serif; text-transform: uppercase; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.mvs .mvs-btn:hover { filter: brightness(1.08); }
.mvs .mvs-btn[disabled] { opacity: 0.6; cursor: wait; }
.mvs .mvs-prod.locked .mvs-btn { border-color: #999; background: #ccc; color: #666; text-shadow: none; cursor: not-allowed; }
.mvs-prod.locked .mvs-pic { filter: grayscale(0.7); }
.mvs-receipt { position: relative; display: grid; gap: 2px; margin-bottom: 10px; padding: 8px 30px 8px 10px; border: 1px solid #5cb85c; background: #eaffea; color: #1e4d1e; }
.mvs .mvs-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-weight: 700; color: #1e4d1e; cursor: pointer; }
.mvs-none { padding: 20px; text-align: center; color: #777; }
.mvs-foot { padding: 10px; border-top: 3px solid #ff9900; background: #e8eefc; font-size: 10px; text-align: center; color: #555; }
@media (max-width: 700px) {
  .mvs-body { grid-template-columns: 1fr; }
  .mvs-side { order: 2; }
  .mvs-top { flex-wrap: wrap; }
  .mvs-account { text-align: left; }
  .mvs-secure { display: none; }
  .mvs-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

/* ---------- nadaaquieseguro: mercado negro no Tor ---------- */
.nadq { position: relative; height: 100%; overflow: auto; padding: 14px 16px 60px; background: #050505; color: #9fe0a8; font: 13px/1.5 "Courier Prime", "Courier New", monospace; }
.nadq :is(button, select) { all: revert; font: 12px "Courier New", monospace; }
.nadq select { background: #000; color: #9fe0a8; border: 1px solid #2f4d33; }
.nq-waitmsg { color: #5cff7a; }
.nq-head { margin-bottom: 10px; text-align: center; }
.nq-logo { margin: 0; font: clamp(28px, 5vw, 42px)/1 var(--font-crt); letter-spacing: 0.06em; color: #7dff8f; text-shadow: 0 0 10px rgba(92, 255, 122, 0.5); }
.nq-logo b { font-weight: 400; color: #ff3b3b; text-shadow: 0 0 10px rgba(255, 59, 59, 0.6); }
.nq-cursor { animation: blink 1s steps(1) infinite; }
.nq-tag { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f8f74; }
.nq-warn { margin: 0 0 10px; padding: 8px 10px; border: 1px dashed #ff3b3b; background: rgba(255, 0, 0, 0.06); color: #ffb3b3; }
.nq-warn b { color: #ff5a5a; }
.nq-status { margin: 0 0 12px; }
.nq-status b { color: #fff; }
.nq-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid #3d6b44; background: #0b150d; }
.nq-id-pic { font-size: 30px; }
.nq-id b { color: #d8ffd8; }
.nq-id small { display: block; color: #6f8f74; }
.nq-id .nq-price { font-size: 16px; color: #fff; }
.nq-owned { color: #6f8f74; white-space: nowrap; }
.tor-view .nq-btn { padding: 2px 6px; border: 1px solid #5cff7a; background: #000; color: #5cff7a; font: 700 12px "Courier New", monospace; white-space: nowrap; cursor: pointer; }
.tor-view .nq-btn:hover { background: #5cff7a; color: #000; }
.tor-view .nq-btn[disabled] { opacity: 0.5; cursor: wait; }
.nq-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; color: #6f8f74; }
.nadq .nq-filter button { padding: 1px 6px; border: 1px solid #2f4d33; background: #000; color: #9fe0a8; cursor: pointer; }
.nadq .nq-filter button.on { border-color: #5cff7a; background: #5cff7a; color: #000; }
.nq-table-wrap { overflow-x: auto; }
.nq-list { width: 100%; border-collapse: collapse; }
.nq-list th { padding: 4px 6px; border-bottom: 1px solid #2f4d33; font-weight: 400; text-align: left; color: #6f8f74; }
.nq-list td { padding: 5px 6px; border-bottom: 1px dashed #1c2e1f; vertical-align: middle; }
.nq-list tr:hover td { background: #0b150d; }
.nq-prod { display: flex; align-items: center; gap: 8px; min-width: 210px; }
.shop-item-art.upside-art { flex: 0 0 42px; width: 42px; height: 42px; object-fit: contain; padding: 2px; border: 1px solid #29412c; background: radial-gradient(circle, #142319, #080d09 72%); filter: sepia(0.28) saturate(0.72) brightness(0.82) drop-shadow(0 0 3px rgba(92, 255, 122, 0.16)); }
.nq-prod b { color: #d8ffd8; }
.nq-prod small { display: block; font-size: 10.5px; color: #6f8f74; }
.nq-prod em { font-style: normal; color: #ff8a8a; }
.nq-kind { font-size: 10.5px; color: #6f8f74; }
.nq-old s { color: #6f8f74; }
.nq-old small, .nq-new small { display: block; margin-top: 2px; font-size: 10px; color: #6f8f74; white-space: nowrap; }
.nq-new b { color: #fff; }
.nadq .bonus-chips .up { background: #0b1f0e; border-color: #2f6b38; color: #7dff8f; }
.nadq .bonus-chips .down { background: #200b0b; border-color: #6b2f2f; color: #ff8a8a; }
.nq-orders { margin-top: 16px; }
.nq-orders h4 { margin: 0 0 6px; font-weight: 400; color: #9fe0a8; }
.nq-orders ul { margin: 0; padding: 0; list-style: none; }
.nq-orders li { padding: 3px 0; border-bottom: 1px dashed #1c2e1f; }
.nq-orders p { margin: 0; color: #6f8f74; }
.nq-orders code { color: #fff; }
.nq-wait { color: #ffc53d; }
.nq-yes { color: #5cff7a; }
.nq-no { color: #ff5a5a; }
.nq-foot { margin-top: 20px; font-size: 11px; text-align: center; color: #3d5a42; }
/* janelinha do pedido (suspense e resultado) */
.nq-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.82); }
.nq-box { width: min(420px, 100%); padding: 18px 20px; border: 1px solid #5cff7a; background: #020402; color: #9fe0a8; font: 14px/1.6 "Courier Prime", "Courier New", monospace; box-shadow: 0 0 30px rgba(92, 255, 122, 0.2); }
.nq-box p { margin: 0 0 6px; }
.nq-box a { color: #5cff7a; }
.nq-box .nq-ov-h { font: 28px/1.1 var(--font-crt); letter-spacing: 0.06em; color: #fff; }
.nq-box .nq-ov-h.nq-yes { color: #5cff7a; text-shadow: 0 0 10px rgba(92, 255, 122, 0.5); }
.nq-box .nq-ov-h.nq-no { color: #ff3b3b; text-shadow: 0 0 10px rgba(255, 59, 59, 0.6); }
.nq-line { opacity: 0; animation: nqLine 0.01s linear forwards; animation-delay: var(--d); }
@keyframes nqLine { to { opacity: 1; } }
.nq-small { font-size: 12px; color: #6f8f74; }
@media (max-width: 700px) {
  .nq-id { grid-template-columns: auto minmax(0, 1fr); }
  .nq-id .nq-price { grid-column: 2; }
}

/* ---------- ficha: 3 espaços ativos, categorias e itens disponíveis ----------
   As cores de cada mundo ficam nas variáveis --iv-* (Hawkins: papel; Invertido: escuro). */
.gear { margin: 4px 0 20px; padding-top: 14px; border-top: 1px dashed currentColor; container: gear / inline-size; }
.theme-hawkins .gear {
  --iv-panel: #fbf7ee; --iv-card: #fff; --iv-line: #d9ccb4; --iv-soft: #efe4cc; --iv-text: #1c1a2e; --iv-muted: #6a5f4f;
  --iv-accent: #0e87a0; --iv-accent-bg: #e3f5f8; --iv-tag: #7a3b0c; --iv-tag-text: #fff;
}
.theme-upside .gear {
  --iv-panel: rgba(0, 0, 0, 0.28); --iv-card: #121821; --iv-line: #2a3441; --iv-soft: #1a0d10; --iv-text: #c9d2dd; --iv-muted: #6f7f93;
  --iv-accent: #e0202e; --iv-accent-bg: rgba(224, 32, 46, 0.1); --iv-tag: #8a0c16; --iv-tag-text: #ffd6d9;
}
.gear-wait { opacity: 0.7; }
/* largo: principais e categorias à esquerda, disponíveis à direita (como no modelo);
   médio: principais em cima, categorias | disponíveis embaixo; estreito: tudo em coluna */
.inv-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "active avail" "cats avail"; gap: 14px; align-items: start; }
.inv-p-active { grid-area: active; }
.inv-p-cats { grid-area: cats; }
.inv-avail { grid-area: avail; align-self: stretch; }
.inv-panel { container-type: inline-size; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--iv-line); border-radius: 12px; background: var(--iv-panel); color: var(--iv-text); }
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inv-title { margin: 0; font: 700 13px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; }
.inv-title span { font-size: 11px; letter-spacing: 0.08em; color: var(--iv-muted); }
.inv-sub { margin: 2px 0 0; font-size: 12px; color: var(--iv-muted); }
.inv-count { flex: 0 0 auto; padding: 3px 10px; border: 1px solid var(--iv-line); border-radius: 6px; background: var(--iv-card); font: 700 12px var(--font-small); white-space: nowrap; }
/* os 3 espaços ativos */
.inv-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inv-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 158px; padding: 8px 8px 0; overflow: hidden; border: 1px solid var(--iv-line); border-radius: 10px; background: var(--iv-card); text-align: center; transition: transform 0.15s, opacity 0.15s, background-color 0.15s; }
.inv-slot.filled { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.inv-slot-name { align-self: stretch; padding-right: 18px; overflow: hidden; font-size: 12.5px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.inv-slot-ico { font-size: 38px; line-height: 1.1; }
.inv-slot .bonus-chips { justify-content: center; }
.inv-slot .tile-timer { align-self: stretch; }
.inv-slot-tag { align-self: stretch; margin: auto -8px 0; padding: 4px 0; background: var(--iv-tag); color: var(--iv-tag-text); font: 700 10.5px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; }
.inv-slot.empty { justify-content: center; border-style: dashed; background: transparent; color: var(--iv-muted); }
.inv-slot.empty b { font-size: 12.5px; color: var(--iv-text); opacity: 0.8; }
.inv-slot.empty small { padding: 0 4px 8px; font-size: 11px; line-height: 1.3; }
.inv-slot-num { display: grid; place-items: center; width: 26px; height: 26px; border: 1px dashed var(--iv-line); border-radius: 50%; font: 700 12px var(--font-small); }
.inv-x { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; border: 1px solid var(--iv-line); border-radius: 50%; background: var(--iv-card); color: inherit; font-size: 10px; line-height: 1; cursor: pointer; }
.inv-x:hover { border-color: var(--iv-accent); color: var(--iv-accent); }
/* soma nos atributos */
.gear-attrs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.gear-attrs li { display: grid; place-items: center; padding: 4px 1px; border: 1px solid var(--iv-line); border-radius: 7px; background: var(--iv-card); text-align: center; cursor: help; }
.gear-attrs abbr { font: 700 10px var(--font-small); letter-spacing: 0.06em; text-decoration: none; opacity: 0.75; }
.gear-attrs b { font: 700 16px/1.2 var(--font-logo); }
.gear-note { margin: 6px 0 0; font-size: 11.5px; color: var(--iv-muted); }
.gear-note b { color: var(--iv-text); }
/* categorias */
.inv-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inv-cat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 8px 6px; border: 1px solid var(--iv-line); border-radius: 10px; background: var(--iv-card); color: var(--iv-text); font: 12px/1.2 var(--font-ui); text-align: center; transition: border-color 0.15s, box-shadow 0.15s; }
.inv-cat:hover { border-color: var(--iv-accent); }
.inv-cat.on { border-color: var(--iv-accent); background: var(--iv-accent-bg); box-shadow: 0 0 0 1px var(--iv-accent); font-weight: 700; }
.inv-cat-ico { font-size: 26px; line-height: 1; }
.inv-cat small { position: absolute; top: 5px; right: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--iv-tag); color: var(--iv-tag-text); font: 700 10.5px/1.6 var(--font-small); }
/* itens disponíveis */
.inv-avail { transition: background-color 0.15s; }
.inv-info { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--iv-line); border-radius: 8px; background: var(--iv-card); font-size: 12px; line-height: 1.4; color: var(--iv-muted); }
.inv-info-i { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--iv-accent); border-radius: 50%; color: var(--iv-accent); font: italic 700 11px Georgia, serif; }
.inv-list { display: grid; gap: 6px; max-height: 470px; margin: 0; padding: 0 2px 0 0; overflow-y: auto; list-style: none; }
.inv-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; padding: 7px 8px; border: 1px solid var(--iv-line); border-radius: 9px; background: var(--iv-card); }
.inv-row[data-drag] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.inv-row.is-active { opacity: 0.6; }
.inv-row-ico { font-size: 28px; line-height: 1; text-align: center; }
.inv-row-info { display: grid; gap: 2px; min-width: 0; }
.inv-row-info b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.inv-row-kind, .inv-row-open { font-size: 11px; color: var(--iv-muted); }
.inv-row-open { font-weight: 700; color: var(--iv-accent); }
.inv-row-qty { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 5px; border: 1px solid var(--iv-line); border-radius: 6px; font: 700 12px var(--font-small); }
.inv-add { display: inline-flex; align-items: center; gap: 6px; max-width: 124px; padding: 5px 9px; border: 1px solid var(--iv-accent); border-radius: 7px; background: transparent; color: var(--iv-accent); font: 700 10.5px/1.2 var(--font-small); letter-spacing: 0.04em; text-align: left; text-transform: uppercase; cursor: pointer; }
.inv-add b { font-size: 16px; line-height: 1; }
.inv-add:hover:not([disabled]) { background: var(--iv-accent); color: #fff; }
.inv-add[disabled] { border-color: var(--iv-line); color: var(--iv-muted); cursor: default; }
.inv-empty { margin: 18px 0; font-size: 13px; text-align: center; color: var(--iv-muted); }
.inv-empty a { color: var(--iv-accent); }
/* relógio (barra + contador) */
.tile-timer { display: flex; align-items: center; gap: 6px; }
.tile-bar { display: block; flex: 1; width: 100%; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, 0.12); }
.tile-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2fa85a, #9be15d); transition: width 0.9s linear; }
.tile-timer em { font: 15px/1 var(--font-crt); font-style: normal; letter-spacing: 0.04em; }
.tile-timer.low .tile-bar i { background: #e0202e; }
.tile-timer.low em { color: #e0202e; }
.theme-upside .tile-bar { background: rgba(255, 255, 255, 0.08); }
.theme-upside .tile-bar i { background: linear-gradient(90deg, #4a5a70, #9fb2cc); }
.theme-upside .tile-timer.low .tile-bar i { background: #e0202e; }
/* cores dos atributos e das etiquetas de bônus */
.theme-hawkins .gear-attrs li.up { border-color: #8fd1a4; background: #e6f7ea; color: #0b6b1f; }
.theme-hawkins .gear-attrs li.down { border-color: #f0a6a6; background: #fde6e8; color: #b00020; }
.theme-upside .gear-attrs li.up { border-color: #2f6b38; background: #0b1a0f; color: #8fd19e; }
.theme-upside .gear-attrs li.down { border-color: #6b1a22; background: #1c070a; color: #ff5a64; }
.theme-upside .gear .bonus-chips .up { background: #0b1a0f; border-color: #2f6b38; color: #8fd19e; }
.theme-upside .gear .bonus-chips .down { background: #1c070a; border-color: #6b1a22; color: #ff5a64; }
/* arrastar */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 95; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; pointer-events: none; font: 700 13px var(--font-ui); background: #fff; color: #1c1a2e; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.drag-ghost span { font-size: 24px; line-height: 1; }
.theme-upside .drag-ghost { background: #121821; color: #c9d2dd; border: 1px solid #8a0c16; }
body.gear-dragging, body.gear-dragging * { cursor: grabbing !important; }
.gear .dragging { opacity: 0.35; }
.gear .drop-ok { outline: 2px solid #2fa85a; outline-offset: 2px; }
.gear .drop-no { opacity: 0.45; }
.gear .drop-ok.drop-over { background-color: rgba(47, 168, 90, 0.14); transform: scale(1.02); }
/* a ficha se ajusta à largura que tem (não à da tela) */
@container gear (max-width: 900px) {
  .inv-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "active active" "cats avail"; }
}
@container gear (max-width: 600px) {
  .inv-layout { grid-template-columns: 1fr; grid-template-areas: "active" "cats" "avail"; }
  .inv-list { max-height: none; }
}
@container (max-width: 330px) {
  .inv-cats { gap: 6px; }
  .inv-cat { min-height: 68px; padding: 6px 4px; font-size: 11px; }
  .inv-cat-ico { font-size: 22px; }
}
@container (max-width: 470px) {
  .inv-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .inv-row .inv-add { grid-column: 2 / -1; justify-content: center; max-width: none; }
}
@container (max-width: 400px) {
  .inv-slots { gap: 6px; }
  .inv-slot { min-height: 150px; padding: 6px 5px 0; }
  .inv-slot-name { font-size: 11.5px; }
  .inv-slot-ico { font-size: 30px; }
  .inv-slot-tag { margin: auto -5px 0; }
  .inv-slot.empty small { display: none; }
  .inv-slot .tile-timer { flex-direction: column; gap: 2px; }
  .gear-attrs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .inv-panel { padding: 10px; }
}

#conta { border-color: #39364e; background: #090d19; }
#conta > .box-head { background: linear-gradient(90deg, #191325, #101424 72%, #250d1a); border-bottom-color: #a72a42; box-shadow: inset 0 -1px 0 rgba(240, 55, 78, 0.3); }
#conta > .box-head .box-icon { background: #8d172a; box-shadow: 0 0 12px rgba(231, 39, 65, 0.45); }
#conta > .box-body { padding: clamp(8px, 1.5vw, 16px); background: radial-gradient(ellipse at 50% -15%, rgba(85, 31, 74, 0.3), transparent 60%), #090d19; }
.theme-hawkins #conta .profile, .theme-upside #conta .profile { padding: 0 clamp(14px, 2.5vw, 28px) 22px; border: 1px solid #30364b; border-radius: 6px; background: linear-gradient(145deg, #11172b 0%, #080d1b 58%, #110d1d 100%); color: #e7e8f0; box-shadow: inset 0 0 0 1px rgba(166, 48, 70, 0.13), 0 18px 35px rgba(0, 0, 0, 0.45); }
.theme-hawkins #conta .profile-head, .theme-upside #conta .profile-head { margin: 0 calc(-1 * clamp(14px, 2.5vw, 28px)); padding: 13px clamp(14px, 2.5vw, 28px); border-bottom: 1px solid #5c2435; background: linear-gradient(100deg, #24142a, #111827 62%, #311020); color: #e9b8c1; text-shadow: none; }
#conta .profile-label { color: #c9b5c8; font-family: var(--font-type); letter-spacing: 0.16em; }
#conta .profile-number { color: #ff6a78; font-family: var(--font-logo); font-size: 28px; line-height: 1; text-shadow: 0 0 12px rgba(255, 58, 79, 0.55); }
#conta .file-stamp { border-color: #ca5061; color: #ffa8b1; box-shadow: 0 0 10px rgba(234, 51, 73, 0.15); }
.theme-hawkins #conta .profile-char, .theme-upside #conta .profile-char { margin: 24px 0 17px; color: #f8e9e4; font: 700 clamp(27px, 4vw, 40px)/1.12 var(--font-logo); text-shadow: 0 0 18px rgba(226, 76, 93, 0.22); }
#conta .profile-data { gap: 10px; margin-bottom: 18px; }
#conta .profile-data > div { min-width: 0; padding: 10px 12px; border: 1px solid #293249; background: rgba(11, 18, 35, 0.6); }
#conta .profile-data dt { margin-bottom: 4px; color: #8d9dbb; opacity: 1; }
#conta .profile-data dd { color: #e2e5f1; overflow-wrap: anywhere; }
#conta .profile-bio { margin-bottom: 19px; padding: 12px 14px; border: 1px solid #343047; border-left: 3px solid #c9364d; background: rgba(16, 22, 40, 0.7); color: #c4cadd; font-family: var(--font-type); line-height: 1.5; }
.inventory-hero { position: relative; isolation: isolate; min-height: 155px; display: flex; flex-direction: column; justify-content: end; margin: 0 calc(-1 * clamp(14px, 2.5vw, 28px)); padding: 18px clamp(18px, 3vw, 34px) 20px; overflow: hidden; border-block: 1px solid #3c2739; background: linear-gradient(90deg, rgba(6, 8, 18, 0.57), rgba(6, 8, 18, 0.16) 70%), linear-gradient(0deg, #070b17, transparent 88%), url("images/inventory-forest.png") center 56% / cover; }
.inventory-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 2% 95%, rgba(221, 38, 61, 0.21), transparent 33%); }
.inventory-hero-kicker { width: fit-content; margin-bottom: 5px; color: #9daec8; font: 700 10px var(--font-small); letter-spacing: 0.2em; }
.inventory-hero h3 { width: fit-content; margin: 0; color: #f04859; font: 700 clamp(35px, 5.5vw, 58px)/1 var(--font-logo); letter-spacing: 0.045em; text-transform: uppercase; text-shadow: 0 2px 0 #4d0d19, 0 0 13px rgba(255, 39, 65, 0.65), 0 0 32px rgba(193, 21, 50, 0.4); }
.inventory-hero p { width: fit-content; margin: 9px 0 0; color: #c8d2e4; font: 13px var(--font-type); letter-spacing: 0.035em; }
.theme-hawkins #conta .gear, .theme-upside #conta .gear { --iv-panel: rgba(8, 13, 29, 0.91); --iv-card: #10182b; --iv-line: #36405d; --iv-soft: #1b1525; --iv-text: #e7e8f2; --iv-muted: #a4b0cb; --iv-accent: #ff526a; --iv-accent-bg: rgba(133, 23, 44, 0.27); --iv-tag: #a51d35; --iv-tag-text: #fff0f2; margin-top: 0; padding-top: 17px; border-top: 0; }
#conta .inv-layout { gap: 11px; }
#conta .inv-panel { border-color: #383653; border-radius: 5px; background: linear-gradient(145deg, rgba(16, 22, 42, 0.96), rgba(7, 12, 27, 0.96)); box-shadow: inset 0 1px 0 rgba(213, 67, 91, 0.12), 0 8px 20px rgba(0, 0, 0, 0.2); }
#conta .inv-title { color: #f14959; font: 700 16px/1.2 var(--font-logo); letter-spacing: 0.05em; text-shadow: 0 0 12px rgba(242, 53, 80, 0.4); }
#conta .inv-title span { color: #aebce0; font: 700 11px var(--font-small); }
#conta .inv-sub { color: #a5aec9; font-family: var(--font-type); line-height: 1.35; }
#conta .inv-count { border-color: #526994; border-radius: 3px; background: #0a1328; color: #b8ceff; letter-spacing: 0.07em; }
#conta .inv-slot { min-height: 180px; border-color: #414363; border-radius: 5px; background: radial-gradient(ellipse at 50% 40%, rgba(45, 55, 83, 0.38), transparent 75%), #0c1428; color: #e6e8f0; }
#conta .inv-slot.filled { border-color: #9c2d47; box-shadow: inset 0 0 17px rgba(219, 35, 62, 0.08); }
#conta .inv-slot.filled:hover { border-color: #ef4d65; box-shadow: 0 0 15px rgba(238, 42, 70, 0.28), inset 0 0 18px rgba(219, 35, 62, 0.12); transform: translateY(-2px); }
#conta .inv-slot.empty { border-style: dashed; background: rgba(12, 18, 36, 0.55); }
#conta .inv-slot-name { color: #e8e4ef; font: 700 12px var(--font-type); }
#conta .inv-slot-ico { display: grid; place-items: center; width: 100%; min-height: 76px; flex: 1; }
#conta .inv-slot-ico img { max-width: 94%; width: auto; height: 82px; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.6)); }
#conta .inv-slot-tag { background: linear-gradient(#c42b48, #8d152c); box-shadow: 0 -3px 12px rgba(186, 28, 52, 0.22); }
#conta .inv-x { border-color: #794053; background: #181429; color: #e8a5b1; }
#conta .gear-attrs li { border-radius: 3px; background: #0c1327; }
#conta .gear-attrs abbr { color: #aab8d7; }
#conta .gear-attrs b { color: #f2e8ec; }
.theme-hawkins #conta .gear-attrs li.up, .theme-upside #conta .gear-attrs li.up { border-color: #386758; background: #10251f; }
.theme-hawkins #conta .gear-attrs li.down, .theme-upside #conta .gear-attrs li.down { border-color: #763243; background: #29121d; }
#conta .gear-note { color: #a5b0cb; font-family: var(--font-type); }
#conta .gear-note b { color: #e5e7f1; }
#conta .inv-cat { min-height: 106px; border-color: #37415f; border-radius: 5px; background: linear-gradient(145deg, #111a32, #0b1226); color: #c9d5ed; font: 12px/1.15 var(--font-type); }
#conta .inv-cat:hover { border-color: #dc4961; background: #1a1932; box-shadow: 0 0 12px rgba(226, 45, 76, 0.17); }
#conta .inv-cat.on { border-color: #ef3d57; background: linear-gradient(145deg, #351427, #171326); color: #fff1f3; box-shadow: 0 0 0 1px rgba(255, 61, 89, 0.55), 0 0 17px rgba(243, 36, 65, 0.26); }
#conta .inv-cat-ico { display: grid; place-items: center; height: 55px; width: 100%; }
#conta .inv-cat-ico img { max-width: 90%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5)); }
#conta .inv-cat small { background: #5c1f37; }
#conta .inv-info { border-color: #3e5278; border-radius: 4px; background: #111e36; color: #b0c2e3; font-family: var(--font-type); }
#conta .inv-info-i { border-color: #6da9e7; color: #8ac3ff; }
#conta .inv-list { scrollbar-color: #7f314c #0b1122; }
#conta .inv-row { grid-template-columns: 54px minmax(0, 1fr) auto auto; min-height: 74px; border-color: #35405c; border-radius: 4px; background: #0e172d; }
#conta .inv-row:hover { border-color: #80607a; background: #141c34; }
#conta .inv-row-ico { display: grid; place-items: center; width: 52px; height: 56px; }
#conta .inv-row-ico img { max-width: 100%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
#conta .inv-row-info b { color: #e3e9f7; font: 700 12px var(--font-type); }
#conta .inv-row-kind { color: #9bb0d4; }
#conta .inv-row-qty { border-radius: 3px; background: #0b1224; color: #d0ddf8; }
#conta .inv-add { border-color: #7389b6; border-radius: 3px; color: #bbd2ff; }
#conta .inv-add:hover:not([disabled]) { border-color: #ee4761; background: #a91e37; color: #fff; box-shadow: 0 0 12px rgba(231, 37, 68, 0.35); }
#conta .inv-empty { padding: 24px 10px; border: 1px dashed #344360; background: rgba(8, 15, 30, 0.65); font-family: var(--font-type); }
#conta .inv-empty a { color: #ff8290; }
#conta .gear .bonus-chips .up { background: #102e2b; border-color: #326c65; color: #9de6d7; }
#conta .gear .bonus-chips .down { background: #33141c; border-color: #7a3544; color: #ff9fae; }
.drag-ghost { background: #111b32; color: #e7e9f4; border: 1px solid #d3405b; }
.drag-ghost img { width: 28px; height: 28px; object-fit: contain; }
#conta #btn-logout { margin-top: 3px; }
@container gear (max-width: 470px) {
  #conta .inv-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  #conta .inv-row .inv-add { grid-column: 2 / -1; justify-content: center; max-width: none; }
}
@container gear (max-width: 400px) {
  #conta .inv-slot { min-height: 144px; }
  #conta .inv-slot-ico { min-height: 50px; }
  #conta .inv-slot-ico img { height: 54px; }
  #conta .inv-cat { min-height: 86px; }
  #conta .inv-cat-ico { height: 42px; }
  #conta .inv-cat-ico img { max-height: 40px; }
}

/* =========================================================
   CLASSES — catálogo das classes e subclasses
   O conteúdo é o mesmo nos dois mundos; só a aparência muda:
   Hawkins = cartas e fichas de papel impresso num mural da escola;
   Invertido = o mesmo mural no escuro, apodrecido e com brilho vermelho.
   ========================================================= */
.cls-wrap { padding-top: 22px; }
.theme-hawkins .cls {
  --paper: #f6f1e7; --paper-2: #ece2cf; --paper-edge: #d9ccb4;
  --ink: #1c1a2e; --ink-soft: #595470; --lens: #fbf6ec; --rule: rgba(28, 26, 46, 0.16);
  --card-text: #3b3850; --board-1: #1d1747; --board-2: #110d2f;
  /* faixas de poder das estrelas: do apagado ao "holográfico" */
  --tier1: #9c96b9; --tier2: #1c9bb0; --tier3: #d99200; --tier4: #ec641a; --tier5: #d4144d;
  --tier6: linear-gradient(135deg, #ff4fc8, #ffc53d 50%, #27e3d6); --tier6-solid: #ff4fc8;
  --star-off: rgba(28, 26, 46, 0.12);
}
.theme-upside .cls {
  --paper: #10151c; --paper-2: #0a0d12; --paper-edge: #2c1318;
  --ink: #d9d2cf; --ink-soft: #8391a3; --lens: #0b0e13; --rule: rgba(201, 210, 221, 0.12);
  --card-text: #9aa6b5; --board-1: #0b0e13; --board-2: #050608;
  /* no Invertido: cinza de cinzas → azul frio → osso → brasa → sangue → brasa viva */
  --tier1: #56616f; --tier2: #86a0bf; --tier3: #d6c19d; --tier4: #ff7b3f; --tier5: #ee2635;
  --tier6: linear-gradient(135deg, #fff2ee, #ff5a5a); --tier6-solid: #ff5a5a;
  --star-off: rgba(201, 210, 221, 0.1);
}
/* cores de cada classe (--c brilhante, --c-ink para texto) */
.theme-hawkins [data-cls="tigers"] { --c: #ff8a2b; --c-ink: #c2560a; }
.theme-hawkins [data-cls="cheerleaders"] { --c: #ff4fc8; --c-ink: #b3167c; }
.theme-hawkins [data-cls="misterio"] { --c: #27c9d6; --c-ink: #0a7d8a; }
.theme-hawkins [data-cls="hellfire"] { --c: #ff2e4d; --c-ink: #c0112e; }
.theme-upside [data-cls="tigers"] { --c: #d8612f; --c-ink: #ff9166; }
.theme-upside [data-cls="cheerleaders"] { --c: #c8305f; --c-ink: #ff7aa0; }
.theme-upside [data-cls="misterio"] { --c: #6f8fb0; --c-ink: #abc4e0; }
.theme-upside [data-cls="hellfire"] { --c: #e0202e; --c-ink: #ff6168; }
.cls [data-tier="1"] { --star: var(--tier1); --star-solid: var(--tier1); }
.cls [data-tier="2"] { --star: var(--tier2); --star-solid: var(--tier2); }
.cls [data-tier="3"] { --star: var(--tier3); --star-solid: var(--tier3); }
.cls [data-tier="4"] { --star: var(--tier4); --star-solid: var(--tier4); }
.cls [data-tier="5"] { --star: var(--tier5); --star-solid: var(--tier5); }
.cls [data-tier="6"] { --star: var(--tier6); --star-solid: var(--tier6-solid); }

/* mural */
.cls-board { position: relative; overflow: hidden; padding: 20px clamp(14px, 3vw, 28px) 30px; }
.theme-hawkins .cls-board {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(138, 60, 255, 0.3), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(var(--board-1), var(--board-2));
}
.theme-upside .cls-board {
  background:
    radial-gradient(ellipse at 50% 125%, rgba(150, 10, 20, 0.35), transparent 60%),
    radial-gradient(rgba(200, 215, 240, 0.035) 1px, transparent 1.4px) 0 0 / 9px 9px,
    linear-gradient(var(--board-1), var(--board-2));
}
/* brilho vermelho que pulsa bem devagar no Invertido */
.theme-upside .cls-board::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 30, 40, 0.16), transparent 70%); animation: redPulse 6s ease-in-out infinite; pointer-events: none; }
.cls-vines { position: absolute; width: 280px; height: 220px; pointer-events: none; z-index: 0; }
.cls-vines-a { left: 0; top: 0; }
.cls-vines-b { right: 0; bottom: 0; }
.cls-lead { position: relative; z-index: 1; max-width: 70ch; margin: 0 0 8px; color: var(--muted); }
.cls-app { position: relative; z-index: 1; }

/* ---------- cartas das classes ---------- */
.cls-picker { list-style: none; margin: 0; padding: 22px 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cls-slot { display: flex; }
.cls-card { all: unset; box-sizing: border-box; display: flex; flex: 1; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cls-face {
  position: relative; flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; padding: 18px 15px 15px;
  border-radius: 14px;
  text-align: left;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.25), box-shadow 0.3s;
}
.cls-face::before { content: ""; position: absolute; inset: 7px; border-radius: 9px; pointer-events: none; }
.cls-card:hover .cls-face, .cls-card:focus-visible .cls-face { transform: rotate(0deg) translateY(-8px); }
.cls-card:active .cls-face { transform: translateY(-3px) scale(0.985); transition-duration: 0.1s; }
.cls-card:focus-visible .cls-face, .cls-sub:focus-visible .cls-sub-face { outline: 3px solid var(--c); outline-offset: 4px; }
.cls-pin { position: absolute; top: -8px; left: 50%; z-index: 2; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; transition: transform 0.25s; }
.cls-card:hover .cls-pin { transform: translateY(-3px) scale(1.08); }
.cls-top { display: flex; justify-content: space-between; gap: 6px; padding: 0 4px; font: 700 10px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); }
.cls-art { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.82; overflow: hidden; border-radius: 8px; }
.cls-art .cls-emb { width: 70%; height: 92%; }
.cls-name { padding: 2px 4px 0; font: 700 clamp(18px, 1.9vw, 21px)/1.1 var(--font-logo); letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-ink); }
.cls-desc { flex: 1; padding: 0 4px; font: 13px/1.45 var(--font-type); color: var(--card-text); }
.cls-cta { align-self: flex-start; margin: 2px 4px 0; padding: 5px 11px; border-radius: 999px; font: 700 12px var(--font-ui); }
.cls-cta b { display: inline-block; transition: transform 0.2s; }
.cls-card:hover .cls-cta b { transform: translateX(4px); }

/* Hawkins: cartão impresso preso com tachinha, ilustração em duas cores com retícula */
.theme-hawkins .cls-face { background: linear-gradient(170deg, #fdf9f1, var(--paper) 45%, var(--paper-2)); color: var(--ink); border: 1px solid var(--paper-edge); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.theme-hawkins .cls-face::before { border: 2.5px solid var(--c); opacity: 0.9; }
.theme-hawkins .cls-card:hover .cls-face { box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5), 0 0 0 3px color-mix(in srgb, var(--c) 50%, transparent), 0 0 34px color-mix(in srgb, var(--c) 35%, transparent); }
.theme-hawkins .cls-pin { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 42%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45); }
.theme-hawkins .cls-art {
  --acc: var(--c);
  color: var(--ink);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c) 32%, transparent) 1.1px, transparent 1.5px) 0 0 / 6px 6px,
    repeating-conic-gradient(from 0deg at 50% 62%, color-mix(in srgb, var(--c) 16%, transparent) 0 7deg, transparent 7deg 14deg),
    linear-gradient(#fffaf0, #f1e6d1);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 75%, transparent);
}
.theme-hawkins .cls-art .cls-emb { filter: drop-shadow(2.5px 2px 0 color-mix(in srgb, var(--c) 50%, transparent)); }
.theme-hawkins .cls-name { text-shadow: 1.5px 1.5px 0 color-mix(in srgb, var(--c) 28%, transparent); }
.theme-hawkins .cls-cta { background: var(--c-ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* Invertido: o mesmo cartão escurecido, bordas comidas e desenho em neon vermelho */
.theme-upside .cls-face { background: radial-gradient(ellipse at 30% 0%, rgba(120, 20, 30, 0.2), transparent 60%), linear-gradient(170deg, #161b23, #0c1016 70%, #090b0f); color: var(--ink); border: 1px solid var(--paper-edge); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.85), inset 0 0 26px rgba(0, 0, 0, 0.75); }
.theme-upside .cls-face::before { border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 22%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 16%, transparent); }
.theme-upside .cls-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 94% 6%, rgba(0, 0, 0, 0.6), transparent 22%), radial-gradient(circle at 5% 96%, rgba(70, 0, 8, 0.45), transparent 26%); }
.theme-upside .cls-card:hover .cls-face { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.9), 0 0 28px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 26px rgba(0, 0, 0, 0.75); }
.theme-upside .cls-pin { background: radial-gradient(circle at 35% 30%, #8a7a78 0 10%, #3a0d10 45%, #120304); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8); }
.theme-upside .cls-art {
  --acc: var(--c-ink);
  color: #ddd5d1;
  background: radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--c) 36%, transparent), transparent 66%), radial-gradient(rgba(200, 215, 240, 0.07) 1px, transparent 1.5px) 0 0 / 8px 8px, #07090c;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 60, 60, 0.12);
}
.theme-upside .cls-art .cls-emb { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 80%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--c) 40%, transparent)); }
.theme-upside .cls-card:hover .cls-emb, .theme-upside .cls-card:focus-visible .cls-emb { animation: neonFlicker 2.6s infinite; }
.theme-upside .cls-name { text-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.theme-upside .cls-desc { font-family: var(--font-file); }
.theme-upside .cls-cta { border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--c-ink); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 25%, transparent); }

/* ---------- desenhos (SVG) ---------- */
.cls-ico { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cls-emb { stroke-width: 3; }
.cls-ico .a { stroke: var(--acc, currentColor); }
.cls-ico .fa { fill: var(--acc, currentColor); stroke: none; }
.cls-ico .fa2 { fill: var(--acc, currentColor); }
.cls-ico .fi { fill: currentColor; stroke: none; }
.cls-ico .lens { fill: var(--lens); }
.cls-ico .th { stroke-width: 3.4; }
.cls-emb .th { stroke-width: 5; }
.cls-ico .thin { stroke-width: 1.5; }
.cls-ico .soft { opacity: 0.55; }
.cls-ico .dash { stroke-dasharray: 1.5 4.5; }
.cls-ico text { fill: currentColor; stroke: none; font: 700 14px var(--font-logo); text-anchor: middle; }

/* ---------- dentro de uma classe ---------- */
.cls-view { padding-top: 18px; }
.cls-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 20px; }
.cls-back { min-height: 40px; }
.cls-crumb { font: 11px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cls-crumb b { color: var(--text); }
.cls-hero { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: clamp(18px, 3.2vw, 38px); align-items: center; margin-bottom: 28px; }
.cls-hero-card { display: flex; }
.cls-hero-card .cls-face { --tilt: -2deg; padding-bottom: 16px; }
.cls-hero-card .cls-name { text-align: center; }
.cls-kicker { margin: 0 0 4px; font: 700 11px var(--font-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); }
.cls-hero-name { margin: 0 0 12px; font: 700 clamp(28px, 4.6vw, 48px)/1.02 var(--font-logo); text-transform: uppercase; outline: none; }
.theme-hawkins .cls-hero-name { color: #fff; text-shadow: 0 0 2px #fff, 0 0 12px var(--c), 0 0 30px color-mix(in srgb, var(--c) 60%, transparent); }
.theme-upside .cls-hero-name { color: var(--c-ink); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 80%, transparent), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); animation: flicker 7s infinite; }
.cls-intro { max-width: 64ch; margin: 0 0 14px; font-size: 15px; color: var(--text); }
.cls-ranks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cls-ranks li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, 0.22); font: 12px var(--font-small); color: var(--muted); }
.cls-ranks b { font-size: 14px; color: var(--text); }
.cls-subs-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cls-subs-title { margin: 0; font: 700 12px var(--font-small); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cls-subs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; margin: 0; padding: 10px 0 0; list-style: none; }
.cls-subs li { display: flex; }
.cls-foot { margin: 22px 0 14px; font: 13px var(--font-type); color: var(--muted); }
.cls-back-end { display: table; }

/* legenda das faixas de poder */
.cls-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font: 11px var(--font-small); color: var(--muted); }
.cls-legend li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cls-legend i, .cls-stars i { clip-path: polygon(50% 0%, 61.8% 35.3%, 99% 35.3%, 68.9% 57.1%, 80.3% 92.7%, 50% 70.9%, 19.7% 92.7%, 31.1% 57.1%, 1% 35.3%, 38.2% 35.3%); }
.cls-legend i { width: 12px; height: 12px; background: var(--star); }
.cls-legend small { opacity: 0.75; }

/* ---------- cartas das subclasses (fichinhas) ---------- */
.cls-sub { all: unset; box-sizing: border-box; display: flex; flex: 1; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cls-sub-face { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 12px; border-radius: 10px; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.25), box-shadow 0.25s; }
.cls-sub:hover .cls-sub-face, .cls-sub:focus-visible .cls-sub-face { transform: translateY(-6px) rotate(-0.8deg); }
.cls-sub:active .cls-sub-face { transform: translateY(-1px) scale(0.98); transition-duration: 0.1s; }
.cls-sub-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.cls-sub-ico { width: 104px; height: 104px; padding: 0; flex: 0 0 auto; }
/* o quadro é desenhado 3% maior e recortado: nada do desenho vizinho vaza na borda */
.cls-illustration { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; transition: transform 0.25s ease, filter 0.25s ease; }
.cls-illustration::before { content: ""; position: absolute; inset: -1.5%; background-image: var(--art-image); background-size: 400% 200%; background-position: var(--art-x) var(--art-y); background-repeat: no-repeat; }
.cls-sub:hover .cls-illustration, .cls-sub:focus-visible .cls-illustration { transform: rotate(-3deg) scale(1.045); }
.cls-sub-pts { font: 700 20px/1 var(--font-logo); text-align: right; }
.cls-sub-pts small { display: block; margin-top: 2px; font: 700 9px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.cls-sub-name { font: 700 17px/1.15 var(--font-logo); overflow-wrap: anywhere; }
.cls-sub-arch { font: 12px/1.35 var(--font-type); }
.cls-sub-top { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 8px; }
.cls-sub-top span { padding: 2px 6px; border-radius: 4px; font: 700 11px var(--font-small); letter-spacing: 0.04em; white-space: nowrap; }
.cls-sub-top abbr { text-decoration: none; }
.cls-rank { position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 999px; font: 700 10px var(--font-small); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.theme-hawkins .cls-sub-face { background: var(--paper); color: var(--ink); border-top: 5px solid var(--c); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42); }
.theme-hawkins .cls-sub:hover .cls-sub-face { box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5), 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.theme-hawkins .cls-sub[data-rank] .cls-sub-face { background: linear-gradient(160deg, #fffdf6, var(--paper) 60%); }
.theme-hawkins .cls-sub-ico { filter: drop-shadow(0 2px 1px rgba(46, 29, 22, 0.12)); }
.theme-hawkins .cls-sub-pts { color: var(--c-ink); }
.theme-hawkins .cls-sub-arch { color: var(--ink-soft); }
.theme-hawkins .cls-sub-top span { color: var(--ink); background: color-mix(in srgb, var(--star-solid) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--star-solid) 65%, transparent); }
.theme-hawkins .cls-rank[data-rank="lider"] { color: #3a1a00; background: linear-gradient(#fff3a8, #ffc53d 50%, #f0a800 51%, #ffcf4d); border: 1px solid #b07a00; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.theme-hawkins .cls-rank[data-rank="vice"] { color: #26314d; background: linear-gradient(#ffffff, #dfe4f0 50%, #c3cbdd 51%, #e1e6f2); border: 1px solid #8791ab; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
.theme-upside .cls-sub-face { background: linear-gradient(170deg, #151a22, #0c1016); color: var(--text); border: 1px solid #25141a; border-top: 2px solid color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.8), inset 0 0 18px rgba(0, 0, 0, 0.6); }
.theme-upside .cls-sub:hover .cls-sub-face { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 18px rgba(0, 0, 0, 0.6); }
.theme-upside .cls-sub-ico { filter: grayscale(0.35) sepia(0.25) saturate(1.1) brightness(0.88) contrast(1.08) drop-shadow(0 3px 5px #000) drop-shadow(0 0 8px rgba(224, 32, 46, 0.22)); }
.theme-upside .cls-sub-pts { color: var(--c-ink); text-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.theme-upside .cls-sub-name { font-family: var(--font-file); font-weight: 400; }
.theme-upside .cls-sub-arch { color: var(--muted); }
.theme-upside .cls-sub-top span { color: var(--text); background: color-mix(in srgb, var(--star-solid) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--star-solid) 55%, transparent); }
.theme-upside .cls-rank { background: #07090c; }
.theme-upside .cls-rank[data-rank="lider"] { color: #ff8a8f; border: 1px solid #8a0c16; box-shadow: 0 0 10px rgba(224, 32, 46, 0.45); }
.theme-upside .cls-rank[data-rank="vice"] { color: #b9c4d2; border: 1px solid #3a4452; }

/* ---------- ficha da subclasse (janela) ---------- */
.cls-sheet { width: min(640px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); }
.cls-sheet::backdrop { background: rgba(8, 5, 24, 0.74); backdrop-filter: blur(2px); animation: clsFade 0.3s both; }
.theme-upside .cls-sheet::backdrop { background: rgba(0, 0, 0, 0.84); }
.cls-sheet.closing::backdrop { opacity: 0; transition: opacity 0.17s; }
.cls-sheet-in { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; border-radius: 14px; }
.cls-sheet-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 12px 14px 18px; }
.cls-sheet-ico { width: 96px; height: 96px; padding: 0; }
.cls-sheet-kicker { margin: 0; font: 700 10.5px var(--font-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.cls-sheet-head h3 { margin: 2px 0 0; font: 700 clamp(22px, 5vw, 28px)/1.05 var(--font-logo); overflow-wrap: anywhere; }
.cls-sheet-arch { margin: 3px 0 0; font: 13px var(--font-type); opacity: 0.92; }
.cls-x { all: unset; box-sizing: border-box; align-self: start; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: 700 16px var(--font-ui); cursor: pointer; }
.cls-x:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.cls-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 18px 22px 16px; }
.cls-stamp { float: right; margin: 2px 0 10px 14px; padding: 2px 10px; border: 2.5px solid currentColor; border-radius: 4px; font: 700 13px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(7deg); opacity: 0.88; }
.cls-sheet-desc { margin: 0 0 16px; font: 15px/1.55 var(--font-type); }
.cls-attrs { display: grid; margin: 0 0 4px; padding: 0; list-style: none; }
.cls-attr { --star-size: clamp(12px, 3.1vw, 17px); display: grid; grid-template-columns: minmax(84px, 150px) 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dotted var(--rule); }
.cls-attr-name { font: 700 14px var(--font-ui); }
.cls-attr-val { display: grid; place-items: center; height: 26px; border-radius: 5px; font: 700 15px var(--font-small); background: color-mix(in srgb, var(--star-solid) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--star-solid); }
.cls-stars { display: flex; gap: clamp(1px, 0.45vw, 3px); }
.cls-stars i { width: var(--star-size); height: var(--star-size); background: var(--star-off); }
.cls-stars i.on { background: var(--star); }
/* um respiro a cada 4 estrelas ajuda a contar (e coincide com as faixas) */
.cls-stars i:nth-child(4n):not(:last-child) { margin-right: clamp(3px, 0.8vw, 6px); }
.cls-sheet-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; font: 13px var(--font-small); }
.cls-sheet-total b { font: 700 28px/1 var(--font-logo); color: var(--c-ink); }
.cls-sheet-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--rule); }
.cls-nav { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; max-width: 42%; min-height: 42px; padding: 6px 12px; border-radius: 8px; font: 700 13px var(--font-ui); cursor: pointer; }
.cls-nav span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cls-nav:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.cls-nav:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.cls-sheet-count { font: 12px var(--font-small); opacity: 0.75; }
/* Hawkins: ficha de papel datilografada com cabeçalho "gel" na cor da classe */
.theme-hawkins .cls-sheet-in { background: linear-gradient(90deg, transparent 12px, rgba(220, 40, 60, 0.22) 12px 13.5px, transparent 13.5px), var(--paper); color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.theme-hawkins .cls-sheet-head { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), var(--c) 50%, var(--c-ink) 51%, var(--c)); }
.theme-hawkins .cls-sheet-ico { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25)); }
.theme-hawkins .cls-x { color: #fff; background: rgba(0, 0, 0, 0.18); }
.theme-hawkins .cls-x:hover { background: rgba(0, 0, 0, 0.32); }
.theme-hawkins .cls-stamp[data-rank="lider"] { color: #c0112e; }
.theme-hawkins .cls-stamp[data-rank="vice"] { color: #2f4f96; }
.theme-hawkins .cls-sheet .cls-legend, .theme-hawkins .cls-sheet-total { color: var(--ink-soft); }
.theme-hawkins .cls-nav { color: var(--c-ink); }
/* contorno finíssimo para as estrelas coloridas aparecerem bem no papel */
.theme-hawkins .cls-stars, .theme-hawkins .cls-legend i { filter: drop-shadow(0 0 0.6px rgba(28, 26, 46, 0.6)); }
/* Invertido: arquivo escuro, cabeçalho vermelho e estrelas que brilham */
.theme-upside .cls-sheet-in { background: linear-gradient(170deg, #1a2029, #0c1016 70%); color: #c9d2dd; border: 1px solid var(--paper-edge); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 40px color-mix(in srgb, var(--c) 16%, transparent); }
.theme-upside .cls-sheet-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 120%, rgba(224, 32, 46, 0.14), transparent 60%); animation: redPulse 6s ease-in-out infinite; }
.theme-upside .cls-sheet-head { color: #ffd9dc; background: linear-gradient(var(--h1), var(--h2) 50%, var(--h3) 51%, var(--h4)); }
.theme-upside .cls-sheet-head h3 { font-family: var(--font-file); font-weight: 400; text-shadow: 0 0 10px rgba(255, 60, 70, 0.5); }
.theme-upside .cls-sheet-ico { filter: grayscale(0.35) sepia(0.25) saturate(1.1) brightness(0.9) contrast(1.08) drop-shadow(0 3px 4px #000) drop-shadow(0 0 8px rgba(224, 32, 46, 0.25)); }
.theme-upside .cls-x { color: #ffd9dc; background: rgba(0, 0, 0, 0.3); }
.theme-upside .cls-x:hover { background: rgba(0, 0, 0, 0.55); }
.theme-upside .cls-stamp { color: #ff4a52; text-shadow: 0 0 8px rgba(255, 40, 50, 0.6); box-shadow: 0 0 10px rgba(255, 40, 50, 0.35); }
.theme-upside .cls-stamp[data-rank="vice"] { color: #b9c4d2; text-shadow: none; box-shadow: none; }
.theme-upside .cls-stars { filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--star-solid) 55%, transparent)); }
.theme-upside .cls-nav { color: var(--c-ink); }

/* estrelas acendendo uma a uma quando a ficha abre */
.cls-sheet-in.deal .cls-stars i.on { animation: clsStar 0.38s cubic-bezier(0.3, 0.9, 0.4, 1) both; animation-delay: calc(var(--d0, 160ms) + var(--r) * 55ms + var(--k) * 32ms); }
.cls-sheet-in.deal .cls-stars i:not(.on), .cls-sheet-in.deal .cls-attr-val { animation: clsFade 0.35s both; animation-delay: calc(var(--d0, 160ms) + var(--r) * 55ms); }
@keyframes clsFade { from { opacity: 0; } }
@keyframes clsStar { 0% { opacity: 0; transform: scale(0) rotate(-70deg); } 65% { opacity: 1; transform: scale(1.3) rotate(10deg); } 100% { opacity: 1; transform: none; } }

/* foto trocada por um admin: quadrada, inteira dentro do espaço */
.cls-photo::before { inset: 0; background-image: var(--photo); background-size: contain; background-position: center; }

/* edição das subclasses (só admins) */
.cls-sheet-tools { display: flex; align-items: flex-start; gap: 6px; align-self: start; }
.cls-edit-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; font: 700 13px var(--font-ui); cursor: pointer; white-space: nowrap; }
.cls-edit-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.theme-hawkins .cls-edit-btn { color: #fff; background: rgba(0, 0, 0, 0.22); }
.theme-hawkins .cls-edit-btn:hover { background: rgba(0, 0, 0, 0.36); }
.theme-upside .cls-edit-btn { color: #ffd9dc; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 90, 90, 0.35); }
.cls-edit { display: grid; gap: 12px; }
.cls-edit label { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cls-edit :is(input:not([type="file"]), textarea) { margin-top: 4px; border: 1px solid var(--rule); background: var(--edit-bg); color: var(--ink); box-shadow: none; font: 14px var(--font-ui); }
.cls-edit :is(input, textarea):focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.theme-hawkins .cls { --edit-bg: #fffdf8; }
.theme-upside .cls { --edit-bg: #0a0d12; }
.cls-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cls-edit-label { margin: 2px 0 0; font: 700 12px var(--font-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cls-edit-label small { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.cls-edit-photo { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px dashed var(--rule); border-radius: 10px; }
.cls-edit-photo > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cls-edit-photo .cls-edit-label { width: 100%; margin: 0; }
.cls-edit-pic { flex: 0 0 auto; width: 88px; height: 88px; }
.cls-edit-help { width: 100%; margin: 2px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.cls-edit .cls-file { position: relative; display: inline-block; flex: 0 0 auto; overflow: hidden; margin: 0; color: #fff; font: 700 13px var(--font-ui); cursor: pointer; }
.cls-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cls-file:focus-within { outline: 3px solid var(--c); outline-offset: 2px; }
.cls-attr-edit { grid-template-columns: minmax(84px, 150px) auto minmax(0, 1fr); }
.cls-step { display: inline-flex; align-items: center; gap: 4px; }
.cls-step button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--rule); font: 700 16px/1 var(--font-ui); color: var(--ink); cursor: pointer; }
.cls-step button:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.cls-step button:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.cls-step .cls-attr-val { width: 30px; }
.cls-stars-edit i { cursor: pointer; transition: transform 0.12s; }
.cls-stars-edit i:hover { transform: scale(1.3); }
.cls-edit-total { margin: 0; font: 13px var(--font-small); }
.cls-edit-total b { font: 700 20px var(--font-logo); color: var(--c-ink); }
.cls-edit-ok { color: #1f9d60; }
.cls-edit-warn { color: #c77700; }
.theme-upside .cls-edit-ok { color: #6fd6a0; }
.theme-upside .cls-edit-warn { color: #ffbf5a; }
.cls-edit-msg { margin: 0; min-height: 0; }
.cls-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.cls-edit-spacer { flex: 1; }
@media (max-width: 560px) {
  .cls-edit-grid { grid-template-columns: 1fr; }
  .cls-attr-edit { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cls-attr-edit .cls-stars { grid-column: 1 / -1; }
  .cls-edit-pic { width: 70px; height: 70px; }
}

/* atributos que explicam a si mesmos (passar o mouse, focar ou tocar) */
.cls-attrs-hint { margin: -6px 0 8px; font: 11.5px var(--font-small); color: var(--ink-soft); }
.cls-attr[data-attr] { padding-left: 6px; padding-right: 6px; border-radius: 6px; transition: background 0.15s; }
.cls-attr[data-attr]:hover, .cls-attr[aria-describedby] { background: color-mix(in srgb, var(--star-solid) 13%, transparent); }
.cls-attr[data-attr]:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.cls-attr[data-attr] .cls-attr-name { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.cls-sub-top span[data-attr] { transition: transform 0.15s, filter 0.15s; }
.cls-sub-top span[data-attr]:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* telinha: uma TV antiga que liga com o nome do atributo em neon, no estilo do logo */
.cls-tip { position: fixed; left: 0; top: 0; z-index: 85; width: min(410px, calc(100vw - 20px)); pointer-events: none; }
.cls-tip.pinned { pointer-events: auto; }
.cls-tip-box { position: relative; padding: 7px 7px 10px; border-radius: 16px; transform-origin: var(--ox, 50%) var(--oy, 0px); }
.cls-tip-box::before { content: ""; position: absolute; right: 18px; bottom: 3px; width: 6px; height: 3px; border-radius: 2px; }
.cls-tip-screen { position: relative; max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; padding: 10px 16px 12px; border-radius: 11px; }
.cls-tip-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px); animation: tipRoll 8s linear infinite; }
.cls-tip-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 8px 0 7px; }
.cls-tip-head::before, .cls-tip-head::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #ff2a1c; box-shadow: 0 0 5px rgba(255, 50, 30, 0.9), 0 0 14px rgba(255, 0, 0, 0.5); }
.cls-tip-head::before { top: 0; }
.cls-tip-head::after { bottom: 0; left: 32%; }
.cls-tip-name { font: 700 25px/1 var(--font-logo); letter-spacing: 0.02em; text-transform: uppercase; color: #0a0000; -webkit-text-stroke: 0.05em #ff3a26; paint-order: stroke fill; filter: var(--neon); }
.cls-tip-abbr { font: 24px/1 var(--font-crt); letter-spacing: 0.14em; color: #ff5a44; text-shadow: 0 0 6px rgba(255, 50, 30, 0.8); }
.cls-tip-body { display: grid; gap: 8px; font: 12.5px/1.45 var(--font-ui); }
.cls-tip-body p { margin: 0; }
.cls-tip-sum { font-size: 13.5px; font-weight: 700; }
.cls-tip-label { display: block; margin-bottom: 1px; font: 16px/1 var(--font-crt); letter-spacing: 0.16em; text-transform: uppercase; }
.cls-tip-vs p { margin-bottom: 5px; }
.cls-tip-vs ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cls-tip-vs li { display: flex; align-items: baseline; gap: 8px; }
.cls-tip-vs b { flex: 0 0 auto; min-width: 38px; padding: 1px 5px; border: 1px solid; border-radius: 3px; font: 400 16px/1.1 var(--font-crt); letter-spacing: 0.08em; text-align: center; }
.cls-tip-note { padding: 6px 9px; border-left: 3px solid; border-radius: 0 4px 4px 0; font-style: italic; }
.cls-tip-foot { padding-top: 7px; border-top: 1px dashed; font: 10.5px var(--font-small); letter-spacing: 0.08em; text-transform: uppercase; }
.cls-tip-foot b { font-size: 13px; color: var(--star-solid); }
/* Hawkins: TV de plástico com luzinha azul-água, tela vermelha, rótulos âmbar */
.theme-hawkins .cls-tip-box { background: linear-gradient(160deg, #3b3435, #1d1819 60%, #2b2425); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 30px rgba(255, 46, 107, 0.28); }
.theme-hawkins .cls-tip-box::before { background: #27e3d6; box-shadow: 0 0 6px #27e3d6; }
.theme-hawkins .cls-tip-screen { color: #f5e6d8; background: radial-gradient(ellipse at 50% 30%, #2c0b11, #0d0306 78%); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 60, 40, 0.25); }
.theme-hawkins .cls-tip-label { color: #ffc53d; text-shadow: 0 0 6px rgba(255, 197, 61, 0.5); }
.theme-hawkins .cls-tip-vs b { color: #27e3d6; border-color: rgba(39, 227, 214, 0.6); text-shadow: 0 0 6px rgba(39, 227, 214, 0.6); }
.theme-hawkins .cls-tip-note { color: #ffd9e4; border-color: #ff2e6b; background: rgba(255, 46, 107, 0.12); }
.theme-hawkins .cls-tip-foot { color: #c9b8ad; border-color: rgba(245, 230, 216, 0.22); }
/* Invertido: TV fria e suja, luz vermelha piscando, letreiro que falha */
.theme-upside .cls-tip-box { background: linear-gradient(160deg, #1c2129, #0a0c10 60%, #161b22); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.85), 0 0 0 1px #2c1318, 0 0 34px rgba(224, 32, 46, 0.32); }
.theme-upside .cls-tip-box::before { background: #e0202e; box-shadow: 0 0 6px #ff2a2a; animation: blink 1.2s steps(1) infinite; }
.theme-upside .cls-tip-screen { color: #c9d2dd; background: radial-gradient(ellipse at 50% 30%, #1d0508, #040102 78%); box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(224, 32, 46, 0.22); }
.theme-upside .cls-tip-label { color: #8aa2c0; text-shadow: 0 0 6px rgba(138, 162, 192, 0.4); }
.theme-upside .cls-tip-vs b { color: #ff6168; border-color: rgba(255, 60, 70, 0.5); text-shadow: 0 0 6px rgba(255, 40, 50, 0.6); }
.theme-upside .cls-tip-note { color: #e6c7ca; border-color: #b0101d; background: rgba(138, 12, 22, 0.2); }
.theme-upside .cls-tip-foot { color: #7f8c9d; border-color: rgba(201, 210, 221, 0.16); }
/* animações: liga (linha que abre em tela), troca de canal e desliga */
.cls-tip.on .cls-tip-box { animation: tipOn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cls-tip.swap .cls-tip-box { animation: tipSwap 0.22s steps(3, end) both; }
.cls-tip.off .cls-tip-box { animation: tipOff 0.16s ease-in both; }
.cls-tip.on .cls-tip-name { animation: neonOn 0.7s steps(1) 0.18s both; }
.theme-upside .cls-tip.on .cls-tip-name { animation: neonOn 0.7s steps(1) 0.18s both, tipFalter 3.4s steps(1) 1.2s infinite; }
.cls-tip.on .cls-tip-body > *, .cls-tip.swap .cls-tip-body > * { animation: tipLine 0.3s ease-out both; animation-delay: calc(var(--d0, 190ms) + var(--i) * 45ms); }
.cls-tip.swap { --d0: 30ms; }
@keyframes tipOn { 0% { opacity: 0; transform: scale(0.55, 0.02); filter: brightness(3); } 35% { opacity: 1; transform: scale(1, 0.02); filter: brightness(2.4); } 70% { transform: scale(1, 1.04); filter: brightness(1.25); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes tipOff { 0% { opacity: 1; transform: none; } 60% { opacity: 1; transform: scale(1, 0.02); filter: brightness(2.5); } 100% { opacity: 0; transform: scale(0, 0.02); } }
@keyframes tipSwap { 0% { transform: translateX(-3px) skewX(-3deg); filter: brightness(1.8) contrast(1.4); } 50% { transform: translateX(2px) skewX(2deg); } 100% { transform: none; filter: none; } }
@keyframes tipLine { from { opacity: 0; transform: translateY(4px); } }
@keyframes tipRoll { to { background-position: 0 36px; } }
@keyframes tipFalter { 0%, 90%, 100% { opacity: 1; transform: none; } 91% { opacity: 0.3; transform: translateX(-2px); } 93% { opacity: 1; transform: translateX(1px); } 95% { opacity: 0.55; } 96% { opacity: 1; } }

@media (max-width: 980px) {
  .cls-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .cls-picker .cls-art { aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .cls-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}
@media (max-width: 640px) {
  /* destaque da classe: carta pequena ao lado do nome, texto embaixo */
  .cls-hero { grid-template-columns: 108px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
  .cls-hero-text { display: contents; }
  .cls-hero-card { grid-row: 1 / span 2; }
  .cls-hero-card .cls-face { padding: 12px 8px 10px; gap: 6px; }
  .cls-hero-card .cls-top { display: none; }
  .cls-hero-card .cls-name { font-size: 11px; }
  .cls-kicker { grid-column: 2; align-self: end; margin-top: 6px; }
  .cls-hero-name { grid-column: 2; align-self: start; font-size: clamp(24px, 7vw, 32px); }
  .cls-intro, .cls-ranks { grid-column: 1 / -1; }
  .cls-intro { margin-top: 12px; font-size: 14px; }
}
@media (max-width: 560px) {
  /* cartas das classes deitadas: desenho à esquerda, texto à direita */
  .cls-picker { grid-template-columns: 1fr; gap: 20px; }
  .cls-picker .cls-face { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art top" "art name" "art desc" "art cta"; align-content: start; gap: 4px 12px; padding: 16px 12px 14px; }
  .cls-picker .cls-art { grid-area: art; align-self: stretch; aspect-ratio: auto; min-height: 118px; }
  .cls-picker .cls-top { grid-area: top; }
  .cls-picker .cls-name { grid-area: name; font-size: 18px; }
  .cls-picker .cls-desc { grid-area: desc; font-size: 12.5px; }
  .cls-picker .cls-cta { grid-area: cta; margin-top: 4px; }
  .cls-sub-face { padding: 13px 10px 10px; }
  .cls-sub-ico { width: 82px; height: 82px; }
  .cls-sub-pts { font-size: 17px; }
  .cls-sub-name { font-size: 15px; }
  .cls-sub-arch { font-size: 11.5px; }
  .cls-sheet-head { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; padding: 12px 8px 12px 14px; }
  .cls-sheet-ico { width: 70px; height: 70px; }
  .cls-sheet-kicker { font-size: 9.5px; letter-spacing: 0.08em; }
  .cls-sheet-body { padding: 14px 14px 12px; }
  .cls-attr { grid-template-columns: minmax(70px, 1fr) 26px auto; gap: 7px; }
  .cls-attr-name { font-size: 13px; }
  .cls-sheet-desc { font-size: 14px; }
  .cls-vines { width: 190px; height: 150px; }
}

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .topbar-right { display: none; }
  .brand-text { font-size: 19px; }
  .brand-text small { display: none; }
  .orb { width: 44px; height: 44px; font-size: 17px; }
  .sw-label { display: none; }
  .hero { min-height: 400px; padding-top: 84px; }
  .starburst { width: 74px; height: 74px; font-size: 12px; top: 58px; right: 3%; }
  .intro-sub { letter-spacing: 0.16em; font-size: 15px; }
  .edge-vines { width: 30vw; }
}
@media (orientation: portrait) {
  .scene-lights { --cell: 10.4vw; --bw: calc(var(--cell) * 0.17); }
  .wall-grid { gap: 9vh; }
}

/* com "reduzir movimento" ligado, tira só o que pisca forte ou vira a tela;
   o movimento suave do ambiente continua (a abertura só roda se a pessoa clicar) */
@media (prefers-reduced-motion: reduce) {
  .cls-illustration { transition: none; }
  /* entrada: sem raios piscando nem letreiro falhando */
  .portal-flash, .portal-bolts, .portal-spores { display: none; }
  .pt-ch, .pt-fail, .portal.thunder .portal-title, .portal-clouds, .lock-404 span, .lock-logo { animation: none !important; }
  .portal.leaving { animation: clsFade 0.15s reverse forwards; }
  .cls-sub:hover .cls-illustration, .cls-sub:focus-visible .cls-illustration { transform: none; }
  body.flipping .site, .theme-flash.to-upside, .theme-flash.to-hawkins { animation: none !important; }
  .site-flash, .site-bolt { display: none; }
  /* classes: sem cartas girando nem neon piscando; as estrelas só aparecem */
  .cls-face, .cls-sub-face { transition-duration: 0.01s; }
  .cls-card:hover .cls-face, .cls-card:focus-visible .cls-face, .cls-sub:hover .cls-sub-face, .cls-sub:focus-visible .cls-sub-face { transform: rotate(var(--tilt, 0deg)); }
  .theme-upside .cls-card:hover .cls-emb, .theme-upside .cls-card:focus-visible .cls-emb, .theme-upside .cls-hero-name { animation: none; }
  .cls-sheet-in.deal .cls-stars i.on { animation-name: clsFade; }
  .cls-tip.on .cls-tip-box, .cls-tip.swap .cls-tip-box { animation: clsFade 0.15s both; }
  .cls-tip .cls-tip-name, .cls-tip .cls-tip-body > *, .cls-tip-screen::after, .theme-upside .cls-tip-box::before { animation: none !important; }
}

/* =========================================================
   FICHA DO PERSONAGEM EM CARTA (ficha.js)
   Cara de quadrinho: traço grosso de nanquim, retícula, balões
   de fala e recordatórios (caixas de narração). Inspirada em
   cartas colecionáveis, sem logos nem artes oficiais.
   Hawkins = papel envelhecido com neon vermelho;
   Invertido = o mesmo papel no frio e no escuro (só CSS).
   ========================================================= */
.card, .card-mini, .card-pick, .card-dialog {
  --k-ink: #15111a;
  --k-paper: #f3e6c8; --k-paper-2: #e9d6ab; --k-paper-3: #d9bf88;
  --k-dot: rgba(122, 52, 24, 0.17);
  --k-red: #ff2a1c; --k-red-ink: #b8140c; --k-glow: rgba(255, 42, 28, 0.5);
  --k-text: #241c1b; --k-soft: #6b5a48;
  --k-cap: #ffe19a; --k-cap-text: #2a1f10; /* recordatório */
  --k-bal: #fffaf0; /* balão de fala */
  --k-bar: #fff7e6;
  --k-up: #0f7a3c;
  --k-photo-filter: none;
  --k-t1: #8e87a6; --k-t2: #16879b; --k-t3: #ad7400; --k-t4: #cf540e; --k-t5: #c4123c; --k-t6: #c21690;
}
.theme-upside .card, .theme-upside .card-mini, .theme-upside .card-pick, .theme-upside .card-dialog {
  --k-ink: #030406;
  --k-paper: #1b222c; --k-paper-2: #131a22; --k-paper-3: #0c1117;
  --k-dot: rgba(150, 180, 220, 0.07);
  --k-red: #e0202e; --k-red-ink: #ff5b66; --k-glow: rgba(224, 32, 46, 0.42);
  --k-text: #cfd8e3; --k-soft: #7c8a9c;
  --k-cap: #25303d; --k-cap-text: #c3d0de;
  --k-bal: #1f2733;
  --k-bar: #161d26;
  --k-up: #6fcf97;
  --k-photo-filter: grayscale(0.5) contrast(1.06) brightness(0.84);
  --k-t1: #5c6776; --k-t2: #86a0bf; --k-t3: #d6c19d; --k-t4: #ff7b3f; --k-t5: #ff3b48; --k-t6: #ff8f8f;
}
.card [data-tier="1"] { --k-tier: var(--k-t1); }
.card [data-tier="2"] { --k-tier: var(--k-t2); }
.card [data-tier="3"] { --k-tier: var(--k-t3); }
.card [data-tier="4"] { --k-tier: var(--k-t4); }
.card [data-tier="5"] { --k-tier: var(--k-t5); }
.card [data-tier="6"] { --k-tier: var(--k-t6); }

/* papel com retícula (a mesma base na carta, nas mini cartas e no seletor) */
.card-in, .card-mini-in, .card-pick {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.4), transparent 45%),
    radial-gradient(ellipse at 85% 96%, rgba(120, 70, 20, 0.2), transparent 55%),
    radial-gradient(var(--k-dot) 1px, transparent 1.35px) 0 0 / 6px 6px,
    linear-gradient(168deg, var(--k-paper), var(--k-paper-2) 68%, var(--k-paper-3));
}
.theme-upside .card-in, .theme-upside .card-mini-in, .theme-upside .card-pick {
  background:
    radial-gradient(ellipse at 50% 112%, rgba(170, 14, 26, 0.26), transparent 60%),
    radial-gradient(var(--k-dot) 1px, transparent 1.35px) 0 0 / 6px 6px,
    linear-gradient(168deg, var(--k-paper), var(--k-paper-2) 68%, var(--k-paper-3));
}

/* ---------- a carta ---------- */
.card { container-type: inline-size; position: relative; width: 100%; max-width: 360px; margin: 0 auto; color: var(--k-text); font-family: var(--font-ui); text-align: left; }
.card-in { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 9px 9px 7px; border: 4px solid var(--k-ink); border-radius: 14px; box-shadow: 0 0 0 2px var(--k-red), 6px 7px 0 2px var(--k-ink), 0 0 28px var(--k-glow); }
.theme-upside .card-in { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-red) 75%, #000), 6px 7px 0 2px #000, 0 0 30px var(--k-glow); }
.card-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* barra do nome + emblema da classe */
.card-namebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 4px 5px 4px 10px; border: 3px solid var(--k-ink); border-radius: 7px; background: var(--k-bar); box-shadow: 3px 3px 0 var(--k-ink); }
.card-name { margin: 0; font: 700 clamp(15px, 6cqi, 21px)/1.08 var(--font-logo); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; color: var(--k-ink); }
.theme-upside .card-name { color: #eef3f8; text-shadow: 0 0 6px rgba(224, 32, 46, 0.6), 0 0 16px rgba(224, 32, 46, 0.3); }
.card-emb { display: grid; place-items: center; width: 40px; height: 40px; padding: 5px; border: 3px solid var(--k-ink); border-radius: 50%; background: var(--c, var(--k-red)); color: var(--k-ink); --acc: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.card-emb .cls-ico { stroke-width: 6; }
.card-emb .cls-ico .th { stroke-width: 8; }
.card-emb-none { font: 700 18px var(--font-logo); color: #fff; }
.theme-upside .card-emb { color: #05070a; --acc: #fff0ee; box-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--k-red)) 60%, transparent); }

/* faixa do tipo: [ Classe / Subclasse ] */
.card-type { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin: 0; padding: 3px 8px; border: 2px solid var(--k-ink); background: var(--k-cap); color: var(--k-cap-text); font: 700 11px/1.35 var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--k-ink); }
.card-rank { color: var(--k-red-ink); white-space: nowrap; }

/* moldura da foto (1:1, 1024×1024) */
.card-photo { position: relative; align-self: center; width: 84%; aspect-ratio: 1 / 1; overflow: hidden; border: 4px solid var(--k-ink); background: radial-gradient(var(--k-dot) 1.2px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(160deg, color-mix(in srgb, var(--c, var(--k-red)) 24%, var(--k-paper)), var(--k-paper-2)); box-shadow: 4px 4px 0 var(--k-ink); }
.card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--k-photo-filter); }
.card-photo[data-tip] { cursor: help; }
.card-photo[data-tip]:focus-visible { outline: 3px solid var(--k-red); outline-offset: 3px; }
.card-photo-art { position: absolute; inset: 7%; filter: var(--k-photo-filter); }
.card-photo-initials { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(34px, 16cqi, 58px) var(--font-logo); color: color-mix(in srgb, var(--k-ink) 45%, transparent); }
.card-cap { border: 2px solid var(--k-ink); background: var(--k-cap); color: var(--k-cap-text); box-shadow: 2px 2px 0 var(--k-ink); }
.card-photo-none, .card-preview { position: absolute; padding: 1px 7px; font: 700 10px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.card-photo-none { left: 7px; bottom: 7px; }
/* prévia: logo acima dos botões, longe do carimbo */
.card-preview { left: 50%; bottom: 48px; transform: translateX(-50%) rotate(-2deg); }
.card-editing .card-photo-none { display: none; }
/* carimbo da situação */
.card-stamp { position: absolute; top: 12px; right: -3px; padding: 1px 9px; border: 3px double currentColor; border-radius: 3px; background: rgba(255, 250, 240, 0.8); font: 700 12px/1.25 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(9deg); pointer-events: none; }
.card-stamp[data-status="rascunho"] { color: #55525f; }
.card-stamp[data-status="enviada"] { color: #1f5fa8; }
.card-stamp[data-status="validada"] { color: #c4140c; }
.theme-upside .card-stamp { background: rgba(6, 8, 12, 0.78); }
.theme-upside .card-stamp[data-status="rascunho"] { color: #8a96a6; }
.theme-upside .card-stamp[data-status="enviada"] { color: #86a0bf; }
.theme-upside .card-stamp[data-status="validada"] { color: #ff4a54; text-shadow: 0 0 6px rgba(255, 40, 50, 0.6); }
/* botões dentro da carta (foto) */
.card-photo-tools { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.card-btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; margin: 0; padding: 0 12px; border: 3px solid var(--k-ink); border-radius: 999px; background: var(--k-bal); color: var(--k-ink); font: 700 12px var(--font-ui); cursor: pointer; box-shadow: 2px 2px 0 var(--k-ink); }
.theme-upside .card-btn { color: var(--k-text); }
.card-btn:hover { background: var(--k-cap); }
.card-btn:focus-visible, .card-file:focus-within { outline: 3px solid var(--k-red); outline-offset: 2px; }
.card-file input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }

/* enquadramento da foto nova (só quando ela não era quadrada) */
.card-crop { display: flex; align-items: center; gap: 8px; align-self: center; width: 84%; margin: -2px 0 0; padding: 3px 8px; border: 2px solid var(--k-ink); border-radius: 999px; background: var(--k-cap); color: var(--k-cap-text); font: 700 10px var(--font-small); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--k-ink); }
.card-crop span { flex: 0 0 auto; white-space: nowrap; }
.card .card-crop input { flex: 1; min-width: 0; width: auto; height: 22px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--k-red); cursor: pointer; }
.card-crop:focus-within { outline: 3px solid var(--k-red); outline-offset: 2px; }

/* idade (travada para o dono) */
.card-age { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 3px 6px; border-block: 2px solid var(--k-ink); font: 12px var(--font-small); }
.card-age > span:first-child { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-red-ink); }
.card-age b { font: 700 14px var(--font-logo); color: var(--k-ink); }
.theme-upside .card-age b { color: var(--k-text); }
.card-lock { font-size: 11px; color: var(--k-soft); }
.card-age-edit { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; font: 700 13px var(--font-small); color: var(--k-text); }
.card .card-age-edit input { display: inline-block; width: 72px; margin: 0; padding: 3px 6px; border: 2px solid var(--k-ink); border-radius: 4px; background: var(--k-bal); box-shadow: none; color: var(--k-ink); font: 700 14px var(--font-small); }
.theme-upside .card .card-age-edit input { color: var(--k-text); }

/* caixa de texto: abas, recordatório (biografia) e balões (sobrenatural) */
.card-text { border: 3px solid var(--k-ink); border-radius: 4px; background: radial-gradient(var(--k-dot) 1px, transparent 1.35px) 0 0 / 5px 5px, var(--k-paper); box-shadow: 3px 3px 0 var(--k-ink); overflow: hidden; }
.card-tabs { display: flex; border-bottom: 3px solid var(--k-ink); }
.card-tab { all: unset; box-sizing: border-box; flex: 1; min-height: 32px; padding: 4px 6px; background: var(--k-paper-2); color: var(--k-soft); font: 700 11px var(--font-small); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; cursor: pointer; }
.card-tab + .card-tab { border-left: 2px solid var(--k-ink); }
.card-tab:hover { color: var(--k-ink); }
.theme-upside .card-tab:hover { color: var(--k-text); }
.card-tab[aria-selected="true"] { background: var(--k-red); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.card-tab:focus-visible { outline: 3px solid var(--k-ink); outline-offset: -5px; }
.card-panel { padding: 9px 10px 12px; }
.card-panel p { margin: 0; }
.card .card-kicker { margin: 0 0 6px; font: 700 10px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-red-ink); }
.card-kicker b { color: var(--k-ink); }
.theme-upside .card-kicker b { color: var(--k-text); }
.card-bio { max-height: 12em; overflow: auto; padding: 7px 9px; font: 13px/1.5 var(--font-type); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-bal { position: relative; margin: 0 0 14px; padding: 8px 12px; border: 3px solid var(--k-ink); border-radius: 20px / 16px; background: var(--k-bal); font: italic 13px/1.45 var(--font-type); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-bal > p { max-height: 9em; overflow: auto; }
.card-bal::before, .card-bal::after { content: ""; position: absolute; top: 100%; border-style: solid; }
.card-bal::before { left: 22px; border-width: 13px 12px 0 0; border-color: var(--k-ink) transparent transparent; }
.card-bal::after { left: 25px; margin-top: -1px; border-width: 8px 7px 0 0; border-color: var(--k-bal) transparent transparent; }
.card-bal-r::before { left: auto; right: 22px; border-width: 13px 0 0 12px; }
.card-bal-r::after { left: auto; right: 25px; border-width: 8px 0 0 7px; }
.card-empty { color: var(--k-soft); font-style: italic; }
.card textarea { display: block; width: 100%; min-height: 5.5em; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; resize: vertical; }
.card textarea:focus { outline: 2px dashed var(--k-red); outline-offset: 3px; box-shadow: none; }
.card textarea::placeholder { color: var(--k-soft); opacity: 0.8; }
.card-count { display: block; margin-top: 3px; font: 10px var(--font-small); color: var(--k-soft); text-align: right; font-style: normal; }

/* atributos: valor (base N, ±diferença) e o bônus dos itens ativos */
.card-attrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.card-attrs-empty { display: block; padding: 10px; border: 2px dashed var(--k-ink); font: 12px/1.4 var(--font-small); color: var(--k-soft); text-align: center; }
.card-attr { display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 0; padding: 4px 2px 5px; border: 2px solid var(--k-ink); border-radius: 6px; background: var(--k-bal); text-align: center; cursor: help; transition: background-color 0.15s; }
.card-attr:hover, .card-attr[aria-describedby] { background: color-mix(in srgb, var(--k-tier) 16%, var(--k-bal)); }
.card-attr:focus-visible { outline: 3px solid var(--k-red); outline-offset: 1px; }
.card-attr-abbr { font: 700 10px var(--font-small); letter-spacing: 0.12em; text-decoration: none; color: var(--k-soft); }
.card-attr-val { font: 700 22px/1 var(--font-logo); color: var(--k-tier); }
.card-attr-base { font: 9.5px/1.25 var(--font-small); color: var(--k-soft); white-space: nowrap; }
.card-attr[data-diff="up"] .card-attr-base { color: var(--k-up); font-weight: 700; }
.card-attr[data-diff="down"] .card-attr-base { color: var(--k-red-ink); font-weight: 700; }
.card-attr-bonus { margin-top: 2px; padding: 0 5px; border-radius: 3px; font: 700 9.5px/1.5 var(--font-small); white-space: nowrap; color: #fff; }
.card-attr-bonus.up { background: #0f7a3c; }
.card-attr-bonus.down { background: #b8140c; }
/* editando: duas colunas, com − e + */
.card-editing .card-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-editing .card-attr { grid-template-columns: minmax(0, 1fr) 30px 30px 30px; align-items: center; column-gap: 3px; padding: 5px 5px 5px 7px; cursor: default; }
.card-editing .card-attr-abbr { justify-self: start; font-size: 11px; cursor: help; }
.card-editing .card-attr-base, .card-editing .card-attr-bonus { grid-column: 1 / -1; }
.card-step { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--k-ink); border-radius: 50%; background: var(--k-cap); color: var(--k-ink); font: 700 17px/1 var(--font-ui); cursor: pointer; box-shadow: 1px 2px 0 var(--k-ink); }
.theme-upside .card-step { color: var(--k-text); }
.card-step:hover:not(:disabled) { background: var(--k-red); color: #fff; }
.card-step:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.card-step:disabled { opacity: 0.35; cursor: not-allowed; }
.card-step:focus-visible { outline: 3px solid var(--k-red); outline-offset: 1px; }
/* carta estreita (celular): o "(base N, ±X)" quebra em duas linhas e a faixa do tipo fica menor */
@container (max-width: 330px) {
  .card-attr-base { white-space: normal; }
  .card-type { font-size: 10px; letter-spacing: 0.03em; }
  /* editando: a sigla em cima, − valor + embaixo */
  .card-editing .card-attr { grid-template-columns: 30px minmax(0, 1fr) 30px; grid-template-areas: "abbr abbr abbr" "minus val plus" "base base base" "bonus bonus bonus"; row-gap: 2px; padding: 4px 5px 5px; }
  .card-editing .card-attr-abbr { grid-area: abbr; justify-self: center; }
  .card-editing .card-step[data-inc="-1"] { grid-area: minus; }
  .card-editing .card-step[data-inc="1"] { grid-area: plus; }
  .card-editing .card-attr-val { grid-area: val; }
  .card-editing .card-attr-base { grid-area: base; }
  .card-editing .card-attr-bonus { grid-area: bonus; justify-self: center; }
}
@container (max-width: 270px) {
  .card-editing .card-attrs { grid-template-columns: 1fr; }
}

.card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px; font: 10px var(--font-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-soft); }
.card-foot b { font: 700 13px var(--font-logo); letter-spacing: 0.04em; color: var(--k-red-ink); }

/* ---------- na conta: carta + painel ao lado ---------- */
.card-home { margin: 18px 0 22px; }
.card-desk { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 26px; align-items: start; }
.card-stage { min-width: 0; padding: 4px 10px 12px 2px; }
.card-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.card-side-kicker { margin: 0; font: 700 11px var(--font-small); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 16px var(--font-ui); }
.card-status i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #8f8aa0; }
.card-status[data-status="enviada"] i { background: #3d8bff; box-shadow: 0 0 8px rgba(61, 139, 255, 0.6); }
.card-status[data-status="validada"] i { background: #ff2a1c; box-shadow: 0 0 8px #ff2a1c; }
.card-status span { font-size: 13px; opacity: 0.7; }
.card-side-hint { margin: 0; font-size: 14px; line-height: 1.5; }
.card-side-note { margin: 0; font-size: 12px; line-height: 1.45; opacity: 0.65; }
.card-side-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.card-side-data > div { min-width: 0; padding: 9px 11px; border: 1px solid #293249; background: rgba(11, 18, 35, 0.6); }
.card-side-data dt { margin-bottom: 3px; font: 11px var(--font-small); letter-spacing: 0.1em; text-transform: uppercase; color: #8d9dbb; }
.card-side-data dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-msg { margin: 0; min-height: 0; color: inherit; opacity: 0.85; }
.card-msg.card-msg-err { color: #ff7a82; opacity: 1; }
.card-msg:empty { display: none; }
.card-diff { color: #ff7a82; font-weight: 700; }
.card-reset { justify-self: start; }
@media (max-width: 720px) {
  .card-desk { grid-template-columns: 1fr; gap: 18px; }
  .card-stage { padding-right: 8px; }
}

/* ---------- seletor de classe e subclasse (editor) ---------- */
.card-pick { margin: 0 0 18px; padding: 10px 12px 14px; border: 3px solid var(--k-ink); border-radius: 10px; color: var(--k-text); box-shadow: 4px 4px 0 var(--k-ink); }
.card-pick-sum { padding: 4px 0; font: 14px var(--font-ui); cursor: pointer; }
.card-pick-sum span { margin-left: 6px; font-size: 12px; text-decoration: underline; color: var(--k-red-ink); }
.card-pick[open] .card-pick-sum span { display: none; }
.card-pick-step { margin: 12px 0 8px; font: 700 11px var(--font-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-red-ink); }
.card-pick-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.card-pick-cls { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 8px 4px 7px; border: 3px solid var(--k-ink); border-radius: 8px; background: var(--k-bal); color: var(--k-ink); font: 700 11.5px var(--font-small); letter-spacing: 0.05em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; cursor: pointer; box-shadow: 2px 2px 0 var(--k-ink); transition: transform 0.15s; }
.theme-upside .card-pick-cls { color: var(--k-text); }
.card-pick-cls:hover { transform: translateY(-2px); }
.card-pick-cls[aria-checked="true"] { background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--k-red), 3px 3px 0 2px var(--k-ink); }
.card-pick-emb { width: 42px; height: 42px; color: var(--k-ink); --acc: var(--c-ink, var(--k-red)); }
.theme-upside .card-pick-emb { color: var(--k-text); }
.card-pick-cls[aria-checked="true"] .card-pick-emb { color: var(--k-ink); --acc: #fff; }
.card-pick-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card-pick-sub { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; padding: 5px 8px 5px 5px; border: 2px solid var(--k-ink); border-radius: 8px; background: var(--k-bal); color: var(--k-text); cursor: pointer; box-shadow: 2px 2px 0 var(--k-ink); }
.card-pick-sub:hover { background: color-mix(in srgb, var(--k-cap) 55%, var(--k-bal)); }
.card-pick-sub[aria-checked="true"] { background: var(--k-cap); box-shadow: 0 0 0 2px var(--k-red), 2px 2px 0 2px var(--k-ink); }
.card-pick-art { grid-row: 1 / span 2; width: 46px; height: 46px; overflow: hidden; border-radius: 6px; background: var(--k-paper-2); }
.card-pick-art .cls-illustration { filter: var(--k-photo-filter); }
.card-pick-name { align-self: end; font: 700 13px/1.15 var(--font-logo); overflow-wrap: anywhere; }
.card-pick-sub small { align-self: start; font: 10.5px var(--font-small); color: var(--k-soft); }
.card-pick-cls:focus-visible, .card-pick-sub:focus-visible, .card-pick-sum:focus-visible { outline: 3px solid var(--k-red); outline-offset: 2px; }
.card-pick-hint { margin: 10px 0 0; font: 13px var(--font-type); color: var(--k-soft); }
@media (max-width: 520px) {
  .card-pick-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-pick-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* celular: ilustração em cima e nome embaixo, sem quebrar palavra no meio */
  .card-pick-sub { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; row-gap: 3px; padding: 7px 5px 6px; text-align: center; }
  .card-pick-art { grid-row: auto; width: 44px; height: 44px; }
  .card-pick-name { align-self: auto; font-size: 12.5px; overflow-wrap: break-word; }
  .card-pick-sub small { align-self: auto; }
}

/* ---------- moradores: mini cartas ---------- */
.card-residents { display: block; }
.card-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 18px 14px; margin: 0; padding: 4px 8px 10px 0; list-style: none; }
.card-mini-slot { display: flex; min-width: 0; }
.card-mini { all: unset; box-sizing: border-box; display: flex; flex: 1; min-width: 0; color: var(--k-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card-mini-in { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px 6px 5px; border: 3px solid var(--k-ink); border-radius: 10px; box-shadow: 0 0 0 1.5px var(--k-red), 4px 5px 0 1.5px var(--k-ink); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1.25), box-shadow 0.22s; }
.card-mini:hover .card-mini-in, .card-mini:focus-visible .card-mini-in { transform: translateY(-5px) rotate(-1.2deg); box-shadow: 0 0 0 1.5px var(--k-red), 6px 8px 0 1.5px var(--k-ink), 0 0 22px var(--k-glow); }
.card-mini-slot:nth-child(even) .card-mini:hover .card-mini-in, .card-mini-slot:nth-child(even) .card-mini:focus-visible .card-mini-in { transform: translateY(-5px) rotate(1.2deg); }
.card-mini:focus-visible .card-mini-in { outline: 3px solid var(--k-red); outline-offset: 3px; }
.card-mini-name { display: block; min-height: 30px; padding: 4px 30px 4px 7px; border: 2px solid var(--k-ink); border-radius: 5px; background: var(--k-bar); color: var(--k-ink); font: 700 12.5px/1.15 var(--font-logo); text-transform: uppercase; overflow-wrap: anywhere; }
.theme-upside .card-mini-name { color: #eef3f8; }
.card-mini-emb { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 3px; border: 2px solid var(--k-ink); border-radius: 50%; background: var(--c, var(--k-red)); color: var(--k-ink); --acc: #fff; }
.card-mini-emb .cls-ico { stroke-width: 7; }
.card-mini-emb .cls-ico .th { stroke-width: 9; }
.card-mini-photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 3px solid var(--k-ink); background: radial-gradient(var(--k-dot) 1.2px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(160deg, color-mix(in srgb, var(--c, var(--k-red)) 24%, var(--k-paper)), var(--k-paper-2)); }
.card-mini-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--k-photo-filter); }
.card-mini-photo .card-photo-art { inset: 6%; }
.card-mini-photo .card-photo-initials { font-size: 34px; }
.card-mini-ok { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--k-ink); border-radius: 50%; background: var(--k-red); color: #fff; font: 700 12px var(--font-ui); box-shadow: 0 0 8px var(--k-glow); }
.card-mini-type { padding: 2px 6px; border: 2px solid var(--k-ink); background: var(--k-cap); color: var(--k-cap-text); font: 700 9.5px/1.3 var(--font-small); letter-spacing: 0.05em; text-transform: uppercase; overflow-wrap: anywhere; }
.card-mini-foot { display: flex; justify-content: space-between; gap: 6px; padding: 0 2px; font: 10px var(--font-small); color: var(--k-soft); }
.card-mini-foot span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  /* celular: sempre duas mini cartas por linha */
  .card-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding-right: 6px; }
  .card-mini-name { font-size: 11.5px; padding-right: 28px; }
}

/* ---------- janela da carta (vira na mão) ---------- */
.card-dialog { width: min(400px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: auto; overscroll-behavior: contain; }
.card-dialog.editing { width: min(920px, calc(100vw - 16px)); }
.card-dialog::backdrop { background: rgba(6, 3, 12, 0.8); backdrop-filter: blur(2px); animation: clsFade 0.3s both; }
.theme-upside .card-dialog::backdrop { background: rgba(0, 0, 0, 0.86); }
.card-view-in { position: relative; padding: 48px 8px 16px; }
.card-x { all: unset; box-sizing: border-box; position: absolute; top: 4px; right: 6px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--k-ink); border-radius: 50%; background: var(--k-bal); color: var(--k-ink); font: 700 16px var(--font-ui); cursor: pointer; box-shadow: 2px 2px 0 var(--k-ink); }
.theme-upside .card-x { color: var(--k-text); }
.card-x:focus-visible { outline: 3px solid var(--k-red); outline-offset: 2px; }
.card-flip { perspective: 1400px; }
.card-flip-in { position: relative; transform-style: preserve-3d; }
.card-front { padding: 0 8px 10px 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back { position: absolute; inset: 0 8px 10px 0; max-width: 360px; margin: 0 auto; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; border: 4px solid var(--k-ink); border-radius: 14px; background: radial-gradient(circle, rgba(255, 70, 50, 0.5) 1.1px, transparent 1.5px) 0 0 / 7px 7px, radial-gradient(ellipse at 50% 42%, #5a0d09, #1a0504 72%); box-shadow: 0 0 0 2px var(--k-red), 6px 7px 0 2px var(--k-ink), 0 0 30px var(--k-glow); color: #ffd9cf; text-align: center; }
.card-back-in::before { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(255, 70, 50, 0.6); border-radius: 8px; box-shadow: 0 0 12px rgba(255, 40, 30, 0.45), inset 0 0 12px rgba(255, 40, 30, 0.35); }
.card-back-kicker, .card-back-num { font: 19px var(--font-crt); letter-spacing: 0.2em; text-transform: uppercase; color: #ff8f7a; }
.card-back-title { font: 700 30px/1.05 var(--font-logo); text-transform: uppercase; color: #120303; -webkit-text-stroke: 0.04em #ff3a26; paint-order: stroke fill; filter: var(--neon); }
.theme-upside .card-back-in { background: radial-gradient(circle, rgba(150, 180, 220, 0.12) 1.1px, transparent 1.5px) 0 0 / 7px 7px, radial-gradient(ellipse at 50% 42%, #1c2430, #07090c 72%); color: #c9d2dd; }
.theme-upside .card-back-kicker, .theme-upside .card-back-num { color: #86a0bf; }
.card-view-bar { display: grid; gap: 10px; justify-items: center; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-align: center; }
.card-view-bar .card-status { justify-content: center; font-size: 14px; }
.card-view-bar .card-actions { justify-content: center; }
.card-dialog .card-editor { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.card-dialog .card-side-data > div { border-color: var(--line); background: rgba(0, 0, 0, 0.2); }

/* situação da ficha no painel do admin */
.st-ficha-vazia { background: #3a3550; color: #c9c4dd; }
.st-ficha-rascunho { background: #d7d2c4; color: #2b2833; }
.st-ficha-enviada { background: #3d8bff; color: #031634; }
.st-ficha-validada { background: #ff2a1c; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .card-mini-in, .card-pick-cls, .card-attr { transition: none; }
  .card-mini:hover .card-mini-in, .card-mini:focus-visible .card-mini-in,
  .card-mini-slot:nth-child(even) .card-mini:hover .card-mini-in, .card-mini-slot:nth-child(even) .card-mini:focus-visible .card-mini-in,
  .card-pick-cls:hover { transform: none; }
}