/* Zovy — estilo do site público
   Paleta: lavanda + uva + violeta elétrico, com lima, chiclete e ciano como acentos.
   Tipos: Bricolage Grotesque (títulos, marca) e Figtree (interface). */
:root {
  --bg: #F3EEFF; --ink: #1E1338; --violet: #7C4DFF; --lime: #C6F432; --pink: #FF4FA3; --cyan: #2EE6FF;
  --card: #fff; --soft: #E8E0FF; --muted: #62577F; --gold: #FFB800;
  --tile: 94px; --gap: 14px; --r: 18px;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sticker: 0 0 0 3px var(--ink), 6px 6px 0 3px var(--ink);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}
/* ---------- Barras de rolagem: as mesmas em todo o site (roxas, finas, sem setinhas) ---------- */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--violet); border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; min-height: 44px; min-width: 44px; }
::-webkit-scrollbar-thumb:hover { background: #6A3DF0; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--ink); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; } }   /* Firefox */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; font: 500 16px/1.5 var(--ui); color: var(--ink);
  background: var(--bg) radial-gradient(color-mix(in srgb, var(--violet) 22%, transparent) 1.1px, transparent 1.2px) 0 0 / 22px 22px;
  padding: 0 clamp(10px, 2vw, 24px) 32px;
}
img { max-width: 100%; display: block; }
/* app instalado no iPhone (status bar "black-translucent"): faixa sólida atrás da hora/bateria; no resto a altura é 0 */
/* a faixa também cobre a folga entre ela e o cabeçalho fixo (--dock-gap, só quando há área segura): sem isso os cartões da página apareciam espiando por cima do cabeçalho */
:root { --dock-gap: 10; }
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) * 1.3 + min(env(safe-area-inset-top, 0px), 1px) * var(--dock-gap)); background: var(--bg); z-index: 45; pointer-events: none; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 10px; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.center { text-align: center; }
.fine { font-size: 13px; color: var(--muted); }

/* ---------- Mascote / marca ---------- */
.blob { --s: 40px; width: calc(var(--s) * 1.14); height: var(--s); display: inline-block; flex: none; background: url(../img/mascot.png) center / contain no-repeat; transform-origin: 50% 90%; transition: transform .35s var(--ease-pop); }
.blob i { display: none; }
.blob.sm { --s: 30px; } .blob.lg { --s: 76px; } .blob.xl { --s: 120px; }
a:hover .blob { transform: rotate(-8deg) scale(1.06); }
.blob.dizzy { animation: wobble 2.4s ease-in-out infinite; }

/* ---------- Boas-vindas de quem veio do SuperJogosClick ---------- */
.rebrand-notice{display:grid;grid-template-rows:1fr;opacity:1;max-width:1600px;margin:calc(10px + env(safe-area-inset-top,0px)*1.3) auto 0;border-radius:18px;background:linear-gradient(110deg,var(--ink),color-mix(in srgb,var(--violet) 55%,var(--ink)));color:#fff;transition:grid-template-rows .28s ease,opacity .2s ease,margin .28s ease}
.rebrand-notice-clip{min-height:0;overflow:hidden;border-radius:inherit}
.rebrand-notice-inner{display:flex;align-items:center;gap:13px;padding:13px 16px;border-left:4px solid var(--lime)}
.rebrand-notice-old-brand{display:block;flex:none;width:180px;padding:6px 8px;background:#fff;border:1px solid #e8e0ff;border-radius:12px}
.rebrand-notice-old-brand img{display:block;width:100%;height:auto}
.rebrand-notice-copy{flex:1;min-width:0}
.rebrand-notice-copy p{margin:0;font:600 18px/1.3 var(--display);letter-spacing:-.02em}
.rebrand-notice-copy strong{font-weight:800}
.rebrand-notice-name{color:var(--lime)}
.rebrand-notice-copy>span{display:block;font-size:12px;margin-top:3px;color:#eee7ff}
.rebrand-notice-tag{font-size:10px;font-weight:800;letter-spacing:.1em;padding:6px 10px;border:1px solid #ffffff42;border-radius:99px;white-space:nowrap}
.rebrand-notice button{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #ffffff42;border-radius:12px;background:#ffffff10;color:#fff;cursor:pointer}
.rebrand-notice button:hover{background:#ffffff25}
.rebrand-notice button:focus-visible{outline-color:var(--lime)}
.rebrand-notice.is-leaving{grid-template-rows:0fr;opacity:0;margin-top:0;pointer-events:none}
@media(max-width:600px){.rebrand-notice{border-radius:15px}.rebrand-notice-inner{gap:9px;padding:11px 9px}.rebrand-notice-old-brand{width:clamp(96px,31vw,124px);padding:4px 6px;border-radius:10px}.rebrand-notice-copy p{font-size:15px}.rebrand-notice-copy>span{font-size:11px;line-height:1.4}.rebrand-notice-tag{display:none}.rebrand-notice button{width:32px;height:32px;border-radius:10px}}
@media(prefers-reduced-motion:reduce){.rebrand-notice{transition:none}}

/* ---------- Dock (topo) ---------- */
.dock {
  position: sticky; top: calc(10px + env(safe-area-inset-top, 0px) * 1.3); z-index: 40; margin: calc(10px + env(safe-area-inset-top, 0px) * 1.3) auto 12px; max-width: 1600px;
  display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 12px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand .word { font: 800 30px/1 var(--display); letter-spacing: -.055em; margin-top: -3px; }
.brand-logo { display: block; height: 40px; width: auto; transform-origin: 20% 60%; transition: transform .35s var(--ease-pop); }
.brand:hover .brand-logo { transform: rotate(-3deg) scale(1.04); }
.search { position: relative; flex: 1; max-width: 560px; display: flex; align-items: center; }
.search > svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; font: 600 16px var(--ui); padding: 11px 14px 11px 40px; border: 2px solid var(--soft); border-radius: 14px; background: #faf8ff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent); background: #fff; }
.live { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); padding: 6px; max-height: 70vh; overflow: auto; }
.live a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; }
.live a:hover, .live a.on { background: var(--bg); }
.live img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.live .lc { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #fff); color: var(--c); }
.live .all-r { justify-content: center; color: var(--violet); }
.live p { margin: 10px; color: var(--muted); font-size: 14px; }
.dock-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.dock-nav > a { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 13px; text-decoration: none; font-weight: 700; font-size: 14px; transition: background .15s, transform .15s; }
.dock-nav > a:hover { background: var(--bg); }
.dock-nav > a.on { background: var(--ink); color: #fff; }
.dock-nav > a.login { background: var(--lime); border: 2px solid var(--ink); padding: 7px 12px; }
.ava { --c: var(--violet); width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c); color: #fff; font: 800 15px var(--display); flex: none; border: 2px solid var(--ink); }
.ava.xl { width: 96px; height: 96px; font-size: 44px; border-width: 3px; }
.account-tools { position:relative; display:flex; align-items:stretch; height:46px; background:#fff; border:2px solid var(--ink); border-radius:15px; box-shadow:0 3px 0 var(--ink); }
.me-wrap { position: relative; }
.account-tools .me-wrap { display:flex; }
.dock-nav button.me { display: flex; align-items: center; gap: 6px; height:42px; padding:4px 8px 4px 4px; border:0; border-radius:0 12px 12px 0; background:none; cursor:pointer; font:700 14px var(--ui); color:var(--ink); transition:background .15s, transform .12s var(--ease-pop); }
.dock-nav button.me:hover, .dock-nav button.me[aria-expanded="true"] { background: var(--bg); }
.dock-nav button.me:active { background:color-mix(in srgb, var(--violet) 13%, #fff); transform:scale(.94); }
.me-caret { transition: transform .2s; } .me[aria-expanded="true"] .me-caret { transform: rotate(180deg); }
.me-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); padding: 8px; display: grid; gap: 2px; }
.me-pop[hidden] { display: none; }
.me-head { display: grid; padding: 8px 12px 10px; border-bottom: 2px solid var(--soft); margin-bottom: 4px; }
.me-head b { font: 800 16px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .me-head small { color: var(--muted); font-weight: 700; }
.dock-nav .me-pop a, .me-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: none; font: 700 15px var(--ui); color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.dock-nav .me-pop a:hover, .me-pop button:hover { background: var(--bg); }
.me-pop form { margin: 2px 0 0; padding-top: 4px; border-top: 2px solid var(--soft); } .me-pop form button { color: #C0264B; }
.dock-nav .me-pop a span { display: inline; }
.lvl { font-size: 13px; background: var(--lime); padding: 2px 8px; border-radius: 99px; }
.streak { display: inline-flex; align-items: center; gap: 2px; color: #F25F1A; font-size: 13px; }

/* ---------- Central de notificações ---------- */
.notif-wrap { position:static; flex:none; }
.notif-btn { position:relative; width:50px; height:42px; display:grid; place-items:center; border:0; border-right:2px solid var(--soft); border-radius:12px 0 0 12px; background:none; color:var(--ink); cursor:pointer; transition:background .15s, transform .18s var(--ease-pop); -webkit-tap-highlight-color:transparent; }
.notif-bell { display:grid; transform-origin:50% 14%; }
.notif-btn svg { transform-origin:50% 14%; transition:transform .28s var(--ease-pop); }
.notif-btn:hover, .notif-btn[aria-expanded="true"] { background:var(--lime); }
.notif-btn:hover svg { transform:rotate(-14deg) scale(1.1); }
.notif-btn:active { background:color-mix(in srgb, var(--lime) 72%, #fff); transform:scale(.9); transition-duration:.06s; }
.notif-btn:active svg { transform:rotate(10deg) scale(.86); }
.notif-count { position:absolute; top:-9px; right:-1px; min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px; border-radius:99px; background:var(--pink); color:#fff; border:2px solid var(--ink); font:800 11px/1 var(--ui); box-shadow:0 2px 0 var(--ink); }
.notif-count[hidden] { display:none; }
.notif-chip { display:inline-block; padding:3px 10px; border-radius:99px; background:var(--lime); color:var(--ink); border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink); font:800 12px/1.3 var(--ui); white-space:nowrap; }
.notif-chip.is-clear { background:#fff; }
.notif-pop { position:absolute; z-index:80; right:0; top:calc(100% + 12px); width:min(400px, calc(100vw - 24px)); max-height:min(680px, calc(100vh - 100px)); display:grid; grid-template-rows:auto minmax(90px, 1fr) auto; overflow:hidden; margin:0; background:#fff; border:3px solid var(--ink); border-radius:26px; box-shadow:0 7px 0 var(--ink), 0 22px 50px rgb(30 19 56 / .25); transform-origin:calc(100% - 26px) -10px; }
.notif-pop[hidden] { display:none; }
.notif-head { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 14px 14px 18px; color:#fff; border-bottom:3px solid var(--ink); background:radial-gradient(circle at 86% 24%, rgb(255 255 255 / .55) 0 2px, transparent 3px), radial-gradient(circle at 56% 82%, rgb(198 244 50 / .85) 0 2.5px, transparent 3.5px), radial-gradient(circle at 34% 16%, rgb(46 230 255 / .8) 0 2px, transparent 3px), linear-gradient(115deg, var(--violet) 0%, #A24DFF 48%, var(--pink) 100%); }
.notif-title { display:grid; gap:3px; min-width:0; }
.notif-title > span { color:var(--lime); font:800 11px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; }
.notif-title h2 { margin:0; font:800 25px/1.05 var(--display); letter-spacing:-.01em; color:#fff; text-shadow:0 2px 0 rgb(30 19 56 / .35); }
.notif-head-r { display:grid; justify-items:end; gap:7px; flex:none; }
.notif-read-all { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:2px solid var(--ink); border-radius:99px; background:var(--lime); color:var(--ink); box-shadow:0 3px 0 var(--ink); font:800 12px/1.2 var(--ui); cursor:pointer; transition:transform .14s var(--ease-pop), box-shadow .14s; -webkit-tap-highlight-color:transparent; }
.notif-read-all[hidden] { display:none; }
.notif-read-all:hover { transform:translateY(-2px); box-shadow:0 5px 0 var(--ink); }
.notif-read-all:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); transition-duration:.05s; }
.notif-read-all:disabled { opacity:.7; pointer-events:none; }
.notif-list { overflow-y:auto; overscroll-behavior:contain; display:grid; gap:9px; align-content:start; padding:11px 11px 13px; background:color-mix(in srgb, var(--violet) 6%, #fff); }
.notif-day { justify-self:start; margin:5px 0 -1px 3px; padding:2px 11px; border:2px solid var(--ink); border-radius:99px; background:var(--soft); color:var(--ink); font:800 11px/1.5 var(--ui); letter-spacing:.07em; text-transform:uppercase; }
.notif-day:first-child { margin-top:0; }
.notif-day[data-g="hoje"] { background:var(--lime); }
.notif-day[data-g="ontem"] { background:var(--cyan); }
.notif-item { --c:var(--violet); position:relative; display:grid; grid-template-columns:50px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px 10px 10px; color:var(--ink); text-decoration:none; background:linear-gradient(100deg, color-mix(in srgb, var(--c) 20%, #fff), #fff 72%); border:2px solid var(--ink); border-radius:18px; box-shadow:0 3px 0 var(--ink); transition:transform .18s var(--ease-pop), box-shadow .18s, background .3s, opacity .3s, border-color .3s; -webkit-tap-highlight-color:transparent; }
.notif-item:hover { transform:translateY(-3px) rotate(-.4deg); box-shadow:0 6px 0 var(--ink); }
.notif-item:focus-visible { outline:3px solid var(--violet); outline-offset:2px; }
.notif-item:active { transform:translateY(2px) scale(.985); box-shadow:0 1px 0 var(--ink); transition-duration:.06s; }
.notif-item.is-read, .notif-item.is-clearing { background:#fff; border-color:color-mix(in srgb, var(--ink) 24%, #fff); box-shadow:0 2px 0 color-mix(in srgb, var(--ink) 16%, #fff); opacity:.8; }
.notif-item.is-clearing { transition-delay:var(--d, 0ms); }
.notif-item.is-read:hover { opacity:1; border-color:var(--ink); box-shadow:0 5px 0 var(--ink); }
.notif-item.is-go { transform:scale(.97); }
.notif-visual { width:50px; height:50px; display:grid; place-items:center; overflow:hidden; border:2px solid var(--ink); border-radius:15px; background:color-mix(in srgb, var(--c) 62%, #fff); color:var(--ink); font-size:24px; box-shadow:0 3px 0 var(--ink); transition:transform .28s var(--ease-pop); }
.notif-visual img { width:100%; height:100%; object-fit:cover; }
.notif-visual svg { width:26px; height:26px; stroke-width:2.2; }
.notif-item:hover .notif-visual { transform:rotate(-8deg) scale(1.1); }
.notif-copy { min-width:0; display:grid; gap:4px; }
.notif-meta { display:flex; align-items:center; gap:7px; min-width:0; }
.notif-meta em { padding:1px 8px; border:1.5px solid color-mix(in srgb, var(--c) 65%, var(--ink)); border-radius:99px; background:color-mix(in srgb, var(--c) 30%, #fff); color:var(--ink); font:800 10px/1.5 var(--ui); font-style:normal; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.notif-meta time { color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }
.notif-copy strong { font:800 15px/1.2 var(--display); overflow-wrap:anywhere; }
.notif-xp { display:grid; place-items:center; min-width:46px; padding:5px 8px 4px; border:2px solid var(--ink); border-radius:12px; background:var(--lime); box-shadow:0 2px 0 var(--ink); font:800 15px/1 var(--display); text-align:center; }
.notif-xp small { display:block; margin-top:2px; font:800 9px/1 var(--ui); letter-spacing:.09em; }
.notif-go { width:30px; height:30px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:color-mix(in srgb, var(--c) 34%, #fff); font:900 18px/1 var(--ui); padding-bottom:2px; transition:transform .22s var(--ease-pop); }
.notif-item:hover .notif-go { transform:translateX(3px); }
.notif-new { position:absolute; top:-6px; right:-5px; width:15px; height:15px; border:2px solid var(--ink); border-radius:50%; background:var(--pink); transition:transform .25s var(--ease-pop) var(--d, 0ms); }
.notif-item.is-read .notif-new { display:none; }
.notif-item.is-clearing .notif-new, .notif-item.is-go .notif-new { transform:scale(0); }
.notif-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:7px; padding:24px; text-align:center; }
.notif-empty b { font:800 19px var(--display); }
.notif-empty span { color:var(--muted); font-size:14px; }
.notif-empty i { width:58px; height:58px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:18px; background:var(--lime); font-style:normal; font-size:28px; box-shadow:0 4px 0 var(--ink); }
.notif-loading { min-height:190px; display:grid; place-items:center; align-content:center; grid-auto-flow:column; gap:7px; }
.notif-loading i { width:10px; height:10px; border-radius:50%; background:var(--violet); animation:loader .8s ease-in-out infinite alternate; }
.notif-loading i:nth-child(2) { animation-delay:.15s }.notif-loading i:nth-child(3) { animation-delay:.3s }
.notif-foot { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 12px; border-top:3px solid var(--ink); background:var(--lime); color:var(--ink); text-decoration:none; font:800 14px/1.2 var(--ui); transition:background .15s, padding .15s; -webkit-tap-highlight-color:transparent; }
.notif-foot svg { transition:transform .25s var(--ease-pop); }
.notif-foot:hover { background:color-mix(in srgb, var(--lime) 78%, #fff); }
.notif-foot:hover svg { transform:rotate(20deg) scale(1.15); }
.notif-foot:active { background:color-mix(in srgb, var(--lime) 60%, #fff); padding-top:14px; padding-bottom:12px; }
.notif-foot:focus-visible { outline:3px solid var(--violet); outline-offset:-5px; }
.dock:has(.notif-pop:not([hidden])) { z-index:90; }
@media (prefers-reduced-motion: no-preference) {
  .notif-pop:not([hidden]) { animation:notif-open .42s var(--ease-pop); }
  .me-pop:not([hidden]) { transform-origin:calc(100% - 30px) -8px; animation:notif-open .38s var(--ease-pop); }   /* o menu do perfil abre do mesmo jeito */
  .notif-count:not([hidden]) { animation:notif-badge-in .5s var(--ease-pop); }
  .notif-count.bump { animation:notif-bump .55s var(--ease-pop); }
  .notif-count:not([hidden])::after { content:""; position:absolute; inset:-3px; border-radius:inherit; border:2px solid var(--pink); opacity:0; animation:notif-halo 3.2s ease-out 1.2s infinite; pointer-events:none; }
  .notif-btn[aria-expanded="true"] .notif-bell, .notif-btn.ring .notif-bell { animation:notif-ring .8s var(--ease-pop); }
  .notif-btn.has-unread:not([aria-expanded="true"]) .notif-bell { animation:notif-wiggle 8s ease-in-out 2s infinite; }
  .notif-list.is-entering .notif-item, .notif-list.is-entering .notif-day { animation:notif-in .46s var(--ease-pop) backwards; animation-delay:calc(min(var(--i, 0), 9) * 48ms + 120ms); }
  .notif-new { animation:notif-dot 1.8s ease-in-out infinite; }
  .notif-empty i { animation:notif-bounce 2.4s ease-in-out infinite; }
  .notif-title h2::after { content:"✦"; content:"✦" / ""; margin-left:7px; color:var(--lime); display:inline-block; font-size:.72em; text-shadow:none; animation:notif-twinkle 2.6s ease-in-out infinite; }
}
@keyframes notif-open { from { opacity:0; transform:translateY(-12px) scale(.9) rotate(1.4deg); } to { opacity:1; transform:none; } }
@keyframes notif-in { from { opacity:0; transform:translateY(16px) scale(.93); } to { opacity:1; transform:none; } }
@keyframes notif-badge-in { 0% { transform:scale(0) rotate(-30deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes notif-bump { 0% { transform:scale(1); } 35% { transform:scale(1.5) rotate(-8deg); } 100% { transform:scale(1); } }
@keyframes notif-halo { 0% { opacity:.9; transform:scale(.9); } 55%, 100% { opacity:0; transform:scale(1.9); } }
@keyframes notif-ring { 0% { transform:rotate(0); } 18% { transform:rotate(20deg); } 36% { transform:rotate(-17deg); } 54% { transform:rotate(12deg); } 72% { transform:rotate(-7deg); } 100% { transform:rotate(0); } }
@keyframes notif-wiggle { 0%, 10%, 100% { transform:rotate(0); } 2% { transform:rotate(16deg); } 4% { transform:rotate(-14deg); } 6% { transform:rotate(10deg); } 8% { transform:rotate(-6deg); } }
@keyframes notif-dot { 0%, 100% { box-shadow:0 0 0 0 rgb(255 79 163 / .55); } 60% { box-shadow:0 0 0 7px rgb(255 79 163 / 0); } }
@keyframes notif-bounce { 0%, 100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-6px) rotate(3deg); } }
@keyframes notif-twinkle { 0%, 100% { transform:scale(1) rotate(0); opacity:1; } 50% { transform:scale(1.35) rotate(25deg); opacity:.7; } }

/* ---------- Categorias ---------- */
.hs { position: relative; max-width: 1600px; margin: 0 auto; }
.hs > .chips { max-width: none; margin: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin: 0 auto; max-width: 1600px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.chips.is-drag .chip { pointer-events: none; }
/* o que está escondido nas pontas aparece esmaecido, e as setas levam até lá (só com mouse) */
.hs.has-next > .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.hs.has-prev > .chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px); mask-image: linear-gradient(90deg, transparent, #000 72px); }
.hs.has-prev.has-next > .chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
.hs-btn { position: absolute; top: calc(50% - 25px); z-index: 5; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .16s var(--ease-pop), box-shadow .16s, background .15s; -webkit-tap-highlight-color: transparent; }
.hs-btn[hidden] { display: none; }
.hs-prev { left: -6px; } .hs-next { right: -6px; }
.hs-btn:hover { background: var(--lime); transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.hs-btn:active { transform: translateY(2px) scale(.94); box-shadow: 0 1px 0 var(--ink); transition-duration: .06s; }
.hs-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
@media (hover: none) { .hs-btn { display: none; } }
@media (prefers-reduced-motion: no-preference) { .hs-btn:not([hidden]) { animation: hs-in .3s var(--ease-pop); } }
@keyframes hs-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.chip { --c: var(--violet); flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 8px; border-radius: 99px; background: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; border: 2px solid transparent; transition: border-color .15s, transform .2s var(--ease-pop); }
.chip svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, #fff); color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
.chip:hover { border-color: var(--ink); transform: translateY(-2px); }

main { max-width: 1600px; margin: 0 auto; }

/* ---------- Mosaico de jogos ---------- */
.mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: var(--gap); grid-auto-flow: dense; margin-bottom: 28px; }
.t { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--soft); text-decoration: none; align-self: start;
  box-shadow: 0 3px 0 rgb(30 19 56 / .14); transition: transform .25s var(--ease-pop), box-shadow .2s; isolation: isolate; }
.t img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.t-big { grid-column: span 2; grid-row: span 2; border-radius: 24px; }
.t-xl { grid-column: span 3; grid-row: span 3; border-radius: 28px; }
.t-name { position: absolute; inset: auto 0 0 0; padding: 22px 10px 9px; color: #fff; font-weight: 800; font-size: 13px; line-height: 1.2;
  background: linear-gradient(transparent, rgb(30 19 56 / .92)); opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.t-big .t-name { font-size: 16px; padding: 30px 14px 12px; }
.t-xl .t-name { font-size: 22px; padding: 40px 18px 16px; font-family: var(--display); }
.t:hover, .t:focus-visible { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--sticker); z-index: 2; outline: none; }
.t:hover img { transform: scale(1.06); }
.t:hover .t-name, .t:focus-visible .t-name { opacity: 1; transform: none; }
.t:active { transform: scale(.96); box-shadow: 0 0 0 3px var(--ink); transition-duration: .08s; }
.badge { position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; border: 2px solid var(--ink); background: var(--lime); }
.b-hot { background: var(--pink); color: #fff; } .b-orig { background: linear-gradient(120deg, var(--violet), var(--pink)); color: #fff; } .b-top { background: var(--gold); }
.t:not(.t-big):not(.t-xl) .badge { font-size: 0; padding: 4px; gap: 0; } /* só o pontinho nos tiles pequenos */
.t:not(.t-big):not(.t-xl) .b-new::after { content: ""; width: 4px; height: 4px; }

/* entrada: um único momento orquestrado na home */
.mosaic.intro .t { animation: pop .55s var(--ease-pop) both; animation-delay: calc(min(var(--i), 30) * 22ms); }
@keyframes pop { from { opacity: 0; transform: scale(.55) rotate(-6deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-6deg) scale(1.03) } 75% { transform: rotate(5deg) } }

/* ---------- Seções ---------- */
.rail, .vibes, .daily, .all, section { margin-bottom: 30px; }
.rail > header, .sec-head, .vibes > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rail h2, .sec-head h2, .vibes h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.4vw, 26px); }
.rail h2 svg, .sec-head h2 svg, .vibes h2 svg { width: 38px; height: 38px; padding: 8px; border-radius: 13px; background: var(--c, var(--violet)); color: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.more { font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 6px 14px; cursor: pointer; transition: background .15s; }
.more:hover { background: var(--lime); }
.count { font-weight: 700; color: var(--muted); font-size: 14px; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 6px 12px 2px; }
.rail-track .t { scroll-snap-align: start; grid-column: auto; grid-row: auto; }

.vibe-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gap); }
.vibe { --c: var(--lime); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 22px; text-decoration: none;
  background: var(--c); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform .25s var(--ease-pop), box-shadow .2s; }
.vibe:nth-child(even) { transform: rotate(.8deg); } .vibe:nth-child(3n) { transform: rotate(-.8deg); }
.vibe:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 8px 0 var(--ink); }
.vibe-ic { grid-row: span 2; width: 48px; height: 48px; border-radius: 16px; background: #fff; display: grid; place-items: center; border: 2px solid var(--ink); }
.vibe strong { font: 800 18px/1.15 var(--display); }
.vibe small { font-size: 13px; font-weight: 600; opacity: .8; }

.daily-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 16px 22px 16px 16px; background: var(--ink); color: #fff; border-radius: 28px; text-decoration: none; position: relative; overflow: hidden; }
.daily-card::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; background: radial-gradient(var(--violet), transparent 65%); opacity: .7; }
.daily-card img { width: 108px; height: 108px; border-radius: 22px; object-fit: cover; border: 3px solid var(--lime); position: relative; }
.daily-txt { position: relative; display: grid; gap: 4px; }
.daily-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-weight: 800; font-size: 14px; }
.daily-txt strong { font: 800 clamp(22px, 3vw, 32px)/1.05 var(--display); }
.daily-sub { color: #cfc6ec; font-size: 14px; }
.daily-sub b { color: #fff; font-variant-numeric: tabular-nums; }
.daily-card .btn { position: relative; }

.seo-text { max-width: 760px; color: var(--muted); font-size: 15px; }
.seo-text h2 { font-size: 20px; color: var(--ink); margin-bottom: 6px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; border: 2px solid var(--ink); font: 800 16px var(--ui); padding: 12px 22px; border-radius: 16px; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 0 var(--violet); transition: transform .15s var(--ease-pop), box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--violet); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--violet); }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn-lime:hover { box-shadow: 0 6px 0 var(--ink); } .btn-lime:active { box-shadow: 0 1px 0 var(--ink); }
.btn-xl { font-size: 20px; padding: 16px 30px; border-radius: 20px; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--violet); font-weight: 800; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.loader { display: flex; justify-content: center; gap: 8px; padding: 22px; }
.loader span { width: 12px; height: 12px; border-radius: 50%; background: var(--violet); animation: bob .9s ease-in-out infinite; }
.loader span:nth-child(2) { animation-delay: .12s; background: var(--pink); } .loader span:nth-child(3) { animation-delay: .24s; background: var(--lime); }
.loader.done { display: none; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---------- Página do jogo ---------- */
.game-mosaic .stage { grid-column: 2 / -2; grid-row: 1 / span 7; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 6px 0 var(--ink); min-width: 0; }
.frame { position: relative; flex: 1; min-height: 240px; background: var(--ink); }
.frame:has(> .cover) { display: grid; min-height: min-content; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; color: #fff; overflow: hidden; isolation: isolate; }
.cover::before { content: ""; position: absolute; inset: -40px; background: var(--img) center / cover; filter: blur(28px) saturate(1.4) brightness(.55); z-index: -1; }
.cover img { width: clamp(110px, 18vw, 170px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 32px; border: 3px solid #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.cover h1 { font-size: clamp(24px, 3.4vw, 40px); text-shadow: 0 2px 12px rgb(0 0 0 / .4); max-width: 90%; }
.play-btn { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--ui); background: var(--lime); color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; padding: 14px 34px 14px 26px; cursor: pointer; box-shadow: 0 5px 0 var(--ink); position: relative; transition: transform .2s var(--ease-pop); }
.play-btn::after { content: ""; position: absolute; inset: -9px; border-radius: 99px; border: 3px solid var(--lime); animation: ring 1.8s ease-out infinite; }
.play-btn:hover { transform: scale(1.06); }
@keyframes ring { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.25); } }
.cover-note { display: flex; gap: 6px; align-items: center; font-size: 13px; background: rgb(0 0 0 / .35); padding: 6px 12px; border-radius: 99px; margin: 0; }
.preroll { position: absolute; inset: 0; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 3; }
.preroll p { margin: 0; color: #cfc6ec; font-weight: 700; }
.preroll b { color: var(--lime); font-variant-numeric: tabular-nums; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; flex-wrap: wrap; border-top: 3px solid var(--ink); }
.bar-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.bar-title strong { font: 800 19px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; background: var(--lime); padding: 3px 9px; border-radius: 99px; }
.pill.soft { background: var(--bg); color: var(--muted); }
.bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.act { display: inline-flex; align-items: center; gap: 6px; height: 42px; min-width: 42px; justify-content: center; padding: 0 11px; border-radius: 14px; border: 2px solid var(--soft); background: #fff; cursor: pointer; font-weight: 800; font-size: 14px; text-decoration: none; transition: transform .2s var(--ease-pop), background .15s, border-color .15s; }
.act:hover { border-color: var(--ink); transform: translateY(-2px); }
.act.on { background: var(--pink); border-color: var(--ink); color: #fff; }
.act[data-vote="1"].on { background: var(--lime); color: var(--ink); }
.act.on svg { animation: boing .45s var(--ease-pop); }
.act-hi { background: var(--ink); color: var(--lime); border-color: var(--ink); }
@keyframes boing { 40% { transform: scale(1.45) rotate(-12deg); } }
.frame:fullscreen { background: #000; }
.info { grid-column: 2 / -2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; background: #fff; border-radius: 26px; padding: 22px 26px; border: 2px solid var(--soft); }
.info-main { min-width: 0; max-width: 1000px; }   /* preenche até a coluna do anúncio (com 760 px sobrava um vão branco entre o texto e o banner) */
.info h2 { font-size: 24px; margin: 6px 0 8px; } .info h3 { font-size: 17px; margin: 14px 0 4px; }
.info p { margin: 0 0 10px; color: #3b3156; }
.crumbs { display: flex; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--violet); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tags .chip { border-color: var(--soft); }
.tag { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 99px; background: var(--bg); }
.tag:hover { color: var(--violet); }
.tag-theme { color: var(--ink); background: #EFE8FF; border: 2px solid var(--soft); padding: 5px 11px; }
.tag-theme:hover { border-color: var(--ink); color: var(--ink); }
.ch-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; margin-bottom: 14px; background: var(--ink); color: #fff; border-radius: 18px; text-decoration: none; }
.ch-banner svg { color: var(--lime); flex: none; } .ch-banner em { margin-left: auto; font-style: normal; color: var(--lime); font-weight: 800; white-space: nowrap; }

/* ---------- Listagens ---------- */
.hero-list { --c: var(--violet); display: flex; align-items: center; gap: 18px; padding: 22px 26px; margin-bottom: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 5px 0 var(--ink); position: relative; overflow: hidden; }
.hero-list::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 40%; background: var(--c); opacity: .22; transform: rotate(18deg); }
.hero-ic { width: 64px; height: 64px; flex: none; border-radius: 22px; display: grid; place-items: center; background: var(--c); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.hero-list h1 { font-size: clamp(26px, 3.6vw, 40px); }
.hero-list p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }
.hero-count { margin-left: auto; font-weight: 800; background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; padding: 6px 14px; white-space: nowrap; position: relative; z-index: 1; }
.sorts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sorts a { padding: 8px 14px; border-radius: 99px; font-weight: 800; font-size: 14px; text-decoration: none; background: #fff; border: 2px solid transparent; }
.sorts a:hover { border-color: var(--ink); } .sorts a.on { background: var(--ink); color: #fff; }
.search-big { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 6px 6px 6px 16px; margin-bottom: 20px; box-shadow: 0 4px 0 var(--ink); }
.search-big input { flex: 1; border: 0; font: 700 18px var(--ui); padding: 8px; min-width: 0; background: none; color: var(--ink); }
.search-big input:focus { outline: none; }
.empty { text-align: center; padding: 50px 20px; display: grid; justify-items: center; gap: 10px; }
.empty.slim { padding: 22px; background: #fff; border-radius: 20px; color: var(--muted); }
.empty-home { text-align: center; padding: 70px 20px; display: grid; justify-items: center; gap: 12px; background: #fff; border-radius: 30px; border: 2px dashed var(--violet); }
.empty-home .blob { animation: wobble 2.8s ease-in-out infinite; }
.empty p, .empty-home p { color: var(--muted); max-width: 46ch; margin: 0; }
.pager { text-align: center; }

/* ---------- Desafio ---------- */
.ch-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); padding: clamp(24px, 5vw, 56px); border-radius: 32px; background: var(--violet); color: #fff; border: 3px solid var(--ink); box-shadow: 0 7px 0 var(--ink); }
.ch-burst { position: absolute; inset: -50%; background: repeating-conic-gradient(rgb(255 255 255 / .09) 0 10deg, transparent 10deg 20deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.ch-thumb { position: relative; width: clamp(130px, 22vw, 220px); aspect-ratio: 1; object-fit: cover; border-radius: 34px; border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-4deg); }
.ch-copy { position: relative; display: grid; gap: 4px; justify-items: start; }
.ch-who { margin: 0; font-size: 20px; } .ch-who strong { color: var(--lime); }
.ch-score { margin: 0; font: 800 clamp(56px, 11vw, 120px)/.95 var(--display); letter-spacing: -.04em; color: var(--lime); text-shadow: 4px 4px 0 var(--ink); font-variant-numeric: tabular-nums; }
.ch-game { margin: 0 0 6px; font-size: 20px; }
.ch-copy blockquote { margin: 4px 0 14px; padding: 10px 16px; background: rgb(0 0 0 / .18); border-radius: 16px; font-weight: 700; }
.ch-board { max-width: 640px; margin: 28px auto; background: #fff; border-radius: 26px; padding: 22px; border: 2px solid var(--ink); }
.ch-board h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; margin-bottom: 10px; }
.ch-board ol { list-style: none; margin: 0 0 16px; padding: 0; }
.ch-board li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; }
.ch-board li:nth-child(odd) { background: var(--bg); }
.ch-board li.me { outline: 2px solid var(--violet); }
.ch-board .pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; }
.ch-board li:first-child .pos { background: var(--gold); color: var(--ink); }
.ch-board .nm { flex: 1; font-weight: 700; } .ch-board .nm small { color: var(--muted); font-weight: 600; }
.ch-board .pts { font: 800 18px var(--display); font-variant-numeric: tabular-nums; }
.ch-enter h3 { font-size: 17px; margin-bottom: 10px; }
.row2 { display: grid; grid-template-columns: 1fr 140px; gap: 8px; margin-bottom: 10px; }
.ch-enter input, .form input, .modal input { width: 100%; font: 600 16px var(--ui); padding: 12px 14px; border: 2px solid var(--soft); border-radius: 14px; background: #faf8ff; color: var(--ink); }
.ch-enter input:focus, .form input:focus, .modal input:focus { outline: none; border-color: var(--violet); }
.err { color: #C81E4B; font-weight: 700; margin: 8px 0 0; }

/* ---------- Modal ---------- */
.modal { border: 3px solid var(--ink); border-radius: 30px; padding: 28px; width: min(460px, calc(100vw - 24px)); box-shadow: 0 10px 0 var(--ink); color: var(--ink); }
.modal::backdrop { background: rgb(30 19 56 / .6); backdrop-filter: blur(3px); }
.modal[open] { animation: modalIn .35s var(--ease-pop); }
@keyframes modalIn { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.modal-x { position: absolute; top: 14px; right: 14px; margin: 0; }
.modal-x button { border: 0; background: var(--bg); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.modal-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); border: 2px solid var(--ink); margin-bottom: 10px; }
.modal h2 { font-size: 26px; margin-bottom: 6px; }
.modal p { margin: 0 0 14px; color: var(--muted); }
.modal label { display: grid; gap: 6px; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.modal .btn { width: 100%; margin-top: 6px; }
.ch-card { width: 100%; border-radius: 18px; border: 2px solid var(--ink); margin-bottom: 14px; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--soft); }
.copy-row { display: flex; gap: 8px; margin: 12px 0; } .copy-row .btn { width: auto; margin: 0; }
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.share { display: grid; place-items: center; padding: 11px; border-radius: 14px; font-weight: 800; font-size: 14px; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; background: #fff; }
.share.wa { background: #25D366; } .share.x { background: var(--ink); color: #fff; }

/* ---------- Swipe ---------- */
body.pg-swipe { padding: 0; background: var(--ink); overflow: hidden; }
body.pg-swipe .dock, body.pg-swipe .tabbar { display: none; }
body.pg-swipe main { max-width: none; }
.swipe { height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.swipe::-webkit-scrollbar { display: none; }
.sc { height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; }
.sc-bg { position: absolute; inset: -60px; background: var(--img) center / cover; filter: blur(40px) saturate(1.5) brightness(.45); }
.sc-body { position: relative; width: min(520px, 100%); padding: 70px 76px 28px 18px; display: grid; gap: 16px; }
.sc-stage { position: relative; border-radius: 30px; overflow: hidden; border: 3px solid #fff; aspect-ratio: 1; background: #000; box-shadow: 0 20px 50px rgb(0 0 0 / .4); }
.sc-stage.playing { aspect-ratio: 3 / 4; }
.sc-img { width: 100%; height: 100%; object-fit: cover; }
.sc-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgb(30 19 56 / .25); border: 0; color: #fff; font-weight: 800; cursor: pointer; }
.sc-play svg { width: 74px; height: 74px; padding: 18px; border-radius: 50%; background: var(--lime); color: var(--ink); border: 3px solid var(--ink); }
.sc-cat { display: inline-block; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--c, var(--violet)); color: var(--ink); }
.sc-title { font-size: clamp(26px, 6vw, 34px); margin: 6px 0 4px; }
.sc-desc { margin: 0 0 12px; color: #ddd5f6; font-size: 15px; }
.sc-rail { position: absolute; right: 12px; bottom: 120px; display: grid; gap: 16px; }
.sc-rail > * { display: grid; justify-items: center; gap: 3px; background: none; border: 0; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; }
.sc-rail svg { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); transition: transform .2s var(--ease-pop), background .2s; }
.sc-rail > *:hover svg { transform: scale(1.1); }
.sc-rail .on svg { background: var(--pink); animation: boing .45s var(--ease-pop); }
.swipe-close { position: fixed; top: 14px; left: 14px; z-index: 10; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(6px); }
.swipe-hint { position: fixed; inset: auto 0 34px 0; z-index: 9; display: grid; justify-items: center; gap: 6px; color: #fff; font-weight: 800; pointer-events: none; transition: opacity .4s; }
.swipe-hint .hand { animation: hint 1.6s ease-in-out infinite; }
.swipe-hint.gone { opacity: 0; }
@keyframes hint { 0%, 100% { transform: translateY(10px); opacity: .5 } 50% { transform: translateY(-14px); opacity: 1 } }
.sc-ad { height: 100dvh; scroll-snap-align: start; display: grid; place-items: center; color: #fff; }

/* ---------- Conta / perfil ---------- */
.auth { display: grid; place-items: center; padding: 30px 0 60px; }
.auth-card { width: min(440px, 100%); background: #fff; border: 3px solid var(--ink); border-radius: 30px; padding: 30px; box-shadow: 0 8px 0 var(--ink); }
.auth-card h1 { font-size: 32px; margin: 14px 0 6px; }
.auth-card > p { color: var(--muted); margin: 0 0 16px; }
.form label { display: grid; gap: 6px; font-weight: 800; font-size: 14px; margin-bottom: 14px; }
.form small { font-weight: 600; color: var(--muted); }
.form .btn { width: 100%; }
.alt { text-align: center; color: var(--muted); margin: 18px 0 0; } .alt a { color: var(--violet); font-weight: 800; }
.auth-card > p.alt { margin:24px 0 0; line-height:1.65; }
.lvl-ring { --p: 0; grid-row: span 2; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--violet) calc(var(--p) * 1%), var(--soft) 0); position: relative; }
.lvl-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.lvl-ring span, .lvl-ring b { position: relative; line-height: 1; } .lvl-ring span { font-size: 11px; font-weight: 800; color: var(--muted); } .lvl-ring b { font: 800 26px var(--display); }
.lvl-bar { height: 12px; border-radius: 99px; background: var(--soft); overflow: hidden; border: 2px solid var(--ink); }
.lvl-bar div { height: 100%; background: var(--lime); border-radius: 99px; }
.acct { display: grid; gap: 18px; max-width: 900px; margin: 0 auto 30px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); text-decoration: none; width: fit-content; } .back-link:hover { color: var(--ink); }
.acct-head { display: flex; align-items: center; gap: 18px; background: #fff; border: 3px solid var(--ink); border-radius: 30px; padding: 20px 24px; box-shadow: 0 6px 0 var(--ink); }
.acct-head h1 { font-size: 30px; } .acct-head p { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.acct-card textarea { width: 100%; font: 600 16px var(--ui); padding: 12px 14px; border: 2px solid var(--soft); border-radius: 14px; background: #faf8ff; color: var(--ink); resize: vertical; }
.acct-card textarea:focus { outline: none; border-color: var(--violet); }
.acct-wide { grid-column: 1 / -1; } .acct-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } .acct-wide .btn { width: auto; min-width: 200px; }
@media (max-width: 760px) { .acct-row { grid-template-columns: 1fr; } .acct-wide .btn { width: 100%; } .acct-head { padding: 16px; gap: 12px; } .acct-head .ava.xl { width: 72px; height: 72px; } .acct-head h1 { font-size: 24px; } }
.acct-out { margin: 0; } .acct-out .btn { width: 100%; }
.acct-card { background: #fff; border-radius: 22px; padding: 20px; margin: 0; }
.acct-card h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .acct-card > p { margin: 0 0 16px; color: var(--muted); font-weight: 600; }
/* ---------- Perfil do jogador ---------- */
.pf { --uc: var(--violet); display: grid; gap: 14px; margin-bottom: 26px; }
.pf-hero { background: #fff; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; display: grid; grid-template-columns: 1fr auto; }
.pf-cover { grid-column: 1 / -1; height: 130px; position: relative; overflow: hidden; border-bottom: 3px solid var(--ink);
  background: radial-gradient(rgb(255 255 255 / .35) 1.4px, transparent 1.6px) 0 0 / 18px 18px, linear-gradient(120deg, var(--uc), var(--violet) 62%, var(--pink));
  background: radial-gradient(rgb(255 255 255 / .35) 1.4px, transparent 1.6px) 0 0 / 18px 18px, linear-gradient(in oklch 120deg, var(--uc), var(--violet) 62%, var(--pink)); }
.pf-cover i { position: absolute; display: block; border: 3px solid var(--ink); animation: pf-float 6s ease-in-out infinite; }
.pf-cover .s1 { width: 46px; height: 46px; border-radius: 50%; background: var(--lime); right: 8%; top: 20px; }
.pf-cover .s2 { width: 34px; height: 34px; border-radius: 9px; background: var(--cyan); right: 22%; top: 64px; transform: rotate(18deg); animation-delay: -2s; }
.pf-cover .s3 { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); right: 36%; top: 14px; animation-delay: -4s; }
.pf-cover .s4 { width: 60px; height: 22px; border-radius: 99px; background: #fff; left: 58%; top: 82px; animation-delay: -1s; }
.pf-cover .s5 { width: 30px; height: 30px; background: var(--pink); left: 44%; top: 26px; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; animation-delay: -3s; }
.pf-cover .s6 { width: 20px; height: 20px; border-radius: 50%; background: #fff; right: 4%; top: 88px; animation-delay: -5s; }
@keyframes pf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.pf-main { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 0 24px 22px; }
.pf-ava { position: relative; margin-top: -58px; flex: none; }
.pf-ava .ava.xl { width: 128px; height: 128px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); background: #fff; }
.pf-ava a { display: block; position: relative; }
.pf-ava a:hover .ava { transform: rotate(-4deg) scale(1.03); } .pf-ava .ava { transition: transform .25s var(--ease-pop); }
.pf-ava-pen { position: absolute; left: -2px; bottom: 4px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); border: 3px solid var(--ink); }
.pf-ava-lvl { position: absolute; right: -4px; bottom: 4px; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--violet); color: #fff; font: 800 18px var(--display); border: 3px solid var(--ink); }
.pf-id { flex: 1; min-width: 220px; padding-top: 14px; display: grid; gap: 4px; justify-items: start; }
.pf-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: #fff; padding: 3px 10px; border-radius: 99px; }
.pf-id h1 { font-size: clamp(30px, 4vw, 42px); overflow-wrap: anywhere; }
.pf-handle { margin: 0; color: var(--muted); font-weight: 700; font-size: 14px; }
.pf-bio { margin: 6px 0 0; max-width: 56ch; font-weight: 600; }
.pf-bio-add { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 800; text-decoration: none; padding: 6px 12px; border: 2px dashed currentColor; border-radius: 12px; }
.pf-bio-add:hover { background: var(--bg); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .pf-tags:empty { display: none; }
.pf-tag { --c: var(--violet); display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 6px; border-radius: 99px; font-size: 13px; font-weight: 800; text-decoration: none; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--ink); border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); }
.pf-tag svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--c); color: #fff; }
.pf-tag.gold { --c: var(--gold); } .pf-tag.fire { --c: #FF7A1A; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 12px; gap: 6px; }
.btn-ghost { background: #fff; color: var(--ink); }
.pf-level { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: 0 24px 22px; padding: 14px 18px; border-radius: 22px; background: var(--bg); }
.pf-level .lvl-ring { width: 78px; height: 78px; flex: none; } .pf-level .lvl-ring::before { background: var(--bg); }
.pf-lvl-txt { flex: 1; display: grid; gap: 6px; }
.pf-lvl-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; } .pf-lvl-top b { font: 800 22px var(--display); } .pf-lvl-top small { font: 700 14px var(--ui); color: var(--muted); } .pf-lvl-top span { color: var(--violet); }
.pf-level .lvl-bar { height: 16px; } .pf-level .lvl-bar div { background: linear-gradient(90deg, var(--lime), #9BE21A); }
.pf-lvl-txt > small { color: var(--muted); font-weight: 600; } .pf-lvl-txt > small b { color: var(--ink); }
.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pf-stats > * { --c: var(--violet); background: #fff; border-radius: 20px; padding: 14px; display: grid; justify-items: start; gap: 2px; text-decoration: none; color: var(--ink); border: 2px solid transparent; transition: transform .2s var(--ease-pop), border-color .15s; }
.pf-stats > *:hover { transform: translateY(-3px); border-color: var(--ink); }
.pf-stats svg { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 80%, var(--ink)); margin-bottom: 4px; }
.pf-stats .hot svg { background: var(--c); color: #fff; animation: pf-flame 1.4s ease-in-out infinite; }
@keyframes pf-flame { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(-5deg); } }
.pf-stats b { font: 800 26px/1.1 var(--display); } .pf-stats span { color: var(--muted); font-weight: 700; font-size: 13px; }
.pf-next { --c: var(--gold); display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 22px; background: #fff; border: 2px dashed color-mix(in srgb, var(--c) 70%, var(--ink)); }
.pf-next-ic { width: 58px; height: 58px; flex: none; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 25%, #fff); color: var(--ink); border: 2px solid var(--ink); }
.pf-next-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pf-next-txt small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pf-next-txt strong { font: 800 18px var(--display); } .pf-next-txt em { font: 800 13px var(--ui); font-style: normal; color: var(--violet); margin-left: 4px; }
.pf-next-txt > span { color: var(--muted); font-size: 14px; font-weight: 600; }
.pf-next-num { font: 800 28px var(--display); flex: none; } .pf-next-num small { font-size: 16px; color: var(--muted); }
.pf-bar { width: 100%; height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.pf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--violet)); }
.pf-bar.big { height: 14px; border: 2px solid var(--ink); margin: 0; } .pf-bar.big i { background: linear-gradient(90deg, var(--violet), var(--pink)); }
.pf-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 6px 0 16px; padding: 4px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; box-shadow: 0 3px 0 var(--ink); overflow-x: auto; scrollbar-width: none; }
.pf-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; border: 0; background: none; font: 800 15px var(--ui); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.pf-tabs button span { background: var(--soft); border-radius: 99px; padding: 0 8px; font-size: 13px; }
.pf-tabs button:hover { background: var(--bg); }
.pf-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; } .pf-tabs button[aria-selected="true"] span { background: var(--lime); color: var(--ink); }
.pf-panel { margin-bottom: 30px; }
.pf-ach-sum { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-weight: 700; color: var(--muted); } .pf-ach-sum span { flex: none; } .pf-ach-sum b { color: var(--ink); }
.badge-card .pf-bar { margin: 6px 0 2px; height: 8px; }
.badge-card em svg { vertical-align: -2px; margin-right: 3px; }
.badge-card.got em { color: #16A34A; }
.badge-card.got { animation: pf-pop .5s var(--ease-pop) both; }
@keyframes pf-pop { from { transform: scale(.92); opacity: 0; } }
.pf-empty { gap: 12px; } .pf-empty > span { font-size: 40px; line-height: 1; }
@media (max-width: 1100px) { .pf-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .pf-hero { grid-template-columns: 1fr; border-radius: 24px; }
  .pf-cover { height: 96px; }
  .pf-main { flex-direction: column; align-items: center; text-align: center; padding: 0 16px 16px; gap: 6px; }
  .pf-ava { margin-top: -54px; } .pf-ava .ava.xl { width: 108px; height: 108px; }
  .pf-id { justify-items: center; padding-top: 4px; min-width: 0; width: 100%; }
  .pf-tags { justify-content: center; }
  .pf-actions { justify-content: center; padding-top: 8px; width: 100%; } .pf-actions .btn { flex: 1; }
  .pf-level { margin: 0 12px 14px; padding: 12px; gap: 12px; } .pf-level .lvl-ring { width: 64px; height: 64px; } .pf-level .lvl-ring b { font-size: 22px; }
  .pf-stats { gap: 8px; } .pf-stats > * { padding: 12px 10px; } .pf-stats b { font-size: 22px; } .pf-stats span { font-size: 12px; line-height: 1.2; }
  .pf-stats svg { width: 32px; height: 32px; padding: 6px; }
  .pf-next { padding: 14px; gap: 12px; } .pf-next-ic { width: 46px; height: 46px; } .pf-next-num { font-size: 22px; }
  .pf-panel .ach-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pf-cover i, .pf-stats .hot svg, .badge-card.got { animation: none; } }
/* ---------- Bichinho Zovy ---------- */
.pf-pet { --pc: var(--lime); display: grid; grid-template-columns: minmax(220px, 300px) 1fr; background: #fff; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 5px 0 var(--ink); scroll-margin-top: 100px; }
.pet-home { position: relative; min-height: 270px; display: grid; place-items: end center; padding: 54px 16px 10px; border-right: 3px solid var(--ink);
  background: linear-gradient(transparent 72%, color-mix(in srgb, var(--pc) 35%, #7ED957) 72%), linear-gradient(#BDEBFF, #E9F8FF 70%); }
.pet-home::before { content: ""; position: absolute; top: 16px; right: 20px; width: 34px; height: 34px; border-radius: 50%; background: #FFD23F; box-shadow: 0 0 0 6px rgb(255 210 63 / .35); }
.pet-home.night { background: linear-gradient(transparent 72%, #3B2F6B 72%), linear-gradient(#1E1338, #4B3A8C 70%); }
.pet-home.night::before { background: #FFF6D5; box-shadow: -8px 4px 0 -2px #1E1338 inset, 0 0 0 6px rgb(255 246 213 / .15); }
.pet-home.night::after { content: "✦ ✧ ✦"; position: absolute; top: 22px; left: 22px; color: #fff; opacity: .7; letter-spacing: 14px; font-size: 12px; }
.pet { width: 190px; height: 190px; cursor: pointer; position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }
.pet svg { width: 100%; height: 100%; overflow: visible; }
.pet .pet-body { transform-origin: 60px 106px; animation: pet-idle 2.4s ease-in-out infinite; }
.pet[data-mood="radiante"] .pet-body { animation: pet-jump 1s ease-in-out infinite; }
.pet[data-mood="saudade"] .pet-body, .pet[data-mood="tedio"] .pet-body { animation: pet-sway 4s ease-in-out infinite; }
.pet[data-mood="dormindo"] .pet-body { animation: pet-breathe 3.6s ease-in-out infinite; }
.pet[data-mood="ovo"] .pet-body { animation: pet-wobble 2.8s ease-in-out infinite; }
.pet.boing .pet-body { animation: pet-boing .5s var(--ease-pop); }
.pet .pet-zzz text { animation: pet-zzz 2.4s ease-in-out infinite; } .pet .pet-zzz text:nth-child(2) { animation-delay: .4s; } .pet .pet-zzz text:nth-child(3) { animation-delay: .8s; }
.pet .pet-tear { animation: pet-tear 2.2s ease-in infinite; }
@keyframes pet-idle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes pet-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-14px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.06, .94); } }
@keyframes pet-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pet-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, .95); } }
@keyframes pet-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-8deg); } 82% { transform: rotate(7deg); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@keyframes pet-boing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.15, .85); } 60% { transform: translateY(-16px) scale(.92, 1.1); } 100% { transform: scale(1, 1); } }
@keyframes pet-zzz { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes pet-tear { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.pet-bubble { position: absolute; top: 12px; left: 14px; right: 64px; z-index: 2; margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 7px 12px; font-weight: 800; font-size: 14px; line-height: 1.3; box-shadow: 0 3px 0 var(--ink); animation: pf-pop .4s var(--ease-pop); }
.pet-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }
.pet-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pet-fx span { position: absolute; bottom: 40%; font-size: 24px; animation: pet-float-up 1.4s ease-out forwards; }
@keyframes pet-float-up { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-110px) scale(1.2); opacity: 0; } }
.pet-info { padding: 20px 22px; display: grid; gap: 8px; align-content: center; }
.pet-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pet-info h2 { font-size: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pet-stage { font: 800 12px var(--ui); background: var(--pc); color: var(--ink); border: 2px solid var(--ink); padding: 2px 10px; border-radius: 99px; letter-spacing: 0; }
.pet-mood { margin: 0; font-weight: 800; color: var(--violet); display: flex; align-items: center; gap: 6px; } .pet-mood::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pet-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 4px 0; }
.pet-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px; font-size: 14px; font-weight: 800; } .pet-bar b { color: var(--muted); font-size: 13px; }
.pet-bar div { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: var(--soft); border: 2px solid var(--ink); overflow: hidden; }
.pet-bar i { display: block; height: 100%; background: var(--c); border-radius: 99px; transition: width .6s var(--ease-pop); }
.pet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pet-actions button[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.pet-actions [data-pet-left] { background: var(--lime); color: var(--ink); border-radius: 99px; padding: 0 7px; font-size: 12px; }
.pet-edit-btn { padding-left: 10px; padding-right: 10px; }
.pet-tip { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; } .pet-tip b { color: var(--ink); }
.pet-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px; background: var(--bg); border-radius: 16px; margin-top: 4px; }
.pet-form > label { display: grid; gap: 4px; font-weight: 800; font-size: 13px; flex: 1; min-width: 150px; }
.pet-form input[name=nome] { font: 600 16px var(--ui); padding: 9px 12px; border: 2px solid var(--soft); border-radius: 12px; background: #fff; }
.pet-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-colors label { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); cursor: pointer; position: relative; }
.pet-colors input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pet-colors label:has(input:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.me-dot { position: absolute; top: 2px; left: 28px; width: 12px; height: 12px; border-radius: 50%; background: #FF3B5C; border: 2px solid #fff; animation: pet-zzz 1.6s ease-in-out infinite; }
.dock-nav button.me { position: relative; }
.me-pet { width: 18px; text-align: center; font-size: 16px; line-height: 1; }
.me-alert { margin-left: auto; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #FF3B5C; padding: 1px 7px; border-radius: 99px; }
.tabbar .tab-ava { width: 26px; height: 26px; border-width: 2px; }
.tabbar a.has-dot { position: relative; } .tabbar a.has-dot::after { content: ""; position: absolute; top: 4px; left: 54%; width: 10px; height: 10px; border-radius: 50%; background: #FF3B5C; border: 2px solid #fff; }
@media (max-width: 760px) {
  .pf-pet { grid-template-columns: 1fr; border-radius: 24px; }
  .pet-home { border-right: 0; border-bottom: 3px solid var(--ink); min-height: 220px; }
  .pet { width: 150px; height: 150px; }
  .pet-info { padding: 16px; }
  .pet-info h2 { font-size: 24px; }
  .pet-bars { grid-template-columns: 1fr; }
  .pet-actions .btn { flex: 1; }
  .pet-actions .pet-edit-btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .pet .pet-body, .pet .pet-zzz text, .pet .pet-tear, .me-dot { animation: none !important; } }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge-card { --c: var(--gold); background: #fff; border-radius: 22px; padding: 16px; display: grid; gap: 4px; justify-items: start; border: 2px solid var(--soft); opacity: .6; }
.badge-card.got { opacity: 1; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.b-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--soft); color: var(--muted); margin-bottom: 6px; }
.got .b-ic { background: var(--c); color: var(--ink); border: 2px solid var(--ink); }
.badge-card strong { font: 800 16px var(--display); } .badge-card small { color: var(--muted); font-size: 13px; } .badge-card em { font-style: normal; font-weight: 800; font-size: 12px; color: var(--violet); }
.lb { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: grid; gap: 8px; }
.lb li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 10px 16px; }
.lb .pos { width: 30px; font: 800 18px var(--display); color: var(--muted); }
.lb .who { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.lb .lv { font-size: 13px; font-weight: 800; background: var(--lime); padding: 2px 9px; border-radius: 99px; }
.lb .st { display: inline-flex; align-items: center; gap: 2px; color: #F25F1A; font-weight: 800; font-size: 13px; }
.lb .xp { font: 800 16px var(--display); min-width: 100px; text-align: right; }
.lb .podium { border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.lb .p1 { background: #FFF3C4; } .lb .p1 .pos { color: #B8860B; } .lb .p2 { background: #F1F0F7; } .lb .p3 { background: #FFE6D5; }

.prose { max-width: 720px; margin: 10px auto 40px; background: #fff; border-radius: 28px; padding: clamp(22px, 4vw, 44px); }
.prose h1 { font-size: 36px; margin-bottom: 18px; } .prose p, .prose li { line-height: 1.7; color: #3b3156; }

.nf { text-align: center; padding: 50px 20px 30px; display: grid; justify-items: center; gap: 12px; }
.nf h1 { font-size: clamp(32px, 5vw, 52px); } .nf p { color: var(--muted); margin: 0; }
.nf-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------- Anúncios ---------- */
.ad { position: relative; display: grid; place-items: center; margin: 0 auto 20px; max-width: 100%; overflow: hidden; }
.ad-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.mosaic > .ad { grid-column: 1 / -1; }
.info .ad-side { width: 300px; }

/* ---------- Toasts / XP ---------- */
/* Celular: no topo, no meio (longe da barra de baixo e dos controles dos jogos). Computador: canto de baixo à direita.
   Em tela cheia a caixa vai para dentro do jogo (zovy.js) e fica sempre no topo. */
.toasts { --tx: 0px; --ty: -34px; position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 2147483100; display: grid; gap: 10px; justify-items: center; pointer-events: none; }
.toasts.in-fs { top: calc(env(safe-area-inset-top, 0px) + 10px); }
.toast { position: relative; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(440px, calc(100vw - 24px)); padding: 8px 20px 8px 8px; overflow: hidden; background: var(--ink); color: #fff; border: 3px solid var(--ink); border-radius: 99px; font: 800 15px/1.25 var(--ui); box-shadow: 0 4px 0 rgb(30 19 56 / .35), 0 14px 28px rgb(30 19 56 / .28); animation: toastIn .5s var(--ease-pop); pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toast i { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--ink); font-style: normal; }
.toast-txt { display: grid; gap: 2px; min-width: 0; }
.toast-txt b { font-weight: 800; overflow-wrap: anywhere; }
.toast.out { animation: toastOut .3s ease forwards; }
.toast em { display: inline-block; margin-left: 6px; padding: 1px 9px; font: 800 14px/1.5 var(--ui); font-style: normal; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; vertical-align: 2px; }

/* cartão grande: conquista, nível, medalha, bichinho */
.toast.big { width: min(440px, calc(100vw - 24px)); padding: 12px 22px 16px 12px; gap: 14px; background: #fff; color: var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink), 0 18px 36px rgb(30 19 56 / .35); }
.toast.big i { width: 56px; height: 56px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); animation: toastIcon .9s .15s var(--ease-pop) both; }
.toast.big i svg { width: 28px; height: 28px; }
.toast.big .toast-txt { gap: 3px; }
.toast.big small { font: 800 11px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.toast.big b { font: 800 17px/1.25 var(--ui); }
.toast.big a { color: var(--violet); }
.toast.big[class*="k-"] b { font: 800 22px/1.12 var(--display); }
.toast.big u { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: currentColor; opacity: .3; transform-origin: left; animation: toastTimer var(--ms, 4s) linear forwards; }
.toast.k-achievement { background: var(--violet); color: #fff; }
.toast.k-achievement small { color: var(--lime); }
.toast.k-achievement a { color: var(--lime); }
.toast.k-level { background: var(--lime); }
.toast.k-level i { background: var(--violet); color: #fff; }
.toast.k-medal { background: var(--pink); color: #fff; }
.toast.k-medal small { color: #FFE9A8; }
.toast.k-medal i { background: var(--gold); color: var(--ink); }
.toast.k-pet { background: var(--cyan); }
.toast.k-pet small { color: var(--ink); opacity: .7; }
.toast.k-pet i { background: var(--pink); color: #fff; }
.toast.k-quest { background: var(--gold); }
.toast.k-quest small { color: var(--ink); opacity: .7; }
.toast.k-quest i { background: var(--ink); color: var(--lime); }
/* brilho que passa uma vez pelo cartão */
.toast.big[class*="k-"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%); transform: translateX(-120%); animation: toastShine 1.1s .5s ease-out forwards; pointer-events: none; }
@keyframes toastIn { from { transform: translate(var(--tx), var(--ty)) scale(.85); opacity: 0; } }
@keyframes toastOut { to { transform: translate(var(--tx), var(--ty)) scale(.92); opacity: 0; } }
@keyframes toastIcon { 0% { transform: scale(.3) rotate(-25deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: none; } }
@keyframes toastTimer { to { transform: scaleX(0); } }
@keyframes toastShine { to { transform: translateX(120%); } }
@media (min-width: 761px) {
  .toasts { --tx: 60px; --ty: 0px; left: auto; right: 24px; top: auto; bottom: 24px; justify-items: end; }
  .toasts.in-fs { --tx: 0px; --ty: -34px; top: 20px; bottom: auto; }
}
@media (max-width: 760px), (max-height: 500px) {      /* celular: cartões mais baixos para não cobrir o jogo */
  .toast.big { padding: 9px 18px 14px 9px; gap: 12px; border-radius: 20px; }
  .toast.big i { width: 46px; height: 46px; border-radius: 15px; }
  .toast.big i svg { width: 24px; height: 24px; }
  .toast.big[class*="k-"] b { font-size: 19px; }
}
@media (max-height: 500px) {                           /* celular deitado: ainda menores, o jogo precisa aparecer */
  .toasts { gap: 8px; }
  .toast.big { width: min(360px, calc(100vw - 24px)); padding: 7px 14px 12px 7px; gap: 10px; border-radius: 18px; }
  .toast.big i { width: 38px; height: 38px; border-radius: 12px; }
  .toast.big i svg { width: 20px; height: 20px; }
  .toast.big[class*="k-"] b { font-size: 17px; }
  .toast.big small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out, .toast.big i, .toast.big u, .toast.big::before { animation-duration: .01s !important; animation-delay: 0s !important; }
}
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2147483200; }
.flash { max-width: 1600px; margin: 0 auto 12px; padding: 12px 18px; border-radius: 16px; background: var(--lime); border: 2px solid var(--ink); font-weight: 700; }
.flash-err { background: #FFD6E0; }

/* ---------- Rodapé / barra inferior ---------- */
.tabbar { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .dock-nav > a > span { display: none; }
  .dock-nav > a.login > span { display: inline; }
  .info { grid-template-columns: 1fr; }
  .info .ad-side { display: none; }
}
@media (max-width: 760px) {
  :root { --tile: 78px; --gap: 9px; --r: 14px; --dock-gap: 6; }   /* 4 colunas no celular (eram 3 de ~115 px; o destaque ocupava a tela toda) */
  body { padding-bottom: 86px; }
  html { scroll-padding-top: 76px; }
  .dock { top: calc(6px + env(safe-area-inset-top, 0px) * 1.3); margin-top: calc(6px + env(safe-area-inset-top, 0px) * 1.3); gap: 8px; border-radius: 18px; padding: 6px 8px; }
  .brand .word { font-size: 24px; }
  .brand-logo { height: 32px; }
  .blob { --s: 34px; }
  .dock-nav { display: flex; }
  .dock-nav > :not(.account-tools) { display: none !important; }
  .account-tools { width:44px; height:44px; border-radius:14px; }
  .account-tools .me-wrap { display:none; }
  .notif-btn { width:40px; height:40px; border-right:0; border-radius:12px; }
  .notif-count { right:-8px; }
  .dock:has(.notif-pop:not([hidden])) { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.notif-open { overflow: hidden; }
  .notif-pop { position: fixed; left: 8px; right: 8px; top: calc(76px + env(safe-area-inset-top, 0px)); bottom: calc(82px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: none; border-radius: 22px; }
  .search input { padding: 10px 10px 10px 36px; }
  .t-xl { grid-column: span 2; grid-row: span 2; border-radius: 22px; }   /* no celular o destaque ocupa 2 de 3 colunas (com 3 ocupava a tela inteira) */
  .t-name { display: none; }
  .rail-track { grid-auto-columns: 148px; }
  .vibe-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vibe { grid-template-columns: 1fr; padding: 12px; gap: 6px; }
  .vibe-ic { grid-row: auto; width: 40px; height: 40px; }
  .vibe small { display: none; }
  .daily-card { grid-template-columns: auto 1fr; gap: 14px; padding: 12px; border-radius: 22px; }
  .daily-card img { width: 78px; height: 78px; }
  .daily-card .btn { grid-column: 1 / -1; }
  .game-mosaic .stage { grid-column: 1 / -1; grid-row: auto; border-radius: 20px; }
  .frame { flex: none; aspect-ratio: var(--ar, 1.333); min-height: 0; max-height: 75vh; }
  .info { grid-column: 1 / -1; padding: 18px; }
  .bar-title strong { max-width: 20ch; }
  .act span { display: none; }
  .hero-list { padding: 16px; gap: 12px; flex-wrap: wrap; }
  .hero-ic { width: 50px; height: 50px; border-radius: 16px; }
  .hero-count { margin-left: 0; }
  .ch-hero { flex-direction: column; text-align: center; }
  .ch-copy { justify-items: center; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 50;
    background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); padding: 6px; }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 800; text-decoration: none; border-radius: 14px; color: var(--muted); }
  .tabbar a.on { color: var(--ink); background: var(--lime); }
  .foot { margin-bottom: 10px; }
}
/* A apresentação precisa acomodar o conteúdo, independentemente da proporção do jogo. */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .frame:has(> .cover) { aspect-ratio: auto; max-height: none; }
  .frame > .cover { padding: 24px 20px 30px; }
  .cover > img { width: 110px; flex: none; border-radius: 24px; }
  .cover h1 { font-size: 24px; max-width: 100%; overflow-wrap: anywhere; }
  .cover > .play-btn { flex: none; }
}
@media (hover: none) { .t:hover { transform: none; box-shadow: 0 3px 0 rgb(30 19 56 / .14); } .t:hover img { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  .bar { padding: 10px; }
  .bar-actions { width: 100%; justify-content: space-between; gap: 4px; }
  .act { height: 40px; min-width: 40px; padding: 0 8px; flex: 1; }
  .act[href*="streamer"] { display: none; }
  .bar-title .pill.soft { display: none; }
}

/* ---------- Classificação indicativa ---------- */
.rt { --rb: #0C9447; --rf: #fff; display: inline-grid; place-items: center; background: var(--rb); color: var(--rf); font: 800 13px/1 var(--ui); border-radius: 7px; min-width: 26px; height: 26px; padding: 0 5px; letter-spacing: -.02em; flex: none; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .12); }
.rt-xs { min-width: 22px; height: 22px; font-size: 11px; border-radius: 6px; position: absolute; top: 7px; right: 7px; box-shadow: 0 0 0 2px #fff; }
.rt-sm { min-width: 26px; height: 26px; font-size: 13px; }
.rt-lg { min-width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
.rt-esrb { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; font-family: Arial, sans-serif; }
.t-big .rt-xs, .t-xl .rt-xs { min-width: 28px; height: 28px; font-size: 13px; top: 10px; right: 10px; }
.rating-box { display: flex; align-items: center; gap: 14px; margin: 16px 0 8px; padding: 12px 14px; background: var(--bg); border-radius: 16px; }
.rating-box strong { display: block; font-size: 15px; }
.rating-box small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rt-desc { display: block; font-size: 14px; font-weight: 700; color: #3b3156; }
.age-gate { display: flex; align-items: center; gap: 10px; font-weight: 700; background: rgb(0 0 0 / .4); padding: 10px 14px; border-radius: 14px; cursor: pointer; font-size: 14px; max-width: 92%; }
.age-gate input { width: 20px; height: 20px; accent-color: var(--lime); flex: none; }
.play-btn[disabled] { opacity: .5; cursor: not-allowed; }
.play-btn[disabled]::after { display: none; }
.family-bar { max-width: 1600px; margin: 0 auto 12px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #E8F7EE; border: 2px solid #0C9447; border-radius: 16px; font-weight: 700; font-size: 14px; }
.family-bar svg { color: #0C9447; flex: none; }
.family-bar button { margin-left: auto; }
.dock-nav button.fam { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 13px; border: 0; background: none; cursor: pointer; font: 700 14px var(--ui); color: var(--ink); }
.dock-nav button.fam:hover { background: var(--bg); }
.dock-nav button.fam.on { background: #E8F7EE; color: #0C7A3B; }
@media (max-width: 1100px) { .dock-nav button.fam span { display: none; } }

/* ---------- Páginas institucionais ---------- */
.page-wrap { display: grid; grid-template-columns: minmax(0, 760px) 240px; gap: 24px; justify-content: center; align-items: start; margin: 10px auto 40px; }
.page-wrap .prose { margin: 0; }
.prose h2 { font-size: 22px; margin: 30px 0 8px; }
.prose .lead { font-size: 18px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--violet); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.prose th { background: var(--bg); font-weight: 800; }
.prose code { background: var(--bg); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.prose .rt-table { display: table; width: auto; }
.prose .rt-table td { border: 0; padding: 6px 12px 6px 0; vertical-align: middle; }
.page-side { position: sticky; top: 96px; display: grid; gap: 2px; background: #fff; border-radius: 22px; padding: 10px; }
.page-side a { padding: 9px 12px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--muted); }
.page-side a:hover { background: var(--bg); color: var(--ink); }
.page-side a.on { background: var(--ink); color: #fff; }
.contact { margin: 24px 0 10px; padding: 20px; background: var(--bg); border-radius: 20px; }
.contact select, .contact textarea { width: 100%; font: 600 16px var(--ui); padding: 12px 14px; border: 2px solid var(--soft); border-radius: 14px; background: #fff; color: var(--ink); }
.contact textarea { resize: vertical; }
.contact select:focus, .contact textarea:focus { outline: none; border-color: var(--violet); }
.contact .btn { width: auto; }
.row2c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ok-box { display: flex; gap: 10px; align-items: center; margin: 0; padding: 14px; background: #E8F7EE; color: #0C6B35; border-radius: 14px; font-weight: 700; }
.cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 520px; display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); font-size: 14px; animation: toastIn .45s var(--ease-pop); }
.cookie-bar p { margin: 0; } .cookie-bar a { color: var(--violet); font-weight: 700; }
.data-box { background: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 12px; }
.data-box h2 { font-size: 20px; } .data-box p { margin: 0; color: var(--muted); }
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-danger { background: #fff; color: #C81E4B; border-color: #C81E4B; box-shadow: 0 4px 0 #C81E4B; }
@media (max-width: 960px) { .page-wrap { grid-template-columns: minmax(0, 1fr); } .page-side { position: static; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (max-width: 760px) { .row2c { grid-template-columns: 1fr; } .cookie-bar { left: 8px; right: 8px; bottom: 96px; flex-direction: column; align-items: stretch; } }

/* ---------- Abertura dos jogos ---------- */
.frame iframe.loading { opacity: 0; }
.frame iframe { transition: opacity .35s ease; }
.splash { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--ink); color: #fff; overflow: hidden; transition: opacity .4s ease, transform .4s ease; }
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash-glow { position: absolute; width: 140%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 70%, transparent) 0, transparent 55%); animation: glow 2.4s ease-in-out infinite alternate; }
.splash-mark { position: relative; display: flex; align-items: center; gap: 8px; }
.splash-pop { display: block; animation: drop .7s var(--ease-pop) both; }
.splash-mascot { display: block; width: clamp(84px, 13vw, 132px); height: auto; transform-origin: 50% 100%; animation: hop .9s ease-in-out .7s infinite; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .35)); }
.splash-wm { display: block; height: clamp(54px, 8vw, 84px); width: auto; animation: wmIn .6s var(--ease-pop) .35s both; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-18px) scale(.95, 1.06) rotate(-4deg); } 70% { transform: translateY(0) scale(1.06, .94); } 85% { transform: scale(.98, 1.02) rotate(2deg); } }
@keyframes wmIn { from { transform: translateX(-40px) scale(.5) rotate(-8deg); opacity: 0; } 70% { transform: translateX(4px) scale(1.05) rotate(2deg); opacity: 1; } }
.splash-word { display: flex; font: 800 clamp(48px, 7vw, 80px)/1 var(--display); letter-spacing: -.05em; }
.splash-word b { display: inline-block; animation: letter .5s var(--ease-pop) both; animation-delay: calc(.35s + var(--k) * 70ms); }
.splash-img { position: relative; max-width: min(320px, 60%); max-height: 38%; object-fit: contain; animation: drop .7s var(--ease-pop) both; }
.splash-bar { position: relative; width: min(260px, 60%); height: 10px; border-radius: 99px; background: rgb(255 255 255 / .15); overflow: hidden; }
.splash-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--lime), var(--cyan)); animation: load 1.1s ease-in-out infinite; }
.splash-txt { position: relative; margin: 0; font-weight: 700; color: #cfc6ec; font-size: 15px; animation: fadeup .5s ease .8s both; }
@keyframes drop { from { transform: translateY(-60px) scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: translateY(6px) scale(1.08) rotate(4deg); opacity: 1; } }
@keyframes letter { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes look { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-70%, 10%); } 60% { transform: translate(-10%, 70%); } }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes glow { to { transform: scale(1.15); opacity: .7; } }
@keyframes fadeup { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Coleções ---------- */
.col-row { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 6px 14px 2px; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); margin-bottom: 28px; }
.col-card { --c: var(--violet); display: grid; gap: 0; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 5px 0 var(--ink); scroll-snap-align: start; transition: transform .25s var(--ease-pop), box-shadow .25s; }
.col-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 9px 0 var(--ink); }
.col-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--c); padding: 3px; aspect-ratio: 1.25; }
.col-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--soft); min-height: 0; }
.col-cover.n1 { grid-template-columns: 1fr; } .col-cover.n1 img { grid-row: span 2; }
.col-cover.n2 img { grid-row: span 2; }
.col-cover.n3 img:first-child { grid-row: span 2; }
.col-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px 14px; border-top: 2px solid var(--ink); }
.col-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; border: 2px solid var(--ink); }
.col-txt strong { font: 800 17px/1.15 var(--display); letter-spacing: -.01em; }
.col-txt small { font-size: 13px; font-weight: 700; color: var(--muted); }
.col-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.col-chip { --c: var(--violet); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .2s var(--ease-pop); }
.col-chip:hover { transform: translateY(-2px); }
.col-chip svg { width: 28px; height: 28px; padding: 5px; border-radius: 99px; background: var(--c); color: #fff; }
.col-chip small { font-weight: 700; color: var(--muted); }
.search-cols { margin: -4px 0 18px; }
/* Faixa de aviso do painel (v1.110.0) */
.site-notice { --nc: var(--lime); --nt: var(--ink); display: flex; align-items: center; gap: 10px; max-width: 1600px; margin: calc(10px + env(safe-area-inset-top, 0px) * 1.3) auto 0; padding: 10px 12px 10px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--nc); color: var(--nt); box-shadow: 0 4px 0 var(--ink); font-weight: 700; animation: snIn .35s var(--ease-pop); }
.site-notice p { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.site-notice .sn-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--nc); }
.site-notice .sn-btn { flex: none; padding: 8px 14px; font-size: 14px; background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.site-notice .sn-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--nt); cursor: pointer; opacity: .7; }
.site-notice .sn-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
.site-notice.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.sn-info { --nc: var(--violet); --nt: #fff; } .sn-info .sn-ic { background: #fff; color: var(--violet); }
.sn-alerta { --nc: var(--pink); --nt: #fff; } .sn-alerta .sn-ic { background: #fff; color: var(--pink); }
.sn-festa { --nt: #fff; background: linear-gradient(110deg, var(--violet), var(--pink) 60%, #FFB800); } .sn-festa .sn-ic { background: #fff; color: var(--violet); }
.sn-festa .sn-btn, .sn-info .sn-btn, .sn-alerta .sn-btn { background: var(--lime); color: var(--ink); }
@keyframes snIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 560px) { .site-notice { margin-left: 0; margin-right: 0; border-radius: 14px; flex-wrap: wrap; position: relative; padding-right: 40px; } .site-notice p { flex-basis: calc(100% - 44px); } .site-notice .sn-btn { flex: 1 1 100%; text-align: center; justify-content: center; } .site-notice .sn-x { position: absolute; top: 8px; right: 6px; } }
@media (prefers-reduced-motion: reduce) { .site-notice { animation: none; } }
/* Filtros da busca (v1.109.0): Tudo / Só no celular / Zovy Originals / categorias com a contagem */
.sf { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
.sf-chip { --c: var(--violet); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .2s var(--ease-pop), background .15s; }
.sf-chip svg { color: var(--c); }
.sf-chip small { font-weight: 800; font-size: 12px; color: var(--muted); }
.sf-chip:hover { transform: translateY(-2px); }
.sf-chip.on { background: var(--ink); color: #fff; }
.sf-chip.on svg { color: var(--lime); }
.sf-chip.on small { color: #cfc6ff; }
.sf-orig { --c: #7C4DFF; }
.sf-cat.on { background: var(--c); border-color: var(--ink); color: #fff; }
.sf-cat.on svg { color: #fff; }
.sf-empty { background: #fff; border: 2px dashed var(--soft); border-radius: 18px; padding: 18px; margin-bottom: 18px; font-weight: 700; color: var(--muted); }
.sf-empty a { color: var(--violet); }
.dym a { color: var(--violet); text-decoration: underline; }
@media (max-width: 560px) { .sf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .sf::-webkit-scrollbar { display: none; } .sf-chip { white-space: nowrap; flex: 0 0 auto; } }
@media (max-width: 640px) { .col-row { grid-auto-columns: 180px; } .col-txt strong { font-size: 15px; } }

/* ---------- Jogos parecidos ---------- */
.sim-hero { flex-wrap: wrap; }
.sim-orig img { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: block; transform: rotate(-4deg); transition: transform .25s var(--ease-pop); }
.sim-orig:hover img { transform: rotate(2deg) scale(1.05); }
.sim-hero > div { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.sim-play { position: relative; z-index: 1; }
.similar-link { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--soft); color: var(--ink); font-weight: 800; text-decoration: none; transition: background .15s; }
.similar-link:hover { background: var(--lime); }
.rail h2 span b { color: var(--violet); }

/* ---------- Novidades da semana ---------- */
.wk-hero { align-items: flex-start; }
.wk-hero > div { position: relative; z-index: 1; flex: 1; min-width: 0; }
.wk-kicker { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--lime); padding: 4px 10px; border-radius: 99px; margin-bottom: 6px; }
.wk-date { font: 800 18px/1.2 var(--display); color: var(--ink) !important; margin: 2px 0 6px !important; }
.wk-share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pager { text-align: center; margin: -8px 0 28px; }

/* ---------- Coleção da época ---------- */
.col-card { position: relative; }
.col-special { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); z-index: 1; }
.season { --c: var(--pink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: center; margin-bottom: 30px; padding: 22px; border-radius: 28px; background: var(--c); color: #fff; text-decoration: none; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; position: relative; transition: transform .25s var(--ease-pop); }
.season:hover { transform: translateY(-3px) rotate(-.4deg); }
.season::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgb(255 255 255 / .28), transparent 45%); pointer-events: none; }
.season-txt { position: relative; display: grid; gap: 8px; justify-items: start; }
.season-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--lime); padding: 5px 11px; border-radius: 99px; }
.season strong { font: 800 clamp(26px, 3.4vw, 40px)/1.05 var(--display); letter-spacing: -.03em; text-shadow: 0 3px 0 rgb(0 0 0 / .2); }
.season small { font-weight: 700; font-size: 15px; opacity: .95; }
.season .btn { margin-top: 6px; }
.season-thumbs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.season-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 2px solid var(--ink); background: var(--soft); transform: rotate(calc((var(--i) - 3.5) * 1.2deg)); animation: pop .5s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms); }
@media (max-width: 720px) { .season { grid-template-columns: 1fr; } .season-thumbs { grid-template-columns: repeat(4, 1fr); } .season-thumbs img:nth-child(n+5) { display: none; } }

/* ---------- Listas dos jogadores ---------- */
.toast a { color: var(--lime); text-decoration: underline; margin-left: 4px; }
.card-box { background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: 18px; box-shadow: 0 5px 0 var(--ink); }
.pe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 30px; }
.pe-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-bottom: 14px; }
.pe-fields label { display: grid; gap: 4px; font-weight: 800; font-size: 13px; }
.pe-fields input, .pe-search input { width: 100%; font: 600 16px var(--ui); padding: 11px 13px; border: 2px solid var(--soft); border-radius: 14px; background: #faf8ff; color: var(--ink); }
.pe-fields input:focus, .pe-search input:focus { outline: none; border-color: var(--violet); }
.pe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pe-list li { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 16px; background: var(--bg); animation: pop .3s var(--ease-pop); }
.pe-n { font: 800 22px var(--display); text-align: center; color: var(--violet); }
.pe-list li:nth-child(1) .pe-n { color: #E0A800; } .pe-list li:nth-child(2) .pe-n { color: #8A8FA3; } .pe-list li:nth-child(3) .pe-n { color: #B5651D; }
.pe-list img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.pe-list span { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-list button { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--soft); background: #fff; cursor: pointer; font-weight: 800; }
.pe-list button:disabled { opacity: .35; cursor: default; }
.pe-list button[data-rm]:hover { border-color: #C81E4B; color: #C81E4B; }
.pe-empty { color: var(--muted); font-weight: 600; text-align: center; padding: 22px 10px; border: 2px dashed var(--soft); border-radius: 16px; }
.pe-empty svg { vertical-align: -3px; }
.pe-err { color: #C81E4B; font-weight: 800; margin: 10px 0 0; }
.pe-save { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pe-save small { color: var(--muted); font-weight: 800; }
.pe-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pe-tabs button { flex: 1; padding: 9px 10px; border-radius: 12px; border: 2px solid transparent; background: var(--bg); font: 800 14px var(--ui); color: var(--ink); cursor: pointer; }
.pe-tabs button.on { background: var(--ink); color: #fff; }
.pe-search { margin-bottom: 10px; }
.pe-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 520px; overflow: auto; padding: 2px; }
.pe-g { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: var(--soft); }
.pe-g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-g span { position: absolute; inset: auto 0 0; font-size: 11px; font-weight: 800; color: #fff; padding: 14px 6px 5px; text-align: left; background: linear-gradient(transparent, rgb(0 0 0 / .75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-g i { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 18px/26px var(--ui); font-style: normal; border: 2px solid var(--ink); }
.pe-g.on { outline: 3px solid var(--violet); outline-offset: -3px; } .pe-g.on i { background: var(--violet); color: #fff; } .pe-g.on i::before { content: "✓"; font-size: 14px; } .pe-g.on i { font-size: 0; }
.pe-hint { grid-column: 1 / -1; color: var(--muted); font-weight: 600; text-align: center; padding: 18px 8px; }
.pe-mine { margin-top: 14px; border-top: 2px solid var(--soft); padding-top: 10px; } .pe-mine h3 { font-size: 14px; margin: 0 0 6px; }
.pe-mine a { display: inline-block; margin: 0 8px 6px 0; font-weight: 800; color: var(--violet); }
.pl-new { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 16px; border-radius: 24px; background: var(--lime); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink); animation: pop .5s var(--ease-pop); }
.pl-new > div:not(.pl-share) { flex: 1; min-width: 200px; } .pl-new h2 { margin: 0; font-size: 24px; } .pl-new p { margin: 2px 0 0; font-weight: 600; }
.pl-share { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-hero > div { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pl-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.pl-list li { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px 12px 10px; background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); animation: pop .45s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms); }
.pl-n { font: 800 44px/1 var(--display); text-align: center; color: var(--violet); letter-spacing: -.04em; }
.pl-list li:nth-child(1) { background: #FFF6CC; } .pl-list li:nth-child(1) .pl-n { color: #E0A800; font-size: 54px; }
.pl-list li:nth-child(2) .pl-n { color: #8A8FA3; } .pl-list li:nth-child(3) .pl-n { color: #B5651D; }
.pl-thumb img { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; display: block; border: 2px solid var(--ink); }
.pl-name { font: 800 clamp(17px, 2vw, 22px)/1.2 var(--display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pl-name:hover { color: var(--violet); }
.pl-cta { text-align: center; padding: 26px 18px; margin-bottom: 14px; border-radius: 26px; background: var(--ink); color: #fff; }
.pl-cta strong { display: block; font: 800 28px var(--display); } .pl-cta p { margin: 4px 0 14px; opacity: .85; }
.pl-report { text-align: center; font-size: 13px; margin-bottom: 30px; } .pl-report a { color: var(--muted); }
@media (max-width: 860px) { .pe { grid-template-columns: 1fr; } .pe-fields { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pl-list li { grid-template-columns: 40px 64px minmax(0, 1fr); gap: 10px; }
  .pl-n { font-size: 30px; } .pl-list li:nth-child(1) .pl-n { font-size: 36px; }
  .pl-thumb img { width: 64px; height: 64px; border-radius: 14px; }
  .pl-play { grid-column: 1 / -1; justify-content: center; }
  .pe-list li { grid-template-columns: 26px 44px minmax(0, 1fr) auto auto auto; gap: 6px; } .pe-list img { width: 44px; height: 44px; }
}

/* ---------- Proteção leve do logo e mascote ---------- */
[data-protect], .blob, .brand img, .splash img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Tela cheia com a barra do Zovy ---------- */
.fsbar { display: none; }
.frame.is-fs, .frame.pseudo-fs { background: #000; }
.frame.pseudo-fs { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; max-height: none; min-height: 0; aspect-ratio: auto; margin: 0; border-radius: 0; }
body.fs-lock { overflow: hidden; }
.frame.is-fs .fsbar, .frame.pseudo-fs .fsbar {
  /* barra embaixo: longe da hora/notch do celular e perto do dedo; respeita a barrinha de gestos do iPhone */
  display: flex; position: absolute; top: auto; bottom: 0; left: 0; right: 0; z-index: 6; height: calc(48px + env(safe-area-inset-bottom, 0px));
  align-items: center; gap: 12px; padding: 0 max(14px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(14px, env(safe-area-inset-left, 0px));
  background: var(--ink); color: #fff; border-top: 2px solid rgb(255 255 255 / .08);
}
.frame.is-fs iframe, .frame.pseudo-fs iframe, .frame.is-fs .splash, .frame.pseudo-fs .splash { top: env(safe-area-inset-top, 0px); bottom: auto; height: calc(100% - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.fs-logo { height: 28px; width: auto; flex: none; }
.fs-sep { width: 2px; height: 22px; border-radius: 2px; background: rgb(255 255 255 / .2); flex: none; }
.fs-title { font: 800 16px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fsbar .rt { flex: none; }
.fs-exit { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--lime); color: var(--ink); font: 800 14px var(--ui); cursor: pointer; transition: transform .15s; }
.fs-exit:hover { transform: translateY(-1px); }
.fs-exit:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 560px) { .fs-sep { display: none; } .fs-logo { height: 22px; } .fs-title { font-size: 15px; } .fs-exit span { display: none; } .fs-exit { padding: 7px; } .fsbar { gap: 8px; } }

/* ---------- Folha de compartilhar ---------- */
.share-sheet p { margin-bottom: 12px; font-weight: 600; }
.ss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ss { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 12px; background: var(--bg); transition: transform .15s var(--ease-pop); }
.ss:hover { transform: translateY(-2px); }
.ss b { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 20px var(--display); border: 2px solid var(--ink); }
.ss-wa b { background: #25D366; } .ss-tg b { background: #2AABEE; } .ss-fb b { background: #1877F2; } .ss-x b { background: #000; }
.ss-copy { display: flex; gap: 8px; }
.ss-copy input { flex: 1; min-width: 0; font: 600 16px var(--ui); padding: 10px 12px; border: 2px solid var(--soft); border-radius: 14px; background: #faf8ff; color: var(--ink); }
.ss-copy .btn { flex: none; width: auto; }
.ss-more { width: 100%; justify-content: center; margin-top: 10px; }
@media (max-width: 560px) {
  .share-sheet[open] { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 26px 26px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); animation: sheetUp .3s ease-out; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }

/* ---------- Enfeites das coleções de época ---------- */
.season-txt, .season-thumbs { z-index: 1; }
.deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; container-type: size; }
.deco > span { position: absolute; line-height: 1; }
.hero-list.has-deco > *:not(.deco) { position: relative; z-index: 1; }
.hero-list > .deco { z-index: 0; }
/* caindo: neve, confete, lápis */
.d-fall { top: -34px; left: var(--x); font-size: var(--z); color: #fff; opacity: .92; text-shadow: 0 0 6px rgb(255 255 255 / .55); animation: dFall var(--dur) linear var(--d) infinite; }
.d-conf { top: -16px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--rot)); animation: dFall var(--dur) linear var(--d) infinite; }
@keyframes dFall { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--drift), calc(100cqh + 70px)) rotate(240deg); } }
/* subindo: corações, balões */
.d-rise { bottom: -44px; left: var(--x); font-size: var(--z); animation: dRise var(--dur) ease-in var(--d) infinite; }
@keyframes dRise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(18px, calc(-50cqh - 22px)); } 90% { opacity: 1; } 100% { transform: translate(-10px, calc(-100cqh - 60px)); opacity: 0; } }
/* aranha descendo no fio e balançando */
.d-spider { top: 0; left: var(--x); display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: dSwing 3.4s ease-in-out var(--d) infinite; }
.d-spider i { width: 2px; height: var(--len); background: rgb(255 255 255 / .85); animation: dThread 4.2s ease-in-out var(--d) infinite alternate; }
.d-spider b { font-size: 42px; margin-top: -4px; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .35)); }
@keyframes dThread { from { height: calc(var(--len) * .35); } to { height: var(--len); } }
@keyframes dSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
/* morcegos atravessando */
.d-fly { left: -44px; top: var(--y); font-size: var(--z); animation: dFly var(--dur) linear var(--d) infinite; }
@keyframes dFly { 0% { transform: translate(0, 0) scale(1, 1); } 12% { transform: translate(calc(12cqw + 6px), -16px) scale(1, .7); } 25% { transform: translate(calc(25cqw + 11px), 4px) scale(1, 1); } 37% { transform: translate(calc(37cqw + 16px), -14px) scale(1, .7); } 50% { transform: translate(calc(50cqw + 22px), 8px) scale(1, 1); } 62% { transform: translate(calc(62cqw + 27px), -12px) scale(1, .7); } 75% { transform: translate(calc(75cqw + 33px), 6px) scale(1, 1); } 87% { transform: translate(calc(87cqw + 38px), -10px) scale(1, .7); } 100% { transform: translate(calc(100cqw + 90px), 0) scale(1, 1); } }
/* boiando: abóbora, árvore, presente */
.d-bob { left: var(--x); top: var(--y); font-size: var(--z); filter: drop-shadow(0 4px 0 rgb(0 0 0 / .18)); animation: dBob 2.6s ease-in-out var(--d) infinite; }
@keyframes dBob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
.d-ghost { left: var(--x); top: var(--y); font-size: var(--z); animation: dGhost 5.5s ease-in-out var(--d) infinite; }
@keyframes dGhost { 0%, 100% { transform: translate(0, 0); opacity: .95; } 50% { transform: translate(22px, -12px); opacity: .45; } }
.d-web { position: absolute; top: 0; left: 0; width: 120px; height: 120px; color: rgb(255 255 255 / .5); }
/* Papai Noel espiando de baixo */
.d-peek { left: var(--x); bottom: -6px; font-size: var(--z); animation: dPeek 7s ease-in-out infinite; }
@keyframes dPeek { 0%, 18%, 100% { transform: translateY(85%); } 30%, 62% { transform: translateY(0) rotate(-6deg); } 46% { transform: translateY(0) rotate(6deg); } 74% { transform: translateY(85%); } }
/* coelho pulando */
.d-hop { left: var(--x); bottom: 6%; font-size: var(--z); transform-origin: 50% 100%; animation: dHop 1.5s ease-in-out infinite; }
@keyframes dHop { 0%, 100% { transform: translateY(0) scale(1.08, .92); } 40% { transform: translateY(-28px) scale(.95, 1.06); } 70% { transform: translateY(0) scale(1.06, .94); } }
/* pisca-pisca e bandeirinhas */
.d-lights, .d-flags { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; justify-content: space-around; background: linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / .35)) 0 5px / 100% 2px no-repeat; }
.d-lights i { width: 11px; height: 15px; margin-top: 7px; border-radius: 50% 50% 45% 45%; background: #FFE14D; box-shadow: 0 0 10px 2px currentColor; color: #FFE14D; animation: dBlink 1.2s steps(2, jump-none) infinite; }
.d-lights i:nth-child(4n+2) { background: #FF4F5E; color: #FF4F5E; animation-delay: -.6s; } .d-lights i:nth-child(4n+3) { background: #3FE07A; color: #3FE07A; } .d-lights i:nth-child(4n) { background: #2EC5FF; color: #2EC5FF; animation-delay: -.6s; }
@keyframes dBlink { 0% { opacity: 1; } 100% { opacity: .3; box-shadow: none; } }
.d-flags i { width: 0; height: 0; margin-top: 6px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid #FFE14D; transform-origin: top; animation: dFlag 2.4s ease-in-out infinite; }
.d-flags i:nth-child(4n+2) { border-top-color: #FF4FA3; animation-delay: -.5s; } .d-flags i:nth-child(4n+3) { border-top-color: #2EC5FF; animation-delay: -1s; } .d-flags i:nth-child(4n) { border-top-color: #C6F432; animation-delay: -1.5s; }
@keyframes dFlag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
/* fogos de ano novo */
.d-burst { left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; color: var(--c); background: currentColor; animation: dBurst 2.6s ease-out var(--d) infinite;
  box-shadow: 34px 0 currentColor, 29px 17px currentColor, 17px 29px currentColor, 0 34px currentColor, -17px 29px currentColor, -29px 17px currentColor, -34px 0 currentColor, -29px -17px currentColor, -17px -29px currentColor, 0 -34px currentColor, 17px -29px currentColor, 29px -17px currentColor; }
@keyframes dBurst { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 70% { transform: scale(1.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.d-twinkle { left: var(--x); top: var(--y); font-size: var(--z); animation: dTw 2.4s ease-in-out var(--d) infinite; }
@keyframes dTw { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.deco-compact .d-fall, .deco-compact .d-rise { opacity: .75; }
.deco-compact .d-fall { color: #8ECBFF; text-shadow: none; }
.deco-compact .d-spider i { background: rgb(30 19 56 / .5); }
.deco-compact .d-spider { left: 78% !important; }
.deco-compact .d-web { color: rgb(30 19 56 / .18); }
@media (max-width: 720px) {
  /* celular: texto ocupa a largura toda, então os enfeites grandes vão para a direita e ficam menores */
  .d-web, .d-ghost, .deco > .d-bob ~ .d-bob, .d-peek ~ .d-bob { display: none; }
  .d-spider { left: 86% !important; } .d-spider + .d-spider { display: none; } .d-spider b { font-size: 30px; }
  .deco > .d-bob, .d-hop, .d-peek { left: 76% !important; font-size: calc(var(--z) * .7); }
  .deco > .d-bob { top: 30% !important; }
  .d-fly { font-size: calc(var(--z) * .7); }
}
@media (prefers-reduced-motion: reduce) { .deco * { animation: none !important; } .d-fall, .d-conf, .d-rise, .d-fly { display: none; } }

/* ---------- Todos os jogos / carregar mais ---------- */
.chip-all { background: var(--ink); color: #fff; }
.chip-all svg { background: var(--lime); color: var(--ink); }
.more-box { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 30px; }
.loader[hidden] { display: none; }
@media (max-width: 900px) { .dock-nav .desk-only { display: none; } }

/* ---------- Texto automático das categorias e coleções (SEO) ---------- */
.seo-text { max-width: 900px; margin: 10px auto 34px; background: #fff; border-radius: 24px; padding: clamp(18px, 3vw, 30px); color: #3D3557; line-height: 1.65; }
.seo-text h2 { font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); margin-bottom: 10px; }
.seo-text h3 { font-size: 18px; color: var(--ink); margin: 20px 0 8px; }
.seo-text p { margin: 0 0 12px; }
.seo-text a { color: var(--violet); font-weight: 700; }
.seo-text b { color: var(--ink); }
.seo-faq details { border-top: 2px solid var(--soft); padding: 10px 0; }
.seo-faq summary { cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: "+"; font: 800 20px/1 var(--display); color: var(--violet); transition: transform .2s; }
.seo-faq details[open] summary::after { transform: rotate(45deg); }
.seo-faq details p { margin: 8px 0 0; }

/* ---------- Espaços de anúncio: reserva a altura para a página não "pular" quando o anúncio carrega ---------- */
.ad-header, .ad-category, .ad-footer, .ad-grid, .ad-game_top { min-height: 100px; }
.ad-home_mid, .ad-game_below { min-height: 110px; }
.info .ad-side { align-self: start; position: sticky; top: 96px; min-height: 260px; }
@media (max-width: 720px) {
  .ad-header, .ad-category, .ad-footer, .ad-game_top { min-height: 60px; }
  .ad-home_mid, .ad-grid, .ad-game_below { min-height: 260px; }
}
/* anúncio da grade: um bloco quadrado de 3×3 capas, com os jogos encaixados em volta (estilo Poki) */
.mosaic > .ad-grid { grid-column: -4 / -1; grid-row: span 3; aspect-ratio: 1; align-self: start; min-height: 0; margin: 0; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--soft); border-radius: 24px; }
.mosaic > .ad-grid > :not(.ad-label) { max-width: 100%; max-height: calc(100% - 18px); }

/* ---------- Rodapé ---------- */
.foot { max-width: 1600px; margin: 48px auto 0; background: var(--ink); color: #d8d0f0; border-radius: 30px 30px 0 0; padding: 40px clamp(20px, 4vw, 48px) 18px; position: relative; overflow: hidden; }
.foot::before { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 42%; background: var(--violet); opacity: .25; transform: rotate(18deg); pointer-events: none; }
.foot-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.foot-logo img { height: 44px; width: auto; display: block; }
.foot-brand p { margin: 14px 0 16px; max-width: 34ch; line-height: 1.55; font-weight: 600; color: #cfc6ec; }
.foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.foot .soc { padding: 7px 14px; border-radius: 99px; background: rgb(255 255 255 / .08); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; transition: background .15s, transform .15s; }
.foot .soc:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.foot-col h2 { font: 800 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); margin: 0 0 4px; }
.foot-col a, .foot .fam-link { color: #d8d0f0; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot .fam-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 12px; background: none; font: 700 14px var(--ui); color: #fff; cursor: pointer; }
.foot .fam-link:hover { background: rgb(255 255 255 / .08); }
.foot-bottom { position: relative; display: flex; align-items: center; gap: 16px; padding-top: 16px; flex-wrap: wrap; }
.foot-copy { flex: 1; min-width: 240px; margin: 0; font-size: 12px; color: #9d92c4; }
.foot-made { font-size: 13px; font-weight: 700; color: #cfc6ec; }
.foot-up { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--lime); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease-pop); }
.foot-up svg { transform: rotate(180deg); }
.foot-up:hover { transform: translateY(-3px); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; gap: 24px; } .foot { border-radius: 26px 26px 0 0; } }
@media (max-width: 720px) { .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; } }

/* ---------- Guia para pais ---------- */
.prose-guide { max-width: 980px; }
.guide-hero { display: flex; align-items: center; gap: 24px; padding: 22px; margin: 6px 0 24px; border-radius: 24px; background: linear-gradient(135deg, #F3EEFF, #E7FBFF); }
.guide-mascot { width: 130px; height: auto; flex: none; animation: guideHop 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgb(30 19 56 / .2)); }
@keyframes guideHop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.guide-hero .lead { margin: 0 0 14px; }
.guide-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.prose .guide-cta .btn { text-decoration: none; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 10px; }
.guide-card { --c: var(--violet); position: relative; padding: 20px 20px 16px; border-radius: 22px; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 25%, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 25%, #fff); }
.guide-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 80%, var(--ink)); margin-bottom: 8px; }
.prose .guide-card h2 { font-size: 19px; margin: 0 0 6px; }
.prose .guide-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.prose .guide-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.guide-ratings { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.guide-mock { display: grid; gap: 8px; margin: 6px 0 4px; padding: 12px; border-radius: 16px; background: var(--bg); }
.gm-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); }
.gm-bar b { width: 46px; height: 14px; border-radius: 6px; background: var(--violet); } .gm-bar i { flex: 1; height: 12px; border-radius: 6px; background: var(--soft); }
.gm-fam { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: var(--lime); border: 2px solid var(--ink); animation: gmPulse 1.8s ease-in-out infinite; }
@keyframes gmPulse { 50% { transform: scale(1.08); } }
.gm-on { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 8px 10px; border-radius: 12px; background: #E9FFD0; color: #1E4D0F; }
.guide-tips { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-tips li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--bg); }
.guide-tips li svg { flex: none; color: var(--violet); margin-top: 2px; }
.prose .guide-tips span { line-height: 1.5; font-size: 15px; }
.guide-help { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: #fff; }
.guide-help svg { flex: none; color: var(--lime); margin-top: 3px; }
.prose .guide-help p { margin: 0; color: #e8e2fa; } .prose .guide-help a { color: var(--lime); }
@media (max-width: 720px) { .guide-hero { flex-direction: column; text-align: center; } .guide-cta { justify-content: center; } .guide-grid, .guide-tips { grid-template-columns: 1fr; } .guide-mascot { width: 100px; } }
@media (prefers-reduced-motion: reduce) { .guide-mascot, .gm-fam { animation: none; } }
.page-wrap:has(.prose-guide) { grid-template-columns: minmax(0, 980px) 240px; }
@media (max-width: 1100px) { .page-wrap:has(.prose-guide) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- "Não carregou?" ---------- */
.report-btn { border: 0; background: none; color: var(--muted); font: 600 13px var(--ui); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.report-btn:hover { color: var(--ink); background: var(--bg); }
.report-btn:disabled { cursor: default; color: #16a34a; background: none; }
.modal-ic-warn { background: #FFE14D; }
.rep-opts { display: grid; gap: 8px; margin-bottom: 14px; }
.modal label.rep-opt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border: 2px solid var(--soft); border-radius: 14px; font-weight: 700; cursor: pointer; background: #faf8ff; }
.modal label.rep-opt:has(input:checked) { border-color: var(--violet); background: #F0EBFF; }
.rep-opt input { width: 18px; height: 18px; accent-color: var(--violet); margin: 0; flex: none; }
#reportModal .fine { margin-top: 12px; font-size: 13px; }

/* ---------- App no celular (PWA) ---------- */
.is-app [data-app-link] { display: none !important; }
.foot-app { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 800 !important; }
.pwa-bar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); animation: pwaIn .45s var(--ease-pop, ease) both; max-width: 520px; margin: 0 auto; }
.pwa-bar[hidden] { display: none; }
.pwa-bar img { border-radius: 12px; flex: none; }
.pwa-bar div { flex: 1; min-width: 0; line-height: 1.25; }
.pwa-bar b { display: block; font: 800 15px var(--display); }
.pwa-bar span { font-size: 13px; color: var(--muted); }
.pwa-bar .btn { padding: 9px 14px; flex: none; }
.pwa-x { border: 0; background: var(--bg); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; color: var(--ink); }
@keyframes pwaIn { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 761px) { .pwa-bar { bottom: 20px; } }
.ios-sheet { text-align: center; }
.ios-sheet .ios-ic { border-radius: 16px; border: 2px solid var(--ink); margin: 0 auto 10px; display: block; }
.ios-steps { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 10px; text-align: left; }
.ios-steps li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg); border-radius: 16px; font-size: 15px; }
.ios-steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font: 800 15px var(--display); flex: none; }
.ios-share { display: inline-block; width: 18px; height: 20px; vertical-align: -4px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='none' stroke='%23007AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V2M7 7l5-5 5 5'/%3E%3Cpath d='M8 10H5v14h14V10h-3'/%3E%3C/svg%3E"); }
.ios-add { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; font: 800 14px/1 var(--ui); vertical-align: -3px; }
.ios-arrow { display: block; margin: 6px auto 0; width: max-content; color: var(--violet); animation: iosBounce 1.2s ease-in-out infinite; }
@keyframes iosBounce { 50% { transform: translateY(6px); } }
@media (max-width: 760px) { .ios-sheet { margin: auto auto 0; border-radius: 28px 28px 0 0; width: 100vw; max-width: 100vw; box-shadow: none; border-bottom: 0; } }

/* página /app */
.app-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 32px; padding: clamp(22px, 4vw, 44px); box-shadow: 0 8px 0 var(--ink); margin: 8px 0 24px; overflow: hidden; }
.app-kicker { display: inline-flex; align-items: center; gap: 6px; background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; padding: 5px 12px; font-weight: 800; font-size: 13px; }
.app-copy h1 { font-size: clamp(32px, 5vw, 54px); margin: 14px 0 10px; }
.app-copy > p { font-size: 17px; color: var(--muted); max-width: 46ch; margin: 0 0 20px; }
.btn-big { font-size: 18px; padding: 15px 26px; }
.app-state { margin: 10px 0 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.app-perks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.app-perks li { display: flex; gap: 10px; align-items: center; }
.app-perks svg { color: var(--violet); flex: none; }
.app-phone { display: grid; place-items: center; }
.phone { width: 230px; aspect-ratio: 9 / 18.5; border: 4px solid var(--ink); border-radius: 38px; background: var(--ink); padding: 8px; box-shadow: 10px 12px 0 var(--pink); transform: rotate(4deg); }
.phone-screen { position: relative; height: 100%; border-radius: 30px; background: linear-gradient(160deg, #A78BFA, #7C4DFF 55%, #FF4FA3); padding: 26px 16px; overflow: hidden; }
.ph-status { display: flex; justify-content: space-between; color: #fff; font: 700 12px var(--ui); margin: -14px 4px 18px; }
.ph-status i { width: 18px; height: 9px; border: 1.5px solid #fff; border-radius: 3px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
.ph-app { aspect-ratio: 1; border-radius: 12px; background: var(--c); opacity: .85; }
.ph-zovy { opacity: 1; position: relative; background: none; animation: phPop 2.4s var(--ease-pop, ease) infinite; }
.ph-zovy img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 0 0 3px #fff; }
.ph-zovy em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font: 700 10px var(--ui); color: #fff; font-style: normal; margin-top: 3px; white-space: nowrap; }
.ph-tap { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .55); left: 22%; top: 29%; animation: phTap 2.4s ease-out infinite; }
@keyframes phPop { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(.88); } 80% { transform: scale(1.08); } }
@keyframes phTap { 0%, 55% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.app-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.how-card { background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 20px 22px; }
.how-card.on { box-shadow: 0 6px 0 var(--violet); border-color: var(--violet); }
.how-card h2 { font-size: 19px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.how-card ol { padding-left: 20px; margin: 0 0 10px; display: grid; gap: 6px; }
.how-card .fine { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .app-hero { grid-template-columns: 1fr; } .phone { width: 150px; } .app-how { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ph-zovy, .ph-tap, .ios-arrow, .pwa-bar { animation: none; } }

/* página sem internet */
.offline { padding-top: 40px; }
.off-mascot { display: block; margin: 0 auto 14px; filter: grayscale(.4); animation: offFloat 3s ease-in-out infinite; }
@keyframes offFloat { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* ---------- Momento da home ---------- */
.moment { --c: var(--violet); min-height: 318px; }
.moment > .moment-head { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 92px; padding: 16px 22px; margin-bottom: 14px; border-radius: 24px; color: #fff;
  background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #1E1338)); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.moment-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 20%, rgb(255 255 255 / .3), transparent 50%); pointer-events: none; }
.moment-txt { position: relative; z-index: 3; display: grid; gap: 4px; max-width: 70%; }
.moment-txt strong { font: 800 clamp(22px, 3vw, 32px)/1.05 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 0 rgb(0 0 0 / .18); }
.moment-txt small { font-size: 15px; font-weight: 700; opacity: .92; }
.moment.in .moment-head, .moment.in .rail-track { animation: momIn .5s var(--ease-pop, ease) both; }
.moment.in .rail-track { animation-delay: .08s; }
@keyframes momIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.moment-skel { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: var(--gap); overflow: hidden; padding-top: 106px; }
.moment-skel i { aspect-ratio: 1; border-radius: 22px; background: linear-gradient(90deg, #E8E0FF, #F6F2FF, #E8E0FF); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
@media (max-width: 760px) { .moment { min-height: 262px; } .moment-skel { grid-auto-columns: 148px; } .moment-txt { max-width: 78%; } .moment-txt small { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .moment.in .moment-head, .moment.in .rail-track, .moment-skel i { animation: none; } }

/* ---------- Cartões da home: desafio do dia e copa ---------- */
.fun-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 28px; }
.fun-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 24px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-decoration: none; color: var(--ink); transition: transform .2s var(--ease-pop, ease); min-width: 0; }
.fun-card:hover { transform: translateY(-3px) rotate(-.4deg); }
.fun-quiz { background: linear-gradient(120deg, #FFF6D6, #fff 60%); }
.fun-cup { background: linear-gradient(120deg, #EFE8FF, #fff 60%); }
.fun-card > img { width: 84px; height: 84px; border-radius: 16px; border: 2px solid var(--ink); image-rendering: pixelated; flex: none; object-fit: cover; }
.fun-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fun-txt strong { font: 800 19px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fun-txt small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.fun-tag { font-size: 12px; font-weight: 800; color: var(--violet); text-transform: uppercase; letter-spacing: .04em; }
.fun-card .btn { flex: none; padding: 9px 14px; }
.fun-vs { position: relative; display: flex; flex: none; }
.fun-vs img { width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--ink); object-fit: cover; }
.fun-vs img + img { margin-left: -12px; transform: rotate(6deg); }
.fun-vs img:first-child { transform: rotate(-6deg); }
.fun-vs b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #FFE14D; border: 2px solid var(--ink); border-radius: 99px; font: 800 11px var(--display); padding: 2px 6px; }
@media (max-width: 520px) {
  .fun-row { gap: 12px; } .fun-card { gap: 12px; padding: 12px; }
  .fun-card > img { width: 62px; height: 62px; } .fun-vs img { width: 46px; height: 46px; }
  .fun-txt strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; }
  .fun-txt small { display: none; } .fun-tag { font-size: 11px; }
  .fun-card .btn { padding: 10px; } .fun-card .btn > span, .fun-card .btn > :not(svg) { display: none; }
}
.chip-emo { font-size: 18px; line-height: 1; }
.badge.b-champ { background: #FFE14D; color: var(--ink); }
.pill.champ { background: #FFE14D; color: var(--ink); text-decoration: none; font-weight: 800; }

/* ---------- Que jogo é esse? ---------- */
.quiz { max-width: 980px; margin: 8px auto 30px; }
.quiz-head { text-align: center; margin-bottom: 18px; }
.quiz-head h1 { font-size: clamp(34px, 6vw, 58px); margin: 8px 0 6px; }
.quiz-head p { color: var(--muted); margin: 0 auto; max-width: 52ch; }
.quiz-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px; font-weight: 800; font-size: 13px; color: var(--ink); }
.quiz-board { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; background: #fff; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 7px 0 var(--ink); padding: 22px; }
.quiz-pic { position: relative; }
.quiz-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; border: 3px solid var(--ink); image-rendering: pixelated; background: var(--bg); user-select: none; -webkit-user-drag: none; }
.quiz-pic img.reveal { image-rendering: auto; animation: qReveal .6s var(--ease-pop, ease); }
@keyframes qReveal { from { transform: scale(.92) rotate(-2deg); } to { transform: none; } }
.quiz-level { position: absolute; left: 12px; bottom: 12px; background: rgb(30 19 56 / .82); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 99px; }
.quiz-slots { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.quiz-slots li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 2px dashed #D9D0F2; border-radius: 14px; color: var(--muted); font-weight: 700; }
.quiz-slots li b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: 13px; color: var(--ink); flex: none; }
.quiz-slots li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-slots li.bad { border: 2px solid #F43F5E; background: #FFE4E9; color: #9F1239; }
.quiz-slots li.near { border: 2px solid #EAB308; background: #FEF9C3; color: #854D0E; }
.quiz-slots li.ok { border: 2px solid #16A34A; background: #DCFCE7; color: #14532D; }
.quiz-slots li.pass { border: 2px solid #CBD5E1; background: #F1F5F9; }
.quiz-slots li:is(.bad, .near, .ok, .pass) { animation: qIn .35s var(--ease-pop, ease); }
.quiz-slots li.bad b { background: #F43F5E; color: #fff; } .quiz-slots li.near b { background: #EAB308; color: #fff; } .quiz-slots li.ok b { background: #16A34A; color: #fff; }
@keyframes qIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.quiz.shake .quiz-board { animation: qShake .4s; }
@keyframes qShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.quiz-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quiz-hints:empty { display: none; }
.quiz-hints span { background: #EEF2FF; border: 2px solid #C7D2FE; border-radius: 12px; padding: 6px 10px; font-size: 14px; }
.quiz-form { display: flex; gap: 8px; }
.quiz-form[hidden] { display: none; }
.quiz-input { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 16px; padding: 0 12px; background: #fff; }
.quiz-input input { flex: 1; border: 0; outline: 0; font: 700 16px var(--ui); padding: 12px 0; background: none; color: var(--ink); min-width: 0; }
.quiz-list { position: absolute; left: -3px; right: -3px; bottom: calc(100% + 6px); background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); max-height: 300px; overflow: auto; z-index: 20; padding: 6px; }
.quiz-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: 700 15px var(--ui); color: var(--ink); cursor: pointer; }
.quiz-list button:hover, .quiz-list button:focus { background: var(--bg); outline: none; }
.quiz-list p { margin: 8px 12px; color: var(--muted); }
.quiz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.quiz-end { display: grid; grid-template-columns: auto 1fr; gap: 20px; margin-top: 22px; background: #fff; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 7px 0 var(--ink); padding: 22px; scroll-margin-top: 90px; }
.quiz-end[hidden] { display: none; }
.quiz-end > img { width: 160px; height: 160px; border-radius: 22px; border: 3px solid var(--ink); object-fit: cover; }
.quiz-end h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 8px 0 4px; }
.quiz-grid { font-size: 26px; letter-spacing: 2px; margin: 4px 0 12px; }
.quiz-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-next { margin: 12px 0 0; color: var(--muted); font-size: 14px; } .quiz-next b { color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-stats { grid-column: 1 / -1; border-top: 2px dashed #E5DEFA; padding-top: 16px; }
.qs-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-bottom: 14px; }
.qs-nums span { display: grid; font-size: 12px; color: var(--muted); font-weight: 700; } .qs-nums b { font: 800 26px var(--display); color: var(--ink); }
.qs-dist { display: grid; gap: 4px; max-width: 420px; margin: 0 auto; }
.qs-dist div { display: flex; align-items: center; gap: 8px; } .qs-dist em { font-style: normal; font-weight: 800; width: 14px; }
.qs-dist i { display: block; background: #CBD5E1; color: #fff; font-style: normal; font-weight: 800; font-size: 12px; text-align: right; padding: 2px 6px; border-radius: 6px; min-width: 22px; }
.qs-dist i.me { background: #16A34A; }
.qs-today { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0 0; }
@media (max-width: 760px) {
  .quiz-board { grid-template-columns: 1fr; padding: 14px; gap: 14px; border-radius: 24px; }
  .quiz-pic img { max-width: 300px; margin: 0 auto; }
  .quiz-slots { grid-template-columns: 1fr 1fr; gap: 6px; } .quiz-slots li { min-height: 38px; font-size: 13px; padding: 4px 8px; }
  .quiz-end { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px; } .quiz-acts { justify-content: center; }
}

/* ---------- Copa Zovy ---------- */
.cup-hero { display: flex; gap: 22px; align-items: center; background: linear-gradient(120deg, #2B1D5C, #7C4DFF); color: #fff; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 7px 0 var(--ink); padding: 24px 28px; margin: 8px 0 18px; }
.cup-hero h1 { font-size: clamp(34px, 5.5vw, 56px); margin: 8px 0 6px; }
.cup-hero p { margin: 0; opacity: .9; max-width: 60ch; }
.cup-trophy { font-size: clamp(64px, 10vw, 110px); line-height: 1; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .3)); animation: dBob 2.6s ease-in-out infinite; }
.cup-phase { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; background: rgb(255 255 255 / .14); border: 2px solid rgb(255 255 255 / .3); padding: 8px 14px; border-radius: 99px; font-size: 14px; }
.cup-phase > b { color: var(--lime); }
.cup-champ { display: flex; align-items: center; gap: 14px; background: #FFF6D6; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); padding: 12px 16px; margin-bottom: 22px; text-decoration: none; color: var(--ink); }
.cup-champ img { border-radius: 14px; border: 2px solid var(--ink); object-fit: cover; }
.cup-champ > span:nth-child(2) { flex: 1; display: grid; } .cup-champ small { font-weight: 800; color: #A16207; text-transform: uppercase; font-size: 12px; } .cup-champ strong { font: 800 22px var(--display); }
.duels .sec-head { flex-wrap: wrap; }
.duel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; margin-bottom: 30px; }
.duel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; background: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--ink); padding: 12px; }
.duel-vs { align-self: center; background: #FFE14D; border: 2px solid var(--ink); border-radius: 99px; font: 800 14px var(--display); padding: 6px 9px; }
.duel-side { position: relative; display: grid; gap: 8px; justify-items: center; align-content: start; border: 2px solid transparent; background: var(--bg); border-radius: 18px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s, border-color .15s; }
.duel-side:hover { transform: translateY(-2px); border-color: var(--violet); }
.duel-side img { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; border: 2px solid var(--ink); }
.duel-side strong { font: 800 15px/1.2 var(--display); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.duel-bar { position: relative; width: 100%; height: 24px; border-radius: 99px; background: #E8E0FF; overflow: hidden; display: none; }
.duel-bar i { position: absolute; inset: 0 auto 0 0; background: #A78BFA; border-radius: 99px; transition: width .7s var(--ease-pop, ease); }
.duel-bar em { position: relative; font-style: normal; font-weight: 800; font-size: 13px; line-height: 24px; display: block; text-align: center; }
.duel.voted .duel-bar { display: block; }
.duel.voted .duel-side { cursor: default; } .duel.voted .duel-side:hover { transform: none; border-color: transparent; }
.duel-side.picked { border-color: var(--violet) !important; background: #F0EBFF; }
.duel-side.picked .duel-bar i { background: var(--violet); } .duel-side.picked .duel-bar em { color: #fff; }
.duel-side.picked::after { content: "Seu voto"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.bracket-wrap { margin-bottom: 30px; }
.bracket { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.bk-col { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bk-col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.bk-col.now h3 { color: var(--violet); }
.bk-m { background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 4px; display: grid; gap: 3px; }
.bk-col.now .bk-m { border-color: var(--violet); box-shadow: 0 3px 0 var(--violet); }
.bk-g { display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 700; min-width: 0; }
.bk-g img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; }
.bk-g span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-g.win { background: #DCFCE7; } .bk-g.out { opacity: .45; text-decoration: line-through; }
.bk-g.tbd { color: var(--muted); } .bk-g.tbd i { width: 28px; height: 28px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; font-style: normal; flex: none; }
.bk-champ .bk-m { border-color: #EAB308; background: #FFF6D6; }
@media (max-width: 760px) {
  .cup-hero { flex-direction: column; text-align: center; padding: 18px 16px; gap: 6px; } .cup-phase { justify-content: center; } .cup-trophy { font-size: 54px; } .cup-hero p { font-size: 14px; }
  .duel { padding: 8px; gap: 6px; } .duel-side { padding: 6px; } .duel-side strong { font-size: 13px; }
  .bracket { grid-template-columns: repeat(5, 160px); }
}

/* cartão do Termo Relâmpago na home */
.fun-termo { background: linear-gradient(120deg, #1E1A2B, #2B2540 70%); color: #F4F1EA; }
.fun-termo .fun-tag { color: #E8FF3A; } .fun-termo .fun-txt small { color: #B9B3C7; }
.fun-tiles { display: grid; grid-template-columns: repeat(5, 18px); gap: 3px; flex: none; transform: rotate(-4deg); }
.fun-tiles i { width: 18px; height: 22px; display: grid; place-items: center; font: 800 12px var(--display); font-style: normal; border-radius: 5px; background: #3A3644; color: #F4F1EA; }
.fun-tiles i.h { background: #E8FF3A; color: #121016; } .fun-tiles i.n { background: #FF7A3D; color: #121016; }
@media (min-width: 521px) { .fun-tiles { grid-template-columns: repeat(5, 22px); } .fun-tiles i { width: 22px; height: 28px; font-size: 14px; } }

/* ---------- Avatares ---------- */
.ava.ava-svg { background: none; padding: 0; overflow: hidden; border: 2px solid var(--ink); }
.ava.ava-svg svg { width: 100%; height: 100%; display: block; }
.ava-edit { position: relative; display: inline-block; text-decoration: none; color: var(--ink); }
.ava-pen { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; font-size: 12px; font-weight: 800; padding: 2px 9px; white-space: nowrap; box-shadow: 0 2px 0 var(--ink); }
.ava-edit:hover .ava { transform: rotate(-4deg) scale(1.04); transition: transform .2s var(--ease-pop, ease); }
.ave { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; margin: 8px 0 30px; }
.ave-stage { position: sticky; top: 96px; background: #fff; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 7px 0 var(--ink); padding: 24px; text-align: center; }
.ave-prev { width: 220px; height: 220px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; background: #fff; }
.ave-prev img { width: 100%; height: 100%; display: block; }
.ave-prev.pop { animation: avePop .35s var(--ease-pop, ease); } .ave-prev.spin { animation: aveSpin .5s var(--ease-pop, ease); }
@keyframes avePop { 50% { transform: scale(1.06) rotate(-3deg); } }
@keyframes aveSpin { from { transform: rotate(-200deg) scale(.6); } }
.ave-stage h1 { font-size: 28px; margin: 4px 0 6px; } .ave-stage p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.ave-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ave-acts form { margin: 0; }
.ave-back { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); }
.ave-parts { display: grid; gap: 16px; }
.ave-group { background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 16px 18px; }
.ave-group h2 { font-size: 18px; margin: 0 0 10px; }
.ave-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ave-opt { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border: 2px solid var(--soft); border-radius: 16px; background: #faf8ff; cursor: pointer; font: 700 12px var(--ui); color: var(--ink); transition: transform .15s, border-color .15s; }
.ave-opt:hover { transform: translateY(-2px); border-color: var(--violet); }
.ave-opt img { width: 64px; height: 64px; border-radius: 50%; }
.ave-opt.on { border-color: var(--violet); background: #F0EBFF; box-shadow: 0 3px 0 var(--violet); }
.ave-opt.locked { cursor: not-allowed; } .ave-opt.locked img { filter: grayscale(1); opacity: .45; }
.ave-opt em { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 10px; font-weight: 800; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 99px; }
.ave-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ave-sw { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); cursor: pointer; transition: transform .15s; }
.ave-sw:hover { transform: scale(1.1); } .ave-sw.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--violet); }
@media (max-width: 860px) {
  .ave { grid-template-columns: 1fr; }
  .ave-stage { position: sticky; top: 74px; z-index: 5; display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px; text-align: left; padding: 12px 14px; border-radius: 22px; align-items: center; }
  .ave-prev { width: 96px; height: 96px; margin: 0; grid-row: span 3; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .ave-stage h1 { font-size: 19px; margin: 0; } .ave-stage p, .ave-back { display: none; }
  .ave-acts { justify-content: flex-start; } .ave-acts .btn { padding: 8px 12px; font-size: 14px; }
  .ave-opts { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .ave-opt img { width: 52px; height: 52px; }
}

/* ---------- Pop-up de entrar / criar conta ---------- */
.authm { position: fixed; border: 3px solid var(--ink); border-radius: 32px; padding: 54px 28px 24px; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: visible; background: #fff; color: var(--ink); box-shadow: 0 10px 0 var(--ink); }
.authm::backdrop { background: radial-gradient(circle at 50% 30%, rgb(124 77 255 / .55), rgb(30 19 56 / .75)); backdrop-filter: blur(4px); }
.authm[open] { animation: amIn .5s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; }
.authm[open]::backdrop { animation: amFade .3s ease both; }
@keyframes amIn { from { opacity: 0; transform: translateY(40px) scale(.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes amFade { from { opacity: 0; } }
.authm.nope { animation: amNope .45s; }
@keyframes amNope { 20% { transform: translateX(-10px) rotate(-1deg); } 40% { transform: translateX(9px) rotate(1deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.authm-mascot { position: absolute; left: 50%; top: -58px; width: 96px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 5px 0 rgb(30 19 56 / .35)); animation: amPeek 3.2s ease-in-out .4s infinite; pointer-events: none; z-index: 2; }
@keyframes amPeek { 0%, 100% { transform: translateX(-50%) rotate(0); } 15% { transform: translateX(-50%) translateY(-6px) rotate(-8deg); } 30% { transform: translateX(-50%) rotate(6deg); } 45% { transform: translateX(-50%) rotate(0); } }
.authm.done .authm-mascot { animation: amJump .6s var(--ease-pop, ease) 2; }
@keyframes amJump { 50% { transform: translateX(-50%) translateY(-26px) rotate(12deg) scale(1.1); } }
.authm-deco { position: absolute; inset: 0; overflow: hidden; border-radius: 29px; pointer-events: none; }
.authm-deco i { position: absolute; font-style: normal; font-size: 22px; opacity: .16; animation: amFloat 6s ease-in-out infinite; }
.authm-deco i:nth-child(1) { left: 8%; top: 14%; } .authm-deco i:nth-child(2) { right: 9%; top: 10%; animation-delay: -1.5s; }
.authm-deco i:nth-child(3) { right: 6%; bottom: 18%; animation-delay: -3s; } .authm-deco i:nth-child(4) { left: 6%; bottom: 30%; animation-delay: -2s; } .authm-deco i:nth-child(5) { left: 46%; bottom: 4%; animation-delay: -4s; }
@keyframes amFloat { 50% { transform: translateY(-10px) rotate(12deg); } }
.authm-x { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 3; }
.authm-x button { border: 0; background: var(--bg); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: transform .2s; }
.authm-x button:hover { transform: rotate(90deg); }
.authm-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: 99px; padding: 4px; margin-bottom: 18px; }
.authm-tabs button { position: relative; z-index: 1; border: 0; background: none; font: 800 15px var(--ui); color: var(--muted); padding: 10px; border-radius: 99px; cursor: pointer; transition: color .2s; }
.authm-tabs button.on { color: var(--ink); }
.authm-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border: 2px solid var(--ink); border-radius: 99px; box-shadow: 0 3px 0 var(--ink); transition: transform .35s var(--ease-pop, ease); }
.authm[data-mode="reg"] .authm-ink { transform: translateX(100%); }
.authm-panes { position: relative; display: grid; }
.authm-pane { grid-area: 1 / 1; display: grid; gap: 12px; visibility: hidden; opacity: 0; transform: translateX(-30px); transition: opacity .25s, transform .35s var(--ease-pop, ease), visibility 0s .35s; }
.authm-pane[data-apane="reg"] { transform: translateX(30px); }
.authm-pane[data-apane="2fa"] { transform:translateX(30px); }
.authm-pane.on { visibility: visible; opacity: 1; transform: none; transition: opacity .3s .05s, transform .4s var(--ease-pop, ease), visibility 0s; }
.authm h2 { font-size: 25px; margin: 0; text-align: center; }
.authm-sub { margin: -4px 0 4px; color: var(--muted); text-align: center; font-size: 15px; }
.af { display: grid; gap: 5px; font-weight: 800; font-size: 14px; }
.af > span:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.af em { font-style: normal; font-size: 12px; font-weight: 800; } .af em.ok { color: #16A34A; } .af em.no { color: #E11D48; }
.af input { width: 100%; font: 600 16px var(--ui); padding: 12px 14px; border: 2px solid #E5DEFA; border-radius: 14px; background: #faf8ff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.af input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgb(124 77 255 / .15); background: #fff; }
.af small { font-weight: 600; color: var(--muted); font-size: 12px; }
.af.shake { animation: amNope .4s; } .af.shake input { border-color: #F43F5E; }
.af-pw { position: relative; display: block; }
.af-pw input { padding-right: 46px; }
.af-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); cursor: pointer; border-radius: 10px; }
.af-eye.on { color: var(--violet); background: #F0EBFF; }
.af-meter { display: block; height: 5px; border-radius: 99px; background: #EEE9FB; overflow: hidden; margin-top: 2px; }
.af-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: #F43F5E; transition: width .3s, background .3s; }
.af-meter i[data-s="2"] { background: #F59E0B; } .af-meter i[data-s="3"], .af-meter i[data-s="4"] { background: #16A34A; }
.authm-err { margin: 0; background: #FFE4E9; color: #9F1239; border: 2px solid #FDA4AF; border-radius: 12px; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.authm-go { position: relative; width: 100%; justify-content: center; font-size: 17px; padding: 14px; margin-top: 2px; }
.authm-spin { display: none; width: 18px; height: 18px; border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: amSpin .7s linear infinite; }
.busy .authm-go span { opacity: .4; } .busy .authm-spin { display: inline-block; position: absolute; right: 18px; }
@keyframes amSpin { to { transform: rotate(360deg); } }
.authm-alt { text-align: center; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.authm-alt .link { border: 0; background: none; padding: 0; font: 800 14px var(--ui); color: var(--violet); cursor: pointer; text-decoration: underline; }
.authm-alt a { color: var(--muted); }
.authm[data-mode="2fa"] .authm-tabs { display:none; }
.authm-2fa { justify-items:stretch; }
.authm-2fa-mark { width:58px; height:58px; display:grid; place-items:center; justify-self:center; color:var(--ink); background:var(--lime); border:3px solid var(--ink); border-radius:18px; box-shadow:0 4px 0 var(--ink); }
.authm-code { font:800 24px var(--display) !important; letter-spacing:.22em; text-align:center; padding-left:calc(14px + .22em) !important; }
.authm-fine { margin: 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; } .authm-fine a { color: var(--violet); }
.authm-ava { display: flex; gap: 12px; align-items: center; background: linear-gradient(120deg, #F3EEFF, #FFF6D6); border: 2px solid var(--ink); border-radius: 18px; padding: 10px 12px; }
.authm-ava img { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--ink); flex: none; background: #fff; }
.authm-ava img.spin { animation: aveSpin .5s var(--ease-pop, ease); }
.authm-ava div { display: grid; gap: 1px; } .authm-ava b { font: 800 16px var(--display); } .authm-ava small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.authm-ava .link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0 0; font: 800 13px var(--ui); color: var(--violet); cursor: pointer; }
.authm-done { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #fff; border-radius: 29px; animation: amFade .3s both; z-index: 1; }
.authm-done[hidden] { display: none; }
.authm-big { font-size: 64px; animation: amJump .6s var(--ease-pop, ease) infinite; display: inline-block; }
.authm-done p { color: var(--muted); margin: 6px 0 0; }
@media (max-width: 520px) {
  .authm { padding: 48px 18px 18px; border-radius: 28px; margin: auto auto 10px; }
  .authm h2 { font-size: 21px; } .authm-mascot { width: 82px; top: -50px; }
  .authm-pane { gap: 10px; } .af input { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) { .authm[open], .authm-mascot, .authm-deco i, .authm-big, .authm.done .authm-mascot { animation: none; } .authm-pane, .authm-ink { transition: none; } }
.authm-pane { align-content: start; }
.authm-pane:not(.on) { position: absolute; inset: 0 0 auto 0; }
.authm[data-mode="forgot"] .authm-ink { opacity: 0; }
.authm-sent { display: flex; gap: 12px; align-items: flex-start; background: #DCFCE7; border: 2px solid #86EFAC; border-radius: 16px; padding: 12px 14px; animation: qIn .4s var(--ease-pop, ease); }
.authm-sent[hidden] { display: none; }
.authm-sent span { font-size: 32px; line-height: 1; } .authm-sent p { margin: 0; font-size: 14px; color: #14532D; line-height: 1.45; }

/* ---------- Modo família com PIN ---------- */
.famm { text-align: center; }
.famm-ic { width: 64px; height: 64px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 20px; background: #22C55E; color: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.famm-ic.lock { background: #FFB800; color: var(--ink); }
.famm p { text-align: center; }
.famm form { display: grid; gap: 12px; text-align: left; }
.famm-check { display: flex !important; gap: 10px; align-items: flex-start; background: var(--bg); border-radius: 14px; padding: 12px; cursor: pointer; margin: 0 !important; }
.famm-check input { width: 20px; height: 20px; accent-color: #22C55E; flex: none; margin-top: 2px; }
.famm-check span { display: grid; gap: 2px; font-weight: 600; } .famm-check small { color: var(--muted); font-weight: 600; font-size: 13px; }
.famm-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .famm-pins[hidden] { display: none; } .famm-pins label { margin: 0; font-size: 13px; }
.modal input.pin-in { text-align: center; font: 800 24px var(--display); letter-spacing: .45em; padding: 10px 0 10px .45em; }
.modal input.pin-in.big { font-size: 34px; padding: 14px 0 14px .45em; }
.famm .err { margin: 0; text-align: center; color: #BE123C; font-weight: 700; }
.famm .btn { width: 100%; }
.famm-forgot { margin-top: 12px; text-align: left; font-size: 13px; color: var(--muted); }
.famm-forgot summary { cursor: pointer; font-weight: 800; color: var(--violet); text-align: center; }
.famm-forgot p { text-align: left !important; margin: 8px 0 0; }
.modal.nope { animation: amNope .45s; }

/* ---------- Missões semanais dos Originals ---------- */
/* moeda de medalha: usada na página, no banner e no perfil */
.mission-mark, .ms-coin { display:grid; place-items:center; flex:none; color:var(--ink); border:3px solid var(--ink); border-radius:50%; background:radial-gradient(circle at 30% 24%, #fff8c9, var(--gold) 58%, #ee8a00); box-shadow:inset 0 -5px 0 rgba(0,0,0,.14), 0 3px 0 var(--ink); }
.mission-mark { width:54px; height:54px; }
.pf-missions { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap:18px; margin:18px 0 26px; }
.mission-banner { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:16px 20px; margin:18px 0 26px; color:#fff; background:radial-gradient(circle at 92% 0, color-mix(in srgb, var(--lime) 30%, transparent), transparent 40%), linear-gradient(120deg, #4a27b8, var(--ink) 80%); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--violet); transition:transform .2s var(--ease-pop), box-shadow .2s; }
.pf-missions .mission-banner { margin:0; }
.mission-banner:hover { transform:translateY(-3px); box-shadow:0 8px 0 var(--violet); }
.mission-banner-copy { flex:1; min-width:0; color:#fff; text-decoration:none; }
.mission-banner strong { display:block; font:800 20px var(--display); }
.mission-banner small { display:block; margin-top:3px; color:#d9ccff; font-size:14px; }
.mission-banner-cta { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px; background:var(--lime); color:var(--ink); border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink); font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap; transition:transform .15s, box-shadow .15s; }
.mission-banner-cta:hover { transform:translateY(-2px); box-shadow:0 5px 0 var(--ink); }
.mission-banner-cta:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
/* celular: medalha + texto na 1ª linha e o botão inteiro embaixo (o texto não pode ser espremido numa coluna fina entre a medalha e o botão) */
@media (max-width:560px) {
  .mission-banner { align-items:flex-start; gap:12px 14px; }
  .mission-banner-copy { flex:1 1 calc(100% - 72px); align-self:center; }
  .mission-banner-cta { flex:1 1 100%; justify-content:center; padding:11px 16px; font-size:16px; }
}
.mission-shelf { margin:28px 0; }
.mission-medals { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:14px; }
.mission-medal { display:flex; align-items:center; gap:14px; padding:16px; border:3px solid var(--ink); border-radius:20px; background:#fff; box-shadow:0 4px 0 var(--ink); }
.mission-medal .mission-mark { width:56px; height:56px; }
.mission-medal>div { min-width:0; }
.mission-medal strong { display:block; font:800 16px var(--display); }
.mission-medal small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.mission-medal>div>span { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--violet); margin-top:6px; }

/* página /missoes */
.ms-page { max-width:1100px; margin:12px auto 40px; }
.ms-page .back-link { margin-bottom:14px; }
.ms-hero { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:clamp(18px, 4vw, 48px); padding:clamp(22px, 4vw, 40px); color:#fff; border:3px solid var(--ink); border-radius:30px; box-shadow:var(--sticker);
  background:radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--lime) 34%, transparent), transparent 36%), radial-gradient(circle at 2% 112%, color-mix(in srgb, var(--pink) 48%, transparent), transparent 44%), linear-gradient(135deg, #4a27b8 0%, #2a1766 55%, var(--ink) 100%); }
.ms-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.6px) 0 0 / 22px 22px; }
.ms-spark { position:absolute; z-index:-1; color:var(--gold); font-size:30px; animation:msTwinkle 3s ease-in-out infinite; }
.ms-spark.s1 { top:14%; left:48%; } .ms-spark.s2 { bottom:12%; right:32%; color:var(--lime); font-size:22px; animation-delay:-1s; } .ms-spark.s3 { top:10%; right:42%; color:var(--cyan); font-size:18px; animation-delay:-2s; }
.ms-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:var(--lime); color:var(--ink); border:2px solid var(--ink); border-radius:99px; box-shadow:0 3px 0 var(--ink); font-size:12px; font-weight:800; letter-spacing:.05em; }
.ms-hero h1, .ms-hero h2.ms-title { font-size:clamp(34px, 6vw, 58px); margin:14px 0 10px; text-shadow:0 4px 0 rgba(0,0,0,.3); }
.ms-lead { max-width:46ch; margin:0 0 18px; color:#e6dcff; font-size:clamp(15px, 2vw, 18px); }
.ms-lead b { color:var(--lime); }
.ms-meta { display:flex; flex-wrap:wrap; gap:10px; }
.ms-meta span { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; background:rgb(255 255 255 / .12); border:2px solid rgb(255 255 255 / .22); font-size:14px; font-weight:700; }
.ms-meta b { color:var(--lime); }
.ms-reward { display:grid; justify-items:center; gap:4px; min-width:150px; text-align:center; }
.ms-ring { --p:0; position:relative; display:grid; place-items:center; width:clamp(132px, 18vw, 184px); aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--lime) calc(var(--p) * 1%), rgb(255 255 255 / .18) 0); filter:drop-shadow(0 8px 0 rgba(0,0,0,.28)); }
.ms-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:#241257; }
.ms-ring .ms-coin { position:relative; width:72%; aspect-ratio:1; border-width:4px; animation:msFloat 3.2s ease-in-out infinite; }
.ms-hero:not(.is-earned) .ms-ring .ms-coin { filter:grayscale(.5) brightness(.92); }
.ms-hero.is-earned .ms-ring { animation:msGlow 2.4s ease-in-out infinite; }
.ms-lock { position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; border:2px solid #fff; }
.ms-reward strong { margin-top:10px; font:800 18px var(--display); }
.ms-reward small { color:#d9ccff; font-size:13px; font-weight:700; }

.ms-login { display:flex; align-items:center; gap:18px; margin:22px 0 0; padding:14px 20px; background:var(--lime); border:3px solid var(--ink); border-radius:24px; box-shadow:0 5px 0 var(--ink); }
.ms-login>div { flex:1; min-width:0; }
.ms-login strong { display:block; font:800 20px var(--display); }
.ms-login p { margin:3px 0 0; font-size:14px; }
.ms-login .btn { flex:none; }

.ms-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin:28px 0; }
.ms-card { --c:var(--a, var(--violet)); position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:#fff; border:3px solid var(--ink); border-radius:26px; box-shadow:0 6px 0 var(--ink); transition:transform .25s var(--ease-pop), box-shadow .25s; animation:msRise .55s var(--ease-pop) both; animation-delay:calc(var(--i) * .09s); }
.ms-card:hover { transform:translateY(-5px); box-shadow:0 11px 0 var(--ink); }
.ms-card.is-done { --c:#2fb457; }
.ms-cover { position:relative; display:grid; place-items:center; min-height:156px; padding:18px; border-bottom:3px solid var(--ink); background:radial-gradient(rgb(255 255 255 / .35) 2px, transparent 2.4px) 0 0 / 18px 18px, linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 68%, #000)); }
.ms-num { position:absolute; top:12px; left:12px; padding:3px 10px; background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.05em; }
.ms-stamp { position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; background:var(--lime); color:var(--ink); border:3px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 var(--ink); font-size:12px; font-weight:800; letter-spacing:.06em; transform:rotate(8deg); animation:msStamp .55s var(--ease-pop) both; }
.ms-thumb { width:104px; height:104px; object-fit:cover; border:4px solid #fff; border-radius:24px; box-shadow:0 0 0 3px var(--ink), 0 8px 0 3px var(--ink); transform:rotate(-4deg); transition:transform .3s var(--ease-pop); background:var(--soft); }
.ms-card:hover .ms-thumb { transform:rotate(3deg) scale(1.06); }
.ms-game { position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px); padding:3px 10px; background:var(--ink); color:#fff; border-radius:10px; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-body { display:flex; flex-direction:column; flex:1; padding:20px; }
.ms-body h2 { margin:0 0 6px; font-size:22px; }
.ms-body>p { flex:1; margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.55; }
.ms-prog { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.ms-prog b { color:var(--c); font:800 32px/1 var(--display); }
.ms-prog small { color:var(--muted); font-size:16px; font-weight:700; }
.ms-prog span { padding:3px 9px; background:var(--bg); border-radius:99px; font-size:13px; font-weight:800; }
.ms-bar { height:18px; margin-bottom:18px; overflow:hidden; background:var(--bg); border:3px solid var(--ink); border-radius:99px; }
.ms-bar i { display:block; height:100%; width:var(--w); border-radius:99px; background:repeating-linear-gradient(-45deg, rgb(255 255 255 / .3) 0 8px, transparent 8px 16px), var(--c); animation:msFill 1s .25s var(--ease-pop) both; }
.ms-card.is-done .ms-bar i { background:var(--c); }

.ms-h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.ms-h h2 { font-size:clamp(22px, 3vw, 28px); }
.ms-h span { padding:4px 12px; background:var(--ink); color:#fff; border-radius:99px; font-size:13px; font-weight:800; }
.ms-coll { margin:36px 0; }
.ms-slots { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; padding-top:8px; }
.ms-slot { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:24px 12px 16px; text-align:center; color:var(--muted); background:#fff; border:3px dashed #b9abdf; border-radius:22px; }
.ms-slot .ms-coin { width:70px; height:70px; filter:grayscale(1) opacity(.42); box-shadow:none; }
.ms-slot strong { margin-top:8px; color:var(--ink); font:800 16px var(--display); }
.ms-slot small { font-size:12px; font-weight:700; }
.ms-slot em { margin-top:6px; font-size:11px; font-style:normal; line-height:1.45; }
.ms-slot.is-owned { color:var(--ink); border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink); }
.ms-slot.is-owned .ms-coin { filter:none; box-shadow:inset 0 -5px 0 rgba(0,0,0,.14), 0 3px 0 var(--ink); }
.ms-slot.is-now:not(.is-owned) { border-color:var(--violet); }
.ms-ribbon { position:absolute; top:-12px; left:50%; padding:3px 11px; transform:translateX(-50%); background:var(--violet); color:#fff; border:2px solid var(--ink); border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; }
.ms-next { display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px 18px; background:var(--soft); border:2px dashed var(--violet); border-radius:20px; }
.ms-next .ms-coin { width:56px; height:56px; filter:grayscale(.6); }
.ms-next small { display:block; color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.06em; }
.ms-next strong { display:block; font:800 17px var(--display); }
.ms-next span:not(.ms-coin) { color:var(--muted); font-size:13px; }

.ms-how { margin:36px 0 0; }
.ms-how ol { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:0; padding:0; list-style:none; }
.ms-how li { display:flex; align-items:flex-start; gap:12px; padding:16px; background:#fff; border:2px solid var(--ink); border-radius:20px; box-shadow:0 4px 0 var(--soft); }
.ms-how li>b { flex:none; display:grid; place-items:center; width:38px; height:38px; background:var(--violet); color:#fff; border:2px solid var(--ink); border-radius:12px; font:800 18px var(--display); }
.ms-how li:nth-child(2)>b { background:var(--pink); } .ms-how li:nth-child(3)>b { background:var(--ink); color:var(--lime); }
.ms-how strong { display:block; font:800 16px var(--display); }
.ms-how li span { color:var(--muted); font-size:13px; }
.ms-rules { margin-top:14px; padding:14px 18px; background:#fff; border:2px solid var(--soft); border-radius:16px; }
.ms-rules summary { cursor:pointer; font-weight:800; }
.ms-rules p { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }

@keyframes msFloat { 0%, 100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }
@keyframes msTwinkle { 0%, 100% { opacity:.25; transform:scale(.8) rotate(0); } 50% { opacity:1; transform:scale(1.15) rotate(20deg); } }
@keyframes msRise { from { opacity:0; transform:translateY(22px) scale(.97); } }
@keyframes msStamp { from { opacity:0; transform:rotate(-18deg) scale(2.2); } }
@keyframes msFill { from { width:0; } }
@keyframes msGlow { 0%, 100% { filter:drop-shadow(0 8px 0 rgba(0,0,0,.28)) drop-shadow(0 0 10px rgb(198 244 50 / .35)); } 50% { filter:drop-shadow(0 8px 0 rgba(0,0,0,.28)) drop-shadow(0 0 26px rgb(198 244 50 / .85)); } }
@media (prefers-reduced-motion: reduce) { .ms-card, .ms-stamp, .ms-bar i, .ms-spark, .ms-ring .ms-coin, .ms-hero.is-earned .ms-ring { animation:none; } .ms-card, .ms-thumb { transition:none; } }
@media (max-width:1100px) {
  .ms-slots { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .ms-slots { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ms-slot:last-child:nth-child(odd) { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .mission-banner { gap:12px; padding:14px 16px; flex-wrap:wrap; }
  .mission-banner strong { font-size:17px; }
  .mission-banner small { font-size:13px; }
  .ms-hero { grid-template-columns:1fr; border-radius:24px; }
  .ms-reward { order:-1; grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:0 16px; min-width:0; text-align:left; }
  .ms-ring { grid-row:span 2; width:112px; }
  .ms-reward strong { margin-top:0; align-self:end; font-size:17px; }
  .ms-reward small { align-self:start; }
  .ms-spark.s1 { left:auto; right:14%; }
  .ms-login { align-items:stretch; flex-direction:column; gap:12px; text-align:center; }
  .ms-login .blob { align-self:center; }
  .ms-grid { grid-template-columns:1fr; gap:18px; }
  .ms-cover { min-height:132px; }
  .ms-how ol { grid-template-columns:1fr; }
}

/* ---------- Escolha do Zovy: selo de curadoria ---------- */
.t-pick { position: absolute; left: 7px; bottom: 7px; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 var(--ink); transition: opacity .18s; pointer-events: none; }
.t-pick svg { width: 13px; height: 13px; fill: currentColor; }
.t-big .t-pick { left: 10px; bottom: 10px; width: 30px; height: 30px; } .t-big .t-pick svg { width: 17px; height: 17px; }
.t-xl .t-pick { left: 14px; bottom: 14px; width: 38px; height: 38px; box-shadow: 0 3px 0 var(--ink); } .t-xl .t-pick svg { width: 22px; height: 22px; }
.t:hover .t-pick, .t:focus-visible .t-pick { opacity: 0; }                        /* o nome do jogo aparece embaixo ao passar o mouse */
.pill.pick { background: var(--gold); color: var(--ink); text-decoration: none; border: 2px solid var(--ink); padding: 1px 9px; } .pill.pick svg { fill: currentColor; }
.pick-box { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; background: color-mix(in srgb, var(--gold) 18%, #fff); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); }
.pick-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; } .pick-ic svg { fill: currentColor; }
.pick-box strong { font: 800 17px var(--display); } .pick-box p { margin: 3px 0 6px; font-size: 15px; line-height: 1.45; }
.pick-box a { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 14px; color: var(--violet); text-decoration: none; }
.chip-pick svg { fill: currentColor; }

/* ---------- Brilho que atravessa a capa ao passar o mouse (só CSS, só em aparelho com mouse) ---------- */
.t::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 35%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .22) 38%, rgb(255 255 255 / .75) 50%, rgb(255 255 255 / .22) 62%, rgb(255 255 255 / 0) 100%); transform: skewX(-20deg); }
.t .t-name, .t .badge, .t .rt-xs { z-index: 2; }                                   /* nome e selos ficam por cima do brilho */
@keyframes shineSweep { 0% { opacity: 0; transform: translateX(0) skewX(-20deg); } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(440%) skewX(-20deg); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .t:hover::after, .t:focus-visible::after { animation: shineSweep .75s ease-in-out; }
}
@media (prefers-reduced-motion: no-preference) {
  .t.is-auto-shine::after { animation:shineSweep 1.05s ease-in-out; }
}

/* ---------- Missões do dia ---------- */
.dq { margin: 0 0 44px; }
.dq-hero { padding: clamp(18px, 3vw, 30px); }
.dq-hero h1 { font-size: clamp(30px, 5vw, 46px); }
.dq-hero .ms-ring { width: clamp(112px, 15vw, 150px); }
.dq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 16px; }
.dq-card { --c: var(--a, var(--violet)); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 58px 20px 20px; overflow: hidden; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); transition: transform .25s var(--ease-pop), box-shadow .25s; animation: msRise .55s var(--ease-pop) both; animation-delay: calc(var(--i) * .09s); }
.dq-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink); }
.dq-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 46px; background: var(--c); border-bottom: 3px solid var(--ink); }
.dq-card.is-done { --c: #2fb457; }
.dq-card .ms-num { top: 9px; left: 12px; }
.dq-card .ms-stamp { top: 6px; right: 10px; }
.dq-ic { width: 64px; height: 64px; margin: -6px 0 12px; }
.dq-card h2 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; }
.dq-card > p { flex: 1; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.dq-card .ms-bar { margin-bottom: 16px; }
.dq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.dq-xp { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--soft); border: 2px solid var(--ink); border-radius: 99px; font-size: 13px; font-weight: 800; }
.dq-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.dq-note svg { flex: none; margin-top: 3px; }
.fun-quests { background: linear-gradient(120deg, #F0FFC2, #fff 62%); }
.fun-quests.is-all { background: linear-gradient(120deg, var(--lime), #F0FFC2 75%); }
.fq-ring { --p: 0; position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; background: conic-gradient(var(--violet) calc(var(--p) * 1%), var(--soft) 0); border: 3px solid var(--ink); border-radius: 50%; }
.fq-ring::before { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.fq-ring b, .fq-ring svg { position: relative; }
.fq-ring b { font: 800 17px var(--display); }
.fq-ring svg { color: var(--violet); }
.fun-quests .fun-txt strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .dq-card { animation: none; transition: none; } }
@media (max-width: 760px) {
  .dq-grid { grid-template-columns: 1fr; gap: 18px; }
  .dq-hero { border-radius: 24px; }
  .fq-ring { width: 52px; height: 52px; } .fq-ring::before { inset: 5px; } .fq-ring b { font-size: 14px; }
}

/* ---------- Entrar com o Google ---------- */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 18px; background: #fff; color: #1F1F1F; border: 3px solid var(--ink); border-radius: 99px; box-shadow: 0 4px 0 var(--ink); font: 700 17px/1.2 var(--ui); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease-pop), box-shadow .15s; }
.gbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.gbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.gbtn .gglyph { flex: none; }
.gbtn-inline { width: auto; display: inline-flex; padding: 10px 20px; font-size: 16px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 !important; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: var(--soft); border-radius: 2px; }
.authm-pane .gbtn { font-size: 16px; padding: 11px 16px; }
.authm-pane .auth-or { margin: 12px 0 !important; }
@media (prefers-reduced-motion: reduce) { .gbtn { transition: none; } }

/* ---------- Jogue com a galera (faixa da home, v1.82.0) ---------- */
.galera-home { position: relative; display: grid; gap: 16px; margin: 0 0 30px; padding: 20px; overflow: hidden; color: #fff; background: radial-gradient(circle at 92% 0, rgb(46 230 255 / .35), transparent 40%), radial-gradient(circle at 0 100%, rgb(255 79 163 / .4), transparent 45%), linear-gradient(135deg, #5B2EE0, #3a1aa8 60%, #2a1180); border-radius: 28px; box-shadow: var(--sticker); }
.gh-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.gh-tag { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; font: 800 12px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.gh-tag::before { content: ""; width: 8px; height: 8px; background: #ff3b5c; border-radius: 50%; animation: ghLive 1.4s ease-in-out infinite; }
@keyframes ghLive { 50% { opacity: .25; } }
.gh-head h2 { grid-column: 1; margin: 2px 0 0; font: 800 clamp(24px, 4vw, 34px)/1.05 var(--display); }
.gh-head p { grid-column: 1; margin: 0; color: #e9e2ff; font-size: 15px; } .gh-head p b { color: var(--lime); }
.gh-all { grid-column: 2; grid-row: 1 / 4; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.gh-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 10px; margin: 0 -4px; }
.gh-card { scroll-snap-align: start; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 10px; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); transition: translate .15s var(--ease-pop, ease); }
.gh-card:hover { translate: 0 -3px; }
.gh-cover img { display: block; width: 76px; height: 76px; object-fit: cover; border: 3px solid var(--ink); border-radius: 16px; background: var(--soft); }
.gh-txt { display: grid; gap: 4px; min-width: 0; }
.gh-txt a { color: inherit; text-decoration: none; }
.gh-txt b { display: flex; align-items: center; gap: 6px; font: 800 17px/1.15 var(--display); }
.gh-txt b svg { flex: none; color: var(--sc); }
.gh-txt small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.gh-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gh-btns .btn { padding: 8px 8px; border-radius: 12px; font-size: 14px; gap: 5px; white-space: nowrap; }
.gh-quick { background: var(--cyan); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gh-new { box-shadow: 0 3px 0 var(--ink); }
@media (max-width: 640px) {
  .galera-home { padding: 16px 14px; border-radius: 22px; }
  .gh-head { grid-template-columns: minmax(0, 1fr); } .gh-all { grid-column: 1; grid-row: auto; justify-self: start; padding: 8px 14px; }
  .gh-row { grid-auto-columns: minmax(250px, 82%); }
}

/* ---------- Banners da casa (HouseAds): Zovy Originals nos espaços de anúncio vazios. Faixa 728×90 (celular 100% × ~96) e caixa 300×250. Cor do jogo em --hc. ---------- */
.ad-house { min-height: 0 !important; }
.hb { --hc: var(--violet); position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; color: #fff; text-decoration: none; border: 3px solid var(--ink); border-radius: 18px; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hc) 55%, transparent), transparent 60%), radial-gradient(rgb(255 255 255 / .08) 1px, transparent 1.2px) 0 0 / 16px 16px, var(--ink);
  box-shadow: 4px 4px 0 var(--hc); transition: translate .15s var(--ease-pop), box-shadow .15s; }
.hb:hover { translate: 0 -2px; box-shadow: 6px 6px 0 var(--hc); }
.hb:active { translate: 0 2px; box-shadow: 1px 1px 0 var(--hc); }
.hb-cover { flex: none; object-fit: cover; background: #2A1C4F; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 3px 0 rgb(0 0 0 / .35); }
.hb-kick { display: inline-flex; align-items: center; gap: 4px; color: var(--lime); font: 800 10.5px/1 var(--ui); letter-spacing: .08em; white-space: nowrap; }
.hb-name { display: block; overflow: hidden; font: 800 20px/1.05 var(--display); letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.hb-tag { display: block; overflow: hidden; color: #D9CFF7; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.hb-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; color: var(--ink); font: 800 14px/1 var(--ui); white-space: nowrap; background: var(--lime); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.hb-wide { width: 728px; max-width: 100%; height: 90px; padding: 0 14px 0 9px; }
.hb-wide .hb-cover { width: 66px; height: 66px; rotate: -4deg; }
.hb-txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.hb-box { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; width: 300px; max-width: 100%; height: 250px; padding: 12px; }
.hb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hb-box .hb-cover { width: 112px; height: 112px; rotate: -5deg; }
.hb-box .hb-kick { display: block; text-align: right; white-space: normal; line-height: 1.35; margin-top: 4px; }
.hb-box .hb-kick svg { vertical-align: -2px; margin-right: 3px; }
.hb-box .hb-tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.hb-box .hb-name { font-size: 22px; }
.hb-box .hb-cta { margin-top: auto; padding: 10px; font-size: 15px; }
.mosaic > .ad-grid.ad-house { padding: 0; background: none; }
.mosaic > .ad-grid .hb-box { width: 100%; height: 100%; max-height: 100%; }
.mosaic > .ad-grid .hb-box .hb-cover { width: 48%; height: auto; aspect-ratio: 1; }
.mosaic > .ad-grid .hb-box .hb-name { font-size: clamp(18px, 2vw, 24px); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hb::after { content: ""; position: absolute; inset: 0 auto 0 -40%; z-index: -1; width: 30%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent); transform: skewX(-20deg); animation: hbShine 4.5s ease-in-out infinite; }
  .hb:hover .hb-cover { rotate: 0deg; scale: 1.05; }
  .hb-cover { transition: rotate .25s var(--ease-pop), scale .25s var(--ease-pop); }
}
@keyframes hbShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@media (max-width: 560px) {
  .hb-wide { width: 100%; height: 96px; gap: 10px; padding: 0 10px 0 8px; }
  .hb-wide .hb-cover { width: 64px; height: 64px; }
  .hb-wide .hb-name { font-size: 18px; }
  .hb-wide .hb-tag { font-size: 12px; }
  .hb-wide .hb-cta { padding: 10px; }
  .hb-wide .hb-cta span { display: none; }
}

/* ---------- Página do jogo: área abaixo da barra (v1.85.1) — faixa dos jogos da galera + linha discreta com missões do dia e "Problema no jogo?" ---------- */
.under { display: grid; gap: 10px; padding: 12px 14px 12px; border-top: 2px solid var(--soft); background: #FBF9FF; }
.gal-line { --sc: var(--violet); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; color: #fff; border: 2px solid var(--ink); border-radius: 16px;
  background: radial-gradient(70% 180% at 0% 50%, color-mix(in srgb, var(--sc) 42%, transparent), transparent 70%), var(--ink); }
.gal-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); background: var(--sc); border: 2px solid #fff; border-radius: 12px; rotate: -6deg; }
.gal-copy { display: grid; gap: 1px; flex: 1; min-width: 0; margin: 0; line-height: 1.25; }
.gal-copy b { font: 800 16px/1.15 var(--display); }
.gal-copy span { color: #D9CFF7; font-size: 13.5px; font-weight: 600; }
.gal-btns { flex: none; display: flex; align-items: center; gap: 8px; }
.gal-btn, .gal-more { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; font: 800 14px/1 var(--ui); white-space: nowrap; text-decoration: none; border-radius: 12px; transition: translate .15s var(--ease-pop), box-shadow .15s, background .15s; }
.gal-btn { color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 rgb(0 0 0 / .45); }
.gal-btn:hover { translate: 0 -2px; box-shadow: 0 5px 0 rgb(0 0 0 / .45); }
.gal-btn:active { translate: 0 2px; box-shadow: 0 1px 0 rgb(0 0 0 / .45); }
.gal-main { background: var(--lime); }
.gal-quick { background: var(--cyan); }
.gal-more { color: #fff; padding: 0 10px 0 6px; background: rgb(255 255 255 / .08); border: 2px solid rgb(255 255 255 / .2); }
.gal-more:hover { background: rgb(255 255 255 / .15); border-color: var(--lime); }
.gal-stack { display: flex; padding-left: 10px; }
.gal-stack img { width: 28px; height: 28px; margin-left: -10px; object-fit: cover; background: #2A1C4F; border: 2px solid #fff; border-radius: 8px; rotate: calc((var(--i) - 1) * 6deg); }
.subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.dq-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; background: #fff; border: 2px solid var(--soft); border-radius: 99px; transition: border-color .15s, translate .15s var(--ease-pop); }
.dq-chip:hover { border-color: var(--ink); translate: 0 -1px; }
.dq-chip > svg { color: var(--violet); }
.dq-dots { display: inline-flex; gap: 3px; font-style: normal; }
.dq-dots i { width: 9px; height: 9px; background: var(--soft); border: 1.5px solid var(--ink); border-radius: 50%; }
.dq-dots i.on { background: var(--lime); }
.dq-chip b { font-weight: 800; }
.subbar .report-btn { margin-left: auto; }
@media (max-width: 900px) {
  .gal-line { flex-wrap: wrap; }
  .gal-btns { width: 100%; }
  .gal-btns .gal-btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
  .under { padding: 10px; }
  .gal-copy span { font-size: 13px; }
  .gal-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .gal-more { grid-column: 1 / -1; justify-content: center; }
  .dq-chip { font-size: 13px; gap: 6px; }
  .dq-today { display: none; }
  .subbar { flex-wrap: nowrap; }
  .subbar .report-btn { font-size: 12.5px; white-space: nowrap; }
}

/* ---------- Faixa "Especial da época" da home mais baixa (v1.85.2): capas numa fileira só ---------- */
.season { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); padding: 16px 22px; gap: 22px; }
.season-txt { gap: 6px; }
.season strong { font-size: clamp(24px, 2.6vw, 34px); }
.season small { font-size: 14px; }
.season .btn { margin-top: 4px; padding: 10px 18px; font-size: 15px; }
.season-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.season-thumbs img:nth-child(n+7) { display: none; }
@media (max-width: 1100px) { .season-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .season-thumbs img:nth-child(n+6) { display: none; } }
@media (max-width: 720px) { .season { grid-template-columns: 1fr; padding: 16px; gap: 14px; } .season-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .season-thumbs img:nth-child(n+5) { display: none; } }

/* ---------- Fileiras com capas menores (v1.85.3, pedido do Ally): 190 → 150 px no computador, 148 → 124 px no celular; faixa do "momento" mais baixa ---------- */
.rail-track { grid-auto-columns: 150px; }
.moment { min-height: 250px; }
.moment > .moment-head { min-height: 72px; padding: 12px 20px; margin-bottom: 12px; border-radius: 20px; }
.moment-txt strong { font-size: clamp(20px, 2.4vw, 26px); }
.moment-txt small { font-size: 14px; }
.moment-skel { grid-auto-columns: 150px; padding-top: 84px; }
@media (max-width: 760px) {
  .rail-track, .moment-skel { grid-auto-columns: 124px; }
  .moment { min-height: 216px; }
  .moment > .moment-head { min-height: 64px; padding: 10px 16px; }
  .moment-txt small { font-size: 12.5px; }
}

/* ---------- Jogos da galera no topo da home, só no celular (v1.86.0): fileira tipo "stories" logo acima da grade; a faixa grande .galera-home some no celular ---------- */
.gh-mob { display: none; }
@media (max-width: 760px) {
  .galera-home { display: none; }
  .gh-mob { display: grid; gap: 10px; margin: 0 0 16px; padding: 12px 0 10px; color: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink);
    background: radial-gradient(70% 120% at 100% 0%, rgb(255 79 163 / .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgb(46 230 255 / .22), transparent 60%), radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.2px) 0 0 / 16px 16px, var(--ink); }
  .ghm-head { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
  .ghm-head b { font: 800 17px/1.1 var(--display); }
  .ghm-head a { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--lime); font-size: 13px; font-weight: 800; text-decoration: none; }
  .ghm-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; color: var(--ink); font: 800 10.5px/1 var(--ui); letter-spacing: .06em; background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; }
  .ghm-live i { width: 7px; height: 7px; background: #FF3B5C; border-radius: 50%; }
  .ghm-row { display: grid; grid-auto-flow: column; grid-auto-columns: 80px; gap: 10px; overflow-x: auto; padding: 4px 12px 2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ghm-row::-webkit-scrollbar { display: none; }
  .ghm-item { --sc: var(--lime); display: grid; justify-items: center; gap: 5px; color: #fff; text-decoration: none; scroll-snap-align: start; }
  .ghm-ring { display: grid; place-items: center; width: 72px; height: 72px; padding: 3px; border-radius: 22px; background: conic-gradient(from 200deg, var(--sc), #fff 35%, var(--sc) 70%, var(--sc)); }
  .ghm-ring img { width: 100%; height: 100%; object-fit: cover; background: #2A1C4F; border: 2px solid var(--ink); border-radius: 19px; }
  .ghm-quick .ghm-ring { color: var(--ink); background: var(--cyan); border: 2px solid var(--ink); box-shadow: 0 3px 0 rgb(0 0 0 / .45); }
  .ghm-quick .ghm-ring svg { fill: currentColor; }
  .ghm-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; color: #E9E2FF; font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center; }
  .ghm-item:active .ghm-ring { scale: .94; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ghm-live i { animation: ghLive 1.4s ease-in-out infinite; }
  .ghm-quick .ghm-ring { animation: ghmPulse 2.4s ease-in-out infinite; }
}
@keyframes ghmPulse { 0%, 100% { box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 0 0 rgb(46 230 255 / .55); } 60% { box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 0 10px rgb(46 230 255 / 0); } }

/* ---------- Vídeo de prévia (v1.87.0): por cima da capa ao passar o mouse e no fundo da tela do jogo ---------- */
.t > .t-vid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.t.is-vid > .t-vid { opacity: 1; }
.t.is-vid > img { transform: none; }
.cover > .cover-vid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cover.is-vid > .cover-vid { opacity: 1; }
.cover > .cover-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(75% 75% at 50% 45%, rgb(20 12 40 / .45), rgb(20 12 40 / .78)); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cover.is-vid > .cover-shade { opacity: 1; }

/* ---------- Página /temas (v1.88.0) ---------- */
.tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 30px; }
.tema { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--ink); text-decoration: none; background: #fff; border: 2px solid var(--soft); border-radius: 16px; transition: border-color .15s, translate .15s var(--ease-pop); }
.tema:hover { border-color: var(--ink); translate: 0 -2px; }
.tema-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: var(--violet); background: #EFE8FF; border-radius: 12px; }
.tema-t { display: grid; min-width: 0; }
.tema-t b { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.tema-t small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
@media (max-width: 560px) { .tema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tema { padding: 8px 10px; gap: 8px; } .tema-ic { width: 32px; height: 32px; } .tema-t b { font-size: 14px; } }

/* ---------- Lembrete do Desafio do Dia (v1.121.0): cartão [data-remind] e pílula da página do jogo ---------- */
.remind { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
.remind[hidden] { display: none; }
.remind-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 14px; }
.remind.is-on .remind-ic { background: var(--soft); color: var(--violet); }
.remind-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.remind-txt b { font: 800 17px/1.2 var(--display); letter-spacing: -.01em; }
.remind-txt small { color: var(--muted); font-size: 14px; line-height: 1.45; font-weight: 600; }
.remind-btn { flex: none; padding: 10px 16px; font-size: 15px; white-space: nowrap; }
.remind-btn[hidden] { display: none; }
.remind.is-busy .remind-btn { opacity: .6; cursor: progress; }
.remind-ms { margin-top: 4px; }
.remind-app { margin-top: 18px; max-width: 560px; }
@media (prefers-reduced-motion: no-preference) {
  .remind:not(.is-on) .remind-ic svg { transform-origin: 50% 10%; animation: remindRing 4.5s ease-in-out infinite; }
}
@keyframes remindRing { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: 14deg; } 90% { rotate: -12deg; } 93% { rotate: 8deg; } 96% { rotate: -5deg; } }
@media (max-width: 560px) {
  .remind { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .remind-txt { flex-basis: calc(100% - 60px); }
  .remind-btn { width: 100%; justify-content: center; }
}
.remind-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; color: var(--ink); font: 700 13.5px var(--ui); background: #fff; border: 2px solid var(--soft); border-radius: 99px; cursor: pointer; transition: border-color .15s, translate .15s var(--ease-pop); white-space: nowrap; }
.remind-chip[hidden] { display: none; }
.remind-chip:hover { border-color: var(--ink); translate: 0 -1px; }
.remind-chip > svg { color: var(--violet); }
.remind-chip.on { background: var(--lime); border-color: var(--ink); }
.remind-chip.on > svg { color: var(--ink); }
.remind-chip:disabled { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
  .remind-chip { font-size: 13px; padding: 5px 10px 5px 8px; }
  .remind-chip [data-remind-chip-t] { display: none; }
  .remind-chip::after { content: attr(data-short); }
}

/* barra abaixo do jogo (v1.122.3): com o palco largo, nome à esquerda e botões sempre à direita na mesma linha; se o nome + selos não couberem, os selos descem embaixo do nome. Palco estreito: os botões ocupam a linha de baixo inteira, espalhados (antes caíam todos à esquerda) */
.game-mosaic .stage { container-type: inline-size; }
@container (min-width: 760px) {
  .bar { flex-wrap: nowrap; }
  .bar-title { flex: 1 1 auto; min-width: 0; row-gap: 4px; }
  .bar-title strong { flex: 0 1 auto; min-width: 0; }
  .bar-actions { flex: none; flex-wrap: nowrap; margin-left: auto; }
}
@container (max-width: 759.98px) {
  .bar-actions { width: 100%; justify-content: space-between; }
}

/* ---------- App Android (TWA br.com.zovy.app, v1.126.0) ----------
   html.in-app = página aberta pelo app (marcado no <head> por ?app=android ou referrer android-app://, guardado no sessionStorage da aba).
   Só os Zovy Originals: sem busca, categorias, atalhos do site e rodapé; barra de baixo própria (.apptab). Fora do app nada muda. */
.apptab, .app-intro { display: none; }
html.in-app .search, html.in-app .hs, html.in-app .dock-nav > a:not(.login), html.in-app .dock-nav > button.fam,
html.in-app .foot, html.in-app .tabbar, html.in-app .rebrand-notice, html.in-app [data-pwa-bar],
html.in-app .pg-game .game-mosaic > .t, html.in-app .pg-game .tags, html.in-app .pg-game .similar-link, html.in-app .pg-game .crumbs { display: none !important; }
html.in-app .dock { justify-content: space-between; }
html.in-app body:not(.app-mode) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
html.in-app body:not(.app-mode) .apptab { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 50; max-width: 560px; margin: 0 auto;
  background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); padding: 6px; }
.apptab a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 800; text-decoration: none; border-radius: 14px; color: var(--muted); -webkit-tap-highlight-color: transparent; transition: background .15s, transform .12s; }
.apptab a.on { color: var(--ink); background: var(--lime); }
.apptab a:active { transform: scale(.94); }
.apptab .tab-ava { width: 26px; height: 26px; border-width: 2px; }

/* Abertura animada do app: começa igual à tela de abertura do Android (mascote no meio do fundo roxo, 120 px) */
html.app-intro-on, html.app-intro-on body { overflow: hidden; }
html.app-intro-on .app-intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 2147483600; background: #7C4DFF; overflow: hidden; transition: opacity .45s ease, transform .45s ease; }
html.app-intro-out .app-intro { opacity: 0; transform: scale(1.08); pointer-events: none; }
.app-intro .ai-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 160px; }
.app-intro .ai-masc { position: absolute; left: 50%; top: 50%; width: 120px; height: auto; margin: -53px 0 0 -60px; transform-origin: 50% 100%; animation: ai-masc 2.2s cubic-bezier(.3, 1.3, .5, 1) both; filter: drop-shadow(0 6px 0 rgb(30 19 56 / .35)); }
.app-intro .ai-word { position: absolute; left: 50%; top: 50%; width: 150px; height: auto; margin: -36px 0 0 -18px; opacity: 0; animation: ai-word 2.2s cubic-bezier(.3, 1.4, .5, 1) both; filter: drop-shadow(0 5px 0 rgb(30 19 56 / .35)); }
.app-intro .ai-ring { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 10px solid var(--lime); opacity: 0; animation: ai-ring 1.4s .45s ease-out both; }
.app-intro .ai-ring.r2 { border-color: var(--pink); animation-delay: .62s; }
.app-intro .ai-spark { position: absolute; left: 50%; top: 50%; }
.app-intro .ai-spark i { position: absolute; width: 8px; height: 22px; margin: -11px 0 0 -4px; border-radius: 6px; background: var(--c); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: ai-spark .9s .5s ease-out both; }
.app-intro .ai-spark i:nth-child(1) { --a: 0deg; --c: #C6F432; } .app-intro .ai-spark i:nth-child(2) { --a: 60deg; --c: #2EE6FF; } .app-intro .ai-spark i:nth-child(3) { --a: 120deg; --c: #FF4FA3; }
.app-intro .ai-spark i:nth-child(4) { --a: 180deg; --c: #FFD45C; } .app-intro .ai-spark i:nth-child(5) { --a: 240deg; --c: #C6F432; } .app-intro .ai-spark i:nth-child(6) { --a: 300deg; --c: #2EE6FF; }
.app-intro .ai-dots { position: absolute; left: 50%; top: calc(50% + 86px); display: flex; gap: 10px; transform: translateX(-50%); opacity: 0; animation: ai-fade .3s 1.25s both; }
.app-intro .ai-dots i { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: ai-dot .7s ease-in-out infinite alternate; }
.app-intro .ai-dots i:nth-child(2) { animation-delay: .15s; background: var(--lime); } .app-intro .ai-dots i:nth-child(3) { animation-delay: .3s; background: var(--pink); }
@keyframes ai-masc {
  0% { transform: translate(0, 0) scale(1, 1); }
  10% { transform: translate(0, 6px) scale(1.14, .82); }
  22% { transform: translate(0, -46px) scale(.92, 1.1) rotate(-6deg); }
  34% { transform: translate(0, 4px) scale(1.12, .86); }
  42% { transform: translate(0, 0) scale(1, 1) rotate(0); }
  52%, 100% { transform: translate(-86px, 0) scale(.82) rotate(-4deg); }
}
@keyframes ai-word { 0%, 44% { opacity: 0; transform: translate(40px, 0) scale(.6); } 58% { opacity: 1; transform: translate(-6px, 0) scale(1.08); } 66%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes ai-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes ai-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-40px) scaleY(.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px) scaleY(1); } }
@keyframes ai-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ai-dot { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .app-intro .ai-masc, .app-intro .ai-word, .app-intro .ai-ring, .app-intro .ai-spark i, .app-intro .ai-dots, .app-intro .ai-dots i { animation: none; }
  .app-intro .ai-masc { transform: translate(-86px, 0) scale(.82); } .app-intro .ai-word, .app-intro .ai-dots { opacity: 1; }
}

/* página do site aberta dentro da tela do app Android (/a): o app já tem a própria barra de cima e a de baixo */
html.in-frame .dock, html.in-frame .apptab, html.in-frame .tabbar, html.in-frame footer, html.in-frame .chips-wrap, html.in-frame .hs, html.in-frame .app-intro { display: none !important; }
html.in-frame body { padding-bottom: 0 !important; }

/* ---------- Páginas de texto (privacidade, termos) no celular, v1.129.1 ----------
   A tabela de 4 colunas da política alargava a página inteira (o texto saía cortado dos dois lados).
   Agora cada linha vira um cartão, com o nome da coluna em cima de cada valor (data-label, posto pelo zovy.js). */
.prose { min-width: 0; overflow-wrap: anywhere; }
.prose table { max-width: 100%; }
@media (max-width: 640px) {
  .prose table.stack { display: block; overflow: visible; border: 0; }
  .prose table.stack thead { display: none; }
  .prose table.stack tbody, .prose table.stack tr, .prose table.stack td { display: block; width: auto; }
  .prose table.stack tr { background: var(--bg); border-radius: 16px; padding: 12px 14px; margin: 0 0 10px; }
  .prose table.stack td { border: 0; padding: 4px 0; }
  .prose table.stack td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); margin-bottom: 1px; }
  .prose table.stack td:first-child { font-weight: 800; color: var(--ink); }
  .prose table.stack td:first-child::before { display: none; }
}